小强的HTML5移动开发之路（35）——jQuery中的过滤器详解

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(){  
                $('#b1').click(function(){  
                    //$('tr:first').css('background-color','#cccccc');  
                    //$('tbody tr:first').css('background-color','#cccccc');  
                    //$('tbody tr:not(#tr2)').css('background-color','#cccccc');  
                    //$('tbody tr:even').css('background-color','#cccccc');  
                    $('tbody tr:eq(2)').css('background-color','#cccccc');  
                });  
            });  
        </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(){  
                $('#b1').click(function(){  
                    $(':contains(hello)').css('background','red');  
                    //$(':empty').css('','');  
                    //$('p :has(p)').css('','');  
                });  
            });  
        </script>  
    </head>  
    <body>  
        <p>  
            <p>hello</p>  
            <p>你好</p>  
            <p>  
                <p>java</p>  
            <p>  
            <input type="button" value="clickMe" id="b1"/>  
        </p>  
    </body>  
  
</html>

其实我的目的并不是让全部屏幕变成红色，为什么全部变成红色的呢？再看下面代码，我在contains(hell0)前面加一个p

$('p:contains(hello)').css('background','red');

可以看到虽然不是全屏了，但是还不是我想要的结果，怎么才能只将hello下面的背景变成红色呢？可以这样做

$('p p:contains(hello)').css('background','red');

3、可见性过滤选择器 :hidden 找到input type="hidden" 以及display=none:visible

$(function(){  
    $('#a1').click(function(){  
        $('p:hidden').css('display','block');  
        //如过有这个样式则去掉，没有则加上  
        $('#d1').toggleClass('show');  
    });  
    //每点击一次，执行一个函数，循环执行  
    $('#a1').toggle(function(){  
        //$('#d1').css('display','block');  
        $('#d1').show(400); //在400毫秒种打开  
        //或者使用slow fast normal三个参数  
        $('#d1').show(slow);  
    },function(){  
        //$('#d1').css('display','none');  
        $('#d1').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(){  
                $('#b1').click(function(){  
                    $('p[id=p1]').html('hello java');  
                });  
            });  
        </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(){  
                $('#b1').click(function(){  
                    $('ul li:nth-child(1)').html('item100');  
                });  
            });  
        </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//被选择的节点 :selected

5、表单选择器 :input $(':input');返回所有的input :text :pasword :checkbox :radio :submit :image :reset :button

以上就是小强的HTML5移动开发之路（35）——jQuery中的过滤器详解的内容，更多相关内容请关注PHP中文网（www.gxlcms.com）！

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did101140

更新时间：2022-11-03 阅读：43次