Jquery 2

Jquery 2
Manish Singh
and
Hussain Fakhruddin

Agenda
 jQuery API- Core
 Selector and Context
 Data Accessors
 jQuery API -Attribute
- HTML Attributes
- Text Attributes

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.

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.

jQuery Functions
 jQuery( expression , context)
 jQuery( html, ownerDocument)
 jQuery(elements)
 jQuery( callback)
 See Next Slide for datails.

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.

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.

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>

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.

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") .

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" );

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
});

Object Accesors
 Each()
 Size()
 Length
 Selector()
 Context()
 Eq()
 Get()
 Index()

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.

Example
<html> <head>
"></script> <script type=“text/javascript”>
$(document.body).click(function () {
$("div").each(function (i) {
if (this.style.color != "blue") {
this.style.color = "blue";
} else {
this.style.color = "";
} }); }); }); </script>

Size() and length
The number of elements in the jQuery object.
Size() is slightly slower. So length should be
used.
Example :- <html> <head>
"></script> <script>
$(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>

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>

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.

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() );

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); });

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); });

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.

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>

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.

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.

Example
<html> <head>
"></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>

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.

Example
<html> <head>
<script src="http://code.jquery.com/jquery-
latest.js"></script>
<script> $(document).ready(function(){
$("img").attr({ src: "/images/hat.gif",
title: "jQuery", alt: "jQuery Logo" }); $
("div").text($("img").attr("alt")); }); </script>
<style> img { padding:10px; }
div { color:red; font-size:24px; } </style>
</head> <body> <img /> <img /> <img />
<div><B>Attribute of Ajax</B></div>
</body> </html>

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.

Example 1
<html> <head>
latest.js"></script> <script> $
(document).ready(function(){ $
("button:gt(1)").attr("disabled","disabled"); });
</script> <style> button { margin:10px; }
</style>
</head> <body>
<button>0th Button</button>
<button>1st Button</button>
<button>2nd Button</button>
</body> </html>

Example 2
<html> <head>
$("div").attr("id", function (arr) { return "div-id" + arr; })
.each(function () {
$("span", this).html("(ID = '<b>" + this.id +
"</b>')"); }); }); </script>
<style> div { color:blue; } span { color:red; }
b { font-weight:bolder; } </style>
</head> <body> <div>Zero-th <span></span></div>
<div>First <span></span></div>
<div>Second <span></span></div> </body> </html>

removeAttr( name )
 Remove an attribute from each of the
matched elements.
 Takes name of the attribute as parameter.

Example
<html> <head>
("button").click(function () { $
(this).next().removeAttr("disabled") .focus()
.val("editable now"); }); }); </script>
</head> <body>
<button>Enable</button> <input type="text"
disabled="disabled" value="can't edit this" />
</body> </html>

HTML Attributes
 html( ) :- Get the html contents
(innerHTML) of the first matched element.
 html( val ) :- Set the html contents of
 Above properties will not work for XML
documents ( though it will work for
XHTML).

Example
<html> <head>
$("p").click(function () {
var htmlStr = $(this).html(); $
(this).text(htmlStr); }); }); </script>
<style> p { margin:8px; font-size:20px;
color:blue; cursor:pointer; }
b { text-decoration:underline; }
button { cursor:pointer; } </style>
</head >

<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>

Example 2
<html> <head>
$("div").html("<span class='red'>Hello
<b>Again</b></span>"); }); </script>
<style> .red { color:red; } </style>
</head> <body> <span>Hello</span>
<div></div>
<div></div>
<div></div>
</body> </html>

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.

Continued…
 val( ) :- Get the input value of the first
matched element.
 val( val ) :- Set the value attribute of
 Val(val) also checks, or selects, all the
radio buttons, checkboxes, and select
options that match the set of values.

Example
<html> <head>
("#single").val("Single2"); $
("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check1","check2",
"radio1" ]); }); </script> <style> body
{ color:blue; } </style>
</head> <body> <select id="single">
<option>Single</option>
<option>Single2</option> </select>

<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select> <br/> <input type="checkbox"
name="checkboxname" value="check1"/> check1
<input type="checkbox" name="checkboxname"
value="check2"/> check2
<input type="radio" name="r" value="radio1"/>
radio1
<input type="radio" name="r" value="radio2"/>
radio2
</body> </html>

Thank You!!!
Email :
manish_singh185@yahoo.com
hussulinux@gmail.com

Jquery 2

More Related Content

What's hot (20)

Similar to Jquery 2 (20)

Recently uploaded (20)

Jquery 2