Understanding JQuery DOM Object

Here I am going to give a few words on using and manipulating Jquery DOM object. Actually, this is agreed by most of the developers that, regular expression for referencing selector of Jquery framework is the most powerful feature.To point/refer to an DOM object is pretty much easier using jquery than standard javascript.

To get the DOM object you can use either $ or JQuery. suppose the document object can be referenced by using "$(document)" or by JQuery(document). to execute an function on document load, you can use the following code
$(document).ready(FUNCTIONNAME);
or
$(document).ready(function(){
//codegoes here
});

This is actually a replacement of standard javascript code like:

window.onload = function(){
//code goes here
}

not much useful, right? You will know the real importance very soon.

Lets assume, we are going to get all div element with classname 'test' and set their border color to red. in standard javascript, you have to do something similar as follows:

var elements = document.getElementsByClassName('test');
for(var i=0;i<elements.length;i++)
{
elements[i].style.border = "#FF0000";
}

but, in jquery, you can do it by a single code snippet as follows:

$(".test").css('border','#FF0000');

interesting right?

Also, another efficiency that, to select an dom object, you can use exactly like css selector expression. Like, to get element of specific id name you can use $("#idname"), to get element of specific classname, you can use $(".classname"), to select all child div of a parent div you can use, $("div#id div") etc.

you can apply attribute/css using $("object expression").attr('propertyname','value')
and $("object expression").css('propertyname','value');

Another interesting thing is, to get a value, just use first parameter, to set, add second parameter to the function, its that easy.

Another important thing is that, javascript objects work by reference, always point to same object. On the other hand, in jquery, copy of object is created. so, if you have done var obj = $('#idname') and next time obj not working, use $(obj), to reference it again.

Another thing, before using expression you must be sure that, object for that exist, otherwise you shouldn't apply any property value to it. to become sure about it, use

if($("expression").length>0){
//set style/property
}
if there is no object and you are trying to set something, javascript will stop executing and no other code after this will be executed.

To ready more about jquery, read their online documentation