One of my colleague once asked me to teach jQuery in a very short time. He was very good in CSS. I gave him a 30 mins session that he found very useful later. I hope this will help some one else also.
Concept 1
What CSS does? Simply select html elements and apply styles to them. jQuery acts in the same way. You can select dom object in a similar fashion. Assume we have a html page like this
<html>
<head>
<title>jQuery Tips</title>
</head>
<body>
<div>Content for Div1 goes here</div>
<div id="div2">Content for Div2 with an id goes here</div>
<div>Content for Div3 with a class goes here</div>
<div><span>This is a div with a child of a parent div</span></div>
</body>
</html>
Before dive into code you need to include jQuery library. Add the line below into the head tag.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
Using Google CDN, we just add the library into our code and the magical $() function is now available within our javascript.
Now as we know css, if we want the div with id should have red background color we should hook the div using css ID selector and apply the style as we want
<style>
#div2{ /*ID selector */
background-color:red;
}
</style>
As you know how to select an element with ID in css, you actually already know how to select an element as jQuery Object. See the code below:
<script>
$("#div2"); // you just hook the element
console.log($("#div2")); /* If you browse on firefox with firebug
installed, you can clearly see that this code writes "Object object"
cleanly indicating that this is an Object, more specifically thjis is a
jQuery object */
//now play around with this
$("#div2").css('background-color','green');
</script>
See! the same way, you can select using class selector $(‘.div3′) or tag selector $(‘div’)
The bottom line is: You can use almost any selector pattern used in css2 and css3 engine. Try it out!
Concept 2
Next awesome and beautiful thing of jQuery ( at least to me ) is the use of object literals as its function arguments.
Here is a short note on Object literal:
<script>
var car = {}; // an object, named 'car' is defined which has no property or method
console.log(car) // clearly found that this is an object of type Object, 'Object object'
/* below we have defined another object named 'anotherCar' that has
property 'door', 'wheel' and a method 'drive' */
var anotherCar = {
door:4,
wheel:4,
drive:function(){
//function body
}
}
</script>
The way of defining object in javascript is titled Object literal. How this is so beautiful in jQuery?
In jQuery, if a method takes argument, it takes several ways. To demonstrate this, think we want to have following look to our div with the id ‘div2′
- Yellow background
- Bold font
- Green Text
To accomplish this using jQuery we can write:
<script>
$('#div2').css('background-color','yellow');
$('#div2').css('font-weight','bold');
$('#div2').css('color','green');
</script>
Or, as jQuery uses Object chaining design pattern same thing can be accomplished this way
<script>
$('#div2')
.css('background-color','yellow')
.css('font-weight','bold')
.css('color','green');
</script>
Or a more handy way ( Here comes the role of Object literal ) , you first can define a object literal of the properties you need like
<script>
var cssAttr = {
background:'yellow',
fontWeight:'bold',
color:'green'
}
</script>
And then simply pass this object to the function as its argument
<script>
var cssAttr = {
background:'yellow',
fontWeight:'bold',
color:'green'
}
$('#div2').css(cssAttr);
</script>
Or, the less readable but more interesting ( for jQuery only ) way ( reduce line number in your code)
<script>
$('#div2').css({background:'yellow',fontWeight:'bold',color:'green'});
</script>
Refreshing ! Isn’t it?
Also never never forget to bookmark http://www.visualjquery.com/