JQUERY, WRITE LESS… DO MORE

Afnan Waheed Alhindi
Information Technology Department
King Saud University

ABSTRACT
Many programmers do not need to spend time in writing a long code. From this problem the libraries were  
created. JavaScript has many libraries that make the programming fun. They achieve this goal by taking the  
code short, smart, and understandable. This paper talks about JavaScript libraries in general and it will focus  
in jQuery library.

Keywords
JavaScript library, jQuery.

1.INTRODUCTION
JavaScript libraries were produced to give programmer the ability to write the code in an easy way, and get 
more powerful results. When using these libraries, the programmer only have to know the name of the 
function and its job, he do not need to learn how it is implemented. Each of these libraries has their Owen 
features that make them powerful. One of these libraries is called jQuery, which is the subject of this paper. 
JQuery has many features that make them usage in different web sites.
The structure of this paper is as follows: section 2 gives overview about JavaScript libraries, and why we use 
them, also, it provides a comparison between some of the popular JavaScript libraries. Section 3 illustrate 
jQuery definition, feature and how can we use it with other library. Section 4 gives clear example of using 
jQuery with HTML file, and its explanation.   

2. JavaScript library
2.1 JavaScript library definition
''A JavaScript library is a library of pre­written JavaScript controls which allow for easier development of 
JavaScript­based applications, especially for AJAX and other web­centric technologies.''[9]
There are many libraries like: jQuery, Dojo, Prototype, Yahoo UI, and Mootools. These libraries are browser 
only and general purpose library .The libraries can be divide as we see in Table 1.

Open Source Commercial
Client/Server AjaxCFC. Atlas.
Qcodo. Bachbase for Struts.
Browser Only Prototype, jQuery, Yahoo UI,  Backbase.
Dojo, Mootools. SmartClient.
  

http://www.slideshare.net/jeresig/javascript­library­overview­presentation 

2.2 Why use JavaScript library
We can use JavaScript library for:
•  Making JavaScript simple by taking out all unnecessary code. 
•  Making the job done fast.
•  Simplifies cross­browser support.

Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made  
2.3 Comparison of some JavaScript framework
or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. To copy otherwise, to republish, to 
post on servers or to redistribute to lists, requires prior specific permission.
In Figure 1, we see that 50% from 1500 voter use jQuery library, it means that jQuery provide a very powerful 
The First Mini­Conference in Web Technologies and Trends (WTT)
and smart code for programmer.
© 2009 Information Technology Department, CCIS, King Saud University, Riyadh, Saudi Arabia

http://css­tricks.com/poll­results­what­javascript­library­do­you­use/#1

Here some comparison between features of (jQuery, Yahoo UI, Dojo, prototype, mootools). (See Table 2).
 Dojo jQuery MooTools Prototype Yahoo UI
Drag and Drop Yes Yes Yes Yes Yes
Simple visual  Yes Yes Yes Yes Yes
effects
Animation/ Yes Yes Yes Yes Yes
advanced visual 
effects
Event Handling Yes Yes Yes Yes Yes
Developer tools Yes Yes Yes Yes Yes
XMLHTTPRequest Yes Yes Yes Yes Yes
data 
retrieval(AJAX)
Accessibility Yes Yes ­ ­ Yes
File Size 27 15 19 20 30
Browser support IE 6+,  IE 6+,  IE 6+,  IE 6+,  IE 6+, 
FireFox  FireFox 2+ ,  FireFox 1.5+ ,  FireFox 2+  FireFox 2 , 
1.5+  Safari  Safari 2+,  Safari 2+,  , Safari 2+,  Safari 3, 
3, Opera  Opera 9+ Opera 9+ Opera  Opera 9+
9+
http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks  9.25+

The libraries do not merge because it is really hard to have a unified backend, every library fixes different 
problems and a combined library would be very big.

3. JQUERY
3.1 jQuery overview
'' JQuery is a lightweight JavaScript library that emphasize interaction between JavaScript and HTML'' [9]. It 
is created by John Resig in January 2006, it has 1/4 million visitor per month. It consists of 26 classes and 
4621 lines of code. When you write JavaScript code, you usually have to spend time dealing with browser 
and operating system incompatibility, but jQuery handles this for you. It is compatible with: IE 6+, Firefox 2+, 
Safari 2.0+, and Opera 9+. JQuery implemented in Java as plug­in to the Eclipse platform. It supports 
keyboard, screen reader accessible, and it is a grant from Mozila Foundation to implement ARIA (Accessible 
Rich Internet Applications).
JQuery makes JavaScript very simple by taking out all unnecessary code, and leaving them short, smart and 
understandable. Here is the brief example comparing between the JavaScript code with and without using 
jQuey. (Without using jQuery) Document.getElementById (''id''). (with jQuery) $(#''id'').

3.2 Who is using jQuery
There are a lot of web sites using jQuery like: Google, Dell, Microsoft, Amazon, Digg, Wordpress, Mozila, and 
Bank of America …..Etc.
Nokia and Microsoft will provide jQuery as a core piece of their platform for developers to build with.

3.3 jQuery features
JQuery has a lot of feature that make the code very simple and powerful [1]
1­ DOM traversal and modification: when you want to traverse Document Object Model (DOM) tree, you 
need to write a bulk of code and put it in a specific location in HTML file. But, jQuery offers official 
way to retrieve specific element that is to be manipulated. For Example, $('th').parent (); //this line 
mean select the parent of element 'th'.
2­ Effects and animation: jQuery facilitates this by providing an array of effect such as fade and wipes.
          If you need super fancy effect for animation, drag and drop, and super smooth animation, then you 
well probably use another library to enhance the effects.
3­ Event: jQuery provide a good way to deal with a wide type of events such as a user clicking on a link, 
without need to change the HTML code itself with event handler. For example: $('a').click (function 
(ev) {//your own code}); // this line means when clicking on a link, execute this code.
4­ Ajax: jQuery support Asynchronous JavaScript and XML (Ajax) that mean retrieve information from 
server without refreshing page. For example: $('#some­div').load ('web2.html') // this line means load 
''web2.html'' in div with id=''some­div''.
5­ CSS manipulation: The jQuery selector is CSS Compliance, that make any designer that already 
have knowledge about CSS is able to learn jQuery easily. For example: $(''#some­id'') // this line 
mean select an element with id=''some­id''. Also, We can use custom selector ,For Example: 
:checkbox:checked:enabled // this line mean select checkboxes that are enabled and checked
6­ Chaining: it is a magic feature in jQuery. Every method within jQuery returns the query object itself, 
allowing you to 'chain' upon it. For example,
            $('td:contains("Web")')//get every cell containing "Web"
           .parent () //get its parent
           .find ('td:eq(1)') //find inside the parent the 2 nd cell
 Each of those individual methods (contains, parent, and find) return the jQuery object, allowing you 
to continue applying methods to the current set of elements.
7- Plugins: jQuery offers a mechanism for adding in methods and functionality, called plugins.

3.4 Using jQuery with other libraries
In jQuery code, '$' means shortcut for 'jQuery'. When you use more than one JavaScript library in HTML file. 
You have to prevent conflict with '$' function, you can do one of these solutions: [6]
1. Calling jQuery.noConflict() at any place after all library loaded. In this way you can use 'jQuery' 
instead of '$'.
2. Declaring variable of any name var $q = jQuery.noConflict() . In this way you can use '$q' instead of 
'$'.
3. If you want to still use $ , you can use like this code
jQuery.noConflict()
       jQuery (document).ready(function($){
      $("div").hide () })
      This is the best solution for most of your code. 
4. if you load jQuery before other library , you can use 'jQuery' instead of '$' without calling 
jQuery.noConflict().

3.5 jQuery UI
''jQuery UI provides abstractions for low­level interaction and high­level, themeable widgets, built on top of the 
jQuery JavaScript Library, that you can use to build highly interactive web applications''[7]. In jQuery UI, the 
plugin can support: mouse interaction, widgets, and visual effects. To get started with jQuery UI, you have to 
download special library that is for jQuery UI. But In this paper we only focus on jQuery.

4. CLEAR EXAMPLE OF JQUERY BENEFITS
To get starting with jQuery, you have to download jQuery library from jQuery website (see figure 2)

The example shows how jQuery can deal with events, in smart and less code. (See Figure 3)
Example of who jQuery dealing with events (see Figure 3)

4.1 Explain the example
In line 5, you have to link jQuery library with your HTML file. In line 7 ''.ready'' is the function that run 
when all DOM of the HTML file has ready. In line 8, ''$'' using in jQuery as selector. The function ''hover'' 
is to fire when the mouse is moved over a ''li'' element. In line 10, because we are in ''li'' element ''this'' 
refer to ''li''. The function ''append'' means append ''***'' to every li when the mouse hover it. In line 17, the 
function fade out means the disappearance of ''chips and socks'' that are links, will be in 100 
milliseconds. Also, Fadein means the appearance of this link will be in 500 milliseconds.

4.2 Result of example
When we execute the previous example, the appearance of the HTML file when the mouse hover the 
''chips'' will be as figure 4.
 5. CONCLUSION
From this paper we show the benefit of JavaScript libraries, and how they make the programming simpler and 
more powerful. Also, we see that combined JavaScript libraries would be very big and hard in use. JQuery 
library has features that are supported to achieve the goal of JavaScript library. Also, we know how to use 
jQuery with other JavaScript libraries and  the solutions to prevent the conflict between them. In addition, 
JQuery UI, that gives powerful deal with user interaction and makes the page more interactive. JQuery is still 
developing to make the JavaScript code easier and easier for programmer. 

      6. REFERENCES
[1] Bibeault, B and Katz, Y. jQuery in action. Manning Publications. 7 February 2008.
[2] Chaffer, J. Learning jQuery: Better Interaction Design and Web Development with Simple JavaScript 
Techniques. Packt Publishing. 7 July 2007.
[3] CSSTRICKS. Located on the Internet at http://css­tricks.com/poll­results­what­javascript­library­do­
you­use/#1. Last visited: 11 December 2008.
[4] Janzen, D and Volder, K. Navigating and Querying Code without Getting Lost. Technique report, 
Department of Computer Science University of British Columbia, 2003.
[5] John Resig. Located on the Internet at http://ejohn.org/. Last visited December 2008.
[6] JQuery. Located on the Internet at http://jquery.com/. Last visited: 11, December 2008.
[7] JQuery UI. Located on the Internet at http://ui.jquery.com/. Last visited: 10 December 2008.
[8] Slideshare. Located on the Internet at http://www.slideshare.net/jeresig/javascript­library­overview­
presentation. Last visited: 12 December 2008.
[9] Wikipedia. Located on the Internet at http://en.wikipedia.org/wiki/Main_Page. Last visited:11, 
December 2008.