Jquery 선택기의 일부 세부정보-JS 튜토리얼-php.cn

Jquery 선택기의 일부 세부정보

伊谢尔伦

풀어 주다： 2016-12-10 09:45:25

원래의

1548명이 탐색했습니다.

1. 가시성 필터 선택기

:hidden은 보이지 않는 모든 요소를 선택합니다. 예를 들어 $(":hidden")은 보이지 않는 모든 요소를 선택한다는 의미입니다. 포함:

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

로그인 후 복사

html 페이지의 주석 콘텐츠/**/, , (이 태그가 페이지에 있는 경우) , , , ,
및 기타 요소를 입력하세요. 요소만 제거하려면 $("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("$(&#39;:hidden&#39;).length:"+len1);
        console.log("$(&#39;input:hidden&#39;).lengh:" + len2);
        $.each($hidden1, function () {
            console.log(this.nodeName+":"+  this.innerHTML);
        });
        $.each($hidden2, function () {
            console.log(this.nodeName + ":" + this.innerHTML);
        });    
    </script>
</body>
</html>

로그인 후 복사

출력 결과는 다음과 같습니다.

$(&#39;:hidden&#39;).length:8
 $(&#39;input:hidden&#39;).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("$(&#39;:hidden&#39;).length:"+len1);
        console.log("$(&#39;input:hidden&#39;).lengh:" + len2);
        $.each($hidden1, function () {
            console.log(this.nodeName+":"+  this.innerHTML);
        });
        $.each($hidden2, function () {
            console.log(this.nodeName + ":" + this.innerHTML);
        });

 INPUT:

로그인 후 복사

선택기의 공백은 무시할 수 없습니다. 공백이 있든 없든 다른 결과를 얻을 수 있습니다. 다음 예를 보세요.

<!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("$(&#39;.test :hidden&#39;).length:" + len1);
        console.log("$(&#39;.test:hidden&#39;).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>

로그인 후 복사

출력 결과는 다음과 같습니다.

$(&#39;.test :hidden&#39;).length:4
$(&#39;.test:hidden&#39;).length:3
 DIV:a
 DIV:b
 DIV:c
 DIV:d

 DIV:d
 DIV:e
 DIV:f

로그인 후 복사

결과가 다른 이유는 하위 항목 선택기와 필터 선택기가 동일하기 때문입니다. 다른.
공백이 있는 $(".test :hidden")은 "test" 클래스가 있는 요소에서 숨겨진 요소를 선택합니다. 이는 .class *:hidden과 동일하며 CSS의 표현과 유사합니다.

$(".test:hidden")은 공백 없이 클래스가 "test"인 숨겨진 요소를 선택합니다.