jQuery插件写法

jQuery核心的方法有两个:

1、$.extend(object)可以理解为jQuery添加一个静态方法。
2、$.fn.extend(object)可以理解为jQuery实例添加一个方法。

基本的使用

$.extend({
        fun1: function() {
            alert(11);
        }
    })
    $.fun1();

    $.fn.extend({
        fun2: function() {
            alert(22);
        }
    })
    $(this).fun2();
    //等同于
    $.fn.fun3 = function() {
        alert(33);
    }
    $(this).fun3();

jQuery(function() {})与(function($) {})(jQuery)的区别

1、jQuery(function() {})相当于$(document).ready(function() {})当dom元素加载完成执行的方法

2、(function($) {})(jQuery)相当于

var fun = function($) {};
fun(jQuery);

定义了一个匿名函数,其中jQuery代表了这个函数实参。通常用在jQuery插件开发中,起到了定义插件的私有域作用。

 

<div id="link"><a href="#" >jQuery</a></div>

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script>
//
step01 定义JQuery的作用域 (function($) { var defaults = { //step01 定义JQuery的作用域 animatePadding: 20, hoverColor: "#f90" }; //在插件里定义方法 var showLink = function(obj) { $(obj).append("2222"); } //step02 插件的扩展方法名称 $.fn.paddingSlide = function(options) { var options = $.extend(defaults, options);//step03-b 合并用户自定义属性,默认属性 //step4 支持JQuery选择器$(this) this //step5 支持链式调用return 这样的定义才能支持链接调用。比如支持这样的调用:$("#fixed-floor").paddingSlide().css(‘‘, ‘‘); return this.each(function() {//this-->jquery对象 $(this)用于dom对象, var obj = $(this); var item = $("a", obj); item.hover(function() { $(this).css("color", options.hoverColor); $(this).stop().animate({paddingLeft: options.animatePadding}, 500); showLink(this); },function() { $(this).css("color", ""); $(this).stop().animate({paddingLeft: 0}, 500); }); }) }; })(jQuery);

$(function() {
    $("#link").paddingSlide();
})
</script>

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。