JQuery, the very very basics - Lesson 3
Snail on with my learning and writing about the very very basic lessons on JQuery. Again, thanks to all of you for the kicking (ouch! yet the more the merrier), dzon-ing and reddit-ing. I am still glowing in and baffled by the attention (as little as it is. Big for me, since I am no Scott Gu) ...
JQuery, the very very basics - Lesson 2
In "modern" (DOM) web programming, web pages are made up of a hierarchy of elements. Manipulation of elements goes far beyond styling and positioning, it involves almost everything, adding / deleting content, appending and removing children elements, attaching itself to a new parent, cloning ... Everything is possible. The question is : How?
Content manipulation: html() and text()
Pretty much all JQuery commands go both ways: get and set. To access a property only, call the command without parameter; to modify, call the command with a parameter.
html() returns the innerHTML property of a element;
html(content) set the element's innerHTML to the content passed
text() returns the text content (stripped of any html markups) ;
text(content) changes the text content of the calling elements.
So say for example, we have a little html code as the following:
$('table#table1').html(); // returns everything inside the table (id=table1), including the html tags
$('table#table1').text(); // however returns only the actual content (in one big unsepearable string): test1item1
Form element values: val()
To get or set values of form elements, we use val() command (in its two-way street fashion: val() for get and val(content) for set).
A couple of especially neat things about val() command with form element.
a) Remember how we used to painstakingly enumerate through a group of radios until we found the chosen one?
Now with JQuery (with selectors and val()), we may just say:
var selected = $('input[name=selectMe]:checked').val();
b) Remember that JQuery command can always multitask, besides that it can chain up more number of commands than a chain smoker do with cigarettes?
Here is the deal with the val(values) command. It can be used to set up values for each element in selected set in one shot.
Consider the following code:
$('input').val(['red','blue','orange']);
It will check all checkboxes or radio boxes whose value matches any of the values in the array (red, blue, orange) passed to command.
Appending and inserting
JQuery is skilled in moving things around. And it uses exactly the same English words we do (except in a very very economic fashion).
append(something): stick the "something" passed to the end of a matched set;
appendTo(target): stick everything in the selected set to the end of the target;
prepend(something): stick the "something" passed to the beginning of a matched set;
prependTo(target): stick everything in the selected set to the beginning of the target;
before(something): insert the "something" before each element of the matched set
insertBefore(target): insert the whole matched set before the targeted set of elements
after(something) : insert the "something" after each element of the matched set
insertAfter(target) : insert the whole matched set after the targeted set of elements
Wrapping and removing
Like candies that need sparkling wrapping paper, sometimes we want to wrap our element(s) in some sort of wrappers too. For this, we can use wrap(wrapper) command.
$('p.note').wrap("<div class='note'>This is our notes section</div>");
Flipping the coin, we may want to remove things from a wrapper too.
remove(): removes all elements in a selected set. For example:
$('div.note').remove();
Cloning with clone()
We do cloning with clone(), then move the clone to elsewhere, chaining up with commands such as appendTo, insertBefore, before, after, etc.
$('img#cloneme').clone().appendTo('div#gallary');
Read more
