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

zBase是我個人寫的一個輕量級的 DOM 操作庫，里面封裝了一些對元素節點的簡單操作， 如節點的查詢獲取，className的添加移除，樣式的添加移除， 節點的添加和移除，事件的封裝，動畫的封裝等等...

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

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

庫的簡單使用：

1、一般查找：

2、組合查找

在此前提下，你還可以任意組合，得到你所需要的節點，如：

3、find查找

利用 find() 方法來查找：

由于 $() 及幾乎所有庫的方法都返回當前對象，所以支持鏈式操作

1、.addClass()

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

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

2、.removeClass()

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

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

3、獲取第幾個節點 .getE()
注意，.getE() 返回的是 dom元素，所以后面不能再執行鏈式操作

//得到 ul 里面的 第 3 個 li節點
$("ul li").getE(2)  

4、獲取第幾個節點 .getElement()
與第 3 條不同的是 .getElement() 返回的是 當前對象，所以后面可以再執行鏈式操作

//得到 ul 里面的 第 3 個 li節點
$("ul li").getElement(2) .css("color","red"); 

5、操作樣式 .css()

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

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

說明

// 當 參數為 string 時 ，是 獲取  p 標簽下的 color 樣式,返回一個 rgb(x, x, x)值
 $("p").css("color");

6、獲取 或 設置 某一節點的屬性 .arrt()

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

// 當參數只有一個時 ， 獲得 p 標簽下的屬性
$("p").arrt("age");

7、獲取或設置 .html()

// 給所有 p 標簽 設置 html
$("p").html("我的天，我的地，先賺一個億！！！！");

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

1、隱藏標簽 .show 和 .hide

 
$("p").show();

$("p").hide();

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

// hover傳遞兩個函數，分別 用于處理 鼠標移入事件 和 鼠標移出 事件

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

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

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

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(" 啊 ，我被點擊啦~~~ ");
 }

5、綁定事件 bind();

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

// 給所有的 span 標簽 綁定點擊事件

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

動畫做的不多，就一個 animate() ，其實現在的css3的動畫效果已經很強大和簡便了，這里 做了一個動畫的簡單封裝，有興趣可以查看源碼，看一下思路。

animate(obj);
參數為一個 對象

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

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

傳遞的兩個參數分別是 元素自身的 的 寬 和 高；

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

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

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

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

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

4、圖片預加載 preprocessorImage(obj)
一般呢，我們往 而圖片 預加載 則是 先在后臺請求數據加載完圖片，然后再讓圖片一下顯示出來，效果是不同的！
參數 obj ：一個對象，里面是 圖片的 鏈接數組 和 回調函數，如下例子：
加載完圖片，再將

 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庫中還支持擴展插件：
比如有個 js 插件

// 加載在 zBase.js 的后面

那么這個js插件需要 用 $().extend("name",fun) 來擴展
參數：第一個參數為 插件的名稱，第二個參數是 插件的實現函數

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

        // 開始編程...
}

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

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

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

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

導入 js

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

 
  method ： 請求方式 -- get 或 post
  url ： 請求路徑
  async ：true 為異步請求 ， false 為同步請求
  data ： 請求數據 ，為 一個 對象
  success ：請求成功回調函數
  error ：請求失敗回調函數
 

 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);
            }

        });

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

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