如何自己开发一个简单的jquery 插件

现在网上关于js和jquery封装的插件很多，我刚刚接触前端的时候，就很敬佩那些自己写插件的大牛们！因为是他们给网站开发更多的便利，很多网页效果，网上很多现成的插件！那么这些插件是如何写的呢看首先是有扎实的js和jquery技术基础，其次还有一些写插件的方法和技巧。关于js和jquery的技术基础，那是一个慢慢积累的过程。但是关于写插件的一些注意和技巧，本文可以略微介绍一下，方便以后写插件的时候用得到。

创新互联建站专注于陇南网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供陇南营销型网站建设，陇南网站制作、陇南网页设计、陇南网站官网定制、重庆小程序开发服务，打造陇南网络公司原创品牌,更为您提供陇南网站排名全网营销落地服务。

jquery插件开发模式

jquery插件一般有三种开发方式：

通过$.extend()来扩展jQuery

通过$.fn 向jQuery添加新的方法

通过$.widget()应用jQuery UI的部件工厂方式创建

第一种$.extend()相对简单，一般很少能够独立开发复杂插件，第三种是一种高级的开发模式，本文也不做介绍。第二种则是一般插件开发用到的方式，本文着重讲讲第二种。

jquery插件开发有几种

//类级别插件开发，主要是在jQuery中定义全局方法：

//第一种写法

jQuery.myFunc = function(str){

alert("直接在jquery中定义方法",str)

}

//调用方式 $.myFunc("hello!");

//第二种写法

jQuery.extend({

myFunc:function(str){

alert("extend扩展$的方法",str)

}

})

//调用方式 $.myFunc("hello!");

//第三种写法： 为了不污染全局，挂载一个对象作为命名空间，自定义的所有方法放在这里，保证jQuery全局安全。

jQuery.define={

myFunc:function(str){

alert("命名空间的写法",str)

}

}

//调用方式：$.define.myFunc("hello");

//以上三种是级别插件开发方式，不常用，从调用方式看出，他们是全局执行的，不需要绑定节点对象。

//对象级别插件开发：有规范模板

;(function($){

$.fn.plugin = function(options){

var defaults = {

//各种默认参数

}

var options = $.extend(defaults,options); //传入的参数覆盖默认参数

this.each(function(){

var _this = $(this); //缓存一下插件传进来的节点对象。

//执行内容

})

return $(this); //把节点对象返回去，为了支持链式调用。

}

})(jQuery);

//调用方式

$("selector").plugin({

//自定义参数，json格式

})

前端开发JS框架之jQuery的基础知识分享

jQuery对象是通过jQuery包装DOM对象后产生的对象

注意：jQuery对象只能使用jQuery里的方法，DOM对象只能使用DOM对象的方法

基本选择器

层级选择器：

基本筛选器：

属性选择器：

表单筛选器：

筛选器方法：

jQuery的一些方法：

注意：对于标签上有的能够看到的属性和自定义属性用attr()方法

对于返回布尔值比如checkbox，radion，option这三个标签是否被选中，用prop方法

事件绑定方式：

注意：DOM定义的事件可以用 .on()方法来绑定事件，但是jQuery定义的事件就不可以

常用事件有：

移除事件：把on改成off，就是移除 .on()绑定的事件

阻止后续事件执行：事件函数中添加 return false; (常用于阻止表单提交等）或者e.preventDefault()

阻止事件冒泡：添加e.stopPropagation()

利用父标签去捕获子标签的事件

推荐阅读：

前端开发框架之jQuery 和 Vue 的选择

前端开发之15个jQuery小技巧分享

前端开发之JQuery入门基础操作

前端开发框架jQuery的优势与基础知识分享

当前名称：jquery开发,jquery开发实战
转载来源：http://chengdu.cdxwcx.cn/article/dsgogjc.html