jquery内容过滤选择器、属性过滤选择器和jquery可见度过滤选择器(转)

最新推荐文章于 2024-01-19 16:58:05 发布

yg_201314

最新推荐文章于 2024-01-19 16:58:05 发布

阅读量139

点赞数

分类专栏： JS jquery 文章标签：选择器 jquery ViewUI

本文链接：https://blog.csdn.net/yg_201314/article/details/84248346

版权

JS 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

jquery

8 篇文章 0 订阅

订阅专栏

一、 jquery内容过滤选择器

根据内容进行选择（根据节点的内容）

实现了对基本内容的过滤

用途：

1）可以实现内容的过滤

2）判断选择指定元素内的元素

3）判断特殊需求的元素（空、拥有等）

改变所有可见的div元素的背景色为 #0000FF

选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF

选取所有的文本隐藏域, 并打印它们的值

$(“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 plaincopy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>内容选择器学习</title>  
<script language="javascript" type="text/javascript" src="../jquery-1.6.js"></script>  
<style>  
  div{  
      width:150px;  
      height:150px;  
      border:1px dashed #00F;  
      background-color:#CCC;  
      margin:5px;  
      float:left;}  
        
  .one-1{  
      width:80px;  
      margin:30px;  
      height:80px;  
      border:1px dashed #00F;  
      background-color: #FFC;  
      }  
  
</style>  
  
  
  
<script language="javascript" type="text/javascript">  
  
//使用jquery加载事件  
$(document).ready(function (){  
      
    //<input id="btn0" type="button" value="清空样式" />  
    $("#btn0").click(function (){  
          
        //当点击按钮后，设置id=two的div的背景颜色是绿色  
        $("*").removeAttr("style");  
          
    });  
      
      
    //<input id="btn1" type="button" value="选中内容包含'two'的DIV $('div:contains('two')')" />  
      
    //增加id为btn1按钮的事件  
    $("#btn1").click(function (){  
          
        //选取内容包含two的div  
        $("div:contains('two')").css("background","green");  
          
    });  
      
    //<input id="btn2" type="button" value="选中内容为空或者不包含子元素的div $('div:empty')" />  
    $("#btn2").click(function (){  
          
        //选取内容包含two的div  
        $("div:empty").css("background","green");  
          
    });   
      
    //<input id="btn3" type="button" value="选中包含span的div $(div:has(span))" />  
    $("#btn3").click(function (){  
          
        //选取内容包含two的div  
        $("div:has(span)").css("background","green");  
          
    });   
      
    //<input id="btn4" type="button" value="选中含有子元素或者文本内容的div $('div:parent')" />  
    $("#btn4").click(function (){  
          
        //选取内容包含two的div  
        $("div:parent").css("background","green");  
          
    });   
      
    //<input id="btn5" type="button" value="选中内容中不包含'two'的div  $('div:not(:contains('two'))')" />  
    $("#btn5").click(function (){  
          
        //选取内容包含two的div  
        $("div:not(:contains('two'))").css("background","green");  
          
    });               
      
      
});  
  
  
  
  
  
</script>  
  
  
  
</head>  
  
<body>  
<div id="one">id=one  
   <div class="one-1">class=one-1</div>  
</div>  
<div id="two">id=two<br><span>id=two,span的内容<span>1111111111</span></span></div>  
  
<div id="three">id=three<br><span>id=three,span的内容</span></div>  
<div class="d2">class=d2</div>  
  
<div class="d2"></div>  
<div class="d2"><span></span></div>  
  
<p class='p'>这里放了一个pi<br><span>pi里还有span</span></p>  
  
<div style="clear:both;">  
<input id="btn0" type="button" value="清空样式" />  
<input id="btn1" type="button" value="选中内容包含'two'的DIV $('div:contains('two')')" />  
<input id="btn2" type="button" value="选中内容为空或者不包含子元素的div $('div:empty')" />  
<input id="btn3" type="button" value="选中包含span的div $(div:has(span))" />  
<input id="btn4" type="button" value="选中含有子元素或者文本内容的div $('div:parent')" />  
<input id="btn5" type="button" value="选中内容中不包含'two'的div  $('div:not(:contains('two'))')" />  
  
</div>  
</body>  
</html>  

下面是属性过滤选择器的例子

[php]view plaincopy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>属性选择器学习</title>  
<script language="javascript" type="text/javascript" src="../../include/jquery.js"></script>  
<style>  
  div{  
      width:150px;  
      height:150px;  
      border:1px dashed #00F;  
      background-color:#CCC;  
      margin:5px;  
      float:left;}  
        
  .one-1{  
      width:80px;  
      margin:30px;  
      height:80px;  
      border:1px dashed #00F;  
      background-color: #FFC;  
      }  
  
</style>  
  
  
  
<script language="javascript" type="text/javascript">  
  
//使用jquery加载事件  
$(document).ready(function (){  
      
    //<input id="btn0" type="button" value="清空样式" />  
    $("#btn0").click(function (){  
          
        //当点击按钮后，设置id=two的div的背景颜色是绿色  
        $("*").removeAttr("style");  
          
    });  
      
      
    //<input id="btn1" type="button" value="选中拥有id属性的div元素 $('div[id]')" />  
  
    $("#btn1").click(function (){  
          
        $("div[id]").css("background","green");  
          
    });  
      
      
    //<input id="btn2" type="button" value="选中class等于d2的div元素  $('div[class=d2]')" />  
    $("#btn2").click(function (){  
          
        $("div[class=d2]").css("background","green");  
          
    });   
      
    //<input id="btn3" type="button" value="选中class不等于d2的div元素  $('div[class=d2]')" />  
    $("#btn3").click(function (){  
          
        $("div[class!=d2]").css("background","green");  
          
    });   
      
    //<input id="btn4" type="button" value="选中class等于abcd2,并且id=five  $('div[class=abcd2][id=five]')" />  
    $("#btn4").click(function (){  
          
        $("div[class=abcd2][id=five]").css("background","green");  
          
    });   
      
    //<input id="btn5" type="button" value="选中有class属性且值以'a'开头的div  $('div[class^=a]')" />  
    $("#btn5").click(function (){  
          
        $("div[class^=a]").css("background","green");  
          
    });   
      
    //<input id="btn6" type="button" value="选中有class属性且值以'2'结尾的div  $('div[class$=2]')" />  
      
    $("#btn6").click(function (){  
          
        $("div[class$=2]").css("background","green");  
          
    });   
      
    //<input id="btn7" type="button" value="选中有class属性属性值包含'a'的div  $('div[class*=a]')" />  
    $("#btn7").click(function (){  
          
        $("div[class*=b]").css("background","green");  
          
    });       
      
      
});  
  
  
  
  
  
</script>  
  
  
  
</head>  
  
<body>  
<div id="one">id=one  
   <div class="one-1">class=one-1</div>  
</div>  
<div id="two">id=two<br><span>id=two,span的内容<span>1111111111</span></span></div>  
  
<div id="three">id=three<br><span>id=three,span的内容</span></div>  
<div id="four" class="abcd2">id=four,class=abcd2</div>  
<div id="five" class="abcd2">id=five,class=abcd2</div>  
  
<div class="a3b5"></div>  
<div class="d2"><span></span></div>  
  
  
<div style="clear:both;">  
<input id="btn0" type="button" value="清空样式" />  
<input id="btn1" type="button" value="选中拥有id属性的div元素 $('div[id]')" />  
<input id="btn2" type="button" value="选中class等于d2的div元素  $('div[class=d2]')" />  
<input id="btn3" type="button" value="选中class不等于d2的div元素  $('div[class=d2]')" />  
<input id="btn4" type="button" value="选中class等于abcd2,并且id=five  $('div[class=abcd2][id=five]')" />  
<input id="btn5" type="button" value="选中有class属性且值以'a'开头的div  $('div[class^=a]')" />  
<input id="btn6" type="button" value="选中有class属性且值以'2'结尾的div  $('div[class$=2]')" />  
<input id="btn7" type="button" value="选中有class属性属性值包含'b'的div  $('div[class*=b]')" />  
  
</div>  
</body>  
</html>  

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

[php]view plaincopy
<span style="color:#000000;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>可见度过滤选择器学习</title>  
<script language="javascript" type="text/javascript" src="../../include/jquery.js"></script>  
<style>  
  div{  
      width:150px;  
      height:150px;  
      border:1px dashed #00F;  
      background-color:#CCC;  
      margin:5px;  
      float:left;}  
        
  .one-1{  
      width:80px;  
      margin:30px;  
      height:80px;  
      border:1px dashed #00F;  
      background-color: #FFC;  
      }  
        
  .hide{  
      display:none;  
      }  
  
</style>  
  
  
  
<script language="javascript" type="text/javascript">  
  
//使用jquery加载事件  
$(document).ready(function (){  
      
    //<input id="btn0" type="button" value="清空样式" />  
    $("#btn0").click(function (){  
          
        //当点击按钮后，设置id=two的div的背景颜色是绿色  
        $("*").removeAttr("style");  
          
    });  
      
      
    //<input id="btn1" type="button" value="匹配所有可见元素,并且设置背景颜色为绿色 $('div:visible')" />  
      
    //增加id为btn1按钮的事件  
    $("#btn1").click(function (){  
          
        //选取可见元素  
        $("div:visible").css("background","green");  
          
    });  
          
    //<input id="btn2" type="button" value="匹配隐藏的div并且设置可见 $(div:hidden)" />  
    $("#btn2").click(function (){  
          
        //选取隐藏元素  
        $("div:hidden").show().css("background","green");  
          
    });  
      
    //<input id="btn3" type="button" value="获取隐藏的文本域的值  $(input:hidden)" />  
    $("#btn3").click(function (){  
          
        //匹配所有隐藏的文本域  
       //-----------------第一种方法-----------  
       /* $("input:hidden").each(function (i){ 
            //this是dom元素，使用dom方式获取值 
            //alert(this.value); 
             
            //用jquery的方式获取 $(this)相当于是将dom转换为jquery对象 
            //alert($(this).val()); 
        });*/  
          
          
        //-----------------第二种方法-----------  
        //                               索引值  dom元素  
        /*$("input:hidden").each(function (index,domEle){ 
             
            //使用dom的方式 
            //alert(domEle.value); 
             
            //使用jquery的方式 
            alert($(domEle).val()); 
             
        });*/  
          
        //-----------------第三种方法-------------  
        var input=$("input");  
          
        $.each(input,function (index,domEle){  
              
            //使用dom的方式  
            //alert(domEle.value);  
              
            //使用jquery的方式  
            alert($(domEle).val());  
              
        });  
          
          
          
          
    });   
      
      
      
      
});  
  
  
  
  
  
</script>  
  
  
  
</head>  
  
<body>  
<div id="one">id=one  
   <div class="one-1">class=one-1</div>  
</div>  
<div id="two">id=two<br><span>id=two,span的内容<span>1111111111</span></span></div>  
  
<div id="three">id=three<br><span>id=three,span的内容</span></div>  
<div class="d2">class=d2</div>  
  
<div class="hide"></div>  
<div class="d2"><span></span></div>  
  
<p class='p'>这里放了一个pi<br><span>pi里还有span</span></p>  
  
<input type="hidden" value="hidden_1" />  
<input type="hidden" value="hidden_2" />  
<input type="hidden" value="hidden_3" />  
<input type="hidden" value="hidden_4" />  
<input type="hidden" value="hidden_5" />  
  
<div style="clear:both;">  
<input id="btn0" type="button" value="清空样式" />  
<input id="btn1" type="button" value="匹配所有可见元素,并且设置背景颜色为绿色 $('div:visible')" />  
<input id="btn2" type="button" value="匹配隐藏的div并且设置可见 $(div:hidden)" />  
  
<input id="btn3" type="button" value="获取隐藏的文本域的值  $(input:hidden)" />  
</div>  
</body>  
</html>  
</span>  