15 snippet_jquery kod jquery yang biasa digunakan

Artikel ini berkongsi 15 coretan kod jquery yang biasa digunakan untuk semua orang untuk rujukan anda Kandungan khusus adalah seperti berikut

1. Butang Kembali ke atas
Dengan menggunakan kaedah animate dan scrollTop dalam jQuery, anda boleh mencipta animasi back to top yang mudah tanpa pemalam:

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

 <!-- 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.

2. Pramuat imej
Jika halaman anda menggunakan banyak imej yang pada mulanya tidak kelihatan (cth. terikat pada tuding), adalah berguna untuk pramuatnya:

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

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

 $('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.

4. Membaiki gambar yang rosak
Jika anda mendapati pautan imej di laman web anda rosak, sangat menyusahkan untuk menggantikannya satu persatu. Kod mudah ini boleh banyak membantu:

 $('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.

5. Kelas menghidupkan Tuding
Jika tetikus pengguna melayang di atas elemen yang boleh diklik pada halaman, anda mahu menukar perwakilan visual elemen tersebut. Anda boleh menggunakan kod berikut untuk menambah kelas pada elemen apabila pengguna melayangkan kelas itu apabila pengguna meninggalkan tetikus:

 $('.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:

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

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

6. 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 semak "Saya telah membaca syarat"). Tambahkan atribut yang dilumpuhkan pada input anda untuk mencapai kesan yang anda inginkan:

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

8. Suis pudar/gelongsor
Fade in dan fade out dan 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:

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

9. Kesan akordion ringkas
Berikut ialah cara cepat dan mudah untuk mencapai kesan akordion:

 // 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.

10. Jadikan kedua-dua Div sama tinggi
Kadangkala anda mungkin mahu dua div mempunyai ketinggian yang sama, tanpa mengira kandungan di dalamnya:

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

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

$('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 的修复方法。

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

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

13、视觉改变触发
当用户焦点在另外一个标签上，或重新回到标签时，触发 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!');
 }
 });
 

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

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

15、插件链式调用
jQuery 支持链式调用插件，以减缓反复查询 DOM，并创建多个 jQuery 对象。看下面示例代码：

 $('#elem').show();
 $('#elem').html('bla');
 $('#elem').otherStuff();

上面这段代码，可以通过链式操作大大改进：

 $('#elem')
 .show()
 .html('bla')
 .otherStuff();

还有另外一种方法，把元素缓存在变量中（前缀是 $ ）：

 var $elem = $('#elem');
 $elem.hide();
 $elem.html('bla');
 $elem.otherStuff();

jQuery 中的链式操作和缓存方法，都极大精简和提速了代码。
以上就是本文的全部内容，希望对大家的学习有所帮助。