小強的HTML5行動開發之路（35）－jQuery中的濾鏡詳解-html教學-PHP中文網

小強的HTML5行動開發之路（35）－jQuery中的濾鏡詳解

黄舟

發布： 2017-02-04 14:47:28

原創

1325 人瀏覽過

1、基本過濾選擇器
:first
:last
:not(selector) :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>

登入後複製

小強的HTML5行動開發之路（35）－jQuery中的濾鏡詳解

其實我的目的並不是讓全部螢幕變成紅色，為什麼全部變成紅色的呢？再看下面程式碼，我在contains(hell0)前面加一個p

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

登入後複製

小強的HTML5行動開發之路（35）－jQuery中的濾鏡詳解

可以看到雖然不是全屏了，但是還不是我想要的結果，怎麼才能只把hello下面的背景變成紅色呢？可以這樣做

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

登入後複製

小強的HTML5行動開發之路（35）－jQuery中的濾鏡詳解

3、可見性過濾選擇器
:hidden
找到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),表單物件屬性過濾選擇器
:enabled
:disabled //文字輸入框不能輸入
:checked//被選擇的節點
:selected5,表選擇器

:input $(':input');回傳所有的input

:text
:pasword
:checkbox
:radio
:submit
:image
:reset
:radio
:submit
:image

:reset

:radio

:submit

:image
:reset

:MLet🎜 （35）－jQuery中的濾鏡詳解的內容，更多相關內容請關注PHP中文網（m.sbmmt.com）！ 🎜🎜🎜🎜