雀雀JQuery 选择器

最新推荐文章于 2024-10-31 15:39:18 发布

雀雀coder

最新推荐文章于 2024-10-31 15:39:18 发布

阅读量320

点赞数

分类专栏：雀雀JQuery篇

本文链接：https://blog.youkuaiyun.com/weixin_41873431/article/details/80107431

版权

雀雀JQuery篇专栏收录该内容

2 篇文章

订阅专栏

JQuery 选择器

特殊符号的转义

获取这个两个元素的选择器

$(“#id\\#a”)

$(“#id\\[2\\]”)x

JQuery基本选择器

示例1：通过标签选择器获取元素

//通过标签选择器获取到"dt"标签添加点击事件
$("dt").click(function () {
    //获取到到dd标签并设置display为显示
    $("dd").css("display","block");
});
//通过标签选择器获取到"h1"标签添加点击事件
$("h1").click(function () {
    //通过标签选择器为"h1"设置css属性
    $("h1").css("color","red");
});

示例2：类选择器获取元素

//类选择器获取到price元素的北京和内边距并为其设置css属性
$(".price").css({"background":"#efefef","padding":"5px"});

示例3：通过ID选择器获取元素

//获取并设置ID为author的标签的字体颜色---ID选择器
$("#author").css("color","blue");

示例4：通过并集选择器获取多个元素

//获取到dt"标签添加点击事件
$("dd").click(function () {
//设置"dt""dd"和class为"intro"的颜色为red---并集选择器
$("dt,dd,.intro").css("color","red");
});

示例5：通过全局选择器获取所有元素

        //设置".intro"的点击事件
    $(".intro").click(function () {
        //通过全局选择器修改了字体加粗和背景颜色为灰色
        $("*").css({"font-weight":"bold","background":"#efefef"});
    });
});

JQuery层次选择器

示例1：后代选择器

$("sel1").click(function () {
//通过后代选择器选择 textRight下的所有的p标签,改变所有p标签的颜色
$(".textRight p").css("color","blue"); //后代选择器
});

示例2：子选择器

$("sel2").click(function () {
//通过子选择器选择了textRight下的子元素 p
$(".textRight > p").css("background","#efefef");
});

示例3：相邻元素选择器

$("sel3").click(function () {
//通过相邻元素选择器来选择了h1相邻的p标签,为其添加下滑线
$("h1+p").css("text-decoration","underline");
});

示例4：同辈元素选择器

$("sel4").click(function () {
//通过同辈选择器选择了dt下的所有的同辈的dd元素,为其添加下划线
$("dt~dd").css("text-decoration","underline");
});

JQuery属性选择器

示例1：根据元素名获取元素

//根据属性名获取元素获取new下的a含有class的所有元素为其改变背景颜色
$("#news a[class]").css("background","#ccc");

实例2：根据属性值获取元素

//根据属性值获取元素1 获取new下的a标签含有class并且值为hot的元素,并改变其字体大小
$("#news a[class='hot']").css("font-size","15px");
//根据属性值获取元素2 获取new下的a标签含有class并且值不为hot的所有元素,并改变其字体大小
$("#news a[class != 'hot']").css("font-size","20px");

示例3：根据含有某个特定值获取元素

//根据是否含有某个特定值获取元素
//以www开头的字体颜色改成blue
$("#news a[href ^= 'www']").css("color","blue");

//以html结尾的字体颜色改成 orange
$("#news a[href $= 'html']").css("color","orange");

//根据含有那个属性值来获取元素
//包含href里包含k2这个值的元素为其添加下划线
$("#news a[href *='k2']").css("text-decoration","underline");

JQuery过滤选择器

示例:对li和header的不同位置的不同方式的操作

$(document).ready(function () {
    //使用过滤选择器给h2设置背景颜色和字体颜色
    $(".contain :header").css({"background":"#efefef"});
    //改变第一个li的字体大小
    $(".contain li:first").css("font-size","16px");
    //最后一个li去掉边框
    $(".contain li:last").css("border","none");
    //设置偶数行的背景颜色
    $(".contain li:even").css("background","blue");
    //设置奇数行的背景颜色
    $(".contain li:odd").css("background","red");
    //设置前两个li 的背景颜色
    $(".contain li:lt(2)").css("background","yellow");
    //设置最后两个li 的字体颜色
    $(".contain li:gt(3)").css("color","#28ff28");
    //改变某个的li的背景颜色索引从0开始
    $(".contain li:eq(2)").css("background","white");
});

示例：对所有元素的隐藏和显示

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>可见性过滤选择器</title>
    <style type="text/css">
        #txt_show {
            display: none;
            color: #00C;
        }

        #txt_hide {
            display: block;
            color: #F30;
        }
    </style>
    <script src="../js/jquery-1.12.4.js"></script>
</head>
<body>
<p id="txt_hide">点击按钮，我会被隐藏哦~</p>
<p id="txt_show">隐藏的我，被显示了，嘿嘿^^</p>
<input name="show" type="button" value="显示隐藏的P元素" id="show"/>
<input name="hide" type="button" value="隐藏显示的P元素" id="hide"/>
<script>
    $(document).ready(function () {
        //visible 选取所有可见的元素
       $("#show").click(function () {
          $("p:hidden").show();
       });
        //hidden 选取所有隐藏的元素
        $("#hide").click(function () {
           $("p:visible").hide();
        });

    });
</script>
</body>
</html>