码迷,mamicode.com
首页 > Web开发 > 详细

jquery插件开发事项

时间:2015-05-27 06:24:11      阅读:137      评论:0      收藏:0      [点我收藏+]

标签:

  • http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html
  • http://www.w2bc.com/Article/13951
  • http://www.w3cschool.cc/w3cnote/jquery-10-skill.html

this

在插件名字定义的函数内部,this指代的是我们在调用该插件时,用jQuery选择器选中的元素,一般是一个jQuery类型的集合。比 如$(‘a‘)返回的是页面上所有a标签的集合,且这个集合已经是jQuery包装类型了,也就是说,在对其进行操作的时候可以直接调用jQuery的其 他方法而不需要再用美元符号来包装一下。

我们已经知道this指代jQuery选择器返回的集合,那么通过调用jQuery的.each()方法就可以处理合集中的每个元素了,但此刻要注意的 是,在each方法内部,this指带的是普通的DOM元素了,如果需要调用jQuery的方法那就需要用$来重新包装一下。

$.fn.button = function(option)
    {
          //this指jquery传过来的对象
         return this.each(function()
        {
            var $this = $(this)//这里this只each获得的dom元素,所以需要用$封装一下
            var data = $this.data(‘zui.button‘)
            var options = typeof option == ‘object‘ && option

            if (!data) $this.data(‘zui.button‘, (data = new Button(this, options)))

            if (option == ‘toggle‘) data.toggle()
            else if (option) data.setState(option)
        })
    }



面向对象的插件案例

;(function($, window, document,undefined) {
    //定义Beautifier的构造函数
    var Beautifier = function(ele, opt) {
        this.$element = ele,
        this.defaults = {
            ‘color‘: ‘red‘,
            ‘fontSize‘: ‘12px‘,
            ‘textDecoration‘: ‘none‘
        },
        this.options = $.extend({}, this.defaults, opt)
    }
    //定义Beautifier的方法
    Beautifier.prototype = {
        beautify: function() {
            return this.$element.css({
                ‘color‘: this.options.color,
                ‘fontSize‘: this.options.fontSize,
                ‘textDecoration‘: this.options.textDecoration
            });
        }
    }
    //在插件中使用Beautifier对象
    $.fn.myPlugin = function(options) {
        //创建Beautifier的实体
        var beautifier = new Beautifier(this, options);
        //调用其方法
        return beautifier.beautify();
    }
})(jQuery, window, document);



jquery插件开发事项

标签:

原文地址:http://my.oschina.net/assange/blog/420366

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!