1.基本选择器
基本选择器是jQuery中用的最多的一种选择器，也是最简单的
1.1.标签选择器
$(“p”)：选择器当前页面中所有的p元素
$("h1").css("color", "blue"); //标签选择器
1.2.类选择器
$(".test"):选取当前页面中所有class属性值为test的元素
$(".price").css("background", "#EFEFEF");
1.3.id选择器
$("#test1"):选取当前页面中id为test1的元素
$("#author").css("color", "#083499"); //Id选择器
1.4.通配符选择器
$("*"):匹配当前页面中所有的元素
$("*").css("font-weight", "bold"); //通配符选择器
1.5.并集选择器
$(“p,.test”):选择的是当前页面中所有的p元素和当前页面中所有class属性值为test的元素
$("dt,dd").css("color", "red"); //并集选择器
2.层次选择器
元素之间的层次关系，后代，同辈等
2.1.后代选择器
$(".textRight p")：选取class为textRight后代的所有p元素，包括子辈、孙子辈等所有后代
2.2.子选择器
$(".textRight>p")：选取的是class为textRight直接下一代p元素，只是包含子辈
2.3.相邻元素选择器
$(“h1+p”)：选取紧邻
元素之后相邻的同辈元素
2.4.同辈元素选取
$(“h1~p”)：选取
元素之后的所有同辈元素
3.属性选择器
属性选择器 : 标签名[属性名]
3.1.包含某属性
//选取a标签有class属性的元素
$("a[class]").css("background-color","#D7D7D7");
3.2.包含某属性等于确定的值
//选取a标签class属性值等于hot的元素
$("a[class='hot']").css("background-color","#D7D7D7");
3.3.包含某属性不等于确定的值
//选取a标签class属性值不等于hot的元素
$("a[class!='hot']").css("background-color","#D7D7D7");
3.4.属性以某字符开头
//选取a标签href属性值以www开头的元素
$("a[href^='www']").css("background-color","#D7D7D7");
3.5.属性以某字符结尾
//选取a标签href属性值以html结尾的元素
$("a[href$='html']").css("background-color","#D7D7D7");
3.5.属性包含某字符
//选取a标签href属性值包含w的元素
$("a[href*='w']").css("background-color","#D7D7D7");
4.基本过滤选择器
<div class="contain">
<h2>祝福冬奥</h2>
<ul>
<li> 贝克汉姆：衷心希望北京能够申办成功！</li>
<li> 姚明：北京申冬奥是个非常棒的机会！加油！</li>
<li> 张虹：北京办冬奥，大家的热情定超乎想象！ </li>
<li> 肖恩怀特：我爱北京，支持北京申办冬奥会！</li>
<li> 赵宏博：北京申办冬奥会是再合适不过了！</li>
<li> 你喜欢哪些冬季运动项目？(点击进入调查页)</li>
</ul>
</div>
4.1.:header
获取所有的h标签
//获取h2标签，改变他的背景颜色和字体颜色
$(".contain :header").css({
"background": "#808080",
"color": "red"
});
4.2.li:eq(1)
获取的是第二个li元素 下标从0开始
//获取class为contain的元素下面的第二个li元素
$(".contain ul li:eq(1)").css("border", "1px solid #808080");
4.3.li:lt(index)
选取小于index的元素 ，不包含index的元素
//设置前两个li的字体颜色index=0,1
$(".contain ul li:lt(2)").css("color","blue");
4.4.li:gt(index)
选取大于index的元素 ，不包含index的元素
//设置后两个li的字体颜色index=4,5
$(".contain ul li:gt(3)").css("color","red");
4.5.li:even
获取偶数行
//设置偶数行
$(".contain ul li:even").css("background", "burlywood");
4.6.li:odd
获取奇数行
//设置奇数行
$(".contain ul li:odd").css("background-color", "#AAAAAA");
4.7.li:first
获取第一个li元素
//改变第一个li的字体颜色
//$(".contain ul li:lt(1)").css("color","blueviolet");
$(".contain ul li:first").css("color", "blueviolet");
4.8.li:last
获取最后一个li元素
//改变最后一个li的字体颜色
$(".contain ul li:last").css("color", "chocolate");
5.可见性过滤选择器
<body>
<p id="txt_hide" class="p1">点击按钮，我会被隐藏哦~</p>
<p id="txt_show">隐藏的我，被显示了，嘿嘿^^</p>
<input name="show" type="button" value="显示隐藏的P元素" id="show" />
<input name="hide" type="button" value="隐藏显示的P元素" id="hide" />
</body>
#txt_show {
display: none;
color: #00C;
}
#txt_hide {
display: block;
color: #F30;
}
5.1.p:hidden
选择所有被隐藏的p元素
$("#show").click(function() {
//把隐藏改成可见
$("p:hidden").show(); //可见
})
5.2.p:visible
选取所有可视化的p元素
$("#hide").click(function() {
//把可见改完隐藏
$("p:visible").hide(); //隐藏
})
- .show()实际上是设置了css中的display为block
- .hide()实际上是设置了css中的display为none
6.内容过滤选择器
6.1.:contains(text)
选取 是包含指定text的元素
//选择含有文本 'di' 的 div 元素
$("div:contains('di')").css("background", "#FF3300");
6.2.:empty
选取空元素
//选取没有文本的div的元素
$("div:empty").css("background", "#686868");
6.3.:parent
选取包含文本元素或者子元素的元素 不为空
//选取不为空的元素
$("div:not(:empty)").css("background", "#686868");
$("div:parent").css("background","#2A65BA");
7.子元素过滤选择器
子元素过滤器，作用在子元素上
7.1.:nth-child(序号)
根据序号来选择，序号是从1开始,也可以设置odd even 根据奇偶来设置
7.1.1.:nth-child(1)
选取的第1个子元素
7.1.2.:nth-child(even/odd)
选区的偶数行或者奇数行
7.1.3.:nth-child(3n+1)
7.2.:first-child()
选取的某个元素下面的第一个子元素
7.3.:last-child()
选取的某个元素下面的最后一个子元素
7.4.:only-child()
选取的是某个元素下面只有一个子元素，选择中该子元素
区分:first和::first-child()
-
:first选择器等价于:eq(0)选择器, :first-child选择器等价于:nth-child(1)选择器。
-
:first只匹配一个，而:frist-child为每一个父元素匹配第一个孩子元素。
- 1
- 2
- 3
- 11
- 12
- 13
8.表单选择器
8.1.:input
$(":input") 所有 元素
8.2.:text
$(":text") 所有 type=“text” 的 元素
8.3.:password
$(":password") 所有 type=“password” 的 元素
8.4.:radio
$(":radio") 所有 type=“radio” 的 元素
8.5.:checkbox
$(":checkbox") 所有 type=“checkbox” 的 元素
8.6.:submit
$(":submit") 所有 type=“submit” 的 元素
8.7.:reset
$(":reset") 所有 type=“reset” 的 元素
8.8.:button
$(":button") 所有 type=“button” 的 元素
8.9.:image
$(":image") 所有 type=“image” 的 元素
8.10.:file
$(":file") 所有 type=“file” 的 元素
9.补充1
9.1.text(),html()和val()区别
9.1.1. text()
text()方法设置或返回被选元素的文本内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="./js/jquery-1.12.4.js"></script>
<title>Document</title>
</head>
<body>
<div id="div1">div有文本内容</div>
<div id="div2">
div2内的文本
<span>span内有文本内容</span>
</div>
<input type="text" id="input1" value="这是一个input标签">
<input type="text" name="" id="input2" placeholder="能成功获取">
<button id="button1" value="这是一个button标签"></button>
<script>
console.log($("#div1").text());
console.log($("#div2").text());
console.log($("#div2 span").text()) ;
console.log($("#input1").text());
console.log($("#input2").text());
console.log($("#button1").text());
</script>
</body>
</html>
可以看出text()只输出标签内的文本内容，和js的innerText方法一样
9.1.2. html()
html() 方法返回或设置被选元素的内容 (inner HTML)，包括标签。
<body>
<div id="div1">div有文本内容</div>
<div id="div2">
div2内的文本
<span>span内有文本内容</span>
</div>
<input type="text" id="input1" value="这是一个input标签">
<input type="text" name="" id="input2" placeholder="能成功获取">
<button id="button1" value="这是一个button标签"></button>
<script>
console.log($("#div1").html());
console.log($("#div2").html());
console.log($("#div2 span").html());
console.log($("#input1").html());
console.log($("#input2").html());
console.log($("#button1").html());
</script>
</body>
打印当前标签内的文本内容，如果有子标签，则把子标签本身和子标签内的文本一起打印，这个和js的innerHTML差不多
9.1.3. val()
val() 方法返回或设置被选元素的值。
元素的值是通过 value 属性设置的。该方法大多用于 input 元素。
<body>
<div id="div1">div有文本内容</div>
<div id="div2">
div2内的文本
<span>span内有文本内容</span>
</div>
<input type="text" id="input1" value="这是一个input标签1">
<input type="text" name="" id="input2" value="这是一个input标签2" placeholder="能成功获取">
<button id="button1" value="这是一个button标签"></button>
<script>
console.log($("#div1").val());
console.log($("#div2").val());
console.log($("#div2 span").val());
console.log($("#input1").val());
console.log($("#input2").val());
console.log($("#button1").val());
</script>
</body>
val()是用来输出表单内的数据，可以看出div和span标签内的文本并没有被输出，我还测试了H5新标签placeholder
同样也没有被输出，所以这个val应该是只针对标签的value属性的。
9.2.文档加载事件
$(document).ready(function()和window.οnlοad=function的区别
- 前者只需要把文档中的框架加载出来之后就可以执行相应的内容，加载时间和效率相对来说都比较快，后者必须等到整个页面里面的所有元素（图片、视频等）加载完成以后才会执行，包括下载出来图片，css样式，js样式等。
- 前者可以同时编写多个，并且可以同时执行，后者一个页面只能存在一个，即使存在多个，但是总是最后一个生效，虽然可以执行多次，但是总是默认执行最后一个的结果。
-
$(document).ready(function(){ }); //简写 $(function(){ });
