ITPub博客

首页 > IT职业 > IT职场 > 从零玩转jQuery-选择器

从零玩转jQuery-选择器

IT职场 作者:longbow 时间:2021-09-09 09:52:15 0 删除 编辑

基础选择器

选择器 名称 描述 返回 示例
#id id选择器 根据给定的id匹配一个元素 单个元素 $("#box");选取id为box元素
.class 类选择器 根据给定的类名匹配元素 集合元素 $(".box");选取所有类名为box元素
element 元素选择器 根据给定的元素名称匹配元素 集合元素 $("p");选取所有

元素

* 通配符选择器 匹配所有元素 集合元素 $("*");选取所有元素
selector1,selector2,selectorN 并集选择器 将所有选择器匹配到的元素合并后一起返回 集合元素 $("div,p,.box");选取所有
元素,所有

元素和所有类名为box元素


层次选择器

选择器 名称 描述 返回 示例
$("ancestor descendant") 后代选择器 选取ancestor元素的所有descendant后代标签(不光是儿子,包括孙子/重孙子等) 集合元素 $("div span");选取
元素里所有的元素
$("parent > child") 子元素选择器 找到选取parent 元素中所有直接子元素child(只有儿子,不包括孙子/重孙子等) 集合元素 $("div>span");选取
元素下元素名称是的子元素
$("prev + next") 相邻兄弟选择器 选取prev元素后面紧跟的那个next元素 集合元素 $(".one+div");选取类名为one的下一个同级的
元素
$("prev ~ siblings") 通用兄弟选择器 选取prev元素后面的所有next元素 集合元素 $("#two~div");选取id名为two元素后面所有同级的
元素

序选择器

如上内容不再一一赘述,观看第十章-CSS选择器,使用时查询文档即可
做开发是脑力活,我们需要掌握的是解决问题的方法,而不是死记硬背

属性选择器

如上内容不再一一赘述,观看第十章-CSS选择器,使用时查询文档即可
做开发是脑力活,我们需要掌握的是解决问题的方法,而不是死记硬背

内容过滤选择器

选择器 描述 返回
:empty 选取不包含子元素或文本为空的元素 集合元素
:parent 选取含有子元素或文本的元素 集合元素
:contains(text) 选取含有文本内容为text的元素 集合元素
:has(selector) 选取含有选择器所匹配的元素的元素 集合元素
  • :empty

html>
    
    05-jQuery选择器
    
    
zs
<!--包含内容不会被找到-->
<!--包含子元素不会被找到-->     lnj
<!--不是指定元素不会被找到-->
  • :parent

html>
    
    05-jQuery选择器
    
    
zs
<!--有文本内容会被找到-->
<!--有子元素会被找到-->     lnj
  • :contains(text)

html>
    
    05-jQuery选择器
    
    
lnj
zs
lnj
<!--子元素中包含该文本也会被找到-->     lnj
  • :has(selector)

    • 和:parent区别,parent只要有子元素就会被找到,:has(selector)不仅要有子元素,而且子元素还必须满足我们的条件

html>
    
    05-jQuery选择器
    
    
 <!--后代中包含span元素会被找到-->     jjj
<!--后代中不包含span元素不会被找到-->     

zs

<!--后代中包含span元素会被找到-->     

        lnj     



作者:极客江南
链接:https://www.jianshu.com/p/1f4090e59e6c


来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/1696/viewspace-2813770/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-04-15

  • 博文量
    95
  • 访问量
    560