jQuery

Agenda
 Introduction, Prerequisite  jQuery Filters
 What is jQuery?  jQuery Attributes
 What is available with  jQuery Events
jQuery?  jQuery Callback Functions
 How to use jQuery?  jQuery HTML Manipulation
 jQuery Syntax  jQuery CSS Manipulation
 jQuery Selectors

Introduction & Prerequisites
 A JavaScript library
 Easy to learn and implement
 jQuery is a fast and concise JavaScript Library that simplifies
 HTML document traversing
 Event handling
 Animation
 AJAX Interaction for rapid web development

 Prerequisites
 HTML
 CSS
 JavaScript

What is jQuery?
 A library of JavaScript Functions.
 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

 An open source project, maintained by group of developers
with active support base and well written documentation

What is available with jQuery
 Cross Browser support  JavaScript Animation
 AJAX Functions  Hundreds of plug-ins for
 CSS functions pre-built user interfaces,
advanced animation and
 DOM Manipulation
form validation etc …
 DOM Traversing
 Expandable using custom
 Attribute Manipulation plug-ins
 Event detection and  Small footprint
handling

How to use jQuery?
 A single JavaScript file, containing all the jQuery methods.

 Add the following code into your html/jsp page and call the jQuery APIs.
 <head>
<script type="text/javascript" src="jquery.js"></script>
</head>
 For Example
 <html>
<head>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

How to use jQuery?Cont…
 In order to use jQuery you need to load it.
 You can include it locally on your own server:
 <script src="/js/jquery.js">
 Or use one of the CDN's made available:
 ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
 ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js
 CDN's are Gzipped and minified

jQuery Syntax
 With jQuery you select (query) HTML elements and
perform "actions" on them.
 jQuery Syntax Examples
 $(this).hide()
 $("#test").hide()
 $("p").hide()
 $(".test").hide()

 Basic syntax is: $(selector).action()
 A dollar sign to define jQuery
 A (selector) to "query (or find)" HTML elements
 A jQuery action() to be performed on the element(s)

jQuery Selectors
 To select HTML elements (or groups of elements) by
element name, attribute name or by content.

 jQuery Element Selectors
 Uses CSS selectors to select HTML elements.
 $("p“)
 $("p.intro“)
 $("p#demo“)

jQuery Selectors
 jQuery Attribute Selectors
 jQuery uses XPath expressions to select elements with given
attributes.
 $("[href ]“)
 $("[href='#']")
 $("[href!='#']“).
 $("[href$='.jpg']“)
 jQuery CSS Selectors
 jQuery CSS selectors can be used to change CSS properties for
HTML elements.
 For Ex :
 $("p").css("background-color","yellow");

jQuery Selectors
 Few samples for the selectors
Syntax Description
$(this) Current HTML element
$("p") All <p> elements
$("p.intro") All <p> elements with class="intro"
$(".intro") All elements with class="intro"
$("#intro") The first element with id="intro"
$("ul li:first") The first <li> element of each <ul>
$("[href$='.jpg']") All elements with an href attribute that ends with ".jpg"
$("div#intro All elements with class="head" inside a <div> element with
.head") id="intro"

jQuery Filters
 First paragraph – p:first
 Last list item – li:last
 Fourth link – a:nth(3)
 Fourth Div – div:eq(3)
 Every other Paragraph – p:odd or p:even
 Every link after/upto 4th – a:gt(3) or a:lt(4)
 Links that contain word like click – a:contains(“click”)
 All radio inputs with in first form - $(“input:radio”,
documents.forms[0])

jQuery Attributes
 Read
 $(#image).attr(“src”);
 Set
 $(#image).attr(“src” , “images/jquery1.jpg”);
 Multiple Set
 $(#image).attr({src: “images/jquery1.jpg” , alt: “jQuery”});
 Set Class
 $(p:last).addClass(“selected”);
 Read/Set Html
 $(#id).html() & $(#id).html(“value”);

jQuery Events
 The jQuery event handling methods are core functions in jQuery.

 For Example
 <html>
<head>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body></html>

jQuery Callback Functions
 A callback function is executed after the current
animation (effect) is finished.
 Syntax
 $(selector).hide(speed,callback)
 For Ex:
 $("p").hide(1000,function(){
alert("The paragraph is now hidden");
});

jQuery HTML Manipulation
 jQuery can manipulate the HTML elements and
attributes
 Changing HTML Content
 $(selector).html(content)
 Adding HTML content
 $(selector).append(content)
 $(selector).prepend(content)
 $(selector).after(content)
 $(selector).before(content)

jQuery HTML Manipulation
 jQuery HTML Manipulation Methods

Function Description

$(selector).html(content) Changes the (inner) HTML of selected elements

Appends content to the (inner) HTML of selected
$(selector).append(content)
elements

$(selector).after(content) Adds HTML after selected elements

jQuery CSS Manipulation
 jQuery css() Method
 css(name) - Return CSS property value
 css(name,value) - Set CSS property and value
 css({properties}) - Set multiple CSS properties and values
 Examples
 Return CSS Property
 $(this).css("background-color");
 Set CSS Property & value
 $("p").css("background-color"," yellow");
 Set Multiple values in CSS
 $("p").css({"background-color":"yellow","font-size":"200%"});
 Size Manipulation
 $("#div1").height("200px"); $("#div2").width("300px");

 Offset
 $(this).offset().left
 $(this).offset().top

 Position
 $(this).position().left
 $(this).position().top

 jQuery CSS Manipulation Methods
CSS Properties Description

Get the style property value of the first
$(selector).css(name)
matched element

Set the value of one style property for
$(selector).css(name,value)
matched elements

Set multiple style properties for
$(selector).css({properties})
matched elements

$(selector).height(value) Set the height of matched elements
$(selector).width(value) Set the width of matched elements

jQuery

More Related Content

jQuery