jquery基本选择器(重点):
#id:id选择器;
Element:元素选择器;
Class:类选择器;
jquery层级选择器:
ancestor descendant:表示选取ancestor 里面所有的descendant元素;
parent>child:选择parent元素的子元素;
注意:ancestor descendant和parent>child的区别:选择所有/选择自己的孩子
select+:获取后面的兄弟元素(只取下一个);
select~:获取后面的兄弟元素(取后面所有个);
:first/last:第一/最后一个元素;
实例
<body> <ul> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> <li>f</li> </ul> <input type="button" name="" value="点击"> <script type="text/javascript"> $("input").click(function(){ $("li:first").css({background:"red"}); }); </script> </body>
:even/odd:偶数/奇数元素;(下标从0开始)
:eq(index):指定索引位置元素;
:gt(index)/lt(index):大于/小于index下标的所有元素;
:header:找h标签元素(不用找父元素,可以直接:header);
:not(“select”):选择时除去select元素;
jquery内容选择器:
:contains(“text”):匹配含有text内容的元素;
实例:选择内容包含333的div ,背景变红色:
<script type="text/javascript" src="jquery-3.3.1.min.js"></script> </head> <body> <div id="div1"> 111 </div> <div id="div2"> 222 </div> <div id="div3">333</div> <div id="div4"> 444 </div> <input type="button" value="点击" name=""> <script type="text/javascript"> $("input").click(function(){ $("div:contains('333')").css({background:"red"}); }); </script> </body>
:empty:匹配内容为空的内容;
:parent:选择作为父元素的元素;
:has(selecter):选择包含有selecter的选择器;
实例:选择包含p的div把背景色换成红色:
<body> <div id="div1"> 111 </div> <div id="div2"> 222 </div> <div id="div3">333</div> <div id="div4"> 444 <p>1</p> </div> <input type="button" value="点击" name=""> <script type="text/javascript"> $("input").click(function(){ //$("div:contains('333')").css({background:"red"}); $("div:has(p)").css({background:"red"}); }); </script> </body>
jquery属性选择器:
[attribute]:属性选择为attribute;
[attribute = “value”]:查找属性为value的元素;
$("input").click(function(){ $("img[src]").css({background:"red"}); $("img[src='a.jpg']").css({background:"pink"}); });
[attribute != “value”]:查找属性不为value的元素;
[attribute ^= “value”]:查找属性以value开头的元素;
$("img[src^='a']").css({background:"pink"});
[attribute $= “value”]:查找属性以value结尾的元素;(必须是最后如.jpg 的g)
$("img[src $='g']").css({background:"pink"});
[attribute *= “value”]:查找属性中包含value的元素;
$("img[src *='a']").css({background:"pink"});
jquery子选择器(伪类选择器):
分为Type阵营,child阵营:
:first-child/last-child:找第一个/最后一个子元素;
:first-of-type/last-of-type:找第一个/最后一个子元素;(一模一样的功能);
$("input").click(function(){ $("li:first-child").css({background:"red"}); $("li:last-of-type").css({background:"pink"}); });
:nth-child(n) / :nth-of-type(n):找到第n个子元素;
$("li:nth-child(2)").css({background:"red"});
:nth-last-child(n) / :nth-last-of-type(n):找到倒数第n个子元素;
$("li:nth-last-child(2)").css({background:"red"}); $("li:nth-last-of-type(3)").css({background:"pink"});