現(xiàn)在網(wǎng)上關于js和jquery封裝的插件很多，我剛剛接觸前端的時候，就很敬佩那些自己寫插件的大牛們！因為是他們給網(wǎng)站開發(fā)更多的便利，很多網(wǎng)頁效果，網(wǎng)上很多現(xiàn)成的插件！那么這些插件是如何寫的呢看首先是有扎實的js和jquery技術基礎，其次還有一些寫插件的方法和技巧。關于js和jquery的技術基礎，那是一個慢慢積累的過程。但是關于寫插件的一些注意和技巧，本文可以略微介紹一下，方便以后寫插件的時候用得到。
創(chuàng)新互聯(lián)建站專注于隴南網(wǎng)站建設服務及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供隴南營銷型網(wǎng)站建設，隴南網(wǎng)站制作、隴南網(wǎng)頁設計、隴南網(wǎng)站官網(wǎng)定制、重慶小程序開發(fā)服務，打造隴南網(wǎng)絡公司原創(chuàng)品牌,更為您提供隴南網(wǎng)站排名全網(wǎng)營銷落地服務。
jquery插件開發(fā)模式
jquery插件一般有三種開發(fā)方式：
通過$.extend()來擴展jQuery
通過$.fn 向jQuery添加新的方法
通過$.widget()應用jQuery UI的部件工廠方式創(chuàng)建
第一種$.extend()相對簡單，一般很少能夠獨立開發(fā)復雜插件，第三種是一種高級的開發(fā)模式，本文也不做介紹。第二種則是一般插件開發(fā)用到的方式，本文著重講講第二種。
//類級別插件開發(fā)，主要是在jQuery中定義全局方法：
//第一種寫法
jQuery.myFunc = function(str){
alert("直接在jquery中定義方法",str)
}
//調(diào)用方式 $.myFunc("hello!");
//第二種寫法
jQuery.extend({
myFunc:function(str){
alert("extend擴展$的方法",str)
}
})
//調(diào)用方式 $.myFunc("hello!");
//第三種寫法： 為了不污染全局，掛載一個對象作為命名空間，自定義的所有方法放在這里，保證jQuery全局安全。
jQuery.define={
myFunc:function(str){
alert("命名空間的寫法",str)
}
}
//調(diào)用方式：$.define.myFunc("hello");
//以上三種是級別插件開發(fā)方式，不常用，從調(diào)用方式看出，他們是全局執(zhí)行的，不需要綁定節(jié)點對象。
//對象級別插件開發(fā)：有規(guī)范模板
;(function($){
$.fn.plugin = function(options){
var defaults = {
//各種默認參數(shù)
}
var options = $.extend(defaults,options); //傳入的參數(shù)覆蓋默認參數(shù)
this.each(function(){
var _this = $(this); //緩存一下插件傳進來的節(jié)點對象。
//執(zhí)行內(nèi)容
})
return $(this); //把節(jié)點對象返回去，為了支持鏈式調(diào)用。
}
})(jQuery);
//調(diào)用方式
$("selector").plugin({
//自定義參數(shù)，json格式
})
jQuery對象是通過jQuery包裝DOM對象后產(chǎn)生的對象
注意：jQuery對象只能使用jQuery里的方法，DOM對象只能使用DOM對象的方法
基本選擇器
層級選擇器：
基本篩選器：
屬性選擇器：
表單篩選器：
篩選器方法：
jQuery的一些方法：
注意：對于標簽上有的能夠看到的屬性和自定義屬性用attr()方法
對于返回布爾值比如checkbox，radion，option這三個標簽是否被選中，用prop方法
事件綁定方式：
注意：DOM定義的事件可以用 .on()方法來綁定事件，但是jQuery定義的事件就不可以
常用事件有：
移除事件：把on改成off，就是移除 .on()綁定的事件
阻止后續(xù)事件執(zhí)行：事件函數(shù)中添加 return false; (常用于阻止表單提交等）或者e.preventDefault()
阻止事件冒泡：添加e.stopPropagation()
利用父標簽去捕獲子標簽的事件
推薦閱讀：
前端開發(fā)框架之jQuery 和 Vue 的選擇
前端開發(fā)之15個jQuery小技巧分享
前端開發(fā)之JQuery入門基礎操作
前端開發(fā)框架jQuery的優(yōu)勢與基礎知識分享
重慶分公司
重慶分公司
