Kongsi 15 petua jquery yang semua orang tahu_jquery

15 petua jquery yang terkenal untuk membantu meningkatkan aplikasi jQuery anda, kongsi dengan semua orang

• Butang kembali ke atas
• Pramuat imej
• Tentukan sama ada imej telah dimuatkan
• Membaiki imej yang rosak secara automatik
• Tuding kelas suis
• Lumpuhkan input
• Berhenti memuatkan pautan
• togol pudar/gelongsor
• Akordion ringkas
• Jadikan dua DIV dengan ketinggian yang sama
• Buka pautan luaran dalam tab penyemak imbas/tetingkap baharu
• Dapatkan elemen berdasarkan teks
• Pencetus perubahan yang boleh dilihat
• Pengendalian ralat panggilan Ajax
• Kendalian rantai
  

1. Butang Kembali ke atas

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

// Back to top

$('.top').click(function (e) {

 e.preventDefault();

 $('html, body').animate({scrollTop: 0}, 800);

});

<!-- Create an anchor tag -->

<a class="top" href="#">Back to top</a>

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.

Nota: Mari kita lihat beberapa gelagat nakal scrollTop.

2. 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');

3. 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');
});

Anda juga boleh menyemak sama ada imej tertentu telah dimuatkan dan digantikan dengan teg a1f02c36ba31691bcfe87b2722de723b

4. Membaiki imej yang rosak secara automatik

Jika anda kebetulan menemui pautan imej yang rosak di tapak 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.

5 Tuding kelas penukaran

Katakanlah anda mahu menukar kesan visual elemen pada halaman anda apabila pengguna menuding di atasnya. Apabila pengguna mengarahkan tetikus pada elemen, anda boleh menambah kelas pada elemen dan mengalih keluar kelas apabila tetikus berhenti melayang:

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

Jika anda mahukan cara yang lebih mudah untuk menggunakan kaedah toggleClass, cuma tambah CSS yang diperlukan:

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

Nota: CSS ialah penyelesaian pantas dalam kes ini, tetapi ia masih berbaloi untuk diketahui.

6 Lumpuhkan input

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

Salin kod Kod adalah seperti berikut:

$('input[type="submit"]' ).prop ('dilumpuhkan', benar);

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

Salin kod Kod adalah seperti berikut:

$('input[type="submit"]' ).prop ('dilumpuhkan', palsu);

7. Berhenti memuatkan pautan

Kadangkala anda tidak mahu memaut ke halaman web tertentu atau memuat semula halaman tersebut, anda mungkin mahu mereka melakukan sesuatu yang lain, seperti mencetuskan beberapa skrip lain. Berikut ialah petua untuk mengelakkan pelanggaran tindakan kontrak:

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

8 togol pudar/gelongsor

Gelongsor dan fade-in/fade-out ialah animasi yang sering kami gunakan dalam jQuery. Anda mungkin hanya mahu memaparkan elemen apabila pengguna melakukan acara klik tertentu, dalam hal ini kaedah pudar masuk/keluar atau gelongsor diperlukan. Tetapi jika anda memerlukan elemen itu muncul apabila anda mengkliknya buat kali pertama dan hilang apabila anda mengkliknya untuk kali kedua, kodnya adalah seperti berikut:

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

9. Akordion ringkas

Berikut ialah cara cepat dan mudah untuk mencipta 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;
});

通过添加这个脚本，你需要做的则是必要的HTML操作在你的页面上。

10、使两个DIV同等高度

有时你会想要两个DIV有相同的高度，无论他们都有什么内容：

复制代码 代码如下:

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

这个例子设置了DIV的最小高度，这意味着它的高度只可以比这个设置的高度大而不能小。然而，一个更灵活的方法是循环的一组元素，并设置将最高元素的高度作为高度：

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

如果你想要所有的列有相同的高度：

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 在IE10不工作。

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缓存方法是最好的做法，导致更短、更快的代码。

以上就是本文的全部内容，希望帮助大家提高jQuery应用能力。