<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用jQuery表单对象属性过滤选择器 </title>
<meta charset="utf-8">
<script language="javascript" type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
body {
font-size: 12px;
text-align: center
}
div {
display: none
}
select {
height: 65px
}
.clsIpt {
width: 100px;
padding: 3px
}
.GetFocus {
border: solid 1px #666;
background-color: #eee
}
#fxm {
float: left;
margin: 100px
}
</style>
<script type="text/javascript">
$(function () {
$("#btn0").click(function () {
window.location.reload();
})
$("#btn1").click(function () {
$("#divA").css("display", "block");
$("#form1 input:enabled").addClass("GetFocus");
})
$("#btn2").click(function () {
$("#divA").css("display", "block");
$("#form1 input:disabled").addClass("GetFocus");
})
$("#btn3").click(function () {
$("#divB").css("display", "block");
$("#form1 input:checked").addClass("GetFocus");
})
$("#btn4").click(function () {
$("#divC").css("display", "block");
$("#Span2").html("" + $("select option:selected").text());
})
})
</script>
</head>
<body>
<form id="form1" style="width:241px">
<div id="divA">
<input type="text" value="hello" class="clsIpt" />
<input type="text" disabled="disabled" value="world " class="clsIpt" />
</div>
<div id="divB">
<input type="checkbox" checked="checked" value="1" />
<input type="checkbox" value="0" />
</div>
<div id="divC">
<select multiple="multiple">
<option value="0">Item 0</option>
<option value="1" selected="selected">Item 1</option>
<option value="2">Item 2</option>
<option value="3" selected="selected">Item 3</option>
</select>
<span id="Span2"></span>
</div>
</form>
<button id="btn0">重置</button>
<button id="btn1">增加表单中所有属性为可用的元素类别<button>
<button id="btn2">增加表单中所有属性为不可用的元素类别</button>
<button id="btn3">增加表单中所有被选中的元素类别</button>
<button id="btn4">显示表单中所有被选中option的元素内容 </button>
</body>
</html>
