先放一个截图：
这是jq的所有选择器
PS：如没兴趣可以去看官方的API，这个截图的版本是1.11.3 ，这个东西过一遍有个大致的印象，到时候肯定需要查API的（大佬别刚(#^.^#)）
基本选择器
* $("#id"):ID选择器，选择指定的ID，id一般在一个文件中唯一存在
* $(".class")：类选择器，选择指定class的标签
* $("element标签")：标签选择器，选择指定的标签
* $("*"):全局选择器，选择所有的标签
* $("#id,.class,h2")：组选择器
层级选择器
* $("E F"):后代选择器 （在E中的所有元素）
* $("E>F"):子代选择器 （在E中的所有子元素）
* $("E+F"):相邻选择器（紧接在E后面的兄弟F元素）
* $("E~F"):同辈选择器（E后所有的兄弟元素）
PS：可以自己跑一下看看，注意要引入jquery-1.7.2.js，当然版本可以不一样。
<!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 type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//1.选择 body 内的所有 div 元素:后代选择器
$("#btn1").click(function(){
$("body div").css("background", "#bbffaa");
});
//2.在 body 内, 选择div子元素: 子元素选择器
$("#btn2").click(function(){
$("body > div").css("background", "#bbffaa");
});
//3.选择 id 为 one 的下一个 div 元素: 选择相邻元素
$("#btn3").click(function(){
$("#one+div").css("background", "#bbffaa");
});
//4.选择 id 为 two 的元素后面的所有 div 兄弟元素
$("#btn4").click(function(){
$("#two~div").css("background", "#bbffaa");
});
});
</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" />
<br><br>
<h3>层级选择器</h3>
<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>
基本过滤选择器：
:first 选择第一个元素
:last 选择最后一个元素
:not(selector) 选出不是selector的元素
:even 索引偶数选择器，从 0 开始计数
:odd 索引奇数
:eq(index) 索引等于index的元素
:gt(index) 索引大于index的元素
:lt(index) 索引小于index的元素
:header 选择h1等这些标题元素
:animated 选择正在执行动画的元素
内容过滤选择器：
:contains(text) 选择包含text文本的元素
:empty 选择空元素 （1、没有子元素2、没有文本元素）<div></div>
:has(selector) 选择子元素符合selector的元素，这selector包含所有选择器
:parent 选择含有子元素的元素
属性过滤选择器
[attribute] 包含attribute属性的元素
[attribute=value] attribute属性值等于value的元素 name="username"
[attribute!=value] attribute属性值不等于value的元素
[attribute^=value] attribute属性的value值以value开头的
[attribute$=value] attribute属性的value值以value结尾
[attribute*=value] attribute属性的value值包含value的
[attrSel1][attrSel2][attrSelN] 同时满足[]里的所有条件的元素
子元素过滤选择器 PS：这里不全啊，实力与图片不符哈哈哈
:nth-child(index) 获取第index个元素。注意index不同于eq(index),这里从1开始
:first-child 匹配每一组父元素中的子元素中的第一个，与:first有不同
:last-child 匹配每一组父元素中的子元素中的最后一个，与:last有不同
:only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配
$(function() {
//1.选取含有 属性title 的div元素
$("#btn1").click(function() {
$("div[title]").css("background", "#bbffaa");
});
//2.选取 属性title值等于'test'的div元素
$("#btn2").click(function() {
$("div[title='test']").css("background", "#bbffaa");
});
//3.选取 属性title值不等于'test'的div元素(*没有属性title的也将被选中)
$("#btn3").click(function() {
$("div[title!='test']").css("background", "#bbffaa");
});
//4.选取 属性title值 以'te'开始 的div元素
$("#btn4").click(function() {
$("div[title^='te']").css("background", "#bbffaa");
});
//5.选取 属性title值 以'est'结束 的div元素
$("#btn5").click(function() {
$("div[title$='est']").css("background", "#bbffaa");
});
//6.选取 属性title值 含有'es'的div元素
$("#btn6").click(function() {
$("div[title*='es']").css("background", "#bbffaa");
});
//7.组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素
//对于属性过滤选择器，如果多个写在一起，则后面过滤的对象是在前面选择器过滤的结果基础上过滤的。
$("#btn7").click(function() {
$("div[id][title*='es']").css("background", "#bbffaa");
});
//8.选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素
$("#btn8").click(function() {
$("div[title][title!='test']").css("background", "#bbffaa");
});
//9.选取每个class为one的div元素下的第一个子元素
$("#btn9").click(function(){
$("div.one :first-child").css("background","#bbffaa");
// $("div.one>:first-child").css("background","#bbffaa");
});
}); 表单选择器
:input 选择所有的input框
:text 选择所有的text框
:password 选择所有的password框
:radio 选择所有的radio框
:checkbox 选择所有checkbox框
.有的checkbox框
:submit 选择所有的submit
:image 选择所有的image
:reset 选择所有的reset框
:button 选择所有的button按钮
:file 选择所有的文件框
:hidden 选择所有的隐藏域
表单对象的属性
:enabled 可用的
:disabled 不可用的
:checked 选择的，checkbox或者单选按钮的选择 复选框、单选框等，不包括select中的option
:selected 选择的，下拉列表的选择 匹配所有选中的option元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单对象属性过滤选择器</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//1.对表单内 可用input文本框做赋值操作
$("#btn1").click(function(){
//
$("input:enabled").val("New Value");
});
//2.对表单内 不可用input文本框做赋值操作
$("#btn2").click(function(){
$("input:disabled").val("New Value Too");
});
//3.获取多选框选中的个数
$("#btn3").click(function(){
//
alert($(":checkbox:checked").length);
});
//4.获取多选框选中的内容
$("#btn4").click(function(){
//
var $cs = $(":checkbox:checked");
// for(var i=0;i<$cs.length;i++){
// alert($($cs[i]).val());
// // alert($cs[i].value);
// }
//each()迭代数组 ["test1","test4"]
$cs.each(function(){
alert($(this).val());
// alert(this.value);
});
});
//5.获取下拉框选中的内容
$("#btn5").click(function(){
var $ss = $("select option:selected");
$ss.each(function(){
alert(this.value);
});
});
})
</script>
</head>
<body>
<h3>表单及表单对象属性过滤选择器</h3>
<button id="btn1">对表单内 可用input 赋值操作.</button>
<button id="btn2">对表单内 不可用input 赋值操作.</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="disabled" value="不可用文本框"/><br>
可用元素: <input name="che" value="可用文本框2"/><br>
不可用元素: <input name="name" disabled="disabled" value="不可用文本框"/><br>
<br>
多选框: <br>
<input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
<input type="checkbox" name="newsletter" value="test2" />test2
<input type="checkbox" name="newsletter" value="test3" />test3
<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
<input type="checkbox" name="newsletter" value="test5" />test5
<br><br>
下拉列表1: <br>
<select name="test" multiple="multiple" size="3">
<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>
1040
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
