jQuery外掛製作簡單介紹
將程式碼以外掛形式呈現將會是一種非常好的選擇,因為這樣程式碼的可重用性將會大大加強,下面就來簡單介紹一下如何製作jQuery外掛,希望能夠給需要的朋友帶來一定的幫助。
一.jQuery物件(類)的靜態函式:
程式碼例項如下:
[JavaScript] 純文字檢視 複製程式碼jQuery.foo = function() { alert("螞蟻部落歡迎您"); };
完整程式碼:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>自定義外掛-螞蟻部落</title> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> jQuery.foo=function(){ alert("螞蟻部落歡迎您"); }; jQuery.foo(); </script> </head> <body> </body> </html>
如果靜態函式較多的話可能會使名稱容易混淆,那麼採用名稱空間模式將是一個良好的選擇。
程式碼如下:
[JavaScript] 純文字檢視 複製程式碼jQuery.foos={ fun1:function(){ console.log("螞蟻部落一"); }, fun2:function(){ console.log('螞蟻部落二'); } }
二.物件例項方法:
程式碼如下:
[JavaScript] 純文字檢視 複製程式碼(function($){ $.fn.setbgColor=function(){ $("#thediv").css("backgroundColor","blue"); }; })(jQuery);
完整程式碼如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>自定義外掛-螞蟻部落</title> <style type="text/css"> #thediv { width:100px; height:100px; background-color:red; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> (function($){ $.fn.setbgColor=function(){ $("#thediv").css("backgroundColor","blue"); }; })(jQuery); $(document).ready(function(){ $('#thediv').setbgColor(); }) </script> </head> <body> <div id="thediv"></div> </body> </html>
相關文章
- 自定義jquery外掛簡單介紹jQuery
- jQuery自定義外掛簡單介紹jQuery
- jquery.cookie外掛使用簡單介紹jQueryCookie
- jQuery外掛開發流程簡單介紹jQuery
- jQuery外掛Tmpl使用方法簡單介紹jQuery
- jquery.lazyload.js外掛用法簡單介紹jQueryJS
- 製作一個超簡單的全屏外掛(基於JQuery)jQuery
- zTree外掛常鍵用法簡單介紹
- alertify提示外掛使用方式簡單介紹
- jQuery如何製作自定義外掛jQuery
- YprogressBar進度條外掛使用簡單介紹
- jquery實現的元素居中外掛簡單介紹jQuery
- cookie外掛-jquery.cookie.js介紹CookiejQueryJS
- Smint – 用於單頁網站製作 jQuery導航選單外掛網站jQuery
- jQuery Validate簡單介紹jQuery
- jQuery filter() 用法簡單介紹jQueryFilter
- ZOOM – 簡單的 jQuery 相簿外掛OOMjQuery
- cluetip關鍵詞連結外掛用法簡單介紹
- jQuery阻止事件冒泡簡單介紹jQuery事件
- jQuery自定義事件簡單介紹jQuery事件
- jquery動畫佇列簡單介紹jQuery動畫佇列
- 10個很棒的 jQuery 外掛和製作教程jQuery
- jquery外掛 - EasyDrag 簡單拖動欄jQuery
- Jquery外掛Nicescroll 製作漂亮的滾動條jQuery
- jQuery滑鼠雙擊事件簡單介紹jQuery事件
- jQuery建構函式簡單介紹jQuery函式
- chatgpt~外掛介紹ChatGPT
- jcrop+Fileapi圖片上傳裁剪外掛使用簡單介紹API
- jquery操作select下拉選單簡單介紹jQuery
- 一個簡單的以視訊作為網頁背景的jQuery 外掛網頁jQuery
- 網頁外掛製作網頁
- jQuery事件名稱空間簡單介紹jQuery事件
- 提高jquery效能的常用技巧簡單介紹jQuery
- jQuery構造物件例項簡單介紹jQuery物件
- jQuery常用的動畫函式簡單介紹jQuery動畫函式
- jQuery的index()函式用法簡單介紹jQueryIndex函式
- jquery解析json格式字串簡單介紹jQueryJSON字串
- jQuery表單外掛jQuery.formjQueryORM