チェーン式
jQueryスタイルとも呼ばれるwindow.jQuery()は、次のようなグローバル関数です。
jQuery（セレクタ）は対応する要素を取得するために使用されますが、それらの要素を返すのではなく、対応する要素を操作するオブジェクトを返します。
準備
これはイメージの配列です
セレクタを受け取り、そのセレクタに基づいていくつかの要素を取得し、その要素を操作するメソッドを持つオブジェクトを返します。
要素を返すべきでしたが、ここではjQueryはオブジェクトを返します。
apiはaddclassというキーとfunctionという値を持つオブジェクトです。
簡略化されたes6は新しい構文を提供します。
addClass() { console.log(elements) }
メソッドの実装
class="test" を持つすべての要素の classList に red を追加します。
続けて、このapiを返せるか、return nullをreturn apiに置き換えてください。
マジック操作
オブジェクトで呼び出される関数は、その関数の中の """"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""例えば
obj.fn(p1)
obj.fn.call(obj,p1) //関数内のthisは obj上記のthisはapiではないので、thisを返すだけではダメなのでしょうか？""""
結果は変わりません
オブジェクトを宣言し、そのオブジェクトを返した後、そのオブジェクトをただ返すことは可能でしょうか？
- 要約すると、jQueryのコアとなるアイデアは次のようなものです。
- 関数を提供し、この関数はセレクタを受け付け、このセレクタを与えると要素を取得しますが、要素を返すわけではありません。
- .addClassフロントを渡すためにthisを返します。このオブジェクトは、あなたが呼び出しを渡すたびに、連鎖操作の実装は、それが呼び出されるものは問題ではありません、あなただけの省略することもできます。
ルックアップ
jQuery('#xxx')
戻り値は要素ではなく、apiオブジェクトです。
xxxの.red要素を検索します。
jQuery('#xxx').find('.red');
まずfindはセレクタを受け取る関数で、要素からセレクタを見つけなければなりません。
新しい検索要素を格納するために新しい配列を作成し、要素の各項目を繰り返し処理します。
return this はどうでしょうか？
jQuery関数をリパッケージし、jQueryは、いくつかの要素を取得することではありません、それは新しいapiを返すように、jQueryにこれらの要素を渡すと、このapiと最後のapiの構造は同じですが、要素を保存することは同じではありません！
- ここではいくつかのステップを実行します。
- 1.jQueryが別途構築した新しいapiを取得します。
- 2. jQueryはセレクタだけでなく、配列も受け取ることができます。
- 3.オーバーロードは、セレクタならelements要素、配列なら配列がelementsに代入されます。
- 4.プロモーションのスコープは、もし{}宣言のスコープでのみ{}のスコープで、一度宣言されたconstは変更できません。
簡易コード
次の操作は、終了メソッドを使用して、子の後にテストに戻ります。
ここで終了は、apiではなく、配列に置かれ、apiは、配列の
実行結果
反復と操作
jQuery('#xxx').a(fn); 各要素でfnを実行することで、トラバーサルを進めることができます。
each()は関数を受け取り、要素の各項目に対して反復処理を行い、2つの引数elements[i],iをfnに渡して関数を呼び出します。
.test 内の div を .child 内に出力します。
一旦区切り、addClassとfindをeach()で書き換えます。
find
addClass
getDad
jQuery('#xxx').parent();
息子を取得
jQuery('#xxx').children();
(node.children[0],node.children[1],node.children[2]...node.children[i]).node.children）===です。
兄弟の取得
jQuery('#xxx').c();
ランキング
jQuery('#xxx').index();
ブラザー
jQuery('#xxx').next();
ゲット・ブラザー
jQuery('#xxx').foo();
window.b = window.foo;
jQueryは長すぎるので、エイリアスを付けてください。
がついているものはすべてjQueryオブジェクトです。
追加
$('<div><span>1</span></div>');戻り値は新しい要素ではなく、apiオブジェクトです。$('<div><span>1</span></div>').appendTo(...)appendTo は新しい要素を別の要素に追加します。
document.body を取得します。
$
末っ子の追加
$('body').append($('<div>1</div>'));$('body').append('<div>1</div>');もっと簡単
長男を追加
$('dody').prepend(div或$div);
兄を追加
$('#test').after(div或$div);
兄弟を追加
$('#test').before(div或$div);
削除
- $div.remove()
- $div.empty()
変更
- $div.text(?)テキストの内容を読み書きします
- $div.html(?)html コンテンツを読み書きします
$div.attr('title',?)属性の読み書き$div.b({ 'color': 'red' });スタイルの読み書き $div.styleがベター$div.a('blue') / removeClass / hasClass;- $div.on('click',fn)
$div.b('click', fn);
プロトタイプの使用
最後のステップでは、すべてのオブジェクトを$.prototypeに格納し、各オブジェクトはプロトタイプのアドレスのみを格納すればよいので、メモリを節約できます！
