zoukankan      html  css  js  c++  java
  • 【6】jQuery学习——入门jQuery选择器之过滤选择器内容过滤选择器

    我们了解了jQuery基本过滤选择器的知识,今天我们来学习一下jQuery的另一个强大的过滤选择器——内容过滤选择器。
    有了jQuery内容过滤选择器,我们就可以轻松地对DOM文档中的文本内容进行筛选,让我们准确地选取我们所需要的元素。

    ========================================================================

    下面我们来了解下这4个内容过滤选择器

    选择器 描述 返回 示例
    $("Element:contains(text)") 选取含有文本内容为“text”元素 集合元素 $(“div:contains('john')”)选取含有文本“john”的div元素
    $("Element:empty") 获得对象元素不包含文本或子元素 集合元素 $(“div:empty”)选取不包含子元素(包括文本元素)的div空元素
    $("Element:parent") 以上面相反,获得对象元素包含文本或子元素 集合元素 $(“div:parent”)选取拥有子元素(包括文本元素)的div元素
    $("Element:has(selector)") 选取含有某个元素是否包含某个元素 集合元素 $("p:has(span)")表示所有包含span元素的p元素

    ==========================================================================

    ps.文章参考梦三秋和w3cfuns网站

    ==========================================================================

    完成了w3cfuns网站的作业

    内容过滤选择器
     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>实例</title>
     6 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
     7 <script type="text/javascript">
     8 $(function(){
     9     $("#but1").click(function(){
    10         $("div:contains(huige)").text("跟huige学习jQuery");
    11     });
    12     $("#but2").click(function(){
    13         $("div:empty").text("我不包含任何元素或文本");
    14     });
    15     $("#but3").click(function(){
    16         $("div:parent").text("我包含元素或文本");
    17     });
    18     $("#but4").click(function(){
    19         $("div:has(p)").text("我包含P元素");
    20     });
    21 });
    22 </script>
    23 <style type="text/css">
    24 body,div{margin:0; padding:0;}
    25 body{padding:0 10px;}
    26 div,p{margin-top:10px; height:22px; color:#fff; line-height:22px; border:1px #000 solid;}
    27 div{background:#39f;}
    28 p{background:#f00;}
    29 div p{height:8px; line-height:8px;}
    30 </style>
    31 </head>
    32 
    33 <body>
    34 
    35 <input type="button" id="but1" value="选择所有div中包含我是huige的内容,将其内容修改成&ldquo;跟huige学习jQuery&rdquo;" />
    36 <input type="button" id="but2" value="选择所有div中不包含子元素或者文本的对象,将其内容修改成&ldquo;我不包含任何元素或文本&rdquo;" />
    37 <input type="button" id="but3" value="选择所有div中包含子元素或者文本的对象,将其内容修改为&ldquo;我包含元素或文本&rdquo;" />
    38 <input type="button" id="but4" value="选择所有div中包含p子元素的对象,将其内容修改为&ldquo;我包含p元素&rdquo;" />
    39 
    40 
    41 <div>huige是个好人</div>
    42 <div>好人是huige</div>
    43 <div>huige是个博客园主</div>
    44 <div>博客园主是huige</div>
    45 <div>huige博客园主是个好人</div>
    46 <div></div>
    47 <div></div>
    48 <div></div>
    49 <div></div>
    50 <p><span></span></p>
    51 <p><span></span></p>
    52 <p><span>测试1</span></p>
    53 <p>测试2</p>
    54 <div><p></p></div>
    55 <div><p></p></div>
    56 <div><p></p></div>
    57 <div><p></p></div>
    58 
    59 
    60 </body>
    61 </html>
  • 相关阅读:
    NOIP201208同余方程
    NOIP模拟赛 最佳组合
    NOIP模拟赛 拓展
    CF1253E Antenna Coverage(DP)
    LOJ6033「雅礼集训 2017 Day2」棋盘游戏 (博弈论,二分图,匈牙利算法)
    CF582E Boolean Function(DP,状态压缩,FMT)
    CF750G New Year and Binary Tree Paths(DP)
    Codeforces Round 596 题解
    AGC008E Next or Nextnext(组合计数,神奇思路)
    ARC082E ConvexScore(神奇思路)
  • 原文地址:https://www.cnblogs.com/huige728/p/2627848.html
Copyright © 2011-2022 走看看