溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
jQuery的強大自不必我多言，我想是時候的來認真的學習一下它了，不說廢話了，一起來領會jQuery的偉大吧！
導航：
| 一 | 基本原理 |
| 二 | jQuery包裝器 |
| 三 | 實用工具函數 |
| 四 | 文檔就緒處理程序 |
| 五 | 創建DOM元素 |
| 六 | 擴展jQuery |
| 七 | jQuery和其他庫 |
一、基本原理
1、jQuery核心部分就是如何從HTML頁面里獲取元素并對其進行操作。即選擇器（selector）。
2、選擇器是通過元素的特性或元素在HTML文檔中的位置去描述元素組。
二、jQuery包裝器
當收集一組元素時，可以使用的簡單語法如下：
$(selector) 或者 jQuery(selector)
由此可以看出，$()函數是jQuery()函數的別名。“$”剛接觸可能有點奇怪，但是你很快就會喜歡上它的簡潔。
舉個例子：為了獲取嵌套在<p>元素內的一組鏈接（<a>元素）。jQuery語句如下：
$("p a");$()函數返回特別的JavaScript對象，它包含著與選擇器相匹配的DOM元素的數組。
下面說一個比較好玩的東西，就是jQuery鏈。
舉個例子：讓帶有CSS類star的所有<div>元素呈現淡出效果，同時再給它們添加一個新的CSS類big。jQuery語句如下：
$("div.star").fadeOut().addClass("big");說明一下，fadeOut()是jQuery自帶的淡出效果的方法，addClass()是jQuery的添加類方法。
我想說的這條語句的重點是：選擇一次，可以進行多次不同的操作。這就是jQuery鏈，它可以無限延續。之所以可以這樣做是因為，當$()完成一個操作（比如淡出操作）時，它們返回相同的一組元素，提供給下一個操作。
jQuery選擇器還有更加高級的用法，下面舉幾個例子大家體會一下：
（1）選擇所有偶數的<p>元素
$("p:even"); even指偶數的意思（2）選擇每個表格的第一行
$("tr:nth-child(1)");（3）選擇作為<body>直接子節點的<div>
$("body > div");（4）選擇指向PDF文件的鏈接
$("a[href$=pdf]");（5）選擇作為<body>直接子節點、包含鏈接（<a>元素）的<div>
$("body > div:has(a)");三、jQuery實用工具函數
$()函數不光是能作為選擇器使用，它還有另外的一個職責就是作為幾個通用的實用工具的命名空間前綴。通常我們可能很少會用到，因為通過選擇器的使用，就覺得jQuery已經很強大了，不過作為jQuery的一部分，有必要了解一下。
什么是實用工具？舉個例子大家就都會明白。刪除字符串前后空格的實用工具函數，寫法如下：
$.trim(someString);
大家如果覺得$.不得勁，那就把它當成一個類的命名空間就好了，就好像string.一樣的意思，或許用jQuery代替會覺得更加熟悉一些。
jQuery.trim(someString);
雖然被稱作實用工具函數，事實上就把它當成 函數$()的一個方法就好。
四、文檔就緒處理程序
通常頁面在瀏覽器窗口顯示前要經歷兩個步驟：
（1）構建DOM樹
（2）加載圖像和其他外部資源
我們都知道如果使用JavaScript對頁面元素進行操作的時候，必須要在瀏覽器把HTML轉換成DOM樹之后。傳統上，window實例的onload處理程序被用于上述上的，語法通常如下：
window.onload = function(){
$("div.star").fadeOut().addClass("big");
}這樣就能在文檔完整地加載之后，執行淡出效果和添加CSS類big。
但是需要注意一點的是這并不是最好的時機，因為onload的執行不僅是在步驟（1）之后，它也在步驟（2）之后，這就會導致一個問題，如果圖像或外部資源比較大的時候，我們不僅要等待加載的這段時間，甚至我們會看到頁面到我們腳本執行的效果的延時。如果是一個沒什么耐心的用戶，可能還沒等資源加載完成，就已經把頁面關掉了，那也就看不到你的“效果”了。
所以jQuery提供了我們一個簡單的方法，它可以在一個完美的時機去展示我們的效果。下面我們來看看它是什么
$(document).ready(function() {
$("div.star").fadeOut().addClass("big");
});把“效果”寫在這個函數里，只要等到步驟（1）結束之后，我們的代碼就會被激活。上述代碼也可以簡寫成：
$(function() {
$("div.star").fadeOut().addClass("big");
});還有一個是$()比window.onload好的地方，$()可以同一個HTML文檔中多次使用，而瀏覽器則會按照函數在頁面中定義的先后順序一一執行。而window.onload機制只能使用一次，如果我們引入任何第三方代碼里采用了onload機制，就會很麻煩。
五、創建DOM元素
通過給$()函數傳遞包含HTML標記的字符串，可以即時創建相應的DOM元素。
舉個例子：新建段落元素。寫法如下：
$("<p>Hello World</p>");但是只創建了一個元素，但并不知道它的層次結構（即它的位置），看起來其作用不大，所以通常會在創建DOM元素之后直接對其安排位置。
舉個例子：在id="paragraph"的<p>元素后新建一個段落元素。寫法如下：
$("<p>Hello World</p>").insertAfter("#paragraph");六、擴展jQuery
關于擴展jQuery讓我有點熱血沸騰，我們都知道沒有哪個庫能設法將每個人需要的東西都預先準備好。所以jQuery核心庫里只為我們準備了大多數頁面作者需要的功能（當然，這也是相當多的功能了）。
下面舉個例子展示一下擴展jQuery有多爽，我們做一個“用于禁用一組表單元素的函數”。
$("form#myform input.special").disable();因為jQuery并沒有提供disable()這樣的方法，所以我們要擴展，基本慣用語法如下：
$.fn.disable = function(){
return this.each(function() {
if(typeof this.disabled != "undefined"){
this.disabled = true;
}
});
}突然看到這么一堆亂糟糟的大家別怕，下面一一進行解釋，等大家繼續學習，這些就很easy了，反正我是這樣想的，我也是在這正邊看邊學，感覺看明白了這塊的知識點才敢表上來的。
首先，$.fn.disable表示我們用名為disable的函數來擴展$包裝器。大家有沒有發現$.fn屬于一個實用工具函數，第2行的this表示將被操作的包裝DOM元素集合（其實就是所有滿足“form#myform input.special”這一條件的DOM元素集合）。
然后，each()方法就是遍歷this集合里的每個元素，第3行的this表示的是當前遍歷到的元素，它不是集合，是指特定的這一DOM元素。如果這塊大家有點沒理解也不要慌，多寫寫慢慢就懂了。
最后，if條件句里表示當前遍歷到的這個元素有沒有disabled特性，如果有，將其值置為true。
這樣我們就把一個擴展jQuery寫好了。同時它也支持jQuery命令鏈的。
$("form#myform input.special").disable().addClass("moreSpecial");這里面其實大家仔細琢磨會發現一些有趣的東西，現在可能是一腦子漿糊，不過繼續學習就Ok啦！
七、jQuery和其他庫
jQuery可以說是一個和平使者，即便其本身很強大，但也從來未想過獨霸天下，創造者也是本著滿足用戶需求，但是由于其別名$，有時還是與其他庫造成小小的沖突，比如Prototype庫（我個人是不知道其是什么東東）。不過jQuery還是把這個問題給解決了，那就是使用另一個實用工具函數noConflict()來消除沖突。
jQuery.noConflict();
它會把$還原到非jQuery庫所定義的含義。
關于jQuery的學習系列筆記我寫的會比較簡潔，更注重的是快速上手使用，當然，非常重要的知識點我還是會專門指出的。
PS：歡迎留言交流，24小時內必有回復。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
