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 Client/Server Browser Only AjaxCFC. Qcodo. Prototype, jQuery, Yahoo UI,  Dojo, Mootools. Commercial Atlas. Bachbase for Struts. Backbase. 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   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  2.3 Comparison of some JavaScript framework 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 Drag and Drop Simple visual  effects Animation/ advanced visual  effects Event Handling Developer tools XMLHTTPRequest data  retrieval(AJAX) Accessibility File Size Browser support Yes 27 Yes Yes Yes Yes Yes Yes

jQuery Yes Yes Yes

MooTools Yes Yes Yes

Prototype Yes Yes Yes

Yahoo UI Yes Yes Yes

Yes Yes Yes

Yes Yes Yes

Yes Yes Yes

Yes Yes Yes

Yes 15 IE 6+,  FireFox 2+ ,  Safari 2+,  Opera 9+ 19

­ 20 IE 6+,  FireFox 1.5+ ,  Safari 2+,  Opera 9+

­ 30 IE 6+,  FireFox 2+  , Safari 2+,  Opera  9.25+

Yes IE 6+,  FireFox 2 ,  Safari 3,  Opera 9+

IE 6+,  FireFox  1.5+  Safari  3, Opera  http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks  9+

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.

Sign up to vote on this title
UsefulNot useful