jQuery选择器之内容筛选选择器

图片.png

注意事项:

  1. :contains与:has都有查找的意思,但是contains查找包含“指定文本”的元素,has查找包含“指定元素”的元素
  2. 如果:contains匹配的文本包含在元素的子元素中,同样认为是符合条件的。
  3. :parent与:empty是相反的,两者所涉及的子元素,包括文本节点

示例1:

$(".mp:contains(':parent')").css("color", "red");
匹配class为mp的且文本内容含有:parent的元素并将内容颜色改为红色
注意匹配的文本内容一定要使用单引号,否则无法匹配(不知道是不是bug)

示例2:

$(".div:has(span)").css("color", "blue");
查找所有class='div'中DOM元素中包含"span"的元素节点并且设置颜色为红色

示例3:

$("a:parent").css("border", "3px solid blue");
匹配任意位置所有a标签中的所有元素,并增加一个蓝色的边框

$("a:empty").text("empty").css("border", "3px red");
匹配所有a元素下所有的空节点,并为其写入文本为empty,并增加一个红色的文本框

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一章 入门 基本功能:访问和操作 dom 元素,控制页面样式,对页面的事件处理,与ajax完美结合,有丰富的插件...
    X_Arts阅读 1,071评论 0 2
  • Attribute: $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img...
    扑克脸_457e阅读 601评论 0 1
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,198评论 19 139
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,506评论 0 44
  • 作为前端和后台最基础可靠的神器工具JQuery,你真的对她有足够了解么? 亚非拉地区苦逼的前端er们,有时候不得不...
    扭了个妞阅读 386评论 0 0