Download - JQUERY TUTORIALS
![Page 1: JQUERY TUTORIALS](https://reader036.vdocuments.us/reader036/viewer/2022081414/54b6b2374a7959e71f8b4581/html5/thumbnails/1.jpg)
JQuery
Moiselle Sarah C. Roxas
![Page 2: JQUERY TUTORIALS](https://reader036.vdocuments.us/reader036/viewer/2022081414/54b6b2374a7959e71f8b4581/html5/thumbnails/2.jpg)
![Page 3: JQUERY TUTORIALS](https://reader036.vdocuments.us/reader036/viewer/2022081414/54b6b2374a7959e71f8b4581/html5/thumbnails/3.jpg)
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.
![Page 4: JQUERY TUTORIALS](https://reader036.vdocuments.us/reader036/viewer/2022081414/54b6b2374a7959e71f8b4581/html5/thumbnails/4.jpg)
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.
![Page 5: JQUERY TUTORIALS](https://reader036.vdocuments.us/reader036/viewer/2022081414/54b6b2374a7959e71f8b4581/html5/thumbnails/5.jpg)
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?
![Page 6: JQUERY TUTORIALS](https://reader036.vdocuments.us/reader036/viewer/2022081414/54b6b2374a7959e71f8b4581/html5/thumbnails/6.jpg)
How to execute JQuery code?
There are two ways you may want to execute jQuery codes.
![Page 7: JQUERY TUTORIALS](https://reader036.vdocuments.us/reader036/viewer/2022081414/54b6b2374a7959e71f8b4581/html5/thumbnails/7.jpg)
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).
![Page 8: JQUERY TUTORIALS](https://reader036.vdocuments.us/reader036/viewer/2022081414/54b6b2374a7959e71f8b4581/html5/thumbnails/8.jpg)
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.
![Page 9: JQUERY TUTORIALS](https://reader036.vdocuments.us/reader036/viewer/2022081414/54b6b2374a7959e71f8b4581/html5/thumbnails/9.jpg)
What’s In?Ease of useLarge libraryStrong opensource communityGreat documentation and tutorialsAjax support
What’s Out?Functionality maybe
JQuery javascript file required
![Page 10: JQUERY TUTORIALS](https://reader036.vdocuments.us/reader036/viewer/2022081414/54b6b2374a7959e71f8b4581/html5/thumbnails/10.jpg)
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
![Page 11: JQUERY TUTORIALS](https://reader036.vdocuments.us/reader036/viewer/2022081414/54b6b2374a7959e71f8b4581/html5/thumbnails/11.jpg)
SLIDING EFFECT
![Page 12: JQUERY TUTORIALS](https://reader036.vdocuments.us/reader036/viewer/2022081414/54b6b2374a7959e71f8b4581/html5/thumbnails/12.jpg)
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.
![Page 13: JQUERY TUTORIALS](https://reader036.vdocuments.us/reader036/viewer/2022081414/54b6b2374a7959e71f8b4581/html5/thumbnails/13.jpg)
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.
![Page 14: JQUERY TUTORIALS](https://reader036.vdocuments.us/reader036/viewer/2022081414/54b6b2374a7959e71f8b4581/html5/thumbnails/14.jpg)
Fade Effect
![Page 15: JQUERY TUTORIALS](https://reader036.vdocuments.us/reader036/viewer/2022081414/54b6b2374a7959e71f8b4581/html5/thumbnails/15.jpg)
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.
![Page 16: JQUERY TUTORIALS](https://reader036.vdocuments.us/reader036/viewer/2022081414/54b6b2374a7959e71f8b4581/html5/thumbnails/16.jpg)
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.
![Page 17: JQUERY TUTORIALS](https://reader036.vdocuments.us/reader036/viewer/2022081414/54b6b2374a7959e71f8b4581/html5/thumbnails/17.jpg)
Animation Effect
![Page 18: JQUERY TUTORIALS](https://reader036.vdocuments.us/reader036/viewer/2022081414/54b6b2374a7959e71f8b4581/html5/thumbnails/18.jpg)
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
![Page 19: JQUERY TUTORIALS](https://reader036.vdocuments.us/reader036/viewer/2022081414/54b6b2374a7959e71f8b4581/html5/thumbnails/19.jpg)
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.
![Page 20: JQUERY TUTORIALS](https://reader036.vdocuments.us/reader036/viewer/2022081414/54b6b2374a7959e71f8b4581/html5/thumbnails/20.jpg)
FIn
Mr. Ardee Aram
Moiselle Sarah C. Roxas
CPE 406PROFESSIONAL ELECTIVE 1