jQuery插件开发实例

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body id="body">
    <ul>
        <li>
            <a href="">我的微博</a>
        </li>
        <li>
            <a href="">我的博客</a>
        </li>
        <li>
            <a href="">我的小站</a>
        </li>
    </ul>
    <p>这是p标签不是a标签,我不会受影响</p>
</body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
/**
 * 1、自调用匿名函数,构造命名空间,防止污染全局环境或者被全局环境所污染
 * 2、前面的分号,表示防止他人代码结尾缺失分号,导致自己代码异常无法执行
 * 3、传入全局变量对象以参数形式传递到插件内部,可以提高访问速度
 * 4、为了得到没有被修改的undefined,采取形参声明、实参不传入的方式,他就是最真实的'undefined'
 */
;(function($,window,document,undefined){

    var myPlugin = "myPlugin";
    /**
     * 采用面向对象的方式,处理插件中的逻辑方法
     */

    //定义Beautifier构造函数
    var Beautifier = function(ele,opt){
        //构造函数调用,this指的是Beautifier对象,如果作为普通函数调用,this指的是window对象
        this.elemet = ele;  
        this.$elemet = $(ele);    
        var defaults = {
                color:'red',
                fontSize:'12px',
                textDecoration:'none'
        };
        this.options = $.extend([],defaults,opt);
        this.init();
    };

    //定义Beautifier的方法,定义在它的原型对象上,达到所有实例共享方法
    Beautifier.prototype = {
        init:function(){
            //beautify()方法在构造函数里面,由this调用,那里的this指的是Beautifier对象,这里的this就是那里的this,也是Beautifier对象
            return this.$elemet.css({
                color:this.options.color,
                fontSize:this.options.fontSize,
                textDecoration:this.options.textDecoration
            });
        },
        test:function(){
            console.log("test function...");
        }
    };

    /**
     * 定义插件方法,在插件中使用Beautifier对象方法来处理逻辑
     */
    $.fn[myPlugin] = function(options){
        //插件方法内部,this对象指的是选择器返回的集合
        this.each(function() {
            //这里的this指的是集合中的dom元素对象
            //判断插件逻辑是否已经完成了对当前dom对象的处理,如果已经处理,则不再重复处理
            if (!$.data(this, "plugin_" + myPlugin)) {
                $.data(this, "plugin_" + myPlugin, new Beautifier(this,options));
            }
        });

        //返回【选择器返回的集合】对象,实现链式调用
        return this;
    };
})(jQuery,window,document);

//使用插件
$("li a").myPlugin({
    color:'red',
    fontSize:'30px',
    textDecoration:'underline'
});
</script>
</html>

参照:

http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html
http://blog.jobbole.com/30550/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值