|
|
1．jQuery GO
jQuery 提供了功能強大的讀取和處理文檔DOM的方式,為動態操作文檔DOM提供了方便。
復制代碼 代碼如下:
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});
單擊文檔中任一個連接都會觸發alert() 事件
$號是 jQuery類的一個別稱，因此$()構造了一個新的jQuery 對象。函數 click() 是這個jQuery對象的一個方法，它綁定了一個單擊事件到所有選中的標簽(這里是所有的a標簽),并在事件觸發時執行了它所提供的alert方法. 這樣的使用編碼更有結構與行為分開的感覺。
2．選擇器和事件
jQuery提供兩種方式來選擇html的elements，第一種是用CSS和Xpath選擇器聯合起來形成一個字符串來傳送到jQuery的構造器（如：$("div > ul a")）；第二種是用jQuery對象的幾個methods(方法)。這兩種方式還可以聯合起來混合使用
復制代碼 代碼如下:
<ul id=”orderedlist”>
<li>食品</li>
<li>服裝</li>
<li>電子</li>
</ul>
使用jQuery 查找文檔中的ul如下：取代js document.getElementById(‘orderlist');
復制代碼 代碼如下:
$(document).ready(function() {
$("#orderedlist").addClass("red");
});
$(“#..”)的方式可以找到指定ID的元素。
為其子節點添加樣式，如下：
復制代碼 代碼如下:
$(document).ready(function() {
$("#orderedlist > li").addClass("blue");
});
在鼠標移到或移開<li>項時樣式切換,如下：
復制代碼 代碼如下:
$(document).ready(function() {
$("#orderedlist li:last").hover(function() {
$(this).addClass("green");
}, function() {
$(this).removeClass("green");
});
});
$(#orderedlist li) 與 $(“#orderedlist > li”) 的區別，前者是父元素下所有匹配的子元素，后都僅是其子元素中匹配的元素。
復制代碼 代碼如下:
$(document).ready(function() {
$("#orderedlist").find("li").each(function(i) {
$(this).html( $(this).html() + " BAM! " + i );
});
});
find() 讓你在已經選擇的element中作條件查找,因此 $("#orderedlist).find("li") 就像 $("#orderedlist li")一樣。each()方法迭代了所有的li，并可以在此基礎上作更多的處理。 大部分的方法,如addClass(), 都可以用它們自己的 each() 。在這個例子中, html()用來獲取每個li的html文本, 追加一些文字，并將之設置為li的html文本
一個ajax 方式提交后的重置表單的操作，如下：
復制代碼 代碼如下:
$(document).ready(function() {
// use this to reset a single form
$("#reset").click(function() {
$("#form")[0].reset();
});
});
當然可以重置個表單
復制代碼 代碼如下:
$(document).ready(function() {
// use this to reset several forms at once
$("#reset").click(function() {
$("form").each(function() {
this.reset();
});
});
});
過濾選擇器
還有一個你可能要面對的問題是不希望某些特定的元素被選擇。jQuery 提供了filter() 和not() 方法來解決這個問題。 filter()以過濾表達式來減少不符合的被選擇項, not()則用來取消所有符合過濾表達式的被選擇項. 考慮一個無序的list，你想要選擇所有的沒有ul子元素的li元素。
復制代碼 代碼如下:
$(document).ready(function() {
$("li").not("[ul]").css("border", "1px solid black");
});
上面代碼中的[expression] 語法是從XPath而來，可以在子元素和屬性(elements and attributes)上用作過濾器，比如你可能想選擇所有的帶有name屬性的鏈接:
復制代碼 代碼如下:
$(document).ready(function() {
$("a[name]").background("#eee"); //原文為“$("a[@name]").background("#eee");”在jQuery1.2及以上版本中,@符號應該去除
});
更常見的情況是以name來選擇鏈接，你可能需要選擇一個有特點href屬性的鏈接，這在不同的瀏覽器下對href的理解可能會不一致，所以我們的部分匹配("*=")[包含]的方式來代替完全匹配("=")：
復制代碼 代碼如下:
$(document).ready(function() {
$("a[href*=/content/gallery]").click(function() {
// do something with all links that point somewhere to /content/gallery
});
});
到現在為止，選擇器都用來選擇子元素或者是過濾元素。另外還有一種情況是選擇上一個或者下一個元素，比如一個FAQ的頁面，答案首先會隱藏，當問題點擊時，答案顯示出來，jQuery代碼如下： 復制代碼 代碼如下:
$(document).ready(function() {
$('#faq').find('dd').hide().end().find('dt').click(function() {
var answer = $(this).next();
if (answer.is(':visible')) {
answer.slideUp();
} else {
answer.slideDown();
}
});
});
這里我們用了一些鏈式表達法來減少代碼量，而且看上去更直觀更容易理解。像'#faq' 只選擇了一次，利用end()方法，第一次find()方法會結束(undone)，所以我們可以接著在后面繼續find('dt')，而不需要再寫$('#faq').find('dt')。
JavaScript技術：jQuery 絕對入門第1/2頁，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
