JQuery, the very very basics - Lesson 1

Published Saturday, September 13, 2008 12:33 AM

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
 
by xxxd
Filed under:

Comments

# DotNetKicks.com said on Friday, September 12, 2008 4:44 PM

You've been kicked (a good thing) - Trackback from DotNetKicks.com

# 2008 September 14 - Links for today « My (almost) Daily Links said on Sunday, September 14, 2008 6:44 AM

Pingback from  2008 September 14 - Links for today « My (almost) Daily Links

# Code Monkey Labs said on Sunday, September 14, 2008 11:03 PM

General Comparing .NET IoC Frameworks Part 1 : Andrey Shchekin takes a look at 6 of the most popular IoC frameworks available for .NET. Comparing .NET IoC Frameworks Part 2 : The continuation of Andrey Shchekin's IoC shootout. High Maintenance Code :

# Programmatically Speaking ... said on Wednesday, September 17, 2008 11:05 PM

Continue on the series of lessons I learned about some of the very basics of JQuery. Thanks to all of

# Lonely8 » Blog Archive » JQuery, the very very basics - Lesson 2 said on Thursday, October 16, 2008 7:44 AM

Pingback from  Lonely8  » Blog Archive   » JQuery, the very very basics - Lesson 2

# Code Monkey Labs said on Sunday, February 22, 2009 10:46 PM

General Some IoC Container Guidelines : Jimmy Bogard presents some good guidelines for working with your IoC container of choice. Lambdas – Know Your Closures : Jason Olson exposes a tricky behavior of lambdas that can bite even folks that consider

# office cubicle tile shower accessories shelves soap holders ect said on Monday, November 03, 2014 4:41 AM

JQuery, the very very basics - Lesson 1 - Programmatically Speaking ...

# unique fun office cubicle accessories said on Friday, November 07, 2014 6:27 AM

JQuery, the very very basics - Lesson 1 - Programmatically Speaking ...

# office cubicle accessories stand up desks said on Friday, November 07, 2014 11:44 PM

JQuery, the very very basics - Lesson 1 - Programmatically Speaking ...

This site

This Blog

Syndication

Sponsors

  • MaximumASP