Xiaoqiang's road to HTML5 mobile development (35) - Detailed explanation of filters in jQuery-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

Xiaoqiang's road to HTML5 mobile development (35) - Detailed explanation of filters in jQuery

黄舟

Feb 04, 2017 pm 02:47 PM

1. Basic filter selector
:first
:last
:not(selector) :Nodes other than the nodes matched by the selector
:even :even
:odd :odd
:eq(index)
:gt(index) : Bigger than him

:lt(index) : Smaller than him

<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>

Copy after login

2. Content filtering selector
:contains(text)
:empty: A node with no child nodes or a node with empty text content
:has(selector)
:parent: A node that contains a parent node

<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>

Copy after login

Xiaoqiangs road to HTML5 mobile development (35) - Detailed explanation of filters in jQuery

Actually, my goal is not to make the entire screen turn red. Why does it all turn red? Look at the code below again. I added a p

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

Copy after login

Xiaoqiangs road to HTML5 mobile development (35) - Detailed explanation of filters in jQuery

in front of contains(hell0). You can see that although it is not full screen, it is not the result I want. How can I do this? What about changing just the background below hello to red? You can do this

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

Copy after login

Xiaoqiangs road to HTML5 mobile development (35) - Detailed explanation of filters in jQuery

3. Visibility filter selector
:hidden
Find input type="hidden" and 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();  
    });  
});

Copy after login

4. Filter selector
(1) Attribute filter selector [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>

Copy after login

(2), Child element filter selector: Returns all matching child nodes under the parent node
:nth-child(index/even/odd)
n starts from 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>

Copy after login

(3), form object Attribute filter selector
:enabled
:disabled //The text input box cannot be entered
:checked//The selected node
:selected

5, form selector
:input $(':input');Return all input
:text
:pasword
:checkbox
:radio
:submit
:image
:reset
:button

The above is Xiaoqiang’s HTML5 mobile development road (35) - detailed explanation of filters in jQuery. For more related content, please pay attention to the PHP Chinese website (www.php.cn) !

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn