编程 Javascript

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>

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

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

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript 面向对象编程 function也是类

Sep 17 Javascript

基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )

Nov 14 Javascript

javascript制作loading动画效果 loading效果

Jan 14 Javascript

JS生成随机字符串的多种方法

Jun 10 Javascript

随鼠标移动的时钟非常漂亮遗憾的是只支持IE

Aug 12 Javascript

JS及PHP代码编写八大排序算法

Jul 12 Javascript

微信小程序轮播图swiper详解及实例（源码下载）

Jan 11 Javascript

详解angular应用容器化部署

Aug 14 Javascript

electron中使用bootstrap的示例代码

Nov 06 Javascript

前端面试知识点目录一览

Apr 15 Javascript

Vue使用vue-draggable 插件在不同列表之间拖拽功能

Mar 12 Javascript

微信小程序仿抖音短视频切换效果的实例代码

Jun 24 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