代码改变世界

jQuery初级原理

2010-01-26 10:59  BlueDream  阅读(1258)  评论(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>

 

另一篇参考: http://bbs.blueidea.com/thread-2902038-1-1.html