zoukankan      html  css  js  c++  java
  • 编写jQuery插件

    Jquery的插件主要分为三类:
      1.封装方法插件
            封装方法插件在本质上来说,是一个对象级别的插件,这类插件首先通过jQuery选择器获取对象,并为对象添加方法,然后,将方法进行打包,封闭成一个插件,这种类型的插件编写简单,极易调用,也很方便地使用了jQuery中功能强大的选择器,因此,成为开发插件的首选.
      2.封装函数插件
            封闭函数插件是一个类级别的插件,这类插件最大的特点,就是可以直接给jQuery添加静态方法,并且可以将函数置于jQuery命名空间中,如最为觉的就是$.ajax(),$.trim()全局性函数,都是以内部插件的形式植入jQuery内核中.
      3.选择器插件:扩充自己喜欢的一些选择器。

     1 ;(function($){
     2     $.fn.name = function(options){  //各种属性、参数
     3        var options = $.extend(defaults, options);//定义参数
     4        this.each(function(){
     5            //插件实现代码
     6            return this;
     7        });
     8     };
     9 
    10     $.fn.highlight.defaults = {
    11         //默认属性参数    
    12     };
    13 })(jQuery);
    14 
    15 //调用
    16 $.fn.name.defaults.x = '';
    17 $('#id').name();

    (1)、“;(function($){    })(jQuery);”使用了匿名函数,表示在方法体内的”$”表示的就是”jquery”,为了有更好的兼容性,所以在前面添加一个分号
    ,这里的$符号是作为匿名函数的形参
    (2)、$.extend(defaults, options);表示的是如果options中的参数总是有值的话,那么options中的值将会代替defaults中的值。

    jQuery extend()和jQuery.fn.extend()两者调用方式不同:

           jQuery.extend(),一般由传入的全局函数来调用,主要是用来拓展个全局函数,如$.init(),$.ajax();

           jQuery.fn.extend(),一般由具体的实例对象来调用,可以用来拓展个选择器,例如$.fn.each();

    jQuery extend()和jQuery.fn.extend()两者的主要功能作用不同:

            jQuery.extend(object); 为扩展jQuery类本身,为自身添加新的方法。

            jQuery.fn.extend(object);给jQuery对象添加方法

    //step01 定义JQuery的作用域
    (function ($) {
        //step03-a 插件的默认值属性
        var defaults = {
            prevId: 'prevBtn',
            prevText: 'Previous',
            nextId: 'nextBtn',
            nextText: 'Next'
            //……
        };
        //step06-a 在插件里定义方法
        var showLink = function (obj) {
            $(obj).append(function () { return "(" + $(obj).attr("href") + ")" });
        }
    
        //step02 插件的扩展方法名称
        $.fn.easySlider = function (options) {
            //step03-b 合并用户自定义属性,默认属性
            var options = $.extend(defaults, options);
            //step4 支持JQuery选择器
            //step5 支持链式调用
            return this.each(function () {
                //step06-b 在插件里定义方法
                showLink(this);
            });
        }
    })(jQuery);
  • 相关阅读:
    【LeetCode】1248. 统计「优美子数组」
    【LeetCode】200. 岛屿数量
    【LeetCode】53. 最大子序和
    【剑指Offer】面试题42. 连续子数组的最大和
    【剑指Offer】面试题57. 和为s的两个数字
    【LeetCode】55. 跳跃游戏
    【LeetCode】56. 合并区间
    简历HTML网页版
    关于新建Eclipse新建一个WEB项目后创建一个jsp文件头部报错问题?
    jquery选择器 看这个链接吧!2017.6.2
  • 原文地址:https://www.cnblogs.com/aaron911/p/7581814.html
Copyright © 2011-2022 走看看