Useful jQuery Tips and Tricks - Part 1

Learn Front-End Development

Check if an Element Has a Specific Attribute

This technique can be useful in many areas of front-end development. Using this technique, we can check whether a specific element in the DOM has an attribute or not. Remember, some browsers return 'false' while other browsers return 'undefined', so make sure you check for both.

Click Me

<script>
var hasAttr = $(this).attr('title');
// For some browsers, 'hasAttr' returns undefined; for others, 'hasAttr' is false.
if (typeof hasAttr !== typeof undefined && hasAttr !== false) {
alert('It has a title!');
}
else {
}
</script>
<a title='Does this element have a title'>Click Me</a>

Adding/Removing Classes on Hover

This technique is very useful, and we find that we end up using this at least once in almost every web design and development project we work on.

Hover over me!
<script>
$('.bg-grey').hover(function(){
$(this).addClass('text-purple');
},
function(){
$(this).removeClass('text-purple');
});
</script> 
<div class="bg-grey"></div>

Click Once and Unbind Handler

This can be a very useful technique to use when you want to attach an event handler and unbind it immediately after the event has fired. For instance, say you want a user to click on an element and then have the element unbound by that click event. Use jQuery's 'one' function

Click Me

<script>
$('#one_click').one('click', function() {
alert('This can only happen once');
});
</script> 
<a id='one_click'>Click Me</a>

AJAX – Load Section of a Page

AJAX is a revolutionary front-end development tool for making server request asynchronously. Sometimes, when we load a page, we want to only load a partial section of that page. In order to do this, use the URL followed by a space with a reference to the selector.

Click Me

<script>
$('#load_page').one('click', function(){
$("#load_here").load("path/ #load_this");
});
</script> 
<a id='load_page'>Click Me</a>
<div id="load_here"></div>

Strategy for Broken Images

When operating large sites with countless images, there is a good chance that an image may be missing/broken somewhere throughout the site, meaning the path to that image does not exist for whatever reason. In order to fix this, we can do one of two things. We can either replace all broken/missing images with a standard 'missing image' image that lets users know that it is broken, or we can simply remove them from the DOM altogether.

We use AJAX for this technique and check for all broken images on document.ready. When looping through the images, we check for the existence of the image's src attribute. If the image's src attribute generates a successful response, we don't do anything at all, however, if the server responds with an error, we replace the image with the standard 'missing image' image as shown below.

<script>
$("img").each(function() {
var _this = $(this);
$.ajax({
url:$(this).attr('src'),
type:'HEAD',
async: false,
error:
function(e){
if (e.status == '404') {
$(_this).attr('src','path/to/image');
}
}
});
});
</script> 
<img src='/path/to/broken/link'>