Java Web(2)-jQuery上 (2)

prev~sibings 之后的兄弟元素选择器:匹配 prev 元素之后的所有 siblings 元素

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <style type="text/css"> div, span, p { width: 140px; height: 140px; margin: 5px; background: #aaa; border: #000 1px solid; float: left; font-size: 17px; font-family: Verdana; } div.mini { width: 55px; height: 55px; background-color: #aaa; font-size: 12px; } div.hide { display: none; } </style> <script type="text/javascript" src=""></script> <script type="text/javascript"> $(document).ready(function(){ //1.选择 body 内的所有 div 元素 $("#btn1").click(function(){ $("body div").css("background", "#bbffaa"); }); //2.在 body 内, 选择div子元素 $("#btn2").click(function(){ $("body > div").css("background", "#bbffaa"); }); //3.选择 id 为 one 的下一个 div 元素 $("#btn3").click(function(){ $("#one+div").css("background", "#bbffaa"); }); //4.选择 id 为 two 的元素后面的所有 div 兄弟元素 $("#btn4").click(function(){ $("#two~div").css("background", "#bbffaa"); }); }); </script> </head> <body> <input type="button" value="选择 body 内的所有 div 元素" /> <input type="button" value="在 body 内, 选择div子元素" /> <input type="button" value="选择 id 为 one 的下一个 div 元素" /> <input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" /> <br><br> <div> id 为 one,class 为 one 的div <div>class为mini</div> </div> <div title="test"> id为two,class为one,title为test的div <div title="other">class为mini,title为other</div> <div title="test">class为mini,title为test</div> </div> <div> <div>class为mini</div> <div>class为mini</div> <div>class为mini</div> <div></div> </div> <div> <div>class为mini</div> <div>class为mini</div> <div>class为mini</div> <div title="tesst">class为mini,title为tesst</div> </div> <div>style的display为"none"的div</div> <div>class为"hide"的div</div> <div> 包含input的type为"hidden"的div<input type="hidden" size="8"> </div> <span>^^span元素^^</span> </body> </html> 3. 过滤选择器

基本过滤器:

:first 获取第一个元素

:last 获取最后个元素

:not(selector) 去除所有与给定选择器匹配的元素

:even 匹配所有索引值为偶数的元素,从 0 开始计数

:odd 匹配所有索引值为奇数的元素,从 0 开始计数

:eq(index) 匹配一个给定索引值的元素

:gt(index) 匹配所有大于给定索引值的元素 ,$("li:gt(2)") //下标大于 2 的li

:lt(index) 匹配所有小于给定索引值的元素

:header 匹配如 h1,h2,h3 之类的标题元素 :

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwxxgp.html