《jQuery實戰(zhàn)(第二版)》讀書筆記

第一部分 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??!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計者無需花費時間糾纏JS復(fù)雜的高級特性。 1....
    LaBaby_閱讀 1,276評論 0 1
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計者無需花費時間糾纏JS復(fù)雜的高級特性。 1....
    LaBaby_閱讀 1,508評論 0 2
  • 原文鏈接 http://blog.poetries.top/2016/10/20/review-jQuery 關(guān)注...
    前端進階之旅閱讀 16,953評論 18 503
  • 有多少愛情與做愛無關(guān) 有多少婚姻與性別有關(guān) 在霧里 在云里 你在紛飛的花瓣中起舞 我為你束起長發(fā) 你說結(jié)婚吧 和...
    幾年白光閱讀 217評論 0 0
  • Git基礎(chǔ) github—New repository—Repository name:blog—README—C...

友情鏈接更多精彩內(nèi)容