jQueryのチェーンcalls_jqueryの簡単な分析

jQuery スタイルのメソッド チェーンの中核部分は次の 3 点です:
1) jQuery のラッパー関数 (つまり、ラッパー オブジェクトの構築に使用される jQuery())。このコンストラクターはネイティブ DOM オブジェクト デバイスを含むラッパーを生成できます。物体。
おそらくこんな感じかと思います... (もちろん規模も機能も実装方法も公式ライブラリとは大きく異なります。大まかな実装方法を書いただけです):
うーん...私のミスです、お願いします。コードを試してみたい場合は、jQuery ライブラリをインポートしないようにしてください。名前の競合があります。

コードをコピーしますコードは次のとおりです。

(function(){
//簡単にするために、サブクラス セレクター、属性セレクターなどはサポートされません。形式 ".className" または " のみを受け入れます。 #id" または "tagName" とそれらの間にあるもの。カスタム ツール関数の結合形式 (赤) を以下に説明します。
function _jQuery(els){
this.elements = new Array();
for (var i = 0; i
els.length; i ) {
var element = els[i];
if (typeof element == 'string') {
element = element. trim(); //スペースの前後にハンドポンプを挿入しすぎないようにする
varsign = element.substr(0, 1)
if (sign == "#") { //Find
要素 by id = document.getElementById(element.substr(1) );
this.elements.push(element);
else
if (sign == ".") {
//クラス名で検索 ここではカスタマイズを使用します。 クラス名で dom 配列を返すツール関数 getElementsByClassName
element = getElementsByClassName(element.substr(1)); // この時点では要素は配列オブジェクトですこのメソッドはカスタマイズされています。以下を参照してください。
this.elements = this .elements.merge(element);
}
else { //識別子なし、タグ名で検索します
element = document. getElementsByTagName(element); //現時点では要素は配列オブジェクトです
this.elements = this.elements.merge(element);//このメソッドは、set と同様に、要素配列内に異なる DOM オブジェクトのみを存在させることができます。
}
}
else {
this.elements.push(element);
}
}
}
/*ここでプロトタイプ関数の拡張を開始できます
_ jQuery.prototype.addEvent=function() {………}
*/ window['jQuery'] = function(){ return new _jQuery(arguments) }; などのラッパー オブジェクトの!window['$']) window['$'] = window['jQuery ']; })()//自己実行匿名関数

OK。次の単純な HTML ドキュメントを挿入します。それをテストします (この HTML が標準化された方法で書かれていないという事実を軽視しないでください...テストのためだけです)

コードをコピー コードは次のとおりです。

<本文

p id="header2" class="entrance">
header2

p id="header3"class="entrance"> ="http://www.jb51.net/index.html">header3

>

node1

< ;p id="content2" class="topic">
ノード 2

href="http://www.jb51.net/index.html">node3

🎜>

;








コードをコピー


コードは次のとおりです


var f=$('#header').elements[0];
consoles.write ("nodeName: " f.nodeName "==> ID:" f .id)

/*アラートを置き換えるカスタマイズされたデバッグパネルツール、私が使用しているものはバグであり、機能と操作性があまり良くないため、2日以内に修正する可能性があります。自分でデバッグするために、代わりにアラートを使用できます*/


出力:

入力:

コードをコピー コードは次のとおりです:

var e=jQuery(' div ',' p').elements; //ここでは、いくつかの余分なスペースが意図的に追加されています
for(var i=0;i< ;e. length;i ){
consoles.write("nodeName: " e[i].nodeName "==> ID: " e[i].id); >
出力:

これは dom オブジェクト検索のいくつかの方法を統合していますが、それでも毎回ループ ステートメントを使用して dom オブジェクトを操作するのは非常に煩わしいことがわかります。その後、このラッパーに基づいて、上記の addEvent メソッドなど、このラッパー オブジェクトの多くのメソッドが導入されます。これらのメソッドは最終的に、オブジェクトにラップされたネイティブ DOM オブジェクトを操作するために導入されるため、各メソッド A for または whileステートメントを導入する必要があり、これが 2 番目のコア関数につながります ==> jQuery.each(){}; 遅すぎます...明日まとめます この記事で使用するツール関数 (すべて非常に便利な関数です) ):

コードをコピー コードは次のとおりです: //className: クラス名タグ: in このタグ名の範囲内で親を検索: この親ノード内を検索

function getElementsByClassName(className, tag,parent){

parent =parent document || デフォルトは document
var; tag = tag || '*'; //デフォルトはすべてのタグを検索します。
var elements = new Array();
var re = new RegExp('(^|\s)' className '(\ s| $)');
var allList =parent.getElementsByTagName(tag);
for (var i = 0; i
要素) = allList [i];
if (element.className.match(re)) {
elements.push(element)
}
要素を返す; 🎜>





コードをコピー

コードは次のとおりです。

if (!String .prototype.trim) {//先頭と末尾のスペースを削除します String.prototype.trim = function(){ return this.replace(/^s |s $/g, ''); } }

if (!Array.prototype.merge) {

Array.prototype.merge = function(arr){ //配列にセットのような特性を持たせることはできません。偶数アルゴリズムを軽蔑しないでください。問題は、
for (var i = 0; i var signal=false の原理を説明することです。 ;
for (var j = 0; j
if (arr[i] == this[j])
signals=true; >if (!signals) this.push(arr[i]);
}
これを返します
}
}