jquery 选择器中一些细节-js教程-PHP中文网

jquery 选择器中一些细节

伊谢尔伦

发布： 2016-12-10 09:45:25

原创

1715人浏览过

1.可见性过滤选择器

:hidden 选取所有不可见的元素。例如:$(“:hidden”) 表示选取所有不可见的元素。包括:

<input type="hidden" />
<div style="display:none;"></div>
<div style="visibity:hidden"></div>

登录后复制

html页面上的注释内容/**/、<head></head>、<meta></meta>(如果页面上由此标签)、<title></title>、<script src="*.js"></script>、<script type='text/JavaScript'></script>、<style type="text/css"></style>
等元素。如果只想去<input>元素,可以使用$(“input:hidden”) 注意input:hidden之间没有空格,稍后我们会讲解这个有无空格的区别;
验证如下:
验证页面代码:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>测试jQuery选择器</title>

    <script src="Scripts/jquery-1.7.1.js"></script>
    <style type="text/css">
        .test {            
              background-color: yellow;       
          }
    </style>
</head>
<body>
    <input type="hidden"  value="hidden"/>
    <div style="display:none"></div>  
    <script type="text/javascript">
        var $hidden1 = $(":hidden");        
        var $hidden2 = $("input:hidden");        
        var len1 = $hidden1.length;        
        var len2 = $hidden2.length;
        console.log("$(':hidden').length:"+len1);
        console.log("$('input:hidden').lengh:" + len2);
        $.each($hidden1, function () {
            console.log(this.nodeName+":"+  this.innerHTML);
        });
        $.each($hidden2, function () {
            console.log(this.nodeName + ":" + this.innerHTML);
        });    
    </script>
</body>
</html>

登录后复制

输出结果如下:

慧中标AI标书

慧中标AI标书是一款AI智能辅助写标书工具。

120

查看详情

$(':hidden').length:8
 $('input:hidden').lengh:1
 HEAD:    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>测试jQuery选择器</title>

    <script src="Scripts/jquery-1.7.1.js"></script>
    <style type="text/css">
        .test {
            background-color: yellow;
        }    </style>

 META:
 TITLE:测试jQuery选择器
 SCRIPT:
 STYLE:        .test {
            background-color: yellow;
        }

 INPUT:
 DIV:
 SCRIPT:        
    var $hidden1 = $(":hidden");        
    var $hidden2 = $("input:hidden");        
    var len1 = $hidden1.length;        
    var len2 = $hidden2.length;
        console.log("$(':hidden').length:"+len1);
        console.log("$('input:hidden').lengh:" + len2);
        $.each($hidden1, function () {
            console.log(this.nodeName+":"+  this.innerHTML);
        });
        $.each($hidden2, function () {
            console.log(this.nodeName + ":" + this.innerHTML);
        });

 INPUT:

登录后复制

2. 选择器中有无空格

在选择器中的空格用不能忽视,有无空格会得到不同的结果。看下面的例子:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>测试jQuery选择器</title>

    <script src="Scripts/jquery-1.7.1.js"></script>
    <style type="text/css">
        .test {           
                background-color: yellow;        
          }
    </style>
</head>
<body>
    <div class="test">
        <div style="display:none">a</div>
        <div style="display:none">b</div>
        <div style="display:none">c</div>
        <div class="test" style="display:none">d</div>
    </div>
    <div class="test" style="display:none;">e</div>
    <div class="test" style="display:none">f</div>

    <script type="text/javascript">
        var $t1 = $(".test :hidden");//带空格
        var $t2 = $(".test:hidden");//不带空格
        var len1 = $t1.length;        var len2 = $t2.length;
        console.log("$('.test :hidden').length:" + len1);
        console.log("$('.test:hidden').length:" + len2);
        $.each($t1, function () {
            console.log(this.nodeName+":"+ this.innerHTML);
        });
        console.log();
        $.each($t2, function () {
            console.log(this.nodeName + ":" + this.innerHTML);
        });    
     </script>
</body>
</html>

登录后复制

输出结果如下:

$('.test :hidden').length:4
$('.test:hidden').length:3
 DIV:a
 DIV:b
 DIV:c
 DIV:d

 DIV:d
 DIV:e
 DIV:f

登录后复制

之所以有不同的结果,因为后代选择器和过滤选择器的不同。
带空格的$(".test :hidden") 选取的是class为”test”的元素里面的隐藏元素,相当于就是.class *:hidden 和css的表述类似。

不带空格的$(".test:hidden") 选取的是隐藏的元素的class为”test”。

大家都在看：

jQuery中正确操作表单元素值：.val() 与 .text() 的区别与应用解决jQuery动态加载SVG后Anime.js动画失效问题解决Anime.js无法动画化jQuery动态加载SVG的问题 jquery中在元素之前添加元素的before() 方法 jQuery中过滤方法slice()方法如何使用？