第70天：jQuery基本选择器（一）

一、jQuery基本选择器

jQuery是javascript的一个库，包含多个可重用的函数，用来辅助我们简化javascript开发

jQuery能做的javascipt都能做到，而javascript能做的事情，jQuery不一定能做到。

1、CSS选择器

CSS选择器回顾
符号	说明	用法
#id	Id选择器	#id{ color:red; }
.class	类选择器	.class{ //}
Element	标签选择器	P { //}
*	通配符选择器	配合其他选择器来使用
,	并集选择器	div,p{}
空格	后代选择器	div span{} 选择div下面所有后代的span
>	子代选择器	div > span{}
+	紧邻选择器	div+p 选择div紧挨着的下一个p元素

2、 jQuery基本选择器

基本选择器
$(“#demo”)	选择id为demo的第一个元素	$(“#demo”).css(“background”,”red”)
$(“.liItem”)	选择所有类名（样式名）为liItem的元素	$(“.liItem”). css(“background”,”red”);
$(“div”)	选择所有标签名字为div的元素	$(“div”). css(“background”,”red”);
$(“*”)	选择所有元素 少用或配合其他选择器来使用	$(“*”). css(“background”,”red”)
$(“.liItem,div”)	选择多个指定的元素，这个地方是选择出了 .liItem元素和div元素	$(“.liItem,div”). css(“background”,”red”)

3、层级选择器

层级选择器
	选择所有的后代元素	$(“div span”). css(“background”,”red”);
	选择所有的子代元素	$(“div > span”). css(“background”,”red”)
	选择紧挨着的下一个元素	$(“div + p”). css(“background”,”red”)
~	兄弟选择器 选择后面的所有的兄弟元素	$(“div ~ p”). css(“background”,”red”)

4、过滤选择器

基本过滤选择器
:eq(index)	index是从0开始的一个数字，选择序号为index的元素。选择第一个匹配的元素。	$(“li:eq(1)”). css(“background”,”red”)
:gt(index)	Index 是从0开始的一个数字，选择序号大于index的元素	$(“li:gt(2)”). css(“background”,”red”)
:lt(index)	Index是从0开始的一个数字，选择小于index 的元素	$(“li:lt(2)”). css(“background”,”red”)
:odd	选择所有序号为奇数行的元素	$(“li:odd”). css(“background”,”red”)
:even	选择所有序号为偶数的元素	$(“li:even”). css(“background”,”red”)
:first	选择匹配第一个元素	$(“li:first”). css(“background”,”red”)
:last	选择匹配的最后一个元素	$(“li:last”). css(“background”,”red”)

5、属性选择器

属性选择器
$(“a[href]”)	选择所有包含href属性的元素	$(“a[href]”). css(“background”,”red”)
$(“a[href=’itcast’]”)	选择href属性值为itcast的所有a标签	$(“a[href=’itcast’]”). css(“background”,”red”)
$(“a[href!=’baidu’]”)	选择所有href属性不等baidu的所有元素，包括没有href的元素	$(“a[href!=’baidu’]”). css(“background”,”red”)
$(“a[href^=’web’]”)	选择所有以web开头的元素	$(“a[href^=’web’]”). css(“background”,”red”)
$(“a[href$=’cn’]”)	选择所有以cn结尾的元素	$(“a[href$=’cn’]”). css(“background”,”red”)
$(“a[href*=’i’]”)	选择所有包含i这个字符的元素，可以是中英文	$(“a[href*=’i’]”). css(“background”,”red”)
$(“a[href][title=’我’]”)	选择所有符合指定属性规则的元素，都符合才会被选中。	$(“a[href][title=’我’]”). css(“background”,”red”)