var external_links = document.getElementById(‘external_links‘);$()函數返回一個(gè)包含與css選擇符匹配的所有元素的一個(gè)jQuery對象. jQuery對象的概念就像是數組,但是它可能含有許多jQuery函數. 舉例來(lái)說(shuō),你可以調用click函數來(lái)綁定一個(gè)click事件響應到j(luò )Query對象中的每個(gè)元素上.
var links = external_links.getElementsByTagName(‘a(chǎn)‘);
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);
};
}
如果使用jQuery的話(huà)實(shí)現如下：
Listing 2. DOM scripting with jQuery
$(‘#external_links a‘).click(function() {
return confirm(‘You are going to visit: ‘ + this.href);
});
很驚訝，是吧？使用jQuery的話(huà)，你可以很快找到關(guān)鍵點(diǎn)，并且只需要表達你需要表達的，
而不需要羅里羅嗦。不需要對這些元素進(jìn)行循環(huán)，click()函數可以處理好這一切。而且你不要謝太多的操作DOM的代碼，
你需要的僅僅是使用很少的字符定義你要找的那個(gè)元素。
來(lái)看一下這段代碼是如何工作的，有點(diǎn)小技巧。首先，看到$()函數--jQuery里最有用的最強大的函數.大部分情況下,
你使用這個(gè)函數從文檔中選擇元素.在這個(gè)例子中,使用這個(gè)函數傳遞帶有一些級聯(lián)樣式表(Cascading Style Sheets,CSS)
語(yǔ)法的字符串,jQuery可以很方便的找到這個(gè)元素.
如果你懂一點(diǎn)基本的CSS選擇符的只是,我想這個(gè)語(yǔ)法應該看起來(lái)相當熟悉.在Listing2中,#external_links用來(lái)尋找帶有id為
external_links的元素.接下來(lái)的空格表示jQuery要找到在#external_links元素內的所有的<a>元素.用口語(yǔ)開(kāi)表達的話(huà)有點(diǎn)費勁--
用DOM腳本來(lái)寫(xiě)也挺麻煩,不過(guò),在CSS里,沒(méi)有比這個(gè)更簡(jiǎn)單的了.
window.onload = function() {
// do this stuff when the page is done loading
};如果使用jQuery的話(huà),你可以這樣寫(xiě):$(window).load(function() {
// run this when the whole page has been downloaded
});
如你所知,等待一個(gè)窗口的加載是異常痛苦的,因為必須加載整個(gè)頁(yè)面,包括頁(yè)面上所有的圖片. 某些情況下,你需要首先加載圖片,
但是大部分時(shí)候,你可能只需要看到一下超文本的標記(HTML).jQuery通過(guò)在文檔上創(chuàng )建一個(gè)很特殊的事件ready來(lái)解決這個(gè)問(wèn)題,
使用方法如下:
$(document).ready(function() {
// do this stuff when the HTML is all ready
});
這段代碼創(chuàng )建一個(gè)document元素的jQuery對象, 然后當html DOM文檔準備完畢后調用此實(shí)例. 你可以無(wú)限次的調用這個(gè)函數. 另外,$(function() {
// run this when the HTML is done downloading
});到現在位置,我已經(jīng)向你展示了三種不同的使用$()函數的方法.第四種方式, 你可以使用一個(gè)字符串創(chuàng )建一個(gè)元素. 結果是一個(gè)包含此元素的jQuery對象. Listing3展示了一個(gè)增加一段到頁(yè)面上的例子:正如你從上面的例子中看到的一樣,jQuery還有一個(gè)很強大的功能就是方法鏈(method chaining), 每次你對一個(gè)jQuery對象調用一個(gè)方法,這個(gè)方法將同樣返回一個(gè)jQuery對象. 這就是說(shuō)如果你需要對一個(gè)jQuery對象調用多個(gè)方法的話(huà), 你可以不必重復寫(xiě)css選擇符,可以像這樣:
$(‘<p></p>‘)
.html(‘Hey World!‘)
.css(‘background‘, ‘yellow‘)
.appendTo("body");
$(‘#message‘).css(‘background‘, ‘yellow‘).html(‘Hello!‘).show();通常,你可能需要向服務(wù)器端的頁(yè)面傳遞一些參數. 你可能猜到了, 使用jQuery來(lái)實(shí)現的話(huà)會(huì )十分簡(jiǎn)單.你可以選擇使用$.post()或者$.get(), 當然要根據你的具體需要. 如果需要, 你可以傳遞一個(gè)可選的數據對象和一個(gè)回調函數.Listing4是一個(gè)發(fā)送數據以及使用回調函數的簡(jiǎn)單例子:
3.jQuery讓Ajax變得異常簡(jiǎn)單
使用jQuery,Ajax恐怕不能變得再簡(jiǎn)單了. jQuery有一系列的函數,可以使簡(jiǎn)單的事情變得真正簡(jiǎn)單,讓復雜的事情也能變得盡可能
的簡(jiǎn)單.
Ajax的一個(gè)一般用法就是加載一段html代碼到頁(yè)面上的某一區域. 要實(shí)現這個(gè),你只要簡(jiǎn)單的選中這個(gè)元素,然后使用load()函數.
下面是個(gè)例子,用來(lái)更新一些統計信息.
$(‘#stats‘).load(‘stats.html‘);
如果你真的想要一些復雜的Ajax代碼,那就是用$.ajax()函數. 你可以指定數據類(lèi)型為xml, html, script或者json, jQuery 會(huì )為你自動(dòng)準備好結果一遍你的回調函數能夠立即使用這些數據. 你還可以設定
$.post(‘save.cgi‘, {
text: ‘my string‘,
number: 23
}, function() {
alert(‘Your data has been saved.‘);
});
beforeSend,error, success, 以及complete 回調函數來(lái)給用戶(hù)一些ajax體驗的更多提示信息. 另外,還有一些參數,可以讓你設置ajax請求的超時(shí)時(shí)間,或者一個(gè)頁(yè)面的"最后更改"狀態(tài). Listing5展示了一個(gè)獲取xml文檔并使用我上面提到的一些參數的簡(jiǎn)單例子:當你成功的獲得xml反饋的時(shí)候, 你可以使用jQuery來(lái)遍歷xml文檔,就像你操作html的方式一樣.這使操作一個(gè)xml文件以及整合內容到頁(yè)面上變得十分的簡(jiǎn)單. Listing6 擴展了success函數,根據xml文檔里的每個(gè)<item>在頁(yè)面上增加一個(gè)了list(列表)條目.
$.ajax({
url: ‘document.xml‘,
type: ‘GET‘,
dataType: ‘xml‘,
timeout: 1000,
error: function(){
alert(‘Error loading XML document‘);
},
success: function(xml){
// do something with xml
}
});
success: function(xml){
$(xml).find(‘item‘).each(function(){
var item_text = $(this).text();
$(‘<li></li>‘)
.html(item_text)
.appendTo(‘ol‘);
});
}
聯(lián)系客服
