jQuery中的过滤器

现在的位置: 首页 > 综合 > 正文

jQuery中的过滤器

2018年05月20日 ⁄ 综合 ⁄ 共 4321字 ⁄ 字号小中大 ⁄ 评论关闭

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('','');

                    //$('div :has(p)').css('','');

                });

            });

        </script>

    </head>

    <body>

        <div>

            <div>hello</div>

            <div>你好</div>

            <div>

                <p>java</p>

            <div>

            <input type="button" value="clickMe" id="b1"/>

        </div>

    </body>



</html>

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

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

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

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

3、可见性过滤选择器

:hidden

找到input type="hidden" 以及display=none

:visible

$(function(){

    $('#a1').click(function(){

        $('div: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

【上篇】ajax交互Struts2的action(1)
【下篇】jQuery中的选择器

作者: KassieHebert

该日志由 KassieHebert 于6年前发表在综合分类下，最后更新于 2018年05月20日.
转载请注明: jQuery中的过滤器 | 学步园 +复制链接

抱歉!评论已关闭.

学步园

jQuery中的过滤器

作者: KassieHebert

书签

最新文章New

本站推荐

返回首页