表单过滤选择器
1 可用元素选择器
：enabled
2 不可用元素选择器
:disabled
3 选中的选择器
：checked
4 获得下拉框的选择器
：selected
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
<style>
div,span{
width: 180px;
height: 180px;
margin: 20px;
background: #999ccc;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: roman;
}
div .mini{
width: 50px;
height: 50px;
background: #cc66ff;
border:#000 1px solid;
font-size: 12px;
font-family: roman;
}
div .mini01{
width: 50px;
height: 50px;
background: #cc66ff;
border:#000 1px solid;
font-size: 12px;
font-family: roman;
}
</style>
<script type="text/javascript">
$(function () {
$("#b1").click(function () {
//enabled 可用元素选择器
$("input[type='text']:enabled").val("宝宝");
});
$("#b2").click(function () {
//：disabaled 不可用元素选择器
$("input[type='text']:disabled").val("ddd");
});
$("#b3").click(function () {
//：checked 选中选择器
alert($("input[type='checkbox']:checked").length);
});
$("#b4").click(function () {
//：selected 获得下拉框选择器
alert($("#edu>option:selected").length);
});
});
</script>
</head>
<body>
<input type="button" value="save" class="mini" name="ok" />
<input type="button" value="利用jquery对象的val() 改变表单可用" id="b1" />
<input type="button" value="利用jquery对象的val() 改变表单不可用" id="b2"/>
<input type="button" value="获取复选框的个数" id="b3"/>
<input type="button" value="获取下拉框的个数" id="b4"/>
<br /><br />
<input type="text" value="不可用的值1" disabled="disabled" />
<input type="text" value="可用的值1"/>
<input type="text" value="不可用的值2" disabled="disabled" />
<input type="text" value="可用的值2"/>
<br /><br />
<input type="checkbox" name="items" value="美" />美
<input type="checkbox" name="items" value="钱" />钱
<input type="checkbox" name="items" value="IT"/>IT
<input type="checkbox" name="items" value="管理"/>管理
<br /><br />
<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女
<br /><br />
<select name="job" id="job" multiple="multiple" size="4">
<option value="">程序员1</option>
<option value="">程序员2</option>
<option value="">程序员3</option>
<option value="">程序员4</option>
</select>
<select name="edu" id="edu">
<option value="">本科</option>
<option value="">硕士</option>
<option value="">大专</option>
<option value="">幼儿园</option>
</select>
<br />
<div id="two" class="mini">
id为two class是mini
<div class="mini">class是mini</div>
</div >
<div class="one">
class是one
<div class="mini">class是mini</div>
<div class="mini">class是 mini</div>
</div>
<div class="one">
class是one
<div class="mini01">class是mini01</div>
<div class="mini">class是 mini</div>
</div>
</body>
</html>