jQuery Tips and Tricks

1.Short version of document.ready

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

2.Short version of function

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

3.Resize the browser window

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

4.Determine the size of document

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

5.Checking if checkbox is checked

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

6.Checking an attribute

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

7.checking whether an element exists

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

8.checking if an element is visible

Is visible:
$("#myElementID").is(":visible");
Is hidden:
$('#myElementID').is(':hidden')

9.Number of matching element

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

10.Scroll the page to the selected item

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

11.Substitution of one element to another

$("#oldID").replaceWith("New element ..."); 

12.Finding an element by CSS class

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

13.Finding an element by attribute

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

14.“Sticking” actions to the HTML elements

HTML:
PREV 1 2 3 4 5 NEXT
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;
});

15. Blocking the right mouse button in jQuery

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