1.
JQuery is a JavaScript library
2.
Features of JQuery
·
HTML element selection
·
HTML element manipulation
·
CSS manipulation
·
HTML event functions
·
JavaScript effect and animation
·
AJAX
·
Utilities
3.
To add JQuery to
a page
<head>
<script
type=”text/javascript” src=”jquery.js”>
</script>
</head>
JQury tag should
be inside <head > tag
4.
Two version of JQuery are available
·
Minified
·
Uncompressed( for debugging and testing purpose)
5.
To use hosted library from Google
<head>
<script
=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”>
</script>
</head>
6.
JQuery Syntax:
$(selector).action()
7.
Document Ready function skeleton
$(document).ready(function){
-
- - - - - - - -
-
- - - - - - - -
-
- - -- - - - - -
});
This is done to
prevent any JQuery code from running before the document is finished loading
Ex.:- Trying to hide an element that doesn’t exist
Trying to get size of an image that
is not loaded
8.
JQuery selector allows to select HTML element by
·
Element name
·
Attribute name
·
Content
9.
Element selector example:
·
$("p") selects all <p>
elements.
·
$("p.intro") selects all <p>
elements with class="intro".
·
$("p#demo") selects all <p>
elements with id="demo".
10. Attribute
selection Example: jQuery uses XPath expressions to select
elements with given attributes.
·
$("[href]") select all elements with
a href attribute.
·
$("[href='#']") select all elements
with a href value equal to "#".
·
$("[href!='#']") select all elements
with a href attribute NOT equal to "#".
·
$("[href$='.jpg']") select all
elements with a href attribute that ends with ".jpg".
11. CSS
selection example:
·
$("p").css("background-color","blue");
12. Some more Examples
Selector
|
Example
|
Selects
|
|
|
$("*")
|
All elements
|
.class.class
|
$(".intro.demo")
|
All elements with the
classes "intro" and "demo"
|
|
|
$("p:first")
|
The first p element
|
|
|
$("p:last")
|
The last p element
|
|
|
$("tr:even")
|
All even tr elements
|
|
|
$("tr:odd")
|
All odd tr elements
|
|
|
|
|
|
$("ul li:eq(3)")
|
The fourth element in a
list (index starts at 0)
|
|
|
$("ul li:gt(3)")
|
List elements with an index
greater than 3
|
|
|
$("ul li:lt(3)")
|
List elements with an index
less than 3
|
|
|
$("input:not(:empty)")
|
All input elements that are
not empty
|
|
|
$(":animated")
|
All animated elements
|
|
|
$(":contains('W3Schools')")
|
All elements which contains
the text
|
|
|
$(":empty")
|
All elements with no child
(elements) nodes
|
|
|
$("[href='default.htm']")
|
All elements with a href
attribute value equal to "default.htm"
|
|
|
$("[href$='.jpg']")
|
All elements with a href
attribute value ending with ".jpg"
|
13. To put
JQuery functions in a separate file is always a god idea. To use that js file
<head>
<script type="text/javascript"
src="jquery.js"></script>
<script type="text/javascript"
src="my_jquery_functions.js"></script>
</head>
14.
The jQuery noConflict()
method specifies a custom name (like jq), instead of using the dollar sign.
<html>
<head>
<script
type="text/javascript" src="jquery.js"></script>
<script
type="text/javascript">
var
jq=jQuery.noConflict();
-
jq(document).ready(function(){
-
- - - -
-
- - - -
});
});
</script>
</head>
</html>
15. The
syntax of jQuery's method for making custom animations is:
$(selector).animate({params},[duration],[easing],[callback])
16. JavaScript
statements are executed line by line. However, with animations, the next line of code can be run even though the
animation is not finished. This can create errors. To prevent this, you can
create a callback function. A callback function is executed after the current
animation (effect) is finished.
17. Changing HTML Content
·
$(selector).html(content)
·
$(selector).append(content)
·
$(selector).prepend(content)
·
$(selector).after(content)
·
$(selector).before(content)
18. The css() method has three different syntaxes, to perform
different tasks.
·
css(name) - Return CSS property value
·
css(name,value) - Set CSS property and value
·
css({properties}) - Set multiple CSS
properties and values
19. The
jQuery load() method is a simple (but very powerful) AJAX function. It has the following syntax:
$(selector).load(url,data,callback)
20. $.ajax(options) is the syntax of the low level AJAX function.
