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

第9單元常用的第三方j(luò)Query插件jQuery網(wǎng)頁(yè)特效設(shè)計(jì)基礎(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)工具整合和問(wèn)題解決能力，提升開發(fā)效率，為實(shí)際項(xiàng)目實(shí)踐奠定基礎(chǔ)。目錄導(dǎo)航9.1第三方j(luò)Query插件概述9.3項(xiàng)目實(shí)戰(zhàn)：使用ColorPicker插件制作顏色選擇器9.2常用第三方j(luò)Query插件的使用9.1.1什么是第三方j(luò)Query插件提高Web網(wǎng)站的開發(fā)效率。高度集成、方便使用。根據(jù)自身需求進(jìn)行修改，增強(qiáng)可擴(kuò)展性。第三方j(luò)Query插件是一種用來(lái)提高Web網(wǎng)站開發(fā)效率、已經(jīng)封裝好的JavaScript腳本庫(kù)，由于jQuery的開源特性，現(xiàn)在有很多第三方j(luò)Query插件可供開發(fā)人員直接使用。第三方j(luò)Query插件的主要特點(diǎn)如下。界面美觀。9.1.2常用的第三方j(luò)Query插件插件說(shuō)明uploadify帶進(jìn)度條的文件上傳插件zTree樹菜單插件NivoSlider網(wǎng)頁(yè)中的圖片切換插件Pagination對(duì)網(wǎng)頁(yè)中的數(shù)據(jù)進(jìn)行分頁(yè)顯示插件BootstrapStarRating星星評(píng)分插件EasyZoom圖片縮放插件lazyload圖片延遲加載插件NotesForLightBox圖片燈箱插件jCarousel圖片幻燈片顯示插件Password-Strength密碼強(qiáng)度檢測(cè)插件ColorPicker顏色拾取器插件jQZoom圖片放大鏡插件9.1.3如何調(diào)用第三方j(luò)Query插件01第三方j(luò)Query插件是基于jQuery開發(fā)的，因此在調(diào)用時(shí)，首先需要添加相應(yīng)版本的jQuery庫(kù)。例如，添加版本3.6.4的jQuery庫(kù)，首先將版本3.6.4的jQuery庫(kù)jquery-3.6.4.min.js復(fù)制到網(wǎng)頁(yè)文件夾中，然后在HTML網(wǎng)頁(yè)中編寫如下代碼：02最后添加要使用的第三方j(luò)Query插件的JavaScript腳本文件及CSS樣式文件。例如，添加uploadify插件的JavaScript腳本文件及CSS樣式文件，首先將uploadify插件的JavaScript腳本文件及CSS樣式文件復(fù)制到網(wǎng)頁(yè)文件夾中，然后在HTML網(wǎng)頁(yè)中編寫如下代碼：<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>完成以上步驟后，即可通過(guò)定義JavaScript函數(shù)使用第三方j(luò)Query插件。例如，在網(wǎng)頁(yè)中初始化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',//后臺(tái)處理文件 'folder':'/uploads',//上傳文件夾 'queueSizeLimit':4,//限制每次選擇上傳文件的個(gè)數(shù) 'sizeLimit':6291456,//上傳文件大小限制的最大值 'fileDesc':'圖片文件',//文件類型的描述信息 'fileExt':'*.jpg;*.png;*.bmp;*.gif',//設(shè)置文件類型 });});目錄導(dǎo)航9.1第三方j(luò)Query插件概述9.3項(xiàng)目實(shí)戰(zhàn)：使用ColorPicker插件制作顏色選擇器9.2常用第三方j(luò)Query插件的使用9.2.1uploadify插件（文件上傳）01OPTION屬性屬性說(shuō)明auto是否自動(dòng)上傳buttonClass上傳按鈕樣式buttonText上傳按鈕文本checkScript檢查目標(biāo)文件夾中是否存在與上傳文件同名的文件dnd是否允許拖放dropTarget投放目標(biāo)選擇器fileObjName定義服務(wù)器接收參數(shù)名稱fileSizeLimit上傳文件的大小限制，該屬性值為0則表示無(wú)限制fileType允許上傳的文件類型。要允許所有文件類型，設(shè)置該屬性值為false；允許特定文件類型，則設(shè)置該屬性值為['image/jpeg','video/*']formData提交給服務(wù)器端的參數(shù)9.2.1uploadify插件（文件上傳）01OPTION屬性屬性說(shuō)明width上傳按鈕寬度height上傳按鈕高度itemTemplate隊(duì)列中項(xiàng)目的HTML標(biāo)記method上傳文件的提交方法，取值post或getmulti是否允許多文件上傳overrideEvents指定多個(gè)插件默認(rèn)事件中的事件，被指定的事件將不會(huì)執(zhí)行queueID指定用于顯示上傳隊(duì)列的父級(jí)元素id屬性值queueSizeLimit限制每次選擇上件文件的個(gè)數(shù)removeCompleted文件上傳完畢后，是否從上傳隊(duì)列中移除simUploadLimit一次可上傳的文件數(shù)量truncateLength指定文件名稱的截取長(zhǎng)度，設(shè)置該屬性值后，文件名稱超過(guò)指定長(zhǎng)度將會(huì)被截取uploadLimit指定允許上傳的最大文件數(shù)量uploadScript上傳處理腳本9.2.1uploadify插件（文件上傳）01OPTION屬性可以根據(jù)表9-2中列出的屬性對(duì)常用uploadify對(duì)插件進(jìn)行相應(yīng)的設(shè)置，代碼如下：9.2.1uploadify插件（文件上傳）02OPTION方法方法說(shuō)明clearQueue()清除文件隊(duì)列cancel()取消文件上傳upload()上傳文件destroy()銷毀上傳實(shí)例debug()輸出debug日志9.2.1uploadify插件（文件上傳）03OPTION事件事件說(shuō)明onInit在uploadify插件初始化結(jié)束時(shí)觸發(fā)該事件onFallback驗(yàn)證客戶端瀏覽器是否兼容onCheck驗(yàn)證客戶端文件是否存在onError驗(yàn)證客戶端設(shè)定的約束onSelect在每添加一個(gè)文件至上傳隊(duì)列時(shí)觸發(fā)該事件onDrop在文件被添加到該隊(duì)列文件時(shí)觸發(fā)該事件onProgress在上傳進(jìn)度更新時(shí)觸發(fā)該事件onAddQueueItem在文件被添加到上傳隊(duì)列時(shí)觸發(fā)該事件onUpload在執(zhí)行上傳操作時(shí)觸發(fā)該事件onUploadFile在上傳每一個(gè)文件時(shí)觸發(fā)該事件onUploadComplete在文件上傳完成后觸發(fā)該事件onQueueComplete在隊(duì)列中的所有文件上傳完成時(shí)觸發(fā)該事件onCancel在上傳被取消時(shí)觸發(fā)該事件onClearQueue在清空隊(duì)列時(shí)觸發(fā)該事件onDestroy在uploadify插件被銷毀時(shí)觸發(fā)該事件9.2.1uploadify插件（文件上傳）【例9-1】使用uploadify插件實(shí)現(xiàn)批量上傳文件的功能。（1）在文件夾9下創(chuàng)建新項(xiàng)目，命名為9-1，默認(rèn)主頁(yè)為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頁(yè)面中添加一個(gè)file控件，id屬性值設(shè)置為file_upload，用于選擇文件，再添加一個(gè)上傳按鈕，代碼如下：<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插件實(shí)現(xiàn)批量上傳文件的功能。（4）在<head></head>中編寫代碼，實(shí)現(xiàn)在頁(yè)面加載后初始化uploadify插件，并設(shè)置插件的相關(guān)屬性，其中包括上傳文件類型、上傳文件大小、是否可以選擇多個(gè)文件上傳以及是否自動(dòng)上傳等，通過(guò)設(shè)置這些屬性可以非常靈活地控制文件上傳。代碼如下：9.2.1uploadify插件（文件上傳）【例9-1】使用uploadify插件實(shí)現(xiàn)批量上傳文件的功能。（5）處理文件上傳的uploadify插件的PHP文件代碼如下：運(yùn)行結(jié)果9.2.2zTree插件（樹菜單）01OPTION屬性屬性說(shuō)明setting.treeIdzTree插件的唯一標(biāo)識(shí)。初始化zTree插件后，該屬性值等于用戶定義的zTree容器的id屬性值async.autoParam異步加載時(shí)需要自動(dòng)提交父節(jié)點(diǎn)屬性的參數(shù)async.dataFilter用于對(duì)AJAX返回?cái)?shù)據(jù)進(jìn)行預(yù)處理的函數(shù)async.dataTypeAJAX獲取的數(shù)據(jù)類型async.enable設(shè)置zTree插件是否開啟異步加載模式async.typeAJAX的HTTP請(qǐng)求模式async.urlAJAX獲取數(shù)據(jù)的URLcheck.enable設(shè)置zTree插件的節(jié)點(diǎn)上是否顯示復(fù)選框/單選按鈕9.2.2zTree插件（樹菜單）01OPTION屬性屬性說(shuō)明data.key.titlezTree插件的節(jié)點(diǎn)數(shù)據(jù)保存節(jié)點(diǎn)提示信息的屬性名稱data.key.urlzTree插件的節(jié)點(diǎn)數(shù)據(jù)保存節(jié)點(diǎn)鏈接的目標(biāo)URL的屬性名稱data.simpleData.enable確定zTree插件初始化時(shí)的節(jié)點(diǎn)數(shù)據(jù)、異步加載時(shí)的節(jié)點(diǎn)數(shù)據(jù)或addNodes()方法中輸入的newNodes數(shù)據(jù)是否采用簡(jiǎn)單數(shù)據(jù)模式（Array）data.simpleData.idKey節(jié)點(diǎn)數(shù)據(jù)中保存唯一標(biāo)識(shí)的屬性名稱data.simpleData.pIdKey節(jié)點(diǎn)數(shù)據(jù)中保存其父節(jié)點(diǎn)唯一標(biāo)識(shí)的屬性名稱view.expandSpeedzTree插件的節(jié)點(diǎn)展開、折疊時(shí)的動(dòng)畫速度，設(shè)置方法同jQuery動(dòng)畫效果中speed參數(shù)的設(shè)置方法view.selectedMulti設(shè)置是否允許同時(shí)選中多個(gè)節(jié)點(diǎn)view.showIcon設(shè)置zTree插件是否顯示節(jié)點(diǎn)的圖標(biāo)9.2.2zTree插件（樹菜單）02OPTION方法方法說(shuō)明$.fn.zTree.init()zTree插件初始化方法$.fn.zTree.destroy()從zTreev3.4開始提供銷毀zTree插件的方法$.fn.zTree.getZTreeObj()zTreev3.x專門提供的獲取zTree對(duì)象的方法callback.beforeAsync()用于捕獲異步加載之前的事件回調(diào)函數(shù)，zTree插件根據(jù)返回值確定是否允許進(jìn)行異步加載callback.beforeExpand()用于捕獲父節(jié)點(diǎn)展開之前的事件回調(diào)函數(shù)，zTree插件根據(jù)返回值確定是否允許展開操作callback.beforeDblClick()用于捕獲zTree插件上鼠標(biāo)雙擊之前的事件回調(diào)函數(shù)，zTree插件根據(jù)返回值確定是否觸發(fā)onDblClick事件回調(diào)函數(shù)callback.onAsyncError用于捕獲異步加載出現(xiàn)異常錯(cuò)誤時(shí)的事件回調(diào)函數(shù)callback.onAsyncSuccess()用于捕獲異步加載正常結(jié)束時(shí)的事件回調(diào)函數(shù)callback.onClick()用于捕獲節(jié)點(diǎn)被單擊時(shí)的事件回調(diào)函數(shù)callback.onDblClick()用于捕獲zTree插件上鼠標(biāo)雙擊之后的事件回調(diào)函數(shù)zTreeObj.getNodes()獲取zTree插件的全部節(jié)點(diǎn)數(shù)據(jù)zTreeObj.refresh()刷新zTree插件treeNode.getNextNode()獲取與treeNode相鄰的后一個(gè)節(jié)點(diǎn)treeNode.getPreNode()獲取與treeNode相鄰的前一個(gè)節(jié)點(diǎn)9.2.2zTree插件（樹菜單）【例9-2】本實(shí)例使用zTree插件異步加載大數(shù)據(jù)。（1）將zTree插件中的css文件夾復(fù)制到實(shí)例文件夾9-2中。創(chuàng)建一個(gè)名為js的文件夾，將jquery-3.6.4.min.js文件以及jquery.ztree.core-3.5.js文件復(fù)制到j(luò)s文件夾中。（2）創(chuàng)建一個(gè)名為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）在頁(yè)面的<body>標(biāo)記中創(chuàng)建兩個(gè)<ul>元素，一個(gè)用來(lái)顯示樹菜單，另一個(gè)用來(lái)顯示操作日志。代碼如下：<divclass="content_wrap"> <divclass="zTreeDemoBackgroundleft"> <ulid="treeDemo"class="ztree"></ul> </div><ulid="log"></ul></div>9.2.2zTree插件（樹菜單）【例9-2】本實(shí)例使用zTree插件異步加載大數(shù)據(jù)。（4）編寫jQuery代碼，開啟異步加載模式，顯示節(jié)點(diǎn)上的復(fù)選框，使用簡(jiǎn)單數(shù)據(jù)模式并設(shè)置父節(jié)點(diǎn)展開之前、異步加載正常結(jié)束時(shí)、異步加載出現(xiàn)異常錯(cuò)誤時(shí)的事件回調(diào)函數(shù)。具體代碼如下：9.2.2zTree插件（樹菜單）【例9-2】本實(shí)例使用zTree插件異步加載大數(shù)據(jù)。（5）設(shè)置父節(jié)點(diǎn)對(duì)象。代碼如下：（6）編寫函數(shù)getUrl()用來(lái)獲取接收頁(yè)面請(qǐng)求的URL。代碼如下：9.2.2zTree插件（樹菜單）【例9-2】本實(shí)例使用zTree插件異步加載大數(shù)據(jù)。（7）編寫父節(jié)點(diǎn)展開之前、異步加載正常結(jié)束時(shí)、異步加載出現(xiàn)異常結(jié)果時(shí)的事件回調(diào)函數(shù)以及顯示日志函數(shù)。具體代碼如下：9.2.2zTree插件（樹菜單）【例9-2】本實(shí)例使用zTree插件異步加載大數(shù)據(jù)。（8）初始化zTree插件。代碼如下：（9）編寫getBigData.php文件，用來(lái)返回存放子節(jié)點(diǎn)的JSON對(duì)象。具體代碼如下：9.2.2zTree插件（樹菜單）【例9-2】本實(shí)例使用zTree插件異步加載大數(shù)據(jù)。>>運(yùn)行結(jié)果9.2.3NivoSlider插件（圖片切換）01OPTION屬性屬性說(shuō)明effect過(guò)渡效果sliceseffect屬性為切片效果時(shí)的數(shù)量boxColseffect屬性為格子效果時(shí)的列boxRowseffect屬性為格子效果時(shí)的行animSpeed動(dòng)畫速度pauseTime圖片切換速度startSlide從第幾張開始directionNav是否顯示圖片切換按鈕（上/下頁(yè)）directionNavHide是否鼠標(biāo)指針經(jīng)過(guò)才顯示按鈕controlNav顯示序列導(dǎo)航controlNavThumbs顯示圖片導(dǎo)航9.2.3NivoSlider插件（圖片切換）01OPTION屬性屬性說(shuō)明controlNavThumbsFromRel使用<img>元素的rel屬性作為縮略圖地址controlNavThumbsSearch查找指定字符串（controlNavThumbs屬性值必須為true）controlNavThumbsReplace替換成指定字符（controlNavThumbs屬性值必須為true）keyboardNav鍵盤控制（左/右箭頭）pauseOnHover鼠標(biāo)指針經(jīng)過(guò)時(shí)暫停播放幻燈片manualAdvance是否手動(dòng)播放幻燈片（設(shè)置屬性值為false，則自動(dòng)播放幻燈片）captionOpacity字幕透明度prevText上一張圖片nextText下一張圖片randomStart是否從隨機(jī)圖片開始9.2.3NivoSlider插件（圖片切換）02OPTION方法方法說(shuō)明beforeChange()動(dòng)畫開始前觸發(fā)afterChange()動(dòng)畫結(jié)束后觸發(fā)slideshowEnd()本輪循環(huán)結(jié)束時(shí)觸發(fā)lastSlide()最后一張圖片播放結(jié)束時(shí)觸發(fā)afterLoad()圖片加載完畢時(shí)觸發(fā)9.2.3NivoSlider插件（圖片切換）【例9-3】本實(shí)例使用NivoSlider插件實(shí)現(xiàn)仿淘寶首頁(yè)的廣告圖片切換效果。（1）新建一個(gè)index.html文件，將其放到9-3文件夾中。（2）將NivoSlider插件的themes文件夾、jquery.nivo.slider.js腳本文件、nivo-slider.css樣式文件以及jQuery的腳本文件復(fù)制到9-3文件夾中；此外新建一個(gè)名為images的文件夾，將要進(jìn)行切換的圖片文件復(fù)制到該文件夾中。（3）使用VSCode打開index.html文件，在該文件中使用NivoSlider插件實(shí)現(xiàn)仿淘寶首頁(yè)的廣告圖片切換效果，進(jìn)行圖片切換時(shí)，可以通過(guò)單擊網(wǎng)頁(yè)下方的縮略圖導(dǎo)航進(jìn)行切換。代碼如下：9.2.3NivoSlider插件（圖片切換）【例9-3】本實(shí)例使用NivoSlider插件實(shí)現(xiàn)仿淘寶首頁(yè)的廣告圖片切換效果。使用Chrome瀏覽器運(yùn)行index.html文件，效果如圖所示。程序可以自動(dòng)實(shí)現(xiàn)圖片切換，此外用戶可以將鼠標(biāo)指針移動(dòng)到圖片上，單擊圖片上的左/右箭頭實(shí)現(xiàn)圖片切換，也可以單擊網(wǎng)頁(yè)下方的縮略圖導(dǎo)航實(shí)現(xiàn)圖片切換。9.2.4Pagination插件（數(shù)據(jù)分頁(yè)）Pagination插件的常用屬性及說(shuō)明如表所示。屬性說(shuō)明maxentries總條目數(shù)items_per_page每頁(yè)顯示的條目數(shù)num_display_entries在連續(xù)分頁(yè)主體部分顯示分頁(yè)條目數(shù)current_page當(dāng)前選中的頁(yè)面num_edge_entries顯示的首尾分頁(yè)的條目數(shù)link_to分頁(yè)的鏈接prev_text“上一頁(yè)”分頁(yè)按鈕上顯示的文字next_text“下一頁(yè)”分頁(yè)按鈕上顯示的文字ellipse_text省略的頁(yè)數(shù)用什么文字表示prev_show_always是否顯示“上一頁(yè)”分頁(yè)按鈕next_show_always是否顯示“下一頁(yè)”分頁(yè)按鈕callback回調(diào)函數(shù)，一般用來(lái)裝載對(duì)應(yīng)分頁(yè)顯示的內(nèi)容9.2.4Pagination插件（數(shù)據(jù)分頁(yè)）【例9-4】本實(shí)例使用Pagination插件制作一個(gè)分頁(yè)顯示數(shù)據(jù)的網(wǎng)頁(yè)，其中要分頁(yè)顯示的數(shù)據(jù)需要通過(guò)AJAX異步獲取。（1）新建一個(gè)index.html文件，將其放到9-4文件夾中。（2）將Pagination插件所用的jquery.min.js腳本文件、jquery.pagination.js腳本和pagination.css樣式文件復(fù)制到9-4文件夾中。（3）新建一個(gè)load.html文件，存放在9-4文件夾中，該文件主要用來(lái)定義要異步獲取的數(shù)據(jù)。代碼如下：9.2.4Pagination插件（數(shù)據(jù)分頁(yè)）【例9-4】本實(shí)例使用Pagination插件制作一個(gè)分頁(yè)顯示數(shù)據(jù)的網(wǎng)頁(yè)，其中要分頁(yè)顯示的數(shù)據(jù)需要通過(guò)AJAX異步獲取。（4）使用VSCode打開index.html文件，在該文件中使用AJAX技術(shù)從load.html文件中異步獲取要分頁(yè)顯示的數(shù)據(jù)，然后通過(guò)設(shè)置Pagination插件的屬性對(duì)異步獲取的數(shù)據(jù)進(jìn)行分頁(yè)顯示。代碼如下：>>運(yùn)行結(jié)果9.2.4Pagination插件（數(shù)據(jù)分頁(yè)）【例9-4】本實(shí)例使用Pagination插件制作一個(gè)分頁(yè)顯示數(shù)據(jù)的網(wǎng)頁(yè)，其中要分頁(yè)顯示的數(shù)據(jù)需要通過(guò)AJAX異步獲取。9.2.5jQZoom插件（圖片放大鏡）jQZoom插件的常用屬性及說(shuō)明如表所示。屬性說(shuō)明zoomType默認(rèn)值：standard。另一個(gè)值為reverse，選擇是否將原圖用半透明圖層遮蓋zoomWidth默認(rèn)值：200。放大窗口的寬度zoomHeight默認(rèn)值：200。放大窗口的高度xOffset默認(rèn)值：10。放大窗口相對(duì)于原圖的x軸偏移值，可以為負(fù)yOffset默認(rèn)值：0。放大窗口相對(duì)于原圖的y軸偏移值，可以為負(fù)position默認(rèn)值：right。放大窗口的位置，值還可以為right、left、top、bottomlens默認(rèn)值：true。若值為false，則不在原圖上顯示鏡頭imageOpacity默認(rèn)值：0.2。當(dāng)zoomType屬性值為reverse時(shí)，這個(gè)屬性用于指定遮罩的透明度title默認(rèn)值：true。在放大窗口中顯示標(biāo)題，值可以為<a>標(biāo)記的title屬性值；若無(wú)<a>標(biāo)記，則為原圖的title屬性值showEffect默認(rèn)值：“show”。顯示放大窗口時(shí)的效果，值可以為show、fadeinhideEffect默認(rèn)值：“hide”。隱藏放大窗口時(shí)的效果，值可以為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，以通過(guò)CSS指定位置9.2.5jQZoom插件（圖片放大鏡）【例9-5】本實(shí)例使用jQZoom插件制作一個(gè)圖片放大鏡，運(yùn)行程序后當(dāng)鼠標(biāo)指針在圖片上移動(dòng)時(shí)，圖片的局部會(huì)以放大效果顯示在網(wǎng)頁(yè)的右側(cè)空白區(qū)域。（1）新建一個(gè)index.html文件，將其放到9-5文件夾中。（2）將jQZoom插件的css文件夾、js文件夾復(fù)制到9-5文件夾中。（3）使用VSCode打開index.html文件，在該文件中首先引入jQuery文件、jQZoom插件及其CSS樣式文件；然后定義一個(gè)JavaScript函數(shù)，使用jQZoom插件顯示圖片放大效果；最后在<body>標(biāo)記和</body>標(biāo)記區(qū)域中加入一個(gè)<div>標(biāo)記，在該<div>標(biāo)記中分別使用<img>標(biāo)記和<a>標(biāo)記設(shè)置要顯示的原圖和局部放大效果圖。代碼如下：9.2.5jQZoom插件（圖片放大鏡）【例9-5】本實(shí)例使用jQZoom插件制作一個(gè)圖片放大鏡，運(yùn)行程序后當(dāng)鼠標(biāo)指針在圖片上移動(dòng)時(shí)，圖片的局部會(huì)以放大效果顯示在網(wǎng)頁(yè)的右側(cè)空白區(qū)域。>>運(yùn)行結(jié)果目錄導(dǎo)航9.1第三方j(luò)Query插件概述9.3項(xiàng)目實(shí)戰(zhàn)：使用ColorPicker插件制作顏色選擇器9.2常用第三方j(luò)Query插件的使用9.3項(xiàng)目實(shí)戰(zhàn)：使用ColorPicker插件制作顏色選擇器9.3項(xiàng)目實(shí)戰(zhàn)：使用ColorPicker插件制作顏色選擇器新建一個(gè)index.html文件，將其放到“項(xiàng)目實(shí)戰(zhàn)”文件夾中。將下載的Colorpicker插件的文件夾（包括jquery.colorpicker.js文件和jquery.js文件）復(fù)制到“項(xiàng)目實(shí)戰(zhàn)”文件夾中。使用VSCode打開index.html文件，在該文件中首先引入jQuery框架、ColorPicker插件，自定義body樣式，并自定義JavaScript函數(shù)來(lái)使用ColorPicker插件顯示顏色選擇器；然后在<body></body>區(qū)域中加入一個(gè)<div>標(biāo)記，在該<div>標(biāo)記中放置一個(gè)type屬性值為text的<input>標(biāo)記，用來(lái)在單擊時(shí)顯示顏色選擇器。代碼如下：010203學(xué)習(xí)快樂(lè)！工業(yè)和信息化精品系列教材人民郵電出版社第10單元jQuery性能優(yōu)化與技巧jQuery網(wǎng)頁(yè)特效設(shè)計(jì)基礎(chǔ)教程（慕課版）（第2版）工業(yè)和信息化精品系列教材人民郵電出版社掌握jQuery性能優(yōu)化的方法。掌握jQuery常用技巧的使用。教學(xué)目標(biāo)pedagogicalobjectives能夠熟練進(jìn)行jQuery性能優(yōu)化。能夠熟練應(yīng)用jQuery常用技巧。培養(yǎng)系統(tǒng)化思維能力，從整體出發(fā)優(yōu)化性能，掌握簡(jiǎn)化流程的技巧，提高資源配置與管理能力，形成效率與質(zhì)量并重的開發(fā)習(xí)慣。目錄導(dǎo)航10.1jQuery性能優(yōu)化10.3項(xiàng)目實(shí)戰(zhàn)：動(dòng)態(tài)搜索過(guò)濾10.2jQuery常用技巧10.1jQuery性能優(yōu)化01OPTION使用一個(gè)var關(guān)鍵字來(lái)定義變量如果需要使用多個(gè)變量，建議使用var關(guān)鍵字對(duì)其進(jìn)行定義。代碼如下：varpage=0,$loading=$('#loading'),$body=$('body');02OPTION定義jQuery變量時(shí)添加$符號(hào)在聲明或者定義變量的時(shí)候，如果定義的是jQuery變量，則添加一個(gè)$符號(hào)在變量前。代碼如下：var$loading=$('#loading');這樣定義jQuery變量的好處在于，可以有效地提示自己或者其他閱讀代碼的人，這是一個(gè)jQuery變量。10.1jQuery性能優(yōu)化03OPTION使用HTML5新的HTML5標(biāo)準(zhǔn)帶來(lái)的是更輕巧的DOM結(jié)構(gòu)，更輕巧的DOM結(jié)構(gòu)意味著使用jQuery時(shí)需要更少的遍歷以及獲得更優(yōu)良的載入性能，所以如果可以，請(qǐng)使用HTML5。04OPTION在需要的時(shí)候使用原生的JavaScript使用jQuery是一件很棒的事情，但是它也是JavaScript的一個(gè)框架，所以可以在需要的時(shí)候在jQuery代碼中使用原生的JavaScript，這樣能獲得更好的性能。10.1jQuery性能優(yōu)化05OPTION精簡(jiǎn)jQuery代碼精簡(jiǎn)前$button.click(function(){ $target.css('width','50%'); $target.css('border','1pxsolid#202020'); $target.css('color','#fff');});精簡(jiǎn)后$button.click(function(){ $target.css({'width':'50%','border':'1pxsolid#202020','color':'#fff'});});10.1jQuery性能優(yōu)化06OPTION盡量使用.on()方法如果使用版本比較新的jQuery類庫(kù)，可使用.on()方法，其他任何方法都是最終使用.on()來(lái)實(shí)現(xiàn)的。在jQuery中執(zhí)行速度最快的選擇器是ID選擇器，因?yàn)樗苯觼?lái)自JavaScript的getElementById()方法。例如，下面的HTML代碼：07OPTION總是從ID選擇器來(lái)繼承如果像這樣選擇按鈕是低效的，代碼如下：vartraffic_button=$("#content.button");用ID選擇器直接選擇按鈕效率更高，代碼如下：vartraffic_button=$("#traffic_button");10.1jQuery性能優(yōu)化08OPTION在class前面使用tagjQuery中執(zhí)行速度第二快的選擇器是tag選擇器[例如$('head')]，因?yàn)樗苯觼?lái)自原生的JavaScript方法getElementsByTagName()，所以最好使用tag來(lái)修飾class（并且不要忘記就近的id）。代碼如下：varreceiveNewsletter=$('#nslForminput.on');此外，不要用tag來(lái)修飾id。例如，下面的示例將會(huì)遍歷所有的<div>元素來(lái)查找id屬性值為content的節(jié)點(diǎn)，代碼如下：varcontent=$('div#content');//非常慢，不要使用10.1jQuery性能優(yōu)化09OPTION使用jQuery的內(nèi)部函數(shù)data()來(lái)存儲(chǔ)信息在jQuery中，使用內(nèi)部函數(shù)data()存儲(chǔ)信息性能更好。代碼如下：$('#head').data('name','value');//之后在應(yīng)用中調(diào)用$('#head').data('name');10.1jQuery性能優(yōu)化10OPTION推遲到$(window).load$(document).ready()確實(shí)很有用，它在頁(yè)面渲染時(shí)，其他元素還沒(méi)載入完成即可執(zhí)行。如果發(fā)現(xiàn)頁(yè)面一直是載入中的狀態(tài)，很有可能是$(document).ready()函數(shù)引起的?？梢酝ㄟ^(guò)將jQuery函數(shù)綁定到$(window).load事件的方法來(lái)降低頁(yè)面載入時(shí)的CPU（CentralProcessingUnit，中央處理器）使用率，該函數(shù)會(huì)在所有的HTML（包括IFrame）載入完成后執(zhí)行。代碼如下：$(window).load(function(){//頁(yè)面完全載入后才初始化的jQuery函數(shù)});多余的功能，例如拖放、視覺(jué)特效和動(dòng)畫、預(yù)載入隱藏圖像等，都適合使用這種性能優(yōu)化方法。10.1jQuery性能優(yōu)化11OPTION緩存jQuery對(duì)象不建議使用的代碼將jQuery對(duì)象緩存到一個(gè)變量中再操作的代碼10.1jQuery性能優(yōu)化12OPTION使用子查詢jQuery允許開發(fā)人員對(duì)一個(gè)已包裝的對(duì)象使用附加的選擇器操作，因?yàn)橐呀?jīng)在變量中保存了一個(gè)父元素，這樣可以大大提高對(duì)其子元素進(jìn)行操作的效率。例如，有下面的HTML代碼：接下來(lái)可以使用子查詢來(lái)獲取亮或不亮的燈，并將其緩存以備后續(xù)操作。代碼如下：10.1jQuery性能優(yōu)化13OPTION對(duì)直接的DOM操作進(jìn)行限制在jQuery中應(yīng)該對(duì)直接的DOM操作進(jìn)行限制，遇到這種情況時(shí)，可以首先在內(nèi)存中創(chuàng)建需要的內(nèi)容，然后更新DOM，因?yàn)橹苯拥腄OM操作速度很慢。例如，如果需要?jiǎng)討B(tài)地創(chuàng)建一組列表元素，一定不要使用下面的代碼：而應(yīng)該首先將一組列表元素在插入DOM之前全部創(chuàng)建好，代碼如下：10.1jQuery性能優(yōu)化13OPTION對(duì)直接的DOM操作進(jìn)行限制然后在插入DOM之前，將多個(gè)元素包裹在一個(gè)單獨(dú)的父級(jí)節(jié)點(diǎn)中，這樣執(zhí)行速度更快，代碼如下：如果在執(zhí)行完上述步驟后，還是擔(dān)心性能有問(wèn)題，那么可以嘗試下面的方法。使用jQuery的clone()方法，它會(huì)創(chuàng)建一個(gè)節(jié)點(diǎn)樹的副本，它允許以“離線”的方式進(jìn)行DOM操作，當(dāng)操作完成后再返回節(jié)點(diǎn)樹。

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