一. 基本选择器
1. ID选择器：$(“#ID“)：根据ID名来选择
2. 元素选择器：$(“element“)：根据元素名来选择
3. 类选择器：$(“.class“)：根据类名来选择
4. 通用选择器：$(“*”)：选择所有的元素
5. 群组选择器：$(“selector1,selector2,……“)：选择多个选择器的并集
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<style type="text/css">
div,
span,
p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn1").click(function () {
//选择 id 为 one 的元素
$("#one").css("background-color","blue");
});
});
$(function () {
$("#btn2").click(function () {
//选择 class 为 mini 的所有元素"
$(".mini").css("background-color","blue");
});
});
$(function () {
$("#btn3").click(function () {
//选择 元素名是 div 的所有元素
$("div").css("background-color","blue");
});
});
$(function () {
$("#btn4").click(function () {
//选择 所有的元素
$("*").css("background-color","blue");
});
});
$(function () {
$("#btn5").click(function () {
//选择 所有的 span 元素和id为two的元素
$("span,#two").css("background-color","blue");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="选择 id 为 one 的元素" />
<input type="button" id="btn2" value="选择 class 为 mini 的所有元素" />
<input type="button" id="btn3" value="选择 元素名是 div 的所有元素" />
<input type="button" id="btn4" value="选择 所有的元素" />
<input type="button" id="btn5" value="选择 所有的 span 元素和id为two的元素" />
<br><br>
<div class="one" id="one">
id 为 one,class 为 one 的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8">
</div>
<span id="span">span元素</span>
</body>
</html>
二. 层级选择器
1. 后代选择器：$(“ancestor descendant“)：在给定的祖先元素下匹配所有的后代元素，可以理解为选择爷爷的所有儿子以及孙子。比如匹配ancestor元素下的所有descendant元素
2. 子元素选择器：$(“parent>child“)：在给定的父元素下匹配所有的子元素，可以理解为爷爷的儿子，爷爷的孙子不匹配
3. 兄弟选择器：$(“prev+ next“)：匹配所有紧接在 prev 元素后的 next 元素
4. 兄弟选择器：$(“prev~ input“)：匹配 prev 元素之后的所有 siblings 元素
举一个最简单的例子，感受一下两种兄弟选择器的区别。
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
// $("div~h2").css("background-color","red");//4 5 7变色
// $("div").siblings().css("background-color","red"); //1 2 4 5 7变色
// $("div").siblings('h2').css("background-color","red"); //2 4 5 7变色
$("div+h2").css("background-color","red"); //4 变色
});
</script>
</head>
<body>
<h3>1</h3>
<h2>2</h2>
<div id="zhangjia">
3
</div>
<h2>4</h2>
<h2>5</h2>
<h3>6</h3>
<h2>7</h2>
层级选择器的综合例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层级选择器</title>
<style type="text/css">
div,
span,
p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn1").click(function () {
//选择 body 内的所有 div 元素
$("body div").css("background-color","yellow");
});
$("#btn2").click(function () {
//选择 body的div子元素
$("body>div").css("background-color","yellow");
});
$("#btn3").click(function () {
//选择 id 为 one 的下一个 div 元素
$("#one+div").css("background-color","yellow");
});
$("#btn4").click(function () {
//选择 id 为 two 的元素后面的所有 div 兄弟元素
$("#two~div").css("background-color","yellow");
});
$("#btn5").click(function () {
// 选择 id 为 two 的元素所有 div 兄弟元素
$("#two").siblings("div").css("background-color","yellow");
});
$("#btn6").click(function () {
//选择 id 为 one 的后面的所有 span 元素
$("#one").nextAll("span").css("background-color","yellow");
});
$("#btn7").click(function () {
//选择 id 为 two 的元素前边的所有的 div 兄弟元素
$("#two").prevAll("div").css("background-color","yellow");
});
});
</script>
</head>
<body>
<input type="button" value="选择 body 内的所有 div 元素" id="btn1"/>
<input type="button" value="选择 body 内的子元素是 div" id="btn2"/>
<input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3"/>
<input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4"/>
<input type="button" value="选择 id 为 two 的元素所有 div 兄弟元素" id="btn5"/>
<input type="button" value="选择 id 为 one 的后面的所有 span 元素" id="btn6"/>
<input type="button" value="选择 id 为 two 的元素前边的所有的 div 兄弟元素" id="btn7"/>
<br><br>
<div class="one" id="one">
id 为 one,class 为 one 的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8">
</div>
<span id="span">^^span元素^^</span>
<span>--span元素--</span>
</body>
</html>
三. 基本选择器
:first —> 获取第一个元素
:last —> 获取最后个元素
:not(selector) 选择器匹配非指定元素/选择器的每个元素（也就是说selector加不加引号都可以）
:even —> 匹配所有索引值为偶数的元素，从 0 开始计数 示例
:odd —> 匹配所有索引值为奇数的元素，从 0 开始计数
:eq(index) —> 匹配一个给定索引值的元素，从 0 开始计数
:gt(index) —> 匹配所有大于给定索引值的元素，从 0 开始计数
:lt(index) —> 匹配所有小于给定索引值的元素，从 0 开始计数
:head(index) —> 匹配所有的标题元素
:animated —> 匹配所有正在执行动画效果的元素
:focus —> 匹配当前获取焦点的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础过滤选择器</title>
<style type="text/css">
div,
span,
p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function () {
function animate() {
$("#mover").slideToggle("slow", animate);
}
animate();
$("#btn1").click(function () {
//选择第一个 div 元素
$("div:first").css("background-color","yellow");
});
$("#btn2").click(function () {
//选择最后一个 div 元素
$("div:last").css("background-color","yellow");
});
$("#btn3").click(function () {
//选择class不为 one 的所有 div 元素
$("div:not(.one)").css("background-color","yellow");
});
$("#btn4").click(function () {
//选择索引值为偶数的 div 元素
$("div:even").css("background-color","yellow");
});
$("#btn5").click(function () {
//选择索引值为奇数的 div 元素
$("div:odd").css("background-color","yellow");
});
$("#btn6").click(function () {
//选择索引值为大于 3 的 div 元素
$("div:gt(3)").css("background-color","yellow");
});
$("#btn7").click(function () {
//选择索引值为等于 3 的 div 元素
$("div:eq(3)").css("background-color","yellow");
});
$("#btn8").click(function () {
//选择索引值为小于 3 的 div 元素
$("div:lt(3)").css("background-color","yellow");
});
$("#btn9").click(function () {
//选择所有的标题元素
$(":header").css("background-color","yellow");
});
$("#btn10").click(function () {
//选择当前正在执行动画的所有元素
$(":animated").css("background-color","yellow");
});
$("#btn11").click(function () {
//选择 id 为 two 的下一个 span 元素
$("#two").nextAll("span:first").css("background-color","yellow");
});
});
</script>
</head>
<body>
<input type="button" value="选择第一个 div 元素" id="btn1"/>
<input type="button" value="选择最后一个 div 元素" id="btn2"/>
<input type="button" value="选择class不为 one 的所有 div 元素" id="btn3"/>
<input type="button" value="选择索引值为偶数的 div 元素" id="btn4"/>
<input type="button" value="选择索引值为奇数的 div 元素" id="btn5"/>
<input type="button" value="选择索引值为大于 3 的 div 元素" id="btn6"/>
<input type="button" value="选择索引值为等于 3 的 div 元素" id="btn7"/>
<input type="button" value="选择索引值为小于 3 的 div 元素" id="btn8"/>
<input type="button" value="选择所有的标题元素" id="btn9"/>
<input type="button" value="选择当前正在执行动画的所有元素" id="btn10"/>
<input type="button" value="选择 id 为 two 的下一个 span 元素" id="btn11"/>
<h3>基本选择器.</h3>
<br><br>
<div class="one" id="one">
id 为 one,class 为 one 的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8">
</div>
<span id="span">^^span元素 111^^</span>
<span>^^span元素 222^^</span>
<div id="mover">正在执行动画的div元素.</div>
</body>
</html>
四. 内容选择器
:contains(text) —> 匹配包含给定文本的元素（text加不加引号都可以）
:empty —> 匹配所有不包含子元素或者文本的空元素
:has(selector) —> 匹配含有选择器所匹配的元素的元素，注意和contains区分。（selector加不加引号都可以）
:parent —> 匹配含有子元素或者文本的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内容过滤选择器</title>
<style type="text/css">
div,
span,
p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script src="jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
//选择 含有文本 'di' 的 div 元素
$("div:contains('di')").css("background-color","yellow");
});
$("#btn2").click(function(){
//选择不包含子元素(或者文本元素) 的 div 空元素
$("div:empty").css("background-color","yellow");
});
$("#btn3").click(function(){
//选择含有 class 为 mini 元素的 div 元素
$("div:has(.mini)").css("background-color","yellow");
});
$("#btn4").click(function(){
//选择含有子元素(或者文本元素)的div元素
//方法一：
// $("div:parent").css("background-color","yellow");
//方法二
$("div:not(:empty)").css("background-color","yellow");
});
});
</script>
</head>
<body>
<input type="button" value="选择 含有文本 'di' 的 div 元素" id="btn1" />
<input type="button" value="选择不包含子元素(或者文本元素) 的 div 空元素" id="btn2" />
<input type="button" value="选择含有 class 为 mini 元素的 div 元素" id="btn3" />
<input type="button" value="选择含有子元素(或者文本元素)的div元素" id="btn4" />
<br><br>
<div class="one" id="one">
id 为 one,class 为 one 的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8">
</div>
<div id="mover">正在执行动画的div元素.</div>
</body>
</html>
五. 可见性选择器
:hidden —> 匹配所有不可见元素，或者type为hidden的元素
:visible —> 匹配所有的可见元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>可见性选择器</title>
<style type="text/css">
div,
span,
p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script src="jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
//选取所有可见的 div 元素
$("div:visible").css("background-color","yellow");
});
$("#btn2").click(function(){
//选择所有不可见的 div 元素
/*
jquery方法的返回值还是jQuery对象
*/
//为了查看方便，使用show方法，在1秒显示出来
$("div:hidden").show(1000).css("background-color","yellow");
});
$("#btn3").click(function(){
//选择所有不可见的 input 元素
alert($("input:hidden").val());
});
});
</script>
</head>
<body>
<input type="button" value="选取所有可见的 div 元素" id="btn1">
<input type="button" value="选择所有不可见的 div 元素" id="btn2" />
<input type="button" value="选择所有不可见的 input 元素" id="btn3" />
<br><br>
<div class="one" id="one">
id 为 one,class 为 one 的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div
<input type="hidden" value="Hello">
</div>
</body>
</html>
六. 属性
[attribute] ：匹配包含给定属性的元素。
[attribute=value] ：匹配给定的属性是某个特定值的元素。
[attribute!=value] ：匹配所有不含有指定的属性，或者属性不等于特定值的元素。此选择器等价于:not([attr=value])，要匹配含有特定属性但不等于特定值的元素，请使用[attr]:not([attr=value])或者：[attr]([attr!=value])
[attribute^=value] ：匹配给定的属性是以某些值开始的元素
[attribute$=value] ：匹配给定的属性是以某些值结尾的元素
[attribute*=value] ：匹配给定的属性是以包含某些值的元素
[attrSel1][attrSel2][attrSelN] ：复合属性选择器，需要同时满足多个条件时使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性过滤选择器</title>
<style type="text/css">
div,
span,
p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script src="jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
//选取含有 属性title 的div元素
$("div[title]").css("background-color","yellow");
});
$("#btn2").click(function(){
//选取 属性title值等于'test'的div元素
$("div[title='test']").css("background-color","yellow");
});
$("#btn3").click(function(){
//选取 属性title值不等于'test'的div元素
//没有title属性的div也会被选中
$("div[title!='test']").css("background-color","yellow");
});
$("#btn4").click(function(){
//选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素
//没有title属性的div不会被选中
$("div[title][title!='test']").css("background-color","yellow");
});
});
</script>
</head>
<body>
<input type="button" value="选取含有 属性title 的div元素." id="btn1" />
<input type="button" value="选取 属性title值等于'test'的div元素." id="btn2" />
<input type="button" value="选取 属性title值不等于'test'的div元素." id="btn3" />
<input type="button" value="选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素." id="btn4" />
<br><br>
<div class="one" id="one">
id 为 one,class 为 one 的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" value="123456789" size="8">
</div>
<div id="mover">正在执行动画的div元素.</div>
</body>
</html>
七. 表单
:input —> 匹配所有 input, textarea, select 和 button 元素
:text —> 匹配所有的单行文本框
:password —> 匹配所有密码框
:radio —> 匹配所有单选按钮
:checkbox —> 匹配所有复选框
:submit —> 匹配所有提交按钮
:image —> 匹配所有图像域
:reset —> 匹配所有重置按钮
:button —> 匹配所有按钮
:file —> 匹配所有文件域
:hidden —> 匹配所有不可见元素，或者type为hidden的元素
八. 表单对象属性
:enabled —> 匹配所有可用元素
:disabled —> 匹配所有不可用元素
:checked —> 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
:selected —> 匹配所有选中的option元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单元素过滤选择器</title>
<script src="jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
//对表单内 可用的文本框 赋值
$(":text:enabled").val("哈哈");
});
$("#btn2").click(function(){
//对表单内 不可用文本框 赋值
$(":text:disabled").val("哈哈哈");
});
$("#btn3").click(function(){
//获取多选框 选中 的个数
alert($(":checkbox:checked").length);
});
$("#btn4").click(function(){
//获取多选框 选中 的内容
/*
each()
*/
$(":checkbox:checked").each(function () {
console.log($(this).val());
// console.log($(this).text());//不能获取到
});
});
$("#btn5").click(function(){
//获取下拉框 选中 的内容
$("select[name='test2']>option:selected").each(function () {
console.log($(this).text());
// console.log($(this).val()); //也能获取到
});
});
});
</script>
</head>
<body>
<h3>表单对象属性过滤选择器</h3>
<button id="btn1">对表单内 可用的文本框 赋值.</button>
<button id="btn2">对表单内 不可用的文本框 赋值.</button><br /><br />
<button id="btn3">获取多选框选中的个数.</button>
<button id="btn4">获取多选框选中的内容.</button><br /><br />
<button id="btn5">获取下拉框选中的内容.</button><br /><br />
<form id="form1" action="#">
可用元素: <input name="add" value="可用文本框1" /><br> 不可用元素: <input name="email" disabled="true" value="不可用文本框" /><br> 可用元素: <input name="che" value="可用文本框2" /><br> 不可用元素: <input name="name" disabled="true" value="不可用文本框" /><br>
<br> 多选框: <br>
<input type="checkbox" name="item" checked="checked" value="test1" />test1
<input type="checkbox" name="item" value="test2" />test2
<input type="checkbox" name="item" value="test3" />test3
<input type="checkbox" name="item" checked="checked" value="test4" />test4
<input type="checkbox" name="item" value="test5" />test5
<br><br> 下拉列表1: <br>
<select name="test" multiple="multiple" style="height: 100px">
<option>浙江</option>
<option selected="selected">辽宁</option>
<option>北京</option>
<option selected="selected">天津</option>
<option>广州</option>
<option>湖北</option>
</select>
<br><br> 下拉列表2: <br>
<select name="test2">
<option>浙江</option>
<option>辽宁</option>
<option selected="selected">北京</option>
<option>天津</option>
<option>广州</option>
<option>湖北</option>
</select>
</form>
</body>
</html>
请登录之后再进行评论