VQuery-封裝本身的JQuery

VQuery-封裝本身的JQuery

標籤（空格分隔）： JS

---

封裝本身的jQuery--vQuery

vQurey選擇器

VQuery類

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

VQuery事件

綁定事件

click方法.綁定點擊事件

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

顯示隱藏方法.hide/show.改變display屬性

/**
 * 顯示元素,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";
    }
};

hover方法.鼠標移入移出時

/**
 * 鼠標移入移出方法
 * @param {Function} fnOver 鼠標移入執行的函數
 * @param {Function} fnOut  鼠標移出執行的函數
 */
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能夠動態修改對象的this指向.

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

toggle方法.切換

• 點擊記數

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

• arguments的使用

• toggle方法,切換,接收任意個參數,不斷在參數間循環.例:點擊顯示隱藏
  */
  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);
     });

  }
  };

css方法, 設置或者獲取樣式

• 簡單形式 -- 設置/獲取

• 獲取計算後的樣式

/**
 * 設置與獲取元素樣式的方法:
 * 接受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);

    }
};

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

}

eq方法-減小匹配元素的集合爲指定的索引的哪個元素。

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

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

find方法-查找當前對象的後代元素.

/**
 * 把arr2內的元素添加到arr1
 * 把類數組對象或數組轉變爲數組.(不須要類數組元素支持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);
        }
    }
    //必須這麼作,由於不這樣作返回的是節點集合,不具備VQuery的方法和屬性
    var newVquery = $();
    newVquery.elements = aResult;
    return newVquery;
};

index方法--當前元素在其同級元素中的位置

/**
 * 獲取當前元素在同輩元素的位置
 * @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}  獲取到的節點數組
 */
function getByClassName(parent, sClass) {
    if (parent.getElementsByClassName) {
        return parent.getElementsByClassName(sClass);
    } else {
        var oEle = parent.getElementsByTagName("*"),
            arr = [],
            reg = new RegExp("\\b" + sClass + "\\b");
        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   事件觸發執行的函數
 */
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;
    }
}