溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

jQuery 學(xué)習(xí)系列筆記（一）

發(fā)布時間：2020-05-30 05:39:38 來源：網(wǎng)絡(luò) 閱讀：742 作者：我不會抽煙 欄目：web開發(fā)

jQuery的強大自不必我多言，我想是時候的來認(rèn)真的學(xué)習(xí)一下它了，不說廢話了，一起來領(lǐng)會jQuery的偉大吧！

導(dǎo)航：

一基本原理
二jQuery包裝器
三實用工具函數(shù)
四文檔就緒處理程序
五創(chuàng)建DOM元素
六擴展jQuery
七jQuery和其他庫

一、基本原理

1、jQuery核心部分就是如何從HTML頁面里獲取元素并對其進(jìn)行操作。即選擇器（selector）。

2、選擇器是通過元素的特性或元素在HTML文檔中的位置去描述元素組。

二、jQuery包裝器

當(dāng)收集一組元素時，可以使用的簡單語法如下：

$(selector)
或者
jQuery(selector)

由此可以看出，$()函數(shù)是jQuery()函數(shù)的別名?！?”剛接觸可能有點奇怪，但是你很快就會喜歡上它的簡潔。

舉個例子：為了獲取嵌套在<p>元素內(nèi)的一組鏈接（<a>元素）。jQuery語句如下：

$("p a");

$()函數(shù)返回特別的JavaScript對象，它包含著與選擇器相匹配的DOM元素的數(shù)組。

下面說一個比較好玩的東西，就是jQuery鏈。

舉個例子：讓帶有CSS類star的所有<div>元素呈現(xiàn)淡出效果，同時再給它們添加一個新的CSS類big。jQuery語句如下：

$("div.star").fadeOut().addClass("big");

說明一下，fadeOut()是jQuery自帶的淡出效果的方法，addClass()是jQuery的添加類方法。

我想說的這條語句的重點是：選擇一次，可以進(jìn)行多次不同的操作。這就是jQuery鏈，它可以無限延續(xù)。之所以可以這樣做是因為，當(dāng)$()完成一個操作（比如淡出操作）時，它們返回相同的一組元素，提供給下一個操作。

jQuery選擇器還有更加高級的用法，下面舉幾個例子大家體會一下：

（1）選擇所有偶數(shù)的<p>元素

$("p:even");    even指偶數(shù)的意思

（2）選擇每個表格的第一行

$("tr:nth-child(1)");

（3）選擇作為<body>直接子節(jié)點的<div>

$("body > div");

（4）選擇指向PDF文件的鏈接

$("a[href$=pdf]");

（5）選擇作為<body>直接子節(jié)點、包含鏈接（<a>元素）的<div>

$("body > div:has(a)");

三、jQuery實用工具函數(shù)

$()函數(shù)不光是能作為選擇器使用，它還有另外的一個職責(zé)就是作為幾個通用的實用工具的命名空間前綴。通常我們可能很少會用到，因為通過選擇器的使用，就覺得jQuery已經(jīng)很強大了，不過作為jQuery的一部分，有必要了解一下。

什么是實用工具？舉個例子大家就都會明白。刪除字符串前后空格的實用工具函數(shù)，寫法如下：

$.trim(someString);

大家如果覺得$.不得勁，那就把它當(dāng)成一個類的命名空間就好了，就好像string.一樣的意思，或許用jQuery代替會覺得更加熟悉一些。

jQuery.trim(someString);

雖然被稱作實用工具函數(shù)，事實上就把它當(dāng)成 函數(shù)$()的一個方法就好。

四、文檔就緒處理程序

通常頁面在瀏覽器窗口顯示前要經(jīng)歷兩個步驟：

（1）構(gòu)建DOM樹

（2）加載圖像和其他外部資源

我們都知道如果使用JavaScript對頁面元素進(jìn)行操作的時候，必須要在瀏覽器把HTML轉(zhuǎn)換成DOM樹之后。傳統(tǒng)上，window實例的onload處理程序被用于上述上的，語法通常如下：

window.onload = function(){
    $("div.star").fadeOut().addClass("big");
}

這樣就能在文檔完整地加載之后，執(zhí)行淡出效果和添加CSS類big。

但是需要注意一點的是這并不是最好的時機，因為onload的執(zhí)行不僅是在步驟（1）之后，它也在步驟（2）之后，這就會導(dǎo)致一個問題，如果圖像或外部資源比較大的時候，我們不僅要等待加載的這段時間，甚至我們會看到頁面到我們腳本執(zhí)行的效果的延時。如果是一個沒什么耐心的用戶，可能還沒等資源加載完成，就已經(jīng)把頁面關(guān)掉了，那也就看不到你的“效果”了。

所以jQuery提供了我們一個簡單的方法，它可以在一個完美的時機去展示我們的效果。下面我們來看看它是什么

$(document).ready(function() {
    $("div.star").fadeOut().addClass("big");
});

把“效果”寫在這個函數(shù)里，只要等到步驟（1）結(jié)束之后，我們的代碼就會被激活。上述代碼也可以簡寫成：

$(function() {
    $("div.star").fadeOut().addClass("big");
});

還有一個是$()比window.onload好的地方，$()可以同一個HTML文檔中多次使用，而瀏覽器則會按照函數(shù)在頁面中定義的先后順序一一執(zhí)行。而window.onload機制只能使用一次，如果我們引入任何第三方代碼里采用了onload機制，就會很麻煩。

五、創(chuàng)建DOM元素

通過給$()函數(shù)傳遞包含HTML標(biāo)記的字符串，可以即時創(chuàng)建相應(yīng)的DOM元素。

舉個例子：新建段落元素。寫法如下：

$("<p>Hello World</p>");

但是只創(chuàng)建了一個元素，但并不知道它的層次結(jié)構(gòu)（即它的位置），看起來其作用不大，所以通常會在創(chuàng)建DOM元素之后直接對其安排位置。

舉個例子：在id="paragraph"的<p>元素后新建一個段落元素。寫法如下：

$("<p>Hello World</p>").insertAfter("#paragraph");

六、擴展jQuery

關(guān)于擴展jQuery讓我有點熱血沸騰，我們都知道沒有哪個庫能設(shè)法將每個人需要的東西都預(yù)先準(zhǔn)備好。所以jQuery核心庫里只為我們準(zhǔn)備了大多數(shù)頁面作者需要的功能（當(dāng)然，這也是相當(dāng)多的功能了）。

下面舉個例子展示一下擴展jQuery有多爽，我們做一個“用于禁用一組表單元素的函數(shù)”。

$("form#myform input.special").disable();

因為jQuery并沒有提供disable()這樣的方法，所以我們要擴展，基本慣用語法如下：

$.fn.disable = function(){
    return this.each(function() {
        if(typeof this.disabled != "undefined"){
            this.disabled = true;
        }
    });
}

突然看到這么一堆亂糟糟的大家別怕，下面一一進(jìn)行解釋，等大家繼續(xù)學(xué)習(xí)，這些就很easy了，反正我是這樣想的，我也是在這正邊看邊學(xué)，感覺看明白了這塊的知識點才敢表上來的。

首先，$.fn.disable表示我們用名為disable的函數(shù)來擴展$包裝器。大家有沒有發(fā)現(xiàn)$.fn屬于一個實用工具函數(shù)，第2行的this表示將被操作的包裝DOM元素集合（其實就是所有滿足“form#myform input.special”這一條件的DOM元素集合）。

然后，each()方法就是遍歷this集合里的每個元素，第3行的this表示的是當(dāng)前遍歷到的元素，它不是集合，是指特定的這一DOM元素。如果這塊大家有點沒理解也不要慌，多寫寫慢慢就懂了。

最后，if條件句里表示當(dāng)前遍歷到的這個元素有沒有disabled特性，如果有，將其值置為true。

這樣我們就把一個擴展jQuery寫好了。同時它也支持jQuery命令鏈的。

$("form#myform input.special").disable().addClass("moreSpecial");

這里面其實大家仔細(xì)琢磨會發(fā)現(xiàn)一些有趣的東西，現(xiàn)在可能是一腦子漿糊，不過繼續(xù)學(xué)習(xí)就Ok啦！

七、jQuery和其他庫

jQuery可以說是一個和平使者，即便其本身很強大，但也從來未想過獨霸天下，創(chuàng)造者也是本著滿足用戶需求，但是由于其別名$，有時還是與其他庫造成小小的沖突，比如Prototype庫（我個人是不知道其是什么東東）。不過jQuery還是把這個問題給解決了，那就是使用另一個實用工具函數(shù)noConflict()來消除沖突。

jQuery.noConflict();

它會把$還原到非jQuery庫所定義的含義。


關(guān)于jQuery的學(xué)習(xí)系列筆記我寫的會比較簡潔，更注重的是快速上手使用，當(dāng)然，非常重要的知識點我還是會專門指出的。

PS：歡迎留言交流，24小時內(nèi)必有回復(fù)。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手