第一部分 jQuery核心
1、jQuery基礎(chǔ)
第一章總結(jié)了jquery的大致功能,基本原理,使用方式。
point:
(1)、引入:<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js">
(2)、強大的選擇器:var checkedValue = $('[name="someRadioGroup"]:checked').val();用于選擇分組名為someRadioGroup的單選按鈕中被選中的按鈕的值。更高級選擇器:$("p:even")選擇所有偶數(shù)行的p元素、$("tr:nth-child(1)")選擇每個表格的第一行元素、$("body > div:has(a)")選擇body中的直接子節(jié)點中包括a標簽的div元素。
(3)、實用函數(shù)。jQuery會提供一些實用函數(shù),例如trim等便于編寫jQuery插件等。
(4)、文檔就緒處理機制。由于window.onload = function () { // 觸發(fā)腳本}該方法需要將文檔完全加載完成,包括外部資源之后才可以執(zhí)行腳本。而使用$(document).ready(function() { //加載完畢后觸發(fā)的腳本} ),則是在DOM樹加載完畢之后就可以觸發(fā),頁面加載延遲問題得以優(yōu)化。
(5)、創(chuàng)建DOM元素。$("<p>HI<p>").insertAfter("#followMe")可通過$()函數(shù)直接創(chuàng)建,并通過insertAfter函數(shù)將新創(chuàng)建的DOM元素放在指定元素后。
(6)、拓展jQuery。為了保持功能的簡潔和高可用性,jQuery并未提供滿足用戶所有需求的函數(shù),不過為用戶提供了自定義函數(shù)方法來拓展$包裝器。
$.fn.disable= function() { //自定義函數(shù)實現(xiàn) ?
? ? ? ? return this.each( function () {
? ? ? ? ? ? ? if ( this.disable != null) this.disable = true;
? ? ? ? ? ? ? //XXX != null 會正確的測試null和undefined
? ? ? ? });
}。
返回each方法的執(zhí)行結(jié)果(即包裝器),保持jQuery的函數(shù)特性,支持鏈式操作。
(7)、jQuery與其他庫共存。當$或者jQuery全局變量發(fā)生沖突的時候,調(diào)用jQuery.noConflict()函數(shù)。
2、選擇要操作的元素
第二章玩轉(zhuǎn)選擇器,從選擇器到創(chuàng)建新元素再到管理包裝集。
(1)、$(selector)或$(selector,'div#sampleDOM'),第一個參數(shù)為選擇器,第二個參數(shù)為操作的上下文,如果省略的話,上下文為" * "即整個document。例中表示的是在id為sampleDOM的div元素的子集中選擇符合選擇器selector的元素。
(2)、選擇器。標簽選擇器li,id選擇器#id,類選擇器.class,按照DOM之間層級關(guān)系選擇,以及自定義選擇器等。
a、其中基礎(chǔ)選擇器有:
* ? ? ? ?匹配所有元素; ?
E ? ? ? 匹配標簽名為E的所有元素,如$("div");
E? F? 匹配E的子節(jié)點中標簽名為F的所有元素,如$("div p");
E>F? 匹配E的直接子節(jié)點中標簽名為F的所有元素,如$("div>p");
E+F? 匹配E后邊的第一個兄弟元素中標簽名為F的所有元素,如$("li+li");
E~F? 匹配E后邊的所有兄弟元素中標簽名為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個子節(jié)點,可以拓展為函數(shù)式例如:nth-child(5n+1) ;
:eq(n) ?第n個元素,:gt(n) ?第n個元素之后的(不包含n),:lt(n) 第n個元素之前的(不包含n);
注意:nth-child(n)是從1開始計數(shù),而其他的選擇器是從0開始計數(shù)。
c、自定義選擇器
:animated ? 選擇處于動畫狀態(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) ? 選擇 至少包含一個 / 沒有包含? ?選擇器選中的元素 ? ?的元素;
:header ? 選擇標題元素 ?<h1>到<h6>;
:hidden / :visible ?選擇隱藏 / 可見元素;
:image ? 選擇圖片輸入元素(input[type = image]);
:input ? ?選擇表單元素(input、select、textarea、button);
:parent ? 選擇有子節(jié)點(包含文本)的元素,空元素除外;(是: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??!