封裝一個自己的js庫

仿照jQuery封裝一個自己的js庫

接下來，我講封裝一個仿jQuery的庫，主要包含jQuery中繫結，css，等方法，我講它定義為 "HQuery"

$符號的封裝

jQuery中的 $ 符號意味著什麼？
先思考一下jQuery庫中alert(typeof $)的結果，它是一個物件，也是一個函式
所以美元符$字面上是jQuery，其實就是一個jq物件，裡面可以接受函式，字串，還要一種是物件(比如this)
給自己的Hquery填加$符號：

function $(arg) {    return new Hquery(arg)
}

Hquery是基於物件導向實現的，所以我們需要先寫建構函式，為了方便遍歷和其他方法的操作，所有內容返回到一個陣列中，這個陣列衣服於Hquery物件存在，之後將為這個Hquery物件屬性新增方法

function Hquery(arg){ //引數是變體變數
 this.elements = [] // 選擇器選擇的元素放到這個陣列中}

選擇器的封裝：

我們使用Hquery操作DOM等實現一系列的功能，選擇器是必不可少的，所有我們首先封裝好選擇器，這樣就可以能省去document.getElementsByClass等等麻煩的操作

// 透過class選擇元素 因為class可以有多個，所以我們需要push一下function getByClass(oParent, sClass) {    var aClass = [];    var elems = oParent.getElementsByTagName('*')    for (var i=0; i
封裝事件:
function bindEvent(obj, event, fn) {    if (obj.addEventListener){ //在標準瀏覽器下
        obj.addEventListener(event, fn, false)
    } else { // IE瀏覽器下
        obj.attachEvents('on' + event, fn)
    }
}// click方法Hquery.prototype.click=function (fn) {    // for (var i=0;i
hide和show也是比較常用的方法：
// hideHquery.prototype.hide = function () {    for (var i=0;i
eq方法
// eqHquery.prototype.eq = function (index) {    //返回出來的是元素物件，原生下面沒有css(),肯定沒有，所以此時需要換為$下的物件
    return $(this.elements[index])
}
其他的方法，我就不一一介紹了，下面直接給大家上一個多種方法封裝好的，大家k'y


作者：周瑾ruiqi
連結：