ホームページ >ウェブフロントエンド >jsチュートリアル >jQueryで$()関数を使用する方法
jQueryで$()関数を使用する方法
- 不言オリジナル
- 2018-07-21 10:56:053744ブラウズ
この記事では、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 );
}
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 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
initメソッドの定義
jQuery.fn.init()はsrc/core/init.jsに定義されています。このメソッドは 3 つのパラメータ selector、context、root を受け取ります。メソッド内では、パラメータが存在するかどうかが最初に判断され、パラメータがない場合は false が返されます。 rrreeeselector は文字列
です 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 から検索を開始します。それ以外の場合は、グローバルに検索し、検索結果を戻り値として使用します。
セレクターは DOM 要素です
次に、受信パラメータが Dom 要素である場合を処理します。this[0] を Dom 要素にポイントし、jq オブジェクトの長さを 1 に設定して、this を返します。
セレクターは関数
です最後に$(function(){}) を処理します。ready が存在する場合は、受信した関数呼び出し を呼び出します。それ以外の場合は jQuery で渡し、関数を直接呼び出し、<code>makeArray を呼び出し、結果を戻り値として使用します。 init
rrreee のプロトタイプを変更するこれを行わない場合は、プロトタイプにメソッド
init を定義し、init のプロトタイプを jQuery のプロトタイプにポイントします。 、作成されたインスタンスのプロトタイプは jQuery.fn ではなく init.prototype です。実際には jQuery のインスタンスではなく init のインスタンスです。core.js。jQuery.fn のさまざまな変数とメソッド。 以上がjQueryで$()関数を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。