jQuery優勢

1. 強大的選擇器。jQuery允許開發者使用從CSS1到CSS3幾乎所有的選擇器，以及jQuery獨創的高級而復雜的選擇器。

2. 出色的DOM操作封裝

3. 可靠的事件處理機制

4. 完善的Ajax。jQuery將所有的Ajax操作封裝到一個函數$.Ajax()里，使得開發者處理Ajax的時候能夠專心處理業務邏輯而無需關心復雜的瀏覽器兼容性和XMLHttpRequest對象的創建和使用的問題。

5. 出色的瀏覽器兼容性。jQuery2.0版本以后已經不再支持IE 6/7/8版本。

6. 鏈式操作方式

7. 隱式迭代。當使用jQuery找到帶有“.myClass”類的全部元素，然后隱藏它們時，無需循環遍歷每一個返回的元素。

8. 行為層與結構層的分離。開發者可以使用jQuery選擇器選中元素，然后直接給元素添加事件。這種行為層與結構層分離的思想，可以使jQuery開發人員和HTML或其他頁面開發人員各司其職，擺脫過去開發沖突或個人單干的開發模式。

DOM對象與jQuery對象的相互轉換

建議變量命名風格，如果是jQuery對象的變量，建議以$打頭。如：

var $variable = jQuery對象

如果是正常的DOM對象，則不用，正常命名即可。如：

var variable = DOM對象

1. jQuery對象轉換為DOM對象

jQuery提供了兩種方法將一個jQuery對象轉換成DOM對象，即[index]和get(index)。示范代碼分別如下：

var $cr = $("#cr"); var cr = $cr[0];
alert(cr.checked); var $cr = $("#cr"); var cr = $cr.get(0); alert(cr.checked);

2. 將DOM對象轉換為jQuery對象

對于一個DOM對象，只需要用$()把DOM對象包裝起來，就可以獲得一個jQuery對象了。示范：

var cr = document.getElementById("cr"); var $cr = $(cr);

jQuery選擇器

需要注意，$("#tt")獲取的永遠是對象，即使是網頁上沒有此元素。只能通過此對象的長度來判斷元素是否真實存在。比如：

if($("#tt")) {// do something, wrong }if($("#tt").length > 0) {// do something, correct }

jQuery選擇器分為基本選擇器、層次選擇器、過濾選擇器和表單選擇器。

1. 基本選擇器

基本選擇器通過id、class的標簽我等來查找DOM元素。

選擇器	描述	返回	示例
?#id	根據給定的id匹配一個元素	?單個元素	$("#test")選取id為test的元素
?.class	根據給定的類名匹配元素	?集合元素	$(".test")選取所有class為test的元素
?element	根據給定的元素名匹配元素	?集合元素	$("p")選取所有的<p>元素
?*	匹配所有元素	?集合元素	$("*")選取所有的元素
?selector1,selector2, ......,selectorN	將每一個選擇器匹配到的元素合并后一起返回	?集合元素	$("div,span,p.myClass")選取所有<div>， <span>和擁有class為myClass的p>標簽的一組元素

2. 層次選擇器

層次選擇通過DOM元素之間的層次關系來獲取特定元素。例如：后代元素、子元素、相鄰元素和同輩元素等。

選擇器	描述	返回	示例
?$("ancestor descendant")	選取ancestor元素里的所有descendant（后代）元素	集合元素	$("div span")選取<div>里的所有的<span>元素
?$("parent > child")	選取parent元素下的child（子）元素， 與$("ancestor descendant")有區別， $("ancestor descendant")選擇的是后代元素	集合元素	$("div > span")選取<div>元素下元素名是span>的子元素
?$("prev + next")	選擇緊接在prev元素后面的next元素	集合元素	$(".one + div")選取class為one的下一個<div>同輩元素
?$("prev ~ siblings")	選取prev元素之后的所有siblings元素	集合元素	$("#two ~ div")選取id為two的元素后面的所有<div>同輩元素

可以使用next()方法來代替$("prev + next")選擇器；也可以用nextAll()方法來代替$("prev ~ siblings")選擇器。示范：

//選取#prev之后的所有同輩div元素 $("#prev ~ div").css("background","#bbffaa"); //同上 $("#prev").nextAll("div").css("background","#bbffaa"); //選取#prev所有的同輩元素，無論前后位置 $("#prev").siblings("div").css("background","#bbffaa");

3. 過濾選擇器

過濾選擇器主要是通過特定的過濾規則篩選出所需的DOM元素，過濾規則與CSS中的偽類選擇語法相同，以一個冒號（:）開頭。?按照不同的過濾規則，過濾選擇器可以分為基本過濾、內容過濾、可見性過濾、屬性過濾、子元素過濾和表單對象屬性過濾選擇器。

3.1 基本過濾選擇器

選擇器	描述	返回	示例
:first	選取第一個元素	?單個元素	$("div:first")選取所有<div>元素中第一個<div>元素
:last	選取最后一個元素	?單個元素	$("div:last")選取所有<div>元素中最后一個<div>元素
:not(selector)	去除所有與給定選擇器材匹配的元素	?集合元素	$("input:not(.myClass)")選取class不是myClass的<input>元素
:even	選取索引是偶數的所有元素，索引從0開始	?集合元素	$("input:even")選取索引是偶數的<input>元素
:odd	選取索引是奇數的所有元素，索引從0開始	?集合元素	$("input:odd")選取索引是奇數的<input>元素
:eq(index)	選取索引等于index的所有元素（index從0開始）	?集合元素	$("input:eq(1)")?選取索引等于1的<input>元素
:gt(index)	選取索引大于index的所有元素（index從0開始）	?集合元素	$("input:gt(1)")?選取索引大于1的<input>元素
:lt(index)	選取索引小于index的所有元素（index從0開始）	?集合元素	$("input:lt(1)")?選取索引小于1的<input>元素
:header	選取所有標題元素，例如：h1,h2,h3,......?	?集合元素	$("header")選取網頁中所有的<h1>,<h2>,......?
:animated	選取當前正在執行動畫的所有元素?	?集合元素	$("div:animated")選取正在執行動畫的<div>元素?
:focus	選取當前獲取焦點的所有元素?	?集合元素	$("focus")選取當前獲取焦點的元素?

3.2 內容過濾選擇器

選擇器	描述	返回	示例
:contains(text)	選取含有文本text的元素	?集合元素	$("div:contains('我')")選取含有文本“我”的<div>元素
:empty	選取不包含子元素或者文本為空的元素	?集合元素	$("div:empty")選取不包含子元素（包括文本元素）的<div>空元素
:has(selector)	選取含有選擇器所匹配的元素的元素	?集合元素	$("div:has(p)")選取含有<p>的<div>元素
:parent	選擇含有子元素或者文本的元素	?集合元素	$("div:parent")選取含有子元素（包括文本元素）的<div>元素

3.3 可見性過濾選擇器

選擇器	描述	返回	示例
:hidden	根據給定的id匹配一個元素	集合元素	$(":hidden")選取所有不可見的元素。 包括<input type="hidden"/>， <div style="dislay:none;">， <div style="visibility:hidden;">等元素
:visible	根據給定的類名匹配元素	集合元素	$(div":visible")選取所有可見<div>元素

3.4 屬性過濾選擇器

選擇器	描述	返回	示例
[attribute]	選取擁有此屬性的元素	?集合元素	$("div[id]")選取擁有屬性idi的<div>元素
[attribute=value]	選取屬性的值為value的元素	?集合元素	$("div[title=test]")選取屬性title為“test”的<div>元素
[attribute!=value]	選取屬性的值不等于value的元素	?集合元素	$("div[title=test]")選取屬性title不等于的<div>元素 （注意：沒有屬性title的元素也會被選取）
[attribute^=value]	選取屬性的值以value開始的元素	?集合元素	$("div[title^=test]")選取屬性title以“test”開始的<div>元素
[attribute$=value]	選取屬性的值以value結尾的元素	?集合元素	$("div[title￥=test]")選取屬性title以“test”結尾的<div>元素
[attribute*=value]	選取屬性的值含有value的元素?	?集合元素?	$("div[title^=test]")選取屬性title含有“test”的<div>元素?
[attribute|=value]	選取屬性等于給定字符串或以該字符串為前綴的元素（-）?	?集合元素	$("div[title|='en']")選取屬性title等于en或以en為前綴的元素。如：en-books。
[attribute~=value]?	選取屬性用空格分隔的值中包含一個給定值的元素	?集合元素	$("div[title~='uk'")選取屬性title用空格分隔的值中包含字符uk的元素。
[attribute1][attribute2] [attributeN]	用屬性選擇器合并成一個復合屬性選擇器，滿足多個條件。 每選擇一次，縮小一次范圍。?	?集合元素	$("div[id][title$='test']")選取擁有屬性id，并且屬性title以“test”結尾的<div>元素?

3.5 子元素過濾選擇器?

選擇器	描述	返回	示例
:nth-child (index/even/odd/equation)	選取每個父元素下的第index個子元素或者奇偶元素。（index從1開始）	?集合元素	$("div.one :nth-child(2)")選取class為one的<div>父元素下的第2個子元素
:first-child	選取每個父元素的第1個子元素	?集合元素	$("div.one :first-child")選取class為one的<div>父元素下的第1個子元素
:last-child	選取每個父元素的最后一個子元素	?集合元素	$("div.one :last-child")選取class為one的<div>父元素下的第最后一個子元素
:only-child	選擇每個父元素的獨子元素（非獨子、空集不算）	?集合元素	$("div.one :only-child")選取class為one的<div>父元素下僅有一個元素的元素

4. 表單選擇器?

選擇器	描述	返回	示例
:enabled	選取所有可用元素	?集合元素	$("#form1 :enabled")選取id為“form1”的表單內的所有可用元素
:disabled	選取所有不可用元素	?集合元素	$("#form1 :disabled")選取id為“form1”的表單內的所有不可用元素
:checked	選取所有被選中的元素（單選框、復選框）	?集合元素	$("input :checked")選取所有被選中的<input>元素
:selected	選擇所有被選中的選項元素（下拉列表）	?集合元素	$("select option:selected")選取所有被選中的選項元素

總結

以上是生活随笔為你收集整理的jQuery学习笔记（简介，选择器）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。