`

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缩写 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权威指南-源代码

    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代码段

    2.27 如何使用属性过滤器 2.28 如何测试某个元素是否可见 第3章 jQuery操作HTML事件 3.1 禁止或启用输入框 3.2 实时监听输入框字符的变化 3.3 实时监听输入框值的变化 3.4 绑定鼠标右键单击事件 3.5 双击不选中文本...

    jQuery详细教程

    jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。 选择器允许您对 HTML 元素组或单个元素进行操作。 在 HTML DOM 术语中： 选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。...

    jQuery完全实例.rar

    这个函数接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素。 jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都构建于这个函数之上，或者说都是在以某种方式使用这个函数。这个函数最...

    韩顺平PHP JS JQUERY 所有视频下载种子 货真价实

    10-25 4 内容过滤器 可见度过滤器及练习讲解 10-26 1 课程回顾 10-26 2 属性过滤选择器 10-26 3 子元素选择器 表单对象属性选择器 10-26 4 jquery对象集合遍历的四种形式及练习题讲解 jquery的dom操作 10-27 1课程...

    （全）传智播客PHP就业班视频完整课程

    10-25 4 内容过滤器 可见度过滤器及练习讲解 10-26 1 课程回顾 10-26 2 属性过滤选择器 10-26 3 子元素选择器 表单对象属性选择器 10-26 4 jquery对象集合遍历的四种形式及练习题讲解 jquery的dom操作 10-27 1课程...

    史上最全韩顺平传智播客PHP就业班视频，10月份全集

    10-25 4 内容过滤器 可见度过滤器及练习讲解 10-26 1 课程回顾 10-26 2 属性过滤选择器 10-26 3 子元素选择器 表单对象属性选择器 10-26 4 jquery对象集合遍历的四种形式及练习题讲解 jquery的dom操作 10-27 1课程...

    史上最全传智播客PHP就业班视频课，8月份视频

    10-25 4 内容过滤器 可见度过滤器及练习讲解 10-26 1 课程回顾 10-26 2 属性过滤选择器 10-26 3 子元素选择器 表单对象属性选择器 10-26 4 jquery对象集合遍历的四种形式及练习题讲解 jquery的dom操作 10-27 1课程...

    史上最全韩顺平传智播客PHP就业班视频，9月份全集

    10-25 4 内容过滤器 可见度过滤器及练习讲解 10-26 1 课程回顾 10-26 2 属性过滤选择器 10-26 3 子元素选择器 表单对象属性选择器 10-26 4 jquery对象集合遍历的四种形式及练习题讲解 jquery的dom操作 10-27 1课程...

    基于 jQuery 的 Web 源程序在线评测系统的设计与实现

    台的选择就可见一斑。 在开发平台方面，Asp.net 平台的成熟度、安全性也需要进一步完善。而 Java 阵 营的 Java EE 企业平台经过多年的发展已经非常安全、稳定，同时 Java EE 拥有众 多结构合理、效率出众的框架可以...

    史上最好传智播客就业班.net培训教程60G 不下会后悔

    HTML基础加强、css（包含Div+CSS布局）、JavaScript、Dom（事件、window对象、document对象、对话框、定时器、粘贴板、动态Dom、跨浏览器兼容性解决方案、JS压缩和CDN、Internet Explorer Developer Toolbar）、...

    大名鼎鼎SWFUpload- Flash+JS 上传

    　在SWFUpload的使用过程中，无论在客户端还是服务器端都要和File Object打交道，在一个File Object中包含了以下内容： 　{ 　id : string, // SWFUpload file id, used for starting or cancelling and upload 　...

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