jQuery内容筛选选择器实例代码


Posted in Javascript onFebruary 06, 2017

本文实例为大家分享了jQuery内容筛选选择器的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title></title>
  <link rel="stylesheet" href="imooc.css" type="text/css">
  <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
  <h2>内容筛选器</h2>
  <h3>:contains/:has</h3>
  <div class="left">
    <div class="div">
      <p>:contains</p>
    </div>
    <div class="div">
      <p>:contains</p>
    </div>
    <div class="div">
      <p>
        <span>:has</span>
      </p>
    </div>
    <div class="div">
      <p>:contains</p>
    </div>
  </div>

  <script type="text/javascript">
    //查找所有class='div'中DOM元素中包含"contains"的元素节点
    //并且设置颜色
    $(".div:contains(':contains')").css("color", "#CD00CD");
  </script>

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


  <h3>:parent/:empty</h3>
  <div class="left">
    <div class="aaron">
      <a>:parent</a>
    </div>
    <div class="aaron">
      <a>:parent</a>
    </div>
    <div class="aaron">
      <a>:parent</a>
    </div>
    <div class="aaron">
      <a></a>
    </div>
  </div>
  <script type="text/javascript">
    //选择所有包含子元素或者文本的a元素
    //增加一个蓝色的边框
    $("a:parent").css("border", "3px groove blue");
  </script>

  <script type="text/javascript">
    //找到a元素下面的所有空节点(没有子元素)
    //增加一段文本与边框
    $("a:empty").text(":empty").css("border", "3px groove red"); 
  </script>

</body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
实例分析js和C#中使用正则表达式匹配a标签
Nov 26 Javascript
jQuery中html()方法用法实例
Dec 25 Javascript
Bootstrap开关(switch)控件学习笔记分享
May 30 Javascript
AngularJS 自定义指令详解及示例代码
Aug 17 Javascript
深入分析node.js的异步API和其局限性
Sep 05 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
Jun 11 Javascript
浅谈JS中的反柯里化( uncurrying)
Aug 17 Javascript
解决Webpack 热部署检测不到文件变化的问题
Feb 22 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
Sep 17 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
Mar 07 Javascript
谈谈JavaScript中的函数
Sep 08 Javascript
JavaScript ES 模块的使用
Nov 12 Javascript
jQuery基本筛选选择器实例代码
Feb 06 #Javascript
jQuery层级选择器实例代码
Feb 06 #Javascript
jQuery元素选择器实例代码
Feb 06 #Javascript
对称加密与非对称加密优缺点详解
Feb 06 #Javascript
jquery实现input框获取焦点的方法
Feb 06 #Javascript
jQuery表单元素选择器代码实例
Feb 06 #Javascript
Jquery鼠标放上去显示全名的实现方法
Feb 06 #Javascript
You might like
用来给图片加水印的PHP类
2008/04/09 PHP
纯php打造的tab选项卡效果代码(不用js)
2010/12/29 PHP
PHP版 汉字转码的实现详解
2013/06/09 PHP
PHP使用imagick读取PDF生成png缩略图的两种方法
2014/03/20 PHP
php cli换行示例
2014/04/22 PHP
PHP管理依赖(dependency)关系工具 Composer的自动加载(autoload)
2014/08/18 PHP
PHP7常量数组用法分析
2016/09/26 PHP
javascript下操作css的float属性的特殊写法
2007/08/22 Javascript
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
2015/09/07 Javascript
jQuery限制图片大小的方法
2016/05/25 Javascript
Angularjs的ng-repeat中去除重复数据的方法
2016/08/05 Javascript
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
react native 获取地理位置的方法示例
2018/08/28 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
2018/10/07 Javascript
NodeJS模块与ES6模块系统语法及注意点详解
2019/01/04 NodeJs
Vue传参一箩筐(页面、组件)
2019/04/04 Javascript
layer设置maxWidth及maxHeight解决方案
2019/07/26 Javascript
Vue 实例中使用$refs的注意事项
2021/01/29 Vue.js
JavaScript实现点击出现子菜单效果
2021/02/08 Javascript
用Javascript实现发送短信验证码间隔功能
2021/02/08 Javascript
Python lambda和Python def区别分析
2014/11/30 Python
Python数据分析之如何利用pandas查询数据示例代码
2017/09/01 Python
Python函数定义及传参方式详解(4种)
2019/03/18 Python
详解使用CSS3的@media来编写响应式的页面
2017/11/01 HTML / CSS
吉列剃须刀美国官网:Gillette美国
2018/07/13 全球购物
C,C++的几个面试题小集
2013/07/13 面试题
Linux如何修改文件和文件夹的权限
2013/09/05 面试题
代理班主任的自我评价
2014/02/04 职场文书
小学三年级学生评语
2014/04/22 职场文书
法人任命书范本
2014/06/04 职场文书
2014国庆节标语口号
2014/09/19 职场文书
科技馆观后感
2015/06/08 职场文书
公司员工离职感言
2015/08/03 职场文书
「天才王子的赤字国家重生术」妮妮姆·拉雷粘土人开订
2022/03/21 日漫
winserver2019安装软件一直卡在应用程序正在为首次使用做准备
2022/06/10 Servers