What is jQuery
What jQuery can make?
Function of jQuery
JQuery can be categorising into two chief classs, which is jQuery API mentions and it extension, jQueryUI. JQuery API provides the map to developer and jQueryUI usage for graphical interaction between web users and web page.
JQuery API is the nucleus of jQuery, which content pickers, properties, use, CSS, events, Ajax, public-service corporations and internals.
Harmonizing to Bibeault and Yehuda, ( 2010 ) , Selectors, is a method introduce since looking of CSS, it is use to mention to a group of component within a manner sheet/hypertext papers. In CSS, we use code below to mention to an component ticket & lt ; p & gt ; and holding the font-weight bold to it content:
Figure 1: Example of CSS
In jQuery, it is rather similar with CSS but it replace with ‘ $ ‘ , we use the map below to mention a category name “ heading ” within an HTML papers and execute the map fell ( ) :
Figure 2: Example of jQuery picker with fell ( ) perform.
JQuery usage ‘ . ‘ for category choice and ‘ # ‘ for id choice, if the picker usage without ‘ . ‘ or ‘ # ‘ , it will mention to the HTML ticket, in the illustration below ; it will mention to a & lt ; div & gt ; ticket with ‘ajaxContainer ‘ Idaho.
Figure 3: Example of jQuery Selector usage with Idaho
JQuery do supply advanced picker to mention to element with certain status, here some illustration:
Figure 4: Some illustration of advanced pickers
Infusion from Bear Bibeault, jQuery in Action, 2nd edition, pg 10
Figure 6: Example to acquire an component Idaho by jQuery.
Figure 7: An hypertext markup language ticket with property.
JQuery library provide few map let developer to easy pull strings hypertext markup language ticket attributes like addClass ( ) , attr ( ) , hasClass ( ) and act. Table below show the map provide by jQuery and it use.
Figure 8: List of attribute map of jQuery
Compile from hypertext transfer protocol: //api.jquery.com/category/attributes/
Example below illustrate jQuery removeAttr ( ) map.
Figure 9: Example of removeAttr ( ) map
Adopt from hypertext transfer protocol: //api.jquery.com/removeAttr/
Mentioning to calculate 9, the textbox is non-editable, when a button is click, it perform the removeAttr ( ) map to take the property “ handicapped ” so the textbox can be edit.
Traversal and Manipulation
Figure 10: Some illustration of jQuery traverse map.
Compile from hypertext transfer protocol: //api.jquery.com/category/traversing/
Figure 11: Some illustration of jQuery use map.
Compile from hypertext transfer protocol: //api.jquery.com/category/manipulation/
CSS ( Cascading Style Sheets )
Figure 12: Highlight a selected row by utilizing addClass ( ) map.
Figure 13: Example of jQuery addClass ( ) and removeClass ( ) for CSS.
Mentioning to calculate 12 and figure 13, an event is define on an ASP.net control, when a row is selected, it will execute removeClass ( ) on variable “ selected ” which is refer to last selected row to take the “ ui-state-hover ” CSS, and so it will execute addClass ( ) to add the “ ui-state-hover ” Cesium to the selected row.
Merely like the DOM use, jQuery simplify the codification needed to alter the CSS, from the old, with a few line of codification, we can plan an synergistic web page and it decidedly save batch of clip, money and energy of developer.
Figure 13: Some illustration of jQuery event animal trainer map.
Compile from hypertext transfer protocol: //api.jquery.com/category/events/
With the map provide by jQuery, we can simple add an event handling. Example below illustrate the dlbclick ( ) map.
Figure 14: An illustration of utilizing jQuery events.
Mentioning to calculate 14, it bind a dblclick ( ) to “ dragTrans ” component and execute the codification in the within the map.
Figure 15: Example of ready ( ) map
From the illustration above, all the codification within the ready ( ) map such as the event managing map ( dblClick ( ) ) will be run when the DOM hierarchy is to the full concept.
JQuery event truly bring advantages to developer, with it plentifulness of event managing map and the ready ( ) map, developer no demand to blow excess clip to code and believe the logic of event handling, of class, this able to rush up the development velocity of a web page.
Figure 16: Ajax Function of jQuery.
Compile from hypertext transfer protocol: //api.jquery.com/category/ajax/
Figure 17: Traditional Ajax
Adopt from jQuery in Action
When utilizing jQuery, the Ajax above will be simplify to 1 line like the figure below.
Figure 18: Ajax with jQuery
Adopt from jQuery in Action
Although Ajax is powerful plenty but it complexities become a stumbling stone for people to to the full understand how it works. JQuery non merely simplify the codification to execute an Ajax but it besides allows those people without Ajax cognition to execute Ajax in their sites. Without a uncertainty, John Resig did another great occupation on jQuery.
Not merely bound to the nucleus API we discuss before, jQuery besides provide set of map to interact with browser and other public-service corporations that might needed by a developer when developing their site. Since there was excessively many map to name out, hence table below merely list out portion of the map provide by jQuery for public-service corporations:
Figure 19: Example of public-service corporations function provide by jQuery
Compile from hypertext transfer protocol: //api.jquery.com/category/utilities/
A successful and interesting web site non merely depend on it functionality, it besides depend on it ocular consequence and user-friendliness of the user interface design. Therefore, beside the nucleus API of jQuery, jQuery besides provide a set of UI tools allow developer to develop an interacting web site, known as jQueryUI.
From the past, we usually “ talk ” to our browser merely by snaping and clicking, if we want our browser to execute some action, so click the button, rather dullard, is it? Beside the interaction provide by HTML 4, jQueryUI let user to execute another 5 interaction ( Bibeault et al, 2010 ) . The 5 interaction as below:
Figure 20: 4 interaction provide by jQueryUI
Draggable ( ) make the component can be move around by chink and keep your mouse on the component, a draggable component can be drag around the browser windows or within a container that define by the developer.
Figure 21: define a draggable component within a container.
Figure 22: consequence of define a draggable component within a container.
In figure 21, we define a “ dragTrans ” as a draggable object and the container is “ Panel1 ” , as a consequence, we can clearly see the object with label “ 234 ” can non be drag out from the boundary line ( “ Panel1 ” ) .
As we see before in nucleus API, some of the map have serve multi propose or sharing each other though the different API ( Bibeault et al, 2010 ) . Draggable ( ) is one of the illustration, it serve other purpose other than merely do the object draggable. When utilizing draggable ( ) map, developer can disenable, destruct or re-enable the component, to accomplish this, merely merely go through a parametric quantity to draggable ( ) map.
Figure 23: illustration of disable a draggable component.
Code above disable the “ dragItem ” component by go throughing the “ disable ” parametric quantity ( option ) into draggable ( ) map.
There are still a batch draggable option we non cover here such as stack, start, halt and etc provide by jQueryUI but we merely discuss the basic and common usage option of the jQueryUI. Other than that, jQueryUI besides provide set of event that can be fire during dragging such as dragstart, retarding force and dragstop.
Droppable usually we utilizing partner off up with draggale, it make an component receive draggable component to drop inside it. Merely like our desktop, we drop our unwanted file ( draggable ) to recycle bin ( droppable ) . We define a droppable object merely like how we define a draggable object, same as the draggable, droppable object besides have it option such as accept, activate and etc. Same like draggable, jQueryUI besides provide a set of event that fire during droppable activate, such as dropactivate, bead, dropout and etc.
Sortable ( ) , as what the word province, it make thing sortable, with the AIDSs of draggable and droppable, sortable ( ) allow people to drag the component and set it into order they desire. Sortable ( ) usually use in an & lt ; ol & gt ; or & lt ; ul & gt ; and it will do it child element & lt ; li & gt ; able to screen. Just like draggable and droppable, sortable ( ) can be name without any parametric quantity to active sortable to element or go throughing some parametric quantity to active other map. Besides that, a set of event besides fire during screening.
Figure 24: Example of sortable ( )
Adopt from hypertext transfer protocol: //docs.jquery.com/UI/Sortable
Mentioning to calculate 24, it demo the sortable and how it work, item 1 until 4 is a list point, so when t define as sortable, we can merely take out the list point and put to our desire order.
In jQuery, we can utilize the DOM use to command the size of the component, but jQueryUI provide another simple manner to alter the size of the component, known as resizable ( ) , resizable provide the direct and on demand resize to the component. Just same with other jQuery map, it merely needs to be active on an component and that component is ready for resizable. Example below show a resizable ( ) map.
Figure 25: Example or resizable
Adopt from hypertext transfer protocol: //docs.jquery.com/UI/Resizable
In HTML, we normally can choose those Button, Radio Button, Check Box and other object provide by HTML that can be choice ( Bibeault et al, 2010 ) . JQuery provide a map known as selectable ( ) , it make a certain component can be choice. For illustration, we can do a list clip in a list that selectable by the users or possibly we can hold a tabular array with plentifulness row and user able to choose it. Example below demonstrate selectable ( ) :
Figure 26: Example or selectable ( )
Adopt from hypertext transfer protocol: //docs.jquery.com/UI/Selectable
From all the interaction we discuss above, it truly helpful for web developer to let user to interact with the web site, although some of the map we might non ever utilize, such as retarding force and bead, but the other map such as selectable, resize table and sortable is really utile particularly in image processing.
Harmonizing to Bibeault et Al ( 2010 ) , in HTML, the controls provide are limited, we have some simple jazz band box, wireless button and etc. Other desktop controls such as a skidder that you might necessitate for volume control or rapid climb is non supply in HTML. To spread out the controls provide by HTML, jQueryUI provide us a set of control call known as doodads in jQueryUI. We will briefly travel to the doodads control 1 by 1.
These doodads will conceal all other subdivision except the subdivision selected by users.
Figure 27: Accordion doodads
Adopt from: hypertext transfer protocol: //docs.jquery.com/UI/Accordion
From the figure above, the subdivision 2 is selected and the other is concealing.
When utilizing this doodad in a textbox, the textbox will automatic finish the possible matching word type by users by memorising the old input of users.
Button in jQueryUI about same with HTML, but in add-on, jQueryUI have 2 excess map, 1st is layout, the button define by jQueryUI will look harmonizing to jQueryUI theming ( will discourse subsequently ) , the 2nd is buttonset ( ) , which use to group a several button into a individual group.
Merely like the name province, it allows users to take a day of the month from a calendar. The day of the month format can be customize and after the users select, the day of the month will be type in the textbox corresponds to the datepicker.
Dialog, most Windowss application developer will familiar with this, duologue is a windows prompt out to execute some input by user or demo some information. Lapp as the duologue in windows application, duologue is a drifting window that can be usage for input/display information. It can be move about and resize.
Progressbar usage to expose the completed per centum of certain occupation such as burden, change overing and etc.
Skidder is a saloon with a movable key that can be slide by users, jQueryUI besides back up skidder with 2 key which content 2 key that can be slide.
Tabs, rather similar to squeeze box, it split up the content to multiple subdivision and let users to choose the subdivision that he desire.
With these doodads provide by jQueryUI, web developers can plan a web application more users friendly and they can to the full utilize the excess control such as a skidder, check and etc to interact with users. One more of import of doodads is, it automatic support jQueryUI theming, which will be design harmonizing to the subject generate by jQueryUI.
By utilizing the old manner, if we need to inspire an object or an component, in our head, Adobe Flash will be the 1st pick. But now, we can execute this simple life such as slice in, melt out and etc without Flash. JQueryUI provide consequence map to let simple life can be executing without Flash. This build-in consequence can be to the full control by developer by go throughing the option/parameter merely like other jQuery API we discuss before. Besides the consequence map, jQueryUI besides provide several control map such as dequeue ( ) , animate ( ) , delay ( ) and etc to command the flow of life.
A good web developer non equal to a gifted interior decorator, but the designing and layout of web page is an of import key to construct a site that can pull people. As we talk before in old chapter, we can theme jQueryUI Widgets. JQueryUI provide a default subject on the doodads but it allow us to custom-make it either we code the CSS register our ego or we configure the CSS file ( Wellman, 2009 ) . Theme Roller, a tool or a web application that provide a high degree constellation of the theming ( Wellman, 2009 ) , developer can travel to it net site and choose the desirable colour, subject and etc and download it and utilize without future cryptography. Even you can hold multiple CSS file with different subject and let yours users to choose the subject they desire.
JQuery Pros and Cons
Ease to utilize
In jQuery.com, we can download the jQuery library and usage it, but beside that, we besides can establish a batch of certification on each of the map, these include account of map and sample of utilizing it. Developer can mention to the certification provide for understand the use of certain map ( ajaxwith.com ) .
JQuery library ain ego have the compatibility over the full popular browser include Firefox, IE and Google Chrome. Developer no demands to compose the excess codification to look into the browser version for different managing codification ( Babu, 2009 ) .
JQuery allow developer to make their ain circuit board and publish for other party usage by utilizing the jQuery nucleus API. This allows developer to utilize the map that might no embed in the library. JQueryUI is one of the illustrations ( Babu, 2009 ) .
Ajax is a powerful engineering in web development, but implement an Ajax might be a difficult occupation. JQuery support Ajax and supply a set of Ajax map to allow developer utilize Ajax easy ( jscripter.com ) .
Execution Time and Size
JQuery and 3rd party
In this chapter, we will hold a briefly position on jQuery relation with 3rd party in browser, server-side linguistic communication and it rivals.
jQuery and browser
I have test with my ain concluding twelvemonth undertaking with big use of jQuery, I test in 2 browsers, which is Internet Explorer and Google Chrome, as a consequence I found that Internet Explorer necessitate more clip to expose duologue comparison to Google Chrome.
jQuery and server-side linguistic communication
PHP, Hypertext Processor, is a popular server-side scripting linguistic communication. JQuery can be implanting into any PHP site by utilizing the & lt ; book & gt ; ticket. Unlike ASP.NET, PHP does non supply an Ajax library to it developer, hence, looking of jQuery make the PHP developer life easier. JQuery make the Ajax call in PHP easier and the codification is more clear.
JQuery and rival
hypertext transfer protocol: //ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js
hypertext transfer protocol: //ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
Harmonizing to Dave ( 2008 ) , hosting jQuery on Google or Microsoft can diminish Latency, increased the correspondence of the connexion and have a better caching in user ‘s browser. Google and Microsoft have their CDN ( Content Delivery Network ) which content multiples file on different waiter, it will automatic take the nearest waiter to your client to download the file. By utilizing the 3rd party hosting jQuery like Google, the file merely have to download 1 times, it will observe whether the browser cache contain the jQuery file, if host on ain waiter, the jQuery file will be download at least 1 times when users entree to the site.
I would wish to follow jQuery in my concluding twelvemonth undertaking due to it powerful map provided and it extend jQueryUI. And last, would wish to thanks to everyone who help me for the research and advice for finishing this seminar.