<!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类数组转换为数组 面试题

    1.JavaScript类数组转换为数组 (1)方法一:借用slice (2)方法二:Array.from 2.代码 <!DOCTYPE html> <html lang=" ...

  2. 51单片机 | 定时/计数器原理及结构（T0和T1）

    ———————————————————————————————————————————— 定时/计数器结构(T0和T1) 16位寄存器T0.T1分别由TH0.TL0和TH1.TL1四个8位计数器组成 ...

  3. Maven - error in opening zip file

    在一个maven工程中,有时执行mvn打包,部署,编译等命令,例如mvn clean install -DskipTests -U等命令时,会报类似(error in opening zip file ...

  4. 【LeetCode-面试算法经典-Java实现】【015-3 Sum（三个数的和）】

    [015-3 Sum(三个数的和)] [LeetCode-面试算法经典-Java实现][全部题目文件夹索引] 原题 Given an array S of n integers, are there ...

  5. 【转】纯干货：PS高手完全自学宝典(原创文章)

    文章版权:Tommy子言  原创 一. 一切从基础开始 强大的PS虽然功能众多,但归纳起来主要有三大功能: 修图——主要包括纯图片的修饰.合成.3D合成等等: 画图——主要是指用PS来绘画.广告插画, ...

  6. oc 跳转控制方法

    1.presentViewController - (void)presentViewController:(UIViewController *)viewControllerToPresent an ...

  7. sublime livereload插件

    1.首先在chrome商店下载livereload 安装之后记得在 chrome 的 扩展程序 里面 勾上 允许访问文件地址 2.sublime text 3 中下载插件 Livereload 3.配 ...

  8. ubuntu打开终端多开标签的快捷键是ctrl+ shift+ T 对比ctrl+ alt+ T 另外窗口打开一个终端

    ubuntu打开终端多开标签的快捷键是ctrl+ shift+ T 对比ctrl+ alt+ T 另外窗口打开一个终端

  9. busybox下inittab中runlevel解析

    Order of scripts run in /etc/rc?.d ================================== 0. Overview. All scripts execu ...

  10. Android DIY之路 （一） 指定区域多图片合成 放大 缩小 镜像 旋转 等（转）

    惯例先看效果图 // 注意做类似这种模板功能时候 方位由后台数据提供,这里我们用假数据 4个点 或者xy 加区域来做示例 //一开始我们公司用的是透明盖住 操作图片 但发现 局限性较大.后来直接限定区 ...