您的位置:首页 > Web前端 > JQuery

学习jquery的简单方法

2010-11-10 13:25 441 查看
学习复杂代码的最好方法是简化:

(function(win, undefined) {
var jQuery = function(selector, context) {
// jQuery 对象就是 init 函数的一个实例
return new jQuery.fn.init(selector, context);
},
document = window.document,
push = Array.prototype.push,
slice = Array.prototype.slice;

jQuery.fn = jQuery.prototype = {
init: function(selector, context) {
// 选择器
var ret = (context || document).querySelectorAll(selector);

// 转换为普通数组
ret = slice.call(ret);

// jQuery API 的奥妙全在下面这句,将选择器获取的元素添加到 jQuery 对象中
// 使用 push, 速度飞快(当年担心大量 jQuery 对象实例化的性能问题,根本就不是问题)
// 使用 push, 还能自动更新 length 属性
push.apply(this, ret);

return this;
},
length: 0,
// 实例方法
attr: function(name, value) {
return access(this, name, value, jQuery.attr);
}
};

// 这句保证了 init 方法里的 this 拥有 jQuery 实例的方法
jQuery.fn.init.prototype = jQuery.fn;

// 静态方法
jQuery.attr = function(elem, name, value) {
if (value === undefined) {
return elem.getAttribute(name);
}
return elem.setAttribute(name, value);
};

// 神奇的 access, 在实例方法和静态方法中建立了一座桥梁
// 数组批次操作的实现也在这里
function access(elems, key, value, fn) {
var length = elems.length;

if (value !== undefined) {
for (var i = 0; i < length; i++) {
fn(elems[i], key, value);
}
return elems;
}

return length ? fn(elems[0], key) : null;
}

win.$ = win.jQuery = jQuery;
})(window);

测试页面:study-jquery-in-simplified-way.html (请在非 IE 浏览器下运行) :IE6,7不支持querySelectorAll方法;

源码:jquery~core.js
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: