国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開APP
userphoto
未登錄

開通VIP,暢享免費(fèi)電子書等14項(xiàng)超值服

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

今年1月51CTO曾為您報(bào)道過jQuery 1.4發(fā)布的消息,在這個(gè)版本中,jQuery有相當(dāng)多的改進(jìn)與功能更新,它不僅包含了很多新的特性,還改進(jìn)了很多功能, 更在性能優(yōu)化方面下了很大功夫, 本文將對這些新的特性和增強(qiáng)的部分進(jìn)行討論,希望能對你有所幫助。

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

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

1. 傳遞屬性給jQuery

在之前的版本中jQuery就通過"attr”方法支持了添加屬性到元素集合中,"attr”方法不僅可以傳遞屬性名和值,也可以傳遞包含有多個(gè)屬性的對象集合。在jQurey 1.4中,除了可以創(chuàng)建新的對象,現(xiàn)在它更能將屬性對象作為參數(shù)傳遞給jQuery函數(shù)或?qū)ο笞陨?。如你可以?chuàng)建一個(gè)含有多個(gè)屬性的鏈接元素。

  1. jQuery('<a></a>', {        
  2.       id: 'gid',        
  3.       href: 'http://www.google.com',        
  4.       title: 'google非和諧版',        
  5.       rel: 'external',        
  6.       text: '進(jìn)入<SPAN class=t_tag onclick=tagshow(event) href="tag.php?name=Google"
     mce_href="tag.php?name=Google">Google</SPAN>!'
           
  7.   });     

你可能會(huì)注意到"text”屬性并且猜測它是干嗎的,因?yàn)閍標(biāo)簽是沒有"text”屬性的。呵呵,當(dāng)你傳遞某些屬性時(shí),jquery 1.4同樣會(huì)檢查并使用它自己的方法。因此上面的"text”屬性可以讓jQuery調(diào)用它的".text()”方法并將"進(jìn)入Google!“作為它的唯一參數(shù)。

這里給出一個(gè)更好的例子:

  1. jQuery('<div/>', {        
  2.       id: 'foo',        
  3.       css: {        
  4.           fontWeight: 700,        
  5.           color: 'green'       
  6.       },        
  7.       click: function(){        
  8.           alert('Foo被點(diǎn)擊過!');        
  9.       }        
  10.   });     

"id”屬性是作為一個(gè)普通屬性被添加的。但"css”和"click”屬性則對應(yīng)特定的jQuery方法。上面的代碼在1.4之前一種寫法如下:

  1. jQuery('<div/>')        
  2.       .attr('id''foo')        
  3.       .css({        
  4.           fontWeight: 700,        
  5.           color: 'green'       
  6.       })        
  7.       .click(function(){        
  8.           alert('Foo被點(diǎn)擊過!');        
  9.       });      

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

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

  1. <ul>       
  2.     <li>蘋果</li>       
  3.     <li>香蕉</li>       
  4.     <li>葡萄</li>       
  5.     <li>草莓</li>       
  6.     <li>例子</li>       
  7.     <li>桃子</li>       
  8. </ul>      

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

  1. jQuery('ul li:contains(蘋果)').nextUntil(':contains(梨子)');   // 得到 香蕉,葡萄,草莓    
  2.  

3. 綁定多個(gè)事件

與通過jquery鏈綁定多個(gè)方法到一起相比,現(xiàn)在你可以通過一次調(diào)用來綁定所有這些事件,如:

  1. jQuery('#foo).bind({        
  2.       click: function() {        
  3.           // 具體代碼        
  4.      },        
  5.       mouseover: function() {        
  6.           // 具體代碼        
  7.     },        
  8.       mouseout: function() {        
  9.           // 具體代碼        
  10.      }        
  11.   })        

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

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

通過".has()”方法,jQuery 1.4使得檢查一個(gè)元素(或者集合)是不是有某對象變得相當(dāng)簡單。從程序角度看,它和jQuery的selector過濾器":has()”是一樣的。該方法會(huì)返回在當(dāng)前集合中所有包含有至少一個(gè)符合條件的元素?cái)?shù)組。

  1. jQuery('div').has('ul');      

上面方法會(huì)返回所有包含有UL元素的DIV元素?cái)?shù)組。在這種情況下,你可能會(huì)更傾向于簡單使用選擇器的過濾器(":has()"), 但當(dāng)你需要通過代碼過濾一個(gè)數(shù)組的時(shí)候,該方法仍會(huì)很有用。

jQuery 1.4同樣在jQuery命名空間下添加了新的"contains"函數(shù)。這是一個(gè)低級的函數(shù),它接受兩個(gè)DOM節(jié)點(diǎn)作為參數(shù)。它會(huì)返回一個(gè)布爾值來表示后面一個(gè)元素是否在前面一個(gè)元素中存在。如:

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

5、去掉元素的包裝

".warp()”已經(jīng)在jQuery中有段日子了,現(xiàn)在跟它對應(yīng)的".unwrap()”方法也被加進(jìn)到1.4中了。這個(gè)方法剛好跟warp()方法相反。假設(shè)有下面的DOM結(jié)構(gòu):

  1. <div>        
  2.     <p>Foo</p>        
  3. </div>   

我們可以用下面的函數(shù)去掉段落元素的外層:

  1. jQuery('p').unwrap();     

最終的DOM結(jié)構(gòu)如下:

  1. <p>Foo</p>   

注意,這個(gè)方法處理比較簡單,它會(huì)移掉任何元素的父節(jié)點(diǎn)。

 

6、detach() vs remove()

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

  1. var foo = jQuery('#foo');        
  2. // 綁定一個(gè)重要的事件        
  3. foo.click(function(){        
  4.     alert('Foo!');        
  5. });        
  6. foo.detach();        
  7. // 從 DOM中移除事件        
  8. // … 其他操作        
  9. foo.appendTo('body');        
  10.  // 將元素重新加入到 DOMfoo.click();        
  11.  // 彈出 "Foo!"      

7、index(…) 加強(qiáng)

jQuery 1.4中我們有兩種使用".index()”方法的方式。首先,你可以僅僅將一個(gè)元素自身作為參數(shù),這樣你可以得到該元素在當(dāng)前集合中所處的索引位置值。
如果不設(shè)置參數(shù)的話,現(xiàn)在會(huì)返回該元素的兄弟節(jié)點(diǎn)。因此,假設(shè)有下面的DOM結(jié)構(gòu):

  1. <ul>        
  2.  <li>蘋果</li>        
  3.  <li>香蕉</li>        
  4.  <li>葡萄</li>        
  5.  <li>草莓</li>        
  6.  <li>例子</li>        
  7.  <li>桃子</li>        
  8.  </ul>      

一個(gè)節(jié)點(diǎn)被點(diǎn)擊的時(shí)候,你如果想找到在所有的節(jié)點(diǎn)集合中被單擊的節(jié)點(diǎn)的位置,你可以這樣寫:

  1. jQuery('li').click(function(){        
  2.     alert( jQuery(this).index() );        
  3. });      

jQuery 1.4還允許你指定一個(gè)選擇器作為".index()”的第一個(gè)參數(shù),這樣它會(huì)返回該元素在選擇器中產(chǎn)生的元素集合中的位置。最后需要注意的是,如果該元素在集合中存在的話,該函數(shù)會(huì)返回一個(gè)其位置的整數(shù),如果不存在,則返回-1。

8、對象類型判斷

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

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

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

 9、Closest(…) 增強(qiáng)

jQuery的".closest()”方法現(xiàn)在可以接受一組選擇器了。如果開發(fā)人員想遍歷一個(gè)元素的祖先,并在其中查找離其最近的那些符合某些特征的節(jié)點(diǎn)的時(shí)候,這會(huì)很有用。

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

10、 新的事件focusIn和focusOut

為了委托"focus”和"blur”事件你需要這些新的事件,它們是"focusin”和"focusout”。這些新的事件將允許你在一個(gè)元素或其子元素獲取焦點(diǎn)的時(shí)候進(jìn)行相應(yīng)操作。

  1. jQuery('form')        
  2.     .focusin(function(){        
  3.         jQuery(this).addClass('focused');        
  4.     });        
  5.     .focusout(function(){        
  6.         jQuery(this).removeClass('focused');        
  7.     });      

同時(shí)應(yīng)該注意的是這兩個(gè)事件都不是按冒泡順序傳遞,它們將按捕獲順序觸發(fā)。這意味著最外層的(也即祖先)元素會(huì)在實(shí)際節(jié)點(diǎn)事件觸發(fā)前被觸發(fā)。

除了以上提到的十點(diǎn),jQuery 1.4還有很多有用的改進(jìn)和增強(qiáng),更多特性的解析及示例可以參考jQuery 1.4的官方文檔。

本站僅提供存儲(chǔ)服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點(diǎn)擊舉報(bào)。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
JQuery_01
jQuery 1.4 及 官方文檔中文版 發(fā)布
前端必備:jQuery 1.7.1API手冊
js筆記合集
jQuery開發(fā)常用
jQuery選擇器分類
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服