jquery常用插件

《jquery常用插件》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫(kù)。

1、jquery常用插件表單驗(yàn)證插件——validate該插件自帶包含必填、數(shù)字、URL在內(nèi)容的驗(yàn)證規(guī)則，即時(shí)顯示異常信息，此外，還允許自定義驗(yàn)證規(guī)則，插件調(diào)用方法如下：$(form).validate({options})其中form參數(shù)表示表單元素名稱，options參數(shù)表示調(diào)用方法時(shí)的配置對(duì)象，所有的驗(yàn)證規(guī)則和異常信息顯示的位置都在該對(duì)象中進(jìn)行設(shè)置。例如，當(dāng)點(diǎn)擊表單中的“提交”按鈕時(shí)，調(diào)用validate插件驗(yàn)證用戶名輸入是否符合規(guī)則，并將異常信息顯示在頁(yè)面中，如下圖所示：在瀏覽器中顯示的效果：從圖中可以看出，在頁(yè)面中導(dǎo)入了valid

2、ate插件，當(dāng)用戶在輸入框中錄入用戶名時(shí)，自動(dòng)根據(jù)規(guī)則進(jìn)入驗(yàn)證，并顯示提示信息，驗(yàn)證成功后，表單才能提交。表單插件——form通過(guò)表單form插件，調(diào)用ajaxForm()方法，實(shí)現(xiàn)ajax方式向服務(wù)器提交表單數(shù)據(jù)，并通過(guò)方法中的options對(duì)象獲取服務(wù)器返回?cái)?shù)據(jù)，調(diào)用格式如下：$(form).ajaxForm({options})其中form參數(shù)表示表單元素名稱；options是一個(gè)配置對(duì)象，用于在發(fā)送ajax請(qǐng)求過(guò)程，設(shè)置發(fā)送時(shí)的數(shù)據(jù)和參數(shù)。例如，在頁(yè)面中點(diǎn)擊“提交”按鈕，調(diào)用form插件的ajaxForm()方法向服務(wù)器發(fā)送錄入

3、的用戶名和密碼數(shù)據(jù)，服務(wù)器接收后返回并顯示在頁(yè)面中，如下圖所示：在瀏覽器中顯示的效果：從圖中可以看出，當(dāng)點(diǎn)擊“提交”按鈕時(shí)，調(diào)用form表單插件中的ajaxForm()方法向指定的服務(wù)器以ajax方式發(fā)送數(shù)據(jù)，服務(wù)器接收后返回并將數(shù)據(jù)顯示。圖片燈箱插件——lightBox該插件可以用圓角的方式展示選擇中的圖片，使用按鈕查看上下張圖片，在加載圖片時(shí)自帶進(jìn)度條，還能以自動(dòng)播放的方式瀏覽圖片，調(diào)用格式如下：$(linkimage).lightBox({options})其中l(wèi)inkimage參數(shù)為包含圖片的元素名稱，options為插件

4、方法的配置對(duì)象。例如，以列表的方式在頁(yè)面中展示全部的圖片，當(dāng)用戶單擊其中某張圖片時(shí)，通過(guò)引入的圖片插件，采用“燈箱”的方式顯示所選的圖片，如下圖所示：在瀏覽器中顯示的效果：圖片放大鏡插件——jqzoom在調(diào)用jqzoom圖片放大鏡插件時(shí)，需要準(zhǔn)備一大一小兩張一樣的圖片，在頁(yè)面中顯示小圖片，當(dāng)鼠標(biāo)在小圖片中移動(dòng)時(shí)，調(diào)用該插件的jqzoom()方法，顯示與小圖片相同的大圖片區(qū)域，從而實(shí)現(xiàn)放大鏡的效果，調(diào)用格式如下：$(linkimage).jqzoom({options})其中l(wèi)inkimage參數(shù)為包含圖片的元素名稱，options

5、為插件方法的配置對(duì)象。例如，在頁(yè)面中，添加一個(gè)被元素包含的圖片元素，當(dāng)在圖片元素中移動(dòng)鼠標(biāo)時(shí)，在圖片的右邊，將顯示放大后的所選區(qū)域效果，如下圖所示：在瀏覽器中顯示的效果：從圖中可以看出，當(dāng)在小圖片中移動(dòng)鼠標(biāo)時(shí)，將調(diào)用放大鏡插件的jqzoom()方法，在圖片的右側(cè)顯示與小圖片所選區(qū)域相同的放大區(qū)域，實(shí)現(xiàn)放大鏡的效果。cookie插件——cookie使用cookie插件后，可以很方便地通過(guò)cookie對(duì)象保存、讀取、刪除用戶的信息，還能通過(guò)cookie插件保存用戶的瀏覽記錄，它的調(diào)用格式為：保存：$.cookie(key，value)

6、；讀?。?.cookie(key)，刪除：$.cookie(key，null)其中參數(shù)key為保存cookie對(duì)象的名稱，value為名稱對(duì)應(yīng)的cookie值。例如，當(dāng)點(diǎn)擊“設(shè)置”按鈕時(shí)，如果是“否保存用戶名”的復(fù)選框?yàn)檫x中狀態(tài)時(shí)，則使用cookie對(duì)象保存用戶名，否則，刪除保存的cookie用戶名，如下圖所示：在瀏覽器中顯示的效果：從圖中可以看出，由于在點(diǎn)擊“設(shè)置”按鈕時(shí)，選擇了保存用戶名，因此，輸入框中的值被cookie保存，下次打開瀏覽器時(shí)，直接獲取并顯示保存的cookie值。搜索插件——autocomplete搜索插件的功能是通

7、過(guò)插件的autocomplete()方法與文本框相綁定，當(dāng)文本框輸入字符時(shí)，綁定后的插件將返回與字符相近的字符串提示選擇，調(diào)用格式如下：$(textbox).autocomplete(urlData,[options]);其中，textbox參數(shù)為文本框元素名稱，urlData為插件返回的相近字符串?dāng)?shù)據(jù)，可選項(xiàng)參數(shù)options為調(diào)用插件方法時(shí)的配置對(duì)象。例如，當(dāng)用戶在文本框輸入內(nèi)容時(shí)，調(diào)用搜索插件的autocomplete()方法返回與輸入內(nèi)容相匹配的字符串?dāng)?shù)據(jù)，顯示在文本框下，提示選擇，如下圖所示：在瀏覽器中顯示的效果：從圖中可以看

8、出，當(dāng)文本框與搜索插件相綁定后，輸入任意字符時(shí)，都將返回與之相匹配的字符串，提示用戶選擇，文本框在空白雙擊時(shí)，顯示全部提示信息。右鍵菜單插件——contextmenu右鍵菜單插件可以綁定頁(yè)面中的任意元素，綁