當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

jQuery学习笔记（简介，选择器）

發(fā)布時(shí)間：2025/4/5 编程问答 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 jQuery学习笔记（简介，选择器）小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

jQuery優(yōu)勢(shì)

1. 強(qiáng)大的選擇器。jQuery允許開(kāi)發(fā)者使用從CSS1到CSS3幾乎所有的選擇器，以及jQuery獨(dú)創(chuàng)的高級(jí)而復(fù)雜的選擇器。

2. 出色的DOM操作封裝

3. 可靠的事件處理機(jī)制

4. 完善的Ajax。jQuery將所有的Ajax操作封裝到一個(gè)函數(shù)$.Ajax()里，使得開(kāi)發(fā)者處理Ajax的時(shí)候能夠?qū)Ｐ奶幚順I(yè)務(wù)邏輯而無(wú)需關(guān)心復(fù)雜的瀏覽器兼容性和XMLHttpRequest對(duì)象的創(chuàng)建和使用的問(wèn)題。

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

6. 鏈?zhǔn)讲僮鞣绞?/p>

7. 隱式迭代。當(dāng)使用jQuery找到帶有“.myClass”類的全部元素，然后隱藏它們時(shí)，無(wú)需循環(huán)遍歷每一個(gè)返回的元素。

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

DOM對(duì)象與jQuery對(duì)象的相互轉(zhuǎn)換

建議變量命名風(fēng)格，如果是jQuery對(duì)象的變量，建議以$打頭。如：

var $variable = jQuery對(duì)象

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

var variable = DOM對(duì)象

1. jQuery對(duì)象轉(zhuǎn)換為DOM對(duì)象

jQuery提供了兩種方法將一個(gè)jQuery對(duì)象轉(zhuǎn)換成DOM對(duì)象，即[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對(duì)象轉(zhuǎn)換為jQuery對(duì)象

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

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

jQuery選擇器

需要注意，$("#tt")獲取的永遠(yuǎn)是對(duì)象，即使是網(wǎng)頁(yè)上沒(méi)有此元素。只能通過(guò)此對(duì)象的長(zhǎng)度來(lái)判斷元素是否真實(shí)存在。比如：

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

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

1. 基本選擇器

基本選擇器通過(guò)id、class的標(biāo)簽我等來(lái)查找DOM元素。

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

2. 層次選擇器

層次選擇通過(guò)DOM元素之間的層次關(guān)系來(lái)獲取特定元素。例如：后代元素、子元素、相鄰元素和同輩元素等。

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

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

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

3. 過(guò)濾選擇器

過(guò)濾選擇器主要是通過(guò)特定的過(guò)濾規(guī)則篩選出所需的DOM元素，過(guò)濾規(guī)則與CSS中的偽類選擇語(yǔ)法相同，以一個(gè)冒號(hào)（:）開(kāi)頭。?按照不同的過(guò)濾規(guī)則，過(guò)濾選擇器可以分為基本過(guò)濾、內(nèi)容過(guò)濾、可見(jiàn)性過(guò)濾、屬性過(guò)濾、子元素過(guò)濾和表單對(duì)象屬性過(guò)濾選擇器。

3.1 基本過(guò)濾選擇器

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

3.2 內(nèi)容過(guò)濾選擇器

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

3.3 可見(jiàn)性過(guò)濾選擇器

選擇器

描述

示例

:hidden

根據(jù)給定的id匹配一個(gè)元素

集合元素

$(":hidden")選取所有不可見(jiàn)的元素。

包括<input type="hidden"/>，

<div style="dislay:none;">，

<div style="visibility:hidden;">等元素

:visible

根據(jù)給定的類名匹配元素