第一部分 jQuery核心
1假残、jQuery基礎(chǔ)
第一章總結(jié)了jquery的大致功能米间,基本原理滩援,使用方式栅隐。
point:
(1)、引入:<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js">
(2)、強(qiáng)大的選擇器:var checkedValue = $('[name="someRadioGroup"]:checked').val();用于選擇分組名為someRadioGroup的單選按鈕中被選中的按鈕的值租悄。更高級(jí)選擇器:$("p:even")選擇所有偶數(shù)行的p元素谨究、$("tr:nth-child(1)")選擇每個(gè)表格的第一行元素、$("body > div:has(a)")選擇body中的直接子節(jié)點(diǎn)中包括a標(biāo)簽的div元素泣棋。
(3)胶哲、實(shí)用函數(shù)。jQuery會(huì)提供一些實(shí)用函數(shù)潭辈,例如trim等便于編寫jQuery插件等鸯屿。
(4)、文檔就緒處理機(jī)制把敢。由于window.onload = function () { // 觸發(fā)腳本}該方法需要將文檔完全加載完成寄摆,包括外部資源之后才可以執(zhí)行腳本。而使用$(document).ready(function() { //加載完畢后觸發(fā)的腳本} )修赞,則是在DOM樹加載完畢之后就可以觸發(fā)婶恼,頁(yè)面加載延遲問題得以優(yōu)化。
(5)柏副、創(chuàng)建DOM元素勾邦。$("<p>HI<p>").insertAfter("#followMe")可通過$()函數(shù)直接創(chuàng)建,并通過insertAfter函數(shù)將新創(chuàng)建的DOM元素放在指定元素后。
(6)搓扯、拓展jQuery检痰。為了保持功能的簡(jiǎn)潔和高可用性包归,jQuery并未提供滿足用戶所有需求的函數(shù)锨推,不過為用戶提供了自定義函數(shù)方法來拓展$包裝器。
$.fn.disable= function() { //自定義函數(shù)實(shí)現(xiàn) ?
? ? ? ? return this.each( function () {
? ? ? ? ? ? ? if ( this.disable != null) this.disable = true;
? ? ? ? ? ? ? //XXX != null 會(huì)正確的測(cè)試null和undefined
? ? ? ? });
}公壤。
返回each方法的執(zhí)行結(jié)果(即包裝器)换可,保持jQuery的函數(shù)特性,支持鏈?zhǔn)讲僮鳌?/p>
(7)厦幅、jQuery與其他庫(kù)共存沾鳄。當(dāng)$或者jQuery全局變量發(fā)生沖突的時(shí)候,調(diào)用jQuery.noConflict()函數(shù)确憨。
2译荞、選擇要操作的元素
第二章玩轉(zhuǎn)選擇器,從選擇器到創(chuàng)建新元素再到管理包裝集休弃。
(1)吞歼、$(selector)或$(selector,'div#sampleDOM'),第一個(gè)參數(shù)為選擇器塔猾,第二個(gè)參數(shù)為操作的上下文篙骡,如果省略的話,上下文為" * "即整個(gè)document。例中表示的是在id為sampleDOM的div元素的子集中選擇符合選擇器selector的元素糯俗。
(2)尿褪、選擇器。標(biāo)簽選擇器li得湘,id選擇器#id杖玲,類選擇器.class,按照DOM之間層級(jí)關(guān)系選擇淘正,以及自定義選擇器等天揖。
a、其中基礎(chǔ)選擇器有:
* ? ? ? ?匹配所有元素跪帝; ?
E ? ? ? 匹配標(biāo)簽名為E的所有元素今膊,如$("div");
E? F? 匹配E的子節(jié)點(diǎn)中標(biāo)簽名為F的所有元素伞剑,如$("div p")斑唬;
E>F? 匹配E的直接子節(jié)點(diǎn)中標(biāo)簽名為F的所有元素,如$("div>p")黎泣;
E+F? 匹配E后邊的第一個(gè)兄弟元素中標(biāo)簽名為F的所有元素恕刘,如$("li+li");
E~F? 匹配E后邊的所有兄弟元素中標(biāo)簽名為F的所有元素抒倚,如$("li~li")褐着;
E .C? 匹配E的所有元素中類名為C的元素,如$("div .sampleClass")托呕;
E #I? 匹配E的所有元素中ID為I的元素含蓉,如$("div #ID");
E[A]? 匹配E的所有所有元素中含有A屬性的元素项郊,如$("a[href]")馅扣;
E[A=V]? 匹配E的所有元素中A屬性的值為V的元素,如$("a[href='url']")着降;
E[A^=V] 匹配E的所有元素中A屬性值以V開頭的元素差油,如$("a[href^='my']");
E[A$=V] 匹配E的所有元素中A屬性值以V結(jié)尾的元素任洞,如$("a[href$='.html']")蓄喇;
E[A!=V] 匹配E的所有元素中A屬性值以V結(jié)尾的元素,如$("a[href!='url']")交掏;
E[A*=V] 匹配E的所有元素中A屬性值以V結(jié)尾的元素妆偏,如$("a[href*='jquery']");
b耀销、通過位置選擇:
:even楼眷,:odd铲汪,:first,:last罐柳,:first-child掌腰,:last-child ? 如字面意思;
:nth-child(n) ?匹配上下文中的第n個(gè)子節(jié)點(diǎn)张吉,可以拓展為函數(shù)式例如:nth-child(5n+1) 齿梁;
:eq(n) ?第n個(gè)元素,:gt(n) ?第n個(gè)元素之后的(不包含n)肮蛹,:lt(n) 第n個(gè)元素之前的(不包含n)勺择;
注意:nth-child(n)是從1開始計(jì)數(shù),而其他的選擇器是從0開始計(jì)數(shù)伦忠。
c省核、自定義選擇器
:animated ? 選擇處于動(dòng)畫狀態(tài)的元素;
:button ?選擇按鈕元素(包括button以及input中type為submit昆码、reset气忠、button的元素);
:checkbox ? 選擇復(fù)選框元素(input[type = checkbox]) 赋咽;
:checked ? 選擇處于選中狀態(tài)的復(fù)選框或者單選按鈕元素旧噪;
:contains(food) ? 選擇包含文本food的元素;
:disabled / :enabled ? 選擇處于禁用 / 啟用狀態(tài)的元素脓匿;
:file ? 選擇文件輸入元素(input[type = file]);
:has(selector) / not(selector) ? 選擇 至少包含一個(gè) / 沒有包含? ?選擇器選中的元素 ? ?的元素淘钟;
:header ? 選擇標(biāo)題元素 ?<h1>到<h6>;
:hidden / :visible ?選擇隱藏 / 可見元素陪毡;
:image ? 選擇圖片輸入元素(input[type = image])米母;
:input ? ?選擇表單元素(input、select缤骨、textarea爱咬、button);
:parent ? 選擇有子節(jié)點(diǎn)(包含文本)的元素,空元素除外;(是:empty的取反)绊起;
:password ? 選擇口令元素(input[ type = password ]);
:radio ? ?選擇單選框元素(input [ type = radio ])燎斩;
:reset ? ?選擇重置按鈕元素(input[ type = reset ] 或者 button[ type = reset ])虱歪;
:selected ? ?選擇列表中處于選中狀態(tài)下的<option>元素;
:submit? ? 選擇提交按鈕(input [ type = submit]或者button[ type = submit])栅表;
:text ? 選擇文本輸入框(input [ type = text ])笋鄙;
To Be Continue!怪瓶!