标签：
jquery.fn = jquery.prototype = { 添加实例属性和方法，
jquery： 版本，
constructor： 修正指向问题
init(): 初始化 和 参数管理
selector：存储选择字符串
length： this 对象的长度
toArray(): 转数组
get（）: 转原生集合
pushStack（）： jquery 对象入栈
each() : 便利集合
ready（）：DOM加载的接口
slice(): 集合的截取
first（）： 集合的第一项
last(): 集合的最后一项
eq(): 集合的指定项
map(): 返回新集合
end()： 返回集合的前一个状态
push(): (内部使用)
sort(): (内部使用)
splice(): (内部使用)
}
jquery.prototype 的 init:
jQuery.fn.init的功能是对传进来的selector参数进行分析，进行各种不同的处理，然后生成jQuery对象。
|
类型（selector） |
处理方式 |
|
DOM元素 |
包装成jQuery对象，直接返回 |
|
body（优化） |
从document.body读取 |
|
单独的HTML标签 |
document.createElement |
|
HTML字符串 |
document.createDocumentFragment |
|
#id |
document.getElementById |
|
选择器表达式 |
$(…).find |
|
函数 |
注册到dom ready的回调函数
|
我们来分解一个表达式
// A simple way to check for HTML strings
// Prioritize #id over <tag> to avoid XSS via location.hash (#9521)
// Strict HTML recognition (#11290: must start with <)
rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/,
作者的解释呢很简单，一个简单的检测HTML字符串的表达式
分解：
1. 通过选择|分割二义,匹配^开头或者$结尾
2. ^(?:\s*(<[\w\W]+>)[^>]*
3. #([\w-]*))$
4. 还要穿插一下exec方法
所以综合起来呢大概的意思就是：匹配HTML标记和ID表达式（<前面可以匹配任何空白字符，包括空格、制表符、换页符等等）
一个简单的测试：
var s = /(user\d)+([d-h]{2})./; var str = "cuser2ffffcdas32userc"; alert(s.exec(str)); //["user2ff",‘user2‘,‘ff‘] user2ff 满足正则表达式， user2 符合第一个括号里的 ff符合第二个括号的 var s2 = /(user\d).|([d-h]{2})./; var str2 = "cffc2user4c"; alert(s2.exec(str2)); //[‘ffc‘,null,‘ff‘] ffc 满足整个表达式， 第一个括号没找到，所以是null ,ff符合第二个括号
jQuery选择器接口
API
jQuery是总入口，选择器支持9种方式的处理
1.$(document)
2.$(‘<div>’)
3.$(‘div’)
4.$(‘#test’)
5.$(function(){})
6.$("input:radio", document.forms[0]);
7.$(‘input’, $(‘div’))
8.$()
9.$("<div>", {
"class": "test",
text: "Click me!",
click: function(){ $(this).toggleClass("test"); }
}).appendTo("body");
10$($(‘.test’))
init: function( selector, context, rootjQuery ) { var match, elem; // HANDLE: $(""), $(null), $(undefined), $(false) 如果参数是这4个，直接返回， if ( !selector ) { return this; } // Handle HTML strings 如果参数是 字符串 例如 : $("#id") $(".ccc") $("div") $(‘<li>‘) $(‘<div>‘) $(‘<li>2</li><li>33</li>‘) $(‘<li>hello‘) if ( typeof selector === "string" ) { if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) { // Assume that strings that start and end with <> are HTML and skip the regex check 如果参数 以‘<‘ 开头， 以‘>‘ 结尾，即标签，如： $(‘<li>‘) $(‘<div>‘) $(‘<li>1</li><li>2</li>‘) match = [ null, selector, null ]; //match = [null,‘<li>‘,null] [null,‘<div>‘,null] [null,‘<li>1</li><li>2</li>‘,null] } else { match = rquickExpr.exec( selector ); }
//$(‘#id‘) 对应的 match = [‘#id‘,null,‘id‘] $(‘<li>hello‘) 对应的 match = [‘<li>hello‘,‘<li>‘,null];
$(‘.ccc‘) $(‘div‘) 因为匹配不到，所以对应的 match = null;
if ( match && (match[1] || !context) ) { //满足 match是真， 说明是 插入标签 或者 id
// HANDLE: $(html) -> $(array) if ( match[1] ) { //如果match[1] 是真 ，说明插入的是标签，（标签的match第二个不是null） context = context instanceof jQuery ? context[0] : context; //如果context 是jquery对象，转化为js对象， parseHTML(string, 根节点， boolean)方法：把字符串转成一个节点数组，第二个参数是根节点，第三个表示是否对script也进行转换， true 表示 进行转换，false 不进行 praseHTML("<li>1</li><li>2</li><li>3</li>",document,true) ----> [‘li‘,‘li‘,‘li‘] merge()方法：将数组进行合并，这里可以将数组合并到json中：var s = {0:‘a‘,1:‘b‘,length:2}, 进行 merge(s,[‘c‘,‘d‘])后，{0:‘a‘,1:‘b‘,2:‘c‘,3:‘d‘,length:4}; // scripts is true for back-compat jQuery.merge( this, jQuery.parseHTML( match[1], context && context.nodeType ? context.ownerDocument || context : document, true ) ); 这里是 插入标签 并添加属性的方式：只针对但标签，<li></li><li></li> 这个就不行，不是单标签，有2个li 例如：$("<li>",{title:‘hi‘,html:"这是个li"}) // HANDLE: $(html, props) if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) { //满足单标签 并且 第二个参数 是一个面向字面量对象，即json格式的 for ( match in context ) { // Properties of context are called as methods if possible if ( jQuery.isFunction( this[ match ] ) ) { //判断是不是函数，如果是函数，例如： html this[ match ]( context[ match ] ); 执行 html("这是个li"); // ...and otherwise set as attributes } else { this.attr( match, context[ match ] ); 添加个属性：attr(‘title‘,‘hi‘); } } } return this;
传入上下文：
context && context.nodeType ? context.ownerDocument || context : document
ownerDocument和 documentElement的区别
具体请看API手册
jQuery.merge( first, second ) 合并两个数组内容到第一个数组。
jQuery.parseHTML
使用原生的DOM元素的创建函数将字符串转换为一组DOM元素，然后，可以插入到文档中。
str = "hello, <b>my name is</b> jQuery.", html = $.parseHTML( str ),
源码：
parseHTML: function( data, context, keepScripts ) {
if ( !data || typeof data !== "string" ) {
return null;
}
if ( typeof context === "boolean" ) {
keepScripts = context;
context = false;
}
context = context || document;
var parsed = rsingleTag.exec( data ),
scripts = !keepScripts && [];
// Single tag
if ( parsed ) {
return [ context.createElement( parsed[1] ) ];
}
parsed = jQuery.buildFragment( [ data ], context, scripts );
if ( scripts ) {
jQuery( scripts ).remove();
}
return jQuery.merge( [], parsed.childNodes );
},
匹配一个独立的标签
rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>|)$/,
这样如果没有任何属性和子节点的字符串（比如‘<html></html>‘或者‘<div></div>‘这样）会通过正则的匹配，当通过正则的匹配后则会通过传入的上下文直接创建一个节点：
只是单一的标签：
if ( parsed ) {
return [ context.createElement( parsed[1] ) ];
}
而未通过节点的字符串，则通过创建一个div节点，将字符串置入div的innerHTML：
parsed = jQuery.buildFragment( [ data ], context, scripts );
它会把传入的复杂的html转为文档碎片并且存储在jQuery.fragments这个对象里。这里要提一下，document.createDocumentFragment()是相当好用的，可以减少对dom的操作.
创建一个文档碎片DocumentFragment
当一个HTML比一个没有属性的简单标签复杂的时候，实际上，创建元素的处理是利用了浏览器的innerHTML 机制。
1 tmp = tmp || fragment.appendChild( context.createElement("div") );
2
3 // Deserialize a standard representation
4 tag = ( rtagName.exec( elem ) || ["", ""] )[ 1 ].toLowerCase();
5 wrap = wrapMap[ tag ] || wrapMap._default;
6 tmp.innerHTML = wrap[ 1 ] + elem.replace( rxhtmlTag, "<$1></$2>" ) + wrap[ 2 ];
$(‘<img />‘) or $(‘<a></a>‘)，jQuery将使用javasrcipt原生的 createElement()函数创建这个元素。.innerHTML属性来解析传递的HTML并将其插入到当前文档中。在此过程中，一些浏览器过滤掉某些元素，如<html>, <title>, 或 <head>的元素。其结果是，被插入元素可能不是传入的原始的字符串。href属性为绝对URL路径，和Internet Explorer第9版之前，不增加一个单独的兼容层的情况下，将无法正确处理HTML5元素。
如果第一个参数(HTML字符串)为一个空的单标签，且第二个参数context为一个非空纯对象
var jqHTML = $(‘<div></div>‘, { class: ‘css-class‘, data-name: ‘data-val‘ }); console.log(jqHTML.attr[‘class‘]); //css-class console.log(jqHTML.attr[‘data-name‘]); //data-val |
// HANDLE: $(#id) } else { elem = document.getElementById( match[2] ); //通过js的原生方法，获取id元素 // Check parentNode to catch when Blackberry 4.6 returns // nodes that are no longer in the document #6963 if ( elem && elem.parentNode ) { //黑莓有个bug，elem不存在，但是能找到，所以为了准确，再判断elem的父节点是否存在 // Inject the element directly into the jQuery object this.length = 1; this[0] = elem; } this.context = document; this.selector = selector; return this; }
匹配模式三：$(.className) $(.className, context)
如果第一个参数是一个.className，jQuery对象中拥有class名为className的标签元素，
// HANDLE: $(expr, $(...)) } else if ( !context || context.jquery ) { //当执行上下文不存在（第二个参数不存在）或者上下文是jquery对象 return ( context || rootjQuery ).find( selector ); // HANDLE: $(expr, context) // (which is just equivalent to: $(context).find(expr) } else { //当上下文不是jquery对象，this.constructor 就是jquery， 将他转化为jquery对象 return this.constructor( context ).find( selector ); } 最终都是$(document).find(...);
} else if ( selector.nodeType ) { //不管是什么节点，都有nodeType 类型，如果不是节点，就不可能有nodeType this.context = this[0] = selector; this.length = 1; return this;
} else if ( jQuery.isFunction( selector ) ) { //判断是不是函数，$(function(){ }) return rootjQuery.ready( selector ); } 简写 方式 最终 都是 document.ready(function(){ }); 例如： $( $("#id") ) 和 $("#id") 是一样的 if ( selector.selector !== undefined ) { //判断是不是jquery对象，如果是jquery对象，那么他的selector就不是undefined this.selector = selector.selector; this.context = selector.context; }
转成json 内部调用的时候：和merge()差不多
return jQuery.makeArray( selector, this );
jQuery 构造器
由此可见，从本质上来说，构建的jQuery对象，其实不仅仅只是dom，还有很多附加的元素，用数组的方式存储，当然各种组合有不一样，但是存储的方式是一样的
总的来说分2大类：
CSS选择器是通过jQuery.find(selector)函数完成的，通过它可以分析选择器字符串，并在DOM文档树中查找符合语法的元素集合
toArray: function() { return core_slice.call( this ); }, get: function( num ) { return num == null ? // Return a ‘clean‘ array this.toArray() : // Return just the object ( num < 0 ? this[ this.length + num ] : this[ num ] ); }, pushStack: function( elems ) { // $(‘div‘).pushStack($(‘span‘)).css(‘background‘,‘red‘); div和span放在栈中，div先进，span后进，但是先进后出 // 所以后面的sapn背景是红色 //end()方法，就是找到栈的上一层 // Build a new jQuery matched element setting var ret = jQuery.merge( this.constructor(), elems ); // Add the old object onto the stack (as a reference) ret.prevObject = this; ret.context = this.context; // Return the newly-formed element set return ret; }, each: function( callback, args ) { return jQuery.each( this, callback, args ); }, ready: function( fn ) { // Add the callback jQuery.ready.promise().done( fn ); return this; }, slice: function() { //返回新的包装集 return this.pushStack( core_slice.apply( this, arguments ) ); }, first: function() { return this.eq( 0 ); }, last: function() { return this.eq( -1 ); }, eq: function( i ) { var len = this.length, j = +i + ( i < 0 ? len : 0 ); return this.pushStack( j >= 0 && j < len ? [ this[j] ] : [] ); }, map: function( callback ) { return this.pushStack( jQuery.map(this, function( elem, i ) { return callback.call( elem, i, elem ); })); }, end: function() { return this.prevObject || this.constructor(null); }, // For internal use only. // Behaves like an Array‘s method, not like a jQuery method. push: core_push, sort: [].sort, splice: [].splice
$("li","ul") //选择ul中的li
$(".cc","#test") //选择id是test中的class是cc 后面是前面的父元素
jquery源码笔记（三）： jquery.prototype的一些方法 和属性 init
标签：
原文地址：http://www.cnblogs.com/a-lonely-wolf/p/5701327.html
