10 jquery tips you must master

Collected 10 jQuery tips/code snippets to help you develop quickly.

1. Back to top button

You can use animate and scrollTop to implement the animation of returning 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 -->
<a class="top" href="#">Back to top</a>

Changing the value of scrollTop can adjust the distance between the return and the top, 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++) {
    $(&#39;<img>&#39;).attr(&#39;src&#39;, arguments[i]);
  }
};
$.preloadImages(&#39;img/hover1.png&#39;, &#39;img/hover2.png&#39;);

3. Check whether the image is loaded

Sometimes You need to ensure that the image has been loaded in order to perform the following operations:

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

You can replace img with other IDs or classes to check whether the specified image is loaded.

4. Automatically modify broken 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.

5. Switch class attribute on mouse hover

If you want to change the effect when the user hovers the mouse over a clickable element, the following code can be added when it hovers over the element class attribute, when the user mouses away, 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.

6. Disable input fields

Sometimes you may need to disable a form's submit button or an input field until the user performs some action (e.g., checking the "Read Terms" 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 execute the removeAttr method and pass in the attribute to be removed as a parameter:

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

7. Prevent the link from loading

Sometimes you don’t Want to link to a page or reload it, you may want it to do some other things or trigger some other scripts, you can do this:

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

8. Switch fade/slide

fade and slide are what we do in jQuery Animation effects are often used in . They can make elements display better. But if you want the first effect to be used when the element is displayed, and the second effect to be used 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

This is 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;
});

10. Make 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 group of elements and set their height to the maximum height among the elements.

Original English text: jQuery Tips Everyone Should Know