一、優化選擇器執行速度

1. 優先使用ID選擇器和標記選擇器

• 使用選擇器時應該首選ID選擇器($("#id"))，其次是標記選擇器（$("div")），最后再選用class、屬性等選擇器。
• 避免重復使用ID號修飾ID號，例如$("#div1 #div2")。也避免使用tag，class等修飾ID號，例如$(".title #id")。
• 使用屬性選擇器時，盡量使用標記進行修飾。例如$(div[title='aa'])。

2. 使用jQuery對象緩存

• 如果多次操作同一個DOM元素，可以將其存在全局變量中，避免重復調用選擇器。
• 緩存JQuery的變量命名規則盡量以$開頭。
• 如果同一個DOM對象進行多個操作，盡量使用鏈式寫法。

3. 給選擇器一個上下文

格式：$(expression,[context])，expression是選擇器表達式，context是選擇器查找的范圍。這樣會比在全局查找效率高一些。

實例：

<script type="text/javascript">$( function() {window.$objPub = { //在全局范圍中，定義一個windows對象$objTmp0: $( "#div0", ".MyCls0" ),$objTmp1: $( "#div1")}TestFun();})function TestFun() { //自定義顯示div內容的函數$objPub.$objTmp0.html( "Tmp0").css("width" ,"100px");$objPub.$objTmp1.html( "Tmp1");}</script >

二、處理選擇器不規范元素

1. 選擇器屬性中包含特殊符號：特殊字符前添加轉義字符\\。

2. 選擇器中空格符：包含空格時表示祖先元素和后代元素的關系；不包含空格時表示一個選擇器中兩種篩選條件的合并。

<script type="text/javascript">$( function() {var $objTmp0 = $(".MyCls :hidden" );//含有空格符，.MyCls子元素中的隱藏元素var $objTmp1 = $(".MyCls:hidden" );//沒有空格符，.MyCls類名并且隱藏的元素var $objTest = $("#div\\[test\\]" );//選擇器特殊符號 })</script >

三、解決jQuery庫與其他庫$沖突問題

使用jQuery.noConflict()轉讓$使用權，然后只能使用jQuery變量訪問jQuery對象。

1.jQuery庫先于其他庫導入

無需使用jQuery.noConflict()方法。只要使用jQuery方法時不要使用$符號而是使用jQuery符號就可以了。

2.jQuery庫后于其他庫導入

需要先使用jQury.noConflict()，然后使用jQuery符號操作jQuery中的對象。如果仍然想使用簡潔符號，有兩種方法

①自定義其他符號用作快捷方式：

var j=jQuery.noConflict();j( function() {j( "#Button1").click(function () {獲取對象var $objTmp = j("#txtName" );顯示內容j( "#divTmp").html("J_" + $objTmp.val());})})

②在jQuery方法內部繼續使用$符號。

jQuery.noConflict();jQuery( function($) {$( "#Button1").click(function () {//獲取對象var $objTmp = $("#txtName" );//顯示內容$( "#divTmp").html("J_" + $objTmp.val());})})

四、其他優化

• 盡量減少對DOM元素直接操作的次數。

<script type="text/javascript">$( function() {//定義數組var arrList = ["list0" , "list1", "list2", "list3" , "list4", "list5"];var strList = "" ; //初始化字符$.each(arrList, function(index) {//遍歷后累加數組元素strList += ( "<li>" + arrList[index] + "</li>" );})//一次性完成DOM元素的增加$( "#ulFrame").append(strList);})</script >

• 使用子查詢優化選擇器性能。

五、區分DOM對象和jQuery對象

1.DOM對象和jQuery對象定義的區別

• DOM對象：通過傳統js方法獲取的DOM元素對象；
• jQuery對象：通過jQuery方法包裝原始的DOM對象后生成的新對象。

2.DOM對象和jQuery對象的轉換

如果想使DOM對象和jQuery對象之間的方法相互調用，需要先將對象進行類型轉換。

• DOM轉jQuery：DOM對象通過$()方法進行包裝就可以轉換為jQuery對象。
• jQuery轉DOM：通過get(index)或者[index]方法，可以將jQuery對象轉換為DOM對象。

<script type="text/javascript">$( function() {//***** DOM對象轉成jQuery對象 *****////DOM對象var objDom0 = document.getElementById("div0");//轉成jQuery對象var $obj0 = $(objDom0);//調用jQuery中的方法設置其中的內容$obj0.html( "DOM對象轉成jQuery對象后設置的內容" );//***** jQuery對象轉成DOM對象 *****////jQuery對象var $obj1 = $("#div1" );//轉成DOM對象var objDom1 = $obj1[0];//或者$obj1.get(0);//調用JavaScript中的對象方法設置內容objDom1.innerHTML = "jQuery對象轉成DOM對象后設置的內容" ;})</script >

轉載于:https://www.cnblogs.com/janes/p/3541455.html

總結

以上是生活随笔為你收集整理的读jquery 权威指南[7]-性能优化与最佳实践的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。