この記事では、jQuery で $() 関数を使用する方法を説明します。困っている人はぜひ参考にしてください。 jQuery の
一般に jQuery を使用するときは常に $()
を使用します。$
はグローバル jQuery
を指します。実際には、jQuery()
が呼び出され、その結果として jq オブジェクトが返されますが、それを使用する場合、オブジェクトを作成するために new
を使用する必要はありません。したがって、$( )
はファクトリー関数であると推測できます。 $()
,$
指向全局的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 ); }
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
是字符串的情况,分为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
开始查找,否则全局查找,将查找结果作为返回值。
接着处理传入参数是Dom元素的情况。将this[0]
指向Dom元素,设置jq对象长度为1,并返回this
。
最后处理$(function(){})
,如果存在ready
则调用传入函数调用ready(f())
,否则传入jQuery,直接调用函数,调用makeArray
,将其结果作为返回值。
init = jQuery.fn.init = function( selector, context, root ) { ... } // Give the init function the jQuery prototype for later instantiation init.prototype = jQuery.fn;
在原型上定义方法init
,然后将init的原型指向jQuery的原型,如果不这么做,则创建的实例的原型是init.prototype
,不是jQuery.fn
,其实是init的实例而不是jQuery的实例,无法调用在core.js
中定义在jQuery.fn
jQuery()
の定義は、この中で return が呼び出された場合、<code>src/core.js
に定義されます。メソッド new jQuery() はループ内にトラップされるため、インスタンスの構築を支援するために init()
が呼び出されます。 jQuery.fn
が /src/core.js
の jQuery.prototype
を指していることに注意してください。 rrreee
jQuery.fn.init()
はsrc/core/init.js
に定義されています。このメソッドは 3 つのパラメータ selector、context、root
を受け取ります。メソッド内では、パラメータが存在するかどうかが最初に判断され、パラメータがない場合は false
が返されます。 rrreee selector
が空でない場合は、最初に selector
が文字列である場合を処理し、html に分割しますstring, $(selector)、$(expr, $(...))
、$(expr, context)
。 selector
が文字列タイプの場合、処理中に、最初に通常の一致を使用して HTML 文字列または ID を見つけます。一致結果が空ではなく、一致する文字列が存在するか、コンテキストが空の場合、それは、selector
が HTML 文字列であるか、selector
が ID セレクターであり、検索コンテキストは制限されません。 HTML 文字列を処理するときは、まず、生成されたノードを挿入するドキュメント (つまり、context
パラメーター) を決定します。デフォルトでは、jQuery ドキュメントをロードし、$.parseHTML()dom ノードを生成し、<code>this
に追加します。context
がオブジェクトの場合、これは $(html, props)
の呼び出しです。 、および属性、またはメソッドは dom にマウントされ、生成された jq オブジェクトを返します。 $(#id)
の呼び出しが一致し、context
が空の場合、document.getElementById
が直接呼び出され、要素が検索されます。要素が存在する場合、this[0] は要素を指し、検索結果を返します。 selector
が ID セレクターではない場合、または context
が空でない場合、context
の場合は find
を呼び出して検索します。が空ではない場合は、 context
から検索を開始します。それ以外の場合は、グローバルに検索し、検索結果を戻り値として使用します。
this[0]
を Dom 要素にポイントし、jq オブジェクトの長さを 1 に設定して、this
を返します。
$(function(){})
を処理します。ready
が存在する場合は、受信した関数呼び出し を呼び出します。それ以外の場合は jQuery で渡し、関数を直接呼び出し、<code>makeArray
を呼び出し、結果を戻り値として使用します。 init
を定義し、init のプロトタイプを jQuery のプロトタイプにポイントします。 、作成されたインスタンスのプロトタイプは jQuery.fn
ではなく init.prototype
です。実際には jQuery のインスタンスではなく init のインスタンスです。core.js。jQuery.fn
のさまざまな変数とメソッド。 以上がjQueryで$()関数を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。