本質的オブジェクト上のjQueryのは、JavaScriptのオブジェクトが返されて、入口モジュールは、対応するノードへの参照を保存することができ、他のモジュールの動作のため
次のように私たちは、jQueryオブジェクトを作成するときに、さまざまなjQueryのセレクタを提供することができます:
falseは、jQueryオブジェクトがnullを返します。
DOMノードと、基準要素を含むjQueryのDOMオブジェクトを返します。
本体と、文字列「本体」、jQueryオブジェクトは、基準体の要素を返します
個々のラベルを、DOM要素を対応するラベルを作成するのdocument.createElementを呼び出し
より複雑なHTMLコード;要素を作成jQuery.buildFragmentを呼び出します
機能; $(ドキュメント).ready(関数)速記、DOMを実行する前にロードするまで、いくつかの献身的な続きます
例えば:
<!DOCTYPE HTML > < HTML LANG = "EN" > < 頭> < メタ文字コード= "UTF-8" > < タイトル>ドキュメント</ タイトル> < スクリプトSRC = "http://libs.baidu.com/jquery/1.7 .1 / jquery.min.js」> </ スクリプト> </ ヘッド> < ボディ> < PのID = "P" > 123 </ P > <偽)) はconsole.log($(P)) はconsole.log($(' ボディ' )) はconsole.log($(' <P> 123 </ P> ' )) $(関数(){にconsole.log (' ドムがロード' )}) </ スクリプト> </ ボディ> </ HTML >
次のように出力されます。
5つの上部出力、最初の空のjQueryオブジェクト、第2の目的は、Pを含有する対応する5つの出力情報は、jQueryの要素であるjQueryオブジェクト参照ノードを含む第3の本体、第四の作成のjQuery DOMは$(関数(){})オブジェクトの例に対応する、jQueryオブジェクト、第五の直接出力情報に取り付けられていません
ソースコード解析
砂漠のQQ:22969969によって作家
入口モジュールの機能のjQuery jQuery.fn.initの内部資料分析にあり、関数は異なるパラメータによって異なる実装であろう次のように行います。
INIT:関数(セレクタ、コンテキスト、rootjQuery){ // コンテキストタイプ及びパラメータ選択を解析する責任、および対応する論理実行 VaRの一致を、ELEM、RET、DOC; // ハンドル$( "")、$(NULL)、 $または(未定義) IF(セレクタ!){ // セレクタは「」、NULL、未定義の偽等falseに変換することができているjQueryの上記第一例に相当する 戻り これを; } // (ハンドル$をDOMElementsで)の IF(selector.nodeType){ // セレクタのnodeTypeは、例えば、DOM要素セレクタと考えられる属性を有する:$(のdocument.getElementById( 'D')) 、jQueryの上の第2の例に対応します この .context = この [0] = セレクタ; この .LENGTH = 1。; 戻る この; } // 、Elementは一度のみEXISTS体のITを最適化見つける IF(セレクタ=== "身体" && &&コンテキストdocument.body!) { // 引数が文字列選択「体」であり、コンテキストが空である、などの場合:$(「ボディ」)、上記第三の例のjQueryに対応 この .context = ドキュメント; この [0] = document.bodyと、 この .selector = セレクタ; この .LENGTH = 1。; 返し 、これを。 } // HTML文字列をハンドル のIF(typeof演算セレクタ=== "文字列"){ // パラメータセレクタは文字列です // WEは、HTMLやIDの文字列を扱っている? IF(selector.charAt(0)===「< "&& selector.charAt(selector.length - 。1)==="> "&& selector.length> = 3){ // もしパラメータ選択が" < "初めに、するために、"終了>」、および3以上の長さ / / 開始および終了<>とHTMLであり、スキップ文字列はREGEXを確認したと の一致=を[ ヌル、セレクター、ヌル ]; //この文字列は、HTMLフラグメントはquickExpr定期点検を省略するものとします。これが唯一必ずしもそれが真に有効なHTMLコードであることを意味しないものとする } 他{ 一致が quickExpr.exec(セレクタ)=; // そうでない場合quickExprは、パラメータ選択コードはもう少し複雑であるかどうかを検出するために使用されるが、 } // 確認しますマッチA、それは#IDのために指定されていない状況ではなかった IF(試合&&(マッチ|| [1]!コンテキスト)){ // HANDLE:$(HTML) - > $(アレイ) IF(マッチ[1。]){ コンテキスト =コンテキストのinstanceof jQueryのコンテキスト[0?]:文脈; DOC =(|| context.ownerDocumentコンテキスト?コンテキスト:文書)。 // 単一の文字列が渡されると、それは、単一のタグの場合は // だけのcreateElementを行い、残りのスキップ RET = rsingleTag.exec(セレクタ)。 もし(RET){ // 如果参数セレクタ是单独标签比如$( '<P> </ P>'); もし(jQuery.isPlainObject(コンテキスト)){ セレクタ = [のdocument.createElement(RET [1 ])]。 jQuery.fn.attr.call(セレクタ、コンテキスト、真)。 } 他{ セレクタ = [doc.createElement(RET [1 ])]。 } } 他{ RET = jQuery.buildFragment([マッチ[1 ]、[DOC])。 セレクタ =(?ret.cacheable jQuery.clone(ret.fragment):ret.fragment).childNodes。 } 戻り jQuery.merge(この、セレクタ)。 // HANDLE:$( "#ID") } 他 { // 参数セレクタ是"#ID"格式、如:$( '#のP1') ELEM =のdocument.getElementById(マッチ[2 ])。 // ブラックベリー4.6リターンをキャッチするためにはparentNodeをチェック //文書#6963でなくなったノード 場合(ELEM && elem.parentNode){ // IEとOpera戻りアイテムケースを処理 // 代わりIDの名前で あれば(elem.id!==一致[2 ]) { 戻りrootjQuery.find(セレクタ)。 } // そうでない場合、我々はjQueryオブジェクトに直接元素を注入 この .LENGTH = 1 。 この [0] = ELEM。 } 本 .context = ドキュメント。 この .selector = セレクタ。 リターン この; } // HANDLE:$(exprの、$(...)) } 他に あれば(文脈||!{context.jquery) リターン(コンテキスト|| rootjQuery).find(セレクタ); // HANDLE:$(exprは、コンテキスト) // にちょうど相当する($(コンテキスト).find(expr)は } 他{ 戻り 、この.constructor(コンテキスト).find(セレクタ); } // HANDLE:$ (関数) // 準備文書のショートカット } そう であれば(jQuery.isFunction(セレクタ)){ // パラメータは、関数セレクターであれば、ここから我々は$(機能)を見ることができる、readyイベントを結合すると考えられている$(ドキュメント).ready(関数)速記で、ここでは上記第五jQueryのインスタンスに対応する 戻るrootjQueryを。 READY(セレクタ); } IF(selector.selectorが==!不定){ この .selector = selector.selector; この .context = selector.context; } 戻り jQuery.makeArray(セレクタ、これを); }
基準の対応するDOMノードへのアクセスにかかるのjQueryの例、およびそれが底部または機能モジュールで動作することができます。