JQuery, the very very basics - Lesson 1
JQuery is the star among the growing list of JavaScript libraries. A few of its characteristics are light-weight, cross-browser compatibility and simplicity. A task that would take 10 lines of code with traditional JavaScript can be accomplished with JQuery in just 1 line of code. For example, if you want to dress up a table with an ID mytable with alternative color for every other row, in query, you can simple do this in JQuery. 
Belatedly and slowly, I warm up to JQuery, surprised by its simplicity and sensibilities. Yes, unlike ASP .net ajax libraries, where it feels like that I have to relearn everything and where I was hopelessly overwhelmed by new terminologies, JQuery seems to work along the logic that we have trained our brain with traditional JavaScript and css.
I write to record the series of very basic lessons I learned about JQuery (my study source is the very readable book JQuery in Action).
The magic dollar sign ($) and a chain of operations
In JQuery, the most powerful character / symbol is the dollar sign. A $() function normally returns a set of objects followed by a chain of operations. An example
$("div.test").add("p.quote").html("a little test").fadeOut();
Think it as a long sentence with punctuations. Indeed it is a chain of instructions to tell the browser to do the following:
1) Get a div with class name = test
2) Insert a paragraph with class name = quote
3) Add a little text to the paragraph
4) Operate on the DIV using a predefined method called fadeOut
So there it is, the first two basics: $() and chainable
Selectors:
1. css selectors
We dress up web pages with css stylesheets, css stylesheets dress up DOM elements by DOM hieriachies:
body, table, p, input; or by element ID, since all ids are unique; or class names.
JQuery uses the same set of css retrieval methods to single out one element or a group of elements, and normally we use a combination of them to cut the chase. For example:
$("p.note") returns all <p> elements whose class name = note
$("p#note") returns the <p> element whose id = note
$("p") returns all p elements
2. child, container, attributes selectors
To select a child or children, we use the right angle bracket (>), as in
$("p > a"), which returns all of the href link with <p> element
To select element(s) with certain attributes, we use [], as in
input[type=text], returns all text input elements whose type is text
To select a container of some other elements, we use has keyword, for example:
$("p:has(a)"), returns <p>
3. Position based selectors
JQuery allows us to select element by their relative order, as in:
$("p:first") returns the first <p> element
the predefined positions are
first, last, first-child, only-child, nth-child(n), nth-child(even), nth-child(odd)
first, last, first-child, only-child, nth-child(n), nth-child(even), nth-child(odd)
All of them are self explanatory
4. Custom Selectors
The above selector seems to have provided everything we need. However, there is more that JQuery can offer. It allows us to do custom selections using the following keyword:
animated, button, checkbox, checked, disabled, enabled, header, hidden, image, input, not(filter), parent, password, radio, reset, selected, submit, text, visible
Again, nothing fancy, plain English, right?
