petua jquery dan tiga singkatan jquery yang semua orang dalam pembangunan bahagian hadapan WEB harus tahu_jquery

Koleksi petua mudah untuk membantu anda meningkatkan kemahiran jQuery anda. Pada masa ini, editor telah menyusun 14 petua jquery untuk anda.

Struktur direktori

1 Butang Kembali ke atas
2 Imej pramuat
3 Semak sama ada imej dimuatkan
4 Membaiki gambar yang rosak secara automatik
Suis kelas hidupkan 5Hover
6Lumpuhkan medan input
7Hentikan memuatkan pautan
8 suis pudar/gelongsor
9 kesan lipatan mudah
10Tetapkan dua Div pada ketinggian yang sama
11Buka pautan luaran dalam tetingkap baharu
12 Cari elemen teks
13Tukar pencetus yang boleh dilihat dan tersembunyi

Yang berikut akan memperkenalkan kepada anda maksud khusus setiap petua.

1. Butang Kembali ke atas

Dengan menggunakan kaedah animate dan scrollTop dalam jQuery, anda boleh mencipta animasi back to top yang mudah tanpa memerlukan 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 (mis. terikat untuk menuding), 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 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:

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

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

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

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

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

7. Hentikan pemuatan 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:

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

8. 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:

// 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, tidak kira kandungan yang terkandung di dalamnya:

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

 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. Buka pautan luaran dalam tab/tetingkap baharu

Buka pautan luaran dalam tab atau tetingkap baharu dan pastikan pautan dalaman dibuka dalam tab atau tetingkap yang sama:

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

Ajax 调用的错误处理

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

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

14.插件链式调用

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 中的链式操作和缓存方法，都极大精简和提速了代码。

下面给大家介绍jquery小技巧之三个简写

简洁写法如下所示：

对象的简写

在过去，如果你想创建一个对象，你需要这样：

var car = new Object(); 
car.colour = 'red'; 
car.wheels = 4; 
car.hubcaps = 'spinning'; 
car.age = 4;

下面的写法能够达到同样的效果：

var car = { 
colour:'red', 
wheels:4, 
hubcaps:'spinning', 
age:4 
}

这样就简单多了，你不需要反复使用这个对象的名称。
这样 car 就定义好了，也许你会遇到 invalidUserInSession 的问题，这只有你在使用IE时会碰到，只要记住一点，不要右大括号前面写分号，你就不会有麻烦。

数组的简写

传统的定义数组的方法是这样：

var moviesThatNeedBetterWriters = new Array(
  'Transformers','Transformers2','Avatar','Indiana Jones 4');

简写版是这样：

var moviesThatNeedBetterWriters = [
  'Transformers','Transformers2','Avatar','Indiana Jones 4']; 

对于数组，这里有个问题，其实没有什么图组功能。但你会经常发现有人这样定义上面的 car ，就像这样：

var car = new Array(); 
car['colour'] = 'red'; 
car['wheels'] = 4; 
car['hubcaps'] = 'spinning'; 
car['age'] = 4;

数组不是万能的；这样写不对，会让人困惑。图组实际上是对象的功能，人们混淆了这两个概念。

三元条件符号的简写

另外一个非常酷的简写方法是使用与三元条件符号。
你不必写成下面的样子：

var direction; 
if(x < 200){ 
  direction = 1; 
}
else { 
  direction = -1; 
}

你可以使用三元条件符号简化它：

var direction = x < 200 &#63; 1 : -1;

当条件为true 时取问号后面的值，否则取冒号后面的值。