`

jQuery内容过滤选择器、属性过滤选择器和jquery可见度过滤选择器

jQuery选择器 
阅读更多

         一、 jquery内容过滤选择器

 

         根据内容进行选择（根据节点的内容） 实现了对基本内容的过滤
         用途：
         1）可以实现内容的过滤
         2）判断选择指定元素内的元素
         3）判断特殊需求的元素（空、拥有等）
         例如：
         $(“div:contains(‘您好’)”)：选出包含有文本“您好”的<div>元素 
         $(“div:empty”)： 选取不包含子元素（包括文本节点）的<div>元素
         $(“div:has(p)”) 或者$(“div:has(.classss)”)： 选取包含有<p>元素的<div>元素
         $(“div:parent”) 选取拥有子元素（包括文本元素）的<div>
         $(“div:not(:contains(‘aa’))”)选择不包含内容有“aa“的div

         二、jquery可见度过滤选择器

 

         可见度过滤选择器是根据元素的可见和不可见状态来选择相应的元素
         1、:hidden
         用法: $(”tr:hidden”)  返回值  集合元素
         说明: 匹配所有的不可见元素，input 元素的 type 属性为 “hidden” 的话也会被匹配到.意思是css中display:none和input type=”hidden”的都会被匹配到.同样,要在脑海中彻底分清楚冒号”:”, 点号”.”和逗号”,”的区别.
         2、:visible
         用法: $(”tr:visible”)  返回值  集合元素
         说明: 匹配所有的可见元素.

         三、jquery属性过滤选择器

         jQuery属性过滤选择器
         $(“div[id]”)：选取拥有属性id的div元素
         $(“div[title= str]”) 选取拥有title等于str值的div元素
         $(“div[title!= str]”) 选取title不等于str的div元素 组合使用$(“div[id][title!= str]”)
         $(“div[title^= str]”) 选取拥有属性title,并且title属性值以str开头的div元素
         $(“div[title$= str]”) 选取拥有属性title,并且title属性值以str结尾的div元素
         $(“div[title*= str]”) 选取拥有属性title,并且title属性值含有str的div元素
         $(“div[title*= str][class]”) 选取拥有属性title,并且title属性值含有str，并且有class属性的div元素
         下面是内容过滤选择器的例子
[php] view plaincopyprint?
  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 language="javascript" type="text/javascript" src="../jquery-1.6.js"></script>  
  7. <style>  
  8.   div{  
  9.       width:150px;  
  10.       height:150px;  
  11.       border:1px dashed #00F;  
  12.       background-color:#CCC;  
  13.       margin:5px;  
  14.       float:left;}  
  15.         
  16.   .one-1{  
  17.       width:80px;  
  18.       margin:30px;  
  19.       height:80px;  
  20.       border:1px dashed #00F;  
  21.       background-color: #FFC;  
  22.       }  
  23.   
  24. </style>  
  25.   
  26.   
  27.   
  28. <script language="javascript" type="text/javascript">  
  29.   
  30. //使用jquery加载事件   
  31. $(document).ready(function (){  
  32.       
  33.     //<input id="btn0" type="button" value="清空样式" />   
  34.     $("#btn0").click(function (){  
  35.           
  36.         //当点击按钮后，设置id=two的div的背景颜色是绿色   
  37.         $("*").removeAttr("style");  
  38.           
  39.     });  
  40.       
  41.       
  42.     //<input id="btn1" type="button" value="选中内容包含'two'的DIV $('div:contains('two')')" />   
  43.       
  44.     //增加id为btn1按钮的事件   
  45.     $("#btn1").click(function (){  
  46.           
  47.         //选取内容包含two的div   
  48.         $("div:contains('two')").css("background","green");  
  49.           
  50.     });  
  51.       
  52.     //<input id="btn2" type="button" value="选中内容为空或者不包含子元素的div $('div:empty')" />   
  53.     $("#btn2").click(function (){  
  54.           
  55.         //选取内容包含two的div   
  56.         $("div:empty").css("background","green");  
  57.           
  58.     });   
  59.       
  60.     //<input id="btn3" type="button" value="选中包含span的div $(div:has(span))" />   
  61.     $("#btn3").click(function (){  
  62.           
  63.         //选取内容包含two的div   
  64.         $("div:has(span)").css("background","green");  
  65.           
  66.     });   
  67.       
  68.     //<input id="btn4" type="button" value="选中含有子元素或者文本内容的div $('div:parent')" />   
  69.     $("#btn4").click(function (){  
  70.           
  71.         //选取内容包含two的div   
  72.         $("div:parent").css("background","green");  
  73.           
  74.     });   
  75.       
  76.     //<input id="btn5" type="button" value="选中内容中不包含'two'的div  $('div:not(:contains('two'))')" />   
  77.     $("#btn5").click(function (){  
  78.           
  79.         //选取内容包含two的div   
  80.         $("div:not(:contains('two'))").css("background","green");  
  81.           
  82.     });               
  83.       
  84.       
  85. });  
  86.   
  87.   
  88.   
  89.   
  90.   
  91. </script>  
  92.   
  93.   
  94.   
  95. </head>  
  96.   
  97. <body>  
  98. <div id="one">id=one  
  99.    <div class="one-1">class=one-1</div>  
  100. </div>  
  101. <div id="two">id=two<br><span>id=two,span的内容<span>1111111111</span></span></div>  
  102.   
  103. <div id="three">id=three<br><span>id=three,span的内容</span></div>  
  104. <div class="d2">class=d2</div>  
  105.   
  106. <div class="d2"></div>  
  107. <div class="d2"><span></span></div>  
  108.   
  109. <p class='p'>这里放了一个pi<br><span>pi里还有span</span></p>  
  110.   
  111. <div style="clear:both;">  
  112. <input id="btn0" type="button" value="清空样式" />  
  113. <input id="btn1" type="button" value="选中内容包含'two'的DIV $('div:contains('two')')" />  
  114. <input id="btn2" type="button" value="选中内容为空或者不包含子元素的div $('div:empty')" />  
  115. <input id="btn3" type="button" value="选中包含span的div $(div:has(span))" />  
  116. <input id="btn4" type="button" value="选中含有子元素或者文本内容的div $('div:parent')" />  
  117. <input id="btn5" type="button" value="选中内容中不包含'two'的div  $('div:not(:contains('two'))')" />  
  118.   
  119. </div>  
  120. </body>  
  121. </html>  

下面是属性过滤选择器的例子
[php] view plaincopyprint?
  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 language="javascript" type="text/javascript" src="../../include/jquery.js"></script>  
  7. <style>  
  8.   div{  
  9.       width:150px;  
  10.       height:150px;  
  11.       border:1px dashed #00F;  
  12.       background-color:#CCC;  
  13.       margin:5px;  
  14.       float:left;}  
  15.         
  16.   .one-1{  
  17.       width:80px;  
  18.       margin:30px;  
  19.       height:80px;  
  20.       border:1px dashed #00F;  
  21.       background-color: #FFC;  
  22.       }  
  23.   
  24. </style>  
  25.   
  26.   
  27.   
  28. <script language="javascript" type="text/javascript">  
  29.   
  30. //使用jquery加载事件   
  31. $(document).ready(function (){  
  32.       
  33.     //<input id="btn0" type="button" value="清空样式" />   
  34.     $("#btn0").click(function (){  
  35.           
  36.         //当点击按钮后，设置id=two的div的背景颜色是绿色   
  37.         $("*").removeAttr("style");  
  38.           
  39.     });  
  40.       
  41.       
  42.     //<input id="btn1" type="button" value="选中拥有id属性的div元素 $('div[id]')" />   
  43.   
  44.     $("#btn1").click(function (){  
  45.           
  46.         $("div[id]").css("background","green");  
  47.           
  48.     });  
  49.       
  50.       
  51.     //<input id="btn2" type="button" value="选中class等于d2的div元素  $('div[class=d2]')" />   
  52.     $("#btn2").click(function (){  
  53.           
  54.         $("div[class=d2]").css("background","green");  
  55.           
  56.     });   
  57.       
  58.     //<input id="btn3" type="button" value="选中class不等于d2的div元素  $('div[class=d2]')" />   
  59.     $("#btn3").click(function (){  
  60.           
  61.         $("div[class!=d2]").css("background","green");  
  62.           
  63.     });   
  64.       
  65.     //<input id="btn4" type="button" value="选中class等于abcd2,并且id=five  $('div[class=abcd2][id=five]')" />   
  66.     $("#btn4").click(function (){  
  67.           
  68.         $("div[class=abcd2][id=five]").css("background","green");  
  69.           
  70.     });   
  71.       
  72.     //<input id="btn5" type="button" value="选中有class属性且值以'a'开头的div  $('div[class^=a]')" />   
  73.     $("#btn5").click(function (){  
  74.           
  75.         $("div[class^=a]").css("background","green");  
  76.           
  77.     });   
  78.       
  79.     //<input id="btn6" type="button" value="选中有class属性且值以'2'结尾的div  $('div[class$=2]')" />   
  80.       
  81.     $("#btn6").click(function (){  
  82.           
  83.         $("div[class$=2]").css("background","green");  
  84.           
  85.     });   
  86.       
  87.     //<input id="btn7" type="button" value="选中有class属性属性值包含'a'的div  $('div[class*=a]')" />   
  88.     $("#btn7").click(function (){  
  89.           
  90.         $("div[class*=b]").css("background","green");  
  91.           
  92.     });       
  93.       
  94.       
  95. });  
  96.   
  97.   
  98.   
  99.   
  100.   
  101. </script>  
  102.   
  103.   
  104.   
  105. </head>  
  106.   
  107. <body>  
  108. <div id="one">id=one  
  109.    <div class="one-1">class=one-1</div>  
  110. </div>  
  111. <div id="two">id=two<br><span>id=two,span的内容<span>1111111111</span></span></div>  
  112.   
  113. <div id="three">id=three<br><span>id=three,span的内容</span></div>  
  114. <div id="four" class="abcd2">id=four,class=abcd2</div>  
  115. <div id="five" class="abcd2">id=five,class=abcd2</div>  
  116.   
  117. <div class="a3b5"></div>  
  118. <div class="d2"><span></span></div>  
  119.   
  120.   
  121. <div style="clear:both;">  
  122. <input id="btn0" type="button" value="清空样式" />  
  123. <input id="btn1" type="button" value="选中拥有id属性的div元素 $('div[id]')" />  
  124. <input id="btn2" type="button" value="选中class等于d2的div元素  $('div[class=d2]')" />  
  125. <input id="btn3" type="button" value="选中class不等于d2的div元素  $('div[class=d2]')" />  
  126. <input id="btn4" type="button" value="选中class等于abcd2,并且id=five  $('div[class=abcd2][id=five]')" />  
  127. <input id="btn5" type="button" value="选中有class属性且值以'a'开头的div  $('div[class^=a]')" />  
  128. <input id="btn6" type="button" value="选中有class属性且值以'2'结尾的div  $('div[class$=2]')" />  
  129. <input id="btn7" type="button" value="选中有class属性属性值包含'b'的div  $('div[class*=b]')" />  
  130.   
  131. </div>  
  132. </body>  
  133. </html>  

下面是可见度过滤选择器的例子

 

[php] view plaincopyprint?
  1. <span style="color:#000000;"><!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 language="javascript" type="text/javascript" src="../../include/jquery.js"></script>  
  7. <style>  
  8.   div{  
  9.       width:150px;  
  10.       height:150px;  
  11.       border:1px dashed #00F;  
  12.       background-color:#CCC;  
  13.       margin:5px;  
  14.       float:left;}  
  15.         
  16.   .one-1{  
  17.       width:80px;  
  18.       margin:30px;  
  19.       height:80px;  
  20.       border:1px dashed #00F;  
  21.       background-color: #FFC;  
  22.       }  
  23.         
  24.   .hide{  
  25.       display:none;  
  26.       }  
  27.   
  28. </style>  
  29.   
  30.   
  31.   
  32. <script language="javascript" type="text/javascript">  
  33.   
  34. //使用jquery加载事件   
  35. $(document).ready(function (){  
  36.       
  37.     //<input id="btn0" type="button" value="清空样式" />   
  38.     $("#btn0").click(function (){  
  39.           
  40.         //当点击按钮后，设置id=two的div的背景颜色是绿色   
  41.         $("*").removeAttr("style");  
  42.           
  43.     });  
  44.       
  45.       
  46.     //<input id="btn1" type="button" value="匹配所有可见元素,并且设置背景颜色为绿色 $('div:visible')" />   
  47.       
  48.     //增加id为btn1按钮的事件   
  49.     $("#btn1").click(function (){  
  50.           
  51.         //选取可见元素   
  52.         $("div:visible").css("background","green");  
  53.           
  54.     });  
  55.           
  56.     //<input id="btn2" type="button" value="匹配隐藏的div并且设置可见 $(div:hidden)" />   
  57.     $("#btn2").click(function (){  
  58.           
  59.         //选取隐藏元素   
  60.         $("div:hidden").show().css("background","green");  
  61.           
  62.     });  
  63.       
  64.     //<input id="btn3" type="button" value="获取隐藏的文本域的值  $(input:hidden)" />   
  65.     $("#btn3").click(function (){  
  66.           
  67.         //匹配所有隐藏的文本域   
  68.        //-----------------第一种方法-----------   
  69.        /* $("input:hidden").each(function (i){ 
  70.             //this是dom元素，使用dom方式获取值 
  71.             //alert(this.value); 
  72.              
  73.             //用jquery的方式获取 $(this)相当于是将dom转换为jquery对象 
  74.             //alert($(this).val()); 
  75.         });*/  
  76.           
  77.           
  78.         //-----------------第二种方法-----------   
  79.         //                               索引值  dom元素   
  80.         /*$("input:hidden").each(function (index,domEle){ 
  81.              
  82.             //使用dom的方式 
  83.             //alert(domEle.value); 
  84.              
  85.             //使用jquery的方式 
  86.             alert($(domEle).val()); 
  87.              
  88.         });*/  
  89.           
  90.         //-----------------第三种方法-------------   
  91.         var input=$("input");  
  92.           
  93.         $.each(input,function (index,domEle){  
  94.               
  95.             //使用dom的方式   
  96.             //alert(domEle.value);   
  97.               
  98.             //使用jquery的方式   
  99.             alert($(domEle).val());  
  100.               
  101.         });  
  102.           
  103.           
  104.           
  105.           
  106.     });   
  107.       
  108.       
  109.       
  110.       
  111. });  
  112.   
  113.   
  114.   
  115.   
  116.   
  117. </script>  
  118.   
  119.   
  120.   
  121. </head>  
  122.   
  123. <body>  
  124. <div id="one">id=one  
  125.    <div class="one-1">class=one-1</div>  
  126. </div>  
  127. <div id="two">id=two<br><span>id=two,span的内容<span>1111111111</span></span></div>  
  128.   
  129. <div id="three">id=three<br><span>id=three,span的内容</span></div>  
  130. <div class="d2">class=d2</div>  
  131.   
  132. <div class="hide"></div>  
  133. <div class="d2"><span></span></div>  
  134.   
  135. <p class='p'>这里放了一个pi<br><span>pi里还有span</span></p>  
  136.   
  137. <input type="hidden" value="hidden_1" />  
  138. <input type="hidden" value="hidden_2" />  
  139. <input type="hidden" value="hidden_3" />  
  140. <input type="hidden" value="hidden_4" />  
  141. <input type="hidden" value="hidden_5" />  
  142.   
  143. <div style="clear:both;">  
  144. <input id="btn0" type="button" value="清空样式" />  
  145. <input id="btn1" type="button" value="匹配所有可见元素,并且设置背景颜色为绿色 $('div:visible')" />  
  146. <input id="btn2" type="button" value="匹配隐藏的div并且设置可见 $(div:hidden)" />  
  147.   
  148. <input id="btn3" type="button" value="获取隐藏的文本域的值  $(input:hidden)" />  
  149. </div>  
  150. </body>  
  151. </html>  
  152. </span>  
分享到：
| Android开发环境搭建
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery可见性过滤选择器使用示例

    在实际应用中，这两个选择器可以与其他jQuery选择器结合使用，以实现更复杂的操作。比如，如果你想隐藏所有可见的div，可以这样做： ```javascript $("div:visible").hide(); ``` 或者，如果要切换元素的可见性，...

    JQ 可见性过滤选择器

    除了直接使用这些选择器，还可以与其他jQuery选择器结合使用，以实现更复杂的过滤。例如，你可以选择第一个可见的子元素： ```javascript $("#parentElement &gt; :visible:first"); ``` 或者选择所有类名为`myClass`且...

    jQuery选择器大全PDF

    ### jQuery选择器大全：掌握高效DOM操作的关键 在前端开发领域，jQuery因其强大的功能和简洁的语法而备受青睐。选择器作为jQuery的核心组件之一，扮演着桥梁的角色，连接JavaScript与HTML文档，使得开发者能以更加...

    jQuery过滤选择器用法示例

    jQuery过滤选择器是jQuery库中一个非常强大的特性，它允许我们根据特定条件精确地选取DOM元素集合中的子集。在上述示例中，展示了多种过滤选择器的使用方法，让我们逐一解析： 1. `:first` 和 `:last`： - `$('li:...

    【推荐】高清jquery视频教程下载

    jquery缩写 4:基本选择器1 5:基本选择器2 6:基本选择器3 7:基本选择器4 8:层次选择器1 9:层次选择器2 10:层次选择器3 11:层次选择器4 12:过滤选择器1 13:过滤选择器2 14:过滤选择器3 15:过滤选择器4 16:过滤选择器5 ...

    举例讲解jQuery中可见性过滤选择器的使用

    在jQuery中，可见性过滤选择器是用于筛选页面上元素的一种高效工具，它们根据元素的可见状态（即是否被显示）来选取相应的DOM元素。本文将深入探讨`:hidden`和`:visible`这两个可见性过滤选择器的用法，并通过实例...

    韩顺平AJAX和jquery笔记整理

    过滤选择器则用于更精细的选择，它包括基础过滤选择器、内容选择器、可见度选择器等。基础过滤选择器可以帮助我们找到符合特定条件的元素，如第一个、最后一个、特定类、特定索引等。内容选择器可以根据元素内包含的...

    jQuery中可见性过滤器简单用法示例

    除了基础的使用方式外，`:visible`和`:hidden`过滤器还可以与其他选择器组合，如`:first`, `:last`, `:eq(index)`等，以实现更复杂的元素筛选。例如，你可以选取页面上第一个可见的元素，或者所有隐藏的input元素。 ...

    jQuery点击弹出城市选择器代码.zip

    4. **城市选择器内容**：城市选择器通常由多个选项组成，我们可以使用HTML的`&lt;select&gt;`元素或者自定义布局来实现。例如，使用`&lt;option&gt;`元素构建一个多级下拉选择器： ```html 请选择省份 &lt;!-- 省份选项... --&gt; ...

    jQuery权威指南-源代码

    2.2　jQuery选择器详解/17 2.2.1　基本选择器/18 2.2.2　层次选择器/20 2.2.3　简单过滤选择器/22 2.2.4　内容过滤选择器/25 2.2.5　可见性过滤选择器/27 2.2.6　属性过滤选择器/28 2.2.7　子元素过滤选择器/30 ...

    JQuery学习笔记，属性大全

    jQuery的选择器是其魅力所在，它们使我们能够方便地选取DOM元素。常见的选择器有： 1. `ID选择器`: `$("#id")` - 通过ID获取元素。 2. `类选择器`: `.className` - 通过类名获取元素集合。 3. `标签选择器`: `$(...

    jQuery带过滤功能手风琴列表特效.zip

    这通常通过监听用户的输入事件，如keyup或input，然后使用jQuery的选择器匹配和隐藏不匹配项来实现。例如，可以使用$.each()遍历每个列表项，比较其文本内容是否包含用户输入的关键词，如果匹配则保留，否则隐藏。 ...

    jQuery 1.4.1 中文参考

    jQuery提供了多种选择器，包括基本选择器（如ID、元素类型、类名、通配符）、层级选择器（如祖先、后代、相邻、同辈）、基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单...

    jquery 颜色调色器

    通过这个 jQuery 颜色调色器，开发者可以快速添加色彩选择功能，提升用户界面的互动性和美观度，同时减少实现这些功能所需的时间和精力。无论你是新手还是经验丰富的前端开发者，这个工具都能成为你项目中的得力助手...

    jquery笔记

    #### 三、jQuery选择器 jQuery提供了丰富的选择器用于选取DOM元素，以下是部分选择器的详细介绍： 1. **所有元素选择器**：`$("*")` —— 选取页面上的所有元素。 2. **多个选择器**：`$("选择器,选择器,选择器")`...

    jquery内容模糊隐藏.zip

    1. **选择元素**：使用jQuery选择器（如`$("#elementID")`或`$(".className")`）选取需要模糊隐藏的元素。 2. **初始状态**：默认情况下，这些元素可能设置为`opacity:0`或应用模糊滤镜。 3. **事件监听**：通过`.on...

    2019前端经典面试题.doc

    过滤选择器包括基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器等。 九、定时器 JavaScript 中有多种定时器，包括 SetTimeout 和 SetInterval。SetTimeout 只会执行一次，...

    jquery 测试题目 以及参考答案

    1. **jQuery选择器** - **基本选择器**：如 `$("#id")` 选择ID为指定ID的元素，`$(".class")` 选择具有指定类名的元素，`$("tag")` 选择所有指定标签的元素。 - **组合选择器**：使用 `,` 分割多个选择器，如 `$(...

    jquery学习

    - 属性过滤选择器：基于属性值进行筛选。 - 子元素过滤选择器：基于子元素的位置筛选。 - 表单过滤选择器：针对表单元素的各种属性。 jQuery的这些功能使得JavaScript编程变得更加简洁高效，它提供的强大API使得...

Magicbox
Global site tag (gtag.js) - Google Analytics