jQuery基础及选择器（二）

基本选择器

标签选择器$("h1").css("color","blue")

类选择器$(".price").css({"background":"颜色"，"padding":"5px"})

id选择器$("#author").css("color","颜色")；

并集选择器$(".intro,标签1,标签2").css("color","颜色");

全局选择器$("*").css("font-weight","bolor");

层次选择器

后代选择器$(".textRight 标签").css("color","颜色")；

子代选择器$("textRight>标签").css("color","颜色")；

相邻元素选择器$("h1+p").css("text-decoration","underline");

同辈元素选择器$("h1~p").css("text-decoration","underline");

属性选择器

$("#news a[class]").css("background","#c9cbcb");//a标签带有class属性

$("#news a[class=‘hot‘]").css("background", "#c9cbcb"); // class为hot

$("#news a[class!=‘hot‘]").css("background", "#c9cbcb");// class不为hot

$("#news a[href^=‘www‘]").css("background","#c9cbcb");//以www开头

$("#news a[href$=‘html‘]").css("background", "#c9cbcb");//以html结尾

$("#news a[href*=‘k2‘]").css("background","#c9cbcb"); //包含"k2"的元素

基本过滤选择器

jQuery基础及选择器（二）

// 标题元素
$(".contain :header").css({"background":"#2a65ba",…});
// 第一个、最后一个元素
$(".contain li:first").css({"font-size":"16px",…});
$(".contain li:last").css("border","none");
// 偶数、奇数元素
$(".contain li:even").css("background","#f0f0f0");
$(".contain li:odd").css("background","#cccccc");
// 小于、大于某个索引值
$(".contain li:lt(2)").css({"color":"#708b02"});
$(".contain li:gt(3)").css({"color":"#b66302"});

可见性过滤选择器

通过元素显示状态来获取元素

jQuery基础及选择器（二）

实例

<!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>

</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 src="../BAO/jquery-3.5.1.js"></script>
<script>
    $(document).ready(function(){
        $("#show").click(function(){
            $("p:hidden").show();
        })
        $("#hide").click(function(){
            $("p:visible").hide();
        })
    })
</script>
</body>
</html>

jQuery基础及选择器（二）

相关推荐