blog

jQueryデザインパターンの分析

"フェッチャー "と "アサイナ "をひとつに。フェッチャーかアサインジャーかは関数のパラメータで決まります。 違い: 前者は削除された要素のイベントを保持しませんが、後者は保持します。...

Feb 28, 2020 · 3 min. read
シェア
  • jQuery(セレクタ)は対応する要素を取得するために使用されますが、それらの要素は返されません。
  • 代わりに、jQueryで構築されたオブジェクトと呼ばれるオブジェクトを返します
  • このオブジェクトは、対応する要素を操作することができます。
  • jQueryは新規に追加する必要のないコンストラクタです。
  • jQueryオブジェクトは、jQuery関数によって構築されたオブジェクトを指すという口頭での合意。
  1. ウェブ要素の選択

ウェブ要素を選択し、それを使って何かをすること

  • 一般的には、コンストラクタjQuery()に選択式を入れ、選択された要素を操作できるjQueryオブジェクトを取得します。
  • 式の値は通常
$(document) //ドキュメントオブジェクト全体を選択する
$('#myId') //IDがmyIdのウェブ要素を選択する
$('div.myClass') // myClass クラスを持つ div 要素を選択する
$('input[name=first]') // name属性がfirstに等しい入力要素を選択する
  1. 結果セットの変更

  • jQueryは、結果セットをフィルタリングするための強力なAPIを提供します。
  • 結果セットに関連する要素も操作できます。
$('div').has('p'); // p要素を含むdiv要素を選択する
$('div').filter('.myClass'); //クラスが myClass と等しい div 要素を選択する
$('div').parent(); //div 要素の親を選択する
$('div').children(); //div のすべての子要素を選択する
  1. 操作の連鎖

  • 最終的にウェブ要素が選択されると、その要素に対して一連の操作を実行することができます。
  • 各jQuery操作はjQueryオブジェクトを返すので、異なる操作を連結することができます。
$('div') //div要素を見つける
   .find('h3') //h3要素の1つを選択する
   .eq(2) //3番目のh3要素を選択する
   .html('Hello'); //内容をHelloに変更する
  1. 値の要素のオーバーロードと代入

  • $
  • 値の取得と代入には同じ関数を使用します。
  • 「取る側」と「代入する側」がひとつになったもの。関数が値を取るか値を代入するかは、関数のパラメータによって決まります。
  • 結果セットには複数の要素が含まれるため、値を代入する場合はすべての要素に代入され、値を取得する場合は最初の要素の値のみを取り出します。
  • 例外は .text() で、これはすべての要素のテキスト内容を受け取ります。
$('h1').html(); //html()パラメータなしとは、h1の値を取り出すことを意味する。
$('h1').html('Hello'); //html()パラメータHelloで、つまりh1に値を代入する
  1. 要素の移動

  • ウェブページ内の要素の動きを操作する2つの方法を提供します。
  • 要素を直接動かすか、他の要素を動かして同じ効果を得ます。
//例:要件:p要素をdiv要素に挿入する
1. .append(),p要素をdiv要素に挿入する
$('div').append($('p'))
2. .appendTo(),p要素をdiv要素に挿入する
$('p').appendTo($('div')
  • この2つの方法は同じ効果をもたらしますが、異なるのは、異なる視点から操作し、異なる要素を返すという点です。
  • 一つ目は div 要素を返します。二つ目は p 要素を返します。
  • このモデルには4組の操作方法があります:
  .insertAfter() .after()既存の要素の外側に、後ろから要素を挿入する
  .insertBefore() .before(): 既存の要素の外側に、前面から要素を挿入する
  .appendTo() .append()既存の要素の中に、後ろから要素を挿入する
  .prependTo() .prepend()既存の要素の中に、前方から要素を挿入する。
  1. エレメントの作成、削除、空コピー

  • 作成:新しい要素をjQueryのコンストラクタに渡します。
  • 削除: と
  • 前者は削除された要素のイベントを保持しませんが、後者はドキュメントを再挿入するためにイベントを保持します。
  • 空: delete とは異なります。
  1. クロージャで詳細を隠す

Read next

V8コンパイルパイプライン - 関数呼び出し

インタプリタ実行もバイナリコードの直接実行もスタック構造を使います。では、なぜスタック構造を使って関数コールを管理するのでしょうか? 1. 関数呼び出しの管理にスタックを使う理由 関数は呼び出すことができます。関数呼び出しが発生すると、実行中のコードの制御は親関数から子関数に移され、子関数の実行が終わるとコードの制御は親関数に戻ります。 関数にはスコープ機構があります。関数は定義された...

Feb 28, 2020 · 3 min read