This week's book giveaway is in the OCMJEA forum.
We're giving away four copies of OCM Java EE 6 Enterprise Architect Exam Guide and have Paul Allen & Joseph Bambara on-line!
See this thread for details.
The moose likes HTML, CSS and JavaScript and the fly likes jQuery in Action - is jQuery an abstraction Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of OCM Java EE 6 Enterprise Architect Exam Guide this week in the OCMJEA forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "jQuery in Action - is jQuery an abstraction" Watch "jQuery in Action - is jQuery an abstraction" New topic
Author

jQuery in Action - is jQuery an abstraction

Raghavan Muthu
Ranch Hand

Joined: Apr 20, 2006
Posts: 3344

Hi Bear & Katz,

I have a little experience in the UI side. May be it may sound really a layman question.

As such what i could see from the Preface and sample chapter what you gave is, jQuery looks like an abstraction to what is happening behind the scenes in detail and lets the user deal with the simple tags.

On the otherway it looks like how EL (Expression Language) is for JSPs, jQuery is for JavaScripts!

Is that what really jQuery is?

Thank you.


Everything has got its own deadline including one's EGO!
[CodeBarn] [Java Concepts-easily] [Corey's articles] [SCJP-SUN] [Servlet Examples] [Java Beginners FAQ] [Sun-Java Tutorials] [Java Coding Guidelines]
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61106
    
  66

jQuery is simply a new way of looking at JavaScript libraries. When writing JavaScript to manipulate the DOM, a lot of what you do first involves finding references to DOM elements that you want to operate upon. Libraries like Prototype added the $() function to make selecting by id easy, but sometimes you want much more complex selection rules. Like "find me all even children of the second table in the document with a class of xyz".

jQuery makes such selections easy. It collects references into a "wrapped set" that you then operate upon with the jQuery methods. The selector syntax is easy to learn because it's based on standard CSS notation.

jQuery is a non-invasive library. Unlike an invasive library such as Prototype which modifies JavaScript object definitions in order to add extended functionality, jQuery uses the wrapped set to wrap the functionality around the element without making any changes to the object definitions.

A good example is shown in the free chapter:


This statement creates a wrapped set of all even <tr> elements in all <table> elements, and then calls the addClass() method to add the class name "striped" to all of them.

Note that the addClass() method is not added to the elements (a la Prototype) but is a method of the wrapped set object that jQuery creates.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Raghavan Muthu
Ranch Hand

Joined: Apr 20, 2006
Posts: 3344

Thank you Bear for the detailed explanation.

This wrapped set looks somewhat interesting and new to me .

But still is it like a JSP EL for JavaScript functionalities in the developer's point of view? Or my way of comparison does not stand valid?
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61106
    
  66

Originally posted by Raghavan Muthu:
But still is it like a JSP EL for JavaScript functionalities in the developer's point of view? Or my way of comparison does not stand valid?

Only at a very abstract level. Sort of.

The EL is a mechanism in JSP to address scoped variables and their properties in order to fetch their values. In jQuery, the selectors are a means to address the DOM elements that are to be operated upon using the jQuery methods.

While both are a means to use a succinct notation to choose something, the notations and purpose are rather different.

Personally, I would not think of jQuery selectors as "EL for JavaScript".
Raghavan Muthu
Ranch Hand

Joined: Apr 20, 2006
Posts: 3344

Originally posted by Bear Bibeault:

Only at a very abstract level. Sort of.



Thank you Bear.


Personally, I would not think of jQuery selectors as "EL for JavaScript".


That's true. Perhaps, i might also be inclined when i get to know about the internals of jQuery!

Thank you again for the clarifications. Now i have got an idea about jQuery and its working methodology.
sanker san
Ranch Hand

Joined: Dec 17, 2004
Posts: 56
Will it have cross browser compatibility when jQuery is used?
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61106
    
  66

sanker san, it's best to start your own questions in new topics.

Originally posted by sanker san:
Will it have cross browser compatibility when jQuery is used?


Absolutely. jQuery works in all the major browsers. The screen-shots in the book were purposefully taken using many different browsers: IE, Firefox, Safari, Camino, Opera and OmniWeb to name a few.

Moreover, jQuery allows you to write cross-browser code by providing a common API for areas that have traditionally been a pain in the neck for page authors because of browser incompatibilities: such as Ajax, CSS manipulation and especially event handling.
Yehuda Katz
Author
Greenhorn

Joined: Jan 14, 2008
Posts: 21
As Bear said, the event handling API is really the crown-jewel of jQuery for cross-browser compatibility. Anyone who's tried doing cross-browser event handling knows that besides for the event object being in different places in IE and non-IE browsers, the actual mechanism for registering events is frustratingly painful.

Then, once the Event object comes back, it is different in IE, Firefox, Safari, and Opera. Literally different in each browser.

The jQuery event model merges all of the mechanisms for registering events, blocking propagation and bubbling, and normalizes the event object. For instance, the event.which property on mouseclicks will allow you to determine which button was pressed without wading through browser-sniffing insanity. The event.which property on key events allows you to get the correct keyCode, even for arrow keys and the like.

And blocking propagation and preventing defaults is as simple as returning false from an event function, in all browsers.

There's a ton more in the online documentation and in the book (</shameless plug> , but this should give you a sense of just how much work goes into jQuery to give you a seamless cross-browser experience.
Raghavan Muthu
Ranch Hand

Joined: Apr 20, 2006
Posts: 3344

Originally posted by Yehuda Katz:
...
The jQuery event model merges all of the mechanisms for registering events, blocking propagation and bubbling, and normalizes the event object. For instance, the event.which property on mouseclicks will allow you to determine which button was pressed without wading through browser-sniffing insanity. The event.which property on key events allows you to get the correct keyCode, even for arrow keys and the like.

And blocking propagation and preventing defaults is as simple as returning false from an event function, in all browsers.




This sounds really a great feature of it Katz!
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61106
    
  66

Originally posted by Yehuda Katz:
... and in the book (</shameless plug>

No shamelessness about it! The whole purpose of this promo is to plug the book!

The event handling chapter goes into great detail regarding how painful it is handling events in a cross-browser fashion -- especially when you get into the more advanced event models -- and how jQuery gives you all of the benefits of advanced event handling without all the usual pain!

Originally posted by Raghavan Muthu:
This sounds really a great feature of it

Indeed! It'd be hard to choose any one "best feature" of jQuery, but the simplified (yet powerful) event handling model is a slam-dunk!
[ January 15, 2008: Message edited by: Bear Bibeault ]
 
With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.
 
subject: jQuery in Action - is jQuery an abstraction