var external_links = document.getElementById('external_links'); var links = external_links.getElementsByTagName('a'); for (var i=0;i links.length;i++) { var link = links.item(i); link.onclick = function() { return confirm('You are going to visit: ' + this.href); }; }
$('#external_links a').click(function() { return confirm('You are going to visit: ' + this.href); });
是不是很神奇？ 使用 jQuery，您可以把握問題的要點，只讓代碼實現(xiàn)您想要的功能，而省去了一些繁瑣的過程。無需對元素進行循環(huán)，click() 函數(shù)將完成這些操作。同樣也不需要進行多個 DOM 腳本調(diào)用。您只需要使用一個簡短的字符串對所需的元素進行定義即可。 理解這一代碼的工作原理可能會有一點復(fù)雜。首先，我們使用了 $() 函數(shù) —— jQuery 中功能最強大的函數(shù)。通常，我們都是使用這個函數(shù)從文檔中選擇元素。在本例中，一個包含有一些層疊樣式表（Cascading Style Sheet，CSS）語法的字符串被傳遞給函數(shù)，然后 jQuery 盡可能高效地把這些元素找出來。 如果您具備 CSS 選擇器的基本知識，那么應(yīng)該很熟悉這些語法。在 清單 2 中，#external_links 用于檢索 id 為 external_links 的元素。a 后的空格表示 jQuery 需要檢索 external_links 元素中的所有 a> 元素。用英語說起來非常繞口，甚至在 DOM 腳本中也是這樣，但是在 CSS 中這再簡單不過了 $() 函數(shù)返回一個含有所有與 CSS 選擇器匹配的元素的 jQuery 對象。jQuery 對象 類似于數(shù)組，但是它附帶有大量特殊的 jQuery 函數(shù)。比方說，您可以通過調(diào)用 click 函數(shù)把 click 處理函數(shù)指定給 jQuery 對象中的所有元素。 還可以向 $() 函數(shù)傳遞一個元素或者一個元素數(shù)組，該函數(shù)將把這些元素封裝在一個 jQuery 對象中。您可能會想要使用這個功能將 jQuery 函數(shù)用于一些對象，比方說 window 對象。例如，我們通常會像下面這樣把函數(shù)分配給加載事件： window.onload = function() { // do this stuff when the page is done loading };
使用 jQuery 編寫的功能相同的代碼： $(window).load(function() { // run this when the whole page has been downloaded });
您可能有所體會，等待窗口加載的過程是非常緩慢而且令人痛苦的，這是因為必須等整個頁面加載完所有的內(nèi)容，包括頁面上所有的的圖片。有的時候，您希望首先完成圖片加載，但是在大多數(shù)情況下，您只需加載超文本標志語言（Hypertext Markup Language，HTML）就可以了。通過在文檔中創(chuàng)建特殊的 ready 事件，jQuery 解決了這個問題，方法如下： $(document).ready(function() { // do this stuff when the HTML is all ready });
這個代碼圍繞 document 元素創(chuàng)建了一個 jQuery 對象，然后建立一個函數(shù)，用于在 HTML DOM 文檔就緒的時候調(diào)用實例?？梢愿鶕?jù)需要任意地調(diào)用這個函數(shù)。并且能夠以真正的 jQuery 格式，使用快捷方式調(diào)用這個函數(shù)。這很簡單，只需向 $() 函數(shù)傳遞一個函數(shù)就可以了： $(function() { // run this when the HTML is done downloading });
當 success 回調(diào)函數(shù)返回 XML 文檔后，您可以使用 jQuery 檢索這個 XML 文檔，其方式與檢索 HTML 文檔是一樣的。這樣使得處理 XML 文檔變得相當?shù)厝菀祝⑶野褍?nèi)容和數(shù)據(jù)集成到了您的 Web 站點里面。清單 6 顯示了 success 函數(shù)的一個擴展，它為 XML 中的每個 item> 元素都添加了一個列表項到 Web 頁面中。 清單 6. 使用 jQuery 處理 XML 文檔 success: function(xml){ $(xml).find('item').each(function(){ var item_text = $(this).text(); $('li>/li>') .html(item_text) .appendTo('ol'); }); }
為 HTML 添加動畫 可以使用 jQuery 處理基本的動畫和顯示效果。animate() 函數(shù)是動畫代碼的核心，它用于更改任何隨時間變化的數(shù)值型的 CSS 樣式值。比方說，您可以變化高度、寬度、不透明度和位置。還可以指定動畫的速度，定為毫秒或者預(yù)定義的速度：慢速，中速或快速。 下面是一個同時變化某個元素高度和寬度的示例。請注意，這些參數(shù)沒有開始值，只有最終值。開始值取自元素的當前尺寸。同時我也附加了一個回調(diào)函數(shù)。 $('#grow').animate({ height: 500, width: 500 }, "slow", function(){ alert('The element is done growing!'); });
DOM 腳本和事件處理 或許 jQuery 最擅長的就是簡化 DOM 腳本和事件處理。遍歷和處理 DOM 非常簡單，同時附加、移除和調(diào)用事件也十分容易，且不像手動操作那樣容易出錯。 從本質(zhì)上說，jQuery 可以使 DOM 腳本中的常用操作變得更加容易。您可以創(chuàng)建元素并且使用 append() 函數(shù)把它們與其它的一些元素鏈接到一起，使用 clone() 復(fù)制元素，使用 html() 設(shè)置內(nèi)容，使用 empty() 函數(shù)刪除內(nèi)容，使用 remove() 函數(shù)刪除所有的元素，即便是使用 wrap() 函數(shù)，用其他元素將這些元素包裝起來。 通過遍歷 DOM，一些函數(shù)可以用于更改 jQuery 對象本身的內(nèi)容?？梢垣@得元素所有的 siblings()、parents() 和 children()。還可以選擇 next() 和 prev() 兄弟元素。find() 函數(shù)或許是功能最強大的函數(shù)，它允許使用 jQuery 選擇器搜索 jQuery 對象中元素的后代元素。 如果結(jié)合使用 end() 函數(shù)，那么這些函數(shù)將變得更加強大。這個函數(shù)的功能類似于 undo 函數(shù)，用于返回到調(diào)用 find() 或 parents() 函數(shù)（或者其它遍歷函數(shù)）之前的 jQuery 對象。 如果配合方法鏈接（method chaining）一起使用，這些函數(shù)可以使復(fù)雜的操作看上去非常簡單。清單 7 顯示了一個示例，其中包含有一個登錄表單并處理了一些與之有關(guān)的元素。 清單 7. 輕松地遍歷和處理 DOM $('form#login') // hide all the labels inside the form with the 'optional' class .find('label.optional').hide().end() // add a red border to any password fields in the form .find('input:password').css('border', '1px solid red').end() // add a submit handler to the form .submit(function(){ return confirm('Are you sure you want to submit?'); });
