jQuery选择器与过滤器

1 篇文章 0 订阅
1 篇文章 0 订阅

选择器

$(“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下一个任意兄弟元素

( " . d i v 1 " ) . n e x t ( ) ; 等 于 (".div1").next(); 等于 (".div1").next();(".div1+");
( " . d i v 1 " ) . n e x t A l l ( ) ; 等 于 (".div1").nextAll(); 等于 (".div1").nextAll();(".div1~");
$(".div1").nextUntil(".div2").css(“color”,“red”); div1到div2之间的兄弟元素

$(".div1").prev(); 向上的一个兄弟元素
$(".div1").prevAll(); 向上的所有兄弟元素
$(".div1").prevUntil(".div2"); 向上到div2之间的兄弟元素

( " . d i v 1 " ) . f i n d ( " s p a n " ) ; 等 于 (".div1").find("span"); 等于 (".div1").find("span");(".div1 span");
( " . d i v 1 " ) . c h i l d r e n ( ) ; 等 于 (".div1").children(); 等于 (".div1").children();(".div>");

属性选择器

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

$("[b~=ab]").css(“color”,“red”);//值是ab或者值是以空格分隔的多个值,并且其中包含ab的
一般用于class中的多个样式选择
( " [ b ("[b ("[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( ( " . d i v 1 : h a s ( . d i v 2 ) " ) ) ; 含 有 d i v 2 的 内 容 的 d i v 1 元 素 c o n s o l e . l o g ( (".div1:has(.div2)")); 含有div2的内容的div1元素 console.log( (".div1:has(.div2)"));div2div1console.log((".div1").has(".div2"))
console.log($(".div2:parent")); 判断div2有子元素的或者有内容的

console.log( ( " . d i v 2 " ) . p a r e n t ( ) ) ; 获 取 d i v 2 的 父 元 素 c o n s o l e . l o g ( (".div2").parent()); 获取div2的父元素 console.log( (".div2").parent());div2console.log((".div2").parents()); 获取div2的所有父元素
console.log($(".div2").parentsUntil(“html”)); 获取div2的所有父元素中到某个子元素之前的

console.log( ( " . d i v 2 : c o n t a i n s ( 1 ) " ) ) ; c o n s o l e . l o g ( (".div2:contains(1)")); console.log( (".div2:contains(1)"));console.log((".div1:contains(1)"));//判断元素的后代中有1这个内容的元素,包括孩子孙子之类的所有子代。

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

筛选显示与隐藏

console.log( ( " . d i v 4 : h i d d e n " ) ) ; 隐 藏 元 素 , 针 对 d i s p l a y : n o n e 或 者 是 不 显 示 的 元 素 v i s i b i l i t y : h i d d e n ; 不 是 隐 藏 , 因 为 它 占 位 了 , 所 以 不 会 筛 选 出 它 c o n s o l e . l o g ( (".div4:hidden")); 隐藏元素,针对display:none或者是不显示的元素 visibility: hidden;不是隐藏,因为它占位了,所以不会筛选出它 console.log( (".div4:hidden"));display:nonevisibility:hidden;console.log((":hidden")); 筛选所有的隐藏元素

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

筛选返回一个布尔值、slice

console.log( ( " d i v " ) . i s ( " . d i v 1 " ) ) 这 个 方 法 得 到 一 个 布 尔 值 , 是 否 在 d i v 中 有 类 名 是 d i v 1 的 元 素 c o n s o l e . l o g ( ("div").is(".div1")) 这个方法得到一个布尔值,是否在div中有类名是div1的元素 console.log( ("div").is(".div1"))divdiv1console.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"); 用于下拉菜单的元素

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值