JQuery

Moiselle Sarah C. Roxas

What is JQuery?

jQuery is not a language, but it is a

well written JavaScript code. As quoted on

official jQuery website,

"it is a fast and concise JavaScript

Library that simplifies HTML document traversing, event

handling, animating, and Ajax interactions

for rapid web development”.

In order to work with JQuery, you should be aware of the basics of JavaScript, HTML and CSS.

Why Jquery?

It helps to improve the performance of the application

It helps to develop most browser compatible web page

It helps to implement UI related critical functionality without

writing hundreds of lines of codes

It is fast

It is extensible – jQuery can be extended to implement

customized behavior

Other advantages of jQuery are:

No need to learn fresh new syntaxes to use jQuery, knowing

simple JavaScript syntax is enough

Simple and cleaner code, no need to write several lines of codes to

achieve complex functionality

JQuery is very compact and well written JavaScript code that increases the productivity of the developer by enabling them to achieve critical UI functionality by writing very small

amount of code.

How to use JQuery?

jQuery usually comes as a single JavaScript file

containing everything comes out of the box with jQuery. It can be included

within a web page using the following mark-up:

How to load JQuery?

How to execute JQuery code?

There are two ways you may want to execute jQuery codes.

1st

The benefit of executing jQuery code in this way is that it doesn’t wait for the whole page to load completely, so in case you want

the user to see the effects as soon as the corresponding

elements are loaded, you can use this.

However, the disadvantage is that if the element on which

jQuery has to execute has not loaded, then it will error out or

you will not get the desired result; so while using this way of executing jQuery code, you will

have to make sure that the element on which you want to work with jQuery is loaded first

(you can place your jQuery code right after your HTML element).

2nd

This is the better and safer way to execute jQuery. This

makes sure that jQuery code will execute only if complete page has been loaded in the browser so you are rest assured that

user will not see any undesired behavior on the

page.

What’s In?Ease of useLarge libraryStrong opensource communityGreat documentation and tutorialsAjax support

What’s Out?Functionality maybe

JQuery javascript file required

JQuery provides a simple way to select single element or group of elements. You can access element by type (div, span, p), id,

CSS class and attribute, etc.

SELECTORS

SLIDING EFFECT

Example…JQuery provides three methods to show or hide elements in sliding behavior.

SlideDown(speed, callback): This method gradually increases the height of the elements, from hidden to visible.

SlideUp(speed, callback): This method gradually decreases the height of the elements, from visible to hidden.

SlideToggle(speed, callback): This method toggles between SildeUp() and SlideDown() for selected elements.

I created Box using DIVs and choose DIV having id “contentArea” for sliding.

Register click event of the HTML element and call SlideToggle and SlidUp method for the

“contentArea”. More details of this example are available in the attached project.

Fade Effect

Example…JQuery also provides four methods to gradually change the opacity of the selected element using Fade effect.

fadeTo(speed, opacity, callback): This method changes the opacity of selected elements to specified opacity.

fadeIn(speed, callback): This method gradually increases the opacity of the elements, from hidden to visible.

fadeOut(speed, callback): This method gradually decreases the opacity of the elements, from visible to hidden.

fadeToggle(speed, callback): This method toggles between FadeIn() and FadeOut() for selected elements.

I will set the opacity of the image on hover. Add images in to the DIV and assign id “fadeExp1”

to div.

In ready() function, set the default opacity of all images using $(“#fadeExp1 img”).fadeTo(0, 0.3);

statement. Then register Hover event on each image and provide two functions in it, one for mouse over

and one for mouse out and set the opacity of element there.

Animation Effect

Example…JQuery also provides an easy way to

animate element. the syntax of animate method is .animate( properties, [duration], [easing], [complete]).

properties: A map of CSS properties, which changes during animation

duration: String or number to determine the duration of the animation

easing: The name of easing function to use for the transition

complete: A function to call on the complete of animation

A very cool and simple example for the icons list in your website, simply register hover event on the image. On mover over, set top=-15 and on mouse out set

top=0 again.

Don’t forget to set the relative position of the image.

FIn

Mr. Ardee Aram

Moiselle Sarah C. Roxas

CPE 406PROFESSIONAL ELECTIVE 1