jQuery 1.4十大新特性解讀及代碼示例

08-07

今年1月51CTO曾為您報道過jQuery 1.4發布的消息，在這個版本中，jQuery有相當多的改進與功能更新,它不僅包含了很多新的特性，還改進了很多功能, 更在性能優化方面下了很大功夫, 本文將對這些新的特性和增強的部分進行討論,希望能對你有所幫助。

jQuery 1.4版本下載地址: http://code.jquery.com/jquery-1.4.js

下面我們通過講解和示例代碼來詳細介紹jQurey 1.4版本中你應該知道並使用的十大新特性。

1. 傳遞屬性給jQuery

在之前的版本中jQuery就通過"attr」方法支持了添加屬性到元素集合中，"attr」方法不僅可以傳遞屬性名和值，也可以傳遞包含有多個屬性的對象集合。在jQurey 1.4中，除了可以創建新的對象，現在它更能將屬性對象作為參數傳遞給jQuery函數或對象自身。如你可以創建一個含有多個屬性的鏈接元素。

jQuery("<a></a>",{
id:"gid",
href:"http://www.google.com",
title:"google非和諧版",
rel:"external",
text:"進入<SPANclass=t_tagonclick=tagshow(event)href="tag.php?name=Google"mce_href="tag.php?name=Google">Google</SPAN>!"
});

你可能會注意到"text」屬性並且猜測它是幹嗎的，因為a標籤是沒有"text」屬性的。呵呵，當你傳遞某些屬性時，jquery 1.4同樣會檢查並使用它自己的方法。因此上面的"text」屬性可以讓jQuery調用它的".text()」方法並將"進入Google!「作為它的唯一參數。

這裡給出一個更好的例子：

jQuery("<div/>",{
id:"foo",
css:{
fontWeight:700,
color:"green"
},
click:function(){
alert("Foo被點擊過!");
}
});

"id」屬性是作為一個普通屬性被添加的。但"css」和"click」屬性則對應特定的jQuery方法。上面的代碼在1.4之前一種寫法如下：

jQuery("<div/>")
.attr("id","foo")
.css({
fontWeight:700,
color:"green"
})
.click(function(){
alert("Foo被點擊過!");
});

2. 所有的東西都可以"until「了

jQuery 1.4新增了三個對DOM操作的方法，他們分別是"nextUntil", "prevUntil" 和 "parentsUntil"。這些方法會按照某個順序去遍歷DOM對象直到滿足指定的篩選條件。假設我們有一個水果列表：

<ul>
<li>蘋果</li>
<li>香蕉</li>
<li>葡萄</li>
<li>草莓</li>
<li>例子</li>
<li>桃子</li>
</ul>

如果你想選擇所有在"Apple」和"Strawberry」之間的元素。代碼可以這樣寫：

jQuery("ulli:contains(蘋果)").nextUntil(":contains(梨子)");//得到香蕉，葡萄，草莓

3. 綁定多個事件

與通過jquery鏈綁定多個方法到一起相比，現在你可以通過一次調用來綁定所有這些事件，如：

jQuery("#foo).bind({
click:function(){
//具體代碼
},
mouseover:function(){
//具體代碼
},
mouseout:function(){
//具體代碼
}
})

你也可以通過 ".one()"方法操作。

4、檢查元素是否擁有某對象

通過".has()」方法，jQuery 1.4使得檢查一個元素(或者集合)是不是有某對象變得相當簡單。從程序角度看，它和jQuery的selector過濾器":has()」是一樣的。該方法會返回在當前集合中所有包含有至少一個符合條件的元素數組。

jQuery("div").has("ul");

上面方法會返回所有包含有UL元素的DIV元素數組。在這種情況下，你可能會更傾向於簡單使用選擇器的過濾器(":has()"), 但當你需要通過代碼過濾一個數組的時候，該方法仍會很有用。

jQuery 1.4同樣在jQuery命名空間下添加了新的"contains"函數。這是一個低級的函數，它接受兩個DOM節點作為參數。它會返回一個布爾值來表示後面一個元素是否在前面一個元素中存在。如：

jQuery.contains(document.documentElement,document.body);
//返回true-<body>在<html>存在

5、去掉元素的包裝

".warp()」已經在jQuery中有段日子了，現在跟它對應的".unwrap()」方法也被加進到1.4中了。這個方法剛好跟warp()方法相反。假設有下面的DOM結構:

<div>
<p>Foo</p>
</div>

我們可以用下面的函數去掉段落元素的外層：

jQuery("p").unwrap();

最終的DOM結構如下：

<p>Foo</p>

注意，這個方法處理比較簡單，它會移掉任何元素的父節點。

6、detach() vs remove()

新的".detach()」方法允許你從DOM中移掉元素，這跟".remove()」很像。但與".remove()」有本質不同的是"detach()」不會將jQuery賦給該元素的數據也給註銷掉。這包含通過".data()」和其他任意的通過jQuery的事件系統添加的事件等數據。

varfoo=jQuery("#foo");
//綁定一個重要的事件
foo.click(function(){
alert("Foo!");
});
foo.detach();
//從DOM中移除事件
//…其他操作
foo.appendTo("body");
//將元素重新加入到DOMfoo.click();
//彈出"Foo!"

7、index(…) 加強

jQuery 1.4中我們有兩種使用".index()」方法的方式。首先，你可以僅僅將一個元素自身作為參數，這樣你可以得到該元素在當前集合中所處的索引位置值。如果不設置參數的話，現在會返回該元素的兄弟節點。因此，假設有下面的DOM結構：

<ul>
<li>蘋果</li>
<li>香蕉</li>
<li>葡萄</li>
<li>草莓</li>
<li>例子</li>
<li>桃子</li>
</ul>

一個節點被點擊的時候，你如果想找到在所有的節點集合中被單擊的節點的位置，你可以這樣寫：

jQuery("li").click(function(){
alert(jQuery(this).index());
});

jQuery 1.4還允許你指定一個選擇器作為".index()」的第一個參數，這樣它會返回該元素在選擇器中產生的元素集合中的位置。最後需要注意的是，如果該元素在集合中存在的話，該函數會返回一個其位置的整數，如果不存在，則返回-1。

8、對象類型判斷

jQuery 1.4添加了兩個新的方法(直接放到了jQuery命名空間下面)以方便我們來判斷當前處理的對象的類型。

首先是方法"isEmptyObject」，顧名思義，這個函數會返回一個布爾值來表明傳遞的對象是不是空對象(缺乏屬性--無論是對象自身還是繼續的對象)。其次是方法"isPlainObject」，它會返回一個布爾值來表明操作的對象是否是一個簡單的js對象(指通過"{ }"或者"new Object」創建的對象)。

jQuery.isEmptyObject({});//true
jQuery.isEmptyObject({foo:1});//false
jQuery.isPlainObject({});//true
jQuery.isPlainObject(window);//false
jQuery.isPlainObject(jQuery());//false

9、Closest(…) 增強

jQuery的".closest()」方法現在可以接受一組選擇器了。如果開發人員想遍歷一個元素的祖先，並在其中查找離其最近的那些符合某些特徵的節點的時候，這會很有用。

另外，該函數現在也接受將上下文作為第二參數了。這意味著你現在可以控制你想在DOM中遍歷的元素範圍了。雖然這兩種情況我們一般很少用到，不過它們在jQuery內部被很好的使用。

10、新的事件focusIn和focusOut

為了委託"focus」和"blur」事件你需要這些新的事件，它們是"focusin」和"focusout」。這些新的事件將允許你在一個元素或其子元素獲取焦點的時候進行相應操作。

jQuery("form")
.focusin(function(){
jQuery(this).addClass("focused");
});
.focusout(function(){
jQuery(this).removeClass("focused");
});

同時應該注意的是這兩個事件都不是按冒泡順序傳遞，它們將按捕獲順序觸發。這意味著最外層的(也即祖先)元素會在實際節點事件觸發前被觸發。

除了以上提到的十點，jQuery 1.4還有很多有用的改進和增強，更多特性的解析及示例可以參考jQuery 1.4的官方文檔。