jQuery内容过滤采纳器用法解析,jQuery内容筛选选拔器实例代码

正文实例为我们享用了jQuery基本筛选选用器的有血有肉代码,供我们参照他事他说加以考查,具体内容如下

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

本文实例讲述了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>:first/:last/:even/:odd</h3>
  <div class="left">
    <div class="div">
      <p>div:first</p>
      <p>:even</p>
    </div>
    <div class="div">
      <p>:odd</p>
    </div>
    <div class="div">
      <p>:even</p>
    </div>
    <div class="div">
      <p>:odd</p>
    </div>
    <div class="div">
      <p>:even</p>
    </div>
    <div class="div">
      <p>div:last</p>
      <p>:odd</p>
    </div>
  </div>
  <script type="text/javascript">
  //找到第一个div
  $(".div:first").css("color", "#CD00CD");
  </script>

  <script type="text/javascript">
  //找到最后一个div
  $(".div:last").css("color", "#CD00CD");
  </script>

  <script type="text/javascript">
  //:even 选择所引值为偶数的元素,从 0 开始计数
  $(".div:even").css("border", "3px groove red");
  </script>

  <script type="text/javascript">
  //:odd 选择所引值为奇数的元素,从 0 开始计数
  $(".div:odd").css("border", "3px groove blue");
  </script>


  <h3>:eq/:gt/:lt</h3>
  <div class="left">
    <div class="aaron">
      <p>:lt(3)</p>
    </div>
    <div class="aaron">
      <p>:lt(3)</p>
    </div>
    <div class="aaron">
      <p>:eq(2)</p>
    </div>
    <div class="aaron">
    </div>
    <div class="aaron">
      <p>:gt(3)</p>
    </div>
    <div class="aaron">
      <p>:gt(3)</p>
    </div>
  </div>
  <script type="text/javascript">
  //:eq
  //选择单个
  $(".aaron:eq(2)").css("border", "3px groove blue");
  </script>

  <script type="text/javascript">
  //:gt 选择匹配集合中所有索引值大于给定index参数的元素
  $(".aaron:gt(3)").css("border", "3px groove blue");
  </script>

   <script type="text/javascript">
  //:lt 选择匹配集合中所有索引值小于给定index参数的元素
  //与:gt相反
  $(".aaron:lt(2)").css("color", "#CD00CD");
  </script>

  <h3>:not</h3>
  <div class="left">
    <div>
      <input type="checkbox" name="a" />
      <p>Aaron</p>
    </div>
    <div>
      <input type="checkbox" name="b" />
      <p>慕课</p>
    </div>
    <div>
      <input type="checkbox" name="c" checked="checked" />
      <p>其他</p>
    </div>
  </div>
  <script type="text/javascript">
    //:not 选择所有元素去除不匹配给定的选择器的元素
    //选中所有紧接着没有checked属性的input元素后的p元素,赋予颜色
    $("input:not(:checked) + p").css("background-color", "#CD00CD");
  </script>
</body>

</html>
<!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>
        :has
      </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>

在HTML文书档案中,成分的内容能够是文件或许子成分,假若将某些选取器或许内容过滤选拔器一起使用,就足以从询问到的要素中愈发筛选出富有给定

上述正是本文的全体内容,希望对大家的求学抱有补助,也意在大家多多帮忙脚本之家。

上述正是本文的全部内容,希望对大家的就学抱有帮忙,也目的在于大家多多补助脚本之家。

文本大概子成分的成分

您恐怕感兴趣的小说:

  • 依靠jQuery接纳器之表单对象属性筛选选取器的实例
  • jQuery内容筛选选用器实例代码
  • jQuery选拔器之性质筛选选取器用法详解

您大概感兴趣的篇章:

  • 依赖jQuery选拔器之表单对象属性筛选选拔器的实例
  • jQuery基本筛选选用器实例代码
  • jQuery采取器之性质筛选选用器用法详解

1. :contains()选择器

用以选拔包涵给定文本的具备因素,格式:

复制代码 代码如下:

$(“selector1:contains(text)”)

如:

复制代码 代码如下:

$(“p:contains(‘text’)”).css(“background”, “#FCF”);

2. :has()选择器

用来筛选含有给定子成分的元素,格式:

复制代码 代码如下:

$(“selector1:has(selector2)”)

selector1和selector2均为私自有效的要素

如:

复制代码 代码如下:

$(“li:has(p)”).css(“background”, “red”);

3. :empty()选择器

格式:

复制代码 代码如下:

$(“selector:empty”)

用于选用不含有子成分大概文本的装有因素,selector中有着不分包子成分恐怕文本的空成分都将含有在询问结果中

如:

复制代码 代码如下:

$(“td:empty”).css(“background”, “#FCF”);

4. :parent选择器

格式:

复制代码 代码如下:

$(“selector:parent”)

用于采用包括子成分恐怕文本的要素,与empty选拔器的作用反倒

如:

复制代码 代码如下:

$(“td:parent”).css(“background”, “#FCF”);

愿意本文所述对大家的jQuery程序设计有着协助。

您只怕感兴趣的稿子:

  • 比方解说jQuery中可知性过滤采纳器的施用
  • jquery可知性过滤选拔器使用示例
  • jQuery子成分过滤采取器用法示例
  • jQuery内容过滤接纳器用法示例
  • jQuery过滤采取器优秀应用
  • 简单的说批注jQuery中的子成分过滤选取器
  • JQuery中基础过滤选取器用法实例剖判
  • JQuery中属性过滤选取器用法实例解析
  • jquery表单对象属性过滤采取器实例剖判
  • jQuery子属性过滤选用器用法深入分析
  • jQuery过滤选用器用法分析
  • jQuery过滤选用器详解
  • jQuery可知性过滤选取器用法示例

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website