基本选择器：
1 ， id 选择器 通过 id 找到 #p ｛ color ：“ red ”｝；
2 ，根据类名 $(“.span”)
3 ，指定的元素 $(“div”);
4 集合元素匹配所有元素 $(“p,div,.span”);
5 匹配所有元素 ｛ padding ： 0 ； margin ： 0 ｝
层次选择器
1, 后代元素选择器通过当前元素的后代元素（儿子，孙子） ul li(background:”blue”);
2 ，子元素选择器（只包括儿子）
$(“#div > p”).css(“color”,”red”);
3, 相邻元素选择器（紧接在前一个后面）
$(“#div ul + li”).css(“color”,”red”);
4, 兄弟元素选择器
<span></span>
<div>
$(“span~.div3”).css({“fontSize”:”30px”,”color”:”red”});
过滤选择器
索引大于小于 gt() lt()
//1, 匹配所有 div 元素中 , 第一个 div
$(“div:first”).css(“color”,”red”);
//2, 匹配所有 div 元素中 , 最后一个 div
$(“div:last”).css(“color”,”red”);
//3, 匹配索引是偶数的 div, 索引是从 0 开始
$(“div:even”).css(“color”,”red”);
//4, 匹配索引是奇数的 div, 索引是从 0 开始
$(“div:odd”).css(“color”,”red”);
//5, 匹配索引等于 xx 的 div
$(“div:eq(0)”).css(“color”,”red”);
//6, 匹配索引小于 xx 的 div 小于 lt()
$(“div:lt(2)”).css(“color”,”red”);
//6, 匹配索引大于 xx 的 div 大于 gt()
$(“div:gt(1)”).css(“color”,”red”);
//7, 匹配网页中所有的 h 标签
$(“:header”).css(“color”,”red”);
//8, 匹配网页中正在执行动画效果的元素
//$(":animated")
});
</script>
</head>
<body>
<h1> 这是 h1 标签 </h1>
<h2> 这是 h2 标签 </h2>
<div> 这是第一个 div</div>
<div> 这是第二个 div</div>
<div> 这是第三个 div</div>
</body>
内容过滤选择器
<style>
.show{
display:block;
}
.hide{
Display:none;
}
</style>
//1, 选取含有文本内容为标签的元素
$(“div:contains(‘ 显示 ’)”).css(“color”,”red”);
//2, 匹配含有 p 元素的元素
$(“div:has(p)”).css(“color”,”red”)
* 可见性过滤选择器 *
//1, 选取所有可见的元素 visible 可见
$(“div:visible”).css(“color”,”red”);
//2, 让隐藏的元素显示出来 show()
$(“div:hidden”).show(3000).css({"color":"blue","font-size":"25px"};
</script>
</head>
<body>
<div> 这是显示的 div</div>
<div> 这是隐藏的 div</div>
<div><p> 你好 </p></div>
</body>
属性过滤选择器
$(document).ready(function(){
//1, 选取拥有此属性的元素
$(“div[class]”).css(“color”,”red”);
//2, 选取属性值为 value 的元素
$(“div[class =hide]”).css(“color”,”red”).show(3000);
扫一扫
281
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
