jquery的选择器和过滤器
一.选择器
1.基本选择器
html标签
<div a="1" b="ab">1</div>
<div class="div1" b="ac">2
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<span a="5" b="3"></span>
<div a="2" b="cd ab">3</div>
<div a="3" class="div2" b="ab-c">4</div>
<div a="12" b="a-b-c">5</div>
选择器
$("div");//标签名选择器
$("#div1");//id选择器
$(".div0");//class选择器
$("*");//通配符选择器
$("div .div1");//后代选择器
$("div>.div1");//子代选择器
$(".div1+div");//下一个兄弟选择器 ,如果下面第一个不是div,获取不到
$(".div1~div");//下面所有的兄弟选择器,只能获取到div
$("div.div1");//中类名是div1的元素 返回的是div1
$(".div1>*"); //类名是ddiv中类名是div1的div, 返回的是div
$("div .div1");//div后代iv1所有的子元素 返回的是div的所有div1后代元素
console.log($(".div1>*").length);//div1子元素的数量
onsolce.log($(".div1>").length);//div1子元素的数量
$(".div1+*")//div1下一个任意兄弟元素,即使不是div也可以获取到
console.log($(".div1+"))
2.选择器方法
$(".div1").next();//$(".div1+");
$(".div1").nextAll();//$(".div1~");
$(".div1").nextUntil(".div2").css("color","red");//div1到div2之间的兄弟元素 元素类型无要求
$(".div1").prev();//向上的一个兄弟元素
$(".div1").prevAll();//向上的所有兄弟元素
$(".div1").prevUntil(".div2");//向上到div2直接兄弟元素
$(".div1").find("span");//$(".div1 span");
$(".div1").children();//$(".div>");
3.属性选择器 放在[]中,特殊判断字符放在=的左边
console.log($("div[a]"));//[a] 表示是否具备标签属性a 的div
console.log($("[a]"));//[a] 表示是否具备标签属性a 所有的元素
console.log($("[a=1]"));//标签必须有a属性,并且属性值是1
console.log($("[a^=1]"));//属性值的开头是1的元素
$("[b|=ab]").css("color", "red");//属性b的值是ab或者以ab起头后面使用—来连接的
$("[b~=ab]").css("color", "red");//属性b的值是ab或者值是以空格区分,并且包含ab的
$("[b$=b]"); b的值以b结尾
$("[b!=ab]"); b的值不是ab的
$("[b*=c]"); b的值中包含有c这个字符的
$("[a][b]");//有a属性和b属性的元素 全有才符合条件
二.过滤器
html标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <style>
div{
animation: boxMove 2s;
}
@keyframes boxMove {
0%{
left:0;
}
50%{
left:100px;
}
100%{
left:0;
}
}
</style> -->
<style>
.div4
{
/* display: none; */
visibility: hidden;
}
</style>
<script src="./node_modules/jquery/dist/jquery.js"></script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<ul>
<span>10</span>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
</ul>
<ul>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
</ul>
<div>1</div>
<div></div>
<div><span></span></div>
<div>3</div>
<div class="div1">
<div></div>
<div class="div2">1</div>
<div class="div2"></div>
<div></div>
</div>
<div class="div1">
<div></div>
<div class="div3"></div>
<div class="div3"></div>
<div></div>
</div>
<div class="div4">1</div>
</body>
</html>
过滤器
一般过滤器
$("li:first").css("color","red") //第一组的第一个li
$("li:first-child").css("color","red"); //每组的第一个元素,如果不是li,则此组跳过
$("li:first-of-type").css("color","red"); //每组类型的第一个 按照类型查找
$("li:last")
$("li:last-child")
$("li:last-of-type")
$("ul>:not(li)") //ul所有子元素中不是li元素的
$("li:even").css("color","red"); //偶数项 列表是从0开始计数 按照类型查找
$("li:odd").css("color","red"); //奇数项
$("li:nth-child(2)").css("color","red"); //每组的第二个 ,别的类型的元素也计算在内
$("li:nth-of-type(2)").css("color","red"); //类型查找 每组的第二个
$("li:nth-child(even)").css("color","red"); //偶数,列表是从1开始计数
$("li:nth-of-type(even)").css("color","red"); //偶数,列表是从1开始计数
$("li:nth-child(odd)").css("color","red"); //奇数,列表是从1开始计数
$("li:nth-of-type(odd)").css("color","red"); //奇数,列表是从1开始计数
$("li:nth-child(2n)");//偶数
$("li:nth-child(2n-1)")//奇数
特殊过滤器
$("li:eq(2)").css("color","red"); /从0开始计算,第一组的第二个 类型查找
$("li:gt(2)").css("color","red");//列表中下标大于2的所有元素 类型查找 但是是获取后的总列表
$("li:lt(2)").css("color","red");//列表中下标小于2的所有元素
$(":header");//所有h1-h6的元素
$(":animated");//所有使用aniamte动画的元素
$(":focus"); //聚焦元素
$(":empty");//没有内容或者子元素的元素
$(".div1:has(.div2)") //含有div2的内容的div1
$(".div1:parent") //判断有子元素的或者有内容的div1
console.log($(".div2").parent());//获取div2的父元素
console.log($(".div2").parents());//获取div2的所有父元素
console.log($(".div2").parentsUntil("html"));//获取div2的所有父元素中到什么之前的
$(".div1:contains(1)") //内容为1的div1
$(".div4:hidden") //隐藏元素,针对display:none或者是不显示的元素
$(":visible") //显示元素
$(":only-child") 只有一个子元素的元素
console.log($("div").is(".div1"))//这个方法得到一个布尔值,是否在div中有类名是div1的元素 不仅可以判断className,还可以判断id,name等
console.log($("div").is("[a]"))
console.log($("div").hasClass("div1"));//这个方法得到一个布尔值,是否在div中类名是div1的元素 只能来判断className
console.log($("li").slice(2,4));//div列表中选择第2个到第4个之间的元素
$(":input") //获取input
$(":text");//type=text的input
$(":password");//获取有password属性的input
$(":disabled");//不可用
$(":enabled");//可用
$(":checked");//用于input中checkbox和radio
$(":selected");//用于下拉菜单的元素