jquery之$()一般我们使用jquery的时候,都是使用$(),$指向全局的jquery,所以其实是调用了jquery(),结果是返回一个jq对象,但我们使用时却不需使用new创建对象,所以可以推测$()是一个工厂函数。
$()的定义jquery()在src/core.js中定义,若在该方法中调用return new jquery()则陷入循环,所以调用init()协助构造实例。值得一提的是,jquery.fn在/src/core.js指向了jquery.prototype。
// define a local copy of jquery jquery = function( selector, context ) { // the jquery object is actually just the init constructor 'enhanced' // need init if jquery is called (just allow error to be thrown if not included) return new jquery.fn.init( selector, context ); }
init方法的定义jquery.fn.init()在src/core/init.js中定义。方法接受三个参数selector, context, root,在方法内部,先判断是否有参数,无参数时返回false。
init = jquery.fn.init = function( selector, context, root ) { var match, elem; // handle: $(), $(null), $(undefined), $(false) if ( !selector ) { return this; } // method init() accepts an alternate rootjquery // so migrate can support jquery.sub (gh-2101) root = root || rootjquery; // handle html strings // < xxx > 或 $(#id) if ( typeof selector === string ) { if ( selector[ 0 ] === <" && selector[ selector.length - 1 ] === "> && selector.length >= 3 ) { // assume that strings that start and end with <> are html and skip the regex check match = [ null, selector, null ]; } else { // match[1]是html字符串,match[2]是匹配元素的id // selector是id选择器时match[1]为undefined,match[2]是匹配元素的id // selector是html字符串,match[1]是html字符串,match[2]为undefined match = rquickexpr.exec( selector ); } // match html or make sure no context is specified for #id // 匹配结果非空 且 存在匹配字符串或context空时执行 // 未为id选择器限定查找范围 if ( match && ( match[ 1 ] || !context ) ) { // handle: $(html) -> $(array) if ( match[ 1 ] ) { context = context instanceof jquery ? context[ 0 ] : context; // option to run scripts is true for back-compat // intentionally let the error be thrown if parsehtml is not present // 生成dom节点并合并到this上 jquery.merge( this, jquery.parsehtml( match[ 1 ], context && context.nodetype ? context.ownerdocument || context : document, true ) ); // handle: $(html, props) // 遍历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) // 处理id选择器且无context } else { elem = document.getelementbyid( match[ 2 ] ); if ( elem ) { // inject the element directly into the jquery object this[ 0 ] = elem; this.length = 1; } return this; } // handle: $(expr, $(...)) // selector是选择器 context为undefined或context.jquery存在时执行。 // $(#id,context)或$(.class [, context])等情况 } else if ( !context || context.jquery ) { return ( context || root ).find( selector ); // handle: $(expr, context) // (which is just equivalent to: $(context).find(expr) } else { return this.constructor( context ).find( selector ); } // handle: $(domelement) // 传入dom元素 } else if ( selector.nodetype ) { this[ 0 ] = selector; this.length = 1; return this; // handle: $(function) // shortcut for document ready } else if ( jquery.isfunction( selector ) ) { return root.ready !== undefined ? root.ready( selector ) : // execute immediately if ready is not present selector( jquery ); } return jquery.makearray( selector, this ); };
selector是字符串如果有selector非空,先处理selector是字符串的情况,分为html字符串、$(selector)、$(expr, $(...))和$(expr, context)四种。如果selector是字符串类型,根据传入的字符串返回生成的dom节点,处理时先用正则匹配,查找html字符串或id。匹配结果非空且存在匹配字符串或context空时说明selctor是html字符串或selector是id选择器且未限定查找上下文。执行处理html字符串时,先确定生成后的节点要插入的document是哪个(即context参数),默认是加载jquery的document,调用$.parsehtml()生成dom节点并添加到this;如果context是对象,则是$(html, props)的调用,将属性或者方法挂载到dom上,返回生成的jq对象。如果匹配到$(#id)的调用且context空时,则直接调用document.getelementbyid查找元素,元素存在时将this[0]指向该元素,返回查找结果。
如果selector不是id选择器或context非空,调用find进行查找,如果context非空,则从context开始查找,否则全局查找,将查找结果作为返回值。
selector是dom元素接着处理传入参数是dom元素的情况。将this[0]指向dom元素,设置jq对象长度为1,并返回this。
selector是函数最后处理$(function(){}),如果存在ready则调用传入函数调用ready(f()),否则传入jquery,直接调用函数,调用makearray,将其结果作为返回值。
修改init的原型init = jquery.fn.init = function( selector, context, root ) { ... }// give the init function the jquery prototype for later instantiationinit.prototype = jquery.fn;
在原型上定义方法init,然后将init的原型指向jquery的原型,如果不这么做,则创建的实例的原型是init.prototype,不是jquery.fn,其实是init的实例而不是jquery的实例,无法调用在core.js中定义在jquery.fn上的各种变量和方法。
相关推荐:
通过ajax如何请求下载execl文件
在js中用slice封装数组方法
以上就是jquery中$()函数的使用方法的详细内容。