Summary of some commonly used techniques in jQuery_jquery

Introduction

The existence of jQuery makes it easier and easier for people who learn front-end development to get started with the front-end. They can achieve their needs with just a few lines of code. However, do you really know how to use jQuery? You cannot see the code after it is run. Do you think there is something wrong with jQuery based on your expected results? In fact, the problem lies in whether you know how to use it. Here are some application examples often encountered in development, and discover a different world of jQuery.

Back to top button

Using the animate and scrollTop methods in jQuery, you don’t need to use plug-ins to create simple scroll-to-top animations.

$('.top').click(function (e) {
 e.preventDefault();
 $('html, body').animate({scrollTop: 0}, 800);
});

Change the position you want to scroll to by using the value of scrollTop. Essentially that's what you do: let the page scroll for the next 800 milliseconds until it scrolls to the top of the document.

Image preloading

If your web page uses a lot of hidden image files (for example: images displayed on mouseover), then preloading of images makes sense:

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

Determine whether the image is loaded

Sometimes you may need to check whether the image has been loaded so that you can continue to execute the corresponding js code:

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

Usage scenarios I have encountered: Some elements need to be sized according to the actual size of the image and placed in an absolute arrangement. The element's size setting can be calculated after the image is loaded.

Automatically repair damaged images

If you happen to find broken image links on your website, it can be a pain to replace them one by one. This simple code can save a lot of trouble:

$('img').on('error', function () {
 if(!$(this).hasClass('broken-image')) {
 $(this).prop('src', 'img/broken.png').addClass('broken-image');
 }
});

Even if you don’t have any broken links, adding this code will have no impact.

Disable input

Sometimes you may need to use a form's submit button or an input field until the user performs an action (such as checking the "I have read the terms" checkbox). Set the disabled attribute on your input box, and then enable it when you need it:

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

All you need to do is run the prop method on the input box again, but set the disabled value to false:

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

For jQuery developers who don’t understand the prop function, the most commonly used is the attr function. They may develop many programs without finding any problems. However, when developing checkbox, radio, and select, you will find that attr is used. I cannot make the attributes take effect. I think it is a jQuery bug. Here are some suggestions for using attr and prop:

When it comes to getting or setting attributes such as checked, selected, readonly and disabled, it is obviously better to use the prop method

Make the two DIVs the same height

Sometimes you want two DIVs to have the same height, no matter what content they contain:

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

This example sets the minimum height of the DIV, which means that its height can only be greater than the height set but not smaller. However, a more flexible approach is to loop over a set of elements and set the height of the tallest element as the height:

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

If you want all columns to have the same height:

var $rows = $('.same-height-columns');
$rows.each(function () {
 $(this).find('.column').height($(this).height());
});

Get elements based on text

You can find the text content within an element through the contains() selector in jQuery. If the text does not exist, this element will be hidden:

var search = $('#search').val();
$('div:not(:contains("' + search + '"))').hide();

Trigger of visible changes

Trigger javascript when the user defocuses or refocuses a tab:

$(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!');
 }
});