**Jquery代表javascript和query，即對javascript查詢操作的類庫，jquery是web前端界的事實標準。最近讀《鋒利的jquery》，發現這本書最大特點是，更深層的討論一些jquery使用情境和優化方法，對于有一定jquery使用經驗的開發者有獨特價值。本篇算是樂帝讀此書，對選擇器和DOM操作加深理解的總結。** **javascript自身包含三大弊端：** - **復雜的文檔對象模型（DOM）** - **不一致的瀏覽器實現和便捷的開發** - **調試工具的缺乏** **Jquery存在的意義就在于很好地解決了前兩個弊端，而后一個弊端也隨著近些年，特別是以chrome為首的瀏覽器廠商大幅提升瀏覽器性能和功能得到了很好地解決。** jquery代碼編寫風格： **jquery代碼核心特點：不需要顯示new對象、鏈式調用。鏈式調用實際使用時，非常方便對一個對象多個操作。而不好的方面是，降低了可讀性，所以寫代碼需要遵循一定的規則。** **單個對象較多操作，每行寫一個操作：** ~~~ $(this).removeClass("mouseout") .addClss("mouseover") .stop() .fadeTo("fast,0.6") .unbind("click"); ~~~ **如果多個對象的少量操作時，每個對象寫一行，涉及子元素，適當縮進。** ~~~ $(this).removeClass("mouseout") .children("li").show().end() .siblings().addClss("mouseover") .children("li").hide() ~~~ **jquery對象與DOM對象區別與聯系：** **DOM對象可以使用javascript中的方法，而Jquery對象則是通過Jquery包裝DOM對象后產生的對象。如果是jquery對象就可以使用jquery中的方法。** **如果獲取對象是jquery對象，那么在變量前加$:** ~~~ var domObj = document.getElementsByTagName("h3")[0]; // Dom對象 var $jQueryObj = $(domObj); //jQuery對象 ~~~ **jquery對象是一個類似數組的對象，可通過兩種方法得到相應dom對象：** ~~~ var $cr = $("#cr"); // 第一種 var cr =$cr[0]; // 第二種 var cr $cr.get(0); ~~~ **DOM轉jquery只需要使用$()將DOM對象包裝起來就可獲得：** ~~~ var domObj = document.getElementsByTagName("h3")[0]; // Dom對象 var $jQueryObj = $(domObj); //jQuery對象 ~~~ **不過需要注意的是上述方法$()獲取的永遠是對象，即便網頁上沒有取到元素。如下圖實例：** **** **所以此時判斷是否含有元素的方法需要判斷對象長度或者轉化成DOM對象判斷：** ~~~ if ($("#noExitst").length) { console.log("this is an object"); } else { console.log("there is no DOM element"); } ~~~ **高性能使用jquery選擇器：** **jquery選擇器各種選擇器的使用網上已經科普很多了，這里主要從性能上討論選擇器。** **選擇器的性能主要從jquery源碼與javascript核心方法結合與否及遍歷復雜度考慮。** **首先一點，能夠預見高性能的方法是能夠直接采用javascript本地方法的選擇器。比如$("#id")、$("div")都有本地方法與之對應：document.getElementById()、**document.getElementByTagName()。而$(".class")、$("[attribute=value]")、$(":hidden")此類選擇器都沒有本地方法實現，大多使用DOM搜索方式達到效果，所以從性能上考慮，后面這些方法是比較有害的。 **總體建議是：盡量使用ID選擇器、盡量給選擇器指定上下文。樂帝的建議是，先使用ID選擇器選定父元素，再根據標簽選擇器選擇標簽。有點類似css中先使用class再使用層級選擇器的方法。** **jquery構造的多種選擇器，雖然方便了使用，但卻犧牲了性能。所以性能與高效上沒有銀彈。**