Jquery插件編寫簡明教程

2019-11-20 20:54:52

字體：大中小

來源：轉載

供稿：網(wǎng)友

 /*
 1.jQuery插件文件名推薦命名為 jquery.[插件名].js 以免和其他javascript庫插件混淆。例如命名為jquery.color.js
 2.所有的對象方法名都應當附加到jQuery.fn對象上而所有的全局函數(shù)都應當附加到jQuery對象本身上。
 3.在插件內(nèi)部，this指向的是當前通過選擇器獲取的jquery對象，而不像一般方法哪樣，例如chick()方法，內(nèi)部的this指向的dom元素
 4.可以通過this.each來遍歷所有元素
 5.所有的方法或函數(shù)插件，都應當以分號結尾，否者壓縮的時候可能出現(xiàn)問題，為了更穩(wěn)妥一些，甚至可以在插件頭部先加上一個分號，
 以免他人不規(guī)范的代碼給查詢帶來影響。
 6.插件應該返回一個jquery對象，以保證插件可鏈式操作。除非插件需要返回的是一些需要回去的量，例如字符串或者數(shù)組
 7.避免在插件內(nèi)部使用$作為jquery對象的別名，而應使完整的jquery來表示，這樣可以避免沖突。當然，也可以利用閉包這種技巧來回避
 這兒問題，使插件內(nèi)部繼續(xù)使用$作為jquery的別名。
 */

 //;為了更好的兼容性，開始有個分號
 ;(function($){//此處將$作為匿名函數(shù)的形參
  //$.fn.extend 擴展插件
  $.fn.extend({
      "color":function(value){//color 自己寫的插件方法名
       //jQuery提供了css方法可以直接寫成this.css("屬性","值"); 
       return this.css("color",value);
      }
  });

 })(jQuery);//這里將jquery作為實參傳遞給匿名函數(shù)

 
 function red(){
  alert($("#div").color()+"證明插件可用");
  alert($("#div").color("red")+"證明插件返回了一個Jquery對象");
  $("#div").color("red");
 }

在HTML使用插件示例：

復制代碼代碼如下:

 <body>
      <div id="div" onclick="red()">dddddddddddddddd</div>
  </body>

上一篇：jquery選擇器原理介紹($()使用方法)

下一篇：jquery自動填充勾選框即把勾選框打上true

學習交流

索泰發(fā)布一款GTX 1070 Mini迷你版本:小機

索泰發(fā)布一款GTX 1070 Mini迷你版本:小機箱大愛...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注

国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

Jquery插件編寫簡明教程