jQuery过滤选择器——内容过滤选择器

最新推荐文章于 2021-06-27 10:34:23 发布

阅读量448

点赞数

分类专栏： JavaScript 文章标签： jquery

本文链接：https://blog.csdn.net/cckevincyh/article/details/53151055

版权

JavaScript 专栏收录该内容

62 篇文章 0 订阅

订阅专栏

内容过滤选择器

内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上

1、:contains(text)
用法: $(”div:contains(’John’)”)
返回值：集合元素
说明: 匹配包含给定文本的元素.这个选择器比较有用，当我们要选择的不是dom标签元素时,它就派上了用场了,它的作用是查找被标签”围”起来的文本内容是否符合指定的内容的.
2、:empty
用法: $(”td:empty”)
返回值：集合元素
说明: 匹配所有不包含子元素或者文本的空元素
3、:has(selector)
用法: $(”div:has(p)”).addClass(”test”)
返回值 ：集合元素
说明: 匹配含有选择器所匹配的元素的元素.这个解释需要好好琢磨,但是一旦看了使用的例子就完全清楚了:给所有包含p元素的div标签加上class=”test”.
4、:parent
用法: $(”td:parent”)
返回值： 集合元素
说明: 匹配含有子元素或者文本的元素.注意:这里是”:parent”,可不是”.parent”哦!感觉与上面讲的”:empty”形成反义词.

内容过滤选择器示例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
    <style type="text/css">
            div,span{
                width: 140px;
                height: 140px;
                margin: 20px;
                background: #9999CC;
                border: #000 1px solid;
                float:left;
                font-size: 17px;
                font-family:Roman;
            }

            div.mini{
                width: 30px;
                height: 30px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family:Roman;
            }
     </style>
     <!--引入jquery的js库-->

    </head>

    <body>

         <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
         <input type="button" value=" 改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF"  id="b1"/>
         <input type="button" value=" 改变不包含子元素(或者文本元素) 的 div 空元素的背景色为"  id="b2"/>
         <input type="button" value=" 改变含有 class 为 mini 元素的 div 元素的背景色为 #0000FF"  id="b3"/>
         <input type="button" value=" 改变含有子元素(或者文本元素)的div元素的背景色为 #0000FF"  id="b4"/>
         <input type="button" value=" 改变不含有文本 di; 的 div 元素的背景色"  id="b5"/>

         <h1>天气冷了</h1>
         <h2>天气又冷了</h2>

         <div id="one">
             id为one   div

         </div>

         <div id="two" class="mini" >
               id为two   class是 mini  div
               <div  class="mini" >class是 mini</div>
        </div>

         <div class="one" >
                class是 one 
               <div  class="mini" >class是 mini</div>
               <div  class="mini" >class是 mini</div>
         </div>
         <div class="one" >
              class是 one 
               <div  class="mini01" >class是 mini01</div>
               <div  class="mini" >class是 mini</div>
        </div>


        <div class="one"/></div>
        <br>
        <div id="mover" >
              动画
        </div>
        <br>


    </body>
<script language="JavaScript">
        //<input type="button" value=" 改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF"  id="b1"/>
        $("#b1").click(function(){
            $("div:contains('di')").css("background","#0000FF");
        });
        //<input type="button" value=" 改变不包含子元素(或者文本元素) 的 div 空元素的背景色为"  id="b2"/>
        $("#b2").click(function(){
            $("div:empty").css("background","#0000FF");
        });

        //<input type="button" value=" 改变含有 class 为 mini 元素的 div 元素的背景色为 #0000FF"  id="b3"/>
        $("#b3").click(function(){
            $("div:has(.mini)").css("background","#0000FF");
        });
        //<input type="button" value=" 改变含有子元素(或者文本元素)的div元素的背景色为 #0000FF"  id="b4"/>
        $("#b4").click(function(){
            $("div:parent").css("background","#0000FF");
        });
        //<input type="button" value=" 改变不含有文本 di; 的 div 元素的背景色"  id="b5"/>
        $("#b5").click(function(){
            $("div:not(:contains('di'))").css("background","#0000FF");
        });

</script>
</html>

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery过滤选择器——内容过滤选择器

内容过滤选择器内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上1、:contains(text) 用法: $(”div:contains(’John’)”) 返回值：集合元素说明: 匹配包含给定文本的元素.这个选择器比较有用，当我们要选择的不是dom标签元素时,它就派上了用场了,它的作用是查找被标签”围”起来的文本内容是否符合指定的内容的. 2、:empt
复制链接

扫一扫

专栏目录