继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

你还不会创建jQuery插件 ?荐

慕UI0519722
关注TA
已关注
手记 296
粉丝 85
获赞 267

         如何创建一个jQuery插件
为什么要创建jQuery插件 ? 因为这样代码可以复用。我们有这样一个页面,页面上面有如下的文字(看源码),我们想要的效果是,当鼠标移到链接的时候,用一个浮动的div来显示a标签的title内容.

这是通过js来完成的。假设有一个方法tooltip(), 你只需要调用这个方法就能达成你的愿望,就像这样:

      $('a.tooltip').tooltip({           rounded: true       });   

假设我们把插件命名为tooltip,则需要定义一个jQuery.tooltip.js文件。这样命名只是为了说明这是jQuery的插件,实际上你可以随便命名这个文件名。下面来开始写我们的插件:

(function($){   #   ...code })(jQuery);

插件的代码必须包含在这个格式里。这里要注意,要确保你没有使用别的js库,否则这个美元符$,会发生冲突,如果要避免产生这种冲突,你最好在插件里都使用jQuery字符来代替美元符。
我们首先来定义插件函数:

$.fn.tooltip = function(options) {     ...}


然后设置默认的参数:

   var        defaults = {           background : '#e3e3e3',           color : 'black',           rounded: false      },

然后再用setting变量来接收用户自定义的参数,使用extend方法来merge这些参数。

settings = $.extend({}, defaults, options);


现在要开始写方法了,用户如果使用这个插件的时候,传入的jquery dom对象可能不只是一个元素,我们需要给每个class为tooltip的a标签都绑定好这个事件,那么就需要迭代了,这里jquery提供了each方法:

    this.each(function() {           var $this = $(this);           var title = this.title;           ... ...    }


这里为什么要用$this呢? 这是为了提醒自己,正在和jQuery对象打交道。
然后写鼠标事件等等,来看最后的代码:

(function($){    $.fn.tooltip = function(options) {                var          defaults = {            background: '#e3e3e3',            color: 'black',            rounded: false          },            settings = $.extend({}, defaults, options);                        this.each(function() {              var $this = $(this);              var title = this.title;                            if($this.is('a') && $this.attr('title') != '') {                  this.title = '';                  $this.hover(function(e) {                      // mouse over                      $('')                        .appendTo('body')                        .text(title)                        .hide()                        .css({                          backgroundColor: settings.background,                          color: settings.color,                          top: e.pageY + 10,                          left: e.pageX + 20                        })                        .fadeIn(350);                                            if(settings.rounded) {                      $('#tooltip').addClass('rounded');                    }                  }, function() {                      // mouse out                      $('#tooltip').remove();                  });               }                            $this.mousemove(function(e) {                  $('#tooltip').css({                      top: e.pageY + 10,                      left: e.pageX + 20                   });              });            });            // returns the jQuery object to allow for chainability.            return this;      }  })(jQuery); 


总结:
1. 这里有个小技巧,假如要定义多个变量:var a = {};var b = {};var c = {};可以这么写:vara = {},b = {},c = {};

2.插件代码里,循环内的this, 循环外的this,循环内的$(this)的关系, 实际上是jQuery对象和dom对象的关系。
页面上调用插件方法,插件方法内部的each外的this,则是jQuery对象,这个对象是个集合对象,也就是$('a.tooltip')这个对象,页面上共有2个class为tooltip的a标签。
jquery对象的$方法,返回的是jquery集合对象,里面的元素,如果你用get方法去调用得到的是dom,你用eq方法调用得到的是jquery对象,比如:$('a').eq(0)得到的是jquery对象$('a').get(0)得到的是dom对象,直接$('a')[0]得到的是dom对象,而jquery的each方法,我认为是迭代的是dom对象,而不是jquery对象,所以在each里面this是dom对象,而需要$(this)来得到jquery对象来进行操作 。把这个关系搞清楚就行了。 

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP