Beri perhatian kepada kemahiran jquery dan tingkatkan kemahiran jquery (mesti belajar untuk pembangunan front-end)_jquery

Koleksi petua mudah untuk membantu anda meningkatkan kemahiran jQuery anda.

Projek kecil yang dimulakan oleh Matt Smith, kini terdapat 14 petua. Bole Online akan terus membuat susulan dengan kemas kini.

Butang kembali ke atas
Pramuat imej
Semak sama ada imej dimuatkan
Membaiki gambar yang rosak secara automatik
Suis kelas hidupkan Tuding
Lumpuhkan medan input
Hentikan memuatkan pautan
Suis pudar/gelongsor
Kesan lipatan mudah
Tetapkan dua Div pada ketinggian yang sama
Buka pautan luaran dalam tetingkap baharu
Cari elemen teks
Beralih antara pencetus yang kelihatan dan tersembunyi

Butang kembali ke atas

Dengan menggunakan kaedah animate dan scrollTop dalam jQuery, anda boleh mencipta animasi back to top yang mudah tanpa memerlukan pemalam:

JavaScript

// Back to top
$('a.top').click(function (e) {
 e.preventDefault();
 $(document.body).animate({scrollTop: 0}, 800);
});

JavaScript

<!-- Create an anchor tag -->
<a class="top" href="#">Back to top</a>

Tukar nilai scrollTop ke tempat anda mahu bar skrol berhenti. Dan kemudian apa yang anda lakukan ialah, tetapkannya untuk kembali ke atas dalam 800 milisaat.

Pramuat imej

Jika halaman anda menggunakan banyak imej yang pada mulanya tidak kelihatan (mis. terikat untuk menuding), adalah berguna untuk pramuatnya:

JavaScript

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

Periksa sama ada imej dimuatkan

Kadangkala anda mungkin perlu menyemak sama ada imej telah dimuatkan sepenuhnya sebelum anda boleh melakukan operasi seterusnya dalam skrip:

JavaScript

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

Anda juga boleh menyemak sama ada imej tertentu telah dimuatkan dengan menggantikan teg img dengan ID atau kelas.

Membaiki gambar yang rosak secara automatik

Jika anda mendapati pautan imej di tapak web anda rosak, ia akan menyusahkan untuk menggantikannya satu demi satu. Kod mudah ini boleh banyak membantu:

JavaScript

$('img').on('error', function () {
 $(this).prop('src', 'img/broken.png');
});

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

Menghidupkan Tuding kelas

Jika tetikus pengguna melayang pada elemen yang boleh diklik pada halaman, anda mahu menukar perwakilan visual elemen ini. Anda boleh menggunakan kod berikut untuk menambah kelas pada elemen apabila pengguna melayangkan kelas itu apabila pengguna meninggalkan tetikus:

JavaScript

$('.btn').hover(function () {
 $(this).addClass('hover');
}, function () {
 $(this).removeClass('hover');
});

Anda hanya perlu menambah CSS yang diperlukan. Jika anda memerlukan cara yang lebih mudah, anda juga boleh menggunakan kaedah toggleClass:

JavaScript

$('.btn').hover(function () {
 $(this).toggleClass('hover');
});

Nota: CSS mungkin merupakan penyelesaian yang lebih pantas untuk contoh ini, tetapi ia masih berbaloi untuk diketahui.

Lumpuhkan medan input

Kadangkala anda mungkin mahu menjadikan butang serah borang atau kotak input teksnya tidak tersedia sehingga pengguna melakukan tindakan tertentu (seperti mengesahkan kotak pilihan "Saya telah membaca syarat"). Tambahkan atribut yang dilumpuhkan pada input anda untuk mencapai kesan yang anda inginkan:

JavaScript

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

Apabila anda ingin menukar nilai disable kepada false, cuma jalankan kaedah prop pada input sekali lagi.

JavaScript

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

Hentikan memuatkan pautan

Kadangkala anda tidak mahu pautan melompat ke halaman atau memuatkan semula halaman, tetapi mahu dapat melakukan perkara lain, seperti mencetuskan skrip lain. Kod berikut ialah helah kecil untuk melumpuhkan tingkah laku lalai:

JavaScript

$('a.no-link').click(function (e) {
 e.preventDefault();
});

Suis pudar/gelongsor

Pudar masuk dan keluar serta slaid ialah kesan animasi yang sering kami gunakan jQuery untuk mencipta. Mungkin anda hanya mahu mendedahkan elemen apabila pengguna mengklik pada sesuatu, menggunakan fadeIn dan slideDown adalah baik. Tetapi jika anda mahu elemen muncul pada klik pertama dan hilang pada klik kedua, kod berikut boleh melakukan kerja dengan baik:

JavaScript

// Fade
$('.btn').click(function () {
 $('.element').fadeToggle('slow');
});
// Toggle
$('.btn').click(function () {
 $('.element').slideToggle('slow');
});

Kesan akordion ringkas

Berikut ialah cara cepat dan mudah untuk mencapai kesan akordion:

JavaScript

// Close all panels
$('#accordion').find('.content').hide();
 
// Accordion
$('#accordion').find('.accordion-header').click(function () {
 var next = $(this).next();
 next.slideToggle('fast');
 $('.content').not(next).slideUp('fast');
 return false;
});

Selepas menambah skrip ini, anda hanya perlu melihat sama ada skrip berfungsi dengan betul dalam HTML yang diperlukan.

Jadikan dua Div sama tinggi

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

JavaScript

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

Contoh ini menetapkan ketinggian min, bermakna ia boleh lebih besar daripada div utama, tetapi tidak pernah lebih kecil. Tetapi kaedah yang lebih fleksibel adalah dengan melelar melalui tetapan set elemen dan menetapkan ketinggian kepada nilai tertinggi dalam elemen:

JavaScript

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:

JavaScript

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

在新标签/窗口打开站外链接
在一个新标签或者新窗口中打开外置链接，并确保站内链接会在相同的标签或窗口中打开：

JavaScript

$('a[href^="http"]').attr('target', '_blank');
$('a[href^="//"]').attr('target', '_blank');
$('a[href^="' + window.location.origin + '"]').attr('target', '_self');

注意：window.location.origin 在 IE 10 中不可用，该 issue 的修复方法。

通过文本找到元素

通过使用 jQuery 中的 contains() 选择器，你可以找到某个元素中的文本。如果文本不存在，该元素将会隐藏：

JavaScript

var search = $('#search').val();

$('div:not(:contains("' + search + '"))').hide();

视觉改变触发
当用户焦点在另外一个标签上，或重新回到标签时，触发 JavaScript：

JavaScript

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

Ajax 调用的错误处理

当某次 Ajax 调用返回 404 或 500 错误，就会执行错误处理。但如果没有定义该处理，其他 jQuery 代码或许会停止工作。可以通过下面这段代码定义一个全局 Ajax 错误处理：

JavaScript

$(document).ajaxError(function (e, xhr, settings, error) {
 console.log(error);
});

全能程序员交流QQ群290551701，群内程序员都是来自，百度、阿里、京东、小米、去哪儿、饿了吗、蓝港等高级程序员 ，拥有丰富的经验。加入我们，直线沟通技术大牛，最佳的学习环境，了解业内的一手的资讯。如果你想结实大牛，那 就加入进来，让大牛带你超神！