Efficient and Helpful JavaScript/jQuery Tips and Tricks

This free HTML JavaScript tutorial provides 45+ JavaScript/jQuery tips and tricks that help you work in JavaScript tasks better, through live HTML JavaScript example codes. List of some JavaScript tips and tricks:

- Refreshing the src of an image with jQuery?
- Check if an image is loaded or not with jQuery
- Remove selected text after mouse double click JavaScript event
- Validate an email address
- Check if an HTML control element exists
- Cancel an AJAX request
- Select all HTML checkboxes
- Selecting root element of a certain level in the document
- Searching a string in jQuery

Please go to the full post page for full detailed tips and HTML JavaScript example codes, then try some JavaScript tutorials:

- 10 Small Javascript Tricks You Should Master
- Some Basic Tips and Tricks for Speeding Up JavaScript
- 10 jQuery and JavaScript Tips and Tricks to Improve Your Code
- 5 Good and Small JavaScript Tips and Tricks

Sampled by © JavaScriptBank.com

How to refresh the src of an image with jQuery?

1.$(imageobj).attr('src', $(imageobj)

2. .attr('src') + '?' + Math.random() );

How to see if an image is loaded or not with jquery

var imgsrc = 'img/image1.png';
$('<img/>').load(function () {
    alert('image loaded');
}).error(function () {
    alert('error loading image');
}).attr('src', imgsrc);

And if a set (example : 10 images) of images are loaded

var totalimages  = 10;
var loadedimages = 0;
$("<img/>").load(function() {
    ++loadedimages;
    if(loadedimages == totalimages){
        //All 10 images are loaded
    }
});

How to remove selected text after mouse double click event

clearSelection      : function () {
    if(document.selection && document.selection.empty) {
        document.selection.empty();
    } else if(window.getSelection) {
        var sel = window.getSelection();
        sel.removeAllRanges();
    }
}
$(element).bind('dblclick',function(event){
    //do something
    clearSelection();
});

Validate email address:

var email = '[email protected]'
if(!(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i.test(email)))
alert('Invalid Email');

How to order a <ul> element using jQuery

<ul>
<li>cloud</li>
<li>sun</li>
<li>rain</li>
<li>snow</li>
</ul
 
var items = $('.to_order li').get();
items.sort(function(a,b){
    var keyA = $(a).text();
    var keyB = $(b).text();
 
    if (keyA < keyB) return -1;
    if (keyA > keyB) return 1;
    return 0;
});
var ul = $('.to_order');
$.each(items, function(i, li){
    ul.append(li);
});

Passing parameters to a function called with setTimeout

1.timeout = setTimeout(function(){myFunction(param)},time);

Disable right mouse click

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

Fade out an image, and fade in another one (replacing the previous one)

$('imageelement').fadeOut(function() {
    $(this).load(function() {
        $(this).fadeIn();
    }).attr('src', AnotherSource);
});

Write your own selectors

//extend the jQuery functionality
$.extend($.expr[':'], {
 
    //name of your special selector
    moreThanAThousand : function (a){
        //Matching element
        return parseInt($(a).html()) > 1000;
    }
});
 
$(document).ready(function() {
    $('td:moreThanAThousand').css('background-color', '#ff0000');
});

Run a function 5 times with intervals of 20 seconds

var count = 0;
function myFunction() {
    count++;
    if(count > 5) clearInterval(timeout);
    //do something
}
var timeout = setInterval(myFunction, 20000);

Check if an element exists

if ($("#elementid").length) {
    //it does!
}

Cancel an ajax request

var req = $.ajax({
type:     "POST",
url:     "someurl",
data:     "id=1",
success: function(){
//something
}
});
//Cancel the Ajax Request
req.abort()

Check if cookies are enabled

$(document).ready(function() {
    var dt = new Date();
    dt.setSeconds(dt.getSeconds() + 60);
    document.cookie = "cookietest=1; expires=" + dt.toGMTString();
    var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1;
    if(!cookiesEnabled){
        //cookies are not enabled
    }
});

Toggle all checkboxes

var tog = false; // or true if they are checked on load
$('a').click(function() {
    $("input[type=checkbox]").attr("checked",!tog);
    tog = !tog;
});

Get the index of an element

$("ul > li").click(function () {
    var index = $(this).prevAll().length;
});

Validate date of birth

$("#lda-form").submit(function(){
    var day = $("#day").val();
    var month = $("#month").val();
    var year = $("#year").val();
    var age = 18;
    var mydate = new Date();
    mydate.setFullYear(year, month-1, day);
 
    var currdate = new Date();
    currdate.setFullYear(currdate.getFullYear() - age);
    if ((currdate - mydate) < 0){
        alert("Sorry, only persons over the age of " + age + " may enter this site");
        return false;
    }
    return true;
});

Test if an element is visible

if($(element).is(":visible")) {
    //The element is Visible
}

Counting child elements

<div id="foo">
<div id="bar"></div>
<div id="baz">
<div id="biz">
</div>
<span><span>
</div>
 
//jQuery code to count child elements
$("#foo > div").length

Center an element on the screen

jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
    return this;
}
 
//Use the above function as:
$(element).center();

Moving options from list A to list B

$().ready(function() {
    $('#add').click(function() {
        !$('#select1 option:selected').appendTo('#select2');
    });
    $('#remove').click(function() {
        !$('#select2 option:selected').appendTo('#select1');
    });
});

Select all checkboxes

$(document).ready(function(){
    $("#checkboxall").change(function(){
        var checked_status = this.checked;
        $("input[name=checkall]").attr("checked", checked_status);
    });
 
});

Get the current URL

$(document).ready(function() {
    var pathname = window.location.pathname;
});

Check if and which key was pressed

$(function() {
    $(document).keypress(function(e){
        switch(e.which){
        // "ENTER"
        case 13:
        alert('enter pressed');
        break;
 
        // "s"
        case 115:
        alert('s pressed');
        break;
 
        (...)
 
        }
    });
 
});

How to hide all children div except a specific one with jQuery?

$('#target div:not(#exclude)').hide();
//or
$('#target').children().filter(':not(#exclude)').hide();

Detecting when a div's height changes using jQuery

$('element').bind('resize', function(){
alert( 'Height changed to' + $(this).height() );
}

Delete all table rows except first

1.$('someTableSelector').find('tr:gt(0)').remove();

Selecting root element of a certain level in the document

1 level:
$('*:not(* *)');
2 level:
$('*:not(* *)').find('> *');
3 level:
$('*:not(* *)').find('> * > *');

Searching a string in jQuery

1.var foundin = $('*:contains("some string bla bla")');

Get the distance scrolled from top

1.alert($(document).scrollTop());

Select all elements except the ones with a given class

1.$('* :not(.someclass)')

Add a row to a table

1.$('#myTable tr:last').after('<tr>...</tr>');

How to convert decimal to hexadecimal?

num = num.toString(16);
reverse process:
num = parseInt(num, 16);

Filtering By More Than One Attribute in JQuery

1.var elements = $('#someid input[type=sometype][value=somevalue]').get();

How to expire a cookie in x minutes

var date = new Date();
date.setTime(date.getTime() + (x * 60 * 1000));
$.cookie('example', 'foo', { expires: date });

Selecting the first x items with jQuery

example: first 10 anchors
$('a').slice(0,10);
//or
$('a:lt(10)');

Working with a select element

//Get the value of a selected option
$('selectElement').val();
 
//Get the text of a selected option
$('#selectElementId :selected').text();
 
//Remove an option (e.g. id=1)
$("#selectElementId option[value='1']").remove();

How to get client ip address with jQuery

$.getJSON("http://jsonip.appspot.com?callback=?",function(data){
    alert( "Your ip: " + data.ip);
});

How to parse XML with jQuery

file.xml:

<?xml version="1.0" ?>
<result>
    <item>
        <id>1</id>
        <title>title1</title>
        <description>desc1</description>
    </item>
    <item>
        <id>2</id>
        <title>title2</title>
        <description>desc2</description>
    </item>
    <!-- ... -->
</result>

$.get('file.xml',{},function(data){
    $('item',data).each(function(){
        var $this       = $(this);
        var id             = $this.find('id').text();
        var title         = $this.find('title').text();
        var description = $this.find('description').text();
        //do something ...
    });
});

How to get the number in the ids

<div id="sites">
    <a id="site_1" href="http://siteA.com">siteA</a>
    <a id="site_2" href="http://siteB.com">siteB</a>
    <a id="site_3" href="http://siteB.com">siteC</a>
    ...
</div>

you need to get 1 from site_1, 2 from site_2 ...

$("#sites a").click(function(){
    var $this     = $(this);
    var nmb     = $this.attr('id').match(/site_(\d+)/)[1];
    ...
});

How to transform a number like 12343778 into 12.343.778

1.<div id="result">12343778</div>

var delimiter = '.';
$('#result').html()
            .toString()
            .replace(new RegExp("(^\\d{"+($this.html().toString().length%3||-1)+"})(?=\\d{3})"),"$1" + delimiter)
            .replace(/(\d{3})(?=\d)/g,"$1" + delimiter);

Count number of textarea lines

var text = $("#textareaId").val();
var lines = text.split(/\r|\r\n|\n/);
alert(lines.length);

Logging to the firebug console

jQuery.fn.log = function (msg) {
    console.log("%s: %o", msg, this);
    return this;
};
$('#some_div').find('li.source > input:checkbox').log("sources to uncheck").removeAttr("checked");

Find X/Y of an HTML element with Javascript

// Based on: http://www.quirksmode.org/js/findpos.html
var getCumulativeOffset = function (obj) {
    var left, top;
    left = top = 0;
    if (obj.offsetParent) {
        do {
            left += obj.offsetLeft;
            top  += obj.offsetTop;
        } while (obj = obj.offsetParent);
    }
    return {
        x : left,
        y : top
    };
};

Validate Credit Card

function isCreditCard( CC ){
    if (CC.length > 19)
        return (false);
 
    sum = 0; mul = 1; l = CC.length;
    for (i = 0; i < l; i++){
        digit = CC.substring(l-i-1,l-i);
        tproduct = parseInt(digit ,10)*mul;
        if (tproduct >= 10)
            sum += (tproduct % 10) + 1;
        else
            sum += tproduct;
        if (mul == 1)
            mul++;
        else
            mul-;
    }
    if ((sum % 10) == 0)
        return (true);
    else
        return (false);
}

Distinguish left and right mouse click

$("#element").live('click', function(e) {
    if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {
        alert("Left Button");
    }
    else if(e.button == 2)
        alert("Right Button");
});

How to get the native image size

var img = $('#imageid');
var theImage = new Image();
theImage.src = img.attr("src");
alert("Width: " + theImage.width);
alert("Height: " + theImage.height);

Language

Recent articles
Insights for Advanced Zooming and Panning in JavaScript Charts
How to open a car sharing service
Vue developer as a vital part of every software team
Vue.js developers: hire them, use them and get ahead of the competition
3 Reasons Why Java is so Popular
Migrate to Angular: why and how you should do it
The Possible Working Methods of Python Ideology
JavaScript Research Paper: 6 Writing Tips to Craft a Masterpiece
Learning How to Make Use of New Marketing Trends
5 Important Elements of an E-commerce Website

Top view articles
Adding JavaScript to WordPress Effectively with JavaScript Localization feature
Top 10 Beautiful Christmas Countdown Timers
Top 10 Best JavaScript eBooks that Beginners should Learn
65 Free JavaScript Photo Gallery Solutions
16 Free Code Syntax Highlighters by Javascript For Better Programming
Best Free Linux Web Programming Editors
Top 50 Most Addictive and Popular Facebook mini games
More 30 Excellent JavaScript/AJAX based Photo Galleries to Boost your Sites
Top 10 Free Web Chat box Plug-ins and Add-ons
The Ultimate JavaScript Tutorial in Web Design