JQuery Basics - Understanding the insight -4

In this article we will go in the details of jquery selectors. JQuery provides $() or jQuery() to select any element. we can pass any selector in it and it will return a jquery object. If there is nothing available on the DOM with matching selector then an empty jquery object is returned.
$() is same as jQuery().

Context in selector -
When we pass any selector in the $() it start looking for the match starting from the root of DOM, but its always possible to put a context in for the search. For example -

<p> This para is outside DIV</p>
<div id="root">
    <div id="child1" class="div1">
        <p>Hi this is 1st para.</p>
        <p>Hi this is 2nd para.</p>
        <p>Hi this is 3rd para.</p>
    </div>  
</div>

In the above example say if we want to have a functionality where if i click on any div element, every paragraph in it should get background as red. If i use the following script -

$(document).ready(function(){
    jQuery("div").click(function(){
        $('p').css("background","blue");
    });
});
It will change the background of every paragraph, but its possible to limit the scope of click only to those paragraphs which are within div element like this -

$(document).ready(function(){
    jQuery("div").click(function(){
        $('p',$(this)).css("background","blue");
    });
});

what will happend in the following scenario -
<p> This para is outside DIV</p>

<div class="root">
    <div id="child1" class="div1">
        <p>Hi this is 1st para.</p>
        <p>Hi this is 2nd para.</p>
        <p>Hi this is 3rd para.</p>
    </div>
    <div id="child2" class="div2">
        <p id="child2Para1">This is another paragraph1 .</p>
        <p id="child2Para2">This is another paragraph2 .</p>
        <p id="child2Para3">This is another paragraph3 .</p>
    </div>
</div>

Now if we execute following script -$('p',$(this)).css("background","blue"); 1st it will change the background of the div we clicked and then it will bubble up to root div and will change the background of every paragraph(including those available in other child as well) in it. If you want to verify it, attach a debugger and check the value of $(this)[0], first run will have its value as the child div and then it will be root div.

The same functionality can also be achieved in the following way -

$(this).find('p').css("background","blue");
putting context in $() does the same thing that find() does. Infect it internally calls find method to do the same thing, hence directly using find() will be faster then using context in selector.

Working With Plain JavaScript Objects-
If we pass any javascript object in $() then it converts it into a jquery object(which is an array).  These are the methods available in jquery object -.data(),.prop(),.bind(), .unbind(), .trigger() and .triggerHandler().

    var localObj = {"key1":"value1", "key2":"value2"};
    var $jqueryObj = $(localObj); // its jquery object
    alert($jqueryObj.prop("key1")); //alerts value1,
    $jqueryObj.prop('key3','value3'); // it adds new property to the object.
.prop() helps us to add new value in the object, but it doesn't mean that original object will also get the new value, that is because once we pass javascript object in $() it creates a copy of it and wraps it into new jquery object.