집 > 기사 > 웹 프론트엔드 > Xiaoqiang의 HTML5 모바일 개발 과정(35) - jQuery의 필터에 대한 자세한 설명

Xiaoqiang의 HTML5 모바일 개발 과정(35) - jQuery의 필터에 대한 자세한 설명

黄舟원래의: 2017-02-04 14:47:281266검색

1. 기본 필터링 선택자
: first
:last
:not(selector): 선택자
:even:짝수
:odd:와 일치하는 노드 이외의 노드 홀수
:eq(index)
:gt(index): 그 사람보다 크다

:lt(index): 그 사람보다 작다

<html>  
    <head>  
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>  
        <script>  
            $(function(){  
                $(&#39;#b1&#39;).click(function(){  
                    //$(&#39;tr:first&#39;).css(&#39;background-color&#39;,&#39;#cccccc&#39;);  
                    //$(&#39;tbody tr:first&#39;).css(&#39;background-color&#39;,&#39;#cccccc&#39;);  
                    //$(&#39;tbody tr:not(#tr2)&#39;).css(&#39;background-color&#39;,&#39;#cccccc&#39;);  
                    //$(&#39;tbody tr:even&#39;).css(&#39;background-color&#39;,&#39;#cccccc&#39;);  
                    $(&#39;tbody tr:eq(2)&#39;).css(&#39;background-color&#39;,&#39;#cccccc&#39;);  
                });  
            });  
        </script>  
    </head>  
    <body>  
        <table border="1" cellpadding="0" cellspacing="0" width="60%">  
            <thead>  
                <tr>  
                    <td>name</td><td>age</td>  
                </tr>  
            </thead>  
            <tbody>  
                <tr><td>zs</d><td>22</td></tr>  
                <tr id="tr2"><td>ls</d><td>22</td></tr>  
                <tr><td>ww</d><td>22</td></tr>  
                <tr><td>ll</d><td>22</td></tr>  
            </tbody>  
        </table>  
        <input type="button" value="clickMe" id="b1"/>  
    <body>  
</html>

2. 🎜>:contains(text)
:empty: 하위 노드가 없는 노드 또는 빈 텍스트 내용이 있는 노드
:has(selector)
:parent: 상위 노드가 포함된 노드

<html>  
    <head>  
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>  
        <script>  
            $(function(){  
                $(&#39;#b1&#39;).click(function(){  
                    $(&#39;:contains(hello)&#39;).css(&#39;background&#39;,&#39;red&#39;);  
                    //$(&#39;:empty&#39;).css(&#39;&#39;,&#39;&#39;);  
                    //$(&#39;p :has(p)&#39;).css(&#39;&#39;,&#39;&#39;);  
                });  
            });  
        </script>  
    </head>  
    <body>  
        <p>  
            <p>hello</p>  
            <p>你好</p>  
            <p>  
                <p>java</p>  
            <p>  
            <input type="button" value="clickMe" id="b1"/>  
        </p>  
    </body>  
  
</html>

Xiaoqiang의 HTML5 모바일 개발 과정(35) - jQuery의 필터에 대한 자세한 설명

사실 제 목적은 화면 전체를 빨갛게 만드는 것이 아닙니다. 왜 다 빨갛게 되는 거죠? 아래 코드를 다시 보면 Contains(hell0) 앞에 p

$(&#39;p:contains(hello)&#39;).css(&#39;background&#39;,&#39;red&#39;);

Xiaoqiang의 HTML5 모바일 개발 과정(35) - jQuery의 필터에 대한 자세한 설명

를 추가한 것을 알 수 있습니다. 전체 화면은 아니지만 결과는 아닙니다. 어떻게 해야 하나요? hello 아래의 배경만 빨간색으로 변경하면 되나요? 이렇게 할 수 있습니다

$(&#39;p p:contains(hello)&#39;).css(&#39;background&#39;,&#39;red&#39;);

Xiaoqiang의 HTML5 모바일 개발 과정(35) - jQuery의 필터에 대한 자세한 설명

3. 가시성 필터 선택기

:hidden
find input type="hidden" 및 display=none:visible

$(function(){  
    $(&#39;#a1&#39;).click(function(){  
        $(&#39;p:hidden&#39;).css(&#39;display&#39;,&#39;block&#39;);  
        //如过有这个样式则去掉，没有则加上  
        $(&#39;#d1&#39;).toggleClass(&#39;show&#39;);  
    });  
    //每点击一次，执行一个函数，循环执行  
    $(&#39;#a1&#39;).toggle(function(){  
        //$(&#39;#d1&#39;).css(&#39;display&#39;,&#39;block&#39;);  
        $(&#39;#d1&#39;).show(400); //在400毫秒种打开  
        //或者使用slow fast normal三个参数  
        $(&#39;#d1&#39;).show(slow);  
    },function(){  
        //$(&#39;#d1&#39;).css(&#39;display&#39;,&#39;none&#39;);  
        $(&#39;#d1&#39;).hide();  
    });  
});

4. 필터 선택기

(1) 속성 필터 선택기 [attribute]
[attribute=value]
[attribute!=value]

<html>  
    <head>  
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>  
        <script>  
            $(function(){  
                $(&#39;#b1&#39;).click(function(){  
                    $(&#39;p[id=p1]&#39;).html(&#39;hello java&#39;);  
                });  
            });  
        </script>  
    </head>  
    <body>  
        <p id="p1">hello</p>  
        <p>world</p>  
        <input type="button" value="click" id="b1"/>  
    </body>  
</html>

(2), 하위 요소 필터 선택기: 상위 노드 아래 일치하는 모든 하위 노드를 반환

:nth-child(index/even/odd)
n은 1에서 시작

<html>  
    <head>  
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>  
        <script>  
            $(function(){  
                $(&#39;#b1&#39;).click(function(){  
                    $(&#39;ul li:nth-child(1)&#39;).html(&#39;item100&#39;);  
                });  
            });  
        </script>  
    </head>  
    <body>  
            <ul>  
                <li>item1</li>  
                <li>item2</li>  
                <li>item3</li>  
  
            </ul>  
            <ul>  
                <li>item4</li>  
                <li>item5</li>  
                <li>item6</li>  
  
            </ul>  
            <input type="button" value="click" id="b1"/>  
    </body>  
</html>

(3), 양식 객체 속성 필터 선택기

:활성화
:비활성화 //텍스트 입력 상자를 입력할 수 없습니다
:선택됨//선택된 노드
:선택됨

5. 양식 선택기

:input $(': input');모든 입력 반환
:text
:pasword
:checkbox
:radio
:submit
:image
:reset
:button

위는 Xiaoqiang의 HTML5 모바일 개발 길입니다(35) - jQuery의 필터에 대한 자세한 설명은 PHP 중국어 웹사이트(www.php.cn)를 참고하세요!

성명：

이전 기사：HTML5 모바일 개발을 향한 Xiaoqiang의 길(34) – jQuery의 선택기다음 기사：HTML5 모바일 개발을 향한 Xiaoqiang의 길(34) – jQuery의 선택기

Xiaoqiang의 HTML5 모바일 개발 과정(35) - jQuery의 필터에 대한 자세한 설명

관련 기사