使用jQuery在對象中緩存選擇器的簡單方法
更新時間：2015年06月30日 10:00:19 投稿：goldensun
這篇文章主要介紹了使用jQuery在對象中緩存選擇器的簡單方法,jQuery是最知名的JavaScript庫,需要的朋友可以參考下
當(dāng)使用像jQuery這樣的庫時，開發(fā)者通常會使用選擇器來訪問和操作DOM中的元素。當(dāng)一個選擇在頁面上被反復(fù)的訪問時，把它緩存起來以獲得更好的性能是個不錯的想法。
讓我們看一個例子,
jQuery(document).ready(function() {
jQuery('#some-selector').on('hover', function() {
jQuery(this).fadeOut('slow').delay(400).fadeIn();
console.log(jQuery(this).text());
});
jQuery('#another-element').on('hover', function() {
jQuery(this).slideUp();
});
jQuery('#some-selector').on('click', function() {
alert('You have clicked a featured element');
});
jQuery('#another-element').on('mouseout', function() {
jQuery(this).slideUp();
});
});
也許你已經(jīng)注意到，ID ‘some-selector' 和 ‘a(chǎn)nother-element' 在上面的代碼片段中被提到了兩次。通過把這些選擇器保存到變量里，可以使他們能被復(fù)用，并且避免了重復(fù)選擇操作。
當(dāng)你開始在你的jQuery代碼里積攢出各種各樣的選擇器時，你就能領(lǐng)會到在對象中緩存選擇器 – 以鍵值對的形式 – 是多么美好。這使得你更容易在腳本中的任何地方訪問它們，并且維護(hù)這些選擇器也是輕而易舉的事。
緩存選擇器后，改進(jìn)過的代碼會像這樣,
var someNamespace_Dom = {
someSelector : 'jQuery("#some-selector")',
anotherElement: 'jQuery("#another-element")',
};
jQuery(document).ready(function() {
someNamespace_Dom.someSelector.on('hover', function() {
jQuery(this).fadeOut('slow').delay(400).fadeIn();
console.log(jQuery(this).text());
});
someNamespace_Dom.anotherElement.on('hover', function() {
jQuery(this).slideUp();
});
someNamespace_Dom.someSelector.on('click', function() {
alert('You have clicked a featured element');
});
someNamespace_Dom.anotherElement.on('mouseout', function() {
jQuery(this).slideUp();
});
});
由于選擇器已經(jīng)被緩存到變量中，DOM 樹不再需要被重復(fù)遍歷來尋找被操作的元素?！畇omeNamespace_Dom' 對象可以被用來添加更多鍵值對，使得維護(hù)工作很輕松。
相關(guān)文章
Raphael一個用于在網(wǎng)頁中繪制矢量圖形的Javascript庫
Raphael是一個用于在網(wǎng)頁中繪制矢量圖形的Javascript庫,它使用 SVG W3C 推薦標(biāo)準(zhǔn)和 VML 作為創(chuàng)建圖形的基礎(chǔ)，你可以通過 JavaScript 操作 DOM 來輕松創(chuàng)建出各種復(fù)雜的柱狀圖、餅圖、曲線圖等各種圖表,接下來詳細(xì)介紹，感興趣的朋友可以了解下哦2013-01-01
只需將js引用并設(shè)置下變量就行了，但一直沒搞明白原理，這次弄清了如何傳遞、設(shè)置多個（很多個）參數(shù)，如果你也不明白可以看看2014-10-10
把html頁面的部分內(nèi)容保存成新的html文件的jquery代碼
把html頁面的部分內(nèi)容保存成新的html文件，用到了jquery的獲取指定id的內(nèi)容。然后保存代碼。2009-11-11
這篇文章主要介紹了jQuery仿京東商城樓梯式導(dǎo)航定位菜單的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-07
3種不同的ContextMenu右鍵菜單實現(xiàn)代碼
本文給大家分享3種不同的ContextMenu右鍵菜單實現(xiàn)代碼的相關(guān)資料,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2016-11-11
使用jquery組件qrcode生成二維碼及應(yīng)用指南
這篇文章主要介紹了使用jquery組件qrcode生成二維碼及應(yīng)用指南,非常全面實用，需要的朋友可以參考下2015-02-02
利用jQuery的deferred對象實現(xiàn)異步按順序加載JS文件
如果你現(xiàn)在對jQuery中的deferred還不了解,jQuery的deferred對象詳解一文接下來介紹deferred對象如何實現(xiàn)異步順序加載JS文件，感興趣的你可以參考下哈2013-03-03
通配符在控制input標(biāo)簽時相當(dāng)好用,這里簡單進(jìn)行了jQuery中的通配符選擇器使用總結(jié),需要的朋友可以參考下2016-05-05
jQuery EasyUI API 中文文檔 - DataGrid數(shù)據(jù)表格
jQuery EasyUI API 中文文檔 - DataGrid數(shù)據(jù)表格使用說明，需要的朋友可以參考下。2011-11-11
基于jQuery和hwSlider實現(xiàn)內(nèi)容左右滑動切換效果附源碼下載（一）
本文結(jié)合實例給大家介紹如何實現(xiàn)內(nèi)容滑動切換的效果，包括左右箭頭切換，無限無縫滾動，圓點按鈕切換，動畫效果，自動切換效果，效果非常不錯，感興趣的朋友前來參考實現(xiàn)代碼2016-06-06