jQuery実践関数の使い方まとめ_jquery

この記事では、jQuery の一般的な実用的な関数を例の形でまとめています。皆さんの参考に共有してください。具体的な例は次のとおりです。

1. 文字列をトリミングします

$('#id').val($.trim($('#someid').val()))

2. コレクションを走査します

は次のように書くことができます:

var anArray = ['one','two'];
for(var n = 0; n < anArray.length; n++){
  
}

次のように書くことも可能です:

var anObject = {one: 1, two: 2};
for(var p in anObject){
  
}

しかし、$.each 関数を使用すると、次のように書くことができます:

var anArray = ['one','two'];
$.each(anArray, funtion(n, value){
  
})
var anObject = {one: 1, two: 2};
$.each(anObjct, function(name,value){
  
})

3. フィルター配列

$.grep() メソッドを使用して配列をフィルタリングします。まず grep メソッドの定義を見てみましょう:

grep: function(elems, callback, inv){
  var ret = [], retVal;
  inv = !!inv;
  for(var i = 0; length = elems.length; i < length; i++){
    retVal = !!callback(elems[i],i)
    if(inv !== retVal){
      ret.push(elems[i]);
    }
  }
  return ret;
}

上記の例:
① grep メソッドの 2 番目のパラメータはコールバック関数です。コールバック関数は 2 つのパラメータを受け取ります。1 つは配列の要素で、もう 1 つは配列のインデックスです。
② grep メソッドの 3 番目のパラメータ inv はデフォルトでは未定義なので、!!inv は false、つまり inv のデフォルト値は false

例 1: int 型配列

var arr = [1, 2, 3, 4, 5, 6];
arr = $.grep(arr, function(val, index){
  return val > 3;
})
console.log(arr);//结果是：4 5 6

grep の 3 番目のパラメータが明示的に true に設定されている場合、結果はどうなりますか?

var arr = [1, 2, 3, 4, 5, 6];
arr = $.grep(arr, function(val, index){
  return val > 3;
}, true)
console.log(arr);//结果是：1 2 3

grep メソッドの 3 番目のパラメーターが true に設定されている場合、コールバック関数を満たさない配列要素がフィルターで除外されることがわかります。

例 2: オブジェクト型配列

var arr = [
  {
    first: "Jeffrey",
    last: 'Way'
  },{
    first: 'Allison',
    last: 'Way'
  },{
    first: 'John',
    last: 'Doe'
  },{
    first: 'Thomas',
    last: 'Way'
  };
  arr = $.grep(arr, function(obj, index){
    return obj.last === 'Way';
  });
  console.log(arr);
];

4. 配列を変換します

$.map(arr, callback) を使用して、配列の各要素のコールバック関数を呼び出し、新しい配列を返します

配列の各要素に 1 を加算します:

var oneBased = $.map([0, 1, 2, 3, 4], function(value){return value +1;})

文字列配列を整数配列に変換し、配列要素が数値かどうかを判断します。

var strings = ['1', '2', '3','4','S','6'];
var values = $.map(strings, function(value){
  var result = new Number(value);
  return isNaN(result) ? null : result;
})

変換された配列を元の配列にマージします:

var chars = $.map(['this','that'], function(value){return value.split(' ')});

5. 配列要素

のインデックスを返します。

$.inArray(value, array) を使用して、渡された値の最初に出現する添字、つまりインデックスを返します。

var index = $.inArray(2, [1, 2, 3]);

6. オブジェクトを配列に変換します

$.makeArray(object) は、渡された配列のようなオブジェクトを Javascript 配列に変換します。

<div>First</div>
<div>Second</div>
<div>Third</div>
<div>Fourth</div>
<script>
  var elems = document.getElementsByTagName("div");
  var arr = jQuery.makeArray(elems);
  arr.reverse();
  $(arr).appendTo(document.body);
</script>

7. 重複要素のない配列を取得します

$.unique(array) を使用して、元の配列内の固有の要素で構成される配列を返します。

<div>There are 6 divs in this document.</div>
<div></div>
<div class="dup"></div>
<div class="dup"></div>
<div class="dup"></div>
<div></div>
//把到所有div，get方法转换成javascript数组，总共6个div
var divs = $("div").get();
//再把3个class名为dup的div合并到前面的6个div
divs = divs.concat($(".dup").get());
alert(divs.length); //9个div
//过滤去掉重复
divs = jQuery.unqiue(divs);
alert(divs.length);//6个div

8. 2 つの配列を結合します

$.merge(array1, array2) は、2 番目の配列を最初の配列にマージし、最初の配列を返します。

var a1 = [1, 2];
var a2 = [2, 3];
$.merge(a1, a2);
console.log(a1);//[1, 2, 2, 3]

9. オブジェクトをクエリ文字列

にシリアル化します。

$.param(params) は、受信した jquery オブジェクトまたは javascript オブジェクトを文字列形式に変換します。

$(document).ready(function(){
 personObj=new Object();
 personObj.firstname="John";
 personObj.lastname="Doe";
 personObj.age=50;
 personObj.eyecolor="blue"; 
 $("button").click(function(){
  $("div").text($.param(personObj));
 });
});

結果: firstname=John&lastname=Doe&age=50&eyecolor=blue

10. いくつかの判定機能

$.isArray(o) o が JavaScript 配列の場合は true を返し、配列のような jquery オブジェクト配列の場合は false
を返します。 $.isEmptyObject(o) o が属性を含まない JavaScript オブジェクトの場合は true を返します
o が JavaScript 関数の場合、$.isFunction(o) は true を返します
$.isPlainObject(o) o が {} または new Object()
によって作成されたオブジェクトの場合に true を返します。 $.isXMLDoc(node) ノードが XML ドキュメントまたは XML ドキュメント内のノードの場合、true

を返します。

11. 要素が別の要素

に含まれているかどうかを判断します。

$.contains(container, containee) の 2 番目のパラメータが含まれています

$.contains( document.documentElement, document.body ); // true
$.contains( document.body, document.documentElement ); // false

12. 要素

に値を格納します。

$.data(element, key, value) 最初のものは JavaScript オブジェクトで、2 番目と 3 番目のものはキー値です。

//得到一个div的javascript对象
var div = $("div")[0];
//把键值存储到div上
jQuery.data(div, "test",{
  first: 16,
  last: 'pizza'
})
//根据键读出值
jQuery.data(div, "test").first
jQuey.data(div, "test").last

13. 要素

に格納されている値を削除します。

<div>value1 before creation: <span></span></div>
<div>value1 after creation: <span></span></div>
<div>value1 after removal: <span></span></div>
<div>value2 after removal: <span></span></div>
var div = $( "div" )[ 0 ];
//存储值
jQuery.data( div, "test1", "VALUE-1" );
//移除值
jQuery.removeData( div, "test1" );

14. バインドされた関数のコンテキスト

jQuery.proxy(function, context) は新しい関数 function を返します。コンテキストは context です。

 $(document).ready(function(){
 var objPerson = {
  name: "John Doe",
  age: 32,
  test: function(){
   $("p").after("Name: " + this.name + "<br> Age: " + this.age);
  }
 };
 $("button").click($.proxy(objPerson,"test"));
});

上記では、ボタンをクリックするとテストメソッドが実行されますが、テストメソッドのコンテキストが設定されています。

15. JSON を解析します

jQuery.parseJSON(json) 最初のパラメータ json の型は文字列です。

var obj = jQuery.parseJSON( '{ "name": "John" }' );
alert( obj.name === "John" );

16. 式の評価

コードの一部をグローバル コンテキストで実行したい場合は、jQuery.globalEval(code) を使用できます。コードの種類は文字列です。

function test() {
 jQuery.globalEval( "var newVar = true;" )
}
test();

17. 動的読み込みスクリプト

$(selector).getScript(url,success(response,status)) は、js ファイルを動的にロードするために使用されます。最初のパラメーターは、js のファイル パスであり、正常に取得するためのコールバックを表します。 js ファイル。

$.getScript( "ajax/test.js", function( data, textStatus, jqxhr ) {
 console.log( data ); // Data returned
 console.log( textStatus ); // Success
 console.log( jqxhr.status ); // 200
 console.log( "Load was performed." );
});

この記事で説明されている内容は、皆さんの jQuery プログラミングにとって一定の参考になると思います。