Ringkasan beberapa kaedah biasa yang disertakan dengan jQuery_jquery

Kaedah itu sendiri ($.each,$.map,$.contains,$ajax)

Alat dan kaedah biasa

(1)$.trim

Kaedah $.trim digunakan untuk membuang lebihan ruang pada permulaan dan penghujung rentetan.

Salin kod Kod adalah seperti berikut:

$.trim(' Hello ') // Hello

(2)$.mengandungi

Kaedah $.contains mengembalikan nilai Boolean yang menunjukkan sama ada elemen DOM (parameter kedua) ialah elemen subordinat bagi elemen DOM yang lain (parameter pertama).

Salin kod Kod adalah seperti berikut:

$.contains(document.documentElement, document.body);
// benar
$.contains(document.body, document.documentElement
// palsu

(3) $.each, $.map

Kaedah $.each digunakan untuk lelaran melalui tatasusunan dan objek, dan kemudian mengembalikan objek asal. Ia menerima dua parameter, iaitu pengumpulan data dan fungsi panggil balik.

Salin kod Kod adalah seperti berikut:

$.each([ 52, 97 ], fungsi( indeks, nilai ) {
console.log( indeks ": " nilai );
});
// 0: 52
// 1: 97
var obj = {
p1: "hello",
p2: "dunia"
};
$.each( obj, function( key, value ) {
console.log( kunci ": " nilai );
});
// p1: hello
// p2: dunia

Perlu diingatkan bahawa contoh objek jQuery juga mempunyai setiap kaedah ($.fn.each), dan kedua-duanya mempunyai fungsi yang serupa.

Kaedah $.map juga digunakan untuk melintasi tatasusunan dan objek, tetapi ia akan mengembalikan objek baharu.

Salin kod Kod adalah seperti berikut:

var a = ["a", "b", "c", "d", "e"];
a = $.map(a, fungsi (n, i){
pulangkan (n.toUpperCase() i);
});
// ["A0", "B1", "C2", "D3", "E4"]

(4)$.inArray

Kaedah $.inArray mengembalikan kedudukan nilai dalam tatasusunan (bermula dari 0). Jika nilai tiada dalam tatasusunan, -1 dikembalikan.

Salin kod Kod adalah seperti berikut:

var a = [1,2,3,4];
$.inArray(4,a) // 3

(5)$.lanjutkan

Kaedah $.extend digunakan untuk menggabungkan berbilang objek ke dalam objek pertama.

Salin kod Kod adalah seperti berikut:

var o1 = {p1:'a',p2:'b'};
var o2 = {p1:'c'};
$.extend(o1,o2);
o1.p1 // "c"

Satu lagi kegunaan $.extend adalah untuk menjana objek baharu untuk mewarisi objek asal. Pada masa ini, parameter pertamanya mestilah objek kosong.

Salin kod Kod adalah seperti berikut:

var o1 = {p1:'a',p2:'b'};
var o2 = {p1:'c'};
var o = $.extend({},o1,o2);
o
// Objek {p1: "c", p2: "b"}

Secara lalai, objek yang dijana oleh kaedah lanjutan ialah "salinan cetek", iaitu, jika harta ialah objek atau tatasusunan, hanya penunjuk kepada objek atau tatasusunan akan dijana dan nilainya tidak akan disalin. Jika anda mahukan "salinan dalam", anda boleh menghantar nilai Boolean benar dalam parameter pertama kaedah lanjutan.

Salin kod Kod adalah seperti berikut:

var o1 = {p1:['a','b']};
var o2 = $.extend({},o1);
var o3 = $.extend(true,{},o1);
o1.p1[0]='c';
o2.p1 // ["c", "b"]
o3.p1 // ["a", "b"]

Dalam kod di atas, o2 ialah salinan cetek dan o3 ialah salinan dalam. Akibatnya, jika sifat tatasusunan asal diubah, o2 akan berubah bersama-sama dengannya, tetapi o3 tidak.

(6)$.proksi

Kaedah $.proxy adalah serupa dengan kaedah bind ECMAScript 5. Ia boleh mengikat konteks fungsi (iaitu, objek ini) dan parameter serta mengembalikan fungsi baharu.

Kegunaan utama jQuery.proxy() adalah untuk mengikat objek konteks kepada fungsi panggil balik.

Salin kod Kod adalah seperti berikut:

var o = {
Jenis: "objek",
Ujian: fungsi(acara) {
console.log(this.type);
}
};
$("#butang")
.on("klik", o.test) // Tiada output
.on("klik", $.proxy(o.test, o)) // objek

Dalam kod di atas, fungsi panggil balik pertama tidak mengikat konteks, jadi hasilnya kosong dan tiada output fungsi panggil balik kedua mengikat konteks ke objek o, dan hasilnya adalah objek.

Satu lagi cara yang setara untuk menulis contoh ini ialah:

Salin kod Kod adalah seperti berikut:

$("#button").on( "klik", $.proxy(o, test))

$.proxy(o, test) dalam kod di atas bermaksud untuk mengikat ujian kaedah o kepada o.

Contoh ini menunjukkan bahawa terdapat dua cara utama untuk menulis kaedah proksi.

Salin kod Kod adalah seperti berikut:

jQuery.proxy(fungsi, konteks)
// atau
jQuery.proxy(konteks, nama)

Cara pertama penulisan ialah dengan menentukan objek konteks (konteks) untuk fungsi (fungsi), dan cara penulisan kedua ialah menentukan objek konteks (konteks) dan salah satu nama kaedahnya (nama).

Lihat contoh lain. Dalam keadaan biasa, objek ini dalam kod berikut menghala ke objek DOM tempat peristiwa klik berlaku.

Salin kod Kod adalah seperti berikut:

$('#myElement').klik(function() {
$(this).addClass('aNewClass');
});

Jika kita mahu fungsi panggil balik berjalan ditangguhkan dan menggunakan kaedah setTimeout, kod akan menjadi salah, kerana setTimeout menyebabkan fungsi panggil balik berjalan dalam persekitaran global, dan ini akan menunjuk ke objek global.

Salin kod Kod adalah seperti berikut:

$('#myElement').klik(function() {
setTimeout(function() {
$(this).addClass('aNewClass');
}, 1000);
});

Ini dalam kod di atas akan menunjuk ke tetingkap objek global, menyebabkan ralat.

Pada masa ini, anda boleh menggunakan kaedah proksi untuk mengikat objek ini pada objek myElement.

Salin kod Kod adalah seperti berikut:

$('#myElement').klik(function() {
setTimeout($.proxy(function() {
          $(this).addClass('aNewClass'); }, ini), 1000);
});

(7)$.data, $.removeData

Kaedah $.data boleh digunakan untuk menyimpan data pada nod DOM.

Salin kod Kod adalah seperti berikut:

//Simpan data
$.data(document.body, "foo", 52 );
//Baca data
$.data(document.body, "foo");
// Baca semua data
$.data(document.body);

Kod di atas menyimpan pasangan nilai kunci pada badan elemen halaman web, dengan nama kunci "foo" dan nilai kunci 52.

Kaedah $.removeData digunakan untuk mengalih keluar data yang disimpan dalam kaedah $.data.

Salin kod Kod adalah seperti berikut:

$.data(div, "test1", "VALUE-1");
$.removeData(div, "test1");

(8)$.parseHTML, $.parseJSON, $.parseXML

Kaedah $.parseHTML digunakan untuk menghuraikan rentetan ke dalam objek DOM.

Kaedah $.parseJSON digunakan untuk menghuraikan rentetan JSON ke dalam objek JavaScript, serupa dengan JSON.parse() asli. Walau bagaimanapun, jQuery tidak menyediakan kaedah yang serupa dengan JSON.stringify(), iaitu, ia tidak menyediakan kaedah untuk menukar objek JavaScript kepada objek JSON.

Kaedah $.parseXML digunakan untuk menghuraikan rentetan ke dalam objek XML.

Salin kod Kod adalah seperti berikut:

var html = $.parseHTML("hello, nama saya jQuery.");
var obj = $.parseJSON('{"name": "John"}');
var xml = "";
var xmlDoc = $.parseXML(xml);

(9)$.makeArray

Kaedah $.makeArray menukar objek seperti tatasusunan kepada tatasusunan sebenar.

Salin kod Kod adalah seperti berikut:

var a = $.makeArray(document.getElementsByTagName("div"));
(10)$.gabung

Kaedah $.merge digunakan untuk menggabungkan satu tatasusunan (parameter kedua) ke dalam tatasusunan lain (parameter pertama).

Salin kod Kod adalah seperti berikut:

var a1 = [0,1,2];
var a2 = [2,3,4];
$.merge(a1, a2);
a1
// [0, 1, 2, 2, 3, 4]
(11)$.sekarang

Kaedah $.now mengembalikan bilangan milisaat yang sepadan dengan masa semasa dari 00:00:00 UTC pada 1 Januari 1970, yang bersamaan dengan (Tarikh baharu).getTime().

Salin kod Kod adalah seperti berikut:

$.sekarang()
// 1388212221489

Kaedah untuk menentukan jenis data

jQuery menyediakan satu siri kaedah alat untuk menentukan jenis data untuk mengimbangi kelemahan operator jenis asli JavaScript. Kaedah berikut menilai parameter dan mengembalikan nilai Boolean.

jQuery.isArray(): Sama ada ia adalah tatasusunan.
jQuery.isEmptyObject(): Sama ada ia objek kosong (tidak mengandungi sifat terhitung).
jQuery.isFunction(): Sama ada ia adalah fungsi.
jQuery.isNumeric(): Sama ada ia adalah tatasusunan.
jQuery.isPlainObject(): Sama ada ia objek yang dijana menggunakan "{}" atau "Objek baharu" dan bukannya objek yang disediakan secara asli oleh penyemak imbas.
jQuery.isWindow(): Sama ada ia adalah objek tetingkap.
jQuery.isXMLDoc(): Menentukan sama ada nod DOM berada dalam dokumen XML.
Berikut adalah beberapa contoh.

Salin kod Kod adalah seperti berikut:

$.isEmptyObject({}) // benar
$.isPlainObject(document.location) // false
$.isWindow(window) // true
$.isXMLDoc(document.body) // palsu

Selain kaedah di atas, terdapat juga kaedah $.type yang boleh mengembalikan jenis data pembolehubah. Intipatinya ialah menggunakan kaedah Object.prototype.toString untuk membaca atribut [[Class]] di dalam objek (lihat bahagian Objek pada "Perpustakaan Standard").

Salin kod Kod adalah seperti berikut:

$.type(/test/) // "regexp"

Operasi Ajax

$.ajax

Objek jQuery juga mentakrifkan kaedah Ajax ($.ajax()) untuk mengendalikan operasi Ajax. Selepas memanggil kaedah ini, penyemak imbas akan menghantar permintaan HTTP ke pelayan.

$.ajax() boleh digunakan dalam pelbagai cara, yang paling biasa ialah menyediakan parameter objek.

Salin kod Kod adalah seperti berikut:

$.ajax({
async: benar,
url: '/url/to/json',
Taip: 'DAPAT',
data : { id : 123 },
dataType: 'json',
tamat masa: 30000,
kejayaan: successCallback,
ralat: errorCallback,
lengkap: completeCallback
})
function successCallback(json) {
$('

').text(json.title).appendTo('body');
}
ralat fungsiCallback(xhr, status){
console.log('Sesuatu telah berlaku!');
}
fungsi completeCallback(xhr, status){
console.log('Permintaan Ajax telah tamat.');
}

Parameter objek kod di atas mempunyai berbilang atribut, maksudnya adalah seperti berikut:

async: Item ini lalai kepada benar Jika ditetapkan kepada palsu, ini bermakna permintaan segerak dikeluarkan.
cache: Item ini lalai kepada benar Jika ditetapkan kepada palsu, penyemak imbas tidak akan menyimpan data yang dikembalikan oleh pelayan. Ambil perhatian bahawa penyemak imbas itu sendiri tidak akan cache data yang dikembalikan oleh permintaan POST, jadi walaupun ia ditetapkan kepada palsu, ia hanya akan berkesan untuk permintaan HEAD dan GET.
url: URL sebelah pelayan. Ini adalah satu-satunya atribut yang diperlukan, atribut lain boleh ditinggalkan.
jenis: Kata kerja HTTP yang digunakan untuk menghantar maklumat ke pelayan lalai ialah GET Kata kerja lain termasuk POST, PUT dan DELETE.
dataType: Jenis data yang diminta daripada pelayan, yang boleh ditetapkan kepada teks, html, skrip, json, jsonp dan xml.
data: Data dihantar ke pelayan Jika kaedah GET digunakan, item ini akan ditukar menjadi rentetan pertanyaan dan dilampirkan pada hujung URL.
kejayaan: fungsi panggil balik apabila permintaan berjaya Parameter fungsi ialah data yang dikembalikan oleh pelayan, maklumat status dan objek asal yang mengeluarkan permintaan.
tamat masa: Bilangan maksimum milisaat untuk menunggu. Jika permintaan tidak dikembalikan selepas masa ini, status permintaan akan ditukar secara automatik kepada gagal.
ralat: fungsi panggil balik apabila permintaan gagal Parameter fungsi ialah objek asal yang mengeluarkan permintaan dan maklumat status yang dikembalikan.
complete: Fungsi panggil balik yang akan dilaksanakan tanpa mengira sama ada permintaan berjaya atau gagal Parameter fungsi ialah objek asal yang mengeluarkan permintaan dan maklumat status yang dikembalikan.
Antara parameter ini, url boleh bebas dan digunakan sebagai parameter pertama kaedah ajax. Dengan kata lain, kod di atas juga boleh ditulis seperti berikut.

Salin kod Kod adalah seperti berikut:

$.ajax('/url/to/json',{
Taip: 'DAPAT',
dataType: 'json',
kejayaan: successCallback,
ralat: errorCallback
})

Kaedah penulisan yang mudah

Terdapat juga beberapa cara mudah untuk menulis kaedah ajax.

$.get(): Buat permintaan GET.
$.getScript(): Baca fail skrip JavaScript dan laksanakannya.
$.getJSON(): Keluarkan permintaan GET untuk membaca fail JSON.
$.post(): Buat permintaan POST.
$.fn.load(): Baca fail html dan masukkan ke dalam elemen semasa.
Secara umumnya, kaedah kemudahan ini menerima tiga parameter mengikut urutan: url, data dan fungsi panggil balik pada kejayaan.

(1)$.get(), $.post()

Dua kaedah ini masing-masing sepadan dengan kaedah GET dan kaedah POST HTTP.

Salin kod Kod adalah seperti berikut:

$.get('/data/people.html', function(html){
$('#target').html(html);
});
$.post('/data/save', {name: 'Rebecca'}, function (resp){
console.log(JSON.parse(resp));
});

Kaedah get menerima dua parameter, iaitu URL sisi pelayan dan fungsi panggil balik selepas permintaan berjaya. Kaedah pos mempunyai parameter lain antara kedua-dua parameter ini, yang mewakili data yang dihantar ke pelayan.

Kaedah penulisan ajax yang sepadan dengan kaedah siaran di atas adalah seperti berikut.

Salin kod Kod adalah seperti berikut:

$.ajax({
Taip: 'POST',
URL: '/data/save',
Data: {nama: 'Rebecca'},
Jenis Data: 'json',
Kejayaan: fungsi (resp){
console.log(JSON.parse(resp));
}
});

(2)$.getJSON()

Satu lagi cara mudah untuk menulis kaedah ajax ialah kaedah getJSON. Apabila pelayan mengembalikan data dalam format JSON, kaedah ini boleh digunakan dan bukannya kaedah $.ajax.

Salin kod Kod adalah seperti berikut:

$.getJSON('url/to/json', {'a': 1}, function(data){
console.log(data);
});

Kod di atas adalah bersamaan dengan tulisan berikut.

Salin kod Kod adalah seperti berikut:

$.ajax({
dataType: "json",
url: '/url/to/data',
data: {'a': 1},
Kejayaan: fungsi(data){
console.log(data);
}
});

(3)$.getScript()

Kaedah $.getScript digunakan untuk memuatkan fail skrip dari bahagian pelayan.

Salin kod Kod adalah seperti berikut:

$.getScript('/static/js/myScript.js', function() {
FunctionFromMyScript();
});

Kod di atas mula-mula memuatkan skrip myScript.js daripada pelayan, dan kemudian melaksanakan fungsi yang disediakan oleh skrip dalam fungsi panggil balik.

Fungsi panggil balik getScript menerima tiga parameter, iaitu kandungan fail skrip, maklumat status respons HTTP dan contoh objek ajax.

Salin kod Kod adalah seperti berikut:

$.getScript( "ajax/test.js", fungsi (data, textStatus, jqxhr){
console.log( data ); // Kandungan test.js
console.log( textStatus ); // Kejayaan
console.log( jqxhr.status ); // 200
});

getScript ialah cara mudah untuk menulis kaedah ajax, jadi ia mengembalikan objek tertunda dan anda boleh menggunakan antara muka tertunda.

Salin kod Kod adalah seperti berikut:

jQuery.getScript("/path/to/myscript.js")
.selesai(fungsi() {
               // ...
})
.fail(function() {
               // ...
});

(4)$.fn.load()

$.fn.load bukan kaedah alat jQuery, tetapi kaedah yang ditakrifkan pada contoh objek jQuery, yang digunakan untuk mendapatkan fail HTML bahagian pelayan dan memasukkannya ke dalam elemen semasa. Oleh kerana kaedah ini juga tergolong dalam operasi ajax, ia akan dibincangkan di sini bersama-sama.

Salin kod Kod adalah seperti berikut:

$('#newContent').load('/foo.html');

Kaedah $.fn.load juga boleh menentukan pemilih, meletakkan bahagian fail jauh yang sepadan dengan pemilih ke dalam elemen semasa dan menentukan fungsi panggil balik apabila operasi selesai.

Salin kod Kod adalah seperti berikut:

$('#newContent').load('/foo.html #myDiv h1:first',
Fungsi(html) {
console.log('Kandungan dikemas kini!');
});

Kod di atas hanya memuatkan bahagian foo.html yang sepadan dengan "#myDiv h1:first". Selepas pemuatan selesai, fungsi panggil balik yang ditentukan akan dijalankan.

Acara Ajax

jQuery menyediakan kaedah berikut untuk menentukan fungsi panggil balik untuk acara AJAX tertentu.

.ajaxComplete(): Permintaan ajax selesai.
.ajaxError(): ralat permintaan Ajax.
.ajaxSend(): sebelum permintaan ajax dikeluarkan.
.ajaxStart(): Permintaan ajax pertama mula dikeluarkan, iaitu, belum ada permintaan ajax lagi untuk diselesaikan.
.ajaxStop(): Selepas semua permintaan ajax selesai.
.ajaxSuccess(): Selepas permintaan ajax berjaya.
Di bawah adalah contoh.

Salin kod Kod adalah seperti berikut:

$('#loading_indicator')
.ajaxStart(function (){$(this).show();})
.ajaxStop(function (){$(this).hide();});

Nilai pulangan

Kaedah ajax mengembalikan objek tertunda, dan anda boleh menggunakan kaedah itu untuk menentukan fungsi panggil balik untuk objek (lihat bahagian "Objek Tertunda" untuk penjelasan terperinci).

Salin kod Kod adalah seperti berikut:

$.ajax({
url: '/data/people.json',
dataType: 'json'
}).kemudian(fungsi (resp){
console.log(resp.people);
})

JSONP

Disebabkan "sekatan domain yang sama" dalam penyemak imbas, kaedah ajax hanya boleh membuat permintaan HTTP kepada nama domain halaman web semasa. Walau bagaimanapun, dengan memasukkan elemen skrip () ke dalam halaman web semasa, anda boleh membuat permintaan GET kepada nama domain yang berbeza Penyelesaian ini dipanggil JSONP (JSON dengan Padding).

Kaedah ajax boleh mengeluarkan permintaan JSONP dengan menentukan dataType sebagai JSONP dalam parameter objek.

Salin kod Kod adalah seperti berikut:

$.ajax({
url: '/data/search.jsonp',
data: {q: 'a'},
dataType: 'jsonp',
Kejayaan: function(resp) {
$('#target').html('Results: ' resp.results.length);
}
});)

Pendekatan biasa untuk JSONP ialah menambah nama fungsi panggil balik selepas URL yang akan diminta. Kaedah ajax menetapkan bahawa jika URL yang diminta berakhir dalam bentuk yang serupa dengan "panggilan balik=?", ia secara automatik akan berada dalam bentuk JSONP. Oleh itu, kod di atas juga boleh ditulis seperti berikut.

Salin kod Kod adalah seperti berikut:

$.getJSON('/data/search.jsonp?q=a&callback=?',
fungsi(resp) {
$('#target').html('Results: ' resp.results.length);
}
);