摘要：是我個(gè)人寫的一個(gè)輕量級(jí)的操作庫，里面封裝了一些對(duì)元素節(jié)點(diǎn)的簡(jiǎn)單操作，如節(jié)點(diǎn)的查詢獲取，的添加移除，樣式的添加移除，節(jié)點(diǎn)的添加和移除，事件的封裝，動(dòng)畫的封裝等等如果你只是想簡(jiǎn)單的操作，但又不想寫繁瑣的原生代碼，也不希望加載像這么功能齊全的庫，

zBase是我個(gè)人寫的一個(gè)輕量級(jí)的 DOM 操作庫，里面封裝了一些對(duì)元素節(jié)點(diǎn)的簡(jiǎn)單操作， 如節(jié)點(diǎn)的查詢獲取，className的添加移除，樣式的添加移除， 節(jié)點(diǎn)的添加和移除，事件的封裝，動(dòng)畫的封裝等等...

如果你只是想簡(jiǎn)單的操作 dom ，但又不想 寫繁瑣的 js 原生代碼，也不希望加載像 jquery 這么功能齊全的庫，那么 zBase適合你 ?。?！

當(dāng)然只是做了簡(jiǎn)單的封裝，減少 原生 js 操作dom 的麻煩，整個(gè)類庫也是利用 $ 操作符，如果在使用的過程中和一些 大型的類庫 如 jquery 沖突可以下載 zBase 源碼，將 $ 改成任意字符即可。

庫的簡(jiǎn)單使用：

1、一般查找：

2、組合查找

在此前提下，你還可以任意組合，得到你所需要的節(jié)點(diǎn)，如：

3、find查找

利用 find() 方法來查找：

由于 $() 及幾乎所有庫的方法都返回當(dāng)前對(duì)象，所以支持鏈?zhǔn)讲僮?/p>

1、.addClass()

//給 所有 p 標(biāo)簽 添加 一個(gè)"name_1"  的className
$("p").addClass("name_1")  

//添加多個(gè)  className
$("p").addClass("name_1 name_2")  

2、.removeClass()

//給 所有 p 標(biāo)簽 移除 一個(gè)"name_1"  的className
$("p").removeClass("name_1")  

//移除多個(gè)  removeClass
$("p").removeClass("name_1 name_2")  

3、獲取第幾個(gè)節(jié)點(diǎn) .getE()
注意，.getE() 返回的是 dom元素，所以后面不能再執(zhí)行鏈?zhǔn)讲僮?/p>

//得到 ul 里面的 第 3 個(gè) li節(jié)點(diǎn)
$("ul li").getE(2)  

4、獲取第幾個(gè)節(jié)點(diǎn) .getElement()
與第 3 條不同的是 .getElement() 返回的是 當(dāng)前對(duì)象，所以后面可以再執(zhí)行鏈?zhǔn)讲僮?/p>

//得到 ul 里面的 第 3 個(gè) li節(jié)點(diǎn)
$("ul li").getElement(2) .css("color","red"); 

5、操作樣式 .css()

// 給所有 p 標(biāo)簽 添加 color ：red ；樣式
 $("p").css("color","red");

// 給所有 p 標(biāo)簽 添加多組樣式，參數(shù)是一個(gè) obj
 $("p").css({
        "color":"red",
        "background":"blue"
    });

說明

// 當(dāng) 參數(shù)為 string 時(shí) ，是 獲取  p 標(biāo)簽下的 color 樣式,返回一個(gè) rgb(x, x, x)值
 $("p").css("color");

6、獲取 或 設(shè)置 某一節(jié)點(diǎn)的屬性 .arrt()

// 給所有 p 標(biāo)簽 添加 age 屬性
$("p").arrt("age","233");

// 當(dāng)參數(shù)只有一個(gè)時(shí) ， 獲得 p 標(biāo)簽下的屬性
$("p").arrt("age");

7、獲取或設(shè)置 .html()

// 給所有 p 標(biāo)簽 設(shè)置 html
$("p").html("我的天，我的地，先賺一個(gè)億?。。?！");

// 得到 html 值
$("p").html("age");

1、隱藏標(biāo)簽 .show 和 .hide

 
$("p").show();

$("p").hide();

2、鼠標(biāo)的移入移出事件 .hover()；

// hover傳遞兩個(gè)函數(shù)，分別 用于處理 鼠標(biāo)移入事件 和 鼠標(biāo)移出 事件

 $("span").hover(function () {
        $("span").css("color","red");
    },function () {
        $("span") .css("color","blue");
    });

3、添加事件 addEvent(ele,type,fun);
這里做了兼容 IE6、7、8
參數(shù)：ele：添加事件的元素節(jié)點(diǎn) ， type：事件類型(click,movie等)，fun:執(zhí)行事件函數(shù)
注意：第一個(gè)參數(shù)為元素節(jié)點(diǎn)，可用上面提到的 getE() 來獲得

 
 addEvent($("#div_id").getE(0),"click",function () {
        alert(" 啊 ，我被點(diǎn)擊啦~~~ ");
    });

4、移除事件 removeEvent(ele,type,fun)

//添加事件
 addEvent($("#div_id").getE(0),"click",f_click);
// 移除事件
 removeEvent($("#div_id").getE(0),"click",f_click);
 
 function f_click() {
    alert(" 啊 ，我被點(diǎn)擊啦~~~ ");
 }

5、綁定事件 bind();

其實(shí)這個(gè)方法是有上面的添加事件封裝的，只不過這個(gè)方法可以多個(gè)元素同時(shí)綁定。

// 給所有的 span 標(biāo)簽 綁定點(diǎn)擊事件

 $("span").bind("click",function () {
        console.log("........"+this);  //  ....[object HTMLSpanElement]
    });

動(dòng)畫做的不多，就一個(gè) animate() ，其實(shí)現(xiàn)在的css3的動(dòng)畫效果已經(jīng)很強(qiáng)大和簡(jiǎn)便了，這里 做了一個(gè)動(dòng)畫的簡(jiǎn)單封裝，有興趣可以查看源碼，看一下思路。

animate(obj);
參數(shù)為一個(gè) 對(duì)象

/
 * @param attr 樣式 ，一般是 left 或 top
 * @param start 開始的位置
 * @param step 移動(dòng)的距離
 * @param target 移動(dòng)的終點(diǎn)
 * @param t 每次移動(dòng)的毫秒
/
    $("#div_id").animate({
        "attr":"x",
        "start":100,
        "t":500,
        "step":10,
        "alter":550
    });

1、設(shè)置元素處在 視口中間位置 .centerInWindow()

傳遞的兩個(gè)參數(shù)分別是 元素自身的 的 寬 和 高；

// 傳遞的兩個(gè)參數(shù)分別是 元素自身的 的 寬 和 高；
 $("#div_id").centerInWindow(100,100);

2、獲取當(dāng)前視口的大小 getInner();
返回 obj ，兼容 IE

  console.log("...width....."+ getInner().width);
  console.log("...height....."+ getInner().height);

3、獲取 瀏覽器滾動(dòng)條的距離 getScroll()

 console.log("...top....."+  getScroll().top);
console.log("...top....."+  getScroll().left);

4、圖片預(yù)加載 preprocessorImage(obj)
一般呢，我們往 而圖片 預(yù)加載 則是 先在后臺(tái)請(qǐng)求數(shù)據(jù)加載完圖片，然后再讓圖片一下顯示出來，效果是不同的！
參數(shù) obj ：一個(gè)對(duì)象，里面是 圖片的 鏈接數(shù)組 和 回調(diào)函數(shù)，如下例子：
加載完圖片，再將

 preprocessorImage({
                img_array:["http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1209/10/c1/13764273_1347270360314_800x600.jpg",
                    "https://cloud.githubusercontent.com/assets/15622519/18378764/61d0b4be-76a1-11e6-9571-36d785a35e56.png"],
               
                callback:function (img_src) {
                   
                    $("#img-div").html( "");
                }
            });

在 zBase庫中還支持?jǐn)U展插件：
比如有個(gè) js 插件

// 加載在 zBase.js 的后面

那么這個(gè)js插件需要 用 $().extend("name",fun) 來擴(kuò)展
參數(shù)：第一個(gè)參數(shù)為 插件的名稱，第二個(gè)參數(shù)是 插件的實(shí)現(xiàn)函數(shù)

$().extend("drag",function () {

        // 開始編程...
}

那怎么調(diào)用寫好的插件呢？ 比如我上面寫了是一個(gè) 盒子拖拽的插件，那么我直接調(diào)用

 $("#div_id").drag();

此時(shí)，id = div_id 的元素就有了拖拽的功能了(前提這個(gè) div 必須 position: absolute;)
關(guān)于 zBase_drag.js 插件源碼可以查看的到。

有了插件擴(kuò)展是不是很方便呢，可以為 zBase 庫 擴(kuò)展跟多自己實(shí)用的功能。

導(dǎo)入 js

ajax(obj);
參數(shù) obj 里面的屬性說明：

 
  method ： 請(qǐng)求方式 -- get 或 post
  url ： 請(qǐng)求路徑
  async ：true 為異步請(qǐng)求 ， false 為同步請(qǐng)求
  data ： 請(qǐng)求數(shù)據(jù) ，為 一個(gè) 對(duì)象
  success ：請(qǐng)求成功回調(diào)函數(shù)
  error ：請(qǐng)求失敗回調(diào)函數(shù)
 

 addEvent(document,"click",function () {
        ajax({
            method:"get",
            url:"https://api.github.com/users/ZengTianShengZ",
            async:true,
            data:{
                "name":"zeng",
                "age": 24
            },
            success:function (text) {
                alert(text);
            },
            error : function(error_status,error_statusText){
                alert(error_status + "........." + error_statusText);
            }

        });

沒錯(cuò)，就是怎么使用，是不是很方便，具體可查看源碼

項(xiàng)目有不足的地方歡迎大家 issues ，本類庫適合做一些小項(xiàng)目時(shí)使用，主要避免了原生js操作dom的麻煩，但是遠(yuǎn)不及jquery，zepto那么強(qiáng)大 的功能。
項(xiàng)目地址 github .................... 歡迎 star