创建jq插件步骤
程序员文章站
2022-05-18 09:22:24
无意看了这篇 "《jQuery插件开发精品教程,让你的jQuery提升一个台阶》" 文章,现在做一下总结。 一、jQuery插件的创建可以有三种方法 1.通过$.extend()来扩展jQuery 2.通过$.fn 向jQuery添加新的方法 3.通过$.widget()应用jQuery UI的部件 ......
无意看了这篇文章,现在做一下总结。
一、jQuery插件的创建可以有三种方法
1.通过$.extend()来扩展jQuery
2.通过$.fn 向jQuery添加新的方法
3.通过$.widget()应用jQuery UI的部件工厂方式创建
方法1太简单,创建后通过$.myfunction()方式调用,不能对指定元素调用。
方法3相对于方法2太复杂。
方法2就是常用的创建jq插件的方法。可以对指定元素进行操作。例如$('#title').myfunction();
二、jQuery插件创建格式
$.fn.myfunction = function() { //在这里面,this指的是用jQuery选中的元素 //example :$('a'),则this=$('a') this.css('color', 'red'); }
如果想要支持链式调用只需return一下即可。
$.fn.myfunction = function() { //在这里面,this指的是用jQuery选中的元素 //example :$('a'),则this=$('a') return this.css('color', 'red'); }
三、让插件接受参数,使用$.extend方法
$.fn.myPlugin = function(options) { var defaults = {//设置默认值 'color': 'red', 'fontSize': '12px' }; var settings = $.extend(defaults, options);//这种方法会使第一个参数会被修改,为了保持变量defaults的值不变应该使用以下代码 //var settings = $.extend({},defaults, options);//在extend方法的第一个参数添加一个空对象。 return this.css({ 'color': settings.color, 'fontSize': settings.fontSize }); }
四、面向对象的插件开发
为了以后代码维护和可读性我们可以进行面向对象的方法开发插件。
var Beautifier = function(ele, opt) { this.$element = ele, //获取当前选中的jq对象。 this.defaults = { 'color': 'red', 'fontSize': '12px' }, this.options = $.extend({}, this.defaults, opt) } //定义Beautifier的方法 Beautifier.prototype = { beautify: function() { return this.$element.css({ 'color': this.options.color, 'fontSize': this.options.fontSize }); } } //在插件中使用Beautifier对象 $.fn.myPlugin = function(options) { //创建Beautifier的实体 var beautifier = new Beautifier(this, options); //调用其方法 return beautifier.beautify(); }
推荐阅读
-
创建execl导入工具类的步骤
-
什么是OneThink oneThink后台添加插件步骤
-
使用IntelliJ IDEA 2017.2.5 x64中的Spring Initializr插件快速创建Spring Boot/Cloud工程(图解)
-
iOS 10 和Xcode8 一起 创建 Siri 功能步骤详解(OC写的 )
-
使用maven创建web项目的方法步骤(图文)
-
使用IntelliJ IDEA 2017.2.5 x64中的Spring Initializr插件快速创建Spring Boot/Cloud工程(图解)
-
maven利用tomcat插件部署远程Linux服务器的步骤详解
-
如何创建网站,个人免费建网站的流程与步骤
-
用Android MenuInflater创建菜单项的方法步骤
-
搭建网站的步骤有哪些,新手创建个人网站 3个步骤