首页 > 代码库 > jQuery选择器（一）
jQuery选择器（一）
1.1 基本【掌握】
#id ， id选择器，<xxx id=""> 通过id值获得元素
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 // <input type="button" value="http://www.mamicode.com/选择 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="http://www.mamicode.com/选择 元素名是 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="http://www.mamicode.com/选择 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="http://www.mamicode.com/选择 所有的元素." 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="http://www.mamicode.com/选择 所有的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="http://www.mamicode.com/js/jquery-1.8.3.js" type="text/javascript"></script> 8 <script src="http://www.mamicode.com/script/assist.js" type="text/javascript"></script> 9 <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/style.css" /> 10 <script type="text/javascript"> 11 $(document).ready(function(){ 12 // <input type="button" value="http://www.mamicode.com/选择 id为 one 的元素." id="btn1"/> 13 // .click() 绑定点击事件 14 $("#btn1").click(function(){ 15 $("#one").css("background-color","#ff0"); 16 }); 17 // <input type="button" value="http://www.mamicode.com/选择 class 为 mini 的所有元素." id="btn2"/> 18 $("#btn2").click(function(){ 19 $(".mini").css("background-color","#ff0"); 20 }); 21 // <input type="button" value="http://www.mamicode.com/选择 元素名是 div 的所有元素." id="btn3"/> 22 $("#btn3").click(function(){ 23 24 $("div").css("background-color","#ff0"); 25 }); 26 // <input type="button" value="http://www.mamicode.com/选择 所有的元素." id="btn4"/> 27 $("#btn4").click(function(){ 28 $("*").css("background-color","#ff0"); 29 }); 30 // <input type="button" value="http://www.mamicode.com/选择 所有的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="http://www.mamicode.com/选择 id为 one 的元素." id="btn1"/> 45 <input type="button" value="http://www.mamicode.com/选择 class 为 mini 的所有元素." id="btn2"/> 46 <input type="button" value="http://www.mamicode.com/选择 元素名是 div 的所有元素." id="btn3"/> 47 <input type="button" value="http://www.mamicode.com/选择 所有的元素." id="btn4"/> 48 <input type="button" value="http://www.mamicode.com/选择 所有的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="http://www.mamicode.com/选择 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="http://www.mamicode.com/在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="http://www.mamicode.com/选择 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="http://www.mamicode.com/选择 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="http://www.mamicode.com/选择 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="http://www.mamicode.com/js/jquery-1.8.3.js" type="text/javascript"></script> 8 <script src="http://www.mamicode.com/script/assist.js" type="text/javascript"></script> 9 <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/style.css" /> 10 <script type="text/javascript"> 11 $(document).ready(function(){ 12 // <input type="button" value="http://www.mamicode.com/选择 body内的所有div元素." id="btn1"/> 13 $("#btn1").click(function(){ 14 $("body div").css("background-color","#ff0"); 15 }); 16 17 18 // <input type="button" value="http://www.mamicode.com/在body内,选择子元素是div的。" id="btn2"/> 19 $("#btn2").click(function(){ 20 $("body>div").css("background-color","#ff0"); 21 }); 22 23 // <input type="button" value="http://www.mamicode.com/选择 id为one 的下一个div元素." id="btn3"/> 24 $("#btn3").click(function(){ 25 $("#one+div").css("background-color","#ff0"); 26 }); 27 28 29 // <input type="button" value="http://www.mamicode.com/选择 id为two的元素后面的所有div兄弟元素." id="btn4"/> 30 $("#btn4").click(function(){ 31 $("#two~div").css("background-color","#ff0"); 32 }); 33 34 // <input type="button" value="http://www.mamicode.com/选择 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="http://www.mamicode.com/选择 body内的所有div元素." id="btn1"/> 48 <input type="button" value="http://www.mamicode.com/在body内,选择子元素是div的。" id="btn2"/> 49 <input type="button" value="http://www.mamicode.com/选择 id为one 的下一个div元素." id="btn3"/> 50 <input type="button" value="http://www.mamicode.com/选择 id为two的元素后面的所有div兄弟元素." id="btn4"/> 51 <input type="button" value="http://www.mamicode.com/选择 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="http://www.mamicode.com/选择第一个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="http://www.mamicode.com/选择最后一个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="http://www.mamicode.com/选择索引值等于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="http://www.mamicode.com/选择索引值大于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="http://www.mamicode.com/选择索引值小于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="http://www.mamicode.com/选择索引值为偶数 的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="http://www.mamicode.com/选择索引值为奇数 的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="http://www.mamicode.com/选择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="http://www.mamicode.com/选择所有的标题元素." 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="http://www.mamicode.com/选择当前正在执行动画的所有元素." 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="http://www.mamicode.com/请输入账号" defaultValue="http://www.mamicode.com/请输入账号" /> 4 // <input type="text" value="http://www.mamicode.com/请输入密码" defaultValue="http://www.mamicode.com/请输入密码"/> 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="http://www.mamicode.com/js/jquery-1.8.3.js" type="text/javascript"></script> 8 <script src="http://www.mamicode.com/script/assist.js" type="text/javascript"></script> 9 <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/style.css" /> 10 <script type="text/javascript"> 11 $(document).ready(function(){ 12 // <input type="button" value="http://www.mamicode.com/选择第一个div元素." id="btn1"/> 13 $("#btn1").click(function(){ 14 $("div:first").css("background-color","#ff0"); 15 }); 16 17 // <input type="button" value="http://www.mamicode.com/选择最后一个div元素." id="btn2"/> 18 $("#btn2").click(function(){ 19 $("div:last").css("background-color","#ff0"); 20 }); 21 22 // <input type="button" value="http://www.mamicode.com/选择class不为one的 所有div元素." id="btn3"/> 23 $("#btn3").click(function(){ 24 $("div:not(‘.one‘)").css("background-color","#ff0"); 25 }); 26 27 // <input type="button" value="http://www.mamicode.com/选择索引值为偶数 的div元素." id="btn4"/> 28 $("#btn4").click(function(){ 29 $("div:even").css("background-color","#ff0"); 30 }); 31 32 // <input type="button" value="http://www.mamicode.com/选择索引值为奇数 的div元素." id="btn5"/> 33 $("#btn5").click(function(){ 34 $("div:odd").css("background-color","#ff0"); 35 }); 36 37 // <input type="button" value="http://www.mamicode.com/选择索引值等于3的元素." id="btn6"/> 38 $("#btn6").click(function(){ 39 $("div:eq(3)").css("background-color","#ff0"); 40 }); 41 42 // <input type="button" value="http://www.mamicode.com/选择索引值大于3的元素." id="btn7"/> 43 $("#btn7").click(function(){ 44 $("div:gt(3)").css("background-color","#ff0"); 45 }); 46 47 // <input type="button" value="http://www.mamicode.com/选择索引值小于3的元素." id="btn8"/> 48 $("#btn8").click(function(){ 49 $("div:lt(3)").css("background-color","#ff0"); 50 }); 51 52 // <input type="button" value="http://www.mamicode.com/选择所有的标题元素." id="btn9"/> 53 $("#btn9").click(function(){ 54 $(":header").css("background-color","#ff0"); 55 }); 56 57 // <input type="button" value="http://www.mamicode.com/选择当前正在执行动画的所有元素." id="btn10"/> 58 $("#btn10").click(function(){ 59 $(":animated").css("background-color","#ff0"); 60 }); 61 62 // <input type="text" value="http://www.mamicode.com/请输入账号" defaultValue="http://www.mamicode.com/请输入账号" /> 63 // <input type="text" value="http://www.mamicode.com/请输入密码" defaultValue="http://www.mamicode.com/请输入密码"/> 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="http://www.mamicode.com/选择第一个div元素." id="btn1"/> 99 <input type="button" value="http://www.mamicode.com/选择最后一个div元素." id="btn2"/> 100 <input type="button" value="http://www.mamicode.com/选择class不为one的 所有div元素." id="btn3"/> 101 <input type="button" value="http://www.mamicode.com/选择索引值为偶数 的div元素." id="btn4"/> 102 <input type="button" value="http://www.mamicode.com/选择索引值为奇数 的div元素." id="btn5"/> 103 <input type="button" value="http://www.mamicode.com/选择索引值等于3的元素." id="btn6"/> 104 <input type="button" value="http://www.mamicode.com/选择索引值大于3的元素." id="btn7"/> 105 <input type="button" value="http://www.mamicode.com/选择索引值小于3的元素." id="btn8"/> 106 <input type="button" value="http://www.mamicode.com/选择所有的标题元素." id="btn9"/> 107 <input type="button" value="http://www.mamicode.com/选择当前正在执行动画的所有元素." id="btn10"/> 108 <input type="text" value="http://www.mamicode.com/请输入账号" defaultValue="http://www.mamicode.com/请输入账号" /> 109 <input type="text" value="http://www.mamicode.com/请输入密码" defaultValue="http://www.mamicode.com/请输入密码"/> 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="http://www.mamicode.com/选取不包含子元素(或者文本元素)的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="http://www.mamicode.com/选取含有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="http://www.mamicode.com/选取含有子元素(或者文本元素)的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="http://www.mamicode.com/选取含有文本“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="http://www.mamicode.com/js/jquery-1.8.3.js" type="text/javascript"></script> 8 <script src="http://www.mamicode.com/script/assist.js" type="text/javascript"></script> 9 <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/style.css" /> 10 <script type="text/javascript"> 11 $(document).ready(function(){ 12 // <input type="button" value="http://www.mamicode.com/选取含有文本“di”的div元素." id="btn1"/> 13 $("#btn1").click(function(){ 14 $("div:contains(‘di‘)").css("background-color","#ff0"); 15 }); 16 17 // <input type="button" value="http://www.mamicode.com/选取不包含子元素(或者文本元素)的div空元素." id="btn2"/> 18 $("#btn2").click(function(){ 19 $("div:empty").css("background-color","#ff0"); 20 }); 21 22 // <input type="button" value="http://www.mamicode.com/选取含有class为mini元素 的div元素." id="btn3"/> 23 $("#btn3").click(function(){ 24 $("div:has(‘.mini‘)").css("background-color","#ff0"); 25 }); 26 27 // <input type="button" value="http://www.mamicode.com/选取含有子元素(或者文本元素)的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="http://www.mamicode.com/选取含有文本“di”的div元素." id="btn1"/> 40 <input type="button" value="http://www.mamicode.com/选取不包含子元素(或者文本元素)的div空元素." id="btn2"/> 41 <input type="button" value="http://www.mamicode.com/选取含有class为mini元素 的div元素." id="btn3"/> 42 <input type="button" value="http://www.mamicode.com/选取含有子元素(或者文本元素)的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>
整体效果：
jQuery选择器（一）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。