jquery选择器

最新推荐文章于 2021-04-01 12:33:54 发布

php398893944

最新推荐文章于 2021-04-01 12:33:54 发布

阅读量327

点赞数

文章标签： jquery div function button class input

本文链接：https://blog.csdn.net/php398893944/article/details/7375550

版权

jquery选择器分类：
1)基本选择器
2)层次选择器
3)过滤选择器
4)表单选择器

1)基本选择器
$("#id"):根据给定的id匹配一个元素
$(".myclass"):根据类名匹配元素
$("*"):选取html页面中的所有的元素
$("div"):选取html页面中所有的div元素
$("div,span,myclass"):选取所有的<div><span><myclass>

$("div:eq(1)"):选取索引值为1的<div>元素
$("div:gt(3)"):选取索引值大于3的<div>元素
$("div:lt(3)"):选取索引值小于3的<div>元素
$(":header"):选取网页中所有的标签元素如<h1><h2><h3>等
$("div:animated"):选取正在执行动画的<div>

   比如：
     $(document).ready(function(){

      //获得动画的div
       $("#button").click(function(){

        $("div:animated").css("background","red");
        });

      //创建动画函数
       function move(){

         $("#move").slideToggle(5000,move);
        }
     move();

});

2）层次选择器
①$("div span"):选取<div>下面的所有的<span>元素，包括后

代元素

②$("div>span"):选取<div>元素下面(儿子)所有的<span>子元

素，不包括后代元素

③$(".one+div"):选取class为one的下一个<div>相邻元素，即

紧接着.one元素后面的div元素
注意：“+”紧接着的意思，相邻不间隔的元素

   比如：这样还能找到two div
    <body>
     <div id="one"></div>
     <div id="two"></div>
    </body>

比如：这样就不能找到two div
    <body>
     <div id="one"></div>
     <input type="button" value="这你就找不到了">
     <div id="two"></div>
    </body>

④$("#one~div"):选取id为one的元素之后的所有同辈的<div>兄

弟元素
    注意：可以间隔其他元素

    比如：
    <body>
     <div id="one"></div>
     <input type="button" value="无所谓">
     <div id="two"></div>
     <div id="three"></div>
    </body>

3）过滤选择器
   Ⅰ、可以实现内容的过滤
   Ⅱ、选择指定位置的元素
   Ⅲ、选择特殊需求的元素（奇、偶数等）

①$("div:first"):选取所有<div>元素中第1个<div>元素
②$("div:last"):选取所有的<div>元素中最后一个<div>元素
③$("div:not(.one)"):选取class不是one的<div>元素
④$("div:even"):选取索引值为偶数的div
注意:是从0开始算的2,4,8
⑤$("div:odd"):选取索引值为奇数的div
注意:是从1开始计算的1,3,5

比如：实现隔行变色效果

   $(document).ready(function(){

    //实现偶数行变色
       $("tr:even").css("background","#ffff99");
    //实现奇数行变色
       $("tr:odd").css("background","#CCC");
    });

4)内容过滤选择器

①$("div:contains('您好')"):选出包含有文本"您好"的<div>

元素

②$("div:empty"):选取不包含子元素(包含文本节点)的<div>

元素

//使用jquery加载事件
$(document).ready(function (){

//增加id为btn0按钮的事件
$("#btn0").click(function (){
    //当点击按钮后，清空颜色
     $("*").removeAttr("style");
})

   //增加id为btn1按钮的事件
$("#btn1").click(function (){
    //当点击按钮后，选中所有div中span中的元素$('div span')
    //选取div下的span和class=p的元素下的span
     $("div span,.p span").css("background","green");
})

   //增加id为btn2按钮的事件
$("#btn2").click(function (){
    //选中所有div中span中的元素$('div span')选取儿子一层,不再选下一层了
    //body>div还行，但是div>span把<span>1111</span>也选中了不知道为什么,ul没事应该
    //还可以body>div>span
     $("body>div").css("background","green");
})

    //增加id为btn3按钮的事件
    //加上<input type="button" value="这个按钮是使坏的的" />就不行了
$("#btn3").click(function (){
    //选中所有div中span中的元素$('div span')选取相邻的一个元素不间隔的
     $("#two+div").css("background","green");
})

     //增加id为btn4按钮的事件
$("#btn4").click(function (){
    //选中div class=d2的所有的div兄弟元素$('.d2 ~ div')
     $(".d2~div").css("background","green");
})

//增加id为btn1按钮的事件
$("#btn1").click(function (){
    //选中所有div中第一个div元素
     $("div:first").css("background","green");
})

//增加id为btn2按钮的事件
$("#btn2").click(function (){
    //选中所有div中最后一个div元素
     $("div:last").css("background","green");
})

//增加id为btn3按钮的事件
$("#btn3").click(function (){
    //选中class不等于d2的div元素
     $("div:not(.d2)").css("background","green");
})

   //增加id为btn4按钮的事件
$("#btn4").click(function (){
    //选中div中偶数行的
    //注意是从0开始算的0,2,4,8
     $("div:even").css("background","green");
})

//增加id为btn5按钮的事件
$("#btn5").click(function (){
    //选中div中奇数行的
    //注意是从1开始算的1,3,5,7
     $("div:odd").css("background","green");
})
});

</script>

php398893944

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery选择器

jquery选择器分类： 1)基本选择器 2)层次选择器 3)过滤选择器 4)表单选择器1)基本选择器 $("#id"):根据给定的id匹配一个元素 $(".myclass"):根据类名匹配元素 $("*"):选取html页面中的所有的元素 $("div"):选取html页面中所有的div元素 $("div,span,myclass"):
复制链接

扫一扫