Essential jQuery practical skills (Part 2)_jquery

The examples in this article summarize classic and practical jQuery code development techniques. Share it with everyone for your reference. The details are as follows:

12. Preload images
If your page uses a lot of invisible images (such as hover display), you may need to preload them:

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

13. Check whether the image is loaded
Sometimes you need to make sure the image is loaded so you can perform subsequent operations:

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

You can replace img with other ID or class to check whether the specified image is loaded.
14. Automatically modify damaged images
If you happen to find broken image links on your website, you can replace them with an image that cannot be easily replaced. Adding this simple code can save you a lot of trouble:

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

Even if your website doesn’t have broken image links, there’s no harm in adding this code.
15. Switch class attribute by mouse hover
If you want to change the effect when the user hovers the mouse over a clickable element, the following code can add a class attribute when the user hovers over the element. When the user leaves the mouse, Then the class attribute will be automatically canceled:

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

You only need to add the necessary CSS code. If you want cleaner code, you can use the toggleClass method:

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

Note: Using CSS directly to achieve this effect may be a better solution, but you still need to know the method.
16. Disable input field
Sometimes you may need to disable a form's submit button or an input field until the user performs some action (for example, checking the "Terms Read" checkbox). You can add the disabled attribute until you want to enable it:

Copy code The code is as follows:

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

All you have to do is execute the removeAttr method and pass in the attribute to be removed as a parameter:

Copy code The code is as follows:

$('input[type="submit"]').removeAttr('disabled ');

17. Prevent link loading
Sometimes you don’t want to link to a page or reload it, you may want it to do something else or trigger some other script, you can do this:

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

18. Switch fade/slide
Fade and slide are animation effects we often use in jQuery. They can make elements display better. But if you want the element to use the first effect when it appears and the second effect when it disappears, you can do this:
// Fade

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

19. Simple accordion effect
Here’s a quick and easy way to achieve an accordion effect:
// 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;
});

20. Make the two DIVs the same height
Sometimes you need to make two divs the same height regardless of the content inside them. You can use the following code snippet:

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

This code will loop through a set of elements and set their height to the maximum height among the elements.
21. Verify whether the element is empty
This will allow you to check if an element is empty.

$(document).ready(function() {
 if ($('#id').html()) {
 // do something
 }
});

22. Replace elements
Want to replace a div, or something else?

$(document).ready(function() {
 $('#id').replaceWith('
<DIV>I have been replaced</DIV>

');
});

The above is the entire content of this article, I hope it will be helpful to everyone’s study.