jquery选择器

来源：互联网发布：淘宝主图的尺寸编辑：程序博客网时间：2024/06/05 20:43

jquery选择器有四种：

1：基本选择器：

$(function () {

            $('#Button1').click(function () {
                //2:根具类型('img')标签名
                //                $('img').hide(2000);
                //                $('img').show(2000);
                //3:根据class获取('.classname')
                //                $('.imgclass').hide(2000);
                //                $('.imgclass').show(2000);
                //4:('*')所有
                //                $('*').hide(2000);
                //                $('*').show(2000);
                //5:多重匹配
                $('input,#img1').hide(2000);
                $('input,#img1').show(2000);

            })
            //改变2的样式
            $('#Button2').click(function () {
                //改变2的样式
                //                $('#img2').removeClass();
                //                $('#img2').addClass('imgclass1');
                //给图片2加样式
                $('#img2').addClass('imgclass1'); //这样img2就有了两个样式

})

})

    </script>
</head>
<body>

2：多层次选择器：

$(function () {
            $('#Button1').click(function () {
                //                $('#divfirst img').hide(2000); //1:两个条件一id为divfirst二：tagname为img.结果就是img1和div中的img2都变了
                //只让divfirst中第一个span中的img变另一个div中的不变
                // $('#divfirst span img').hide(2000);//这样和效果1一样
                // $('#divfirst>span img').hide(2000); //这样‘>’代表id为divfirst下一集中的img也就是img1，然而img2不是divfirst下一集中的img
                //获取后面与divfirst同级的第一个元素（+）中间不能间隔任何东西，限制为div类型
                //$('#divfirst+div img').hide(2000); //
                //获取后面与divfirst同级的第一个元素不限类型
                //$('#divfirst').next().hide(2000);
                //获取后面所有同级别
                //$('#divfirst~div img').hide(1000);
                // $('#divfirst~img').hide(1000);//同一级的不限定类型
                //获取后面所有
                //$('#divfirst').nextAll().hide(1000);
            })

})

3：简单过滤选择器：

//增加最后一个元素的样式
//$('li:last').addClass('classadd');

//增加第二个元素的样式
//$('li:first').next().addClass('classadd');

                //增加除指定类别外的所有选择器的类别，参数为样式名称
                //$('li:not(.class2)').addClass('classadd');
                //增加除指定类别外的所有选择器的类别，参数为元素id
                //$('li:not(#myid)').addClass('classadd');

//增加所有索引为偶数的元素的样式,记住索引值从0开始哟
//$('li:even').addClass('classadd');

//增加所有索引为奇数的元素的样式,记住索引值从0开始哟
//$('li:odd').addClass('classadd');

//增加指定索引处的样式
//$('li:eq(1)').addClass('classadd');

//增加大于指定索引处的项目的值
//$('li:gt(1)').addClass('classadd');

//增加小于指定索引处的项目的值
//$('li:lt(3)').addClass('classadd');

                //增加标题元素的样式
                $(':header').addClass('classadd');
            })
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <h1>林氏名人</h1>
        <ul>
            <li class="class1">林心如</li>
            <li class="class1" id="myid">林志玲</li>
            <li class="class2">林志颖</li>
            <li class="class1">林黛玉</li>
        </ul>
    </div>
    <input type="button" id="btn" value="点我" />
    </form>
</body>