`
guohf
  • 浏览: 419198 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jQuery源码学习笔记一

阅读更多

不知该起什么题目,随便吧。不过我没心情逐一介绍其API,那是文档的事。比起那些随时会被废弃的方法,我更着重其内在的技术,所以我选择读源码。由于我 从不用jQuery,可能理解有些偏差。不过,看了这么多类库,有许多东西都是共通。比如这个jQuery对象就是DOM对象的加工工场,把DOM对象包 裹其中,外围是许多便捷的方法。我们可以想象一下太阳系,DOM就是太阳,css就其中一个行星,attr是另一个……之所以选择类数组形式,是为了用 map,filter等发端于数组的同名方法进行大数量的DOM操作。好了,下面就直接写在注解中吧。

 

var window = this,
undefined,
_jQuery = window.jQuery,
_$ = window.$,
//把window存入闭包中的同名变量,undefined的情形一样,的确是让更内围的作用域的方法调用时,不要跑到那么远

//_jQuery与_$用于以后重写
jQuery = window.jQuery = window.$ = function( selector, context ) {
  //用于返回一个jQuery对象
  return new jQuery.fn.init( selector, context );
},
//这东西看起来很唬人,其实就是想获取元素的标签名或ID
quickExpr = /^[^<]*(<(.|\s)+>)[^>]*$|^#([\w-]+)$/,
//检测是否一个简单的选择器,怎样才为之简单呢?
//就是一重类选择器,也就是这个样子.red,如果.red .dd就不合要求了
//看它的限制,一定要是类选择器,后面不能跟伪类选择器,ID选择器,属性选择器,第二重第三重的类选择器
//与并联选择器
isSimple = /^.[^:#\[\.,]*$/;
jQuery.fn = jQuery.prototype = {
init: function( selector, context ) {
  //如果为空就把document塞进jQuery对象中
  selector = selector || document;
  //如果第一个参数是DOM对象,那它肯定有nodeType吧,
  //是就开始创建索引,创建类数组对象
  //说白了就是一个hash,只不过键是数字,值是DOM对象
  //不过它除了[0],[1]等数字键外,还有"css","attr","addClass"等字符串键,它们的值对应方法
  //length属性是就Array.prototype.slice与map,filter等方法准备
  //this.context是作为下次搜索的起点,如DOMElement.getElementsByTagName("span")
  if ( selector.nodeType ) {
    this[0] = selector;
    this.length = 1;
    this.context = selector;
    return this;
  }
  //如果传入的是CSS selector字段
  if ( typeof selector === "string" ) {
    //如果是很单的tagName或ID
    var match = quickExpr.exec( selector );
    //选择器类似h1的情形       
    if ( match && (match[1] || !context) ) {
      //如果是标签
      if ( match[1] )
      //clean方法不厚道地放到800行之后,针对许多特殊情况做处理
        selector = jQuery.clean( [ match[1] ], context );
      // HANDLE: $("#id")
      else {   
        var elem = document.getElementById( match[3] );

        // Handle the case where IE and Opera return items
        // by name instead of ID
        //在IE与Opera中,ID并不一定返回一个元素,这时用name来查找
        if ( elem && elem.id != match[3] )
          return jQuery().find( selector );

        //由于ID有排他性,因此需要清空前面的context,       
        var ret = jQuery( elem || [] );
        //重设搜索起点,
        ret.context = document;
        //安装DOM对象
        ret.selector = selector;
        return ret;
      }

      // HANDLE: $(expr, [context])
      // (which is just equivalent to: $(content).find(expr)
    } else
    //处理非常复杂的选择器,如镶嵌的CSS3选择器
      return jQuery( context ).find( selector );

    // HANDLE: $(function)
    // Shortcut for document ready
    //著名的DOMReady的,就是美元符号里面传入一个匿名函数
  } else if ( jQuery.isFunction( selector ) )
    return jQuery( document ).ready( selector );

  // Make sure that old selector state is passed along
  if ( selector.selector && selector.context ) {
    this.selector = selector.selector;
    this.context = selector.context;
  }
  //确保以jQuery的类数组对象返回
  return this.setArray(jQuery.isArray( selector ) ?
    selector :
    jQuery.makeArray(selector));
},

 

基本上init就是个大熔炉,根据传入参数的类型做出不同的处理,如DOM对象,字符串,数组对象与NodeList这样的类数组对象转换成jQuery对象,如果是函数,则改成DOM加载。

 

// Start with an empty selector
selector: "",
// The current version of jQuery being used
jquery: "1.3.2",
//返回jQuery对象所包裹的DOM对象的数量
size: function() {
    return this.length;
},
//jQuery里面的方法都有一个特点,就是功能多
//如著名的css,即是读方法也是写方法
//这个可以返回一个纯数组
//也可以返回一个纯净的DOM对象(根据索引值)
get: function( num ) {
    return num === undefined ?
        // Return a 'clean' array
        Array.prototype.slice.call( this ) :
        // Return just the object
        this[ num ];
},
// Take an array of elements and push it onto the stack
    // (returning the new matched element set)
    pushStack: function( elems, name, selector ) {
        //创建一个新的jQuery对象
        var ret = jQuery( elems );
       //保存原来jQuery对象的引用
        ret.prevObject = this;
        //把原来的context移过来,context在jQuery通常用作搜索的新起点
        ret.context = this.context;
       //把selector标记为一个特殊的字符串,以后再解析为jQuery对象
        if ( name === "find" )
            ret.selector = this.selector + (this.selector ? " " : "") + selector;
        else if ( name )
            ret.selector = this.selector + "." + name + "(" + selector + ")";
        // Return the newly-formed element set
        return ret;
    },
 
    // Force the current matched set of elements to become
    // the specified array of elements (destroying the stack in the process)
    // You should use pushStack() in order to do this, but maintain the stack
    //把许多元素一并放置到新的jQuery对象中,由于用Array.prototype.push,不用自己维护长度
    setArray: function( elems ) {
        // Resetting the length to 0, then using the native Array push
        // is a super-fast way to populate an object with array-like properties
        this.length = 0;
        Array.prototype.push.apply( this, elems );
 
        return this;
    },
 
    // Execute a callback for every element in the matched set.
    // (You can seed the arguments with an array of args, but this is
    // only used internally.)
    //类似javascript1.6的forEach迭代器
    //这里是原型方法调用静态方法
    each: function( callback, args ) {
        return jQuery.each( this, callback, args );
    },
 
    //返回(DOM对象)elem在jQuery对象的位置(仅指数字键)
    //inArray的参数可以是jQuery对象,也可以是DOM对象
    //有点类似数组的indexOf
    index: function( elem ) {
        // Locate the position of the desired element
        return jQuery.inArray(
            // If it receives a jQuery object, the first element is used
            elem && elem.jquery ? elem[0] : elem
        , this );
    },
//这是个异常复杂的方法
//根据参数判断是读方法还是写方法
attr: function( name, value, type ) {
    var options = name;

    // Look for the case where we're accessing a style value
    if ( typeof name === "string" )
        if ( value === undefined )
          //读方法,获取相应属性
            return this[0] && jQuery[ type || "attr" ]( this[0], name );

        else {
          //写方法,设置相应属性
          //一个代理对象
            options = {};
            options[ name ] = value;
        }

    // Check to see if we're setting style values
    //真正是用其静态方法工作,静态方法的优先级是相当高的,排列如下:
    //foo.abc() 高于 this.abc()
    //构造函数内的 this.abc() 高于 原型方法foo.prototype.abc
    //极晚绑定 fooInstance.abc()是优先级最低
    return this.each(function(i){
        // Set all the styles
        for ( name in options )
            jQuery.attr(
                type ?
                    this.style :
                    this,
                name, jQuery.prop( this, options[ name ], type, i, name )
            );
    });
},
分享到:
评论

相关推荐

    jQuery学习笔记(一)

    **jQuery学习笔记(一)** 在深入探讨jQuery之前,我们首先要理解什么是jQuery。jQuery是一个高效、易用且功能丰富的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。由John Resig在2006...

    JQueryEasyUI学习笔记(十)源码

    **jQuery EasyUI 学习笔记(十):深入源码** 在Web开发中,jQuery EasyUI是一个基于jQuery的UI框架,它提供了丰富的组件和便捷的API,帮助开发者快速构建交互式的用户界面。本篇笔记主要关注jQuery EasyUI的源码...

    JQueryEasyUI学习笔记(十一)源码

    在本篇jQuery EasyUI的学习笔记中,我们将深入探讨如何实现右键菜单以及冻结列的功能,这对于构建用户交互丰富的Web应用程序至关重要。jQuery EasyUI是一个基于jQuery的UI库,它提供了大量的预定义组件,使得开发者...

    jquery 学习笔记源码 1第一个jquery

    本篇文章将基于“jQuery学习笔记源码 1第一个jquery”的主题,深入探讨jQuery的核心概念、基本用法以及在实际项目中的应用。 一、jQuery简介 jQuery是由John Resig在2006年创建的,它的目标是“write less, do ...

    JQueryEasyUI学习笔记(十二)源码

    在这一章节的学习笔记中,我们将深入探讨jQuery EasyUI的源码,了解其内部工作原理,从而更好地利用这个强大的工具。 首先,我们需要理解jQuery EasyUI的核心概念:组件化。每个EasyUI组件都是一段封装了特定功能的...

    jquery 学习笔记源码 1-3章

    《jQuery学习笔记源码1-3章》涵盖了jQuery的基础到进阶内容,是初学者深入理解这一强大JavaScript库的关键步骤。jQuery是一个轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。...

    JQuery EasyUI 学习笔记珍藏版

    **jQuery EasyUI 学习笔记珍藏版** jQuery EasyUI 是一个基于 jQuery 的前端框架,它为开发者提供了丰富的UI组件,使得构建用户界面变得更加简单高效。这个珍藏版的学习笔记涵盖了广泛的jQuery EasyUI主题,旨在...

    JQueryEasyUI学习笔记(九)源码

    在本篇JQueryEasyUI的学习笔记中,我们将深入探讨如何利用这个强大的JavaScript库来实现一些常见的数据操作功能,包括批量删除、行内编辑以及自定义编辑器方法。JQueryEasyUI是一个基于jQuery的UI框架,它提供了一...

    JQueryEasyUI学习笔记(十五)异步tree 源码

    在“JQueryEasyUI学习笔记(十五)异步tree 源码”中,我们可以看到关于如何实现这一功能的具体步骤和源代码解析。 首先,我们需要理解异步Tree的基本结构。每个节点都包含一个标识符(id)、文本(text)以及可选...

    锋利的jQuery学习笔记

    《锋利的jQuery学习笔记》是一份深入探讨jQuery框架的学习资料,主要针对想要掌握JavaScript库jQuery的开发者。jQuery是一款高效、简洁的JavaScript库,它极大地简化了JavaScript代码的编写,使得DOM操作、事件处理...

    jQuery 入门级学习笔记及

    本周公司技术讲座轮到我了,准备说说现在流行的jQuery,下面是概要提纲,关键是看custom.js,已上传源码,程序中“//##”是分段用的,大家可以根据每一段取消注释,然后找到相应的id或class名查看效果。

    我的JQuery笔记.doc

    《jQuery学习笔记详解》 jQuery 是一款强大的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。本笔记基于一年的学习经验,涵盖了基础到进阶的知识点,旨在帮助初学者快速掌握...

    jquery读书笔记

    这篇读书笔记将基于jQuery的API文档,结合实际应用,探讨其核心功能和使用技巧,旨在帮助读者更好地掌握这一强大的工具。 一、jQuery简介 jQuery是由John Resig在2006年创建的一个JavaScript库,它的主要目标是简化...

    jquery 学习笔记源码 3jquery常规选择器

    本学习笔记将聚焦于jQuery的核心功能之一:常规选择器。通过理解并熟练运用这些选择器,你可以更加高效地定位和操纵网页中的元素,提升开发效率。 1. 元素选择器: jQuery的元素选择器允许我们根据HTML标签名来...

    jquery学习笔记-相关代码

    **jQuery学习笔记** jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画和Ajax交互。这份笔记旨在深入理解jQuery的核心概念,通过实例代码来加强理解和应用。 1. **jQuery选择器**:...

    jQuerySourceCodeReadingNotes:jQuery源码阅读笔记

    《jQuery源码阅读笔记》是一份深入探讨jQuery库核心机制的文档,旨在帮助开发者理解这个广泛使用的JavaScript库的内部工作原理。jQuery自2006年发布以来,因其简洁的API和强大的功能,成为了前端开发的必备工具。这...

    jQuery 源码分析笔记

    总的来说,jQuery源码的组织清晰,设计精巧,其强大的功能和良好的可扩展性使其成为JavaScript开发中的首选库。通过对源码的深入理解,开发者可以更好地利用jQuery,提升开发效率,同时也能从中学习到JavaScript编程...

    jQuery 学习笔记 (直接打印是个好主意!)

    由于工作需要,所以研究了一段时间的jQuery,参考了大量的宝贵资源,...1、学习开发时的源码 知识点和注释应该是比较全的 2、最后整理的一个文档,可直接打印,再好的记忆,时间一长也会忘记,所以打印是一个不错的主意!

    jquery学习笔记--1

    **jQuery学习笔记--1** jQuery是一个轻量级的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。本篇笔记将深入探讨jQuery的基础知识,包括其核心概念、选择器、DOM操作、事件...

Global site tag (gtag.js) - Google Analytics