1. Back to top button
You can use animate and scrollTop to animate back to top without using other plugins.
$('a.top').click(function () { $(document.body).animate({scrollTop: 0}, 800); return false; }); <!-- Create an anchor tag --> <a class="top" href="#">Back to top</a> Change the value of scrollTop to adjust the distance from the top of the return, and the second parameter of animate is the time required to perform the return action (unit: milliseconds ).
2. 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');
3. Check whether the image is loaded
Sometimes you need to make sure that the image has finished loading in order to 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.
4. Automatically modify broken images
If you happen to find broken image links on your site, you can replace them with an image that cannot easily be 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 site doesn't have broken image links, there's no harm in adding this code.
5. Mouseover (hover) switch 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, and automatically cancel the class attribute when the user leaves the mouse :
$('.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: It may be a better solution to achieve this effect directly using CSS, but you still need to know the method.
6. Disable input fields
Sometimes you may need to disable a form's submit button or an input field until the user takes some action (for example, checking the "Terms read" checkbox). You can add the disabled attribute until you want to enable it:
$('input[type="submit"]').prop('disabled', true);
All you have to do is implement the removeAttr method, passing in the attribute to remove as a parameter:
$('input[type="submit"]').removeAttr('disabled');
7. Prevent links from 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();
});
8. Toggle fade/slide
Fade and slide are the animation effects we often use in jQuery, they can make the element 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');
});
9. Simple accordion effect
Here's a quick and easy way to achieve the 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;
});
10. Make two DIVs the same height
Sometimes you need to make two divs the same height regardless of how much content they have inside. The following code snippet can be used:
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 maximum height among the elements.