jQuery源码学习记录(1)基本结构和选择器

原创 2015年07月10日 14:22:39

说明:博文纯属自己的学习笔记,是照着高手的笔记一步步走的。所以大多数步骤是一样的,会加上自己对代码的理解,也包括自己测试的代码结果。

一、整体结构

1、jQuery无new的构建

var aQuery = function(selector, context) {
       returnnew aQuery.prototype.init();
}
aQuery.prototype = {
    init: function() {
        return this;
    },
    name: function() {
        returnthis.age;
    },
    age: 20
}
aQuery.prototype.init.prototype = aQuery.prototype;
console.log(aQuery().name()) //20

jquery的构建思想
*理解:不能new,所以要在使用的时候返回new 的对象的原型的初始方法。
关键实现,aQuery.prototype.init.prototype = aQuery.prototype;
没有这句话的话差别在这里*
这里写图片描述

2、链式调用

aQuery.prototype = {
    init: function() {
        returnthis;
    },
    name: function() {
        returnthis
    }
}

理解:在每个方法里都返回this即可。

3插件接口
关键代码就下面几句

jQuery.extend = jQuery.fn.extend = function() {
var src, copyIsArray, copy, name, options, clone,
        target= arguments[0] || {},    // 常见用法 jQuery.extend( obj1, obj2 ),此时,target为arguments[0]
        i = 1,
        length = arguments.length,
        deep = false;

    // Handle a deep copy situationif ( typeof target === "boolean" ) {    // 如果第一个参数为true,即 jQuery.extend( true, obj1, obj2 ); 的情况
        deep = target;  // 此时target是true
        target = arguments[1] || {};    // target改为 obj1// skip the boolean and the target
        i = 2;
    }

    // Handle case when target is a string or something (possible in deep copy)if ( typeof target !== "object" && !jQuery.isFunction(target) ) {  // 处理奇怪的情况,比如 jQuery.extend( 'hello' , {nick: 'casper})~~
        target = {};
    }

    // extend jQuery itself if only one argument is passedif ( length === i ) {   // 处理这种情况 jQuery.extend(obj),或 jQuery.fn.extend( obj )target = this;// jQuery.extend时,this指的是jQuery;jQuery.fn.extend时,this指的是jQuery.fn
        --i;
    }
**********
}

注意:是通过this给类添加方法的,所以可以统一内部实现。

二、选择器

1 处理ID

elem = document.getElementById( match[2] );if ( elem && elem.parentNode ) {this.length = 1;
    this[0] = elem;
}
this.context = document;
this.selector = selector;
return this;

2 className

classname:return jQuery(document).find(className);

注意:说白了就是调用find方法。

3 htmltag

if ( match && (match[1] || !context) ) {
    // HANDLE: $(html) -> $(array)
    if ( match[1] ) {
        context = context instanceof jQuery ? context[0] : context;
        // scripts is true for back-compat
        jQuery.merge( this, jQuery.parseHTML(
            match[1],
            context && context.nodeType ? context.ownerDocument || context : document,
            true
        ) );
        // HANDLE: $(html, props)
        if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) {
            for ( match in context ) {
                // Properties of context are called as methods if possible
                if ( jQuery.isFunction( this[ match ] ) ) {
                    this[ match ]( context[ match ] );
                    // ...and otherwise set as attributes
                } else {
                    this.attr( match, context[ match ] );
                }
            }
        }
        return this;
        // HANDLE: $(#id)
    } else {

*注意:简单来说就是把传入的htmltag通过
parseHTML给加入到dom中去了,如果一起传入的还有其他参数的话,下面的判断是说 如果是这个对象的函数的话就执行这个函数,如果没有的话就给他加上这个函数*

4 $(jQuery对象)
这里写图片描述
一张图片看懂,其实都一样。

文章转载自这里,这里纯粹是自己的学习笔记,每一步内容都经过亲身验证,所以可能会和原版有所不同,包括测试代码运行的结果。

jQuery学习之基本选择器、层次选择器和并且选择器

JQuery学习 /** * jQuery是对JavaScript的封装,跨浏览器 * 前期jQuery主要侧重于对于节点的查询 * 后期jQuery增加了事件的处理以及ajax的操作...
  • qq_20788055
  • qq_20788055
  • 2017年08月02日 10:56
  • 196

jQuery基础教程之强大的选择器(基本选择器)

jQuery之所以称之为“jQuery”,主要就是因为她强大的选择器,也就是javascript query的意思。 今天我来说一说,jQuery的最基本的选择器。 jQuery的基本选择...
  • wql19881207
  • wql19881207
  • 2012年03月31日 13:41
  • 761

JQuery 常见选择器详解练习1

1.常见基本选择器代码 Insert title here $(function(){ //alert($("#ID").val());//查找ID并显示其内容 //ale...
  • linhaiyun_ytdx
  • linhaiyun_ytdx
  • 2016年11月06日 12:22
  • 357

Jquery选择器分类(基本选择器,层次选择器,过滤选择器,表单选择器)

基本选择器 说明:通过元素id、class和标签名等来查找DOM元素 1.id选择器:$("#test");//选取id为test的元素 2.类选择器:$(".test");//选取所有class为...
  • allan492975230
  • allan492975230
  • 2013年08月01日 15:50
  • 1163

JQuery的基本架构学习

引入     以前学习原生JS然后切换到用JQ的时候总觉得很不习惯,甚至有点排斥用JQ。后来自己写项目一直到公司实习用JQ的这段时间,才深深感受到JQ的强大~JQ不仅做到兼容很多浏览器,还能很方...
  • fengqingtao2008
  • fengqingtao2008
  • 2015年12月02日 22:24
  • 1261

jQuery 源码分析 选择器

jquery
  • wx11055
  • wx11055
  • 2016年01月11日 13:51
  • 307

jQuery中选择器有哪几种(哪几种最常见)

一、基本选择器 基本选择器是jQuery中最常用也是最简单的选择器,它通过元素的id、class和标签名等来查找DOM元素。 1、ID选择器 #id 描述:根据给定的id匹配一个元素, 返回单个...
  • qq_40646143
  • qq_40646143
  • 2018年01月17日 16:49
  • 67

jQuery三种常见选择器

什么是jQuery选择器 jQuery选择器允许您对DOM元素组或单个DOM节点进行操作,通过它可以准确地选取您希望应用效果的元素。 jQuery元素选择器 jQuery使用CSS选择器来...
  • u010257252
  • u010257252
  • 2017年04月08日 00:19
  • 360

javascript 原生 模仿 jquery 选择器 代码

使用这段代码可以简单的实现类似 $(“#tab_ul”) 选择器效果。当然,是基于原生的。 Array.prototype.each=function(f){ for(var ...
  • FungLeo
  • FungLeo
  • 2015年09月09日 14:36
  • 1499

Jquery的过滤选择器分为哪几种?

Jquery的过滤选择器分为哪几种? 转载▼ 标签:  jquery   过滤选择器   分类 分类: JQuery 所有的过滤选择器分为哪几种: 一、基本过滤选择器(...
  • u013700340
  • u013700340
  • 2014年03月19日 11:49
  • 1075
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery源码学习记录(1)基本结构和选择器
举报原因:
原因补充:

(最多只允许输入30个字)