輕量級的DOM操做庫 -- zBase 庫 使用介紹

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

若是你只是想簡單的操做 dom ，但又不想 寫繁瑣的 js 原生代碼，也不但願加載像 jquery 這麼功能齊全的庫，那麼 zBase適合你 ！！！

固然只是作了簡單的封裝，減小 原生 js 操做dom 的麻煩，整個類庫也是利用 $ 操做符，若是在使用的過程當中和一些 大型的類庫 如 jquery 衝突能夠下載 zBase 源碼，將 $ 改爲任意字符便可。

庫的簡單使用：

1、節點的查找

一、通常查找：

語法	概述
$('div_id')	id = 'div_id' 的元素
$('p')	全部 p 標籤的元素
$('.className')	全部 class = 'className' 的元素
$(this)	當前 HTML 元素

二、組合查找

在此前提下，你還能夠任意組合，獲得你所須要的節點，如：

語法	概述
$('div_id p')	id = 'div_id' 節點下的 全部 p 元素(注意中間空格)
$('.name1 .name2')	全部class = 'name1 ' 下的全部 class = 'name1 '元素
$('p a')	全部 p 標籤下的 a 標籤元素

三、find查找

利用 find() 方法來查找：

語法	概述
$('p').find('a')	全部 p 標籤下的 a 標籤元素
$('.name1').find('.name2')	全部class = 'name1 ' 下的全部 class = 'name1 '元素
$('#div_1').find('div_2')	注意這樣也是行的，但沒什麼意義，最後獲得的是 id= 'div_2' 的元素，與 id= 'div_1'不要緊

二 、操做節點

因爲 $() 及幾乎全部庫的方法都返回當前對象，因此支持鏈式操做

一、.addClass()

//給 全部 p 標籤 添加 一個'name_1'  的className
$('p').addClass('name_1')

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

二、.removeClass()

//給 全部 p 標籤 移除 一個'name_1'  的className
$('p').removeClass('name_1')

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

三、獲取第幾個節點 .getE()
注意，.getE() 返回的是 dom元素，因此後面不能再執行鏈式操做

//獲得 ul 裏面的 第 3 個 li節點
$('ul li').getE(2)

四、獲取第幾個節點 .getElement()
與第 3 條不一樣的是 .getElement() 返回的是 當前對象，因此後面能夠再執行鏈式操做

//獲得 ul 裏面的 第 3 個 li節點
$('ul li').getElement(2) .css('color','red');

五、操做樣式 .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');

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

// 給全部 p 標籤 添加 age 屬性
$('p').arrt("age","233");

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

七、獲取或設置 .html()

// 給全部 p 標籤 設置 html
$('p').html("個人天，個人地，先賺一個億！！！！");

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

3、事件操做

一、隱藏標籤 .show 和 .hide

$('p').show();

$('p').hide();

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

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

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

三、添加事件 addEvent(ele,type,fun);
這裏作了兼容 IE六、七、8
參數：ele：添加事件的元素節點 ， type：事件類型(click,movie等)，fun:執行事件函數
注意：第一個參數爲元素節點，可用上面提到的 getE() 來得到

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

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

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

五、綁定事件 bind();

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

// 給全部的 span 標籤 綁定點擊事件

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

4、動畫

動畫作的很少，就一個 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
    });

5、一些工具方法

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

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

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

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

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

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

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

四、圖片預加載 preprocessorImage(obj)
通常呢，咱們往 <img 標籤 設置 src = ‘xxx.png’ 那麼瀏覽器就開始請求數據加載圖片了，因此當你加載一張大圖時，就會看見圖片從上 到下慢慢的顯示出來。
而圖片 預加載 則是 先在後臺請求數據加載完圖片，而後再讓圖片一下顯示出來，效果是不一樣的！
參數 obj ：一個對象，裏面是 圖片的 連接數組 和 回調函數，以下例子：
加載完圖片，再將 <img 標籤插入 div 裏面

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( '<img class="bg-img" src="'+  img_src +'" alt="">');
                }
            });

6、添加插件

在 zBase庫中還支持擴展插件：
好比有個 js 插件

// 加載在 zBase.js 的後面
<script type="text/javascript" src="../js/zBase_drag.js"></script>

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

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

        // 開始編程...
}

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

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

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

有了插件擴展是否是很方便呢，能夠爲 zBase 庫 擴展跟多本身實用的功能。

7、ajax封裝

導入 js

<script type="text/javascript" src="../js/zBase-ajax.js"></script>

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