第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”)