jQuery tips and tricks

Level: intermediate

In today’s article we’ll do a small review of interesting jQuery tips. The framework itself gives the programmer a gigantic possibilities, that still can be extended through tricks and best practices.

jQuery tips

This time we focus more on practice and examples, rather than theory.

Tip 1. Determine the size of our document

In details, it’s a query of the DOM elements number, which the page contains. In jQuery this information is available in the following manner:

alert($('*').length);

2. Checking if a checkbox is checked 🙂

It’s simple – can be done in such a way:

if ($("#myCheckBoxID").is(':checked')) {
  ...
}

or by checking an attribute:

if ($('#myCheckBoxID').attr('checked')) {
  ...
}

3. Checking whether an element exists

if ($("#myElementID").length == 0) 
    alert('#myElementID does not exist');
else
    alert('#myElementID exist!');

4. Checking if an element is visible

Is visible:

$("#myElementID").is(":visible");

Is hidden:

$('#myElementID').is(':hidden')

5. Number of found (matching) elements

This simple trick gives us information of how many elements of the document matches the selector (e.g. find by the CSS class):

alert($(".our-class-css").size());

6. Scroll the page to the selected item

How to scroll the page in jQuery? Simply:

$(document).scrollTop($('#myElement').offset().top);

7. Substitution of one element to another

So replace an element by another:

$("#oldID").replaceWith("<span>New element ...</span>");

8. Finding an element by CSS class

The code below adds blue 2px border for all elements with foobar class.

$('body').find('.foobar').css({'border': 'solid 2px blue'});

9. Finding an element by attribute

Going one step further, we can search for an item by attribute, even our own.

var p_id = 12345;
$('#container').find('div[data-photoid="' + p_id + '"]').hide();

// e.g.:
// <div data-photoid="12345"><img src="path-to-image.jpg" /></div>

This code is looking for a specific item (here: div), wherein the attribute data-photoid has a value of the specified variable (p_id), and hides the item if was found.

10. “Sticking” actions to the HTML elements

First, we call the unbind() function, so we’ll be able to connect behavior defined by us to the component, instead of the default.

HTML

<span id="prev">PREV</span> 1 2 3 4 5 <span id="next">NEXT</span>

JS

$('#next').unbind();
$('#prev').unbind();

$('#next').click(function() {
    clickTime = new Date().getTime();
    alert(clickTime);

    return false;
});

$('#prev').click(function() {
    clickTime = new Date().getTime();
    alert(clickTime);

    return false;
});

In this example, the time of click is displayed (timestamp).

Next tricks in jQuery are not directly related to the document element.


11. Blocking the right mouse button in jQuery

$(document).bind("contextmenu", function(e) {
    return false;
});

12. Short version of document.ready

For the document.ready event

$(document).ready(function() {
    ....
});

we can use shorter version:

$(function() {
    ...
});

13. Reaction to resize the browser window

Simply we handle the resize event of the window. We can thus adjust the size or appearance of the elements depending on the window size.

$(window).resize(myHandler);

function myHandler() {
    alert('Do something ...');
}

14. More?

Take a look at the pages dedicated to jQuery and JavaScript tricks, such as:

http://css-tricks.com/snippets/jquery/

I also recommend a topic on StackOverflow – a collection of interesting solutions:

http://stackoverflow.com/questions/182630/jquery-tips-and-tricks

jQuery tips – summary

The jQuery Framework gives the power for developers, especially when we know the tricks and tips.

Everything that can increase our capacity or to save time, should always be welcome.

Both comments and pings are currently closed.

6 Responses to “jQuery tips and tricks”

  1. […] jQuery tips and tricks, and an overview of interesting tricks with this excellent framework  […]

  2. You should not encourage people to write like this. it is old code you showing so this is not a good tips.

  3. DirectCode says:

    Thanks.
    There are only tips like How to do something…
    but unfortunately you’re right; I just moved some articles from OLD blog version, like this one, and there still are some old things, even after a review.
    Anyway now I try to avoid basic / old stuff, and focus on the new, fresh and modern topics.

    Best regards

  4. Sourav Basak says:

    Thanks for your valuable information. This clears the base of every developer with ease practises.

    Hope this link makes a quite effect on you:
    http://www.namasteui.com/tips-and-tricks-for-powerful-developers/


    Thanks,
    Sourav Basak [Blogger, Entrepreneur, Thinker]
    http://www.namasteui.com

  5. Sourav Basak says:

    Thanks for your valuable information. This clears the base of every developer with ease practises.

    Hope this link makes a quite effect on you:
    http://www.namasteui.com/tips-and-tricks-for-powerful-developers/


    Regards,
    Sourav Basak [Blogger, Entrepreneur, Thinker]
    http://www.namasteui.com