jQuery初级原理
2010-01-26 10:59 BlueDream 阅读(1249) 评论(0) 编辑 收藏 举报非IE浏览器里运行实例.
主要说明了jQuery的初级搭建.以及实例的构造和获取的所有对象push到数组的过程.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> jQuerySimple </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="test">
<p data-test="1">1</p>
<p data-test="2">2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
</div>
<script type="text/javascript">
//<![CDATA[
(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);
// 奥秘 这里将所有的获取的元素都push到数组里.
push.apply(this, ret);
return this;
},
length: 0,
// 实例方法
attr: function(name, value) {
return access(this, name, value, jQuery.attr);
}
};
// 使init方法里的js拥有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);
document.write("jQuery('#test p').length = " + jQuery('#test p').length);
document.write("<br/>");
document.write("jQuery('#test p').attr('rel') = " + jQuery('#test p').attr('data-test'));
//]]>
</script>
</body>
</html>
