jQuery入門 | ユーティリティメソッド | その他のユーティリティメソッド $.each() $.extend() $.trim()

Tags:

その他のユーティリティメソッド

jQueryは、型チェックメソッドだけでなく、便利な機能を提供する多数のユーティリティメソッドを用意している。

$.each()メソッド

$.each()メソッドは、オブジェクトと配列の両方で使用できる汎用的な反復関数(iterator function)である。

lengthプロパティを持つ配列または配列のようなオブジェクトを受け取り、その長さの分だけコールバック関数を繰り返し実行する。 オブジェクトの場合は、オブジェクトが持つプロパティの数だけコールバック関数を繰り返し実行する。

次の例は、$.each()メソッドに配列を引数として渡し、各配列要素を出力する例である。

var arr = ["a", "b", "c"];
$.each(arr, function(index, value) {
  $("#text").append("index=" + index + ", value=" + value + "<br>");
});

<!DOCTYPE html>
<html lang="ja">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
  $(function() {
    var arr = ["a", "b", "c"];
    $.each(arr, function(index, value) {
       $("#text").append("index=" + index + ", value=" + value + "<br>");
    });
  });
  </script>
</head>
<body>
  <h1>jQuery $.each()</h1>
  <p id="text"></p>
</body>
</html>

次の例は、$.each()メソッドにオブジェクトを引数として渡し、オブジェクトの各プロパティを出力する例である。

var site = {
  "name" : "devkuma",
  "url" : "www.devkuma.com"
};

$.each(site, function(key, value) {
       $("#text").append("key=" + key + ", value=" + value + "<br>");
});

<!DOCTYPE html>
<html lang="ja">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
  $(function() {
    var site = {
      "name" : "devkuma",
      "url" : "www.devkuma.com"
    };

    $.each(site, function(key, value) {
       $("#text").append("key=" + key + ", value=" + value + "<br>");
    });
  });
  </script>
</head>
<body>
  <h1>jQuery $.each()</h1>
  <p id="text"></p>
</body>
</html>

$.extend()メソッド

$.extend()メソッドは、2つ以上のオブジェクトのすべてのプロパティを1つのオブジェクトにマージする。

このメソッドは、引数として渡された1つ目のオブジェクトに、2つ目のオブジェクトのすべてのプロパティを追加する。
続いて、1つ目のオブジェクトに3つ目のオブジェクトのすべてのプロパティを追加する。
この順序で、引数として渡されたすべてのオブジェクトのプロパティを1つ目のオブジェクトに追加する。

var obj1 = {
  "name" : "google",
};
    
var obj2 = {
  "url" : "www.google.com",
  "adc" : "def"
};
    
var obj3 = {
  "name" : "devkuma",
  "url" : "www.devkuma.com",
  "book" : "jQuery" 
};

$.extend(obj1, obj2, obj3);
$.each(obj1, function(key, value) {
  $("#text").append("key=" + key + ", value=" + value + "<br>");
});

<!DOCTYPE html>
<html lang="ja">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
  $(function() {
    var obj1 = {
      "name" : "google",
    };
    
    var obj2 = {
      "url" : "www.google.com",
      "adc" : "def"
    };
    
    var obj3 = {
      "name" : "devkuma",
      "url" : "www.devkuma.com",
      "book" : "jQuery" 
    };

    $.extend(obj1, obj2, obj3);
    $.each(obj1, function(key, value) {
       $("#text").append("key=" + key + ", value=" + value + "<br>");
    });
  });
  </script>
</head>
<body>
  <h1>jQuery $.extend()</h1>
  <p id="text"></p>
</body>
</html>

上の例は、obj1オブジェクトにobj2オブジェクトとobj3オブジェクトのすべてのプロパティを順番にマージする。
このとき、重複するnameプロパティの値は、最後に追加された値に設定される。
したがって、nameプロパティの値は最後にマージしたobj3オブジェクトのdevkumaプロパティ値に設定される。

$.extend()メソッドに引数として渡される1つ目のオブジェクトは、元のオブジェクト自体が変更される点に注意する必要がある。

$.trim()メソッド

$.trim()メソッドは、文字列の先頭と末尾にある空白文字(whitespace)を削除する。

var text = "   こんにちは。devkumaです。   ";
$("#text").append("trim前, '" + text + "'<br>");
$("#text").append("trim後, '" + $.trim(text) + "'");

コードを実行

汎用ユーティリティメソッド

メソッド 説明
$.contains() DOM要素が別のDOM要素の子孫(descendant)要素かどうかをチェックする。
$.unique() DOM要素の配列をソートし、重複した要素を削除する。
$.each() オブジェクトと配列の両方で使用できる汎用的な反復関数(iterator function)である。
$.data() 選択した要素に関連するデータを保存するか、保存されたデータ値を読み込む。
$.removeData() 保存されたデータを削除する。
$.queue() 選択した要素で実行される関数キュー(queue)を参照または操作する。
$.dequeue() 選択した要素の関数キューから次の関数を実行する。
$.extend() 2つ以上のオブジェクトの内容を1つのオブジェクトにマージする。
$.noop() 空の関数を意味する。
$.proxy() 関数を受け取った後、特定のコンテキスト(context)を持つ新しい関数を返す。
$.now() 現在時刻を表す数値を返す。
$.trim() 文字列の先頭と末尾にある空白文字(whitespace)を削除する。

$.inArray()メソッド

$.inArray()メソッドは、渡された値を配列から検索し、一致する要素のインデックスを返す。 配列に渡された値と一致する要素がない場合は、-1を返す。

例

var arr = ["devkuma", 123, "abc"];
    
$("#text").append("devkuma : " + $.inArray("devkuma", arr) + "<br>");
$("#text").append("123 : " + $.inArray(123, arr) + "<br>");
$("#text").append("abc : " + $.inArray("abc", arr) + "<br>");
$("#text").append("def : " + $.inArray("def", arr));

<!DOCTYPE html>
<html lang="ja">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
  $(function() {
    var arr = ["devkuma", 123, "abc"];
    
    $("#text").append("devkuma : " + $.inArray("devkuma", arr) + "<br>");
    $("#text").append("123 : " + $.inArray(123, arr) + "<br>");
    $("#text").append("abc : " + $.inArray("abc", arr) + "<br>");
    $("#text").append("def : " + $.inArray("def", arr));
  });
  </script>
</head>
<body>
  <h1>jQuery $.inArray()</h1>
  <p id="text"></p>
</body>
</html>

配列に関するメソッド

メソッド 説明
$.makeArray() 配列のようなオブジェクト(array-like object)をJavaScript Arrayオブジェクトに変換する。
$.inArray() 渡された値を配列から検索し、一致する要素のインデックスを返す。一致する要素がなければ-1を返す。
$.map() 配列またはオブジェクトのすべての要素を新しい配列に変換する。
$.merge() 2つの配列の内容を1つの配列にマージする。
$.grep() 配列からフィルター関数を満たす要素を検索する。元の配列は変更されない。

パースに関するメソッド

メソッド 説明
$.parseHTML() 文字列をDOMノードの配列としてパースする。
$.parseJSON() well-formedなJSON文字列を受け取り、JavaScriptオブジェクトとして返す。
$.parseXML() XML文書を文字列からパースする。

参照