Get the online training

Corejava Servlet Jsp  Php  Hibernate  Ajax Web Service   Ejb2.1 Ejb3.0 Struts Struts2  JPA Spring Ibatis   JSF    JSF2.0  CoreJavaDesignPattern    Jquery  Flex J2EE-Design-Patterns  Jboss7  Maven  Contact Me                                                                                                                                                                        
            IGNOU SMU PTU Project                                           Training                                                                                                                              

Contact Us  0091- 9210721663         jaiswaltraining@gmail.com

Web Service

jQuery Intro and Overview


What is jQuery
  • jQuery is an open source JavaScript library that simplifies the interactions
    between an HTML document, or more precisely the Document Object Model (DOM)
    and JavaScript.
  • Query is free, open source software.
Java Script
  • A scripting language  developed by Netscape  to enable Web  authors
    to design interactive sites.
  • It can interact with HTML source code, enabling Web authors to
    spice up their sites with dynamic content.
DOM(Document Object Model)
  • It is the specification for how objects in a Web page are represented.
  • The DOM defines what attributes are associated with each object,
    and how the objects and attributes can be manipulated.
jQuery Features
  • HTML element selections
  •   HTML element manipulation
  •   CSS manipulation
  •   HTML event functions
  •   JavaScript Effects and animations
  •   HTML DOM traversal and modification
  •   AJAX
  •   Utilities
What jQuery does
  • Access elements in a document.
  • Modify the appearance of a web page
  • Alter the content of a document
  • Respond to a user's interaction
  • Animate changes being made to a document
  • Retrieve information from a server without refreshing a page
  • Simplify common JavaScript tasks
Downloading jQuery
  • The offcial jQuery website (http://jquery.com/) is always the most up-to-date
    resource for code and news related to the library. 
  • To get started, we need a copy of jQuery, which can be downloaded right
    from the home page of the site. 
  • Several versions of jQuery may be available at any given moment.
  •  The most appropriate for us will be the latest uncompressed version of the library
  • No installation is required.
  • To use jQuery, we just need to place it on our site in a public location.
  • Since JavaScript is an interpreted language, there is no compilation or build phase to worry about.
  • Whenever we need a page to have jQuery available,
    we will simply refer to the fle's location from the HTML document.

Basic of jQuery
  • Selecting part of document is fundamental operation
  • A JQuery object is a wrapper for a selected group of DOM nodes
  • $() function is a factory method that creates JQuery objects
  • $(“dt”) is a JQuery object containing all the “dt” elements in the document
  • .addClass() method changes the DOM nodes by adding a ‘class’ attribute
  • The ‘class’ attribute is a special CSS construct that provides a visual
    architecture independent of the element structures
  • $(“dt”).addClass(“emphasize”) will change all occurrences of <dt> to <dt class=“emphasize”>

Adding the jQuery Library to Your Pages

<script type="text/javascript" src="jquery.js"></script>

jQuery-----“Write less, do more.”
  • Finding some elements (via CSS selectors) and
    doing something with  them (via jQuery methods)
  • Chaining multiple jQuery methods on a set of elements
  • Using the jQuery wrapper and implicit iteration

jQuery API's
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities

jQuery Fundamentals

jQuery Wrapper
  • It is a method that uses of selectors, which concisely represent elements
    based upon their attributes or positions within the HTML document.
a - refers to group of all links (<a> element).
  • To collect the <a> element in your page,
    we can use the syntax:

  • Applying the jQuery to collect the elements, this would be:
Utility function
  • It a services or methods that provide additional functions to jQuery users.

Document ready handler
  • This handler is executed when the DOM has been created,
     but before the page is presented to the user. 
  • This guarantees that you can set up the page prior to the user being able to interact with it.
  • Document ready handler can be done using the syntax below :

            $(document).ready(function() {
  • First, we wrap the document instance with the jQuery() function,
  • Then we apply the ready() method, passing a function to be executed
    when the document is ready to be manipulated.
Making DOM elements
  • We can create DOM elements on the fly by passing the $() function a string
    that contains the HTML markup for those elements.
  •  For example, we can create a new paragraph element as follows:
                $("<p>Hi there!</p>")

jQuery Syntax
  • $(this).hide()
    • Demonstrates the jQuery hide() function, hiding the current HTML element.
  • $("#test").hide()
    • Demonstrates the jQuery hide() function, hiding the element with id="test“.
  • $("p").hide()
    • Demonstrates the jQuery hide() function, hiding all <p> elements.
  • $(".test").hide()
    • Demonstrates the jQuery hide() function, hiding all elements with class="test".
The jQuery syntax is tailor made for selecting HTML elements
and perform some action on the element(s).
  • Basic syntax is: $(selector).action()
  • A dollar sign to define jQuery alias.
  • A (selector) to "query (or find)" HTML elements
  • A jQuery action() to be performed on the element(s)
A simple Example:-
  • In this example, we are changing the <div> tag contents through jQuery.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<script type="text/JavaScript" src="jquery.js"></script>

<script type="text/JavaScript" src="myscript.js"></script>
<div>old content</div>
<div>old content</div>
<div>old content</div>
<div>old content</div>
<div>old content</div></b>

  • Overriding jQuery ready() method.

//update the text contained inside of all divs

         function() {
alert('Document Handler is Ready');
$('div').text('new content');});

  • Run demo.html file.

Download code

  • In this example we are counting the number of html elements in the page.
  • $("element").length:- return the number of elements in the page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<a href='#'>link 1</a><br>
<a href='#'>link 2</a><br>
<a href='#'>link 3</a><br>
<a href='#'>link 4</a><br>
<a href='#'>link 5</a><br>
<a href='#'>link 6</a><br>

<script type="text/JavaScript" 
<script type="text/JavaScript">
     //alerts there are 6 elements
     alert('Page contains ' + $('a').length +  ' <a> elements!');

  • Run the demo2.html.

Download code

  • In this example we are searching with the first form element, 
    using DOM reference as the context
  • searching with the first form element,  using wrapper reference as the context
  • searching within the body element for all input elements using an expression

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<input name="" type="checkbox" />
<input name="" type="radio" />
<input name="" type="text" />
<input name="" type="button" />

<input name="" type="checkbox" />
<input name="" type="radio" />
<input name="" type="text" />
<input name="" type="button" />

<input name="" type="checkbox" />
<input name="" type="radio" />
<input name="" type="text" />
<input name="" type="button" />

<script type="text/JavaScript" 
<script type="text/JavaScript">

 //searches within all form elements, using a wrapper for context, alerts "8 inputs"
 alert('selected ' + jQuery('input',$('form')).length + ' inputs');

 //search with the first form element, using DOM reference as the context, alerts 
 //"4 inputs"
 alert('selected' + jQuery('input',document.forms[0]).length + ' inputs');

 //search within the body element for all input elements using an expression, 
 //alerts "12 inputs" 
 alert('selected' + jQuery('input','body').length + ' inputs');


  • Run demo3.html

Download code