<!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. JavaScript数组归并方法reduce

    示例代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF ...

  2. Flex 自定义打印控件编写

    打印历来是web应用一个比较棘手的问题,幸好flex web应用是运行在flash player上的,flash player可以访问打印机,所以flex 应用可以实现比较强大的打印功能.Flex 自 ...

  3. java清除所有微博短链接 Java问题通用解决代码

    java实现微博短链接清除,利用正则,目前只支持微博短链接格式为"http://域名/字母或数字8位以内"的链接格式,现在基本通用 如果链接有多个,返回结果中会有多出的空格,请注意 ...

  4. 工作总结 用, 隔开数据 后台不可以用 List<string> 接收 get请求直接通过浏览器发请求传数组或者list到后台

    旁边的 css js 为项目的 加载 css js 地址 只加载引用的样式 js http://localhost:8736/LinInFoKPI/ExcelPrint?line=&start ...

  5. es快照和备份

    注册前要注意配置文件加上 path.repo: ["/data/es_backup"] 然后重启es 不然会报错doesn't match any of the locations ...

  6. SpringSecurity学习一----------最简单的权限控制系统

    © 版权声明:本文为博主原创文章,转载请注明出处 1.项目结构 2.pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0& ...

  7. traceroute 命令

    通过traceroute我们可以知道信息从你的计算机到互联网另一端的主机是走的什么路径.当然每次数据包由某一同样的出发点(source)到达某一同样的目的地(destination)走的路径可能会不一 ...

  8. 搭建属于你的家庭网络实时监控–HTML5在嵌入式系统中的应用&#183;高级篇

    *本文已刊登在<无线电>2014年第6期 <搭建属于你的在线实时採集系统>中已经对HTML5平台有了初步的认识,并基于此向大家展示了怎样将採集到的数据上传至网络.实现实时观測. ...

  9. 题目1 : Farthest Point

    时间限制:5000ms 单点时限:1000ms 内存限制:256MB 描述 Given a circle on a two-dimentional plane. Output the integral ...

  10. MDwiki 调研

    下载解压 然后 mv mdwiki.html index.html 创建 一个index.md 然后就可以直接访问http://example.com/ 直接把你的md文件放在目录里面就可以了 cer ...