The Fundamentals Of Jquery Computer Science Essay

Published: Last Edited:

This essay has been submitted by a student. This is not an example of the work written by our professional essay writers.

jQuery is a free which can get the source from anyway and it's an open source software. Today, jQuery is the most popular in the JavaScript library so that we can through the online get a lot free jQuery tutorial or some example of jQuery coding. jQuery is a cross-browser javaScript library which it is designed to simplify with the client-side scripting of HTML language. Therefore, jQuery is easy to navigate a document, creating animation, handling the events, selecting DOM elements and develop with the Ajax applications.

jQuery is providing the capabilities for the developers to create their own plugins on the top of JavaScript library. By using the plugin functions, developers or the web designers are able create special animation, high-level interaction, advanced effects or the UI theme widgets. Thurs, developers using jQuery are able to create a powerful and dynamic web page.

Compare between the jQuery and others toolkits, jQuery is aim to change a way for the developers able to create the rich functionality on their own page. As we know that developers can leverage their knowledge on other programming language, such as Extensible Hypertext Markup Language (XHTML), Hypertext Markup Language (HTML), Cascading Style Sheets (CSS) and JavaScript to making the programming development rapid in the reality and it can be directly manipulate with the page elements.

jQuery Fundamentals

jQuery is mainly use to retrieve the elements from Hypertext Markup Language (HTML) page or Cascading Style Sheets (CSS) and to perform the operations. In this section, I'll discuss about how we can leverage the CSS and HTML knowledge to develop the abstractions and powerful web page.

The jQuery Wrapper

The use of selectors is a method that is use in the jQuery and representing the elements inside the HTML page. For example, the selector of "p a" in the jQuery library it was referring to the group of links and we will write as "$("p a")" on the code part. We are using $( ) functions because it is a special JavaScript object and include the array of DOM elements that is exactly match with the selector. This selector is a very useful method when we apply to the large number on the group of elements.

In programming language, this type of construct is called as a wrapper because it is wraps the matching elements with the extended functionality. We can use the term of jQuery wrapper to refer the set of matched elements so that it can be operated on with the methods defined by jQuery.

Utility functions

A "namespace prefix" is an additional duties which the purpose is for the handful utility functions. This is because jQuery has been give too much power to the page author to create a wrapper set. Let's have a look on this example, "$.trim(someString)" or "jQuery.trim(someString)" is a utility functions in the jQuery library and it is use for trimming string. This functions is use to trim out the extra whitespace between the text inside the text boxes.

The document ready handler

Some of the time, the users might need to wait for a resource fully loading before the rich behaviours are change to available. It might waste alot of time to waiting the resources take time to load it. Therefore a better approach is available in the jQuery now. That is the users are only need to wait until the browser are converted the HTML to the DOM tree form before they are execute script on rich behaviours.

This is the example:

For example, the formal syntax to define the code is as follows:

$ (function( ) {

$("table tr:nth-child(even)").addClass("even");


Making DOM elements

Normally we are create a DOM element by passing $( ) function to make up the HTML elements. For example, when the users want to create a new sentence will write the code such as "$("<p> hello world! </p>")".

Sometimes the users would like to create a bodiless DOM elements but actually it is useless this is because normally the element hierarchy is perform on the jQuery DOM manipulation functions.

2.0 Bringing pages to life with jQuery

Long time ago, when we are the fledgling webpage authors, we will always try to add in the counterproductive animation such as the marquees text on the top of the webpage, blinking text of heading, animated GIFs picture, interfered the readability of page text background pictures and music.

Nowadays the savvy web designers or developer are clever to leverage their knowledge and they will enhance a user's web experience rather than they only know to showcase on the annoying animations. We are finding a way to do something on the web pages that anyone might surprise that actually we are professionals and say, "Wow! I really didn't know that you are able to do this!". In this chapter, I would like to share about the power of jQuery and its performing operation on the DOM elements, try to bringing the jQuery life with our own webpage.

2.1 Manipulating element properties and attributes

Properties and attributes is the most basic component in the jQuery library, therefore the developer can manipulate the properties and attributes in the DOM elements. In other words, jQuery is the HTML markup and it can be changed to dynamic anytime by under the script control. The following code is the example of HTML markup for an image element:

<img id="myImage" src="image.gif" alt="An image" class="someClass"

Title="This is a nice picture"/>

Refer to the above example, "img" in this example is the tag name and the "id", "src", "alt", "class", "title" is use to mark-up for the image which is represents the element's attributes. Each of the element's attributes is contains with the name and attributes.

To store a attributes the object need to process one or more properties and some of the properties are representing the value of the markup attributes in the jQuery library. The following figure 1 is showing a simplified overview of the process.

Figure 1 HTML markup process.

Let's talk about setting and getting element properties.

2.1.1 Manipulating element properties

We are using the native JavaScript notation to access the element properties and the element values. However, jQuery doesn't process with the specific command to obtain their element properties.

For example, it is the most easy way for modify a matched set component element:


This.alt=' image['+n+'] with an id of ';


Each image of the properties element on the webpage will include the above code example as the inline functions. Modify the alt property by using the order of element and it's id value.

2.2 Changing element styling

Users have two options if they feel want to change the styling of element. The first option is the users can add a new CSS class or remove it but this option migt cause the existing stylesheet to restyle the element which is based on the new classes. The second option is the users are able to apply the styles directly to operate on the DOM element. This following are the details about this two options:

2.2.1 Adding and removing class names

The class name properties and attributes of the DOM elements that's important for the creation of rich user interfaces. Besides that, it is unique in the format and semantics. The adding and removing class names is the primary so that the users can modified the stylesheet dynamically [page 87]. In addition, class names are making the DOM elements unique and this is a challenge to with them which the element is able assigned to any number of the class name.

In the HTML language, one of the aspects of the class attribute is used to supply the class name as a space of delimited string. By contrast, class attributes manifesting the class name as an array of names in the DOM elements to corresponding className property instead of the class name as a space delimited string. Therefore, it already has the class name whenever the user removing or adding a class names from the DOM element.

2.2.2 Getting and setting styles

Even though when the users modify the class of the element it still allow them to choose the predetermined set of defined the CSS which one should be applied on that and the users are allow to choose to override the CSS together [page 90]. Directly apply the styles will have more fine-grained control over the individual elements and it will automatic override the style sheets.

Actually the css( ) method and attr( ) method are similarly and both of that are allowing to set an individual CSS property with indicating name, value, series of the elements by passing in an object.

2.3 Setting element content

The users have to think about which techniques the most suitable for is modify the contents of an element, either using the DOM API methods or changing their inner HTML. In my opinion, changing the inner HTML is more effective and easier.

2.3.1 Replacing HTML or text content

Html( ) command is allow the users to retrieve the HTML contents of an element which is used in without parameter or with any of the jQuery functions to set the contents with parameter. The users have to bear in mind that setting the HTML or text content it might will replace the contents that was set at the previously in the elements.

2.3.2 Cloning elements

Making a copies of an element to attach is another way of allow the users to manipulate the DOM elements. Clone( ) command is a handy wrapper method which is provided by jQuery. By using the clone( ) to making a copy of the existing elements isn't that useful except the users are do something with the carbon copies.

2.4 Dealing with form element values

jQuery contains few convenience functions for the activities which is like the getting and setting values or serializing and selecting elements are based on the form properties. By contrast, form plugin is providing the robust set of the functionality and the jQuery Core Team members are developed an officially sanctioned plugin.

3.0 Introduction to the UI Plugin

UI is the king of the Rich Internet Application and the users does not need to surprise that jQuery plugins are focusing on the enable rich user interface. In this chapter, i will introduce the UI plugin to the public and the reason is UI plugin is an important component and the user might like to cover this UI plugin to the same depth.

jQuery UI plugin are mainly separate in the three major areas of support which is widgets, mouse interaction and visual effects.

3.1 Mouse Interactions

Mouse interactions is an core and integral part of the GUI. Web interfaces are build with alot of simple mouse pointer interactions such as mouse clicking or mouse cross over. By contrast, the HTML page does not aboriginal provide the high interaction styles available for the desktop application.

Drag-and-drop is a ubiquitous interaction techniques are available for the desktop user interface. GUI file manager for the desktop system is a good example of drag-and-drop. The users can easily copy or moving files around by drag and drop from folder to folder. Either the user can directly drag and the drop the file to dust icon delete it. In the same technique, jQuery UI plugin also provide this technique for web enabled drag and drop.

The others category of the mouse interaction of jQuery UI plugin are resizable, selectable and sortables. Methods under this category are allow the elements to reordered within the container and resized it which is leverage the drag-and-drop technique.

3.2 UI widgets and visual effects

The following lists is the available jQuery UI widgets and with their short description and example on each widgets.

3.2.1 Accordion

Accordion is a simple widget in the jQuery UI plugin. Normally it is use to create expanding and contracting levels with out of the simple markup, for example the listed or nested <Div> elements. If the users want to use different element for the header, they are need to specify the header-option with an appropriate selector. Let's look at the example, header: 'a.header'. Content elements are always need to next to the header.

Basically, a simple accordion does not allow the users to open two or more content panel at the same time because this is need to take alot effort to do on it. Here is the example if the users wish to create an accordion widget that the content panel is allow to open two or more:

jQuery(document).ready(function( ){

$('.accordion.head')click(function( ){

$(this).next( ).toggle( );

}).next( ).hide( );


Figure : Accordion menu

Refer to the figure, this is the simple accordion menu done in jQuery which I apply on my FYP as the navigation menu bar. Links with subitems under them will expand the submenu when clicked. Every items will have the subitems.

3.2.2 Tabs

A tab is one of the category in the jQuery UI widget and that is creating a tabbed set with a potentially complicated set of options and it is fairly interesting. Typically, users use tabs to break the content into few different sections so that they can swapped to save the page space. In other words, tab is similary with the accordion widget.

By default, tab widget can swap between the tabbed sections with using the onClick function. In the other way, the event are allow changed to onHover option.

User can apply this tab plugin function on their registration part. For example, when admin staffs want add a new record on lecturer, student or admin staff, they can easily by using this tab plugin choose which position staff they want to add a new record.

3.2.3 Calendar

Calendar can say it is the most basic jQuery UI widget which is provides a dynamic date picker that is associated with an input element. This calendar widget is a highly configurable, normally we can see it appear on a page or either inside a dialog box. Users can customize the language or date time format, add in some button and restrict selectable date ranges or other navigation.

This date/time picker is the most common plugin. Normally we can see this plugin on the booking ticket website or when we need to do an online registration, we will see this on the Date of Birth field.

3.2.4 Slider

JQuery UI slider plugin are making the selected element into sliders and there have alot options such as ranges and multiple handles. This handle can moved with our mouse or the arrow key. JQuery UI slider widget is create a handles elements with the class which is called "UI-slider-handle" on the initialization.

For the jQuery UI slider plugin, we can make it as the login UI at the top of the page. When the user want to login, they can only click on the there and it will prompt out the login form. This can save the place of the page for other usage. Besides that, it will more user friendly and nicer.

4.0 Features of jQuery

jQuery are contains the following features:

4.1 Creating the wrapped element set

Rich Internet Application are require a good number of capabilities to manipulate the DOM elements that are able to make up the webpage [page 46]. In the other way, the users are need to identify and select it before they manipulate the DOM element. In this section, I will discuss about the tour of many ways that jQuery let us specify which elements are targeted for manipulation.

4.1.1 Using basic CSS selectors

Web developer have to familiar with which one is powerful and useful before them apply the styles to the page elements. The group of selection methods is work across all the browsers and the methods are including the selection by an element's ID, tag name, CSS class name and the DOM hierarchy of the page elements. The users are able to do some mix and match in the basic selector types which is use to select the fairly fine-grained set of the elements. In reality, we can see that the most creative and fancy website or webpage are using the combination of all basic options to develop their own dazzling display [page 48].

4.1.2 Using child container and attribute selectors

JQuery is usig the next generation of CSS to get more advanced selector which it can supported by the Internet Explorer 7, Mozilla Firefox, Safari, Google Chrome and other modern browsers. Directly select the children elements are included in these all advanced selectors. This might occur after the other elements in the DOM element and the elements together with the attribute are match with the certain conditions.

4.1.3 Generating new HTML

JQuery is provide a simple matter to generate the new fragment of HTML to insert to the web page. The reason is the $ function can create the HTML page, furthermore it is able to select the existing page elements. If the users are able to run the jQuery command therefore they also able to run on the wrapped element set of existing element on the new created page [page 60].

4.1.4 Managing the wrapped element set

The users can using the set of wrapped element to identified two thing. The users can use the selector to match with the existing DOM element or either the users can using the HTML snippets to create a new elements. Else, they can combine both together.

The users have to determine the size of the wrapped set because it acts like an array. The length property is similar with the JavaScript arrays, that is contains the number of wrapped elements.

Thus, users are able to perform some sort of the operation by using the jQuery commands if they have the wrapped set of elements.

4.3 Sprucing up with animations and effects

Did you ever visit a website which is built by the flash and you will feel envious because of the pretty effects attracted you [page 156]? Before time, JavaScript is not a good option to create those animation and effects. But now, jQuery is provide the trivially simple user interface and allow to create the pretty effects and animations.

Users have to bear in mind that the effects are used to enhance the usability of a webpage but not used to hinder it.

4.3.1 Showing and hiding elements

Showing or hiding effect is the most common type of the dynamic effect when users want to perform on the elements. Normally users will try to create some fancy animations but sometimes they will want to keep their page as simple. Users can make the pop element into existence maybe few second or longer and after that make it vanish. The basic command for the showing and hiding elements are: show( ) or hide( ).

4.3.2 Animating the display state of elements

If users are blink at the wrong moment that will make them miss the transitions and they will start wondering, "What just happened?". Gradual transitions in the short duration can let us to know that what's changing and how we can get from one state to the others. The following are the set of jQuery core effect:

Show and hide

Fade in and Fade out

Slide down and slide up

4.3.3 Creating custom animations

jQuery is supplying core effects and it is purposely kept small so that users can keep the jQuery core footprint to the minimum therefore users are allow to add more animations or effects at their pages. In actual fact, it is very simple to write our own animation by using the jQuery. A fledging page author is able to create their own animation. By using the animate( ) wrapper method, users are allow to apply their own custom animated effects to the wrapped set elements.

Basically users need to create a set of CSS style properties and the target value for create the custom animation or effects. The CSS style properties and target value will act as animation progress [page 175].

4.4 jQuery utility functions

Concept of the jQuery utility functions is the namespace functions which is "$" and it's does not operate on the wrapped set elements. This functions also can work as top-level functions unless sometimes it defined on $ instance.

Basically this utility function is operate with the JavaScript object and the DOM elements are excluded in this functions. Other than that, jQuery utility functions also performing with some non-object-related operation [page183].

4.4.1 The jQuery browser detection flags

The jQuery browser detection flags is a technique that will only in used when does not have other better choice are available for us. The main argument of this technique is they need different levels of support for them with the same version of browser and it is a proliferation of browser.

The box model is determine the size of content that the conjunction with the padding and border of the element. Box model is only available when the Boolean $.boxModel flag is set to true. Boolean will only set as true when the webpage is using the W3C standard box model. By contrast, if the Boolean value is equal to false which means that the page is using the Internet Explorer box model or we also can name it as traditional box model. Most of the browsers which is exclude the Internet Explorer, there are only support the W3C box model.

Figure: The W3C box model does not include padding and border measurements, by contrast, the Internet Explorer model is included the padding and border.

4.4.2 Using other libraries with jQuery

Conflict and contention is the main point of limitation when the users are using other libraries on the same page with jQuery. We know that in the jQuery library, $ also known as jQuery name and that is allow used in every elements in the jQuery. jQuery is provide the $.noConflict( ) utility functions to overcome the $ name functions when the other library use in the same time.

4.4.3 Manipulating JavaScript objects and collections

As we mention before, most of the jQuery utility functions only operate on JavaScript object and the DOM elements are excluded. There are only some of the functions are able perform on the DOM elements and all of the new functions are not focus on DOM elements anymore.

Let's us talk about the string trimming. The string trimming can say as it is a form data validation and it is common because most of the JavaScript applications will apply this function. String trimming function is use to trim the whitespace between the data in the text boxes or text areas. This is because sometimes the users might accidently key in too much space between the words. And during the validation, we silently trim out the whitespace rather than we alerting the user to the fact.

4.4.4 Dynamically loading scripts

Most of the time, webpage is needs to load an external scripts which is from the script files. The page is using the <script> tags which is in the <head> of the page to load the external scripts. However, today the user might will choose some external script to load after the script control [page 209].

We need to do on this way because we don't know about the external scripts when will be needed. jQuery is provides the $.getScript( )utility function for the users who want to dynamically load a new script into their own page, it is much more easier for the users.

4.5 Talk to the server with Ajax

4.5.1 Brushing up on Ajax

This is a standard and is mean that it is need asynchronous requests which is through the JavaScript XHR object. Internet Explorer are using the ActiveX Control. In the Internet Explorer 7 a wrapper set elements are imitate the standard user interfaces that is available. However, Internet Explorer 6 is requiring the divergent code on it.

However, the problem of creating an XHR instance is the users are need to create an instance for the current browser when different browsers are implementing the XHR in the different ways. By solving this problem, we need to use a technique which is called as object detection. This technique is able to work with any one of the browsers and that is already support the tested capability.

Figure : This picture is showing the life cycle of an Ajax request. As we can see that, it is making a way from the client communicate with to the server and vice verse.

In this section, I will discuss about the main points of the page authors are using Ajax to deal with the following:

Instantiating an XHR object that require browser-specific code.

Ready handlers are does not will automatic get a reference for itself to invoke in the XHR instances.

The response body is needs to manage in many different ways; normally it is based on its format.

Ready handlers are need to sieve with uninteresting state changes.

5.0 Comparison between the jQuery and AJAX

As we know that, programming world is provides many different type of language for the page authors used to making their own webpage or website, such as the C#, HTML, visual basic, CSS and so on. In this section, I will discuss more details about the jQuery and AJAX.

Let's talk about jQuery first. jQuery is derivatives and actually it is a lightweight library of the JavaScript which mean that jQuery is not much influence to the JavaScript library but it is more focuses on the interaction with HTML page. By contrast, AJAX does not a specific technology in the JavaScript. It is just like a combination tools between the different technologies so that will provides a new functionality. As usual, when the users are requesting a new set of data from a website, it will clear the whole page and loads the new set of data again. However, AJAX is avoiding this behaviour and it will allow the new part of data to be retrieved but does not modify on the whole page.

Furthermore, maybe some the user does not know that AJAX is a very powerful tool. But the limitation of AJAX is cannot utilized with the simple HTML this is because the HTML does not allow the webpage to be changed after the page has been fully loaded. Developers are needed to use the client side scripting language when they are using the AJAX. By using the client side scripting language, the developers are able to detect the actions of visitor so that they are able to modify the elements on their webpage accordingly. Besides that, jQuery is exactly do the same thing. This is the reason why both are always used together in the webpage to present pretty animations and effects and the user can without the repetitive loading to easily interact with it.

Users might need to fully understanding on the jQuery code and concepts because jQuery is totally working on the front end so that they only can properly setup their own page and minimum the error occur. By contrast, user does not need to exactly learning AJAX. This is because in order to utility the AJAX to our webpage, we are using the jQuery to write a AJAX command so that we can directly retrieve whatever we want it from the server.

Even though AJAX and jQuery is making the better browsing experience for the visitor, however, the effect of the server hosting to the files are undesirable to the users. The reason is a new connection to the server had made when every time the users make a AJAX request. We have to think about once too many connections are made it will make the server difficult to cope with it. Most of the hosting companies already do something to prevent this overloads problem.

The following are the summary of between the jQuery and AJAX:



jQuery is a lightweight client side scripting library.

AJAX is a combination tools between the different technologies so that will provides a new functionality

jQuery and AJAX are often used in conjunction with each other.

jQuery is primarily used to modify data on screen dynamically.

AJAX is allow the new part of data to be retrieved but does not modify on the whole page.


Too much new connections made and it will cause the overloads problem.

6.0 Critical Evaluation

Still remember that when I am a fledgling page author would like to try add pizzazz and a lot of time to my own page with counterproductive abominations, such as the marquees, background music, blinking text, cute animation picture, background images, and so on. All this animations make our webpage loading speed slow down or maybe some of the time the user totally can't even open our webpage.

Furthermore, jQuery is released in January 2006 and it was under the BarCamp NYC by John Resig. jQuery is an open source software which means that is free and it is can download from anywhere without payment. Besides that, jQuery is a cross-browser JavaScript library designed to simplify client-side scripting of the HTML.

Today, we does not need to worry about too much design on the interface will make the loading speed slow down. Because we can apply jQuery together with our web page. jQuery code sizes are small and it's have a good performance on our web page. Besides that, jQuery is work with the HTML and CSS, when this three application work together will come out a great result on our web page.

As a developer, I will recommend all the developer bring the jQuery work with their webpage or website. At the previous section I already discuss about the different type of the jQuery UI plugin can apply on our own webpage. A webpage or website without jQuery UI plugin will lack of interact and simple. On the contrary, webpage or website might enhance the user interface by using the jQuery UI plugin.

I choose "Bring your webpage to life with jQuery" as my seminar title because my FYP is applying jQuery on the webpage. I am a fledgling in jQuery language, everything i am self learning from the online tutorial or get the online resource and modify by myself. But it is not that hard for a fledgling self-learned because all the tutorial will write out step by step of how to write the coding.

Basically I had learned the jQuery UI slider login plugin, accordion navigation menu bar, and the jQuery lightbox plugin and apply on my FYP. After this I will apply the jQuery UI tab plugin, jQuery Tooltips, and some other plugin on my FYP. In my opinion, jQuery really useful and make it easier for another developers and users. Just add on some simple jQuery coding will definitely make your webpage different.