jQuery的简单认识和简单封装

1、Jquery

jQuery简介

版本：
1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
2.x：不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。

• 本地下载：https://www.jb51.net/zt/jquerydown.htm

• 在线引入：http://www.bootcdn.cn/jquery/

• 支持所有css2选择器 大部分css3选择

• 不能引号引起来的：this document window

• 所有的点击事件都在原生js上面去掉on

• $是Jquery对外开放的唯一接口

<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>//在线引入
<script>
   var aP = $(".dv1 p");
   console.log(aP);
   console.log($);
    
    /*
        遍历的方法 each
        index 索引
        obj 遍历的对象
    */
    aP.each(function(index,obj){
        consoloe.log(index+'---'+obj);
    });
    /* 设置css样式 要传json格式*/
    aP.css({
        "background":"deeppink"
        "color":"#ccc"
    });
    /* html() 代替了原生innerHTML */
    aP.html("还是奇迹");
   
    /* 链式调用 */
    $(".box p").css({"background":"deeppink","color":"#fff"}).html("我爱你就是快乐！")
    
    
</script>

 

注意：事项

/* 为了不污染全局的变量，所有一般封装的函数都会放在函数表达式自执行里面 */
(function(){
    window.a = 10;//把a变成全局变量
})();

简单封装三个方法：

封装（1）each、css、html

/* 用函数表达式来封装 */
(function () {
    /******************************/
    /*************接口*************/
    /******************************/
    function $(select) {
        return new Fn(select);
    }
    /******************************/
    /**********构造函数************/
    /******************************/
    function Fn(elements) {
        this.eale = document.querySelectorAll(elements);
    }
​
    /* each方法 */
    Fn.prototype.each = function(callBack){
        for( var i=0; i<this.eale.length; i++ ){
            callBack && callBack.call(this.eale[i],i,this.eale[i]);//第一个this是call回调函数指向，第二个参数是对象下标，第三个参数是被遍历对象
        }
    }
    /* css方法 */
    Fn.prototype.css = function(Json){
        this.each(function () {
            for (var k in Json) {
                this.style[k] = Json[k];
            }
        });
    }
​
    /* html方法 */
    Fn.prototype.html = function(str){
        this.each(function () {
            this.innerHTML = str;
        });
    }
​
    /* 向外暴露的唯一函数 */
    window.$ = $;
})();

封装（2）升级版 --- each、css、html

/* 用函数表达式来封装 */
(function () {
    /******************************/
    /*************接口*************/
    /******************************/
    function $(select) {
        return new Fn(select);
    }
    /******************************/
    /**********构造函数************/
    /******************************/
    function Fn(elements) {
        this.eale = document.querySelectorAll(elements);
    }
​
    /* 添加原型的方法 */
    function add(Json){
        for (var k in Json) {
            Fn.prototype[k] = Json[k];
        }
    }
​
    /* 添加原型 */
    add({
        /* 添加each方法 */
        each:function(callBack){
            for( var i=0; i<this.eale.length; i++ ){
                callBack && callBack.call(this.eale[i],i,this.eale[i]);
            }
        },
        /* 添加css方法 */
        css:function(Json){
            this.each(function () {
                for (var k in Json) {
                    this.style[k] = Json[k];
                }
            });
        },
        /* 添加html方法 */
        html:function(str){
            this.each(function () {
                this.innerHTML = str;
            });
        }
    });
​
    /* 向外暴露的唯一函数 */
    window.$ = $;
})();