自制jquery插件

最新推荐文章于 2020-02-21 11:14:53 发布

montaellis

最新推荐文章于 2020-02-21 11:14:53 发布

阅读量1k

点赞数

分类专栏： jquery

jquery 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个自制的jQuery插件示例，展示了如何为jQuery对象添加自定义方法，并提供了一个精简版本的jQuery实现，包括基本的选择器、样式设置及属性操作等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自制插件

    <script type="text/javascript" src="./jquery-1.4.4.js"></script>

        <script type="text/javascript">
//复制继承--增加jQuery.fn的属性
$.fn.extend({
    abcdefg:function(){alert('ok');}
});

//复制继承--增加jQuery的属性
$.extend({
    helloworld:function(){alert('helloworldback')}
});

$(function(){
    $("div").css("color",'blue');

    $("div").abcdefg();
    $.helloworld();
});
        </script>

jquery迷你版本

  <script type="text/javascript">

(function(){
    var jq = function(selector){
        return new jq.fn.init(selector);
    }
    
    jq.fn = {
        init:function(selector){
            //通过dom形式把jquery对象创建出来
            //两个选择器实现：id选择器、tag标签
            if(selector.indexOf("#")>-1){
                var id = selector.substring(1);
                var elem = document.getElementById(id);
                //把elem  dom对象融进jquery对象内部
                this[0] = elem;
                this.length = 1;
            } else {
                //标签选择器
                var elems = document.getElementsByTagName(selector);
                //把elems分别融进jquery对象内部
                for(var i=0,len=elems.length; i<len; i++){
                    this[i] = elems[i];
                }
                this.length = len;
            }
        },
        css:function(k,v){
            //谁来调用的css，
            //jquery对象--------this
            //this 代表 jquery对象
            //通过下标，把jquery对象转化为dom对象
            //this[0].style[k] = v;
            //dom.style.color = red;
            for(var i=0; i<this.length; i++){
                this[i].style[k] = v;
            }
        },
        attr:function(k,v){
            for(var i=0; i<this.length; i++){
                this[i].setAttribute(k,v);
            }
        },
        each:function(callback){
            //要让jquery对象里边的每个单元，都执行callback函数
            //this--jquery对象
            for(var i=0; i<this.length; i++){
                //this[i]---每个li的dom节点对象
                //this[i] 是回调函数this的指引，是每个li的dom节点
                callback.call(this[i],i);
            }
        }
    }
    //让jquery对象继承(prototype)jq.fn。这样对象可以调用css attr each相关方法
    jq.fn.init.prototype = jq.fn;

    window.$ = jq;
})();

function f1(){
    //$("#apple").css("color","blue");
    //$("li").css('color','red');
    //$("li").attr("name","apple");
    //通过each遍历方法，遍历li，使得每个li的背景颜色都不一样
    $("li").each(function(n){
        //this--代表每个li的dom节点对象
        var c1 = Math.floor(Math.random()*255);
        var c2 = Math.floor(Math.random()*255);
        var c3 = Math.floor(Math.random()*255);
        this.style.backgroundColor = "rgb("+c1+","+c2+","+c3+")";
    });
}
        </script>