jQuery Tips Everyone Should Know

Shares

A collection of tips to help up your jQuery game by allthingsmitty


Use noConflict()

The $ alias used by jQuery is also used by other JavaScript libraries. To ensure that jQuery doesn’t conflict with the $ object of different libraries, use the noConflict() method at the start of the document:

jQuery.noConflict();

Now you’ll reference the jQuery object using the jQuery variable name instead of $ (e.g., jQuery('div p').hide()).


Checking If jQuery Loaded

Before you can do anything with jQuery you first need to make certain it has loaded:

if (typeof jQuery == 'undefined') {
  console.log('jQuery hasn\'t loaded');
} else {
  console.log('jQuery has loaded');
}

Now you’re off…


Use .on() Binding Instead of .click()

Using .on() gives you several advantages over using .click(), such as the ability to add multiple events…

.on('click tap hover')

…a binding applies to dynamically created elements, as well (there’s no need to manually bind every single element dynamically added to a DOM element)…

…and the possibility to set a namespace:

.on('click.menuOpening')

Namespaces give you the power to unbind a specific event (e.g., .off('click.menuOpening')).


Back to Top Button

By using the animate and scrollTop methods in jQuery you don’t need a plugin to create a simple scroll-to-top animation:

// Back to top
$('.container').on('click', '.back-to-top', function (e) {
  e.preventDefault();
  $('html, body').animate({scrollTop: 0}, 800);
});
<!-- Create an anchor tag -->
<div class="container">
  <a href="#" class="back-to-top">Back to top</a>
</div>

Changing the scrollTop value changes where you wants the scrollbar to land. All you’re really doing is animating the body of the document throughout the course of 800 milliseconds until it scrolls to the top of the document.

Note: Watch for some buggy behavior with scrollTop.


Preload Images

If your web page uses a lot of images that aren’t visible initially (e.g., on hover) it makes sense to preload them:

$.preloadImages = function () {
  for (var i = 0; i < arguments.length; i++) {
    $('<img>').attr('src', arguments[i]);
  }
};

$.preloadImages('img/hover-on.png', 'img/hover-off.png');

Checking If Images Are Loaded

Sometimes you might need to check if your images have fully loaded in order to continue on with your scripts:

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

You can also check if one particular image has loaded by replacing the <img> tag with an ID or class.


Fix Broken Images Automatically

If you happen to find broken image links on your site replacing them one by one can be a pain. This simple piece of code can save a lot of headaches:

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

Alternatively, if you wish to simply hide broken images this snippet will take care of that for:

$('img').on('error', function () {
  $(this).hide();
});

Post a Form with AJAX

jQuery AJAX methods are a common way to request text, HTML, XML, or JSON. If you wanted to send a form via AJAX you could collect the user inputs via the val() method:

$.post('sign_up.php', {
  user_name: $('input[name=user_name]').val(),
  email:     $('input[name=email]').val(),
  password:  $('input[name=password]').val(),
});

However, all of those val() calls are expensive. A better way of collecting the user inputs is using the serialize() function which collects the user inputs as a string:

$.post('sign_up', $('#sign-up-form').serialize());

Toggle Classes on Hover

Let’s say you want to change the visual of a clickable element on your page when a user hovers over it. You can add a class to your element when the user is hovering; when the user stops hovering removes the class:

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

You just need to add the necessary CSS. If you want an even simpler way use the toggleClass method:

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

Note: CSS may be a faster solution in this case but it’s still worthwhile to know this.


Disabling Input Fields

At times you may want the submit button of a form or one of its text inputs to be disabled until the user has performed a certain action (e.g., checking the “I’ve read the terms” checkbox). Add the disabled attribute to your input so you can enable it when you want:

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

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

$('input[type="submit"]').prop('disabled', false);
Subscribe to the JqueryPlugins.net mailing list:
* indicates required

Reply

Pin It on Pinterest