Ringkasan fungsi praktikal jQuery usage_jquery

Artikel ini meringkaskan fungsi praktikal biasa jQuery dalam bentuk contoh. Kongsikan dengan semua orang untuk rujukan anda. Contoh khusus adalah seperti berikut:

1. Potong rentetan

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

2. Lintas koleksi

mungkin ditulis seperti ini:

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

Anda juga boleh menulis:

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

Tetapi dengan fungsi $.each, anda boleh menulisnya seperti ini:

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

3. Tatasusunan penapis

Gunakan kaedah $.grep() untuk menapis tatasusunan. Mari kita lihat dulu definisi kaedah 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;
}

Dalam contoh di atas:
① Parameter kedua kaedah grep ialah fungsi panggil balik Fungsi panggil balik menerima dua parameter, satu ialah elemen tatasusunan, dan satu lagi ialah indeks tatasusunan.
② Parameter inv ketiga kaedah grep tidak ditentukan secara lalai, jadi !!inv adalah palsu, iaitu nilai lalai inv adalah palsu

Contoh 1: tatasusunan jenis int

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

Apakah hasilnya jika parameter ketiga grep ditetapkan secara eksplisit kepada benar?

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

Ia boleh dilihat bahawa apabila parameter ketiga kaedah grep ditetapkan kepada benar, elemen tatasusunan yang tidak memenuhi fungsi panggil balik akan ditapis keluar.

Contoh 2: tatasusunan jenis objek

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. Tukar tatasusunan

Gunakan $.map(arr, panggil balik) untuk memanggil fungsi panggil balik untuk setiap elemen tatasusunan dan mengembalikan tatasusunan baharu

Tambah 1 pada setiap elemen tatasusunan:

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

Tukar tatasusunan rentetan kepada tatasusunan integer dan tentukan sama ada elemen tatasusunan ialah nombor:

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

Gabungkan tatasusunan yang ditukar ke dalam tatasusunan asal:

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

5 Kembalikan indeks elemen tatasusunan

Gunakan $.inArray(value, array) untuk mengembalikan subskrip kejadian pertama nilai yang diluluskan, iaitu indeks.

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

6 Tukar objek kepada tatasusunan

$.makeArray(objek) menukar objek seperti tatasusunan yang diluluskan kepada tatasusunan 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. Dapatkan tatasusunan tanpa unsur pendua

Gunakan $.unique(array) untuk mengembalikan tatasusunan yang terdiri daripada elemen unik dalam tatasusunan asal.

<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. Gabungkan 2 tatasusunan

$.merge(array1, array2) menggabungkan tatasusunan kedua ke dalam tatasusunan pertama dan mengembalikan tatasusunan pertama.

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

9 Sirikan objek ke dalam rentetan pertanyaan

$.param(params) menukar objek jquery masuk atau objek javascript ke dalam bentuk rentetan.

$(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));
 });
});

Keputusan: nama pertama=John&nama keluarga=Doe&umur=50&warna mata=biru

10. Beberapa fungsi penghakiman

$.isArray(o) Jika o ialah tatasusunan javascript, ia mengembalikan benar Jika tatasusunan seperti objek jquery, ia mengembalikan palsu
$.isEmptyObject(o) Mengembalikan benar jika o ialah objek javascript yang tidak mengandungi atribut
$.isFunction(o) mengembalikan benar jika o ialah fungsi javascript
$.isPlainObject(o) Mengembalikan benar jika o ialah objek yang dicipta melalui {} atau Object() baharu
$.isXMLDoc(node) Jika nod ialah dokumen XML atau nod dalam dokumen XML, ia mengembalikan benar

11. Tentukan sama ada sesuatu unsur terkandung dalam unsur lain

Parameter kedua $.contains(container, containeree) terkandung

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

12. Simpan nilai pada elemen

$.data(elemen, kunci, nilai) Yang pertama ialah objek javascript, dan yang kedua dan ketiga ialah nilai kunci.

//得到一个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 Alih keluar nilai yang disimpan pada elemen

<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. Konteks fungsi terikat

jQuery.proxy(fungsi, konteks) mengembalikan fungsi fungsi baharu, konteksnya ialah konteks.

 $(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"));
});

Di atas, apabila anda mengklik butang, kaedah ujian dilaksanakan, tetapi konteks kaedah ujian ditetapkan.

15. Menghuraikan JSON

jQuery.parseJSON(json) Parameter pertama json ialah rentetan jenis.

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

16. Penilaian ekspresi

Kadangkala, jika anda mahu sekeping kod dilaksanakan dalam konteks global, anda boleh menggunakan jQuery.globalEval(kod). Jenis kod ialah rentetan.

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

17. Skrip pemuatan dinamik

$(selector).getScript(url,success(response,status)) digunakan untuk memuatkan fail js secara dinamik Parameter pertama ialah laluan fail js Parameter kedua adalah pilihan dan mewakili panggilan balik untuk berjaya mendapatkan fail 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." );
});

Saya percaya bahawa apa yang diterangkan dalam artikel ini mempunyai nilai rujukan tertentu untuk pengaturcaraan jQuery semua orang.