歡迎加入QQ討論群258996829
麥子學(xué)院 頭像
蘋果6袋
6
麥子學(xué)院

Jquery學(xué)習(xí)之新特性詳解

發(fā)布時間：2017-09-20 23:09  回復(fù):0  查看:2669   最后回復(fù)：2017-09-20 23:09  
本文和大家分享的主要是jquery 中的一些新特性，一起來看看吧，希望對大家 學(xué)習(xí)jquery有所幫助。
　　$(document).on ：
　　從jQuery1.7 開始， jQuery 引入了  全新的事件綁定機制  ，on() 和 off() 兩個函數(shù)統(tǒng)一處理事件綁定。因為在此之前有 bind(), live(), delegate() 等方法來處理事件綁定， jQuery 從性能優(yōu)化以及方式統(tǒng)一方面考慮決定推出新的函數(shù)來統(tǒng)一事件綁定方法并且替換掉以前的方法。
　　jQuery 推出 on() 的目的有 2 個，  一是為了統(tǒng)一接口，二是為了提高性能  ，所以從現(xiàn)在開始用on() 替換 bind(), live(),  delegate 吧。尤其是不要再用 live() 了，因為它已經(jīng)處于不推薦使用列表了，隨時會被干掉。如果只綁定一次事件，那接著用 one() 吧，這個沒有變化。
　　jquery 中用 on 來綁定事件，經(jīng)常的寫法有
　　 $(document).on('click','#idname',function(){});
　　 $('#idname').on('click',function(){});
　　這兩種寫法又有什么不同呢？
　　$(document).on 是把事件委托到了 document 上。 $('#idname').on 是把事件委托到了元素上。
　　在需要為較多的元素綁定事件的時候，優(yōu)先考慮事件委托，可以帶來性能上的好處。
　　當(dāng)事件冒泡到document 對象時，檢測事件的 target ，如果與傳入的選擇符（這里是 button ）匹配，就觸發(fā)事件，否則不觸發(fā)。
　　在確保所選擇的元素已經(jīng)存在的情況下，進行事件綁定時，您可以使用委派的事件，以避免頻繁的綁定事件及解除綁定事件。
　　$(document).on 是把事件委托到 document 上， $('className').on 是把事件綁定到 .className 元素上。 效率方面，直接綁定在元素上會更為高效，綁定在 document 上，每次 document 有點擊動作，瀏覽器都會判斷當(dāng)前點擊的對象，如果匹配，再決定要不要執(zhí)行，多了一個判斷的環(huán)節(jié) 。但在目前開發(fā)中， JS 渲染效率很高，所以此異同基本可以忽略不計。此外，針對 $(document).on 的觸發(fā)特點，延伸一下，  $("className").on 為 onclick 綁定，只有在頁面 onload 的時候執(zhí)行一次，當(dāng)頁面刷新后，新加載的具有 className 的元素便沒有事件綁定到上面了，相反 $(document).on 這種方法會刷新和重新賦予綁定操作 ，所以一定程度上更為全面。
　　示例：
　　// 綁定加載更多事件
　　$(document).on('click', '.vCommit',  function (e) {
　　e.preventDefault();
　　saveTopic();
　　});
　　 http://www.jquerycn.cn/a_5346
　　document.querySelector ：
　　現(xiàn)在所有的瀏覽器廠商都提供了 querySelector  和  querySelectorAll  這兩個方法的支持，甚至就連微軟也派出了  IE 8  作為支持這一特性的代表，  querySelector  和  querySelectorAll  作為查找 DOM  的又一途徑，極大地方便了開發(fā)者，使用它們，你可以像使用  CSS  選擇器一樣快速地查找到你需要的節(jié)點。
　　假如我們有一個 id  為  test  的  DIV ，為了獲取到這個元素，你也許會像下面這樣：
　　document.getElementById("test");
　　現(xiàn)在我們來試試使用新方法來獲取這個 DIV ：
　　document.querySelector("#test");
　　document.querySelectorAll("#test")[0];
　　感覺區(qū)別不大是吧，但如果是稍微復(fù)雜點的情況，原始的方法將變得非常麻煩，這時候 querySelector  和 querySelectorAll  的優(yōu)勢就發(fā)揮出來了。比如接下來這個例子，我們將在  document  中選取  class  為  test  的  div  的子元素  p  的第一個子元素，當(dāng)然這很拗口，但是用本文的新方法來選擇這個元素，比用言語來描述它還要簡單。
　　document.querySelector("div.test>p:first-child");
　　document.querySelectorAll("div.test>p:first-child")[0];
　　querySelector  和  querySelectorAll  的區(qū)別在于  querySelector  用來獲取一個元素，而 querySelectorAll  可以獲取多個元素。 querySelector  將返回匹配到的第一個元素，如果沒有匹配的元素則返回  Null 。 querySelectorAll  返回一個包含匹配到的元素的數(shù)組，如果沒有匹配的元素則返回的數(shù)組為空。
來源：網(wǎng)絡(luò)
您還未登錄，請先登錄

熱門帖子

最新帖子

?