JQuery

http://www.bu.edu.eg/staff/mloey

Transcript

1. jQUERY 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 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. $("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() • 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 THaNK U