JQuery选择器的学习和CSS选择器几乎是一样的，那我们首先来了解一下JQuery基本选择器
1. 基本选择器
element: 标签选择器，获取页面上同一类标签
.class 类选择器，获取页面上class属性值相同的一类标签
#id id选择器，获取页面上指定id属性对应的值的唯一标签
selector1,selector2,selectorN 并集选择器，选做多种类型的选择器的组合
* 通用选择器: 选择页面上所有的标签
代码示例如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery选择器</title>
<script src="../js/jquery-1.12.4.js"></script>
<script>
$(function(){
// element: 标签选择器，获取页面上同一类标签
var $p = $("p");
console.log($p);
$p.css("color","red");
// .class 类选择器，获取页面上class属性值相同的一类标签
var $p2 = $(".p1");
console.log($p2);
$p2.css("color","green");
// #id id选择器，获取页面上指定id属性对应的值的唯一标签
var $p3 = $("#p2");
console.log($p3);
$p3.css("color", "blue");
// selector1,selector2,selectorN 并集选择器，选做多种类型的选择器的组合
var $select = $("h1,span,p.p1,p#p2");
console.log($select);
$select.css("color", "yellow");
// * 通用选择器: 选择页面上所有的标签
var $all = $("*");
console.log($all);
$all.css("color", "orange");
});
</script>
</head>
<body>
<!--
基本
#id
elemen
.class
*
selector1,selector2,selectorN
需求: 使用基本选择器给设置字体颜色
-->
<h1>静夜思</h1>
<span>李白</span>
<p>床前明月光</p>
<p class="p1">疑似地上霜</p>
<p id="p2">举头望明月</p>
<p>低头思故乡</p>
</body>
</html>2. 层级选择器
ancestor descendant 后代选择器: 选择祖先ancestor下的所有后代descendant标签
parent > child 子代选择器: 选择父亲parent下面所有的一级子标签
prev + next 相邻兄弟选择器: 选择紧邻某一个元素的下一个元素标签
prev ~ siblings 通用兄弟选择器: 获取某个元素同级别后面的所有元素
代码示例如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery层级选择器</title>
<script src="../js/jquery-1.12.4.js"></script>
<script>
$(function() {
/*
ancestor descendant
parent > child
prev + next
prev ~ siblings
*/
// ancestor descendant 后代选择器: 选择祖先ancestor下的所有后代descendant标签
var $descendant = $("ul a");
console.log($descendant);
$descendant.css("color", "red");
// parent > child 子代选择器: 选择父亲parent下面所有的一级子标签
var $child = $("ul>li");
console.log($child);
$child.css("color", "green");
// prev + next 相邻兄弟选择器: 选择紧邻某一个元素的下一个元素标签
var $next = $("h1+span");
console.log($next);
$next.css("color", "blue");
// prev ~ siblings 通用兄弟选择器: 获取某个元素同级别后面的所有元素
var $siblings = $("span~div");
console.log($siblings);
$siblings.css("border","1px solid red");
});
</script>
</head>
<body>
<h1>春晓</h1>
<span>孟浩然</span>
<ul>
<li><a href="#">春眠不觉晓</a></li>
<li><a href="#">处处闻啼鸟</a></li>
<li><a href="#">夜来风雨声</a></li>
<li><a href="#">花落知多少</a></li>
</ul>
<div>我是div1</div>
<div>我是div2</div>
<div>我是div3</div>
</body>
</html>3. 基本筛选器
:first: 获取第一个元素
:last: 获取最后一个元素
:eq(index) 获取第几个元素,index 从0开始
:gt(index) 获取满足大于指定索引值的所有元素,index 从0开始
:lt(index) 获取满足小于指定索引值的所有元素,index 从0开始
:even 获取所有索引值为偶数的元素，从 0 开始计数
:odd 获取所有索引值为奇数的元素，从 0 开始计数
:not(selector): 选取除了 指定选择器元素以外的所有元素：
:header: 选取所有标题元素 (h1 - h6)：
:focus 选取当前获取焦点的元素
代码示例如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基本筛选器</title>
<script src="../js/jquery-1.12.4.js"></script>
<script>
$(function() {
// :first: 获取第一个元素
var $first = $("li:first");
console.log($first);
// :last: 获取最后一个元素
var $last = $("li:last");
console.log($last);
// :eq(index) 获取第几个元素,index 从0开始
var $eq = $("li:eq(1)");
console.log($eq);
// :gt(index) 获取满足大于指定索引值的所有元素,index 从0开始
var $gt = $("li:gt(1)");
console.log($gt);
// :lt(index) 获取满足小于指定索引值的所有元素,index 从0开始
var $lt = $("li:lt(1)");
console.log($lt);
// :even 获取所有索引值为偶数的元素，从 0 开始计数
var $even = $("li:even()");
console.log($even);
// :odd 获取所有索引值为奇数的元素，从 0 开始计数
var $odd = $("li:odd()");
console.log($odd);
// :not(selector): 选取除了 指定选择器元素以外的所有元素：
var $odd = $("li:not(.li1,#li2)");
console.log($odd);
// :header: 选取所有标题元素 (h1 - h6)：
var $header = $(":header");
console.log($header);
// :focus 选取当前获取焦点的元素
$("input:eq(1)").focus();
var $focus = $("input:focus");
console.log($focus);
});
</script>
</head>
<body>
<h1>九月九日忆山东兄弟</h1>
<h2>唐代：王维</h2>
<ul>
<li class="li1">独在异乡为异客</li>
<li id="li2">每逢佳节倍思亲</li>
<li>遥知兄弟登高处</li>
<li>遍插茱萸少一人</li>
</ul>
用户名: <input type="text"/>
密码: <input type="text"/>
</body>
</html>4. 内容选择器
:empty 获取既没有文本也没有子元素的指定元素
:parent 获取有文本内容或有子元素的指定元素
:contains(text): 获取包含指定文本内容的指定元素
:has(selector): 获取包含指定子元素的指定元素
代码示例如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内容选择器</title>
<style>
div {
border: 1px solid #f00;
width: 100px;
height: 100px;
margin-top: 5px;
}
</style>
<script src="../js/jquery-1.12.4.js"></script>
<script>
$(function() {
/*
:contains(text)
:empty
:has(selector)
:parent
*/
// :empty 获取既没有文本也没有子元素的指定元素
var $div = $("div:empty");
console.log($div);
// :parent 获取有文本内容或有子元素的指定元素
var $div2 = $("div:parent");
console.log($div2);
// :contains(text): 获取包含指定文本内容的指定元素
var $div3 = $("div:contains('我是div')");
console.log($div3);
// :has(selector): 获取包含指定子元素的指定元素
var $div4 = $("div:has('span')");
console.log($div4);
});
</script>
</head>
<body>
<div></div>
<div>我是div</div>
<div>他也是div</div>
<div><span></span></div>
<div>
<p></p>
</div>
</body>
</html>5. 可见性选择器
:hidden 匹配所有不可见元素，或者type为hidden的元素
:visible 匹配所有的可见元素
代码示例如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>可见性选择器</title>
<script src="../js/jquery-1.12.4.js"></script>
<script>
/*
:hidden 匹配所有不可见元素，或者type为hidden的元素
:visible 匹配所有的可见元素
*/
$(function() {
// var $hidden = $("hidden");
var $hidden = $("input:hidden");
console.log($hidden);
var $visible = $(":visible");
console.log($visible);
$visible.css("background", "green")
});
</script>
</head>
<body>
<div>
<input type="hidden"/>
<input type="text"/> <br>
<span>span</span>
<p>p</p>
<div style="display: none;"></div>
</div>
</body>
</html>6. 属性选择器
[attribute] 获取具有属性attr的元素
[attribute=value] 获取属性attr等于val的元素
[attribute!=value] 获取属性attr不等于val的元素
[attribute^=value] 获取属性attr以val开头的元素
[attribute$=value] 获取属性attr以val结尾的元素
[attribute*=value] 获取属性attr包含val的元素
[attrSel1][attrSel2][attrSelN] 获取包含多个属性选择器的元素
代码示例如下所示:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery属性选择器</title>
<style type="text/css">
a {
display: inline-block;
width: 45px;
height: 45px;
background-color: #AAAACC;
border-radius: 8px;
margin-left: 10px;
text-align: center;
line-height: 45px;
text-decoration: none;
font-size: 20px;
font-weight: 900;
}
</style>
<script src="../js/jquery-1.12.4.js"></script>
<script>
$(function() {
/*
[attribute] 获取具有属性attr的元素
[attribute=value] 获取属性attr等于val的元素
[attribute!=value] 获取属性attr不等于val的元素
[attribute^=value] 获取属性attr以val开头的元素
[attribute$=value] 获取属性attr以val结尾的元素
[attribute*=value] 获取属性attr包含val的元素
[attrSel1][attrSel2][attrSelN] 获取包含多个属性选择器的元素
*/
// 选中所有含有id属性的链接背景为红色
$("a[id]").css("background","red");
// 选中所有class属性等于links item的链接背景为黑色
// 注意:如果属性值中有特殊字符，那么必须使用双引号包裹
$("a[class='links item']").css("background","black");
// 选中所有href中以http开头的链接为蓝色
$("a[href^=http]").css("background", "blue");
// 选中所有href中以png结尾的链接为绿色
$("a[href$=png]").css("background","green");
// 选中包含class中包含item的链接为橘色
$("a[class*=item]").css("background", "orange");
// 选中包含class中包含itemb并且href属性以doc结尾的链接为橘色
$("a[class*=item][href$=doc]").css("background", "yellow");
});
</script>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item first" id="first" >1</a>
<a href="" class="links active item" title="test website" target="_blank" >2</a>
<a href="sites/file/test.html" class="links item" >3</a>
<a href="sites/file/test.png" class="links item" > 4</a>
<a href="sites/file/image.jpg" class="links item" >5</a>
<a href="efc" class="links item" title="website link" >6</a>
<a href="/a.pdf" class="links item" >7</a>
<a href="/abc.pdf" class="links item" >8</a>
<a href="abcdef.doc" class="links item" >9</a>
<a href="abd.doc" class="linksitem last" id="last">10</a>
</p>
</body>
</html>7. 结构伪类选择器
:first-child 获取第一个子元素,不区分元素类型
:first-of-type1.9+ 获取第一个子元素,区分元素类型
:last-child 获取最后一个子元素,不区分元素类型
:last-of-type1.9+ 获取第一个子元素,区分元素类型
:nth-child 获取第n个子元素,不区分元素类型
:nth-last-child()1.9+ 获取倒数第n个子元素,不区分类型
:nth-of-type()1.9+ 获取第n个子元素,区分元素类型
:nth-last-of-type()1.9+ 获取倒数第n个子元素,区分元素类型
:only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配,如果父元素中含有其他元素，那将不会被匹配,不区分类型
:only-of-type1.9+ 如果某个元素是父元素中唯一的子元素，那将会被匹配,如果父元素中含有其他元素，那将不会被匹配,区分类型
代码示例如下所示:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>子元素选择器</title>
<script src="../js/jquery-1.12.4.js"></script>
<script>
/*
:first-child 获取第一个子元素,不区分元素类型
:first-of-type1.9+ 获取第一个子元素,区分元素类型
:last-child 获取最后一个子元素,不区分元素类型
:last-of-type1.9+ 获取第一个子元素,区分元素类型
:nth-child 获取第n个子元素,不区分元素类型
:nth-last-child()1.9+ 获取倒数第n个子元素,不区分类型
:nth-of-type()1.9+ 获取第n个子元素,区分元素类型
:nth-last-of-type()1.9+ 获取倒数第n个子元素,区分元素类型
:only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配,如果父元素中含有其他元素，那将不会被匹配,不区分类型
:only-of-type1.9+ 如果某个元素是父元素中唯一的子元素，那将会被匹配,如果父元素中含有其他元素，那将不会被匹配,区分类型
*/
$(function(){
// 设置ul的第一个子元素li背景为绿色
var $li = $("ul li:first-child");
console.log($li);
$li.css("background","green");
// 设置ul的最后一个子元素li背景为红色
var $li2 = $("ul li:last-child");
console.log($li2);
$li2.css("background","red");
// 设置body下面第一个子元素p背景颜色为黄色
// var $p = $("body p:first-child");
var $p = $("body p:first-of-type");
console.log($p);
$p.css("background","blue");
// 设置ul下面第三个元素背景为粉色
$("ul li:nth-child(3)").css("background", "pink");
// 设置ul下面倒数第二个元素背景为橘色
$("ul li:nth-last-child(2)").css("background", "orange");
// 设置body下面第2个类型是p的元素背景为紫色
$("body p:nth-of-type(2)").css("background", "purple");
// 设置body下面倒数第1个类型是p的元素背景为黑色
$("body p:nth-last-of-type(1)").css("background","black");
// 设置列表项中只有一个li元素的背景为黄色
$("ul li:only-child").css("background", "yellow");
// 设置body下面只有唯一一种类型为h2背景为灰色
$("body h2:only-of-type").css("background", "gray");
});
</script>
</head>
<body>
<h2>子元素选择器</h2>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
</ul>
<ul>
<li>only</li>
</ul>
</body>
</html>8. 表单选择器/表单对象属性选择器
表单对象选择器
:input 获取所有的表单元素
:text 获取所有的单行文本框
:password 获取所有密码框
:radio 获取所有单选按钮
:checkbox 获取所有的复选按钮
:submit 获取所有的提交按钮
:image 获取所有的图像域
:reset 获取所有的重置按钮
:button 获取所有的普通按钮
:file 获取所有的文件表单元素
:hidden 获取所有的隐藏域表单元素
表单对象属性选择器
:enabled 获取所有可用的表单元素
:disabled 获取所有不可用的表单元素
:checked 获取选中的的表单元素(复选框、单选框等，不包括select中的option)
:selected 获取所有选中的option元素
代码示例如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单选择器</title>
<script src="../js/jquery-1.12.4.js"></script>
<script>
$(function() {
// 获取所有的表单元素
var $input = $(":input");
console.log($input);
// 获取所有的input标签
var $input2 = $("input");
console.log($input2);
// 获取所有的单行文本框
var $text = $(":text");
console.log($text);
// 获取所有的密码框
$(":password").css("background","red");
console.log($(":radio"));
console.log($(":checkbox"));
console.log($(":submit"));
console.log($(":image"));
console.log($(":reset"));
console.log($(":button"));
console.log($(":file"));
console.log($("input:hidden"));
console.log($(":enabled"));
console.log($(":disabled"));
console.log($(":checked"));
console.log($(":selected"));
});
</script>
</head>
<body>
<h1>注册表单</h1>
<form action="../server/server.html" method="get">
<label for="username">用户名: </label>
<input type="text" id="username" name="username" placeholder="请输入用户名..." autofocus /> <br>
<label for="password">密 码:</label> <input type="password" id="password" name="password" maxlength="6" placeholder="请输入密码..." /> <br>
<label for="age">年龄: </label>
<input type="text" id="age" name="age" placeholder="请输入年龄..." disabled>
<input type="radio" name="gender" checked id="male" value="male" /><label for="male">
男</label>
<input type="radio" name="gender" id="female" value="female" /><label for="female">女
</label>
<br>
<input type="checkbox" name="hobby" id="cs" value="cs" /><label for="cs">CS</label> <input type="checkbox" name="hobby" id="dnf" checked value="dnf" /><label for="dnf">DNF</label>
<input type="checkbox" name="hobby" id="lol" checked value="lol" /><label for="lol">LOL</label> <input type="checkbox" name="hobby" id="cf" value="cf" /><label for="cf">CF</label> <br>
<label for="constellation">星座</label>
<select name="constellation" id="constellation">
<option value="lion">===请选择===</option>
<option value="lion">狮子座</option>
<option value="doubleSon">双子座</option>
<option value="shootMan" selected>射手座</option>
<option value="doublefish">双鱼座</option>
</select> <br>
<textarea name="introducemyself" rows="20" cols="20" placeholder="请输入个人介绍..."></textarea> <br>
<input type="hidden" id="pid" name="pid" value="1001" />
<label for="pic">照片: </label><input type="file" name="pic" id="pic" />
<br>
<input type="reset" value="重置" />
<input type="submit" value="提交" />
<input type="image" src="../img/renren.gif" />
<input type="button" value="点击" onclick="alert('我没有提交,打我啊!!'); alert('不提交就算了')" />
<button type="button">普通按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
</form>
</body>
</html>