jQueryの各機能の詳しい説明と使用例

JQuery の each 関数は非常に強力で、多くのデータを走査できることがわかっています。そこで、今回は jQuery の each 関数の使い方と例を詳しく紹介します。

$.each() は、$(selector).each() とは異なります。後者は、jquery オブジェクトを走査するために使用されます。前者は、配列またはオブジェクトのいずれのコレクションでも走査できます。これは配列ですコールバック関数 毎回、配列のインデックスと対応する値が渡されます (値は this キーワードを通じて取得することもできますが、JavaScript は常にこの値をオブジェクトとしてラップします。文字列または数値) の場合、メソッドは の最初のパラメーターを返します。

each() メソッドを使用すると、DOM ループ構造が簡潔になり、エラーが発生しにくくなります。 each() 関数は非常に強力なトラバーサル関数をカプセル化しており、

一次元配列、多次元配列、DOM、JSON などをトラバースできます。

$each を使用すると、 JavaScript 開発のプロセス。

各関数の一般的に使用される用途をいくつか挙げます

各処理は 1 次元配列です

var arr1 = [ "aaa", "bbb", "ccc" ]; 
$.each(arr1, function(i,val){ 
  alert(i); 
  alert(val);
});

alert(i) は 0、1、2 を出力します

alert(val) は aaa、bbb、ccc を出力します

各処理

二次元配列

vararr2 = [['a','aa','aaa'], ['b','bb','bbb'], ['c','cc','ccc']]
$.each(arr, function(i, item){
  alert(i);
  alert(item);
});

arr2は二次元配列であり、 item はこの二次元配列内の各配列を取得することに相当します。

item[0] は、各 1 次元配列

alert(i) の最初の値を基準として 0、1、2 を出力します。この 2 次元配列には 3 つの配列要素が含まれているため、

alert(item ) は次のようになります。 ['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc'] として出力

これはビット配列の後にあります処理が少し変更され、

var arr = [['a', 'aa', 'aaa'], ['b','bb','bbb'], ['c','cc','ccc']]
$.each(arr, function(i, item){
　$.each(item,function(j,val){
　　　　 alert(j);
　　　　alert(val);
　});
});

alert(j)は0、1、2、0、1、2、0、1、2として出力されます

alert(val)はa、aa、aaa、bとして出力されます、 bb、 bbb、 c、 cc、 ccc

それぞれは json データを処理します。これはさらに強力で、すべての属性をループできます

var obj = { one:1, two:2, three:3};
$.each(obj, function(key, val) {
  alert(key);
  alert(val);
});

ここで、alert(key) は one two three を出力します

alert ( val) は、one、1、two、2、three、3 を出力します

ここでキーが数値ではなく属性であるのはなぜでしょうか。json 形式は順序付けされていない属性値のセットであるため、どこにあるのでしょうか。数字はどうですか？

そして、この val は obj[key] に相当します

ecah は dom 要素を処理します。ここでは例として入力フォーム要素が使用されます。

そのようなコードが dom にあり

、それぞれを次のように使用すると

$.each($("input:hidden"),function(i,val){
  alert(val);
  alert(i);
  alert(val.name);
  alert(val.value);
});

、その場合、alert(val) はフォーム要素であるため [object HTMLInputElement] を出力します。

alert(i)は0、1、2、3を出力します

alert(val.name);はaaa、bbb、ccc、dddを出力します、this.nameを使用すると同じ結果が出力されます

alert (val .value); は 111,222,333,444 を出力します。 this.value を使用すると、同じ結果が出力されます

$("input:hidden").each(function(i,val){
  alert(i);
  alert(val.name);
  alert(val.value);
});

と同じ結果が出力されることがわかります。 . この 2 つの書き方の違いがわかりません。この変更を上記の配列操作に適用すると、同じ結果が生成されます。

このように、いくつかの事例の実際の結果が回答されました。それから勉強を続けても、何が起こっているのか、そしてなぜ起こっているのか決してわかりません。

上記の例から、jQuery と jQuery オブジェクトの両方がこのメソッドを実装していることがわかります。jQuery オブジェクトの場合、各メソッドは単に委任されており、jQuery オブジェクトは最初のパラメーターとして jQuery の各メソッドに渡されます。

jQueryでのそれぞれの実装を見てください(ネットワーク抜粋)

function (object, callback, args) {
//该方法有三个参数:进行操作的对象obj，进行操作的函数fn，函数的参数args
var name, i = 0,length = object.length;
if (args) {
  if (length == undefined) {
    for (name in object) {
      if (callback.apply(object[name], args) === false) {
        break;
      }
    }
  }
  else{
    for (; i < length;) {
      if (callback.apply(object[i++], args) === false) {
        break;
      }
    }
  }
}
else{
  if (length == undefined) {
    for (name in object) {
      if (callback.call(object[name], name, object[name]) === false) {
        break;
      }
    }
  }
  else{
    for (var value = object[0]; i < length && callback.call(value, i, value) !==false; value = object[++i]) {}
      /*
      object[0]取得jQuery对象中的第一个DOM元素，通过for循环，
      得到遍历整个jQuery对象中对应的每个DOM元素，通过 callback.call( value,i,value);
      将callback的this对象指向value对象，并且传递两个参数,i表示索引值，value表示DOM元素；
      其中callback是类似于 function(index, elem) { ... } 的方法。
      所以就得到 $("...").each(function(index, elem){ ... });
      */
    }
  }
  return object;
}

jqueryは受信した要素に基づいて自動的に判断し、判断結果に基づいてapplyまたはcallメソッドを使用します。 fn の実装では、このポインターを直接使用して、配列またはオブジェクトのサブ要素を参照できます。

1.obj オブジェクトは配列です

各メソッドは、特定のサブ要素を呼び出して返される結果が false になるまで、配列内のサブ要素に対して fn 関数を 1 つずつ呼び出します。つまり、処理することができます。提供された fn 関数で、特定の条件を満たした後に各メソッド呼び出しを終了します。各メソッドが arg パラメーターを提供する場合、fn 関数呼び出しによって渡されるパラメーターは arg です。それ以外の場合: サブ要素のインデックス、サブ要素自体

2.obj オブジェクトは配列ではありません

最大の違いこのメソッドと 1 の間には fn メソッドがあり、戻り値に関係なく 1 つずつ実行されます。つまり、fn 関数が false を返した場合でも、obj オブジェクトのすべてのプロパティが fn メソッドによって呼び出されます。呼び出しで渡されるパラメータは 1 に似ています。

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連記事:

JS エンジンは実行時にどのように見えるのですか?

JS 開発で jssplice() メソッドを使用する方法

nodejs をダウンロードしてインストールする方法

以上がjQueryの各機能の詳しい説明と使用例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。