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"的元素
基本过滤选择器
// 标题元素
$(".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"});可见性过滤选择器
通过元素显示状态来获取元素
实例
<!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>