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

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

創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)與策劃設(shè)計(jì),重慶網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十余年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:重慶等地區(qū)。重慶做網(wǎng)站價(jià)格咨詢:13518219792

導(dǎo)航：

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

一、基本原理

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

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

二、jQuery包裝器

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

$(selector)
或者
jQuery(selector)

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

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

$("p a");

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

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

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

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

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

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

jQuery選擇器還有更加高級(jí)的用法，下面舉幾個(gè)例子大家體會(huì)一下：

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

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

（2）選擇每個(gè)表格的第一行

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

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

$("body > div");

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

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

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

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

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

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

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

$.trim(someString);

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

jQuery.trim(someString);

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

四、文檔就緒處理程序

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

六、擴(kuò)展jQuery

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

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

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

因?yàn)閖Query并沒有提供disable()這樣的方法，所以我們要擴(kuò)展，基本慣用語法如下：

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

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

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

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

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

這樣我們就把一個(gè)擴(kuò)展jQuery寫好了。同時(shí)它也支持jQuery命令鏈的。

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

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

七、jQuery和其他庫

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

jQuery.noConflict();

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

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

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

分享文章：jQuery學(xué)習(xí)系列筆記（一）
瀏覽路徑：http://muchs.cn/article46/jcpshg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、電子商務(wù)、自適應(yīng)網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、定制網(wǎng)站、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站優(yōu)化排名