2. 程式人生 > >jQuery外掛開發學習

jQuery外掛開發學習

阿新 • • 發佈：2019-02-12

1、jQuery外掛編寫準備

要使用jQuery進行自定義外掛的編寫，首先應該的是瞭解jQuery的外掛機制或者說是通過jQuery庫本身提供的哪些函式進行外掛的編寫，主要涉及的兩個函式是：jQuery.extend(object)和jQuery.fn.extend(object)，其具體作用可以通過查詢jQuery的API文件 得到，這裡也把API簡單轉過來：

A、 jQuery.extend(object)

擴充套件jQuery物件本身，用來在jQuery名稱空間上增加新函式。 例如： Js程式碼  收藏程式碼
  1. jQuery.extend({  
  2.   min: function
    (a, b) { return a < b ? a : b; },  
  3.   max: function(a, b) { return a > b ? a : b; }  
  4. });   
使用方法： Js程式碼  收藏程式碼
  1. jQuery.min(2,3);  //=> 2  
  2. $.max(4,5);         //=>5  
B、jQuery.fn.extend(object) 擴充套件 jQuery 元素集來提供新的方法（通常用來製作外掛）。具體例項將在下面進行一個簡單的示例來進行了解。

2、簡單的jQuery外掛的編寫

A、jQuery外掛的基本格式

Js程式碼  收藏程式碼
  1. /* 
  2.  * digitClocker 
  3.  * @author: zhoucl 
  4.  * @date  : 08/11/2011 
  5.  */  
  6. (function($, undefined){      
  7.       ...  
  8.       //code here  
  9.       ...  
  10. })(jQuery);  

B、將原來直接javascript編寫的一個電子時鐘改寫為jQuery外掛使用，程式碼如下：

Java程式碼  收藏程式碼
  1. /* 
  2.  * digitClocker 
  3.  * @author: zhoucl 
  4.  * @date  : 03/11/2011 
  5.  */  
  6. (function($, undefined){      
  7.     $.extend($.fn, {  
  8.         digitclocker: function(settings){  
  9.             var params = $.extend({  
  10.                 baseURL: '../js/jquery/custom_plugins/',  
  11.                 imgPath: 'digits/'  
  12.             }, settings);  
  13.             for(var i = 1; i < 9; i++) {  
  14.                 if(i % 3 == 0) $(this).append("<img alt='0' src='" + params.baseURL + params.imgPath + "colon.gif'>");  
  15.                 else $(this).append("<img class='clockImage' alt='0' src='" + params.baseURL + params.imgPath + "0.gif'>");  
  16.             }  
  17.             new DigitClock(params, $(this));  
  18.         }  
  19.     });  
  20.     setInterval(function(){  
  21.         DigitClock.reDraw();  
  22.     }, 1000);  
  23.     DigitClock = function(params, container) {  
  24.         this.params = params;  
  25.         this.container = container;  
  26.         DigitClock.clocks.push(this);  
  27.         DigitClock.reDraw();  
  28.     }  
  29.     DigitClock.clocks=[];  
  30.     DigitClock.reDraw = function() {  
  31.         var d=new Date();  
  32.         for (var i = 0; i < this.clocks.length; i++) {  
  33.             this.clocks[i].setTime(d.getHours(),d.getMinutes(),d.getSeconds());  
  34.         }  
  35.     }  
  36.     DigitClock.preZero = function(n, pos) {  
  37.         return ("0"._digitClockRepeat(pos-1)+n).slice(-pos);  
  38.     }  
  39.     DigitClock.prototype = {  
  40.         setTime : function(h, i ,s) {  
  41.             this.setImage(  
  42.                 DigitClock.preZero(h,2) + DigitClock.preZero(i,2) + DigitClock.preZero(s,2)  
  43.             )  
  44.         },  
  45.         setImage: function(s) {  
  46.             s = s.split("");  
  47.             var baseURL = this.params.baseURL;  
  48.             var imgPath = this.params.imgPath;  
  49.             var i = 0;  
  50.             $(".clockImage", this.container).each(function(){  
  51.                 $(this).attr("src", baseURL + imgPath + s[i++] +".gif");  
  52.             });  
  53.         }  
  54.     }  
  55.     String.prototype._digitClockRepeat = function(n) {  
  56.         return new Array(n+1).join(this);  
  57.     }  
  58. })(jQuery);  

 引用上述js檔案，在頁面中得呼叫程式碼如下：

Html程式碼  收藏程式碼
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  2. <html>  
  3.   <head>  
  4.     <title>simple_test.html</title>  
  5.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  6.     <meta http-equiv="description" content="this is my page">  
  7.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  8.     <!--呼叫jQuery的庫：jquery-1.5.2.js-->  
  9.     <script src="../js/jquery/jquery-1.5.2.js" type="text/javascript"></script>  
  10.     <script src="../js/jquery/custom_plugins/jquery.clzps.digitclock.js" type="text/javascript"></script>  
  11.     <script>  
  12.       $(function(){  
  13.           $('#digitClock').digitclocker({  
  14.         baseURL: '../js/jquery/custom_plugins/',  
  15.         imgPath: 'digits/'  
  16.       });  
  17.       });  
  18.     </script>  
  19.   </head>  
  20.   <body>  
  21.      <div id="digitClock"></div>  
  22.   </body>  
  23. </html>  

效果圖如下： 

相關推薦

jQuery外掛開發學習

1、jQuery外掛編寫準備 要使用jQuery進行自定義外掛的編寫，首先應該的是瞭解jQuery的外掛機制或者說是通過jQuery庫本身提供的哪些函式進行外掛的編寫，主要涉及的兩個函式是：jQuery.extend(object)和jQuery.fn.extend(o

jquery外掛開發學習筆記（五）——動態選擇觸發器

(function ($) { //var trigger_chosen; // if($("#test002").attr("checked")){ // trigger_chosen=$("#test002").val(); //

jQuery 外掛開發方法學習

文件介紹: 通過全面瞭解jquery外掛來學習如何自己動手編寫jquery外掛 http://www.aijquery.cn/Html/jqueryrumen/126.html jquery編寫外掛的方法 https://www.cnblogs.com/yuqingfamily/p/5813

JavaScript學習總結(四)——jQuery外掛開發與釋出

jQuery外掛就是以jQuery庫為基礎衍生出來的庫，jQuery外掛的好處是封裝功能，提高了程式碼的複用性，加快了開發速度，現在網路上開源的jQuery外掛非常多，隨著版本的不停迭代越來越穩定好用，在jQuery官網有許多外掛： 一、外掛開發基礎 1.1、$.exten

jQuery外掛開發jQuery.extend(object)和jQuery.fn.extend()

jQuery外掛開發分為2種 1、類級別 類級別你可以理解為拓展jquery類，最明顯的例子是$.ajax(...),相當於靜態方法。 開發擴充套件其方法時使用$.extend方法，即jQuery.extend(object);  程式碼如下： $.extend({ add:func

jquery外掛開發;(function ( $, window, document, undefined ){}(jQuery, window,document)分析

經常看到許多jquery外掛是這種形式: 1 2 3 ;（function( $, window, document, undefined ){}）{ //...code }(jquery,window,docu

jQuery外掛開發全解析,jQuery.extend , (function($){ , $.fn.pluginName，jqueryAPI參考文件

http://www.w3school.com.cn/jquery/event_focus.asp     jqueryAPI參考文件 序：匿名函式，匿名函式沒有實際名字，也沒有指標，怎麼執行滴？  其實大家可以看看小括號的意義就應該可以理解。小括號有返回值，也就是

Eclips外掛開發學習資源

最近斷斷續續的在研究Eclipse平臺的外掛開發，感覺這方面的資源比較少，所以整理在這裡，和大家分享 書籍：         Eclipse Plug-ins (3rd Edition) （中文書名

jquery 外掛開發／外掛編寫$.fn.extend(),$.extend()

jquery外掛開發大概有三種方式: 1,$.extend()-在jquery名稱空間即jquery本身上新增靜態方法;呼叫,例如:$.myPlugin();而非$('ele').myPlugin(); 2,$.fn.extend()- 3,$.widget()-$.ext

JQuery外掛開發入門

個人比較喜歡封裝，現在學習JQuery，總想封裝出自己喜歡的外掛，所以將JQuery外掛的開發稍加總結。 本文並不全面，主要針對自定義外掛的分類和語法進行總結，希望以後可以作為工具檢視。 注： jQuery外掛的完整開發文件可參考 類級別的外掛： 1、新增一個函式 1 jQuery.f

jQuery外掛開發精品教程，讓你的jQuery提升一個臺階

要說jQuery 最成功的地方，我認為是它的可擴充套件性吸引了眾多開發者為其開發外掛，從而建立起了一個生態系統。這好比大公司們爭相做平臺一樣，得平臺者得天下。蘋果，微軟，谷歌等巨頭，都有各自的平臺及生態圈。 學會使用jQuery並不難，因為它簡單易學，並且相信你接觸jQuery後肯定也使用或熟悉了不少其外掛

NPAPI外掛開發學習：實現非IE瀏覽器的類似ActiveX的本地程式(外掛)呼叫

轉載CSDN博友的一篇文章，方便以後學習。 一.Netscape Plugin Interface(NPAPI) 大致的說明可以看下官方文件Plugin 本文主要針對於javascript與外掛互動部分做一些交流,比如用於數字證書的操作(淘寶和支

jQuery外掛開發基礎入門

在實際開發工作中，總會碰到像滾動，分頁，日曆等展示效果的業務需求，對於接觸過jQuery以及熟悉jQuery使用的人來說，首先想到的肯定是尋找現有的jQuery外掛來滿足相應的展示需求。目前頁面中常用的一些元件，都有多種jQuery外掛可供選擇，網路上也有很多專門收集jQuery外掛的網站。利用jQuery外

jQuery外掛開發-----tab選項卡

經過實踐，發現我不是一個能夠堅持的人，所以一有計劃馬上執行，為了每天保持學習，敲程式碼，所以不斷看視訊教程，看書，當年成為學渣就是因為不能重複看一本書。為了分擔家裡負擔，好書重複翻看，好的視訊教程重複看，忍忍也就過去了，我需要提升！ 關於外掛，之前文章講過，this指向要

NPAPI外掛開發學習：Webkit的外掛機制

轉載CSDN博友的一篇關於NPAPI外掛機制的博文。 # 外掛機制(NPAPI plugin) ## 概述 Chromium中的NPAPI外掛(plugin)來源於mozilla的外掛機制。因為它被廣泛的應用，很多外掛廠商或者開發者基於它編寫了數以萬計的外掛，因而

jquery外掛編寫學習小結

編寫外掛的目的是給已經有的一系列方法或函式做一個封裝，以便在其他地方重複使用，方便後期維護和提高開發效率。 一、外掛的種類 jQuery的外掛主要分為3種類型。 1、封裝物件方法的外掛 2、封裝全域性函式的外掛 3、選擇器外掛 這裡我們主要討論第

jQuery外掛開發

Lightweight Start 模式 1.什麼是Lightweight模式 這種模式適合於外掛開發新手或者是隻是想實現簡單的功能，Lightweight start使用了以下內容： 常見最佳實踐 window、document和undefined

最簡單的jquery外掛開發示例

頁面三個DIV，一個按鈕。 點選按鈕後，三個DIV的高度調整為相同。 <!DOCTYPE html> <html> <head> <style> div { width: 40px;

jfinal+hbase+eclipse開發web專案詳細步驟02---jfinal工程中加入jquery外掛

本小節是在01工程步驟至上進行改進，主要改進內容有： 1、加入jquery外掛。 2、利用jquery外掛的ajax來做頁面與後臺的資料互動。 3、利用jquery來動態處理頁面資料與頁面顯示。 注意，在開發之前，我們先要準備好01工程和jquery外掛，jquery外掛下載，我用的是j

Android開發學習之路--Android Studio外掛開發

前言 因為使用了mvp和dagger,所以每次新的一個功能頁面都需要重新寫一堆東西，比如Activity, Fragment, Presenter，dagger等，而這些程式碼基本上都是大同小異，完全可以寫一個模板，然後生成，略微修改便可以完成我們需要的功能。