JQuery Basics- Understand the insight -1

Lets start understanding basics of JQuery. The syntax if JQuery can be found on its home page or in anyother book, but here we will understand how those APIs are working on top of the JavaScript API. JQuery is built upon JavaScript only. IT wraps the javascript functions in its own wrapper and provide user a sophisticated way of using javascript. Lets start understanding the APIs and how those are different from JavaScript.

$(document).ready Vs window.onload -
There difference between two functions that is the $(document).ready is very much specific to JQuery but the window.onload is JavaScript specific. moreover window.onload waits until all the resources have been loaded, whereas the $(document).ready waits until the DOM is loaded, it wont wait for other resources to load. Here is the code snippet which shows how to use this API -

    $(document).ready(function(){
        alert("Jquery Ready");
    });
    window.onload = windowLoad;
    function windowLoad(){
        alert("Window loaded");
    }
In order to see the difference between these 2, try to load a heavy image and check which event get fired first.

$(this) Vs this -
when we wrap this in the $()then it get converted into JQuery object. Using this we can execute the jquery methods on this object. Internally whenever we put any object inside $(), JQuery converts it into an array, and if we know there is just a single object in it, then we can directly access it using indexer, which means -
$(this)[0] == this will return true.

I ll consider following HTML for all preceding examples -

<div id="root">
    <div id="child1">
        <p>Hi this is para.</p>
    </div>
    <div id="child2">
        <p id="child2Para">This is another paragraph.</p>
    </div>
    <div class="EmptyDiv">
        Empty Div
    </div>
</div>

JQuery Selectors- $() allows you to select element and work on them. Internally its calls different JavaScript APIs like getElementById, ByName etc. to fetch the actual element. But all that dirty code is hidden from user and JQuery have provided really an awesome wrapper to us.
Here are few examples of different kind of selectors available. There are many more ways to select elements in JQuery, but here very basic tricks are covered-
All selectors - "*"
Find every element (including head, body, etc) in the document.
//All selector
$("*").css("background","yellow"); // sets background of all elements to yellow
//ID selection
$("#child2").css("border","5px solid"); // sets the border of element with id child2. It is equivalent to document.getElementById method in JavaScript.
//Class selection
$(".EmptyDiv").css("border","5px solid blue"); // sets the border of (all the)element(s) with class EmptyDiv.
//Element selection
$("p").css("background","blue"); // Sets the background for all paragraphs
//Multiple selection
$("#child1, .EmptyDiv").css("background","green"); // selects multiple element/class/Ids etc. to be worked on
//Hierarchy selection
$("div p").css("border","2px solid red"); // sets border of all paragraph inside every div.
$("#child2 p").css("background","orange"); // Sets background of paragraph inside element with Id child2

width() Vs css('width') -
In JQuery you can access width/height of any element in 2 ways -
    alert($("#child1").width()); // number
    alert($("#child1").css('width')); // number px
The only difference is the return type. width() function returns the width as number, which can be used in any other manupulation if required, whereas the .css('width') returns the width with px as unit in single string, which can be used for further assignment but not in any mathematical manupulations.

HTML() vs innerHtml() -
JQuery Html() method can be used to get any html content of any element(can be selected by jquery selectors).This method internally calls innerHtml javascript function. It is safe to call html() rather then innerhtml(), because if you are calling html() on an element which does not exist, this function will return you undefined object, but the innerhtml will thrown a javascript error. In other words, JQuery have wrapped innerHtml with html() function with proper error handling.