jQuery插件教程

Arno 发布于2019-08-21 10:22 / 1204人阅读

摘要：就是内部作为全局函数的插件添加到内核上去的。选择器插件扩充自己喜欢的一些选择器。在插件里的，经过了一些封装处理，就是表示对象。调用时，字体大小会运用插件里的默认值

jQuery插件的分类

jQuery插件有很多，有UI类，表单验证，输入类，特效类，Ajax类，滑动类，导航类，工具类，动画类等等。

jQuery的插件主要分为三类：

1、封装对象方法的插件：也就是基于某个DOM元素的jQuery对象，局部性
2、封装全局函数的插件：将独立的函数添加到jquery的命名空间之下。jquery.trim()就是jquery内部作为全局函数的插件添加到内核上去的。
3、选择器插件：扩充自己喜欢的一些选择器。类似于.toggle()

插件的基本要点

 1. 插件的文件名推荐为 jquery.[插件名].js，例如jquery.validate.js
 2. 所有的对象方法都应当附加到jQuery.fn对象上，而所有的全局函数都应当附加到jQuery对象本身上
 3. 在插件内部，this指向的是当前通过选择器获取的jQuery对象，而不像一般的方法那样，例如click()方法，内部的this指向的是DOM元素
 4. 可以通过this.each来遍历所有元素
 5. 所有的方法或函数插件，都应当以分号结尾，否则压缩时可能出问题，有的为了更加稳妥些，在插件的开始处加上一个分号
 6. 插件应该返回一个jQuery对象，这样可以保证插件的可链式操作。除非插件需要返回的是一些需要获取的量，例如字符串或者数组等
 7. 尽量利用闭包技巧历来避免变量名的冲突
 8. 引入的自定义插件必须在jQuery库后面

插件开发方式

jQuery插件开发方式主要有三种：

通过$.extend()来扩展jQuery
通过$.fn 向jQuery添加新的方法
通过$.widget()应用jQuery UI的部件工厂方式创建

通常我们使用第二种方法来进行简单插件开发，而第一种方法是在jQuery命名空间上添加了一个静态方法，并不能让我们选中DOM元素，然后再调用该方法。而第三种并不常用，也较为复杂

插件的结构

在开始编写jQuery插件时，我们有必要了解一下插件的基本结构，所有的jQuery插件都声明为jQuery.fn对象的方法：

jQuery.fn.showPlugin = function () {
      //code here
};

我们使用如下代码使用插件：

$("#plugin").showPlugin();

这里，我并没有使用$，这是为了避免命名冲突，如果要用 $ 的话，可以像下面这样把插件代码封装在一个自执行的匿名函数中，然后传入参数jQuery

(function($){
    jQuery.fn.showPlugin = function () {
        //code here
    };
})(jQUery);

$.extend

.extend()允许你使用一个或多个对象扩展基准对象，扩展的方式是依序将右边的对象合并到基准对象（左边第一个对象）。

;(function($){
    $.extend({
        "nav" : function () {

        }
    })
})(jQuery);

我们通过如下方法使用该全局方法：

$.nav();

前面（见：浅析jQuery整体框架与实现（上））我们说过，$.extend是全局性的，而$.fn.extend是局部性的，前面之所以要加分号是因为为了防止在此之前引入的js文件没有加分号

$.fn.myPlugin = function() {
    //在这里面,this指的是用jQuery选中的元素
    //example :$("a"),则this=$("a")
    this.css("color", "red");
}

this指代jQuery选择器返回的集合。在插件里的this，经过了一些封装处理，this就是表示jQuery对象。而不需要再次使用$()进行包装了

链式调用

要让插件实现链式调用只需要return该对象即可：

$.fn.myPlugin = function() {
    this.css("color", "red");
    return this.each(function() {
        //对每个元素进行操作
        $(this).append(" " + $(this).attr("href"));
    }))
}

使用return this.each(function () {} 这样就实现了我们的链式操作。

接收多个参数

$.fn.myPlugin = function(options) {    //经常用options表示有多个参数。
    var defaults = {
        "color": "red",
        "fontSize": "12px"
    };
    var settings = $.extend(defaults, options);
    return this.css({
        "color": settings.color,
        "fontSize": settings.fontSize
    });
}

调用时，字体大小会运用插件里的默认值：

$("a").myPlugin({
    "color": "#2C9929"
});

服务器托管私有云 jquery插件源码jquery jquery插件手写jQuery插件 jquery表单插件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85415.html

前端技术博客文章、书籍积累

摘要：好多编辑器例如等都支持这样的语法来快速的编写代码如何优雅地使用把标签放在结束标签之后结束标签之前的差别什么是响应式设计怎样进行书籍《JavaScriptDOM编程艺术》《JavaScript高级程序设计》《JavaScript框架设计》《JavaScript专家编程》《JavaScript Ninjia》《JavaScript语言精粹（修订版）》《JavaScript设计模式》《J...

LiangJ 2019-08-30 12:58 评论0 收藏0
前端技术博客文章、书籍积累

摘要：好多编辑器例如等都支持这样的语法来快速的编写代码如何优雅地使用把标签放在结束标签之后结束标签之前的差别什么是响应式设计怎样进行书籍《JavaScriptDOM编程艺术》《JavaScript高级程序设计》《JavaScript框架设计》《JavaScript专家编程》《JavaScript Ninjia》《JavaScript语言精粹（修订版）》《JavaScript设计模式》《J...

codercao 2019-08-19 18:10 评论0 收藏0
前端技术博客文章、书籍积累

摘要：好多编辑器例如等都支持这样的语法来快速的编写代码如何优雅地使用把标签放在结束标签之后结束标签之前的差别什么是响应式设计怎样进行书籍《JavaScriptDOM编程艺术》《JavaScript高级程序设计》《JavaScript框架设计》《JavaScript专家编程》《JavaScript Ninjia》《JavaScript语言精粹（修订版）》《JavaScript设计模式》《J...

huayeluoliuhen 2019-08-01 15:13 评论0 收藏0
前端必须要珍藏的技术文章和面试题

摘要：前端工程师学习资料，快速查找面试题，经典技术文章的总结，编程技巧，帮助学习者快速定位问题花点时间整理出一下前端工程师日常工作所需要的学习资料查找，帮助学习者快速掌握前端工程师开发的基本知识编程始于足下记住再牛逼的梦想也抵不住傻逼似的坚持蝴蝶前端工程师学习资料，快速查找面试题，经典技术文章的总结，编程技巧，帮助学习者快速定位问题花点时间整理出一下web前端工程师日常工作所需要的学习资料...

MoAir 2019-08-26 10:29 评论0 收藏0