//selected element if it's value equals to 0
$("select option").filter(function(){
	if($(this).val() == "0") return $(this);
}).attr('selected',true);
 
//difference between $(document).ready() and $(function(){});
//they are both same, $(function(){}); is the short way of document ready
 
//double not operators (!!) changes a value into boolean type
return !!isUTC //result is a boolean value
 
//double tilde operators (~~) used as a faster substitute for Math.floor()
return ~~(3.4) //result is 3
 
//absolute round function
function absRound(number) {
    if (number < 0) {
        return Math.ceil(number); //round upwards so -5.9 round to -5
    } else {
        return Math.floor(number); //round downwards so 5.9 round to 5
    }
}
 
//to detect the type of object
Object.prototype.toString.call(input) === '[object Array]'
Object.prototype.toString.call(input) === '[object Number]'
Object.prototype.toString.call(input) === '[object Math]'
Object.prototype.toString.call(input) === '[object Date]'
Object.prototype.toString.call(input) === '[object String]'
 
//=== vs. ==
The identity (===) operator behaves identically to the equality (==) operator except no type conversion is done, and the types must be the same to be considered equal.
The == operator will compare for equality after doing any necessary type conversions. The === operator will not do the conversion, so if two values are not the same type === will simply return false. It's this case where === will be faster, and may return a different result than ==. In all other cases performance will be the same.
 
// compare two arrays, return the number of differences
function compareArrays(array1, array2) {
    var len = Math.min(array1.length, array2.length),
        lengthDiff = Math.abs(array1.length - array2.length),
        diffs = 0,
        i;
    for (i = 0; i < len; i++) {
        if (~~array1[i] !== ~~array2[i]) {
            diffs++;
        }
    }
    return diffs + lengthDiff;
}
 
//expand-collapse text area
<table>
    <tr>
        <td><div style="height:20px;"><textarea name="box" style="width: 100px; height:20px; background-color:white; position: relative; resize:none"></textarea></div></td>
        <td><div style="height:20px;"><textarea name="box" style="width: 100px; height:20px; background-color:white; position: relative; resize:none"></textarea></div></td>
    </tr>
    <tr>
        <td><div style="height:20px;"><textarea name="box" style="width: 100px; height:20px; background-color:white; position: relative; resize:none"></textarea></div></td>
        <td><div style="height:20px;"><textarea name="box" style="width: 100px; height:20px; background-color:white; position: relative; resize:none"></textarea></div></td>        
    </tr>
</table>
 
$('textarea[name=box]').focus(function()
{
    /*to make this flexible, I'm storing the current width in an attribute*/
    $(this).attr('data-default', $(this).width());
    $(this).attr('height',$(this).height());
    $(this).animate({ width: 300,height:300}, 'slow').css("z-index",1);
    //$(this).height(300).width(300).css("z-index",1);
}).blur(function()
{
    /* lookup the original width */
    var w = $(this).attr('data-default');
    var h = $(this).attr('height');
    $(this).animate({ width: w, height:h }, 'slow').css("z-index",0);
    //$(this).height(h).width(w).css("z-index",0);
});
 
//add date picker for all date fields dynamically
$('body').on('focus','.date', function(){
	$(this).datepicker({dateFormat: "dd/mm/yy",changeMonth: true,changeYear: true});
});