封装精简版jQuery插件

min.js

/**
 *
 * @authors Your Name (you@example.org)
 * @date    2017-04-24 15:54:00
 * @version $Id$
 */

(function(){
    //$外界接口函数
    function $(param){
        return new init(param);
    }
    // 初始化面向对象  --构造函数
    function init(param){
        this.exe(param);

    }
    init.prototype = {
        constructor : init,
        // 调用
        exe : function(param){
            var type = (typeof param).toLowerCase();
            if(type === "string"){ //选择器
                if(/^<[^><]+>/.test(param)){  //$(<div>)
                    var Dom = document.createElement("div");
                    Dom.innerHTML = param;
                    this.length = Dom.children.length;
                    for(var i=0;i<this.length;i++){ //可能多个节点
                        this[i] = Dom.children[i];
                    };
                }else{
                    var Doms = document.querySelectorAll(param);
                    this.length = Doms.length;
                    //遍历获取的js对象 给 实例化对象的下标下
                    for(var i=0;i<Doms.length;i++){
                        this[i] = Doms[i];
                    };
                }
            }else if(type === "function"){//函数
                window.onload = param;
            }else if(type === "object"){//对象
                // 通过nodeType识别 js对象(节点)是单个还是多个,  querySelectorAll  (querySelector ducument this window)
                if(param.nodeType || param === window){ //单个
                    this.length = 1;
                    this[0] = param;  //$(this)[0]
                }else{  //集合的情况
                    this.length = param.length;
                    for(var i=0;i<param.length;i++){
                        this[i] = param[i];
                    };
                }
            };
            this.bindEvent(["click","mouseenter","mouseleave","mouseover","mouseout","load","dblclick","focus","blur","mousedown","mouseup","mousemove","change","keydown","keyup","mousewheel","scroll"]);
        },

        // each()遍历方法
        each : function(fn){
            for(var i=0;i<this.length;i++){
                fn.call(this[i],i);  //this指向  改变遍历的每个对象
            }
        },
        get : function(i){
            return this[i];
        },
        eq : function(i){
            // js=>jQ
            return $(this[i]);
        },
        css : function(){
            var param = arguments;  //不定参
            if(param.length === 2){ //("color","red")
                this.each(function(){
                    this.style[param[0]] = param[1];
                })
                // 没each
                // for(var i=0;i<this.length;i++){
                //     this[i].style[param[0]] = param[1];
                // }
            }else{
                var param1 = param[0];
                if(typeof param1 === "string"){  //获取样式的情况 css("color")
                    var obj = this[0]; //只能获取第一个
                    var val = obj.currentStyle?obj.currentStyle[param1]:getComputedStyle(obj)[param1];
                    // val = Number()?parseInt(val):val;
                    if(typeof val.substring(0,1) === "number"){
                        val = parseFloat(val);
                    }else{
                        if(val.substring(0,1) === "0"){   //考虑参数是0px. 会走false
                            val = parseFloat(val);
                        }
                    }
                    // console.log(val);
                    return val;
                }else if(typeof param1 === "object"){  //css({})
                    // 多个样式设置
                    this.each(function(){
                        for(var key in param1){
                            this.style[key] = param1[key];
                        }
                    })
                }
            }
            return this;
        },
        // attr
        attr : function(){
            var param = arguments;  //不定参
            if(param.length === 2){ //("id","red")
                this.each(function(){
                    this.setAttribute(param[0],param[1]);
                });
            }else{
                var param1 = param[0];
                if(typeof param1 === "string"){  //获取属性的情况 attr("color")
                    var obj = this[0]; //只能获取第一个
                    return obj.getAttribute(param1);
                }else if(typeof param1 === "object"){  //attr({title:"name", class: "on"})
                    // 多个样式设置
                    this.each(function(){
                        for(var key in param1){
                            this.setAttribute(key,param1[key]);
                        };
                    });
                }
            }
            return this;
        },

        //removeAttr
        removeAttr : function(param){
            this.each(function(){
                this.removeAttribute(param);
            });
            return this;
        },

        //`s
        addClass : function(param){
            // var arrClass =  param.split(" ");
            this.each(function(){
                var allClass = this.className +" "+param;
                arrClass = allClass.split(" ");
                arrClass = arrClass.filter(function(value,index,arr){
                    return arr.indexOf(value) == index;
                });
                this.className = arrClass.join(" ");
            });
            return this;
        },

        // removeClass
        removeClass : function(param){
            this.each(function(){
                var arrClass = this.className.split(" ");
                var arrParam = param.split(" ");
                for(var i=0;i<arrParam.length;i++){
                    var index = arrClass.indexOf(arrParam[i]);
                    if(index !== -1){
                        arrClass.splice(index,1);
                    };
                }
                this.className = arrClass.join(" ");
            });
            return this;
        },
        // toggeleClass
        toggleClass : function(param){
            this.each(function(){
                var arrClass = this.className.split(" ");
                var arrParam = param.split(" ");
                for(var i=0;i<arrParam.length;i++){
                    var index = arrClass.indexOf(arrParam[i]);
                    if(index !== -1){
                        arrClass.splice(index,1);
                    }else{
                        arrClass.push(arrParam[i]);
                    }
                }
                this.className = arrClass.join(" ");
            });
            return this;
        },

        html : function(param){
            if(typeof param !== "undefined"){ //判断是否有参数
                this.each(function(){
                    this.innerHTML = param;
                });
            }else{
                return this[0].innerHTML;
            }
            return this;
        },

        text : function(param){
            if(typeof param !== "undefined"){
                this.each(function(){
                    this.innerText = param;
                });
            }else{
                return this[0].innerText;
            }
        },

        val : function(param){
            if(typeof param !== "undefined"){
                this.each(function(){
                    this.value = param;
                });
            }else{
                return this[0].value;
            }
        },
        offset : function(param){
            var json = {left:0,top:0},obj = this[0];
            if(typeof param !== "undefined"){
                this[0].style.left = param.left;
                this[0].style.top = param.top;
            }else{
                // 无参数
                while(obj){
                    json.left += obj.offsetLeft;   //!!! +=
                    json.top += obj.offsetTop;
                    obj = obj.offsetParent;
                };
                json.left -= this.srcollLeft();
                json.top -= this.srcollTop();
                return json;
            };
            return this;
        },
        position : function(param){
            var json = {left:0,top:0};
            if(typeof param !== "undefined"){
                this[0].style.top = param.top;
                this[0].style.left = param.left;
            }else{
                json.left = this[0].offsetLeft;
                json.top = this[0].offsetTop;
                return json;
            }
            return this;
        },
        srcollTop : function(param){
            if(typeof param !== "undefined"){
                if(document.documentElement.srcollTop){
                    document.documentElement.srcollTop = param +"px";
                }else{
                    document.body.scrollTop = param + "px";
                }
            }else{
                var scroll = document.documentElement.scrollTop || document.body.scrollTop;
                return scroll;
            };
            return this;

        },
        srcollLeft : function(param){
            if(typeof param !== "undefined"){
                if(document.documentElement.srcollLeft){
                    document.documentElement.srcollLeft = param +"px";
                }else{
                    document.body.scrollLeft = param + "px";
                }
            }else{
                var scroll = document.documentElement.scrollLeft || document.body.scrollLeft;
                return scroll;
            };
            return this;
        },
        height : function(param){
            if(typeof param !== "undefined"){
                this.css("height",param+"px");
            }else{
                return this.eq(0).css("height");
            };
            return this;
        },
        width : function(param){
            if(typeof param !== "undefined"){
                this.css("width",param+"px");
            }else{
                return this.eq(0).css("width");
            };
            return this;
        },
        innerHeight : function(param){
            return this[0].clientHeight;
        },
        innerWidth : function(param){
            return this[0].clientWidth;
        },
        outerHeight : function(param){
            return this[0].offsetHeight;
        },
        outerWidth : function(param){
            return this[0].offsetWidth;
        },
        append : function(param){
            if(typeof param === "string"){
                if(/^<[^><]+>/.test(param)){
                    // 元素节点<div>
                    this.append($(param));  //$("<div></div>")
                }else{
                    // 文本节点""
                    var Dom = document.createTextNode(param);
                    this[0].appendChild(Dom);
                }
            }else if( typeof param === "object"){
                // jQ对象
                // 判断jq     append($("p"))   选择p 元素.  [0][1][2]
                if(param.constructor === init){
                    // this[0].appendChild(param[i]);
                    // 遍历 !!如果选择了多个元素.
                    // 节点添加之后就消失了,所以只有一个被添加.
                    // console.log(param);  节点复制一份.
                    for(var i=0;i<this.length;i++){
                        for(var j=0;j<param.length;j++){
                            if(i == this.length-1){  //当是选择器最后一份,直接操作节点
                                var temp = param[j];
                            }else{
                                var temp = param[j].cloneNode(true);
                            }
                            this[i].appendChild(temp);
                        };
                    }

                }else{
                // js对象     append(节点))
                    this.append($(param));  //转换为jQ对象.再调用上面的.
                }
            }
            return this;
        },
        prepend : function(param){
            if(typeof param === "string"){
                if(/^<[^><]+>/.test(param)){
                    // 元素节点<div>
                    this.prepend($(param));  //$("<div></div>")
                }else{
                    // 文本节点""
                    var Dom = document.createTextNode(param);
                    this[0].insertBefore(Dom,this[0].children[0]);
                }
            }else if( typeof param === "object"){
                // jQ对象
                // 判断jq     append($("p"))   选择p 元素.  [0][1][2]
                if(param.constructor === init){
                    // this[0].appendChild(param[i]);
                    // 遍历 !!如果选择了多个元素.
                    // 节点添加之后就消失了,所以只有一个被添加.
                    // console.log(param);  节点复制一份.
                    for(var i=0;i<this.length;i++){
                        for(var j=0;j<param.length;j++){
                            if(i == this.length-1){  //当是选择器最后一份,直接操作节点
                                var temp = param[j];
                            }else{
                                var temp = param[j].cloneNode(true);
                            }
                            this[i].insertBefore(temp,this[i].children[0]);
                        };
                    }

                }else{
                // js对象     append(节点))
                    this.prepend($(param));  //转换为jQ对象.再调用上面的.
                }
            }
            return this;
        },
        wrap : function(param){ //给人加上爸爸
            // 先转换为JS对象
            var type = typeof param;
            if(type === "string"){
                if(/^<[^><]+>/.test(param)){
                    param = $(param)[0]
                };
            }else if(type === "object"){
                if(param.constructor == init){
                    param = param[0];
                }else if(!param.nodeType && param.length){//如果是多个节点
                    param = param[0];
                }
            }else if(type === "function"){
                //
            }
            var thisParent = this[0].parentNode;
            if(thisParent !== param){  //如果自身有this. 排除自己insertBefore自己.
                thisParent.insertBefore(param,this[0]);
            };
            this.each(function(){
                param.appendChild(this);
            });

            return this;
        },
        unwrap : function(){
            this.each(function(){
                var parent = this.parentNode; //爸爸
                var siblings = parent.children; //兄弟
                var grandpa = parent.parentNode;  //爷爷
                for(var i=siblings.length-1;i>=0;i--){ //从后面取出
                    grandpa.insertBefore(siblings[siblings.length-1-i],parent);  //顺序不能变.
                }
                grandpa.removeChild(parent);
            })
            return this;
        },
        empty : function(){
            this.each(function(){
                this.innerHTML = "";
            })
            return this;
        },
        remove : function(param){
            if(typeof param !== "undefined"){ //判断是否有参数
                // 选择器
                this.each(function(){
                    if(this.parentNode){
                        var Dom = this.parentNode.querySelectorAll(param);
                        $(Dom).remove();
                    }
                })

            }else{
                this.each(function(){
                    this.parentNode.removeChild(this);
                });
            }
            return this;
        },
        children : function(param){
            var arr = [];
            if(typeof param === "string"){
                // 选择器
                this.each(function(){
                    var Doms = this.querySelectorAll(param);
                    for(var i=0;i<Doms.length;i++){
                        if(Doms[i].parentNode == this){ //只选择儿子
                            arr.push(Doms[i]);
                        }
                    }
                })


            }else{
                this.each(function(){
                    // var Doms = this.children;
                    // for(var i=0;i<Doms.length;i++){
                    //
                    //     arr.push(Doms[i]);
                    //
                    // }
                    arr = [].slice.call(this.children);
                })
            }
            return $(arr);  //输出JQ对象
        },
        find : function(){
            var arr = [];
            if(typeof param === "string"){
                // 选择器
                this.each(function(){
                    var Doms = this.querySelectorAll(param);
                    for(var i=0;i<Doms.length;i++){
                        // if(Doms[i].parentNode == this){ //只选择儿子
                            arr.push(Doms[i]);
                        // }
                    }
                })
            }
            return $(arr);
        },
        siblings : function(param){
            var arr = [];
            if(typeof param === "string"){
                // 选择器
                this.each(function(){
                    var Doms = this.parentNode.querySelectorAll(param);
                    for(var i=0;i<Doms.length;i++){
                        if(Doms[i]!== this && Doms[i].parentNode === this.parentNode){  //兄弟且不是自己.
                            arr.push(Doms[i]);
                        }
                    }
                })
            }else{
                this.each(function(){
                    arr = [].slice.call(this.parentNode.children);
                    // 过滤掉自己;
                    // var This = this;
                    // arr = arr.filter(function(dom){
                    //     return dom !== This; //函数内部
                    // });
                    arr.splice(arr.indexOf(this),1);
                })
            }
            return $(arr);  //输出JQ对象
        },
        hasClass : function(param){
            var bool = false;
            // 可能多个className
            var arr = param.split(" ");
            for(var i=0;i<arr.length;i++){
                if(new RegExp(arr[i]).test(this[0].className)){
                    bool = true;
                }else{
                    bool = false;
                    break;
                }
            };
            return bool;
        },
        on : function (eName, eFn) {
            if (eName === 'mousewheel'){  //滚轮事件
                this.each(function () {
                    // 解绑的时候用的  ,储存函数
                    if (this[eName + 'FLY']) {
                        this[eName + 'FLY'].push(eFn);
                    } else {
                        this[eName + 'FLY'] = [eFn];
                    }
                    document.onmousewheel===null?this.onmousewheel=eFn:this.addEventListener('DOMMouseScroll',eFn);
                });
            }else{
                this.each(function () {
                    // 解绑的时候用的
                    if (this[eName + 'FLY']) {
                        this[eName + 'FLY'].push(eFn);
                    } else {
                        this[eName + 'FLY'] = [eFn];
                    }
                    if (document.addEventListener) {
                        this.addEventListener(eName, eFn);
                    } else {
                        this.attachEvent('on' + eName, eFn);
                    }
                });
            }
            return this;
        },

        off : function (eName) {
            this.each(function () {
                if (this[eName + 'FLY']) {
                    for (var i = 0; i < this[eName + 'FLY'].length; i++) {
                        if (document.removeEventListener) {
                            this.removeEventListener(eName, this[eName + 'FLY'][i]);
                        } else {
                            this.detachEvent('on' + eName, this[eName + 'FLY'][i]);
                        }
                    }
                    if(eName === 'mousewheel'){
                        this.onmousewheel = null;
                    }
                }
            });
            return this;
        },

        hover : function () {
            var huamei = arguments; //彩蛋 華魅
            if (huamei.length) {
                if (huamei.length === 1) {
                    huamei[1] = huamei[0]
                }
                this.on('mouseenter', huamei[0]);
                this.on('mouseleave', huamei[1]);
            }
            return this;
        },
        bindEvent : function(eventArr){
            // click : function (huamei) { //彩蛋 華魅
            //     return this.on('click', huamei);
            // }
            for(var i=0;i<eventArr.length;i++){
                var eventName = eventArr[i];
                (function(This,event){   //闭包  保留eventName
                    init.prototype[event] = function(fn){
                        // console.log(event);  //找到了eventName
                        return this.on(event,fn);
                    }.bind(This);
                })(this,eventName);
            };
        },
        animate : function(target,speed,callBack){  //匀速版
            if(typeof target === "object"){
                // 先判断  传来的参数.
                var time = (typeof speed === "number")?speed:300,//默认300ms
                    callback = (typeof speed === "function")?speed:callBack,  //回调函数
                    sTime = new Date();
                this.each(function(){
                    // 初始值  目标值  变化值
                    var start = {},change = {};
                    for(var attr in target){
                        start[attr] = $(this).css(attr);
                        change[attr] = parseInt(target[attr]) - start[attr];
                    };
                    // 动画.requestAnimationFrame()
                    (function Fn(){
                        var nTime = new Date(),proportion = (nTime - sTime)/time;
                        // 判断  attr 是否是 opacity zIndex;  unit单位
                        if(proportion >=1)proportion=1;   //变为整数.
                        for(var attr in change){
                            var unit = "px";
                            if(attr == "opacity" || attr == "zIndex"){
                                unit = "";
                            }
                            this.style[attr] = start[attr] + change[attr]*proportion + unit;
                        }
                        if(proportion === 1){
                            callback&&callback.call(this);
                        }else{
                            requestAnimationFrame(Fn.bind(this));//每次调用改变this指向.
                        }
                    }.bind(this))()
                })
            }
        },
        show : function(){
            var param = arguments;
            if(param.length === 0){
                this.each(function(){
                    if($(this).css("display") === "none"){
                        console.log(1);
                        this.style.display = "block";
                    }
                })
            }else{
                var time ,
                    callBack;
                time = typeof param[0] === "number"?param[0]:300;//默认;
                callBack = typeof param[0] === "function"?param[0]:param[1];
                this.each(function(){
                    // 初始
                    if($(this).css("display") === "none"){
                        var sWidth,
                            sHeight;
                        this.style.display = 'block';
                        sWidth = this.clientWidth;
                        sHeight = this.clientHeight;
                        this.style.width = '0';
                        this.style.height = '0';
                        this.style.opacity = 0;
                        $(this).animate({
                            width : sWidth,
                            height : sHeight,
                            opacity : 1
                        },time,callBack);
                    }
                })
            }
            return this;
        },
        hide : function(){
            var param = arguments;
            if(param.length === 0 ){
                this.each(function(){
                    if($(this).css("display") !== "none"){
                        this.style.display = "none";
                    }
                })
            }else{
                var time ,callBack;
                time = typeof param[0] === "number"?param[0]:300;//默认;
                callBack = typeof param[0] === "function"?param[0]:param[1];
                this.each(function(){
                    // 初始
                    if($(this).css("display") !== "none"){

                        $(this).animate({
                            "width": 0,
                            "height": 0,
                            "opacity": 0
                        },time,function(){
                            this.style.display = "none";
                            callBack&&callBack.call(this);
                        });
                    }
                })
            }
            return this;
        },
        toggle : function(){
            var param = arguments;
            this.each(function(){
                if($(this).css("display") !== "none"){
                    $(this).hide.apply($(this),param); //this指向是jq对象
                }else{
                    $(this).show.apply($(this),param);
                }
            });
            return this;
        },
        fadeIn : function(){
            var param = arguments;
            var time ,
                callBack;
            time = typeof param[0] === "number"?param[0]:300;//默认;
            callBack = typeof param[0] === "function"?param[0]:param[1];
            this.each(function(){
                // 初始
                if($(this).css("display") === "none"){
                    this.style.opacity = 0;
                    this.style.display = "block";
                    $(this).animate({
                        opacity : 1
                    },time,callBack);
                }
            })
            return this;
        },
        fadeOut : function(){
            var param = arguments;
            var time ,
                callBack;
            time = typeof param[0] === "number"?param[0]:300;//默认;
            callBack = typeof param[0] === "function"?param[0]:param[1];
            this.each(function(){
                // 初始
                if($(this).css("display") !== "none"){
                    $(this).animate({
                        opacity : 0
                    },time,function(){
                        this.style.display = "block";
                        callBack && callBack.call(this);
                    });
                }
            })
            return this;
        },
        fadeToggle : function(){
            var param = arguments;
            this.each(function(){
                if($(this).css("display") !== "none"){
                    $(this).fadeOut.apply($(this),param); //this指向是jq对象
                }else{
                    $(this).fadeIn.apply($(this),param);
                }
            });
            return this;
        },
        slideUp : function(){
            var param = arguments;
            var time ,
                callBack;
            time = typeof param[0] === "number"?param[0]:300;//默认;
            callBack = typeof param[0] === "function"?param[0]:param[1];
            this.each(function(){
                // 初始
                if($(this).css("display") !== "none"){
                    this.style.overflow = "hidden";
                    $(this).animate({
                        height : 0
                    },time,function(){
                        this.style.display = "block";
                        callBack && callBack.call(this);
                    });
                }
            })
            return this;
        },
        slideDown : function(){
            var param = arguments;
            var time ,
                callBack;
            time = typeof param[0] === "number"?param[0]:300;//默认;
            callBack = typeof param[0] === "function"?param[0]:param[1];
            this.each(function(){
                // 初始
                if($(this).css("display") === "none"){
                    var sHeight = 0;
                    this.style.display = 'block';
                    sHeight = this.clientHeight;
                    this.style.overflow = 'hidden';
                    this.style.height = '0';
                    $(this).animate({
                        height : sHeight+"px"
                    },time,callBack);
                }
            })
            return this;
        },
        slideToggle : function(){
            var param = arguments;
            this.each(function(){
                if($(this).css("display") !== "none"){
                    $(this).slideUp.apply($(this),param);
                }else{
                    $(this).slideDown.apply($(this),param);
                }
            });
            return this;
        },

    }

    window.$ = $;
})();

---

测试

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="Author" content="">
        <meta name="Keywords" content="">
        <meta name="Description" content="">
        <title>Document</title>
        <style type="text/css">
            * {margin: 0; padding: 0;}
            a {text-decoration: none;}
            ul,li {list-style: none;}
            body {font-family: "Microsoft yahei";}
            div{width: 100px; height: 100px; background: pink; display: none;}
        </style>
        <script type="text/javascript" src="weike.js"></script>
    </head>
<body>
   <!--  <div id="box1">
      <p>123</p>
      <p>123<a href="">213</a></p>
      <p>123</p>
    </div>
    <div></div>
    <p id="box" class="qq aa ss">1</p>
    <p>2</p>
    <p>3</p> -->
    <div id="box"></div>
<input type="text" name="123" id="txt" >
<script type="text/javascript">
    // console.log($("#box"));
   //  $("p").each(function(i){
   //      this.style.color = 'red';
   //      this.style.fontSize = 14+i*2+"px";
   //  });
   //  $("#box").css("background","green");
   //  // console.log($("#box").css("height"));

   //  var Allp = document.querySelectorAll("p");
   //  var oBox = document.getElementById("box");

   //  // oBox.nodeType = 55;//修改不了;
   //  // 节点 的nodeType 是number. 且不可以修改
   //  // console.log(oBox.nodeType,Allp.nodeType);//1 undefined;
   //  // console.log(window.nodeType,document.nodeType);//undefined 9;

   // $("#box").each(function(i){
   //       // console.log( $(this).css("background","#f60") );
   //  });
   // $("p").eq(1).css({
   //      "color":"#fff",
   //      "background":"#f60"
   // });
   // // $("p").attr("class","p");
   // // console.log($("p").attr("id"));
   // $("p").attr({
   //      "title":"name",
   //      "class":"on"
   // });
   // $("p").removeAttr("title");
   // $("p").addClass("on a b c d a b c a");
   // $("p").removeClass("a b d c");
   // $("p").toggleClass("on a b c");
   // $("p").html("<a href='javascript:void(0)'>123</a>");
   // $("p").text("123");
   // $("#txt")[0].onchange = function(){
   //      console.log($(this).val());
   // };
   // // console.log($("<div><a href='javascript:void(0)'>123</a></div>")[0]);
   // // $("div").append("<p>123</p>");
   // // $("div").append($("p"));
   // var Allp = document.querySelectorAll("p");
   // $("div").append(Allp);// var Allp = document.querySelectorAll("p");
   // $("div").append($("<a href='javascript:void(0)'>123</a><span>12312</span>"));
   //  // console.log($("<a href='javascript:void(0)'>123</a><span>12312</span>")[1]);
   // var aBox = document.querySelectorAll("div")
   //
   // $("div").prepend("<a href='#'>12312</a>");
   // $("#box1").append($("p")).remove();
   // $("p").remove("p");
   // console.log($("body").children());
   // $("p").wrap($("#box1"));
   // $("#box").unwrap();
   // $("#box").siblings("input").css("color","red");
   // alert($("#box").hasClass(" aa "));
   // $(document).click(function(){
   //      console.log(1);
   // });
   // $(document).click(function(){
   //      console.log(2);
   // })
   // $("div").animate({"width":"200px","height":"200px"},2000);
   // console.log($("div").css("display"));
   $("div").fadeToggle(300);
</script>
</body>
</html>