<!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. Elasticsearch 2014年10月简报

    1. Elasticsearch Updates 1.1 公布了Kibana 4 Beta 1 和Beta 1.1 Kibana 4不管是在界面的布局,使用配置方法,还是底层绘制图表的方式都与Kiba ...

  2. TCP/IP详解 卷一（第十一章 UDP：用户数据报协议）

    UDP是一个简单的面向数据报的运输层协议. UDP不提供可靠性:它把应用程序传给IP层的数据发送出去,但是并不保证它们能到达目的地. UDP首部的个字段如下图所示

  3. ios 缩放图片（平铺）

    //缩放图片(平铺) - (UIImage *)resizeImage:(NSString *)imgName { UIImage *bgImage =  [UIImage imageNamed:im ...

  4. Android中ListView分类

    1 http://my.oschina.net/bv10000/blog/106436 2

  5. POJ 1731 Orders(STL运用）

    题目地址:POJ 1731 这题能够直接用STL函数做,非常轻松..next_permutation函数非常给力.. 代码例如以下: #include <algorithm> #inclu ...

  6. Atitit.跨平台预定义函数 魔术方法 魔术函数 钩子函数 api兼容性草案 v2 q216  java c# php js.docx

    Atitit.跨平台预定义函数 魔术方法 魔术函数 钩子函数 api兼容性草案 v2 q216  java c# php js.docx 1.1. 预定义函数 魔术方法 魔术函数是什么1 1.2. & ...

  7. Spring Cloud Zuul 网关的分布式系统中整合Swagger（转）和 zuul跨域访问问题

    首先恭喜自己终于找对了努力的方向,很荣幸能在公司接触到微服务架构,也很高兴公司一个大佬哥们愿意带我,他技术确实很牛逼,我也很佩服他,前后端通吃,干了六年能有这样的水平.最近跟着在搞微服务架构,给我分配 ...

  8. （一）spark算子 分为3大类

    value类型的算子 处理数据类型为value型的算子(也就是这个算子只处理数据类型为value的数据),可以根据rdd的输入分区与输出分区的关系分为以下几个类型 (1)输入分区与输出分区一对一型 m ...

  9. Redis的订阅发布

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using ServiceS ...

  10. distcc加速内核编译

    Linux内核编译实在是费时间的事,搞内核移植的时候总要编译,生命有一部分就浪费在等内核编译完成上,有心想买个HP的工作站,看了下Z840的价格,想想还是算了.distcc早就听说过,一直没有去试试, ...