Tech Curry..: jQuery($) Object Magic

My last post covered basics of jQuery. Taking it to another level, in this post I will be covering magic of jQuery(alias $) object which is very important one considering the usage, flexibility, simplicity of $ object .

The different ways using $ object are:

1) $(selector,[context])

2) $(html,[containing document])

3) $(html,properties)

Let me cover it one by one. We will be considering only one example for this to ease the understanding as follows:

<title>

First Jquery Example

</head>

<body>

<h2>Welcom to the world of jquery.</h2>

</div>

</div>

</body>

</html>

1) $(selector,[context])

selector: selector can be any valid string which matches to a set of elements. Selector in jQuery is simply a way to select some set of elements from DOM to have further processing on it like attaching click event changing CSS of that set of elements

For example: In the code given above, we have a button having id as 'clickButton1'. So, we can select the same with this code:

$("#clickButton1") //returns button having id as 'clickButton1'

$(".buttonClass") //returns two button having id as 'clickButton1' and 'clickButton2'

$("#clickButton1").click(function(){alert('hi')}); //apply a click event on the same button

selector is itself is a big topic to cover that can be taken in next post. For now this is just a way to select an element.

context: This is an optional parameter we pass to jQuery object to differentiate between two or more than two elements return by a jQuery object. For example:

$(".buttonClass") //returns two buttons having id as 'clickButton1' and 'clickButton2'

$(".buttonClass",'#firstDiv') // returns one button having id as 'clickButton1'

so just providing a context to it makes a lot of difference.

some other forms of $ object are like:

a) $(jQuery Object) : which makes a clone of jQuery Object we pass as parameter. Both of them refer to same object.

b) $() : returns an empty object.

2) $(html, [containing document]):

here html is a valid string containing proper tags. Using this we can add an element directly to some other element like this:

$("<input type="TextBox" id="firstText"/>").appendTo('body');

This will add text box on the fly to the end of body tag.

3) $(html, properties):

here html is a valid string having single, standalone HTML element(for example <input/>, <span/>). Standalone here means that it should not have any attribute. We can add attribute by using properties parameters like this:

$('<div/>',

{id:'newDiv',

class:'newDivClass'

}) .appendTo('body');

Here a div element is attached to body. Here we can note that {} represents an object in javascript, similar to [] which returns an object of array.

This is a brief introduction to $ object. In this I tied to cover it as simple as possible. In the next post I will covered selector in jQuery. Please provide your valuable comments to improve my understanding with the topic.

Tech Curry..

Thursday, August 26, 2010

jQuery($) Object Magic

1 comment: