jQuery Practical Skills Required (medium)

This example summarizes classic and practical jQuery code development tips. Share to everybody for everybody reference. The details are as follows:

12. Pre-load images
If you have a lot of invisible images on your page (hover), you may want to pre-load 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 that the image is loaded
Sometimes you need to make sure that the image is loaded in order to perform the following actions:

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

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

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

Even if your site doesn't have a broken image link, there's no harm in adding this code.
15. Mouse over (hover) toggle the class attribute
If you want to change the effect of a clickable element when the user hovers over it, the following code can add the class attribute when the user hovers over the element, and automatically cancel the class attribute when the user leaves:

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

All you need to do is add the necessary CSS code. If you want cleaner code, you can use the toggleClass method:

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

Note: Implementing this effect directly with CSS may be a better solution, but you still need to know the method.
Disable the input field
Sometimes you might want to disable the submit button on the form or an input field until the user has done something (for example, check the "Read Terms" check box). You can add the disabled attribute until you want to enable it:

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

All you have to do is execute the removeAttr method and pass in the property you want to remove as an argument:

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

17. Prevents the link from loading
Sometimes you don't want to link to a page or reload it, you might want it to do something else or trigger some other script, you can do this:

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

18. Switching fade/slide
fade and slide are animations that we often use in jQuery to make elements look better. But if you want the element to display with the first effect and disappear with the second effect, 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 both DIV the same height
Sometimes you need to make both div the same height, no matter how much content they contain. 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 loops through a set of 1 elements and sets their height to the maximum height of the elements.
21. Verify 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?

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

0

Above is the entire content of this article, I hope to help you with your study.