<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        .red {

            color: red;

        }

    </style>

</head>

<body>

    <div class="red">1</div>

    <div>2</div>

    <div>3</div>

</body>

    <script language="javascript" type="text/javascript">

        var $ = jQuery = function( selector, context ){    //定义类

            return new jQuery.fn.init(selector, context);    //返回选择器的实例

        }

        //jQuery类的原型对象

        jQuery.fn = jQuery.prototype = {

            init : function(selector, context){                //定义选择器构造器

                selector = selector || document;    //设置默认值为document

                context = context || document;         //设置默认值为document

                if( selector.nodeType ) {        //如果选择符为节点对象

                    this[0] = selector;            //把参数节点传递给实例对象的数组

                    this.length = 1;            //并设置实例对象的length属性，定义包含的元素个数

                    this.context = selector;    //设置实例的属性，返回选择范围

                    return this;        //返回当前实例

                }

                if( typeof selector === "string" ) {    //如果选择符是字符串

                    var e = context.getElementsByTagName(selector);

                    //获取指定名称的元素

                    for( var i = 0; i < e.length; i++ ){//遍历元素集合，并把所有元素填入到当前实例数组中

                        this[i] = e[i];

                    }

                    this.length = e.length; //设置实例的length属性，即定义包含的元素个数

                    this.context = context; //设置实例的属性，返回选择范围

                    return this; //返回当前实例

                } else {

                    this.length = 0; //否则，设置实例的length属性值为0

                    this.context = context;

                    return this; //返回当前实例

                }

            },

            jquery: "1.3.2",     //原型属性

            size: function() {    //原型方法

                return this.length;

            }

        }

        jQuery.fn.init.prototype = jQuery.fn;    //使用jQuery的原型对象覆盖init的原型对象

        alert( $("div").size() );    //返回3

    </script>

</html>

模仿jquery框架源码 -成熟---选择器的更多相关文章

  1. 模仿jquery框架源码

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  2. 模仿jquery框架源码 -生长---跨域访问

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  3. 模仿jquery框架源码---网络

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Page& ...

  4. jQuery框架源码解读

    1.jQuery 1.9.1 parseJSON: function( data ) { // Attempt to parse using the native JSON parser first ...

  5. 【学】jQuery的源码思路1——后代选择器

    jQuery的源码思路1--后代选择器 这里探讨一下jQuery中后代选择器的封装原理,并自己写一下 getEle('#div1 ul li .box');接受的参数就是个后代选择器,类似于这样: # ...

  6. 【深入浅出jQuery】源码浅析--整体架构

    最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...

  7. 【深入浅出jQuery】源码浅析2--奇技淫巧

    最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...

  8. YII框架源码分析(百度PHP大牛创作-原版-无广告无水印)

           YII 框架源码分析    百度联盟事业部——黄银锋 目 录 1. 引言 3 1.1.Yii 简介 3 1.2.本文内容与结构 3 2.组件化与模块化 4 2.1.框架加载和运行流程 4 ...

  9. 【深入浅出jQuery】源码浅析2--使用技巧

    最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...

随机推荐

  1. chown将指定文件的拥有者改为指定的用户或组(转）

    chown将指定文件的拥有者改为指定的用户或组,用户可以是用户名或者用户ID:组可以是组名或者组ID:文件是以空格分开的要改变权限的文件列表,支持通配符.系统管理员经常使用chown命令,在将文件拷贝 ...

  2. EFFECTIVE JAVA 类和接口

    第十六条:复合优先于继承 //这是一个不好的类---执行的结果 addCount = 4(addAll的实现依赖于HashSet的add方法,InstrumentHashSet方法重写了add方法有执 ...

  3. <context:annotation-config/>、<context:component-scan/>

    在基于主机方式配置Spring的配置文件中,你可能会见到<context:annotation-config/>这样一条配置,他的作用是式地向 Spring 容器注册 AutowiredA ...

  4. Android应用程序开发以及背后的设计思想深度剖析

    1 http://www.uml.org.cn/mobiledev/201211063.asp 2 ...

  5. 新建WORD文档打开会出现转换文件对话框3步解决办法

    1.选择“纯文本”格式打开word文件.  ------------------------------------------------------------------------------ ...

  6. scikit-learn---PCA(Principle Component Analysis)---KNN(image classifier)

    摘要:PCA为非监督分类方法,常用于数据降维.为监督分类数据预处理,本例采用PCA对人脸特征提取先做降维处理,然后使用KNN算法对图片进行分类 ##1.PCA简介 设法将原来变量重新组合成一组新的互相 ...

  7. js事件之onmousedown和onmouseup

    <!DOCTYPE html> <html> <head> <script> function mouseDown() { document.getEl ...

  8. css 温故而知新 select-option 文字方向居右

    对select-option使用text-align:right;是无效的. 正确的姿势是:direction: ltr; 另外值得一提的是,通常还需要配合一点padding来美化.

  9. 我的_vimrc文件

    """"""""""""""""&quo ...

  10. Oracle 技术支持之现场优化的思维路径

    性能调优是每个DBA职业生涯中都能遇到的任务     大到世界五百强的核心系统,小到乡镇企业的进销存,几乎都会有要调优的时候     面对形形色色的系统,林林总总的需求,调优的手段也是丰富多彩 定位问 ...