摘要：無參數當前當前文檔中其所在在位置從開始工具函數函數函數包裝器可以不用了工具函數通過類名來選取元素父級對象類名獲取到的節(jié)點數組事件添加函數需要綁定事件的對象事件類型事件觸發(fā)執(zhí)行的函數標準修改下指向的問題最后選擇

標簽（空格分隔）： JS

elements屬性,存儲選擇的元素

typeof的使用判斷傳入參數的類型

字符串

class/id/tagname

事件綁定-

對象

直接插入

//VQuery選擇器
 function VQuery(vArg) {
    //用來保存選擇的元素
    this.elements = [];
    switch (typeof vArg) {
        //當傳入函數時.
    case "function":
        myAddEvent(window, "load", vArg);
        break;
    case "string":
        //傳入字符串時.
        switch (vArg.charAt(0)) {
        case "#": //id
            var obj = document.getElementById(vArg.substring(1));
            this.elements.push(obj);
            break;
        case ".": //class
            this.elements = getByClassName(document, vArg.substring(1));
            break;
        default: //tagName
            this.elements = document.getElementsByTagName(vArg);
        }
        break;
    case "object":
        this.elements.push(vArg);
        break;
    }
}

/**
 * 元素點擊方法
 * @param {Function} fn 點擊后執(zhí)行的函數
 */
VQuery.prototype.click = function (fn) {
    for (var i = 0, len = this.elements.length; i < len; i++) {
        myAddEvent(this.elements[i], "click", fn);
    }
};

 /**
 * 顯示元素,display:block
 */
VQuery.prototype.show = function () {
    for (var i = 0, len = this.elements.length; i < len; i++) {
        this.elements[i].style.display = "block";
    }
};
/**
 * 隱藏元素,display:none
 */
VQuery.prototype.hide = function () {
    for (var i = 0, len = this.elements.length; i < len; i++) {
        this.elements[i].style.display = "none";
    }
};

/**
 * 鼠標移入移出方法
 * @param {Function} fnOver 鼠標移入執(zhí)行的函數
 * @param {Function} fnOut  鼠標移出執(zhí)行的函數
 */
VQuery.prototype.hover = function (fnOver, fnOut) {
    for (var i = 0, len = this.elements.length; i < len; i++) {
        myAddEvent(this.elements[i], "mouseover", fnOver);
        myAddEvent(this.elements[i], "mouseout", fnOut);
    }
};

解決函數中的this問題

call/apply可以動態(tài)修改對象的this指向.

知乎如何理解和熟練運用js中的call及apply？

點擊記數

 //使用匿名函數包裝器來給每個對象創(chuàng)建局部變量
(function (obj) {
    var count = 0;
    myAddEvent(obj, "click", function () {
        alert(count++);
    });
})(this.elements[i]);

arguments的使用

toggle方法,切換,接收任意個參數,不斷在參數間循環(huán).例:點擊顯示隱藏
*/
VQuery.prototype.toggle = function () {
var _arguments = arguments;
for (var i = 0, len = this.elements.length; i < len; i++) {

   addToggle(this.elements[i]);

}

function addToggle(obj) {

   var count = 0;
   myAddEvent(obj, "click", function () {
       _arguments[count++ % _arguments.length].call(obj);
   });

}
};

簡單形式 -- 設置/獲取

獲取計算后的樣式

/**
 * 設置與獲取元素樣式的方法:
 * 接受1個或者2個參數(1個參數時:返回傳入屬性名對應的的樣式值,兩個參數:為傳入的樣式名為設置樣式值)
 * @param {String} attr  設置或獲取的樣式名
 * @param {String} value 樣式值(可選)
 */
VQuery.prototype.css = function (attr, value) {
    if (arguments.length == 2) {
        for (var i = 0, len = this.elements.length; i < len; i++) {
            this.elements[i].style[attr] = value;
        }
    } else {
        //1個參數時返回獲取到的樣式
        return getStyle(this.elements[0], attr);

    }
};

 /**
 * 屬性設置與獲取方法,與css方法基本一致.
 * @param   {String} attr  設置或獲取的屬性名
 * @param   {String} value 屬性值(可選)
 * @returns {String} 一個參數時,返回對應的屬性值
 */
VQuery.prototype.attr = function (attr, value) {
    if (arguments.length == 2) {
        for (var i = 0, len = this.elements.length; i < len; i++) {
            this.elements[i][attr] = value;
        }
    } else {
        return this.elements[0][attr];
    }

}

/**取其中的第n個對象-方法-減少匹配元素的集合為指定的索引的哪一個元素。
 * @param   {Number} n 需要的第幾個元素
 * @returns {Object} 返回獲取到的vquery元素
 */
VQuery.prototype.eq = function (n) {
    //必須使用$包裝.使返回的節(jié)點從普通對象變得vquery的元素(普通對象沒有vQuery方法)

    return $(this.elements[n]);
};

/**
 * 把arr2內的元素添加到arr1
 * 把類數組對象或數組轉變?yōu)閿到M.(不需要類數組元素支持Array的方法)
 * @param {Array}  arr1 轉變后的數組
 * @param {Object} arr2 類數組對象或數組
 */
function appendArr(arr1, arr2) {
    for (var i = 0, len = arr2.length; i < len; i++) {
        arr1.push(arr2[i]);
    }
}
/**
 * 查找當前對象的后代元素.
 * @param   {String} str class名或標簽名
 * @returns {Object} 獲取到的對象集合
 */
 
VQuery.prototype.find = function (str) {
    var aResult = [];

    for (var i = 0, len = this.elements.length; i < len; i++) {
        switch (str.charAt(0)) {
        case ".": //class
            var aEle = getByClassName(this.elements[i], str.substring(1));
            appendArr(aResult, aEle);

            break;
        default: //標簽
            var aEle = this.elements[i].getElementsByTagName(str);
            //            aResult = aResult.concat[aEle];//這樣做會出錯,因為aEle并不是一個真正的數組,必須使用下面的方法
            appendArr(aResult, aEle);
        }
    }
    //必須這么做,因為不這樣做返回的是節(jié)點集合,不具有VQuery的方法和屬性
    var newVquery = $();
    newVquery.elements = aResult;
    return newVquery;
};

/**
 * 獲取當前元素在同輩元素的位置
 * @param   {Object} obj 需要獲取的對象
 * @returns {Number} 獲取到的索引值
 */
function getIndex(obj) {
    var aBrother = obj.parentNode.children;
    for (var i = 0, len = aBrother.length; i < len; i++) {
        if (aBrother[i] == obj) {
            return i;
        }
    }
}
/**返回相對于它同輩元素的位置的索引值。無參數
 * @returns {Number} 當前當前文檔中其所在在位置,從0開始
 */
VQuery.prototype.index = function () {
    return getIndex(this.elements[0]);
};

//函數包裝器..可以不用new 了
function $(vArg) {
    return new VQuery(vArg);
}

/**通過class類名來選取元素
 * @param   {Object} parent 父級對象,
 * @param   {String} sClass className類名
 * @returns {Array}  獲取到的節(jié)點數組
 */
function getByClassName(parent, sClass) {
    if (parent.getElementsByClassName) {
        return parent.getElementsByClassName(sClass);
    } else {
        var oEle = parent.getElementsByTagName("*"),
            arr = [],
            reg = new RegExp("" + sClass + "");
        for (var i = 0, len = oEle.length; i < len; i++) {
            if (reg.test(oEle[i].className)) {
                arr.push(oEle[i]);
            }
        }
        return arr;
    }
}

/**
 *事件添加函數
 * @param {Object}   obj  需要綁定事件的對象
 * @param {String}   type 事件類型
 * @param {Function} fn   事件觸發(fā)執(zhí)行的函數
 */
function myAddEvent(obj, type, fn) {
    //標準
    if (obj.addEventListener) {
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {
        //IE
        obj.attachEvent("on" + type, function () {
            //修改ie下this指向window的問題
            fn.call(obj);
        });
    } else {
        //最后選擇
        obj["on" + type] = fn;
    }
}