10 jQuery tips / code snippets

Time:2019-11-14

10 jQuery tips / code snippets
10 jQuery tips / code snippets collected can help you develop quickly.

  1. Back to top button

You can use animate and scrolltop to animate back to the top without using other plug-ins.

// Back to top
$(‘a.top’).click(function () {
$(document.body).animate({scrollTop: 0}, 800);
return false;
});
<!– Create an anchor tag –>
Back to top
Changing the value of scrolltop can adjust the distance from the top of the return, while the second parameter of animate is the time (in milliseconds) required to perform the return action.

  1. Preload picture

If you use many invisible images (such as hover display) in your page, 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’);

  1. Check if the picture is loaded

Sometimes you need to make sure the image is loaded to do the following:

$(‘img’).load(function () {
console.log(‘image load successful’);
});
You can replace img with another ID or class to check whether the specified image is loaded.

  1. Automatically modify broken image

If you happen to find broken image links on your website, you can replace them with an image that is not easy to replace. 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 broken image links, there’s no harm in adding this code.

  1. Hover toggle class attribute

If you want to change the effect when the user hovers over a clickable element, the following code can add a class attribute when the user hovers over the element. When the user leaves, the class attribute will be automatically cancelled:

$(‘.btn’).hover(function () {
$(this).addClass(‘hover’);
}, function () {
$(this).removeClass(‘hover’);
});
You just need to add the necessary CSS code. If you want more concise 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 this method.

  1. Disable input field

Sometimes you may need to disable the submit button of the form or an input field until the user performs certain actions (for example, check the “read terms” check box). You can add the disabled property 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 properties to be removed as parameters:

$(‘input[type=”submit”]’).removeAttr(‘disabled’);

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

  1. Toggle fade / slide

Fade and slide are animation effects that we often use in jQuery. They can make elements display better. But if you want to use the first effect when the element is displayed 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’);
});

  1. Simple accordion effect

This is a quick and simple way to achieve 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;
});

  1. Make two divs the same height

Sometimes you need to make two divs the same height, regardless of the content. 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 elements and sets their height to the highest of the elements.


Author: little bookboy

Website: http://apppay.xyz

Learning and communication QQ: 754219009