jQuery插件开发实例

最新推荐文章于 2025-04-10 23:40:02 发布

原创最新推荐文章于 2025-04-10 23:40:02 发布 · 418 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #jquery插件

jquery 专栏收录该内容

9 篇文章

订阅专栏

<%@ 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>