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.
$.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).
$.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.
$.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.
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.
var a = [1,2,3,4];
$.inArray(4,a) // 3
(5)$.lanjutkan
Kaedah $.extend digunakan untuk menggabungkan berbilang objek ke dalam objek pertama.
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.
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.
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.
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:
$("#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.
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.
$('#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.
$('#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.
$('#myElement').klik(function() {
setTimeout($.proxy(function() {
$(this).addClass('aNewClass');
}, ini), 1000);
});
(7)$.data, $.removeData
Kaedah $.data boleh digunakan untuk menyimpan data pada nod DOM.
//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.
$.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.
var html = $.parseHTML("hello, nama saya jQuery.");
var obj = $.parseJSON('{"name": "John"}');
var xml = "RSS Title";
var xmlDoc = $.parseXML(xml);
(9)$.makeArray
Kaedah $.makeArray menukar objek seperti tatasusunan kepada tatasusunan sebenar.
var a = $.makeArray(document.getElementsByTagName("div"));
(10)$.gabung
Kaedah $.merge digunakan untuk menggabungkan satu tatasusunan (parameter kedua) ke dalam tatasusunan lain (parameter pertama).
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().
$.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.
$.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").
$.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.
$.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.
$.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.
$.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.
$.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.
$.getJSON('url/to/json', {'a': 1}, function(data){
console.log(data);
});
Kod di atas adalah bersamaan dengan tulisan 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.
$.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.
$.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.
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.
$('#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.
$('#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.
$('#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).
$.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.
$.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.
$.getJSON('/data/search.jsonp?q=a&callback=?',
fungsi(resp) {
$('#target').html('Results: ' resp.results.length);
}
);
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
