jQuery網(wǎng)頁特效設(shè)計基礎(chǔ)教程（慕課版）（第2版）課件 第9、10單元 常用的第三方j(luò)Query插件；jQuery 性能優(yōu)化與技巧

第9單元常用的第三方j(luò)Query插件jQuery網(wǎng)頁特效設(shè)計基礎(chǔ)教程（慕課版）（第2版）工業(yè)和信息化精品系列教材人民郵電出版社了解什么是第三方j(luò)Query插件。了解常用的第三方j(luò)Query插件。了解如何調(diào)用第三方j(luò)Query插件。掌握常用第三方j(luò)Query插件的使用。教學(xué)目標(biāo)pedagogicalobjectives能夠使用第三方j(luò)Query插件。能夠了解第三方j(luò)Query插件如何被調(diào)用。掌握多樣化技術(shù)工具的選擇與應(yīng)用，培養(yǎng)工具整合和問題解決能力，提升開發(fā)效率，為實際項目實踐奠定基礎(chǔ)。目錄導(dǎo)航9.1第三方j(luò)Query插件概述9.3項目實戰(zhàn)：使用ColorPicker插件制作顏色選擇器9.2常用第三方j(luò)Query插件的使用9.1.1什么是第三方j(luò)Query插件提高Web網(wǎng)站的開發(fā)效率。高度集成、方便使用。根據(jù)自身需求進行修改，增強可擴展性。第三方j(luò)Query插件是一種用來提高Web網(wǎng)站開發(fā)效率、已經(jīng)封裝好的JavaScript腳本庫，由于jQuery的開源特性，現(xiàn)在有很多第三方j(luò)Query插件可供開發(fā)人員直接使用。第三方j(luò)Query插件的主要特點如下。界面美觀。9.1.2常用的第三方j(luò)Query插件插件說明uploadify帶進度條的文件上傳插件zTree樹菜單插件NivoSlider網(wǎng)頁中的圖片切換插件Pagination對網(wǎng)頁中的數(shù)據(jù)進行分頁顯示插件BootstrapStarRating星星評分插件EasyZoom圖片縮放插件lazyload圖片延遲加載插件NotesForLightBox圖片燈箱插件jCarousel圖片幻燈片顯示插件Password-Strength密碼強度檢測插件ColorPicker顏色拾取器插件jQZoom圖片放大鏡插件9.1.3如何調(diào)用第三方j(luò)Query插件01第三方j(luò)Query插件是基于jQuery開發(fā)的，因此在調(diào)用時，首先需要添加相應(yīng)版本的jQuery庫。例如，添加版本3.6.4的jQuery庫，首先將版本3.6.4的jQuery庫jquery-3.6.4.min.js復(fù)制到網(wǎng)頁文件夾中，然后在HTML網(wǎng)頁中編寫如下代碼：02最后添加要使用的第三方j(luò)Query插件的JavaScript腳本文件及CSS樣式文件。例如，添加uploadify插件的JavaScript腳本文件及CSS樣式文件，首先將uploadify插件的JavaScript腳本文件及CSS樣式文件復(fù)制到網(wǎng)頁文件夾中，然后在HTML網(wǎng)頁中編寫如下代碼：<scripttype="text/javascript"src="jquery-3.6.4.min.js"></script> <linkhref="css/default.css"rel="stylesheet"type="text/css"/> <linkhref="css/uploadify.css"rel="stylesheet"type="text/css"/> <scripttype="text/javascript"src="scripts/swfobject.js"></script> <scripttype="text/javascript"src="scripts/jquery.uploadify.v2.0.2.min.js"></script>完成以上步驟后，即可通過定義JavaScript函數(shù)使用第三方j(luò)Query插件。例如，在網(wǎng)頁中初始化uploadify插件，并設(shè)置其屬性，代碼如下：9.1.3如何調(diào)用第三方j(luò)Query插件03<scripttype="text/javascript"> $(document).ready(function(){ $("#uploadify").uploadify({ 'uploader':'scripts/uploadify.swf',//上傳所需的Flash文件 'script':'scripts/upload.ashx',//后臺處理文件 'folder':'/uploads',//上傳文件夾 'queueSizeLimit':4,//限制每次選擇上傳文件的個數(shù) 'sizeLimit':6291456,//上傳文件大小限制的最大值 'fileDesc':'圖片文件',//文件類型的描述信息 'fileExt':'*.jpg;*.png;*.bmp;*.gif',//設(shè)置文件類型 });});目錄導(dǎo)航9.1第三方j(luò)Query插件概述9.3項目實戰(zhàn)：使用ColorPicker插件制作顏色選擇器9.2常用第三方j(luò)Query插件的使用9.2.1uploadify插件（文件上傳）01OPTION屬性屬性說明auto是否自動上傳buttonClass上傳按鈕樣式buttonText上傳按鈕文本checkScript檢查目標(biāo)文件夾中是否存在與上傳文件同名的文件dnd是否允許拖放dropTarget投放目標(biāo)選擇器fileObjName定義服務(wù)器接收參數(shù)名稱fileSizeLimit上傳文件的大小限制，該屬性值為0則表示無限制fileType允許上傳的文件類型。要允許所有文件類型，設(shè)置該屬性值為false；允許特定文件類型，則設(shè)置該屬性值為['image/jpeg','video/*']formData提交給服務(wù)器端的參數(shù)9.2.1uploadify插件（文件上傳）01OPTION屬性屬性說明width上傳按鈕寬度height上傳按鈕高度itemTemplate隊列中項目的HTML標(biāo)記method上傳文件的提交方法，取值post或getmulti是否允許多文件上傳overrideEvents指定多個插件默認(rèn)事件中的事件，被指定的事件將不會執(zhí)行queueID指定用于顯示上傳隊列的父級元素id屬性值queueSizeLimit限制每次選擇上件文件的個數(shù)removeCompleted文件上傳完畢后，是否從上傳隊列中移除simUploadLimit一次可上傳的文件數(shù)量truncateLength指定文件名稱的截取長度，設(shè)置該屬性值后，文件名稱超過指定長度將會被截取uploadLimit指定允許上傳的最大文件數(shù)量uploadScript上傳處理腳本9.2.1uploadify插件（文件上傳）01OPTION屬性可以根據(jù)表9-2中列出的屬性對常用uploadify對插件進行相應(yīng)的設(shè)置，代碼如下：9.2.1uploadify插件（文件上傳）02OPTION方法方法說明clearQueue()清除文件隊列cancel()取消文件上傳upload()上傳文件destroy()銷毀上傳實例debug()輸出debug日志9.2.1uploadify插件（文件上傳）03OPTION事件事件說明onInit在uploadify插件初始化結(jié)束時觸發(fā)該事件onFallback驗證客戶端瀏覽器是否兼容onCheck驗證客戶端文件是否存在onError驗證客戶端設(shè)定的約束onSelect在每添加一個文件至上傳隊列時觸發(fā)該事件onDrop在文件被添加到該隊列文件時觸發(fā)該事件onProgress在上傳進度更新時觸發(fā)該事件onAddQueueItem在文件被添加到上傳隊列時觸發(fā)該事件onUpload在執(zhí)行上傳操作時觸發(fā)該事件onUploadFile在上傳每一個文件時觸發(fā)該事件onUploadComplete在文件上傳完成后觸發(fā)該事件onQueueComplete在隊列中的所有文件上傳完成時觸發(fā)該事件onCancel在上傳被取消時觸發(fā)該事件onClearQueue在清空隊列時觸發(fā)該事件onDestroy在uploadify插件被銷毀時觸發(fā)該事件9.2.1uploadify插件（文件上傳）【例9-1】使用uploadify插件實現(xiàn)批量上傳文件的功能。（1）在文件夾9下創(chuàng)建新項目，命名為9-1，默認(rèn)主頁為index.php。（2）在index.php的HTML代碼中引入jQuery框架和uploadify插件所需的JavaScript腳本文件及CSS樣式文件，代碼如下：<scripttype="text/javascript"src="js/jquery-3.6.4.min.js"></script><scripttype="text/javascript"src="js/jquery.uploadify-3.1.min.js"></script><linkrel="stylesheet"type="text/css"href="uploadify.css"/>（3）在index.php頁面中添加一個file控件，id屬性值設(shè)置為file_upload，用于選擇文件，再添加一個上傳按鈕，代碼如下：<h1>UploadifyHTML5上傳</h1><form><divid="queue"></div><inputid="file_upload"name="file_upload"type="file"multiple="true"><astyle="position:relative;top:8px;"href="javascript:$('#file_upload').uploadifive('upload')">上傳</a></form>9.2.1uploadify插件（文件上傳）【例9-1】使用uploadify插件實現(xiàn)批量上傳文件的功能。（4）在<head></head>中編寫代碼，實現(xiàn)在頁面加載后初始化uploadify插件，并設(shè)置插件的相關(guān)屬性，其中包括上傳文件類型、上傳文件大小、是否可以選擇多個文件上傳以及是否自動上傳等，通過設(shè)置這些屬性可以非常靈活地控制文件上傳。代碼如下：9.2.1uploadify插件（文件上傳）【例9-1】使用uploadify插件實現(xiàn)批量上傳文件的功能。（5）處理文件上傳的uploadify插件的PHP文件代碼如下：運行結(jié)果9.2.2zTree插件（樹菜單）01OPTION屬性屬性說明setting.treeIdzTree插件的唯一標(biāo)識。初始化zTree插件后，該屬性值等于用戶定義的zTree容器的id屬性值async.autoParam異步加載時需要自動提交父節(jié)點屬性的參數(shù)async.dataFilter用于對AJAX返回數(shù)據(jù)進行預(yù)處理的函數(shù)async.dataTypeAJAX獲取的數(shù)據(jù)類型async.enable設(shè)置zTree插件是否開啟異步加載模式async.typeAJAX的HTTP請求模式async.urlAJAX獲取數(shù)據(jù)的URLcheck.enable設(shè)置zTree插件的節(jié)點上是否顯示復(fù)選框/單選按鈕9.2.2zTree插件（樹菜單）01OPTION屬性屬性說明data.key.titlezTree插件的節(jié)點數(shù)據(jù)保存節(jié)點提示信息的屬性名稱data.key.urlzTree插件的節(jié)點數(shù)據(jù)保存節(jié)點鏈接的目標(biāo)URL的屬性名稱data.simpleData.enable確定zTree插件初始化時的節(jié)點數(shù)據(jù)、異步加載時的節(jié)點數(shù)據(jù)或addNodes()方法中輸入的newNodes數(shù)據(jù)是否采用簡單數(shù)據(jù)模式（Array）data.simpleData.idKey節(jié)點數(shù)據(jù)中保存唯一標(biāo)識的屬性名稱data.simpleData.pIdKey節(jié)點數(shù)據(jù)中保存其父節(jié)點唯一標(biāo)識的屬性名稱view.expandSpeedzTree插件的節(jié)點展開、折疊時的動畫速度，設(shè)置方法同jQuery動畫效果中speed參數(shù)的設(shè)置方法view.selectedMulti設(shè)置是否允許同時選中多個節(jié)點view.showIcon設(shè)置zTree插件是否顯示節(jié)點的圖標(biāo)9.2.2zTree插件（樹菜單）02OPTION方法方法說明$.fn.zTree.init()zTree插件初始化方法$.fn.zTree.destroy()從zTreev3.4開始提供銷毀zTree插件的方法$.fn.zTree.getZTreeObj()zTreev3.x專門提供的獲取zTree對象的方法callback.beforeAsync()用于捕獲異步加載之前的事件回調(diào)函數(shù)，zTree插件根據(jù)返回值確定是否允許進行異步加載callback.beforeExpand()用于捕獲父節(jié)點展開之前的事件回調(diào)函數(shù)，zTree插件根據(jù)返回值確定是否允許展開操作callback.beforeDblClick()用于捕獲zTree插件上鼠標(biāo)雙擊之前的事件回調(diào)函數(shù)，zTree插件根據(jù)返回值確定是否觸發(fā)onDblClick事件回調(diào)函數(shù)callback.onAsyncError用于捕獲異步加載出現(xiàn)異常錯誤時的事件回調(diào)函數(shù)callback.onAsyncSuccess()用于捕獲異步加載正常結(jié)束時的事件回調(diào)函數(shù)callback.onClick()用于捕獲節(jié)點被單擊時的事件回調(diào)函數(shù)callback.onDblClick()用于捕獲zTree插件上鼠標(biāo)雙擊之后的事件回調(diào)函數(shù)zTreeObj.getNodes()獲取zTree插件的全部節(jié)點數(shù)據(jù)zTreeObj.refresh()刷新zTree插件treeNode.getNextNode()獲取與treeNode相鄰的后一個節(jié)點treeNode.getPreNode()獲取與treeNode相鄰的前一個節(jié)點9.2.2zTree插件（樹菜單）【例9-2】本實例使用zTree插件異步加載大數(shù)據(jù)。（1）將zTree插件中的css文件夾復(fù)制到實例文件夾9-2中。創(chuàng)建一個名為js的文件夾，將jquery-3.6.4.min.js文件以及jquery.ztree.core-3.5.js文件復(fù)制到j(luò)s文件夾中。（2）創(chuàng)建一個名為index.html的文件，在該文件的<head>標(biāo)記中引入jQuery文件、zTree插件的核心腳本文件以及zTree插件的CSS樣式文件。代碼如下：<linkrel="stylesheet"href="css/demo.css"type="text/css"><linkrel="stylesheet"href="css/zTreeStyle/zTreeStyle.css"type="text/css"><scripttype="text/javascript"src="js/jquery-3.6.4.min.js"></script><scripttype="text/javascript"src="js/jquery.ztree.core-3.5.js"></script>（3）在頁面的<body>標(biāo)記中創(chuàng)建兩個<ul>元素，一個用來顯示樹菜單，另一個用來顯示操作日志。代碼如下：<divclass="content_wrap"> <divclass="zTreeDemoBackgroundleft"> <ulid="treeDemo"class="ztree"></ul> </div><ulid="log"></ul></div>9.2.2zTree插件（樹菜單）【例9-2】本實例使用zTree插件異步加載大數(shù)據(jù)。（4）編寫jQuery代碼，開啟異步加載模式，顯示節(jié)點上的復(fù)選框，使用簡單數(shù)據(jù)模式并設(shè)置父節(jié)點展開之前、異步加載正常結(jié)束時、異步加載出現(xiàn)異常錯誤時的事件回調(diào)函數(shù)。具體代碼如下：9.2.2zTree插件（樹菜單）【例9-2】本實例使用zTree插件異步加載大數(shù)據(jù)。（5）設(shè)置父節(jié)點對象。代碼如下：（6）編寫函數(shù)getUrl()用來獲取接收頁面請求的URL。代碼如下：9.2.2zTree插件（樹菜單）【例9-2】本實例使用zTree插件異步加載大數(shù)據(jù)。（7）編寫父節(jié)點展開之前、異步加載正常結(jié)束時、異步加載出現(xiàn)異常結(jié)果時的事件回調(diào)函數(shù)以及顯示日志函數(shù)。具體代碼如下：9.2.2zTree插件（樹菜單）【例9-2】本實例使用zTree插件異步加載大數(shù)據(jù)。（8）初始化zTree插件。代碼如下：（9）編寫getBigData.php文件，用來返回存放子節(jié)點的JSON對象。具體代碼如下：9.2.2zTree插件（樹菜單）【例9-2】本實例使用zTree插件異步加載大數(shù)據(jù)。>>運行結(jié)果9.2.3NivoSlider插件（圖片切換）01OPTION屬性屬性說明effect過渡效果sliceseffect屬性為切片效果時的數(shù)量boxColseffect屬性為格子效果時的列boxRowseffect屬性為格子效果時的行animSpeed動畫速度pauseTime圖片切換速度startSlide從第幾張開始directionNav是否顯示圖片切換按鈕（上/下頁）directionNavHide是否鼠標(biāo)指針經(jīng)過才顯示按鈕controlNav顯示序列導(dǎo)航controlNavThumbs顯示圖片導(dǎo)航9.2.3NivoSlider插件（圖片切換）01OPTION屬性屬性說明controlNavThumbsFromRel使用<img>元素的rel屬性作為縮略圖地址controlNavThumbsSearch查找指定字符串（controlNavThumbs屬性值必須為true）controlNavThumbsReplace替換成指定字符（controlNavThumbs屬性值必須為true）keyboardNav鍵盤控制（左/右箭頭）pauseOnHover鼠標(biāo)指針經(jīng)過時暫停播放幻燈片manualAdvance是否手動播放幻燈片（設(shè)置屬性值為false，則自動播放幻燈片）captionOpacity字幕透明度prevText上一張圖片nextText下一張圖片randomStart是否從隨機圖片開始9.2.3NivoSlider插件（圖片切換）02OPTION方法方法說明beforeChange()動畫開始前觸發(fā)afterChange()動畫結(jié)束后觸發(fā)slideshowEnd()本輪循環(huán)結(jié)束時觸發(fā)lastSlide()最后一張圖片播放結(jié)束時觸發(fā)afterLoad()圖片加載完畢時觸發(fā)9.2.3NivoSlider插件（圖片切換）【例9-3】本實例使用NivoSlider插件實現(xiàn)仿淘寶首頁的廣告圖片切換效果。（1）新建一個index.html文件，將其放到9-3文件夾中。（2）將NivoSlider插件的themes文件夾、jquery.nivo.slider.js腳本文件、nivo-slider.css樣式文件以及jQuery的腳本文件復(fù)制到9-3文件夾中；此外新建一個名為images的文件夾，將要進行切換的圖片文件復(fù)制到該文件夾中。（3）使用VSCode打開index.html文件，在該文件中使用NivoSlider插件實現(xiàn)仿淘寶首頁的廣告圖片切換效果，進行圖片切換時，可以通過單擊網(wǎng)頁下方的縮略圖導(dǎo)航進行切換。代碼如下：9.2.3NivoSlider插件（圖片切換）【例9-3】本實例使用NivoSlider插件實現(xiàn)仿淘寶首頁的廣告圖片切換效果。使用Chrome瀏覽器運行index.html文件，效果如圖所示。程序可以自動實現(xiàn)圖片切換，此外用戶可以將鼠標(biāo)指針移動到圖片上，單擊圖片上的左/右箭頭實現(xiàn)圖片切換，也可以單擊網(wǎng)頁下方的縮略圖導(dǎo)航實現(xiàn)圖片切換。9.2.4Pagination插件（數(shù)據(jù)分頁）Pagination插件的常用屬性及說明如表所示。屬性說明maxentries總條目數(shù)items_per_page每頁顯示的條目數(shù)num_display_entries在連續(xù)分頁主體部分顯示分頁條目數(shù)current_page當(dāng)前選中的頁面num_edge_entries顯示的首尾分頁的條目數(shù)link_to分頁的鏈接prev_text“上一頁”分頁按鈕上顯示的文字next_text“下一頁”分頁按鈕上顯示的文字ellipse_text省略的頁數(shù)用什么文字表示prev_show_always是否顯示“上一頁”分頁按鈕next_show_always是否顯示“下一頁”分頁按鈕callback回調(diào)函數(shù)，一般用來裝載對應(yīng)分頁顯示的內(nèi)容9.2.4Pagination插件（數(shù)據(jù)分頁）【例9-4】本實例使用Pagination插件制作一個分頁顯示數(shù)據(jù)的網(wǎng)頁，其中要分頁顯示的數(shù)據(jù)需要通過AJAX異步獲取。（1）新建一個index.html文件，將其放到9-4文件夾中。（2）將Pagination插件所用的jquery.min.js腳本文件、jquery.pagination.js腳本和pagination.css樣式文件復(fù)制到9-4文件夾中。（3）新建一個load.html文件，存放在9-4文件夾中，該文件主要用來定義要異步獲取的數(shù)據(jù)。代碼如下：9.2.4Pagination插件（數(shù)據(jù)分頁）【例9-4】本實例使用Pagination插件制作一個分頁顯示數(shù)據(jù)的網(wǎng)頁，其中要分頁顯示的數(shù)據(jù)需要通過AJAX異步獲取。（4）使用VSCode打開index.html文件，在該文件中使用AJAX技術(shù)從load.html文件中異步獲取要分頁顯示的數(shù)據(jù)，然后通過設(shè)置Pagination插件的屬性對異步獲取的數(shù)據(jù)進行分頁顯示。代碼如下：>>運行結(jié)果9.2.4Pagination插件（數(shù)據(jù)分頁）【例9-4】本實例使用Pagination插件制作一個分頁顯示數(shù)據(jù)的網(wǎng)頁，其中要分頁顯示的數(shù)據(jù)需要通過AJAX異步獲取。9.2.5jQZoom插件（圖片放大鏡）jQZoom插件的常用屬性及說明如表所示。屬性說明zoomType默認(rèn)值：standard。另一個值為reverse，選擇是否將原圖用半透明圖層遮蓋zoomWidth默認(rèn)值：200。放大窗口的寬度zoomHeight默認(rèn)值：200。放大窗口的高度xOffset默認(rèn)值：10。放大窗口相對于原圖的x軸偏移值，可以為負(fù)yOffset默認(rèn)值：0。放大窗口相對于原圖的y軸偏移值，可以為負(fù)position默認(rèn)值：right。放大窗口的位置，值還可以為right、left、top、bottomlens默認(rèn)值：true。若值為false，則不在原圖上顯示鏡頭imageOpacity默認(rèn)值：0.2。當(dāng)zoomType屬性值為reverse時，這個屬性用于指定遮罩的透明度title默認(rèn)值：true。在放大窗口中顯示標(biāo)題，值可以為<a>標(biāo)記的title屬性值；若無<a>標(biāo)記，則為原圖的title屬性值showEffect默認(rèn)值：“show”。顯示放大窗口時的效果，值可以為show、fadeinhideEffect默認(rèn)值：“hide”。隱藏放大窗口時的效果，值可以為hide、fadeoutfadeinSpeed默認(rèn)值：“fast”。放大窗口的漸顯速度（值可以為fast、slow、medium）fadeoutSpeed默認(rèn)值：“slow”。放大窗口的漸隱速度（值可以為fast、slow、medium）

showPreload默認(rèn)值：true。是否顯示加載提示Loadingzoom（值可以為true、false）preloadText默認(rèn)值：Loadingzoom。自定義加載提示文本preloadPosition默認(rèn)值：“center”。加載提示的位置，值也可以為bycss，以通過CSS指定位置9.2.5jQZoom插件（圖片放大鏡）【例9-5】本實例使用jQZoom插件制作一個圖片放大鏡，運行程序后當(dāng)鼠標(biāo)指針在圖片上移動時，圖片的局部會以放大效果顯示在網(wǎng)頁的右側(cè)空白區(qū)域。（1）新建一個index.html文件，將其放到9-5文件夾中。（2）將jQZoom插件的css文件夾、js文件夾復(fù)制到9-5文件夾中。（3）使用VSCode打開index.html文件，在該文件中首先引入jQuery文件、jQZoom插件及其CSS樣式文件；然后定義一個JavaScript函數(shù)，使用jQZoom插件顯示圖片放大效果；最后在<body>標(biāo)記和</body>標(biāo)記區(qū)域中加入一個<div>標(biāo)記，在該<div>標(biāo)記中分別使用<img>標(biāo)記和<a>標(biāo)記設(shè)置要顯示的原圖和局部放大效果圖。代碼如下：9.2.5jQZoom插件（圖片放大鏡）【例9-5】本實例使用jQZoom插件制作一個圖片放大鏡，運行程序后當(dāng)鼠標(biāo)指針在圖片上移動時，圖片的局部會以放大效果顯示在網(wǎng)頁的右側(cè)空白區(qū)域。>>運行結(jié)果目錄導(dǎo)航9.1第三方j(luò)Query插件概述9.3項目實戰(zhàn)：使用ColorPicker插件制作顏色選擇器9.2常用第三方j(luò)Query插件的使用9.3項目實戰(zhàn)：使用ColorPicker插件制作顏色選擇器9.3項目實戰(zhàn)：使用ColorPicker插件制作顏色選擇器新建一個index.html文件，將其放到“項目實戰(zhàn)”文件夾中。將下載的Colorpicker插件的文件夾（包括jquery.colorpicker.js文件和jquery.js文件）復(fù)制到“項目實戰(zhàn)”文件夾中。使用VSCode打開index.html文件，在該文件中首先引入jQuery框架、ColorPicker插件，自定義body樣式，并自定義JavaScript函數(shù)來使用ColorPicker插件顯示顏色選擇器；然后在<body></body>區(qū)域中加入一個<div>標(biāo)記，在該<div>標(biāo)記中放置一個type屬性值為text的<input>標(biāo)記，用來在單擊時顯示顏色選擇器。代碼如下：010203學(xué)習(xí)快樂！工業(yè)和信息化精品系列教材人民郵電出版社第10單元jQuery性能優(yōu)化與技巧jQuery網(wǎng)頁特效設(shè)計基礎(chǔ)教程（慕課版）（第2版）工業(yè)和信息化精品系列教材人民郵電出版社掌握jQuery性能優(yōu)化的方法。掌握jQuery常用技巧的使用。教學(xué)目標(biāo)pedagogicalobjectives能夠熟練進行jQuery性能優(yōu)化。能夠熟練應(yīng)用jQuery常用技巧。培養(yǎng)系統(tǒng)化思維能力，從整體出發(fā)優(yōu)化性能，掌握簡化流程的技巧，提高資源配置與管理能力，形成效率與質(zhì)量并重的開發(fā)習(xí)慣。目錄導(dǎo)航10.1jQuery性能優(yōu)化10.3項目實戰(zhàn)：動態(tài)搜索過濾10.2jQuery常用技巧10.1jQuery性能優(yōu)化01OPTION使用一個var關(guān)鍵字來定義變量如果需要使用多個變量，建議使用var關(guān)鍵字對其進行定義。代碼如下：varpage=0,$loading=$('#loading'),$body=$('body');02OPTION定義jQuery變量時添加$符號在聲明或者定義變量的時候，如果定義的是jQuery變量，則添加一個$符號在變量前。代碼如下：var$loading=$('#loading');這樣定義jQuery變量的好處在于，可以有效地提示自己或者其他閱讀代碼的人，這是一個jQuery變量。10.1jQuery性能優(yōu)化03OPTION使用HTML5新的HTML5標(biāo)準(zhǔn)帶來的是更輕巧的DOM結(jié)構(gòu)，更輕巧的DOM結(jié)構(gòu)意味著使用jQuery時需要更少的遍歷以及獲得更優(yōu)良的載入性能，所以如果可以，請使用HTML5。04OPTION在需要的時候使用原生的JavaScript使用jQuery是一件很棒的事情，但是它也是JavaScript的一個框架，所以可以在需要的時候在jQuery代碼中使用原生的JavaScript，這樣能獲得更好的性能。10.1jQuery性能優(yōu)化05OPTION精簡jQuery代碼精簡前$button.click(function(){ $target.css('width','50%'); $target.css('border','1pxsolid#202020'); $target.css('color','#fff');});精簡后$button.click(function(){ $target.css({'width':'50%','border':'1pxsolid#202020','color':'#fff'});});10.1jQuery性能優(yōu)化06OPTION盡量使用.on()方法如果使用版本比較新的jQuery類庫，可使用.on()方法，其他任何方法都是最終使用.on()來實現(xiàn)的。在jQuery中執(zhí)行速度最快的選擇器是ID選擇器，因為它直接來自JavaScript的getElementById()方法。例如，下面的HTML代碼：07OPTION總是從ID選擇器來繼承如果像這樣選擇按鈕是低效的，代碼如下：vartraffic_button=$("#content.button");用ID選擇器直接選擇按鈕效率更高，代碼如下：vartraffic_button=$("#traffic_button");10.1jQuery性能優(yōu)化08OPTION在class前面使用tagjQuery中執(zhí)行速度第二快的選擇器是tag選擇器[例如$('head')]，因為它直接來自原生的JavaScript方法getElementsByTagName()，所以最好使用tag來修飾class（并且不要忘記就近的id）。代碼如下：varreceiveNewsletter=$('#nslForminput.on');此外，不要用tag來修飾id。例如，下面的示例將會遍歷所有的<div>元素來查找id屬性值為content的節(jié)點，代碼如下：varcontent=$('div#content');//非常慢，不要使用10.1jQuery性能優(yōu)化09OPTION使用jQuery的內(nèi)部函數(shù)data()來存儲信息在jQuery中，使用內(nèi)部函數(shù)data()存儲信息性能更好。代碼如下：$('#head').data('name','value');//之后在應(yīng)用中調(diào)用$('#head').data('name');10.1jQuery性能優(yōu)化10OPTION推遲到$(window).load$(document).ready()確實很有用，它在頁面渲染時，其他元素還沒載入完成即可執(zhí)行。如果發(fā)現(xiàn)頁面一直是載入中的狀態(tài)，很有可能是$(document).ready()函數(shù)引起的?？梢酝ㄟ^將jQuery函數(shù)綁定到$(window).load事件的方法來降低頁面載入時的CPU（CentralProcessingUnit，中央處理器）使用率，該函數(shù)會在所有的HTML（包括IFrame）載入完成后執(zhí)行。代碼如下：$(window).load(function(){//頁面完全載入后才初始化的jQuery函數(shù)});多余的功能，例如拖放、視覺特效和動畫、預(yù)載入隱藏圖像等，都適合使用這種性能優(yōu)化方法。10.1jQuery性能優(yōu)化11OPTION緩存jQuery對象不建議使用的代碼將jQuery對象緩存到一個變量中再操作的代碼10.1jQuery性能優(yōu)化12OPTION使用子查詢jQuery允許開發(fā)人員對一個已包裝的對象使用附加的選擇器操作，因為已經(jīng)在變量中保存了一個父元素，這樣可以大大提高對其子元素進行操作的效率。例如，有下面的HTML代碼：接下來可以使用子查詢來獲取亮或不亮的燈，并將其緩存以備后續(xù)操作。代碼如下：10.1jQuery性能優(yōu)化13OPTION對直接的DOM操作進行限制在jQuery中應(yīng)該對直接的DOM操作進行限制，遇到這種情況時，可以首先在內(nèi)存中創(chuàng)建需要的內(nèi)容，然后更新DOM，因為直接的DOM操作速度很慢。例如，如果需要動態(tài)地創(chuàng)建一組列表元素，一定不要使用下面的代碼：而應(yīng)該首先將一組列表元素在插入DOM之前全部創(chuàng)建好，代碼如下：10.1jQuery性能優(yōu)化13OPTION對直接的DOM操作進行限制然后在插入DOM之前，將多個元素包裹在一個單獨的父級節(jié)點中，這樣執(zhí)行速度更快，代碼如下：如果在執(zhí)行完上述步驟后，還是擔(dān)心性能有問題，那么可以嘗試下面的方法。使用jQuery的clone()方法，它會創(chuàng)建一個節(jié)點樹的副本，它允許以“離線”的方式進行DOM操作，當(dāng)操作完成后再返回節(jié)點樹。

DOMDocumentFragments的性能要明顯優(yōu)于直接的DOM操作的性能。10.1jQuery性能優(yōu)化14OPTIONDOM操作請務(wù)必記住緩存在jQuery代碼開發(fā)中，常常需要操作DOM。DOM操作是非常消耗資源的一個過程，而很多人往往都喜歡這樣使用jQuery：$('#loading').html('完畢');$('#loading').fadeOut();以上代碼沒有任何問題，但是這里需要注意，每次定義并且調(diào)用$('#loading')時，實際都創(chuàng)建了一個新的變量，這樣會很浪費資源。因此，如果需要重用$('#loading')，一定要將其定義在一個變量中，這樣可以有效地緩存變量內(nèi)容。代碼如下：var$loading=$('#loading');$loading.html('完畢');$loading.fadeOut();10.1jQuery性能優(yōu)化15OPTION直接給DOM元素添加<style>標(biāo)記要給少數(shù)DOM元素添加樣式，最好的方法就是使用jQuery的css()函數(shù)；然而，如果要給很多DOM元素添加樣式，直接給DOM元素添加<style>標(biāo)記會更有效，這樣可以避免在代碼中使用硬編碼。代碼如下：$('<styletype="text/css">div.class{color:red;}</style>').appendTo('head');16OPTION使用EventDelegation使用EventDelegation，僅需要在父級節(jié)點上綁定事件，然后查看哪個子節(jié)點（目標(biāo)節(jié)點）觸發(fā)了事件。代碼如下：$("table").delegate("td","hover",function(){$(this).toggleClass("hover");});10.1jQuery性能優(yōu)化17OPTION壓縮成一個主JavaScript文件如果已經(jīng)確定了哪些文件是應(yīng)該被下載的，那么應(yīng)該將它