This document provides an overview and introduction to jQuery. It covers: - What jQuery is and why it's useful - Installing jQuery - Basic jQuery syntax using selectors to find and manipulate elements - Common jQuery events - Effects like hide/show, fade, slide, and animate to transition elements - The stop method to halt animations

1. JQuery
Mohamed Loey

2. Agenda
Part I: Introduction
Part II: JQuery Syntax
Part III: JQuery Effects

3. Agenda
Part I: Introduction
 What is JQuery?
 Why JQuery?
 Installing JQuery

4. 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".

5. Why jQuery?
• Cross-browser Compatibility
• Fast & Small
• Many of the biggest companies on the Web use
JQuery, such as:
1. Google
2. Microsoft
3. IBM

6. Installing JQUERY
1. Download the jQuery library from jQuery.com
2. Add Jquery.js to your web page like:

7. Agenda
Part I: JQuery Syntax
 JQuery Syntax
 JQuery Selectors
 Element Selector
 The #id Selector
 The .class Selector
 JQuery Event

8. 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)

9. 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".

10. 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).

11. 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")

12. element Selector
oExample:

13. The #id Selector
oThe JQuery #id selector uses the id attribute
of an HTML tag to find the specific element.
oExample:

14. The .class Selector
oThe JQuery class selector finds elements with
a specific class.
oExample:

15. jQuery Event
ojQuery 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

16. Agenda
Part III: JQuery Effects
 JQuery Hide/Show
 JQuery Fade
 JQuery Slide
 JQuery Animate
 JQuery Stop Animation

17. jQuery Hide and Show
oSyntax:
oExample:

18. jQuery Fading
• JQuery has the following fade methods:
• fadeIn()
• fadeOut()
• fadeToggle()
• fadeTo()

19. jQuery fadeIn()
• The jQuery fadeIn() method is used to fade
in a hidden element.
• Example:

20. jQuery fadeOut()
• The jQuery fadeOut() method is used to fade
out a visible element.
• Example:

21. jQuery fadeToggle()
• The jQuery fadeToggle() method toggles
between the fadeIn() and fadeOut() methods.
• Example:

22. jQuery fadeTo()
• The jQuery fadeTo() method allows fading to
a given opacity (value between 0 and 1).
• Example:

23. jQuery Sliding
• JQuery has the following slide methods:
• slideDown()
• slideUp()
• slideToggle()

24. jQuery slideDown()
• The jQuery slideDown() method is used to
slide down an element.
• Example:

25. jQuery slideUp()
• The jQuery slideUp() method is used to slide
up an element.
• Example:

26. jQuery Animations
• The jQuery animate() method is used to
create custom animations.
• Example:

27. jQuery Stop Animations
• The jQuery stop() method is used to stop
animations or effects before it is finished.
• Example:

28. THANK U