Query is a JavaScript Library.
jQuery greatly simplifies JavaScript programming.
jQuery is easy to learn.
<html>
<head>
<script
type="text/javascript" src="jquery.js"></script>
<script
type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If
you click on me, I will disappear.</p>
</body>
</html>
What is jQuery?
jQuery is a library of JavaScript Functions.
jQuery is a lightweight "write less, do
more" JavaScript library.
The jQuery library contains the following
features:
- HTML element selections
- HTML element manipulation
- CSS manipulation
- HTML event functions
- JavaScript Effects and animations
- HTML DOM traversal and modification
- AJAX
- Utilities
·
Adding the jQuery Library to Your Pages
The jQuery library is stored as a single
JavaScript file, containing all the jQuery methods.
It can be added to a web page with the
following mark-up:
<head>
<script
type="text/javascript" src="jquery.js"></script>
</head>
jQuery Selectors
|
|
|
jQuery selectors allow you to select and
manipulate HTML elements as a group or as a single element.
jQuery Selectors
In the previous chapter we looked at some
examples of how to select different HTML elements.
It is a key point to learn how jQuery
selects exactly the elements you want to apply an effect to.
jQuery selectors allow you to select HTML
elements (or groups of elements) by element name, attribute name or by content.
jQuery Element
Selectors
jQuery uses CSS selectors to select HTML
elements.
$("p") selects all <p>
elements.
$("p.intro") selects all
<p> elements with class="intro".
$("p#demo") selects all <p>
elements with id="demo".
jQuery Attribute
Selectors
jQuery uses XPath expressions to select
elements with given attributes.
$("[href]") select all elements
with an href attribute.
$("[href='#']") select all
elements with an href value equal to "#".
$("[href!='#']") select all
elements with an href attribute NOT equal to "#".
$("[href$='.jpg']") select all
elements with an href attribute that ends with ".jpg".
jQuery CSS Selectors
jQuery CSS selectors can be used to change
CSS properties for HTML elements.
The following example changes the
background-color of all p elements to yellow:
$("p").css("background-color","yellow");
Here are some examples of event methods in
jQuery:
|
Event
Method
|
Description
|
|
$(document).ready(function)
|
Binds
a function to the ready event of a document
(when
the document is finished loading)
|
|
$(selector).click(function)
|
Triggers,
or binds a function to the click event of selected elements
|
|
$(selector).dblclick(function)
|
Triggers,
or binds a function to the double click event of selected elements
|
|
$(selector).focus(function)
|
Triggers,
or binds a function to the focus event of selected elements
|
|
$(selector).mouseover(function)
|
Triggers,
or binds a function to the mouseover event of selected elements
|
jQuery Effects
Here are some examples of effect functions in
jQuery:
|
Function
|
Description
|
|
$(selector).hide()
|
Hide
selected elements
|
|
$(selector).show()
|
Show
selected elements
|
|
$(selector).toggle()
|
Toggle
(between hide and show) selected elements
|
|
$(selector).slideDown()
|
Slide-down
(show) selected elements
|
|
$(selector).slideUp()
|
Slide-up
(hide) selected elements
|
|
$(selector).slideToggle()
|
Toggle
slide-up and slide-down of selected elements
|
|
$(selector).fadeIn()
|
Fade
in selected elements
|
|
$(selector).fadeOut()
|
Fade
out selected elements
|
|
$(selector).fadeTo()
|
Fade
out selected elements to a given opacity
|
|
$(selector).animate()
|
Run
a custom animation on selected elements
|
