jQuery选择器
一、基本选择器
1、ID选择器
根据指定的id获取元素,只能获取单个元素
示例
$("#a").css("font-weight","bold");
2、class选择器
根据指定的类匹配元素
示例
$(".b").css("font-style","italic");
3、全局选择器
获取所有元素
示例
$("*").css("font-size","30px");
4、标签选择器
根据指定的标签获取元素,可将该标签的所有元素全部获取
示例
$("p").css("color","blue");
5、并集选择器
根据给定的标签获取元素,中间用 “,” 隔开,两者为或者关系
示例
//将id为a或者class为b的元素背景颜色改为黄色
$("#a,.b").css("background-color","yellow");
6、交集选择器
根据给定的标签获取元素,中间无任何符号,两者为并且关系
示例
//将id为a的p标签元素缩进2个字符
$("p#a").css("text-indent","2cm");
二、层次选择器
1、后代选择器
两者为后代关系 或者 父子关系,中间用空格隔开
示例
//将div下的所有li获取
$("div li").css("list-style","none");
2、子选择器
两者必须是直接的父子关系,中间用**>**隔开
示例
$("ul>li").css("color","red");
3、相邻兄弟选择器
获取所给标签的后一个同级标签,中间用**+**隔开
示例
$("#er+li").css("background-color","black");
4、通用兄弟选择器
获取所给标签以后的所有同级标签,中间用**~**隔开
示例
$("#er~li").css("font-size","40px");
三、属性选择器
方法:使用**[]**,在[]写入所查找属性
[name]:包含name属性的标签 标志: []
$("[name]").css("color","green");
//[name="lyz"]:name属性赋值是lyz
$("[name='lyz']").css("font-size","60px");
//[name!="sy"]:name属性赋值不是sy 标志: !=
$("[name!='sy']").css("background-color","yellow");
//[name^"w"]:name属性赋值以w开头 标志: ^
$("[name^='w']").css("font-family","楷体");
//[name$="y"]:name属性赋值以y结尾 标志: $
$("[name$='y']").css("color","red");
//[name*="s"]:name属性赋值包含s 标志: *
$("[name*='s']").css("font-style","italic");
四、基本过滤选择器
//li:first 第一个li
$("li:first").css();
//li:last 最后一个li
$("li:last").css();
//li:eq(2) 下标为2的li
$("li:eq(2)").css();
//li:gt(2) 下标大于2的li
$("li:gt(2)").css();
//li:lt(2) 下标小于2的li
$("li:lt(2)").css();
//li:even 下标为偶数的li
$("li:even").css();
//li:odd 下标为奇数的li
$("li:odd").css();
//获取所有的标题 h1-h6
$(":header").css("color","red");
五、基本可见性过滤选择器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>可见性过滤选择器</title>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function(){
//给显示按钮添加单击事件
$("[value='显示']").click(function(){
//获取被隐藏的div
$("div:hidden").show();
})
//给隐藏按钮添加单击事件
$("[value='隐藏']").click(function(){
//获取被隐藏的div
$("div:visible").hide();
})
})
</script>
</head>
<body>
<div style="display: none;background-color: red;">这是隐藏的div</div>
<input type="button" value="显示"/>
<input type="button" value="隐藏"/>
</body>
</html>