メインコンテンツタイトル
メインタイトル
🎜>
ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery.prototype.init セレクター コンストラクター ソース コードのアイデア分析_jquery
jQuery.prototype.init セレクター コンストラクター ソース コードのアイデア分析_jquery
- WBOYオリジナル
- 2016-05-16 17:42:091512ブラウズ
1. ソースコードアイデア分析のまとめ
概要:
jQuery の核となるアイデアは簡単にまとめると「クエリと dom の操作」です。 今日は主に jQuery.prototype を分析します。 .init セレクター コンストラクター。セレクター関数のパラメーターを処理します。
この関数のパラメーターは、jQuery()===$() の実行関数のパラメーターです。 jQuery の基本的な枠組みを理解したら、この記事をもう一度読んでください。
アイデア分析:
次に、jQuery のいくつかの使用例 (dom のクエリに使用) を示します。各ケースは、セレクター インスタンス (通常、クエリされた dom ノードを含む jQuery オブジェクト (nodeList オブジェクト) と呼ばれます) を返します。
1. $("")、$(null)、$(unknown)、$(false) の処理
パラメータが上記の不正な値の場合、jQuery オブジェクトには dom ノードが含まれていません
2. $(DOMElement) の処理
パラメータがノード要素の場合、jQuery オブジェクトにはパラメータ ノード要素が含まれ、属性値がそれぞれパラメータ ノード要素、コンテキスト属性、長さ属性として追加されます。 1 と、jQuery オブジェクトの dom ノードにアクセスするための [] の使用法
例 2.1:
var obj = document.getElementById ('container'),
jq = $(obj);
console.log(jq.length); ; //1
console.log(jq.context); //obj
console.[0]); //obj
3. HTML 文字列)
最初のパラメータが HTML 文字列の場合、jQuery オブジェクトには、jQuery.clean 関数によって作成されたフラグメント ドキュメント フラグメントの Childnodes ノードが含まれます
例 3.1:
var jqHTML = $('
最初のパラメータ (HTML 文字列) が空の場合単一タグ、2 番目のパラメータ context は空ではない純粋なオブジェクトです
例 3.2:
var jqHTML = $(' ', { class: 'css-class', data-name: 'data-val' });
console.log(jqHTML.attr['class'] ); //css-class
console.log(jqHTML.attr['data-name']); //data-val
4. $(#id)
最初のパラメーターが # プラス要素 ID の場合、jQuery オブジェクトにはこの ID を持つ唯一の要素ノード
が含まれ、コンテキストが追加されます。 selector、length 属性、属性値がそれぞれ document、parameter string、1 である user 属性 [] jQuery オブジェクトでの dom ノードへのアクセスの使用法
例 4.1:
var jq = $('#container');
console.log( jq.[0]); //含まれる dom ノード要素
console.log(jq.length) //1
console.log(jq.context); //ドキュメント
console.log( jq.selector); //container
5. プロセス $(.className )
最初のパラメーターが .className の場合、jQuery オブジェクトにはクラス名 className のタグ要素が含まれます。そして、パラメータ文字列、ドキュメントのセレクター、およびコンテキスト属性として属性値を追加します
実際の実行コードは次のとおりです:
return jQuery(document).find(className);
6. 処理 $(.className, context)
最初のパラメータが .className の場合、2 番目のパラメータはコンテキスト オブジェクト (.className ($(.className .className) の処理に相当)、jQuery オブジェクト、または dom ノードにすることができます)、
jQuery オブジェクトには子孫ノードが含まれます2 番目のパラメーター context オブジェクトにクラス名 className の要素を追加し、コンテキスト属性とセレクター属性を追加します
実際の実行コードは次のとおりです:
return jQuery(context).find(className)
例 6.1:
html コード:
コードをコピーします
コードをコピー
コードをコピー
コードは次のとおりです。以下のように:
var rootjQuery = $(document),
rquickExpr = /^(?:[^#<]*(<[wW] >)[^>]*$|#( [w-]*)$)/;
jQuery.fn = jQuery.prototype = {
init: function( selector, context, rootjQuery ) {
var match, elem, ret, doc;
// $("")、$(null)、$(unknown)、$(false) を処理します
if ( !selector ) {
return this;
}
// ハンドル $(DOMElement)
if ( selector.nodeType ) {
this.context = this[0] = selector;
this.length = 1;
これを返します;
}
// HTML 文字列を処理します
if ( typeof selector === "string" ) {
if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {
// <> で始まる文字列と仮定します。 HTML であり、正規表現チェックをスキップします
match = [ null, selector, null ];
} else {
match = rquickExpr.exec( selector );
}
// html と一致するか、#id にコンテキストが指定されていないことを確認します。
// match[1] 不ヌル，则である html 字符串，マッチ[2] 不ヌル，则元素id
if ( match && (match[1] || !context) ) {
// HANDLE: $(html) -> $(array)
if ( match[1] ) {
context = jQuery の context インスタンス ?コンテキスト[0] : コンテキスト;
doc = ( context && context.nodeType ? context.ownerDocument || context : document );
// スクリプトは逆互換に true です。
// selector は文档碎片内の子ノード構成の数グループ
selector = jQuery.parseHTML( match[1], doc, true );
// 結果match[1]が空の单标签元素(例：
概要:
jQuery の核となるアイデアは簡単にまとめると「クエリと dom の操作」です。 今日は主に jQuery.prototype を分析します。 .init セレクター コンストラクター。セレクター関数のパラメーターを処理します。
この関数のパラメーターは、jQuery()===$() の実行関数のパラメーターです。 jQuery の基本的な枠組みを理解したら、この記事をもう一度読んでください。
アイデア分析:
次に、jQuery のいくつかの使用例 (dom のクエリに使用) を示します。各ケースは、セレクター インスタンス (通常、クエリされた dom ノードを含む jQuery オブジェクト (nodeList オブジェクト) と呼ばれます) を返します。
1. $("")、$(null)、$(unknown)、$(false) の処理
パラメータが上記の不正な値の場合、jQuery オブジェクトには dom ノードが含まれていません
2. $(DOMElement) の処理
パラメータがノード要素の場合、jQuery オブジェクトにはパラメータ ノード要素が含まれ、属性値がそれぞれパラメータ ノード要素、コンテキスト属性、長さ属性として追加されます。 1 と、jQuery オブジェクトの dom ノードにアクセスするための [] の使用法
例 2.1:
コードをコピー コードは次のとおりです:
var obj = document.getElementById ('container'),
jq = $(obj);
console.log(jq.length); ; //1
console.log(jq.context); //obj
console.[0]); //obj
3. HTML 文字列)
最初のパラメータが HTML 文字列の場合、jQuery オブジェクトには、jQuery.clean 関数によって作成されたフラグメント ドキュメント フラグメントの Childnodes ノードが含まれます
例 3.1:
コードをコピー コードは次のとおりです。
var jqHTML = $('
記事タイトル
内容< /p>');
console.log(jqHTML); // [
,
];
最初のパラメータ (HTML 文字列) が空の場合単一タグ、2 番目のパラメータ context は空ではない純粋なオブジェクトです
例 3.2:
コードをコピー コードは次のとおりです。
var jqHTML = $(' ', { class: 'css-class', data-name: 'data-val' });
console.log(jqHTML.attr['class'] ); //css-class
console.log(jqHTML.attr['data-name']); //data-val
4. $(#id)
最初のパラメーターが # プラス要素 ID の場合、jQuery オブジェクトにはこの ID を持つ唯一の要素ノード
が含まれ、コンテキストが追加されます。 selector、length 属性、属性値がそれぞれ document、parameter string、1 である user 属性 [] jQuery オブジェクトでの dom ノードへのアクセスの使用法
例 4.1:
コードをコピー コードは次のとおりです。
var jq = $('#container');
console.log( jq.[0]); //含まれる dom ノード要素
console.log(jq.length) //1
console.log(jq.context); //ドキュメント
console.log( jq.selector); //container
5. プロセス $(.className )
最初のパラメーターが .className の場合、jQuery オブジェクトにはクラス名 className のタグ要素が含まれます。そして、パラメータ文字列、ドキュメントのセレクター、およびコンテキスト属性として属性値を追加します
実際の実行コードは次のとおりです:
コードをコピー コードは次のとおりです。
return jQuery(document).find(className);
6. 処理 $(.className, context)
最初のパラメータが .className の場合、2 番目のパラメータはコンテキスト オブジェクト (.className ($(.className .className) の処理に相当)、jQuery オブジェクト、または dom ノードにすることができます)、
jQuery オブジェクトには子孫ノードが含まれます2 番目のパラメーター context オブジェクトにクラス名 className の要素を追加し、コンテキスト属性とセレクター属性を追加します
実際の実行コードは次のとおりです:
コードをコピー コードは次のとおりです:
return jQuery(context).find(className)
例 6.1:
html コード:
コードをコピー コードは次のとおりです:
/p>
JavaScript コード:
コードをコピーします コードは次のとおりです: var jq, context;
context = '.sub'; var jq = $('.title',
console); log(jq.text()); //サブコンテンツタイトル
console.log(jq.context); //ドキュメント
console.log(jq.selector); >context = $('.sub');
var jq = $('.title', context);
console.log(jq.text()); //サブコンテンツタイトル
console .log(jq.context); //ドキュメント
console.log(jq.selector); //.sub .title
context = $('.sub')[0]; jq = $('.title', context);
console.log(jq.text()); //二次コンテンツタイトル
console.log(jq.context); //className が含まれるノード要素sub
console.log(jq.selector); //.title
7. $(fn) の処理
最初のパラメータが fn 関数の場合、$(document) を呼び出します。 .ready(fn);
例 7.1:
console); log(jq.text()); //サブコンテンツタイトル
console.log(jq.context); //ドキュメント
console.log(jq.selector); >context = $('.sub');
var jq = $('.title', context);
console.log(jq.text()); //サブコンテンツタイトル
console .log(jq.context); //ドキュメント
console.log(jq.selector); //.sub .title
context = $('.sub')[0]; jq = $('.title', context);
console.log(jq.text()); //二次コンテンツタイトル
console.log(jq.context); //className が含まれるノード要素sub
console.log(jq.selector); //.title
7. $(fn) の処理
最初のパラメータが fn 関数の場合、$(document) を呼び出します。 .ready(fn);
例 7.1:
コードをコピーします
コードは次のとおりです: $(function(e){ console.log('DOMContent isloaded'); })
//上記のコードは次と同等です: jQuery(document).ready (function(e) {
console.log('DOMContent isloaded');
});
8. $(jQuery オブジェクト)
最初のパラメータの場合は jQuery オブジェクトです。dom をクエリするときにパラメーターが # プラス要素 ID である場合、返された jQuery オブジェクトにはパラメーター文字列の属性値、ドキュメントのセレクター、およびコンテキスト属性
が追加されることが上で分析されました。例 8.1:
console.log('DOMContent isloaded');
});
8. $(jQuery オブジェクト)
最初のパラメータの場合は jQuery オブジェクトです。dom をクエリするときにパラメーターが # プラス要素 ID である場合、返された jQuery オブジェクトにはパラメーター文字列の属性値、ドキュメントのセレクター、およびコンテキスト属性
が追加されることが上で分析されました。例 8.1:
コードをコピー
コードは次のとおりです。 var jq = $(' #container'); console.log( jq.selector); // #container console.log(jq.context); // ではどうすればよいでしょうか$($('#container')) が表示されるとき?同様に、返される jQuery オブジェクトはケース 5 および 6 と同じです。
例 8.2: コードをコピー
コードは次のとおりです。以下のように:
var jq2 = $($('#container')); console.log(jq2.selector); // #container console.log(jq2) .context ; コード コードは次のとおりです:
var rootjQuery = $(document),
rquickExpr = /^(?:[^#<]*(<[wW] >)[^>]*$|#( [w-]*)$)/;
jQuery.fn = jQuery.prototype = {
init: function( selector, context, rootjQuery ) {
var match, elem, ret, doc;
// $("")、$(null)、$(unknown)、$(false) を処理します
if ( !selector ) {
return this;
}
// ハンドル $(DOMElement)
if ( selector.nodeType ) {
this.context = this[0] = selector;
this.length = 1;
これを返します;
}
// HTML 文字列を処理します
if ( typeof selector === "string" ) {
if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {
// <> で始まる文字列と仮定します。 HTML であり、正規表現チェックをスキップします
match = [ null, selector, null ];
} else {
match = rquickExpr.exec( selector );
}
// html と一致するか、#id にコンテキストが指定されていないことを確認します。
// match[1] 不ヌル，则である html 字符串，マッチ[2] 不ヌル，则元素id
if ( match && (match[1] || !context) ) {
// HANDLE: $(html) -> $(array)
if ( match[1] ) {
context = jQuery の context インスタンス ?コンテキスト[0] : コンテキスト;
doc = ( context && context.nodeType ? context.ownerDocument || context : document );
// スクリプトは逆互換に true です。
// selector は文档碎片内の子ノード構成の数グループ
selector = jQuery.parseHTML( match[1], doc, true );
// 結果match[1]が空の单标签元素(例：
)かつコンテキストがオブジェクト文字面量である場合
if ( rsingleTag.test( match[1] ) && jQuery .isPlainObject( context ) ) {
// 結果contextオブジェクトが空でない場合、オブジェクト内のプロパティをselector数グループ内にあるdomポイント内に追加します
this.attr.call( selector, context, true );
}
// マージ関数のパラメータは 2 つの数組であり、目的は 2 番目の数組内の結合を最初の数組に結合することであり、これは 1 つの数組ではありません。
// これは選択器 init 構造関数のサンプル オブジェクト、このオブジェクトは jQuery.prototype オブジェクト内の length 属性 (0 であることが認められています) を継承しているため、merge 関数ソースコード
// セレクター内の dom がこのオブジェクトに結合されます。オブジェクトを返します
return jQuery.merge( this, selector );
// ハンドル: $(#id)
} else {
elem = document.getElementById( match[2] );
// Blackberry 4.6 が
// ドキュメントに存在しなくなったノードをキャッチするためにparentNode をチェックします #6963
if ( elem && elem.parentNode ) {
// IE が次の場合を処理しますOpera は項目を返します
// ID ではなく名前で
// ie6、7 と Opera が存在するバグ、当一标签名と一个标签id值相等の場合、
// document.getElementById(# id) 関数数は提前出现的标签元素を返します
if ( elem.id !== match[2] ) {
// 結果以上Bug が存在する場合、返還由find関数数が返される文書文档の後代元素集合
return rootjQuery.find( selector );
}
// それ以外の場合は、要素を jQuery オブジェクトに直接挿入します
this.length = 1;
this[0] = 要素;
}
this.context = ドキュメント;
this.selector = セレクター;
これを返します;
}
// HANDLE: $(expr, $(...))
// context が存在しないか、context は jQuery 对オブジェクト
} else if ( !context || context.jquery ) {
return ( context || rootjQuery ).find( selector );
// ハンドル: $(expr, context)
// (これは $(context).find(expr) と同等です
// context は className または dom 节点元素
} else {
// 等同然 jQuery(context).find(selector)
return this.constructor( context ).find( selector );
}
// 处理$(fn)== =$(document).ready(fn)
} else if ( jQuery.isFunction( selector ) ) {
return rootjQuery.ready( selector );
}
// 处理$(jQuery对象) )
if ( selector.selector !== unknown ) {
this.selector = selector.selector;
this.context = selector.context;
//当第一个パラメータselector が jQuery オブジェクトの場合、セレクター内の dom ポイントをこのオブジェクトに結合し、このオブジェクトを返します。
if ( rsingleTag.test( match[1] ) && jQuery .isPlainObject( context ) ) {
// 結果contextオブジェクトが空でない場合、オブジェクト内のプロパティをselector数グループ内にあるdomポイント内に追加します
this.attr.call( selector, context, true );
}
// マージ関数のパラメータは 2 つの数組であり、目的は 2 番目の数組内の結合を最初の数組に結合することであり、これは 1 つの数組ではありません。
// これは選択器 init 構造関数のサンプル オブジェクト、このオブジェクトは jQuery.prototype オブジェクト内の length 属性 (0 であることが認められています) を継承しているため、merge 関数ソースコード
// セレクター内の dom がこのオブジェクトに結合されます。オブジェクトを返します
return jQuery.merge( this, selector );
// ハンドル: $(#id)
} else {
elem = document.getElementById( match[2] );
// Blackberry 4.6 が
// ドキュメントに存在しなくなったノードをキャッチするためにparentNode をチェックします #6963
if ( elem && elem.parentNode ) {
// IE が次の場合を処理しますOpera は項目を返します
// ID ではなく名前で
// ie6、7 と Opera が存在するバグ、当一标签名と一个标签id值相等の場合、
// document.getElementById(# id) 関数数は提前出现的标签元素を返します
if ( elem.id !== match[2] ) {
// 結果以上Bug が存在する場合、返還由find関数数が返される文書文档の後代元素集合
return rootjQuery.find( selector );
}
// それ以外の場合は、要素を jQuery オブジェクトに直接挿入します
this.length = 1;
this[0] = 要素;
}
this.context = ドキュメント;
this.selector = セレクター;
これを返します;
}
// HANDLE: $(expr, $(...))
// context が存在しないか、context は jQuery 对オブジェクト
} else if ( !context || context.jquery ) {
return ( context || rootjQuery ).find( selector );
// ハンドル: $(expr, context)
// (これは $(context).find(expr) と同等です
// context は className または dom 节点元素
} else {
// 等同然 jQuery(context).find(selector)
return this.constructor( context ).find( selector );
}
// 处理$(fn)== =$(document).ready(fn)
} else if ( jQuery.isFunction( selector ) ) {
return rootjQuery.ready( selector );
}
// 处理$(jQuery对象) )
if ( selector.selector !== unknown ) {
this.selector = selector.selector;
this.context = selector.context;
//当第一个パラメータselector が jQuery オブジェクトの場合、セレクター内の dom ポイントをこのオブジェクトに結合し、このオブジェクトを返します。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。