>  기사  >  웹 프론트엔드  >  Jquery 선택기의 일부 세부정보

Jquery 선택기의 일부 세부정보

伊谢尔伦
伊谢尔伦원래의
2016-12-10 09:45:251506검색

1. 가시성 필터 선택기

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

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

html 페이지의 주석 콘텐츠/**/, 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1, e8e496c15ba93d81f6ea4fe5f55a224403d0e15baf5b7c9d224e5281b47a68fe(이 태그가 페이지에 있는 경우) , b2386ffb911b14667cb8f0f91ea547a76e916e0f7d1e588d4f442bf645aedb2f, f201f3e801a248066d83a5e65188634b2cacc6d41bbb37262a98f745aa00fbf0, 61407f7b7461f346926503a77e36dc2a2cacc6d41bbb37262a98f745aa00fbf0, 44b1bba3ecf4064527a0ee886116fb4d531ac245ce3e4fe3d50054a55f265927
및 기타 요소를 입력하세요. d5fd7aea971a85678ba271703566ebfd 요소만 제거하려면 $("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:

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("$(&#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"인 숨겨진 요소를 선택합니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.