Ringkasan beberapa teknik yang biasa digunakan dalam jQuery_jquery

Pengenalan

Kewujudan jQuery memudahkan dan memudahkan orang yang mempelajari pembangunan bahagian hadapan untuk bermula dengan bahagian hadapan Mereka boleh mencapai keperluan mereka dengan hanya beberapa baris kod gunakan jQuery? Anda tidak dapat melihat kod itu selepas ia dijalankan Adakah anda fikir terdapat sesuatu yang salah dengan jQuery berdasarkan kesan yang anda jangkakan, masalahnya terletak pada sama ada anda tahu cara menggunakannya. Berikut ialah beberapa contoh aplikasi yang sering ditemui dalam pembangunan, dan temui dunia jQuery yang berbeza.

Butang kembali ke atas

Menggunakan kaedah animasi dan scrollTop dalam jQuery, anda tidak perlu menggunakan pemalam untuk mencipta animasi tatal ke atas yang mudah.

$('.top').click(function (e) {
 e.preventDefault();
 $('html, body').animate({scrollTop: 0}, 800);
});

Tukar kedudukan yang anda mahu tatal dengan menggunakan nilai scrollTop. Pada asasnya itulah yang anda lakukan: biarkan halaman menatal untuk 800 milisaat seterusnya sehingga ia menatal ke bahagian atas dokumen.

Pramuat imej

Jika halaman web anda menggunakan banyak fail imej tersembunyi (contohnya: imej dipaparkan pada tetikus), maka pramuat imej masuk akal:

$.preloadImages = function () {
 for (var i = 0; i < arguments.length; i++) {
 $('<img>').attr('src', arguments[i]);
 }
};
$.preloadImages('img/hover-on.png', 'img/hover-off.png');<br />

Tentukan sama ada imej dimuatkan

Kadangkala anda mungkin perlu menyemak sama ada imej telah dimuatkan supaya anda boleh terus melaksanakan kod js yang sepadan:

$('img').load(function () {
 console.log('image load successful');
});

Senario penggunaan yang saya temui: Beberapa elemen perlu bersaiz mengikut saiz sebenar imej dan diletakkan dalam susunan mutlak. Tetapan saiz elemen boleh dikira selepas imej dimuatkan.

Membaiki imej yang rosak secara automatik

Sekiranya anda mendapati pautan imej rosak di tapak web anda, sukar untuk menggantikannya satu demi satu. Kod mudah ini boleh menjimatkan banyak masalah:

$('img').on('error', function () {
 if(!$(this).hasClass('broken-image')) {
 $(this).prop('src', 'img/broken.png').addClass('broken-image');
 }
});

Walaupun anda tidak mempunyai sebarang pautan yang rosak, penambahan kod ini tidak akan memberi kesan.

Lumpuhkan input

Kadangkala anda mungkin perlu menggunakan butang hantar borang atau medan input sehingga pengguna melakukan tindakan (seperti menandai kotak semak "Saya telah membaca syarat"). Tetapkan atribut yang dilumpuhkan pada kotak input anda, dan kemudian dayakannya apabila anda memerlukannya:

$('input[type="submit"]').prop('disabled', true);

Apa yang anda perlu lakukan ialah menjalankan kaedah prop pada kotak input sekali lagi, tetapi tetapkan nilai yang dilumpuhkan kepada palsu:

$('input[type="submit"]').prop('disabled', false);

Bagi pembangun jQuery yang tidak memahami fungsi prop, yang paling biasa digunakan ialah fungsi attr Mereka mungkin membangunkan banyak program tanpa menemui sebarang masalah, tetapi apabila membangunkan kotak semak, radio dan pilih, anda akan mendapati attr itu digunakan. Saya tidak boleh membuat atribut berkuat kuasa. Saya fikir ia adalah pepijat jQuery. Berikut adalah beberapa cadangan untuk menggunakan attr dan prop:

Apabila ia datang untuk mendapatkan atau menetapkan atribut seperti ditandai, dipilih, baca sahaja dan dilumpuhkan, jelas lebih baik menggunakan kaedah prop

Jadikan kedua-dua DIV sama tinggi

Kadangkala anda mahu dua DIV mempunyai ketinggian yang sama, tidak kira kandungan yang terkandung di dalamnya:

$('.div').css('min-height', $('.main-div').height());

Contoh ini menetapkan ketinggian minimum DIV, yang bermaksud ketinggiannya hanya boleh lebih besar daripada ketinggian yang ditetapkan tetapi tidak lebih kecil. Walau bagaimanapun, pendekatan yang lebih fleksibel ialah menggelungkan satu set elemen dan menetapkan ketinggian elemen tertinggi sebagai ketinggian:

var $columns = $('.column');
var height = 0;
$columns.each(function () {
 if ($(this).height() > height) {
 height = $(this).height();
 }
});
$columns.height(height);

Jika anda mahu semua lajur mempunyai ketinggian yang sama:

var $rows = $('.same-height-columns');
$rows.each(function () {
 $(this).find('.column').height($(this).height());
});

Dapatkan elemen berdasarkan teks

Anda boleh mencari kandungan teks dalam elemen melalui pemilih contains() dalam jQuery. Jika teks tidak wujud, elemen ini akan disembunyikan:

var search = $('#search').val();
$('div:not(:contains("' + search + '"))').hide();

Pencetus perubahan yang boleh dilihat

Cetus javascript apabila pengguna menyahfokus atau memfokus semula tab:

$(document).on('visibilitychange', function (e) {
 if (e.target.visibilityState === "visible") {
 console.log('Tab is now in view!');
 } else if (e.target.visibilityState === "hidden") {
 console.log('Tab is now hidden!');
 }
});