Header Ads

jQuery Tips and Tricks

15-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;
});

No comments:


Powered by Blogger.