JQuery Comprehensive Overview
-
Upload
benha-university -
Category
Technology
-
view
585 -
download
2
Transcript of JQuery Comprehensive Overview
![Page 1: JQuery Comprehensive Overview](https://reader035.fdocuments.in/reader035/viewer/2022081521/540cc6717bef0ad7288b6111/html5/thumbnails/1.jpg)
JQueryMohamed Loey
![Page 2: JQuery Comprehensive Overview](https://reader035.fdocuments.in/reader035/viewer/2022081521/540cc6717bef0ad7288b6111/html5/thumbnails/2.jpg)
Agenda
Part I: Introduction
Part II: JQuery Syntax
Part III: JQuery Effects
![Page 3: JQuery Comprehensive Overview](https://reader035.fdocuments.in/reader035/viewer/2022081521/540cc6717bef0ad7288b6111/html5/thumbnails/3.jpg)
Agenda
Part I: IntroductionWhat is JQuery?Why JQuery? Installing JQuery
![Page 4: JQuery Comprehensive Overview](https://reader035.fdocuments.in/reader035/viewer/2022081521/540cc6717bef0ad7288b6111/html5/thumbnails/4.jpg)
What is JQuery?• JQuery is a fast, small, and feature-
rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
• JQuery is a lightweight, "write less, do more".
![Page 5: JQuery Comprehensive Overview](https://reader035.fdocuments.in/reader035/viewer/2022081521/540cc6717bef0ad7288b6111/html5/thumbnails/5.jpg)
Why jQuery?• Cross-browser Compatibility • Fast & Small• Many of the biggest companies on
the Web use JQuery, such as:1. Google2. Microsoft3. IBM
![Page 6: JQuery Comprehensive Overview](https://reader035.fdocuments.in/reader035/viewer/2022081521/540cc6717bef0ad7288b6111/html5/thumbnails/6.jpg)
Installing JQUERY1. Download the jQuery library from
jQuery.com
2. Add Jquery.js to your web page like:
![Page 7: JQuery Comprehensive Overview](https://reader035.fdocuments.in/reader035/viewer/2022081521/540cc6717bef0ad7288b6111/html5/thumbnails/7.jpg)
Agenda
Part I: JQuery Syntax JQuery Syntax JQuery Selectors
Element Selector The #id Selector The .class Selector
JQuery Event
![Page 8: JQuery Comprehensive Overview](https://reader035.fdocuments.in/reader035/viewer/2022081521/540cc6717bef0ad7288b6111/html5/thumbnails/8.jpg)
jQuery Syntax• With jQuery you select (query) HTML
elements and perform "actions" on them.
• Basic syntax is: $(selector).action() A $ sign to define/access jQuery A (selector) to "query (or find)" HTML
elements A jQuery action() to be performed on the
element(s)
![Page 9: JQuery Comprehensive Overview](https://reader035.fdocuments.in/reader035/viewer/2022081521/540cc6717bef0ad7288b6111/html5/thumbnails/9.jpg)
Examples$(this).hide() - hides the current
element.$("p").hide() - hides all <p>
elements.$(".test").hide() - hides all elements
with class="test".$("#test").hide() - hides the element
with id="test".
![Page 10: JQuery Comprehensive Overview](https://reader035.fdocuments.in/reader035/viewer/2022081521/540cc6717bef0ad7288b6111/html5/thumbnails/10.jpg)
jQuery Selectors
oJQuery selectors are one of the most important parts of the jQuery library.
oJQuery selectors allow you to select and manipulate HTML element(s).
![Page 11: JQuery Comprehensive Overview](https://reader035.fdocuments.in/reader035/viewer/2022081521/540cc6717bef0ad7288b6111/html5/thumbnails/11.jpg)
element Selector
oThe jQuery element selector selects elements based on the element name.
oYou can select all <p> elements on a page like this: $("p")
![Page 12: JQuery Comprehensive Overview](https://reader035.fdocuments.in/reader035/viewer/2022081521/540cc6717bef0ad7288b6111/html5/thumbnails/12.jpg)
element Selector
oExample:
![Page 13: JQuery Comprehensive Overview](https://reader035.fdocuments.in/reader035/viewer/2022081521/540cc6717bef0ad7288b6111/html5/thumbnails/13.jpg)
The #id Selector
oThe JQuery #id selector uses the id attribute of an HTML tag to find the specific element.
oExample:
![Page 14: JQuery Comprehensive Overview](https://reader035.fdocuments.in/reader035/viewer/2022081521/540cc6717bef0ad7288b6111/html5/thumbnails/14.jpg)
The .class Selector
oThe JQuery class selector finds elements with a specific class.
oExample:
![Page 15: JQuery Comprehensive Overview](https://reader035.fdocuments.in/reader035/viewer/2022081521/540cc6717bef0ad7288b6111/html5/thumbnails/15.jpg)
jQuery Event
o jQuery is made to respond to events in an HTML page.
oHere are some common events:Mouse Events
Keyboard Events
Form Events Document/Window Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
![Page 16: JQuery Comprehensive Overview](https://reader035.fdocuments.in/reader035/viewer/2022081521/540cc6717bef0ad7288b6111/html5/thumbnails/16.jpg)
Agenda
Part III: JQuery Effects JQuery Hide/Show JQuery Fade JQuery Slide JQuery Animate JQuery Stop Animation
![Page 17: JQuery Comprehensive Overview](https://reader035.fdocuments.in/reader035/viewer/2022081521/540cc6717bef0ad7288b6111/html5/thumbnails/17.jpg)
jQuery Hide and Show
oSyntax:
oExample:
![Page 18: JQuery Comprehensive Overview](https://reader035.fdocuments.in/reader035/viewer/2022081521/540cc6717bef0ad7288b6111/html5/thumbnails/18.jpg)
jQuery Fading
• JQuery has the following fade methods:• fadeIn()• fadeOut()• fadeToggle()• fadeTo()
![Page 19: JQuery Comprehensive Overview](https://reader035.fdocuments.in/reader035/viewer/2022081521/540cc6717bef0ad7288b6111/html5/thumbnails/19.jpg)
jQuery fadeIn()
• The jQuery fadeIn() method is used to fade in a hidden element. • Example:
![Page 20: JQuery Comprehensive Overview](https://reader035.fdocuments.in/reader035/viewer/2022081521/540cc6717bef0ad7288b6111/html5/thumbnails/20.jpg)
jQuery fadeOut()
• The jQuery fadeOut() method is used to fade out a visible element. • Example:
![Page 21: JQuery Comprehensive Overview](https://reader035.fdocuments.in/reader035/viewer/2022081521/540cc6717bef0ad7288b6111/html5/thumbnails/21.jpg)
jQuery fadeToggle()
• The jQuery fadeToggle() method toggles between the fadeIn() and fadeOut() methods.• Example:
![Page 22: JQuery Comprehensive Overview](https://reader035.fdocuments.in/reader035/viewer/2022081521/540cc6717bef0ad7288b6111/html5/thumbnails/22.jpg)
jQuery fadeTo()
• The jQuery fadeTo() method allows fading to a given opacity (value between 0 and 1). • Example:
![Page 23: JQuery Comprehensive Overview](https://reader035.fdocuments.in/reader035/viewer/2022081521/540cc6717bef0ad7288b6111/html5/thumbnails/23.jpg)
jQuery Sliding
• JQuery has the following slide methods:• slideDown()• slideUp()• slideToggle()
![Page 24: JQuery Comprehensive Overview](https://reader035.fdocuments.in/reader035/viewer/2022081521/540cc6717bef0ad7288b6111/html5/thumbnails/24.jpg)
jQuery slideDown()
• The jQuery slideDown() method is used to slide down an element. • Example:
![Page 25: JQuery Comprehensive Overview](https://reader035.fdocuments.in/reader035/viewer/2022081521/540cc6717bef0ad7288b6111/html5/thumbnails/25.jpg)
jQuery slideUp()
• The jQuery slideUp() method is used to slide up an element. • Example:
![Page 26: JQuery Comprehensive Overview](https://reader035.fdocuments.in/reader035/viewer/2022081521/540cc6717bef0ad7288b6111/html5/thumbnails/26.jpg)
jQuery Animations
• The jQuery animate() method is used to create custom animations. • Example:
![Page 27: JQuery Comprehensive Overview](https://reader035.fdocuments.in/reader035/viewer/2022081521/540cc6717bef0ad7288b6111/html5/thumbnails/27.jpg)
jQuery Stop Animations
• The jQuery stop() method is used to stop animations or effects before it is finished. • Example:
![Page 28: JQuery Comprehensive Overview](https://reader035.fdocuments.in/reader035/viewer/2022081521/540cc6717bef0ad7288b6111/html5/thumbnails/28.jpg)
THANK U