2. Agenda
jQuery API- Core
Selector and Context
Data Accessors
jQuery API -Attribute
- HTML Attributes
- Text Attributes
3. Quick Recap
jQuery is a javascript liabrary.
Has better browser copatiability.
Provides Rich Enduser Experience.
Lots of inbuilt functions and plugins.
All the code is written within $ sign.
4. jQuery API.. Core
The backbone of jquery.
Contains main jquery related functions.
Also contains list of object and data
accessor functions.
We will have a look at them from next
slide onwards.
5. jQuery Functions
jQuery( expression , context)
jQuery( html, ownerDocument)
jQuery(elements)
jQuery( callback)
See Next Slide for datails.
6. jQuery( expression , context)
This function accepts a string containing a
CSS selector which is then used to match
a set of elements.
Arguments are an expression ( an
expression to search with, compulsory)
and context ( any DOM or jquery context,
optional).
The core functionality of jQuery centers
around this function.
7. Continued…
Everything in jQuery is based upon this, or
uses this in some way.
The most basic use of this function is to
pass in an expression (usually consisting
of CSS), which then finds all matching
elements.
By default, if no context is specified, $()
looks for DOM elements within the context
of the current HTML document.
8. Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd"> <html>
<head>
<script src="http://code.jquery.com/jquery-latest.js
"></script> <script>
$(document).ready(function(){
$("div > p").css("border", "1px solid gray"); });
</script> </head>
<body>
<p>one</p> <div><p>two</p></div>
<p>three</p>
</body> </html>
9. jQuery( html, [ownerDocument]
)
Create DOM elements on-the-fly from the
provided String of raw HTML.
Simple elements without attributes, e.g.,
"<div />", are created via
document.createElement.
All other cases are parsed by assigning the
string to the .innerHTML property of a div
element.
The HTML string cannot contain elements
that are invalid within a div, such as html,
head, body, or title elements.
10. Continued…
Arguments are an html (A string of HTML
to create on the fly - compulsory) and
ownerDocument (A document in which the
new elements will be created - optional).
All HTML must be well-formed, otherwise
it may not work correctly across all
browsers.
Example :- $
("<div><p>Hello</p></div>").appendTo
("body") .
11. jQuery( elements )
Wrap jQuery functionality around a single
or multiple DOM Element(s).
This function accepts XML Documents and
Window objects as valid arguments even
though they are not DOM Elements.
Argument is element (DOM element(s) to
be encapsulated by a jQuery object-
compulsory).
Example :- $
(document.body).css( "background",
"black" );
12. jQuery( callback )
A shorthand for $(document).ready().
Argument is callback (The function to
execute when the DOM is ready -
Compulsory).
Allows you to bind a function to be
executed when the DOM document has
finished loading.
$(function(){
// Document is ready
});
14. each( callback )
Execute a function within the context of
every matched element.
Argument is callback(The callback to
execute for each matched element-
compulsory).
This means that every time the passed-in
function is executed (which is once for
every element matched) the 'this'
keyword points to the specific DOM
element.
17. Size() and length
The number of elements in the jQuery object.
Size() is slightly slower. So length should be
used.
Example :- <html> <head>
<script src="http://code.jquery.com/jquery-latest.js
"></script> <script>
$(document).ready(function(){
$(document.body).click(function () { $
(document.body).append($("<div>")); var n = $
("div").length; $("span").text("There are " + n + "
divs." + "Click to add more."); }).trigger('click'); //
trigger the click to start }); </script>
18. Continued
<style>
body { cursor:pointer; }
div { width:50px; height:30px; margin:5px;
float:left; background:green; }
span { color:red; } </style>
</head> <body>
<span></span>
<div></div>
</body> </html>
19. Selector and Context
New addition in jQuery 1.3.
A selector representing selector originally
passed to jQuery().
Context represents the DOM node context
originally passed to jQuery() (if none was
passed then context will be equal to the
document).
Useful for plugin developers.
We will see in the detail later.
20. Continued…
eq( position ) :- Reduce the set of matched
elements to a single element.
Example :- $("p").eq(1).css("color", "red") .
get( ) :- Access all matched DOM elements.
Example :- function disp(divs) {
var a = [];
for (var i = 0; i < divs.length; i++) {
a.push(divs[i].innerHTML); } $("span").text(a.join("
")); }
disp( $("div").get().reverse() );
21. Continued…
get( index ) :- Access a single matched
DOM element at a specified index in the
matched set.
Example :- $("*",
document.body).click(function (e)
{ e.stopPropagation();
var domEl = $(this).get(0);
$("span:first").text("Clicked on - " +
domEl.tagName); });
22. Continued…
index( subject ) :- Searches every matched
element for the object and returns the index
of the element.
If a jQuery object is passed, only the first
element is checked.
Returns -1 if the object wasn't found.
Example :- $("div").click(function () {
// this is the dom element clicked
var index = $("div").index(this);
$("span").text("That was div index #" + index); });
23. Data Accessors
data( name ) :- Returns value at named
data store for the element, as set by
data(name, value).
data( name, value ) :- Stores the value
in the named spot.
removeData( name ) :- Removes named
data store from an element.
24. Example
<html> <head>
<script src="
http://code.jquery.com/jquery-latest.js
"></script> <script> $
(document).ready(function(){
$("div").data("test", { first: 16, last: "pizza!" }); $
("span:first").text($("div").data("test").first); $
("span:last").text($("div").data("test").last); });
</script> <style> div { color:blue; }
span { color:red; } </style>
</head>
<body> <div> The values stored were
<span></span> and <span></span> </div>
25. jQuery API.. Attribute
Attributes are the properties associated
with any HTML element.
So attribute APIs deal with accessing any
attribute, getting and setting attribute
values and other related operations on
attributes.
26. attr( name )
Access a property on the first matched
element.
This method makes it easy to retrieve a
property value from the first matched
element.
Attributes include title, alt, src, href,
width, style, etc.
27. Example
<html> <head>
<script src="http://code.jquery.com/jquery-latest.js
"></script> <script> $(document).ready(function(){
var title = $("em").attr("title");
$("div").text(title); }); </script>
<style> em { color:blue; font-weight;bold; }
div { color:red; } </style>
</head> <body> <p> Once there was a
<em title="huge, gigantic">large</em> dinosaur...
</p>
The title of the emphasis is:<div></div>
</body> </html>
28. attr( properties )
Set a key/value object as properties to all
matched elements.
This serves as the best way to set a large
number of properties on all matched
elements.
Argument is properties i.e. a Key/value
pairs to set as object properties.
30. Other attr functions
attr( key, value ) :- Set a single property
to a value, on all matched elements.
attr( key, fn ) :- Set a single property to
a computed value, on all matched
elements.
In second type instead of supplying a
string value , a function is provided that
computes the value.
35. HTML Attributes
html( ) :- Get the html contents
(innerHTML) of the first matched element.
html( val ) :- Set the html contents of
every matched element.
Above properties will not work for XML
documents ( though it will work for
XHTML).
37. <body> <p>
<b>Click</b> to change the <span
id="tag">html</span> </p>
<p> to a <span id="text">text</span> node.
</p>
<p> This <button
name="nada">button</button> does nothing.
</p>
</body>
</html>
39. Text Attributes
text() :- Get the combined text contents
of all matched elements.
text( val ) :- Set the text contents of all
matched elements.
Above two work on both HTML and XML
documents.
Cannot be used on input elements. For
input field text use the val attribute.
40. Continued…
val( ) :- Get the input value of the first
matched element.
val( val ) :- Set the value attribute of
every matched element.
Val(val) also checks, or selects, all the
radio buttons, checkboxes, and select
options that match the set of values.
