ホームページ  >  記事  >  ウェブフロントエンド  >  jQuery での一般的なデータ処理の使用例のまとめ

jQuery での一般的なデータ処理の使用例のまとめ

伊谢尔伦
伊谢尔伦オリジナル
2017-06-19 11:06:371306ブラウズ

ここではjQueryの一般的なデータ処理の使い方を中心に紹介し、trim、param、isArray、isFunction、それぞれといったjQueryの一般的なデータ処理メソッドをサンプルでまとめています。 jQuery を初めて使用する友人は、その使い方を参考にしてください。

1. $.trim(): stringの前後の空白文字を削除します。

var str = ' 薯条 ';
var formatStr = $.trim(str);  //'薯条'

2. $.param(): 配列またはオブジェクトのシリアル化

var obj = {
  name: 'dog',
  count: 10
};
var str = $.param(obj); //"name=dog&count=10"

3. $.isArray(): 配列かどうかを確認します。
4. $.isFunction(): 関数型かどうかを確認します。
5. $.each(obj, [callback]):配列またはコレクションオブジェクトを走査します。 obj は走査されるコレクション オブジェクトであり、callback は各メンバーが走査されるときに開始されるコールバック関数を表します。コールバック関数には 2 つのパラメーターが含まれます。最初のパラメーターはオブジェクト メンバーまたは配列のインデックスであり、2 番目のパラメーターは対応する値です。

var a = [x,y,z];
$.each(a, function(index, value) {
  console.log(index); //0,1,2
  console.log(value); //x,y,z
});
var b = {x:1, y:2, z:3};
$.each(b, function(key, value)) {
  console.log(key);  //x,y,z
  console.log(value); //1,2,3
}

注: each() ループを途中で終了したい場合は、コールバック関数で false を返すことができ、他の戻り値は無視されます。

$.each() と $(selector).each() は同じ機能を持ちますが、$.each() は任意のオブジェクトまたは配列を走査できますが、$(selector).each() はによって選択された jQuery のみを走査できます。現在のセレクター オブジェクト。

6. $.makeArray(): 配列のようなオブジェクトを配列オブジェクトに変換します。いわゆる配列のようなオブジェクトには長さ属性があり、インデックスは 0 から length-1 までです。ただし、これらのオブジェクトは配列メソッドを呼び出すことができません。

var arr = $.makeArray($('li')); //类数组对象转换为数组
$('ul').html(arr.reverse()); //可以调用数组的reverse()方法了

7. $.grep(): フィルター関数に基づいて条件を満たさない配列内の要素を除外します。

$.grep(array, callback, [invert]);

説明: パラメータ array はフィルタリングされる配列を表し、callback はフィルタリング関数を表します。フィルター関数が true を返した場合、要素は保持されます。フィルター関数が false を返した場合、要素は削除されます。パラメーター invert (オプション) は、false または設定されていない場合、フィルター関数によって true として返される配列内の要素を返します。このパラメーターが true の場合、フィルター関数によって false として返される要素を返します。

var a = [1,2,3,4,5];
a = $.grep(a, function(value, index)) {
  return value > 3; //a现在为[4,5]
});
var b = [1,2,3,4,5];
b = $.grep(b, function(value, index)) {
  return value > 3; //b现在为[1,2,3]
}, true);

8. $.map(): マップ配列。
$.map(array, callback);

var a = [1,2,3,4];
a = $.map(a, function(elem)) {
  return elem * 2; //a现在为[2,4,6,8]
});

9. $.merge(): 配列を結合します。
説明: 2 つの配列パラメータを受け入れます。

var a = [1,2,3];
var b = [4,5];
var c = $.merge(a,b); //c为[1,2,3,4,5];

10. $.unique(): DOM 要素配列から重複を削除します。

...
<a id="1" class="link link1"></a>
<a id="2" class="link"></a>
<a id="3" class="link"></a>
...
var $link = $(&#39;.link&#39;); //包含#1,#2,#3
var $firstLink = $(&#39;.link1&#39;); //包含#1
var $links = $.merge($link, $firstLink); //包含#1,#2,#3,#1
var $linkList = $.unique($link); //包含#1,#2,#3

注: 処理できるのは DOM 要素配列のみであり、文字列や JavaScript 配列 は処理できません。

以上がjQuery での一般的なデータ処理の使用例のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。