Learning jQuery [Part 2]

RockerMan · 1 Learning jQuery [Part 2] Wed Aug 11, 2010 3:58 am

RockerMan

Technician

Posts : 901
Points : 388
Age : 32
Location : Georgia
Browser : Firefox

Learning jQuery [Part 2]
Learn jQuery here

OK guys, so to continue from the previous tutorial here (Click Me!)
Just one more thing before we get started: If you are reading this tutorial It would come to me that you already know basic HTML and CSS, So I am not going to give examples.

Let's have a look at what we are doing: $("a") is a jQuery selector, in this case, it selects all a elements. $ itself is an alias for the jQuery "class", therefore $() constructs a new jQuery object. The click() function we call next is a method of the jQuery object. It binds a click event to all selected elements (in the previous case, a single anchor element) and executes the provided function when the event occurs.

This is similar to the following code:

Code:: <a href="" onclick="alert('Hello world')">Link</a>

The difference is quite obvious: We don't need to write an onclick for every single element. We have a clean separation of structure (HTML) and behavior (JS), just as we separate structure and presentation by using CSS.

With this in mind, we explore selectors and events a little further.

jQuery provides two approaches to select elements. The first uses a combination of CSS and XPath selectors passed as a string to the jQuery constructor (eg. $("div > ul a")). The second uses several methods of the jQuery object. Both approaches can be combined.

To try some of these selectors, we can use the WebArtz HTML Editor

To get started, we want a list . Give it an ID of "orderedlist". In classic JavaScript, you could select it by using document.getElementById("orderedlist").
With jQuery, we do it like this:

Code:: $(document).ready(function() { $("#orderedlist").addClass("red"); });

The .addClass("red") is simpily linking to a stylesheet that is giving the list a red background.
Now lets add some more classes to the child elements of the list you have just created.

Code:: $(document).ready(function() { $("#orderedlist > li").addClass("blue"); });

This selects all child lis of the element with the id orderedlist and adds the class CSS document "blue"

OK guys, now that we have gotten a little more into it, I will close it off here and leave you to play around with it untill part 3. I hope you enjoyed this tutorial. Watch out for the thext one!

Thanks,
Mike

Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators.