jQuery学习笔记(简介,选择器)
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ū)P奶幚順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ù)給定的類名匹配元素 | 集合元素 | $(div":visible")選取所有可見(jiàn)<div>元素 |
3.4 屬性過(guò)濾選擇器
| 選擇器 | 描述 | 返回 | 示例 |
| [attribute] | 選取擁有此屬性的元素 | ?集合元素 | $("div[id]")選取擁有屬性idi的<div>元素 |
| [attribute=value] | 選取屬性的值為value的元素 | ?集合元素 | $("div[title=test]")選取屬性title為“test”的<div>元素 |
| [attribute!=value] | 選取屬性的值不等于value的元素 | ?集合元素 | $("div[title=test]")選取屬性title不等于的<div>元素 (注意:沒(méi)有屬性title的元素也會(huì)被選取) |
| [attribute^=value] | 選取屬性的值以value開(kāi)始的元素 | ?集合元素 | $("div[title^=test]")選取屬性title以“test”開(kāi)始的<div>元素 |
| [attribute$=value] | 選取屬性的值以value結(jié)尾的元素 | ?集合元素 | $("div[title¥=test]")選取屬性title以“test”結(jié)尾的<div>元素 |
| [attribute*=value] | 選取屬性的值含有value的元素? | ?集合元素? | $("div[title^=test]")選取屬性title含有“test”的<div>元素? |
| [attribute|=value] | 選取屬性等于給定字符串或以該字符串為前綴的元素(-)? | ?集合元素 | $("div[title|='en']")選取屬性title等于en或以en為前綴的元素。如:en-books。 |
| [attribute~=value]? | 選取屬性用空格分隔的值中包含一個(gè)給定值的元素 | ?集合元素 | $("div[title~='uk'")選取屬性title用空格分隔的值中包含字符uk的元素。 |
| [attribute1][attribute2] [attributeN] | 用屬性選擇器合并成一個(gè)復(fù)合屬性選擇器,滿足多個(gè)條件。 每選擇一次,縮小一次范圍。? | ?集合元素 | $("div[id][title$='test']")選取擁有屬性id,并且屬性title以“test”結(jié)尾的<div>元素? |
3.5 子元素過(guò)濾選擇器?
| 選擇器 | 描述 | 返回 | 示例 |
| :nth-child (index/even/odd/equation) | 選取每個(gè)父元素下的第index個(gè)子元素或者奇偶元素。(index從1開(kāi)始) | ?集合元素 | $("div.one :nth-child(2)")選取class為one的<div>父元素下的第2個(gè)子元素 |
| :first-child | 選取每個(gè)父元素的第1個(gè)子元素 | ?集合元素 | $("div.one :first-child")選取class為one的<div>父元素下的第1個(gè)子元素 |
| :last-child | 選取每個(gè)父元素的最后一個(gè)子元素 | ?集合元素 | $("div.one :last-child")選取class為one的<div>父元素下的第最后一個(gè)子元素 |
| :only-child | 選擇每個(gè)父元素的獨(dú)子元素(非獨(dú)子、空集不算) | ?集合元素 | $("div.one :only-child")選取class為one的<div>父元素下僅有一個(gè)元素的元素 |
4. 表單選擇器?
| 選擇器 | 描述 | 返回 | 示例 |
| :enabled | 選取所有可用元素 | ?集合元素 | $("#form1 :enabled")選取id為“form1”的表單內(nèi)的所有可用元素 |
| :disabled | 選取所有不可用元素 | ?集合元素 | $("#form1 :disabled")選取id為“form1”的表單內(nèi)的所有不可用元素 |
| :checked | 選取所有被選中的元素(單選框、復(fù)選框) | ?集合元素 | $("input :checked")選取所有被選中的<input>元素 |
| :selected | 選擇所有被選中的選項(xiàng)元素(下拉列表) | ?集合元素 | $("select option:selected")選取所有被選中的選項(xiàng)元素 |
總結(jié)
以上是生活随笔為你收集整理的jQuery学习笔记(简介,选择器)的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 【jQuery插件】用jQuery Ma
- 下一篇: 关于null和undefined