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:
<html><head>
<title>
First Jquery Example
<title><script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<h2>Welcom to the world of jquery.</h2>
<div id="firstDiv">
<input type="button" id="clickMeButton1" value="
</div>
<div id="secondDiv">
<input type="button" id="clickMeButton2" value="
</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.
