JQ选择器
jquery最核心的是选择器
支持css2,css3的选择器，同时还扩展了一部分选择器
类CSS选择器
基本选择器
按类选择 $(".className")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-1.11.2.min.js"></script>
<style>
.test1{
width: 200px;
height: 200px;
border: 3px solid blue;
}
</style>
<script>
$(function () {
$(".div1").addClass("test1");
})
</script>
</head>
<body>
<div class="div1"></div>
</body>
</html>
按id选择 $("#id")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-1.11.2.min.js"></script>
<style>
.test1{
width: 200px;
height: 200px;
border: 3px solid blue;
}
</style>
<script>
$(function () {
$("#div1").addClass("test1");
})
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
按标签选择 $("div")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-1.11.2.min.js"></script>
<style>
.test1{
width: 200px;
height: 200px;
border: 3px solid blue;
}
</style>
<script>
$(function () {
$("div").addClass("test1");
})
</script>
</head>
<body>
<div class="div1"></div>
<div></div>
</body>
</html>
并集选择器 ，分隔 or的关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-1.11.2.min.js"></script>
<script>
$(function () {
$("span,p").css("font-size","28px")
})
</script>
</head>
<body>
<div>div1</div>
<span>123</span>
<p>pppppp</p>
</body>
</html>
交集选择器 用.分隔，and的关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-1.11.2.min.js"></script>
<script>
$(function () {
$("div.class1").css("font-size","28px");
})
</script>
</head>
<body>
<div class="class1">
div1
</div>
<div>
div2
</div>
</body>
</html>
全局选择器 * 选中所有
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-1.11.2.min.js"></script>
<script>
$(function () {
$("*").css("font-size","28px");
})
</script>
</head>
<body>
<div class="class1">
div1
</div>
<div>
div2
</div>
</body>
</html>
学生练习
1、需求说明
使用jQuery匹配文档中ID值为“div1”的元素，并设置其背景色为红色
2、需求说明
使用jQuery匹配文档中所有的<div>标签，并设置它们的字体颜色为红色
学生练习以下选择器的使用
层次选择器
后代选择器 ancestor descendant
子选择器 parent>child
相邻元素选择器 prev+next
同辈元素选择器 prev~sibings
属性选择器
属性选择器
[attribute]
[attribute=value]
[attribute !=value]
[attribute^=value]
[attribute$=value]
[attribute*=value]
[selector] [selector2] [selectorN]
过滤选择器
基本过滤选择器:first :last :even :odd :eq(index) :gt(index) :lt(index) :not(selector) :header :focus
练习：制作表格：首行，尾行，奇数行，偶数行都不同色
可见性过滤选择器 :visible :hidden
内容过滤选择器: :contains(text) :empty :has(selector) :parent
表单选择器::input :text :password :radio :checkbox :submit :image :reset :button
:file :hidden
表单对象属性过滤选择器 :enable :disabled :checked :selected