jQuery选择器与过滤器

选择器

$(“div”) 标签名选择器
$("#div1") id选择器
$(".div0") class选择器
$("*") 通配符选择器
$(“div .div1”) 后代选择器
$(“div>.div1”) 子代选择器
$(".div1+div") 下一个兄弟选择器
$(".div1~div") 下面所有的兄弟选择器

$(“div.div1”) div中类名是div1的div
$(“div .div1”) div后代中类名是div1的元素

$(".div1>") 类名是div1所有的子元素
$(".div1>").length div1下所有子元素的数量
$(".div1>").length div1下所有子元素的数量

$(".div1+*") div1下一个任意兄弟元素
$(".div1+") div1下一个任意兄弟元素

$(".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>");

属性选择器

console.log($("div[a]"));[a]表示是否具备标签属性aconsole.log($("[a]"));//[a] 表示是否具备标签属性a
console.log($("[a=1]"));//标签必须有a属性，并且属性值是1console.log($("[a^=1]"));//属性值的开头是1的元素
$("[b|=ab]").css(“color”,“red”);//值是ab或者以ab起头后面使用—来连接的

$("[b~=ab]").css(“color”,“red”);//值是ab或者值是以空格分隔的多个值，并且其中包含ab的
一般用于class中的多个样式选择
$("[b$=b]");以b结尾的值
$("[b!=ab]");值不是ab的
$("[b*=c]");值中包含有c这个字符的
$("[a][b]");//有a属性和b属性的元素

过滤器

过滤第一个和最后一个的三种语句

$(“li:first”).css(“color”,“red”);
$(“li”).first();
$(“li:last”)
$(“li”).last();
将所有li放在一个列表中，筛选出第一个(最后一个)元素

$(“li:first-child”).css(“color”,“red”);
$(“li:last-child”)
查看每个li父元素中的第一个(最后一个)子元素，如果是li的筛选出来

$(“li:first-of-type”).css(“color”,“red”);
$(“li:last-of-type”)
将每个li的父元素中第一个(最后一个)类型是li的子元素筛选出来

过滤奇偶的两种情况

console.log($(“ul>:not(li)”)); ul所有子元素中不是li元素的
$(“ul>”).not(“li”)
$(“li:even”).css(“color”,“red”); 偶数项 列表是从0开始计数
$(“li:odd”).css(“color”,“red”); 奇数项 列表是从0开始计数

$(“li:nth-child(2)”).css(“color”,“red”); 选中一个li，该li是其父元素容器中第二个元素，包括所有类型的子元素
$(“li:nth-of-type(2)”).css(“color”,“red”); 选中一个li，该li是其父元素容器中所有li子元素组成的列表中的第二个li元素。
$(“li:nth-child(even)”).css(“color”,“red”); 偶数，列表是从1开始计数，计数包含所有类型的子元素
$(“li:nth-of-type(even)”).css(“color”,“red”); 偶数，列表是从1开始计数，计数只包含li类型的子元素

$(“li:nth-child(odd)”).css(“color”,“red”); //奇数，列表是从1开始计数，计数包含所有类型的子元素
$(“li:nth-of-type(odd)”).css(“color”,“red”); //奇数，列表是从1开始计数，计数只包含li类型的子元素

$(“li:nth-child(2n)”);//偶数
$(“li:nth-child(2n-1)”)//奇数
$(“li:nth-child(3n)”)//奇数

筛选固定序号、下标大小于、h1-h6、聚焦、应用动画

$(“li:eq(2)”).css(“color”,“red”); li列表中序号为2的li元素
$(“li”).eq(2)

$(“li:gt(2)”).css(“color”,“red”); 列表中下标大于2的所有元素
$(“li:lt(2)”).css(“color”,“red”); 列表中下标小于2的所有元素

$(":header"); 所有h1-h6的元素
$(":animated"); 所有使用aniamte动画的元素
$(":focus"); 聚焦元素

筛选父子元素相关

$(":empty")//没有内容或者子元素的元素
$(“div:empty”)

console.log($(".div1:has(.div2)"));含有div2的内容的div1元素console.log($(".div1").has(".div2"))
console.log($(".div2:parent")); 判断div2有子元素的或者有内容的

console.log($(".div2").parent());获取div2的父元素console.log($(".div2").parents()); 获取div2的所有父元素
console.log($(".div2").parentsUntil(“html”)); 获取div2的所有父元素中到某个子元素之前的

console.log( $(".div2:contains(1)"));console.log($(".div1:contains(1)"));//判断元素的后代中有1这个内容的元素，包括孩子孙子之类的所有子代。

$(":only-child") 只有一个子元素的元素

筛选显示与隐藏

console.log($(".div4:hidden"));隐藏元素，针对display:none或者是不显示的元素visibility:hidden;不是隐藏，因为它占位了，所以不会筛选出它console.log($(":hidden")); 筛选所有的隐藏元素

console.log($(":visible")) 筛选所有的显示元素

筛选返回一个布尔值、slice

console.log($("div").is(".div1"))这个方法得到一个布尔值，是否在div中有类名是div1的元素console.log($(“div”).is("[a]")) 是否在div中有属性名是a的元素
console.log($(“div”).hasClass(“div1”));//这个方法得到一个布尔值，是否在div中类名是div1的元素

console.log($(“li”).slice(2,4));//div列表中选择第2个到第4个之间的元素

input相关的

$(":input")
$(":text"); type=text的input
$(":password");

$(":disabled"); 不可用
$(":enabled"); 可用
$(":checked"); 用于input中checkbox和radio
$(":selected"); 用于下拉菜单的元素