jQuery and Me
The long search is over. I finally found what i am looking for and this one is for keeps. Im obviously talking about jQuery Javascript Library or others may call it Javascript framework. Im sure im just one of the many javascript programmers out there that share the same feeling or at least. Ive tried a couple of Javascript frameworks and so far and i liked it. I’ll be unfair and biased if ill say that other libraries suck and this one is the best without even able to get a hold on any one of them. Ive tried a few and before i knew jQuery, it felt like it was really what i wanted to have. Not until i came across jQuery’s website and its documentation.I must admit, i haven’t dived deeply into the whole documentation of the library but some features as i am reading helps me conclude my decision. Mainly 3 reasons (As of the moment while i am writing this. I might update this list from time to time) .
1. Selecting of elements in jQuery is almost or equally the same with the Standard CSS Selectors + Full support of CSS 3.0 Ok so you think you know all about CSS selectors? The most common selectors are type Selectors (element) class Selectors (.className), ID Selectors (#elemID) or hierarchal combination of the two or the descendant Selector (#elemID elem.className) . But have you tried using the selectors below?
|
Selector |
Description |
|
* |
Matches any element. |
|
E |
Matches all element with tag name E. |
|
E F |
Matches all elements with tag name F that are descendents of E. |
|
E>F |
Matches all elements with tag name F that are direct children of E. |
|
E+F |
Matches all elements F immediately preceded by sibling E. |
|
E~F |
Matches all elements F preceded by any sibling E. |
|
E:has(F) |
Matches all elements with tag name E that have at least one descendent with tag name F. |
|
E.C |
Matches all elements E with class name C. Omitting E is the same as *.C. |
|
E#I |
Matches element E with id of I. Omitting E is the same as *#I. |
|
E[A] |
Matches all elements E with attribute A of any value. |
|
E[A=V] |
Matches all elements E with attribute A whose value is exactly V. |
|
E[A^=V] |
Matches all elements E with attribute A whose value begins with V. |
|
E[A$=V] |
Matches all elements E with attribute A whose value ends with V. |
|
E[A*=V] |
Matches all elements E with attribute A whose value contains V. |
To use that in jQuery is as easy as $(”E[A*=V]“) and it will return an element or array of elements. We can refine our targeting using a combinations of these selectors. Very neat and nicely done :p
2. jQuery can be extended.
With jQuery we can create custom functions that fits our needs and we can wrap those function inside jQuery as if the function is part of the library itself. So a small function wrapped around the library can also access the whole library thus after invoking these functions or small extension, it can also return elements or objects for chainability like this, Element.customFunction().LibraryMethod(); Chainability is common but custom functions wrapped inside the library and behaves like a part of the library is just awesome idea :p
3. Creating DOM objects on the Fly.
The real on the fly i must say. Ok on normal javascript (without using frameworks) we create elements like these,
function addElement() {
var parent=document.getElementById("parentDiv");
var child=document.createElement("div");
child.setAttribute("id","childDiv");
child.innerHTML="<b>Hello World</b>
parent.appendChild(child);
}
Using other framework we can do this mostly 2 lines of code. I dont want to post a sample pointing to a particular framework. Using jQuery we can do that using one line of code like this
$("<div id="childDiv"><b>Hello World</b></div>")
.insertAfter("#parentDiv");
Takes a valid markup and convert it into a fully qualified DOM object wrapped around jQuery namespace. Awesome :p
Well as of this moment im discovering jQuery but those 3 things above is enough to convince me to stick to it. Again, i stand corrected at all times so if these 3 reasons can be found on other frameworks as i wrote this, please tell me by sending in your comments.
Posted in General Javascript Programming
![[del.icio.us]](http://genusproject.com/wp-content/plugins/bookmarkify/delicious.png)
![[DotNetKicks]](http://genusproject.com/wp-content/plugins/bookmarkify/dotnetkicks.png)
![[Digg]](http://genusproject.com/wp-content/plugins/bookmarkify/digg.png)
![[Facebook]](http://genusproject.com/wp-content/plugins/bookmarkify/facebook.png)
![[Google]](http://genusproject.com/wp-content/plugins/bookmarkify/google.png)
![[MySpace]](http://genusproject.com/wp-content/plugins/bookmarkify/myspace.png)
![[Squidoo]](http://genusproject.com/wp-content/plugins/bookmarkify/squidoo.png)
![[StumbleUpon]](http://genusproject.com/wp-content/plugins/bookmarkify/stumbleupon.png)
![[Technorati]](http://genusproject.com/wp-content/plugins/bookmarkify/technorati.png)
![[Windows Live]](http://genusproject.com/wp-content/plugins/bookmarkify/windowslive.png)
![[Yahoo!]](http://genusproject.com/wp-content/plugins/bookmarkify/yahoo.png)

April 13th, 2008 at 11:46 am
Good read. The CSS selector’s cool eh? I am however trying to learn Dojo Toolkit. They seem to have a good documentation too. Have you tried that one?
April 14th, 2008 at 10:21 am
Havent tried Dojo but i will give it a try.