jquery plugins的意思為“jquery插件”,就是開發者用jquery編寫的一些工具,可以把它理解成使用jQuery封裝的一個功能或特效;在調用時只需要用很少的程式碼就能實現很好的效果。編寫jquery外掛的目的主要是為已經有的一系列方法或函數做一個封裝,以便在其他地方重複使用,方便後期維護並提高開發效率。
本教學操作環境:windows7系統、jquery3.6.1版本、Dell G3電腦。
plugins的意思為「插件」。 jquery plugins的意思為「jquery插件」。
什麼是jquery外掛?
jQuery插件,就是開發愛好者自己利用Jquery製作的特效,然後經過數據包或包裝處理成js文件,發佈到網路上供大家使用的腳本集合。
寫jquery外掛的目的主要是為已經有的一系列方法或函數做一個封裝,以便在其他地方重複使用,方便後期維護和提高開發效率。
通常這類外掛除了呼叫jQuery函式庫文件,還需要呼叫外掛檔。都有使用說明,一看即會。例如jQuery官網製作的插件jQuery,在使用它時不僅要連結庫文件,還要連結UI文件以及UI的CSS文件,如:
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
經過這幾部的操作,jQuery效果才能真正被引用到網頁文件中發揮作用。
外掛程式編寫
關於外掛程式的編寫,jquery官方給了一套物件層級開發外掛程式的模板:
;(function ($) { $.fn.plugin=function (options) { var defaults={ //各种参数、各种属性 }; //options合并到defaults上,defaults继承了options上的各种属性和方法,将所有的赋值给endOptions var endOptions=$.extend(defaults,options); this.each(function () { //实现功能的代码 }); }; })(jQuery);
模板要點:
1.函數全部放在閉包裡,外面的函數就呼叫不到裡面的參數了,比較安全
#2.前面加分號,避免不必要的麻煩
jquery外掛程式呼叫的方法:
1、透過$.extend()來拓展jquery
2、透過向$.fn來想jquery新增方法
3、透過$.widget()應用jQuery UI零件工場方法建立
其中的方法1沒辦法呼叫選擇器,只是被jQuery理解成為加入靜態方法,所以我們使用的時候不需要選取DOM物件
jquery常用的第三方外掛程式
JQuery有著豐富的第三方的插件,例如:樹形選單、日期控制、圖片切換插件、彈出視窗等等基本前台頁面上的元件都有對應插件,並且用JQuery插件做出來的效果很炫,並且可以根據自己需要去改寫和封裝插件,簡單實用。
以下介紹常用第三方外掛程式。
(1)Validation簡介
最常使用JavScript的場合就是表單的驗證,而jQuery作為一個優秀的JavaScript庫,也提供了一個優秀的表單驗證插件——Validation.Validation是歷史最悠久的jQuery插件之一,經過了全球範圍內不同項目的驗證,並得到了許多Web開發者的好評。作為標準的驗證方法庫,Validation擁有以下優點:
(2)外掛程式下載網址:http://bassistance.de/jquery-plugins/jquery-plugin-validation/
Validation外掛程式的官方API位址為:
http://docs.jquery.com/Plugins/Validation
(1)Form外掛程式簡介
jQuery Form外掛程式是優秀的Ajax表單插件,可以非常容易地、無侵入地升級HTML表單以支援Ajax。 jQuery有兩個核心方法-ajaxForm()和ajaxSubmit(),它們集合了從控製表單元素到決定如何管理提交程序的功能。另外iain,插件還包含其他的一些方法:formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()和resetForm()等
#(2)jQuery Form表單插件下載位址:http://jquery.malsup.com/form/。讀者可以下載插件,並在該網站上查看簡單上手說明、API、實例程式碼等。
(1)livequery外掛程式簡介
jQuery的事件綁定功能使得jQuery程式碼與HTML程式碼能夠完全分離,這樣程式碼的層次關係更加清晰,維護起來也更加簡單。然而對於動態載入到頁面的HTML元素,每次都需要重新綁定事件到這些元素上,十分不便。一款新的插件由此產生,即livequery,可以利用它來給對應的DOM元素註冊時間或觸發回調函數函數。不僅目前選擇器所匹配的元素會被綁定事件,而且後來透過JavaScript添加的元素都會被綁定事件。當元素不再和選擇器相符時,livequery會自動取消事件註冊,使得開發者不再需要關注HTML元素的來源,只需要關注如何撰寫其綁定的事件。
透過jQuery選擇器選擇一個DOM元素,livequery外掛程式會即時地在整個DOM範圍將其持久化。這意味著無論元素是先前存在的還是後來動態載入的,事件都會被綁定,就像是CSS為元素添加樣式一樣。同時,這款外掛幾乎在沒佔用什麼資源的情況下就做到了這些功能。
(2)jQuery livequery外掛程式的下載位址:http://plugins.jquery.com/livequery/
5、管理Cookie的插件:Cookie
Cookie是網站設計者放置在客戶端的小文字檔案。 Cookie能為使用者提供大量的便利,例如購物網站儲存使用者曾經瀏覽過的產品列表,或是入口網站記住使用者喜歡選擇瀏覽哪一類新聞。在使用者運作的情況下,還可以儲存使用者的登陸情況,使得使用者在造訪網站時不必每次都鍵入這些資訊。
jQuery提供了一個十分簡單的插件來管理網站的Cookie,該插件的名稱也是Cookie.
(2)jQuery Cookie插件的下載位址:http://plugins.jquery .com/cookie/
6、模態視窗外掛:SimpleModal
SimpleModal是一個輕量級的jQuery插件,它為模數態視窗的發展提供了一個強有力的接口,可以把它當作模態視窗的框架。 SimpleModal非常的靈活,可以創造你能夠想像到的任何東西i,而且 你還不需要考慮UI開發中的跨瀏覽器相關問題。
(2)SimpleModal外掛的下載位址:http://www.ericmmartin.com/projects/simplemodal/
7、延遲載入圖片外掛:lazyload延遲載入圖片或符合某些條件才開始載入圖片
下載網址:https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js
8、fly外掛程式新增購物車效果、實現拋物線運動
下載網址:https://github.com/amibug/fly
9、qrcode能夠在客戶端產生矩陣二維碼QRCode 的jquery外掛程式
##下載位址:https://github.com/ lrsjng/jquery-qrcode10、spinner
可以很方便的實現購物車數量的加減,也支援使用鍵盤上的上下鍵來改變購物車的數量。
下載網址:https://github.com/vsn4ik/jquery.spinner等等。 。 。 【推薦學習:jQuery影片教學
、web前端影片】
以上是什麼是jquery plugins的詳細內容。更多資訊請關注PHP中文網其他相關文章!