1.1 基本【掌握】
#id ， id选择器，<xxx id=""> 通过id值获得元素
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 // <input type="button" value="选择 id为 one 的元素." id="btn1"/> 4 // .click() 绑定点击事件 5 $("#btn1").click(function(){ 6 $("#one").css("background-color","#ff0"); 7 }); 8 }); 9 10 </script>
效果：
element，标签选择器，<xxx> 通过标签名获得元素
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 // <input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/> 4 $("#btn3").click(function(){ 5 6 $("div").css("background-color","#ff0"); 7 }); 8 }); 9 </script>
效果：
.class ，类选择器，<xxx class=""> 通过class值获得元素。注意：使用点开头
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 // <input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/> 4 $("#btn2").click(function(){ 5 $(".mini").css("background-color","#ff0"); 6 }); 7 }); 8 9 </script>
效果：
* 所有
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 // <input type="button" value="选择 所有的元素." id="btn4"/> 4 $("#btn4").click(function(){ 5 $("*").css("background-color","#ff0"); 6 }); 7 }); 8 9 </script>
效果：
selector1,selector2,... 多选择器，将多个选择器的结果添加一个数组中。
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 // <input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/> 4 $("#btn5").click(function(){ 5 $("span,#two").css("background-color","#ff0"); 6 }); 7 }); 8 9 </script>
效果：
完整代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>01-基本选择器.html</title> 6 <!-- 引入jQuery --> 7 <script src="../js/jquery-1.8.3.js" type="text/javascript"></script> 8 <script src="./script/assist.js" type="text/javascript"></script> 9 <link rel="stylesheet" type="text/css" href="./css/style.css" /> 10 <script type="text/javascript"> 11 $(document).ready(function(){ 12 // <input type="button" value="选择 id为 one 的元素." id="btn1"/> 13 // .click() 绑定点击事件 14 $("#btn1").click(function(){ 15 $("#one").css("background-color","#ff0"); 16 }); 17 // <input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/> 18 $("#btn2").click(function(){ 19 $(".mini").css("background-color","#ff0"); 20 }); 21 // <input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/> 22 $("#btn3").click(function(){ 23 24 $("div").css("background-color","#ff0"); 25 }); 26 // <input type="button" value="选择 所有的元素." id="btn4"/> 27 $("#btn4").click(function(){ 28 $("*").css("background-color","#ff0"); 29 }); 30 // <input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/> 31 $("#btn5").click(function(){ 32 $("span,#two").css("background-color","#ff0"); 33 }); 34 }); 35 36 </script> 37 </head> 38 <body> 39 <button id="reset">手动重置页面元素</button> 40 <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br /> 41 <h3>基本选择器.</h3> 42 43 <!-- 控制按钮 --> 44 <input type="button" value="选择 id为 one 的元素." id="btn1"/> 45 <input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/> 46 <input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/> 47 <input type="button" value="选择 所有的元素." id="btn4"/> 48 <input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/> 49 50 <br /><br /> 51 52 <!-- 测试的元素 --> 53 <div class="one" id="one" > 54 id为one,class为one的div 55 <div class="mini">class为mini</div> 56 </div> 57 58 <div class="one" id="two" title="test" > 59 id为two,class为one,title为test的div. 60 <div class="mini" title="other">class为mini,title为other</div> 61 <div class="mini" title="test">class为mini,title为test</div> 62 </div> 63 64 <div class="one"> 65 <div class="mini">class为mini</div> 66 <div class="mini">class为mini</div> 67 <div class="mini">class为mini</div> 68 <div class="mini"></div> 69 </div> 70 71 72 73 <div class="one"> 74 <div class="mini">class为mini</div> 75 <div class="mini">class为mini</div> 76 <div class="mini">class为mini</div> 77 <div class="mini" title="tesst">class为mini,title为tesst</div> 78 </div> 79 80 81 <div style="display:none;" class="none">style的display为"none"的div</div> 82 83 <div class="hide">class为"hide"的div</div> 84 85 <div> 86 包含input的type为"hidden"的div<input type="hidden" size="8"/> 87 </div> 88 89 90 <span id="mover">正在执行动画的span元素.</span> 91 92 </body> 93 </html>
整体效果：
1.2 层级
A B ，获得A元素内部所有的B后代元素。（爷孙）
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 // <input type="button" value="选择 body内的所有div元素." id="btn1"/> 4 $("#btn1").click(function(){ 5 $("body div").css("background-color","#ff0"); 6 }); 7 }); 8 </script>
效果：
A > B ，获得A元素内部所有的B子元素。（父子）
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 // <input type="button" value="在body内,选择子元素是div的。" id="btn2"/> 4 $("#btn2").click(function(){ 5 $("body>div").css("background-color","#ff0"); 6 }); 7 }); 8 </script>
效果：
A + B ，获得A元素后面的第一个兄弟B。（兄弟）
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 // <input type="button" value="选择 id为one 的下一个div元素." id="btn3"/> 4 $("#btn3").click(function(){ 5 $("#one+div").css("background-color","#ff0"); 6 }); 7 }); 8 </script>
效果：
A ~ B ，获得A元素后面的所有的兄弟B。（兄弟）
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 // <input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4"/> 4 $("#btn4").click(function(){ 5 $("#two~div").css("background-color","#ff0"); 6 }); 7 }); 8 </script>
效果：
A.siblings(B) ，获得A元素所有的兄弟B。（兄弟）
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 // <input type="button" value="选择 id为two的元素的所有div兄弟元素." id="btn5"/> 4 $("#btn5").click(function(){ 5 $("#two").siblings("div").css("background-color","#ff0"); 6 }); 7 8 }); 9 </script>
效果：
完整代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>02-层次选择器.html</title> 6 <!-- 引入jQuery --> 7 <script src="../js/jquery-1.8.3.js" type="text/javascript"></script> 8 <script src="./script/assist.js" type="text/javascript"></script> 9 <link rel="stylesheet" type="text/css" href="./css/style.css" /> 10 <script type="text/javascript"> 11 $(document).ready(function(){ 12 // <input type="button" value="选择 body内的所有div元素." id="btn1"/> 13 $("#btn1").click(function(){ 14 $("body div").css("background-color","#ff0"); 15 }); 16 17 18 // <input type="button" value="在body内,选择子元素是div的。" id="btn2"/> 19 $("#btn2").click(function(){ 20 $("body>div").css("background-color","#ff0"); 21 }); 22 23 // <input type="button" value="选择 id为one 的下一个div元素." id="btn3"/> 24 $("#btn3").click(function(){ 25 $("#one+div").css("background-color","#ff0"); 26 }); 27 28 29 // <input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4"/> 30 $("#btn4").click(function(){ 31 $("#two~div").css("background-color","#ff0"); 32 }); 33 34 // <input type="button" value="选择 id为two的元素的所有div兄弟元素." id="btn5"/> 35 $("#btn5").click(function(){ 36 $("#two").siblings("div").css("background-color","#ff0"); 37 }); 38 39 }); 40 </script> 41 </head> 42 <body> 43 <h3>层次选择器.</h3> 44 <button id="reset">手动重置页面元素</button> 45 <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br /> 46 47 <input type="button" value="选择 body内的所有div元素." id="btn1"/> 48 <input type="button" value="在body内,选择子元素是div的。" id="btn2"/> 49 <input type="button" value="选择 id为one 的下一个div元素." id="btn3"/> 50 <input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4"/> 51 <input type="button" value="选择 id为two的元素的所有div兄弟元素." id="btn5"/> 52 <br /> 53 <br /> 54 55 <!-- 测试的元素 --> 56 <div class="one" id="one" > 57 id为one,class为one的div 58 <div class="mini">class为mini</div> 59 </div> 60 61 <div class="one" id="two" title="test" > 62 id为two,class为one,title为test的div. 63 <div class="mini" title="other">class为mini,title为other</div> 64 <div class="mini" title="test">class为mini,title为test</div> 65 </div> 66 67 <div class="one"> 68 <div class="mini">class为mini</div> 69 <div class="mini">class为mini</div> 70 <div class="mini">class为mini</div> 71 <div class="mini"></div> 72 </div> 73 74 75 76 <div class="one"> 77 <div class="mini">class为mini</div> 78 <div class="mini">class为mini</div> 79 <div class="mini">class为mini</div> 80 <div class="mini" title="tesst">class为mini,title为tesst</div> 81 </div> 82 83 84 <div style="display:none;" class="none">style的display为"none"的div</div> 85 86 <div class="hide">class为"hide"的div</div> 87 88 <div> 89 包含input的type为"hidden"的div<input type="hidden" size="8"/> 90 </div> 91 92 93 <span id="mover">正在执行动画的span元素.</span> 94 95 </body> 96 </html>
整体效果：
1.3 基本过滤
过滤选择器格式 “：关键字”
:first 第一个
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 // <input type="button" value="选择第一个div元素." id="btn1"/> 4 $("#btn1").click(function(){ 5 $("div:first").css("background-color","#ff0"); 6 }); 7 }); 8 9 </script>
效果：
:last 最后一个
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 // <input type="button" value="选择最后一个div元素." id="btn2"/> 4 $("#btn2").click(function(){ 5 $("div:last").css("background-color","#ff0"); 6 }); 7 }); 8 9 </script>
效果：
:eq(index) 获得指定索引
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 // <input type="button" value="选择索引值等于3的元素." id="btn6"/> 4 $("#btn6").click(function(){ 5 $("div:eq(3)").css("background-color","#ff0"); 6 }); 7 }); 8 9 </script>
效果：
:gt(index) 大于
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 // <input type="button" value="选择索引值大于3的元素." id="btn7"/> 4 $("#btn7").click(function(){ 5 $("div:gt(3)").css("background-color","#ff0"); 6 }); 7 }); 8 9 </script>
效果：
:lt(index) 小于
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 // <input type="button" value="选择索引值小于3的元素." id="btn8"/> 4 $("#btn8").click(function(){ 5 $("div:lt(3)").css("background-color","#ff0"); 6 }); 7 }); 8 9 </script>
效果：
:even 偶数，从 0 开始计数。例如：查找表格的1、3、5...行（即索引值0、2、4...）
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 // <input type="button" value="选择索引值为偶数 的div元素." id="btn4"/> 4 $("#btn4").click(function(){ 5 $("div:even").css("background-color","#ff0"); 6 }); 7 }); 8 9 </script>
效果：
:odd 奇数
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 // <input type="button" value="选择索引值为奇数 的div元素." id="btn5"/> 4 $("#btn5").click(function(){ 5 $("div:odd").css("background-color","#ff0"); 6 }); 7 }); 8 9 </script>
效果：
:not(selector) 去除所有与给定选择器匹配的元素
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 // <input type="button" value="选择class不为one的 所有div元素." id="btn3"/> 4 $("#btn3").click(function(){ 5 $("div:not(\'.one\')").css("background-color","#ff0"); 6 }); 7 }); 8 9 </script>
效果：
:header 获得所有标题元素。例如：<h1>...<h6>
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 // <input type="button" value="选择所有的标题元素." id="btn9"/> 4 $("#btn9").click(function(){ 5 $(":header").css("background-color","#ff0"); 6 }); 7 }); 8 9 </script>
效果：
:animated 获得所有动画
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 // <input type="button" value="选择当前正在执行动画的所有元素." id="btn10"/> 4 $("#btn10").click(function(){ 5 $(":animated").css("background-color","#ff0"); 6 }); 7 }); 8 9 </script>
效果：
:focus 获得焦点
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 // <input type="text" value="请输入账号" defaultValue="请输入账号" /> 4 // <input type="text" value="请输入密码" defaultValue="请输入密码"/> 5 6 //获取属性为type=text的input标签，并绑定blur失去焦点、focus获得焦点这两个事件 7 $("input[type=\'text\']").on("blur focus",function(){ 8 //1、声明默认值变量，获取当前对象的属性，用法是 $(this).attr("标签中的属性") 9 var dv = $(this).attr("defaultValue"); 10 //2、判断是否获得焦点,is()是用来判断的，括号里写条件 11 if($(this).is(":focus")){ 12 //2.1、获得焦点，如果是默认值，清空value值，this为当前执行对象，且是dom对象，所以我们要转换成jquery对象$(this) 13 if($(this).val()==dv){ 14 $(this).val(""); 15 $(this).css("color","#000"); 16 } 17 18 }else{ 19 //2.2、失去焦点，如果内容为空，设置默认值,或$(this).val().length==0 20 if($(this).val()==""){ 21 $(this).val(dv); 22 $(this).css("color","#999") 23 } 24 25 } 26 27 28 }); 29 30 }); 31 32 </script>
效果：
完整代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>03-基本过滤选择器.html</title> 6 <!-- 引入jQuery --> 7 <script src="../js/jquery-1.8.3.js" type="text/javascript"></script> 8 <script src="./script/assist.js" type="text/javascript"></script> 9 <link rel="stylesheet" type="text/css" href="./css/style.css" /> 10 <script type="text/javascript"> 11 $(document).ready(function(){ 12 // <input type="button" value="选择第一个div元素." id="btn1"/> 13 $("#btn1").click(function(){ 14 $("div:first").css("background-color","#ff0"); 15 }); 16 17 // <input type="button" value="选择最后一个div元素." id="btn2"/> 18 $("#btn2").click(function(){ 19 $("div:last").css("background-color","#ff0"); 20 }); 21 22 // <input type="button" value="选择class不为one的 所有div元素." id="btn3"/> 23 $("#btn3").click(function(){ 24 $("div:not(\'.one\')").css("background-color","#ff0"); 25 }); 26 27 // <input type="button" value="选择索引值为偶数 的div元素." id="btn4"/> 28 $("#btn4").click(function(){ 29 $("div:even").css("background-color","#ff0"); 30 }); 31 32 // <input type="button" value="选择索引值为奇数 的div元素." id="btn5"/> 33 $("#btn5").click(function(){ 34 $("div:odd").css("background-color","#ff0"); 35 }); 36 37 // <input type="button" value="选择索引值等于3的元素." id="btn6"/> 38 $("#btn6").click(function(){ 39 $("div:eq(3)").css("background-color","#ff0"); 40 }); 41 42 // <input type="button" value="选择索引值大于3的元素." id="btn7"/> 43 $("#btn7").click(function(){ 44 $("div:gt(3)").css("background-color","#ff0"); 45 }); 46 47 // <input type="button" value="选择索引值小于3的元素." id="btn8"/> 48 $("#btn8").click(function(){ 49 $("div:lt(3)").css("background-color","#ff0"); 50 }); 51 52 // <input type="button" value="选择所有的标题元素." id="btn9"/> 53 $("#btn9").click(function(){ 54 $(":header").css("background-color","#ff0"); 55 }); 56 57 // <input type="button" value="选择当前正在执行动画的所有元素." id="btn10"/> 58 $("#btn10").click(function(){ 59 $(":animated").css("background-color","#ff0"); 60 }); 61 62 // <input type="text" value="请输入账号" defaultValue="请输入账号" /> 63 // <input type="text" value="请输入密码" defaultValue="请输入密码"/> 64 65 //获取属性为type=text的input标签，并绑定blur失去焦点、focus获得焦点这两个事件 66 $("input[type=\'text\']").on("blur focus",function(){ 67 //1、声明默认值变量，获取当前对象的属性，用法是 $(this).attr("标签中的属性") 68 var dv = $(this).attr("defaultValue"); 69 //2、判断是否获得焦点,is()是用来判断的，括号里写条件 70 if($(this).is(":focus")){ 71 //2.1、获得焦点，如果是默认值，清空value值，this为当前执行对象，且是dom对象，所以我们要转换成jquery对象$(this) 72 if($(this).val()==dv){ 73 $(this).val(""); 74 $(this).css("color","#000"); 75 } 76 77 }else{ 78 //2.2、失去焦点，如果内容为空，设置默认值,或$(this).val().length==0 79 if($(this).val()==""){ 80 $(this).val(dv); 81 $(this).css("color","#999") 82 } 83 84 } 85 86 87 }); 88 89 }); 90 91 </script> 92 </head> 93 <body> 94 <h3>基本过滤选择器.</h3> 95 <button id="reset">手动重置页面元素</button> 96 <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br /> 97 98 <input type="button" value="选择第一个div元素." id="btn1"/> 99 <input type="button" value="选择最后一个div元素." id="btn2"/> 100 <input type="button" value="选择class不为one的 所有div元素." id="btn3"/> 101 <input type="button" value="选择索引值为偶数 的div元素." id="btn4"/> 102 <input type="button" value="选择索引值为奇数 的div元素." id="btn5"/> 103 <input type="button" value="选择索引值等于3的元素." id="btn6"/> 104 <input type="button" value="选择索引值大于3的元素." id="btn7"/> 105 <input type="button" value="选择索引值小于3的元素." id="btn8"/> 106 <input type="button" value="选择所有的标题元素." id="btn9"/> 107 <input type="button" value="选择当前正在执行动画的所有元素." id="btn10"/> 108 <input type="text" value="请输入账号" defaultValue="请输入账号" /> 109 <input type="text" value="请输入密码" defaultValue="请输入密码"/> 110 111 <br /><br /> 112 113 <!-- 测试的元素 --> 114 <div class="one" id="one" > 115 id为one,class为one的div 116 <div class="mini">class为mini</div> 117 </div> 118 119 <div class="one" id="two" title="test" > 120 id为two,class为one,title为test的div. 121 <div class="mini" title="other">class为mini,title为other</div> 122 <div class="mini" title="test">class为mini,title为test</div> 123 </div> 124 125 <div class="one"> 126 <div class="mini">class为mini</div> 127 <div class="mini">class为mini</div> 128 <div class="mini">class为mini</div> 129 <div class="mini"></div> 130 </div> 131 132 133 134 <div class="one"> 135 <div class="mini">class为mini</div> 136 <div class="mini">class为mini</div> 137 <div class="mini">class为mini</div> 138 <div class="mini" title="tesst">class为mini,title为tesst</div> 139 </div> 140 141 142 <div style="display:none;" class="none">style的display为"none"的div</div> 143 144 <div class="hide">class为"hide"的div</div> 145 146 <div> 147 包含input的type为"hidden"的div<input type="hidden" size="8"/> 148 </div> 149 150 151 <span id="mover">正在执行动画的span元素.</span> 152 153 </body> 154 </html>
整体效果：
1.4 内容过滤
:empty 当前元素是否为空（是否有标签体--子元素、文本）
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 // <input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id="btn2"/> 4 $("#btn2").click(function(){ 5 $("div:empty").css("background-color","#ff0"); 6 }); 7 }); 8 </script>
效果：
:has(...) 当前元素，是否含有指定的子元素
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 // <input type="button" value="选取含有class为mini元素 的div元素." id="btn3"/> 4 $("#btn3").click(function(){ 5 $("div:has(\'.mini\')").css("background-color","#ff0"); 6 }); 7 }); 8 </script>
效果：
:parent 当前元素是否是父元素
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 // <input type="button" value="选取含有子元素(或者文本元素)的div元素." id="btn4"/> 4 $("#btn4").click(function(){ 5 $("div:parent").css("background-color","#ff0"); 6 }); 7 }); 8 </script>
效果：
:contains( text ) 标签体是否含有指定的文本
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 // <input type="button" value="选取含有文本“di”的div元素." id="btn1"/> 4 $("#btn1").click(function(){ 5 $("div:contains(\'di\')").css("background-color","#ff0"); 6 }); 7 }); 8 </script>
效果：
完整代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>04-内容过滤选择器.html</title> 6 <!-- 引入jQuery --> 7 <script src="../js/jquery-1.8.3.js" type="text/javascript"></script> 8 <script src="./script/assist.js" type="text/javascript"></script> 9 <link rel="stylesheet" type="text/css" href="./css/style.css" /> 10 <script type="text/javascript"> 11 $(document).ready(function(){ 12 // <input type="button" value="选取含有文本“di”的div元素." id="btn1"/> 13 $("#btn1").click(function(){ 14 $("div:contains(\'di\')").css("background-color","#ff0"); 15 }); 16 17 // <input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id="btn2"/> 18 $("#btn2").click(function(){ 19 $("div:empty").css("background-color","#ff0"); 20 }); 21 22 // <input type="button" value="选取含有class为mini元素 的div元素." id="btn3"/> 23 $("#btn3").click(function(){ 24 $("div:has(\'.mini\')").css("background-color","#ff0"); 25 }); 26 27 // <input type="button" value="选取含有子元素(或者文本元素)的div元素." id="btn4"/> 28 $("#btn4").click(function(){ 29 $("div:parent").css("background-color","#ff0"); 30 }); 31 }); 32 </script> 33 </head> 34 <body> 35 <h3>内容过滤选择器.</h3> 36 <button id="reset">手动重置页面元素</button> 37 <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br /> 38 39 <input type="button" value="选取含有文本“di”的div元素." id="btn1"/> 40 <input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id="btn2"/> 41 <input type="button" value="选取含有class为mini元素 的div元素." id="btn3"/> 42 <input type="button" value="选取含有子元素(或者文本元素)的div元素." id="btn4"/> 43 44 45 <br /><br /> 46 47 <!-- 测试的元素 --> 48 <div class="one" id="one" > 49 id为one,class为one的div 50 <div class="mini">class为mini</div> 51 </div> 52 53 <div class="one" id="two" title="test" > 54 id为two,class为one,title为test的div. 55 <div class="mini" title="other">class为mini,title为other</div> 56 <div class="mini" title="test">class为mini,title为test</div> 57 </div> 58 59 <div class="one"> 60 <div class="mini">class为mini</div> 61 <div class="mini">class为mini</div> 62 <div class="mini">class为mini</div> 63 <div class="mini"></div> 64 </div> 65 66 67 68 <div class="one"> 69 <div class="mini">class为mini</div> 70 <div class="mini">class为mini</div> 71 <div class="mini">class为mini</div> 72 <div class="mini" title="tesst">class为mini,title为tesst</div> 73 </div> 74 75 76 <div style="display:none;" class="none">style的display为"none"的div</div> 77 78 <div class="hide">class为"hide"的div</div> 79 80 <div> 81 包含input的type为"hidden"的div<input type="hidden" size="8"/> 82 </div> 83 84 85 <span id="mover">正在执行动画的span元素.</span> 86 87 </body> 88 </html>
整体效果：
1.5 可见性过滤[掌握]
:hidden 隐藏。特指 <xxx style="display:none;"> ，获得 <input type="hidden">
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 // <input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来" id="b2"/> 4 $("#b2").click(function(){ 5 $("div:hidden").css("background-color","#ff5").show(100); 6 }); 7 // <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b3"/> 8 $("#b3").click(function(){ 9 // alert($("input:hidden").val());//val()获得值时，默认取第一个值 10 // 我们需要取所以的值，所以用each()遍历 11 $("input:hidden").each(function(){ 12 alert($(this).val()); 13 }); 14 }); 15 16 // <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b4"/> 17 $("#b4").click(function(){ 18 // $.each 全局函数 19 // *回调函数 20 // ** 参数1：index 遍历索引 21 // ** 参数2：domEle 当前遍历对象，即==this 22 $.each($("input:hidden"),function (index,domEle) { 23 alert(index + "@" + $(domEle).val()); 24 }); 25 }); 26 27 }); 28 </script>
:visible 可见（默认）
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 //<input type="button" value=" 选取所有可见的div元素" id="b1"/> 4 $("#b1").click(function(){ 5 $("div:visible").css("background-color","#ff0"); 6 }); 7 }); 8 </script>
整体效果：
完整代码
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>05-可见性过滤选择器.html</title> 6 <!-- 引入jQuery --> 7 <script src="../js/jquery-1.8.3.js" type="text/javascript"></script> 8 <script src="./script/assist.js" type="text/javascript"></script> 9 <link rel="stylesheet" type="text/css" href="./css/style.css" /> 10 <script type="text/javascript"> 11 $(document).ready(function(){ 12 //<input type="button" value=" 选取所有可见的div元素" id="b1"/> 13 $("#b1").click(function(){ 14 $("div:visible").css("background-color","#ff0"); 15 }); 16 // <input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来" id="b2"/> 17 $("#b2").click(function(){ 18 $("div:hidden").css("background-color","#ff5").show(100); 19 }); 20 // <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b3"/> 21 $("#b3").click(function(){ 22 // alert($("input:hidden").val());//val()获得值时，默认取第一个值 23 // 我们需要取所以的值，所以用each()遍历 24 $("input:hidden").each(function(){ 25 alert($(this).val()); 26 }); 27 }); 28 29 // <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b4"/> 30 $("#b4").click(function(){ 31 // $.each 全局函数 32 // *回调函数 33 // ** 参数1：index 遍历索引 34 // ** 参数2：domEle 当前遍历对象，即==this 35 $.each($("input:hidden"),function (index,domEle) { 36 alert(index + "@" + $(domEle).val()); 37 }); 38 }); 39 40 }); 41 </script> 42 </head> 43 <body> 44 <h3>可见性过滤选择器.</h3> 45 <button id="reset">手动重置页面元素</button> 46 <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label> 47 <br/><br/> 48 <input type="button" value=" 选取所有可见的div元素" id="b1"/> 49 <input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来" id="b2"/> 50 <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b3"/> 51 <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b4"/> 52 <br /><br /> 53 54 <!--文本隐藏域--> 55 <input type="hidden" value="hidden_1"> 56 <input type="hidden" value="hidden_2"> 57 <input type="hidden" value="hidden_3"> 58 <input type="hidden" value="hidden_4"> 59 60 <div class="one" id="one" > 61 id为one,class为one的div 62 <div class="mini">class为mini</div> 63 </div> 64 65 <div class="one" id="two" title="test" > 66 id为two,class为one,title为test的div. 67 <div class="mini" title="other">class为mini,title为other</div> 68 <div class="mini" title="test">class为mini,title为test</div> 69 </div> 70 71 <div class="one"> 72 <div class="mini">class为mini</div> 73 <div class="mini">class为mini</div> 74 <div class="mini">class为mini</div> 75 <div class="mini" title="tesst">class为mini,title为tesst</div> 76 </div> 77 78 79 <div style="display:none;" class="none">style的display为"none"的div</div> 80 81 <div class="hide">class为"hide"的div</div> 82 83 <span id="mover">正在执行动画的span元素.</span> 84 </body> 85 </html>
1.6 属性【掌握】
[属性名] 获得指定的属性名的元素
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 // <input type="button" value="选取含有 属性title 的div元素." id="btn1"/> 4 $("#btn1").click(function(){ 5 $("div[title]").css("background-color","#ff0"); 6 }); 7 }); 8 </script>
[属性名=值] 获得属性名 等于 指定值的 的元素
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 // <input type="button" value="选取 属性title值等于“test”的div元素." id="btn2"/> 4 $("#btn2").click(function(){ 5 $("div[title=\'test\']").css("background-color","#ff0"); 6 }); 7 }); 8 </script>
[属性名!=值] 获得属性名 不等于 指定值的 的元素
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 // <input type="button" value="选取 属性title值不等于“test”的div元素(没有属性title的也将被选中)." id="btn3"/> 4 $("#btn3").click(function(){ 5 $("div[title!=\'test\']").css("background-color","#ff0"); 6 }); 7 }); 8 </script>
[属性名^=值] 获得以属性值 开头 的元素
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 // <input type="button" value="选取 属性title值 以“te”开始 的div元素." id="btn4"/> 4 $("#btn4").click(function(){ 5 $("div[title^=\'te\']").css("background-color","#ff0"); 6 }); 7 }); 8 </script>
[属性名$=值] 获得以属性值 结尾 的元素
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 // <input type="button" value="选取 属性title值 以“te”开始 的div元素." id="btn4"/> 4 $("#btn4").click(function(){ 5 $("div[title^=\'te\']").css("background-color","#ff0"); 6 }); 7 }); 8 </script>
[属性名*=值] 获得 含有属性值 的元素
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 // <input type="button" value="选取 属性title值 含有“es”的div元素." id="btn6"/> 4 $("#btn6").click(function(){ 5 $("div[title*=\'es\']").css("background-color","#ff0"); 6 }); 7 }); 8 </script>
[as1][as2][as3].... 复合选择器，多个条件同时成立。类似 where ...and...and
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 // <input type="button" value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有“es”的元素." id="btn7"/> 4 $("#btn7").click(function(){ 5 $("div[id][title*=\'es\']").css("background-color","#ff0"); 6 }); 7 }); 8 </script>
整体效果：
完整代码
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>06-属性选择器.html</title> 6 <!-- 引入jQuery --> 7 <script src="../js/jquery-1.8.3.js" type="text/javascript"></script> 8 <script src="./script/assist.js" type="text/javascript"></script> 9 <link rel="stylesheet" type="text/css" href="./css/style.css" /> 10 <script type="text/javascript"> 11 $(document).ready(function(){ 12 // <input type="button" value="选取含有 属性title 的div元素." id="btn1"/> 13 $("#btn1").click(function(){ 14 $("div[title]").css("background-color","#ff0"); 15 }); 16 // <input type="button" value="选取 属性title值等于“test”的div元素." id="btn2"/> 17 $("#btn2").click(function(){ 18 $("div[title=\'test\']").css("background-color","#ff0"); 19 }); 20 // <input type="button" value="选取 属性title值不等于“test”的div元素(没有属性title的也将被选中)." id="btn3"/> 21 $("#btn3").click(function(){ 22 $("div[title!=\'test\']").css("background-color","#ff0"); 23 }); 24 // <input type="button" value="选取 属性title值 以“te”开始 的div元素." id="btn4"/> 25 $("#btn4").click(function(){ 26 $("div[title^=\'te\']").css("background-color","#ff0"); 27 }); 28 // <input type="button" value="选取 属性title值 以“est”结束 的div元素." id="btn5"/> 29 $("#btn5").click(function(){ 30 $("div[title$=\'est\']").css("background-color","#ff0"); 31 }); 32 // <input type="button" value="选取 属性title值 含有“es”的div元素." id="btn6"/> 33 $("#btn6").click(function(){ 34 $("div[title*=\'es\']").css("background-color","#ff0"); 35 }); 36 // <input type="button" value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有“es”的元素." id="btn7"/> 37 $("#btn7").click(function(){ 38 $("div[id][title*=\'es\']").css("background-color","#ff0"); 39 }); 40 }); 41 </script> 42 </head> 43 <body> 44 <button id="reset">手动重置页面元素</button> 45 <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label> 46 47 48 49 <h3> 属性选择器.</h3> 50 <input type="button" value="选取含有 属性title 的div元素." id="btn1"/> 51 <input type="button" value="选取 属性title值等于“test”的div元素." id="btn2"/> 52 <input type="button" value="选取 属性title值不等于“test”的div元素(没有属性title的也将被选中)." id="btn3"/> 53 <input type="button" value="选取 属性title值 以“te”开始 的div元素." id="btn4"/> 54 <input type="button" value="选取 属性title值 以“est”结束 的div元素." id="btn5"/> 55 <input type="button" value="选取 属性title值 含有“es”的div元素." id="btn6"/> 56 <input type="button" value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有“es”的元素." id="btn7"/> 57 58 59 60 61 <br /><br /> 62 <div class="one" id="one" > 63 id为one,class为one的div 64 <div class="mini">class为mini</div> 65 </div> 66 67 <div class="one" id="two" title="test" > 68 id为two,class为one,title为test的div. 69 <div class="mini" title="other">class为mini,title为other</div> 70 <div class="mini" title="test">class为mini,title为test</div> 71 </div> 72 73 <div class="one"> 74 <div class="mini">class为mini</div> 75 <div class="mini">class为mini</div> 76 <div class="mini">class为mini</div> 77 <div class="mini"></div> 78 </div> 79 80 81 82 <div class="one"> 83 <div class="mini">class为mini</div> 84 <div class="mini">class为mini</div> 85 <div class="mini">class为mini</div> 86 <div class="mini" title="tesst">class为mini,title为tesst</div> 87 </div> 88 89 90 <div style="display:none;" class="none">style的display为"none"的div</div> 91 92 <div class="hide">class为"hide"的div</div> 93 94 <div> 95 包含input的type为"hidden"的div<input type="hidden" size="8"/> 96 </div> 97 98 99 <span id="mover">正在执行动画的span元素.</span> 100 </body> 101 </html>
1.7 子元素过滤
:nth-child(index) ，获得第几个孩子，从1开始。
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 // <input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/> 4 $("#btn1").click(function(){ 5 // 子元素选择器使用前提：表达式前面必须是元素。例如：$("div:nth-child(2)") 6 // 如果元素上添加条件，必须使用空格。例如：$("div[class=\'one\'] :nth-child(2)") 7 8 // 第一种写法 9 // $("div[class=\'one\'] :nth-child(2)").css("background-color","#ff5"); 10 // 第二种写法 11 $("div.one :nth-child(2)").css("background-color","#ff5"); 12 13 /* 对比： 14 * $("div.one") 所有的div，自己的样式为one 15 * $("div .one") 所有div中后代元素，样式为one 16 */ 17 }); 18 }); 19 </script>
:first-child ， 获得第一个孩子
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 // <input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2"/> 4 $("#btn2").click(function(){ 5 $("div.one :first-child").css("background-color","#ff5"); 6 }); 7 }); 8 </script>
:last-child ， 获得最后孩子
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 // <input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/> 4 $("#btn3").click(function(){ 5 $("div.one :last-child").css("background-color","#ff5"); 6 }); 7 }); 8 </script>
:only-child ， 获得独生子
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 // <input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn4"/> 4 $("#btn4").click(function(){ 5 $("div.one :only-child").css("background-color","#ff5"); 6 }); 7 }); 8 </script>
整体效果
完整代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>07-子元素过滤选择器.html</title> 6 <!-- 引入jQuery --> 7 <script src="../js/jquery-1.8.3.js" type="text/javascript"></script> 8 <script src="./script/assist.js" type="text/javascript"></script> 9 <link rel="stylesheet" type="text/css" href="./css/style.css" /> 10 <script type="text/javascript"> 11 $(document).ready(function(){ 12 // <input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/> 13 $("#btn1").click(function(){ 14 // 子元素选择器使用前提：表达式前面必须是元素。例如：$("div:nth-child(2)") 15 // 如果元素上添加条件，必须使用空格。例如：$("div[class=\'one\'] :nth-child(2)") 16 17 // 第一种写法 18 // $("div[class=\'one\'] :nth-child(2)").css("background-color","#ff5"); 19 20 // 第二种写法 21 $("div.one :nth-child(2)").css("background-color","#ff5"); 22 23 /* 对比： 24 * $("div.one") 所有的div，自己的样式为one 25 * $("div .one") 所有div中后代元素，样式为one 26 */ 27 28 }); 29 30 // <input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2"/> 31 $("#btn2").click(function(){ 32 $("div.one :first-child").css("background-color","#ff5"); 33 }); 34 35 // <input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/> 36 $("#btn3").click(function(){ 37 $("div.one :last-child").css("background-color","#ff5"); 38 }); 39 40 // <input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn4"/> 41 $("#btn4").click(function(){ 42 $("div.one :only-child").css("background-color","#ff5"); 43 }); 44 }); 45 </script> 46 </head> 47 <body> 48 <button id="reset">手动重置页面元素</button> 49 <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label> 50 51 <h3>子元素过滤选择器.</h3> 52 <input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/> 53 <input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2"/> 54 <input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/> 55 <input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn4"/> 56 57 58 59 60 <br /><br /> 61 <div class="one" id="one" > 62 id为one,class为one的div 63 <div class="mini">class为mini</div> 64 </div> 65 66 <div class="one" id="two" title="test" > 67 id为two,class为one,title为test的div. 68 <div class="mini" title="other">class为mini,title为other</div> 69 <div class="mini" title="test">class为mini,title为test</div> 70 </div> 71 72 <div class="one"> 73 <div class="mini">class为mini</div> 74 <div class="mini">class为mini</div> 75 <div class="mini">class为mini</div> 76 <div class="mini"></div> 77 </div> 78 79 80 81 <div class="one"> 82 <div class="mini">class为mini</div> 83 <div class="mini">class为mini</div> 84 <div class="mini">class为mini</div> 85 <div class="mini" title="tesst">class为mini,title为tesst</div> 86 </div> 87 88 89 <div style="display:none;" class="none">style的display为"none"的div</div> 90 91 <div class="hide">class为"hide"的div</div> 92 93 <div> 94 包含input的type为"hidden"的div<input type="hidden" size="8"/> 95 </div> 96 97 98 <span id="mover">正在执行动画的span元素.</span> 99 </body> 100 </html>
1.8 表单过滤
:input 所有的表单元素。（<input> / <select> / <textarea> / <button>）
:text 文本框<input type="text">
:password 密码框<input type=" password ">
:radio 单选<input type="radio">
:checkbox 复选框<input type="checkbox">
:submit 提交按钮<input type="submit">
:image 图片按钮<input type="image" src="">
:reset 重置按钮<input type="reset">
:file 文件上传<input type="file">
:hidden 隐藏域<input type="hidden"> ,还可以获得<xxx style="display:none">
其他值：<br> <option> ,存在浏览器兼容问题
:button 所有普通按钮。 <button > 或 <input type="button">
完整代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>09-表单选择器.html</title> 6 <!-- 引入jQuery --> 7 <script src="../js/jquery-1.8.3.js" type="text/javascript"></script> 8 <script type="text/javascript"> 9 //<![CDATA[ 10 $(document).ready(function(){ 11 12 var $alltext = $("#form1 :text"); 13 var $allpassword= $("#form1 :password"); 14 var $allradio= $("#form1 :radio"); 15 var $allcheckbox= $("#form1 :checkbox"); 16 17 var $allsubmit= $("#form1 :submit"); 18 var $allimage= $("#form1 :image"); 19 var $allreset= $("#form1 :reset"); 20 var $allbutton= $("#form1 :button"); // <input type=button /> 和 <button ></button>都可以匹配 21 var $allfile= $("#form1 :file"); 22 var $allhidden= $("#form1 :hidden"); // <input type="hidden" />和<div style="display:none">test</div>都可以匹配. 23 var $allselect = $("#form1 select"); 24 var $alltextarea = $("#form1 textarea"); 25 26 var $AllInputs = $("#form1 :input"); 27 var $inputs = $("#form1 input"); 28 // 计算表单元素个数 29 $("div").append(" 有" + $alltext.length + " 个（ :text 元素）<br/>") 30 .append(" 有" + $allpassword.length + " 个（ :password 元素）<br/>") 31 .append(" 有" + $allradio.length + " 个（ :radio 元素）<br/>") 32 .append(" 有" + $allcheckbox.length + " 个（ :checkbox 元素）<br/>") 33 .append(" 有" + $allsubmit.length + " 个（ :submit 元素）<br/>") 34 .append(" 有" + $allimage.length + " 个（ :image 元素）<br/>") 35 .append(" 有" + $allreset.length + " 个（ :reset 元素）<br/>") 36 .append(" 有" + $allbutton.length + " 个（ :button 元素）<br/>") 37 .append(" 有" + $allfile.length + " 个（ :file 元素）<br/>") 38 .append(" 有" + $allhidden.length + " 个（ :hidden 元素）<br/>") 39 .append(" 有" + $allselect.length + " 个（ select 元素）<br/>") 40 .append(" 有" + $alltextarea.length + " 个（ textarea 元素）<br/>") 41 .append(" 表单有 " + $inputs.length + " 个（input）元素。<br/>") 42 .append(" 总共有 " + $AllInputs.length + " 个(:input)元素。<br/>") 43 .css("color", "red") 44 45 //显示所有的隐藏标签名称 46 $allhidden.each(function(){ 47 $("div").append("<br/>").append($(this).get(0).nodeName); 48 }); 49 50 $("form").submit(function () { return false; }); // return false;不能提交. 51 52 }); 53 //]]> 54 </script> 55 </head> 56 <body> 57 <form id="form1" action="#"> 58 <input type="button" value="Button"/><br/> 59 <input type="checkbox" name="c"/>1<input type="checkbox" name="c"/>2<input type="checkbox" name="c"/>3<br/> 60 <input type="file" /><br/> 61 <input type="hidden" /><div style="display:none">test</div><br/> 62 <input type="image" /><br/> 63 <input type="password" /><br/> 64 <input type="radio" name="a"/>1<input type="radio" name="a"/>2<br/> 65 <input type="reset" /><br/> 66 <input type="submit" value="提交"/><br/> 67 <input type="text" /><br/> 68 <select><option>Option</option></select><br/> 69 <textarea rows="5" cols="20"></textarea><br/> 70 <button>Button</button><br/> 71 </form> 72 73 <div></div> 74 </body> 75 </html>
整体效果
1.9 表单对象属性过滤【掌握】
:enabled 可用
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 // <button id="btn1">对表单内 可用input 赋值操作.</button> 4 $("#btn1").click(function(){ 5 $("input:enabled").val("aaaaaaa"); 6 }); 7 }); 8 </script>
:disabled 不可用。<xxx disabled="disabled"> 或<xxx disabled=""> 或 <xxx disabled>
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 // <button id="btn2">对表单内 不可用input 赋值操作.</button> 4 $("#btn2").click(function(){ 5 $("input:disabled").val("bbbbbbbb") 6 }); 7 }); 8 </script>
:checked 选中（单选框radio、复选框 checkbox）
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 4 // <button id="btn3">获取多选框选中的个数.</button> 5 $("#btn3").click(function(){ 6 // 第一种方法 7 // var s1 = $("[name=\'newsletter\']:checked").length; 8 // 第二种方法 9 var s1 = $("[name = \'newsletter\']:checked").size(); 10 alert(s1) 11 }) 12 }); 13 </script>
:selected 选择（下拉列表 select option）
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 // <button id="btn4">获取下拉框选中的内容.</button> 4 $("#btn4").click(function(){ 5 //获取选中<option>标签,<option value="">text</option> 6 $(":selected").each(function(){ 7 //val() 获得option标签值时，如果没有value值，将获得text的值 8 //html() 或者 text()获得标签体的内容 9 $("#selectDivId").append($(this).html()); 10 }); 11 }); 12 13 }); 14 </script>
完整代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>08-表单对象属性过滤选择器.html</title> 6 <!-- 引入jQuery --> 7 <script src="../js/jquery-1.8.3.js" type="text/javascript"></script> 8 <script src="./script/assist.js" type="text/javascript"></script> 9 <link rel="stylesheet" type="text/css" href="./css/style.css" /> 10 11 <script type="text/javascript"> 12 $(document).ready(function(){ 13 // <button id="btn1">对表单内 可用input 赋值操作.</button> 14 $("#btn1").click(function(){ 15 $("input:enabled").val("aaaaaaa"); 16 }); 17 // <button id="btn2">对表单内 不可用input 赋值操作.</button> 18 $("#btn2").click(function(){ 19 $("input:disabled").val("bbbbbbbb") 20 }); 21 22 // <button id="btn3">获取多选框选中的个数.</button> 23 $("#btn3").click(function(){ 24 // 第一种方法 25 // var s1 = $("[name=\'newsletter\']:checked").length; 26 // 第二种方法 27 var s1 = $("[name = \'newsletter\']:checked").size(); 28 alert(s1) 29 }) 30 31 // <button id="btn4">获取下拉框选中的内容.</button> 32 $("#btn4").click(function(){ 33 //获取选中<option>标签,<option value="">text</option> 34 $(":selected").each(function(){ 35 //val() 获得option标签值时，如果没有value值，将获得text的值 36 //html() 或者 text()获得标签体的内容 37 $("#selectDivId").append($(this).html()); 38 }); 39 }); 40 41 }); 42 </script> 43 44 </head> 45 <body> 46 <h3> 表单对象属性过滤选择器.</h3> 47 <button type="reset">重置所有表单元素</button> 48 <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label> 49 <br /><br /> 50 <button id="btn1">对表单内 可用input 赋值操作.</button> 51 <button id="btn2">对表单内 不可用input 赋值操作.</button> 52 <button id="btn3">获取多选框选中的个数.</button> 53 <button id="btn4">获取下拉框选中的内容.</button> 54 55 <br /><br /> 56 57 可用元素：<input name="add" value="可用文本框"/> <br/> 58 不可用元素：<input name="email" disabled="disabled" value="不可用文本框"/><br/> 59 可用元素： <input name="che" value="可用文本框" /><br/> 60 不可用元素：<input name="name" disabled="disabled" value="不可用文本框"/><br/> 61 <br/> 62 多选框：<br/> 63 <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1 64 <input type="checkbox" name="newsletter" value="test2" />test2 65 <input type="checkbox" name="newsletter" value="test3" />test3 66 <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4 67 <input type="checkbox" name="newsletter" value="test5" />test5 68 <div id="checkboxDivId"></div> 69 70 <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 71 下拉列表1：<br/> 72 <select name="test" multiple="multiple" style="height:100px"> 73 <option>浙江</option> 74 <option selected="selected">湖南</option> 75 <option>北京</option> 76 <option selected="selected">天津</option> 77 <option>广州</option> 78 <option>湖北</option> 79 </select> 80 81 <br/><br/> 82 下拉列表2：<br/> 83 <select name="test2" > 84 <option>浙江</option> 85 <option>湖南</option> 86 <option selected="selected">北京</option> 87 <option>天津</option> 88 <option>广州</option> 89 <option>湖北</option> 90 </select> 91 <br/><br/> 92 93 <div id="selectDivId"></div> 94 95 96 97 </body> 98 </html>
整体效果：