$("[id^='div']"):选取id是div开头的
$("[id|='div']"):选取id是div开头或id等于div
$("[id$='div']"):选取id是div结尾的
$("[id*='div']"):选取id包含div的
$("[id~='div']"):选取id包含特定单词div的
$("div[id^=div]div[id$='a1']"):选取id以div开头a1结尾的的div(复式属性选择器 )
:even:偶数成员
:odd:奇数成员
:first:第一个元素
:last:最后一个元素
:eq(3):第四个元素
:gt(2):索引值大于2
:lt(3):索引值小于3
:header:标题元素:h1,h2等
:input:获取所有的表单元素,可以获取到form表单下面的所有的元素(input,textarea,select,button)
:contains:过滤器:匹配包含文本的元素
:has:匹配后代包含元素的元素:$("div:has('p')")匹配后代包含p元素的div
:empty:选择无子元素和任何内容的空元素
:parent:选择具有子元素的的元素
:first-child:父元素的第一个元素
:last-child:父元素的最后一个元素
:nth-child():父元素的第nth-child()个元素
:only-child:父元素的唯一一个子元素
扩展自定义的选择器($.expr[":"]):下面的代码是选择第一个div中width是10px的
<div style=" 10px;height: 10;background-color: green;"></div> <div style=" 10;height: 10;background-color: red;"></div> <div style=" 10;height: 10;background-color: grey;"></div> <script> $(function(){ $.expr[":"].abc = function(element){ return $(element).css("width") === "10px"; }; var n= $("div:abc").length; console.log(n); }) </script>
.find和.children的区别是,find是在所有的后代元素中查找,children是在子元素中查找
.eq()和.get()的区别是,.eq返回object对象,.get返回dom节点
.index返回元素的索引:下面的代码返回1(也可以通过:$("ul>li#li2").prevAll().length获取)
<ul> <li id="li1">1</li> <li id="li2">2</li> <li id="li3">3</li> </ul> <script> $(function(){ var item2= $("#li2"); console.log($("li").index(item2)); }) </script>
.end()返回最初的包装对象:第二个li红色,掐面的li蓝色
<ul> <li id="li1"><span>1</span></li> <li id="li2"><span>2</span></li> <li id="li3"><span>3</span></li> </ul> <script> $(function(){ $("#li2").find("span").css("color",'red').end().prevAll().find("span").css("color","blue").end(); }) </script>
.siblings:获取所有的兄弟