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指向.
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;
}
}