先给个demo,下面给出的jQuery语句请逐行注释看效果
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery选择器 - 选择器</title>
<style>
ul {
width: 600px;
list-style: none;
}
li {
margin-top: 10px;
padding: 20px;
border: 2px dotted #ccc;
}
</style>
</head>
<body>
<h1>jQuery选择器 - 选择器</h1>
<hr>
<ul id="firstList">
<li>a b c d e f g</li>
<li class="item" id="myItem">a b c d e f g</li>
<li lang="cn">a b c d e f g</li>
<li>a b c d e f g</li>
<li>a b c d e f g</li>
<li></li>
<li></li>
</ul>
<ul id="secondList">
<li>a b c d e f g</li>
<li>a b c d e f g</li>
<li>a b c d e f g
<ul>
<li>hello li</li>
<li class="current">hello li</li>
<li>hello li 同志</li>
<li>hello li</li>
</ul>
</li>
<li class="item">a b c d e f g</li>
<li>a b c d e f g</li>
</ul>
<hr>
<p class="item">a b c d e f g</p>
<img style="width: 150px" src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg">
<img style="width: 150px" src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="hello world">
<img style="width: 150px" src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="hello you">
<img style="width: 150px" src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="abc">
<img style="width: 150px" src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="hello" title="bbd">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
// 内容
})
</script>
</body>
</html>
1. 基本选择器
- ID 选择器
#IDName
- CLASS选择器
.className
- 标签名选择器
tagName
- 组合选择器
*
全局选择器- selector,selector,selector
// 基本选择器
// ID 选择器
$("#firstList").css("border", "2px solid red");
// class 选择器
$(".item").css("border", "2px solid yellow");
// 标签名选择器
$("li").css("border", "3px solid green");
// 全局选择器
$("*").css("border", "1px solid purple");
// 组合选择器
$("li.item").css("border", "1px solid red");
// 多个选择器
$("li,p").css("border", "1px solid yellow");
2. 层级选择器
- 选择器 选择器
ul li
后代元素 - 选择器>选择器
ul>li
子元素 - 选择器+选择器
ul+li
紧邻的兄弟元素 - 选择器~选择器
ul~li
后面所有的兄弟元素
// 层级选择器
// 后代元素
$("#secondList li").css("border", "3px solid red");
// 子元素
$("#secondList>li").css("border", "3px solid red");
// 紧邻的兄弟元素
$("#myItem+li").css("border", "2px solid green");
// 后面所有的兄弟元素
$("#myItem~li").css("border", "2px solid black");
3. 筛选选择器
- :first
- :last
- :eq(index) 从0开始
- :lt(index) <
- :gt(index) >
- :odd 奇数
- :even 偶数
- :not(选择器)
- :lang()
- :root
- :header 所有的标题标签
- :focus 获取焦点的元素
- :target 锚点指向的元素
- :animated 正在执行动画的元素
// 筛选选择器
// $("#secondList li").css("border", "2px solid pink");
$("#secondList li:first").css("border", "2px solid pink");
$("#secondList li:last").css("border", "2px solid yellow");
// 从第0个开始数,满足冒号前面选择器里面的集合中的第4个
$("#secondList li:eq(4)").css("border", "2px solid red");
// 从第0个开始数,满足冒号前面选择器里面的集合中大于第二个的
$("#firstList li:gt(2)").css("border", "5px solid red");
// 从第0个开始数,满足冒号前面选择器里面的集合中小于第二个的
$("#firstList li:lt(2)").css("border", "5px solid red");
// 奇数行
$("#firstList li:odd").css("background", "#ccc");
// 偶数行
$("#firstList li:even").css("background", "#369");
// 除了class是item的
$("#firstList li:not(.item)").css("background", "green");
// 语言为en的都是黄色
$("#firstList li:lang(en)").css("background", "yellow");
$(":first").css("border","10px solid red");
// 上下两种写法相等
$("*:first").css("border","10px solid red");
// 所有h标签都满足 h1、h2、h3等等
$(":header").css("color","red");
// 获得焦点时
$(":focus").css("border", "2px solid red");
// 过滤出根元素
$(":root").css("border", "2px solid #999");
// 过滤出 锚点正在指向的元素 在网址后面添加#firstList后刷新会自动跳到该位置,如xxx.html#firstList
$(":target").css("border", "2px solid red");
4. 内容选择器
- :contains(text) 包含指定的文本
- :has(selector) 包含满足条件的后代元素的元素
- :empty 没有内容也没有子元素
- :parent 跟empty相反
// 内容选择器
// 过滤文本内容有同志的li标签
$("li:contains('同志')").css("border","2px solid red");
// 必须包含一个class是current的后代元素 的 li标签
$("li:has('.current')").css("border", "2px solid red");
// 不能有内容 也不能有子元素
$("#firstList li:empty").css("border", "2px solid green");
// 要么有内容 要么有子元素
$("#firstList li:parent").css("border", "2px solid purple");
5. 可见性选择器
- :hidden 不可见的元素
- visible 可见的元素
// 可见性选择器
// 可见的元素
$(":visible").css("border", "1px solid red");
6. 属性选择器
- [attrName]
- [attrName=value]
- [attrName!=value]
- [attrName^=value]
- [attrName$=value]
- [attrName*=value]
[][][]
// 属性选择器
// 选择带有alt属性的img标签
$("img[alt]").css("border", "5px solid green");
// alt为abc
$("img[alt='abc']").css("border", "5px solid green");
// alt不是abc
$("img[alt!='abc']").css("border", "5px solid green");
// 以hello开头的
$("img[alt^='hello']").css("border", "5px solid blue");
// 以d结尾的
$("img[alt$='d']").css("border", "5px solid red");
// 包含o字符都是
$("img[alt*='o']").css("border", "5px solid black");
// 包含o字符并且还有title属性的
$("img[alt*='o'][title]").css("border", "5px solid purple");
7. 子元素选择器
- :first-child
- :last-child
- :nth-child(index) 从1开始
- :nth-last-child(index)
- only-child
- filrst-of-type
- last-of-type
- nth-of-type(index)从1开始
- nth-last-of-type(index)
- :only-of-type
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery选择器 - 选择器</title>
<style>
ul {
width: 600px;
list-style: none;
}
li,p {
margin-bottom: 10px;
padding: 20px;
border: 2px solid #ccc;
}
</style>
</head>
<body>
<h1>jQuery选择器 - 子元素选择器</h1>
<hr>
<ul>
<li>a b c d e f g</li>
<li>a b c d e f g</li>
<li>a b c d e f g</li>
<li>a b c d e f g
<ol>
<li>a b c d e f g</li>
<li>a b c d e f g</li>
<li>a b c d e f g</li>
<li>a b c d e f g</li>
<li>a b c d e f g</li>
</ol>
</li>
<li>a b c d e f g</li>
<li>a b c d e f g</li>
</ul>
<ul id="myList">
<p style="background-color: #f5f5f5">a b c d e f g</p>
<li>a b c d e f g</li>
<li>a b c d e f g</li>
<p style="background-color: #f5f5f5">a b c d e f g</p>
<li>a b c d e f g</li>
<li>a b c d e f g</li>
<li>a b c d e f g</li>
<p style="background-color: #f5f5f5">a b c d e f g</p>
<li>a b c d e f g</li>
</ul>
<ul>
<li>hello world</li>
</ul>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function (){
// *-child *-of-type
// -child系列的
// 选择一个 是所有兄弟元素里面第一个的 li元素
$("li:first-child").css("border", "2px solid red");
// 与first-child相反
$("li:last-child").css("border", "2px solid red");
// 所有兄弟元素中的第三个li
$("li:nth-child(3)").css("border", "2px solid red");
$("li:nth-last-child(3)").css("border", "2px solid red");
// 没有兄弟元素的li
$("li:only-child").css("border", "2px solid yellow");
// -of-type系列
// 选择 所有兄弟元素里面的第五个
$("#myList li:nth-child(5)").css("border", "2px solid red");
// 选择 所有兄弟元素里面相同标签的第五个, 它不会考虑其他元素位置的影响,只对li标签的位置排序
$("#myList li:nth-of-type(5)").css("border", "2px solid red");
// 其他-of-type系列也是这种区别
})
</script>
</body>
</html>
8. 表单选择器
- :input 所有的表单控件(input textarea select button …)
- :text / :password / :radio / :checkbox / :file / :reset / 根据input的type值
- :submit 所有具有提交功能的按钮 (button input:submit)
- :button button元素 input:button
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery表单选择器</title>
<style>
ul {
width: 600px;
list-style: none;
}
li,p {
margin-bottom: 10px;
padding: 20px;
border: 2px solid #ccc;
}
</style>
</head>
<body>
<h1>jQuery表单选择器</h1>
<hr>
<form action="#">
<table>
<tr>
<td>Text:</td>
<td><input type="text"></td>
</tr>
<tr>
<td>Pwd:</td>
<td><input type="password" name="pwd" id="" disabled></td>
</tr>
<tr>
<td>radio:</td>
<td>
<input type="radio" name="sex" value="m">男
<input type="radio" name="sex" value="w">女
</td>
</tr>
<tr>
<td>checkbox</td>
<td>
<input type="checkbox" name="">
<input type="checkbox" name="">
<input type="checkbox" name="">
<input type="checkbox" name="" checked>
</td>
</tr>
<tr>
<td>file</td>
<td>
<input type="file" name="">
</td>
</tr>
<tr>
<td>select</td>
<td>
<select name="">
<option value="1">A</option>
<option value="2" selected>B</option>
<option value="3" disabled>C</option>
<option value="4">D</option>
</select>
</td>
</tr>
<tr>
<td>textarea</td>
<td>
<textarea name="" cols="30" rows="10"></textarea>
</td>
</tr>
<tr>
<td>按钮:</td>
<td>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="普通按钮">
<button>button</button>
<button type="button">不能提交的button</button>
</td>
</tr>
</table>
</form>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function (){
// 所有的表单控件
$(":input").width(150).height(40).css("border","1px solid red");
$(":text").css("border","1px solid red");
$(":password").css("border","1px solid red");
$(":radio").width(100).height(100);
$(":checkbox").width(100).height(100);
$(":file").css("border", "1px solid red");
// 具有提交功能的按钮
$(":submit").css("border","1px solid red");
$(":reset").css("border","1px solid yellow");
$(":button").css("border","1px solid purple");
})
</script>
</body>
</html>
9. 表单对象选择器
- :disabled
- :enabled
- :checked
- :selected
// 表单对象选择器
// 不可用的变黄
$(":disabled").css("background-color","yellow");
// 可用的
$(":enabled").css("background-color","red");
// $(":checked").width(50).height(50);
// $(":selected").css("color","blue");
10. 混淆选择器
- $.escapeSelector(selector) className或IDName是有特殊符号
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery选择器 - 混淆选择器</title>
<style>
.box{
width: 400px;
height: 300px;
border: 2px solid orange;
}
</style>
</head>
<body>
<div class="box" id="#item"></div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function (){
// 如果id是个特殊的名字,就用$.escapeSelector
$("#"+$.escapeSelector("#item")).css("background-color", "red");
})
</script>
</body>
</html>