• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

jQuery in Action - is jQuery an abstraction

 
Ranch Hand
Posts: 3389
Mac MySQL Database Tomcat Server
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
Raghavan Muthu
Ranch Hand
Posts: 3389
Mac MySQL Database Tomcat Server
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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
Posts: 3389
Mac MySQL Database Tomcat Server
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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.
 
Ranch Hand
Posts: 57
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Will it have cross browser compatibility when jQuery is used?
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
Author
Posts: 21
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 3389
Mac MySQL Database Tomcat Server
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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 ]
 
Don't listen to Steve. Just read this tiny ad:
a bit of art, as a gift, the permaculture playing cards
https://gardener-gift.com
reply
    Bookmark Topic Watch Topic
  • New Topic