jQuery中文入門指南(一) -Hello jQuery
在做所有事情之前,我們要讓jQuery讀取和處理文檔的DOM,必須盡可能快地在DOM載入后開始執行事件,所以,我們用一個ready事件作為處理HTML文檔的開始.看看我們打開的custom.js這個文件,里面已經準備好了:
$(document).ready(function() { // do stuff when DOM is ready });
放一個簡單的alert事件在需要等DOM完成載入,所以我們把任務稍稍變復雜一點:在點擊任何一個鏈接時顯示一個alert.
$(document).ready(function() { $("a").click(function() { alert("Hello world!"); }); });
這樣在你點擊頁面的一個鏈接時都會觸發這個"Hello world"的提示。
(譯者Keel注:請照此代碼修改custom.js并保存,然后用瀏覽器打開starterkit.html觀察效果。)
讓我們看一下這些修改是什么含義。$("a") 是一個jQuery選擇器(selector),在這里，它選擇所有的a標簽（譯者Keel注：即<a></a>），$號 是 jQuery “類”(jQuery "class")的一個別稱，因此$()構造了一個新的jQuery 對象(jQuery object)。函數 click() 是這個jQuery對象的一個方法，它綁定了一個單擊事件到所有選中的標簽(這里是所有的a標簽),并在事件觸發時執行了它所提供的alert方法.
這里有一個擬行相似功能的代碼:
<a href="#" onclick="alert('Hello world')">Link</a>
不同之處很明顯,用jQuery不需要在每個a標簽上寫onclick事件,所以我們擁有了一個整潔的結構文檔(HTML)和一個行為文檔(JS),達到了將結構與行為分開的目的,就像我們使用CSS追求的一樣.
下面我們會更多地了解到選擇器與事件.
全站熱搜
留言列表
