agENDa
Part I: Introduction
What is JQuery?
Why JQuery?
Installing JQuery
Slide 4
Slide 4 text
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".
Slide 5
Slide 5 text
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
Slide 6
Slide 6 text
INSTallINg jQUERY
1. Download the jQuery library from jQuery.com
2. Add Jquery.js to your web page like:
Slide 7
Slide 7 text
agENDa
Part I: JQuery Syntax
JQuery Syntax
JQuery Selectors
Element Selector
The #id Selector
The .class Selector
JQuery Event
Slide 8
Slide 8 text
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)
Slide 9
Slide 9 text
ExamplES
$(this).hide() - hides the current element.
$("p").hide() - hides all
elements.
$("p").hide() - hides all
elements.
$(".test").hide() - hides all elements with
class="test".
$("#test").hide() - hides the element with
id="test".
Slide 10
Slide 10 text
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).
Slide 11
Slide 11 text
ElEmENT SElEcTOR
oThe jQuery element selector selects
elements based on the element name.
oYou can select all
elements on a
page like this: $("p")
Slide 12
Slide 12 text
ElEmENT SElEcTOR
oExample:
Slide 13
Slide 13 text
THE #ID SElEcTOR
oThe JQuery #id selector uses the id attribute
of an HTML tag to find the specific element.
oExample:
Slide 14
Slide 14 text
THE .claSS SElEcTOR
oThe JQuery class selector finds elements with
a specific class.
oExample:
Slide 15
Slide 15 text
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