Scribd
Upload
43 views39 pages

Jquery Anica

This document provides an overview of jQuery, a popular JavaScript library. It discusses how jQuery simplifies DOM navigation and event handling, makes Ajax calls easier, and supports animations and effects. Key points include that jQuery uses CSS-like selectors, has a compact programming model, supports cross-browser compatibility, and has a large developer community and ecosystem of plugins. Examples demonstrate basic concepts like selecting elements and performing actions with methods.

Uploaded by

emraan khan
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
43 views39 pages

Jquery Anica

This document provides an overview of jQuery, a popular JavaScript library. It discusses how jQuery simplifies DOM navigation and event handling, makes Ajax calls easier, and supports animations and effects. Key points include that jQuery uses CSS-like selectors, has a compact programming model, supports cross-browser compatibility, and has a large developer community and ecosystem of plugins. Examples demonstrate basic concepts like selecting elements and performing actions with methods.

Uploaded by

emraan khan
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 39

Naresh Information Technologies

jQuery
Nagaraju Bende
MCPD.NET Sr Consultant,Trainer

http://nbende.wordpress.com

About

JAvascript
can also be used outside the

JavaScript is a weakly typed, classless,


prototype based OO language, that

browser. It is not a browser DOM.

The worlds most misunderstood programming language.

Most People Say

With A

JAX

Javascript has become essential to current web page development, but Javascript is not a good language design Javascript has become bloated
DOM navigation Browser differences

Writing Javascript code is tedious, timeconsuming, and error-prone

jQuery
jQuery is a lightweight, open-source JavaScript library that simplifies interaction between HTML and

JavaScript

It was and still being developed by John Resig from Mozilla and was

first announced in
January 2006

with jQuery
jQuery makes writing Javascript much easier
DOM navigation (css-like syntax) Apply methods to sets of DOM elements Builder model (chain method calls) Extensible and there are tons of libraries Handles most browser differences so you dont have to

Server provides data jQuery on client provides presentation

jQuery Technicality
Lightweight 14kb (Minified and Gzipped) Cross-browser support (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+) CSS-like syntax easy for developers/nondevelopers to understand Active developer community Extensible - plugins

Example Ajax the old way


function GetXmlHttpObject(handler) { var objXmlHttp = null; //Holds the local xmlHTTP object instance //Depending on the browser, try to create the xmlHttp object if (is_ie){ var strObjName = (is_ie5) ? 'Microsoft.XMLHTTP' : 'Msxml2.XMLHTTP'; try{ objXmlHttp = new ActiveXObject(strObjName); objXmlHttp.onreadystatechange = handler; } catch(e){ //Object creation errored alert('Verify that activescripting and activeX controls are enabled'); return; } } else{ // Mozilla | Netscape | Safari objXmlHttp = new XMLHttpRequest(); objXmlHttp.onload = handler; objXmlHttp.onerror = handler; } //Return the instantiated object return objXmlHttp;

10

Example Ajax with jQuery

$.get("update_actions.aspx", {st: "yes", f: $(this).attr("ID")} );

11

A Quality code by Query:

$(#firstName).text(Joe Black); $(button).click(function() {alert Clicked;});

$(.content).hide();
$(#main).load(content.htm); $(<div/>).html(Loading).appendTo(#content);

Very compact and fluent programming model

Download the latest version from

http://jquery.com

To enable itellisense in VS 2008 SP1


install the vsdoc hotfix: VS90SP1-KB958502-x86.exe

Copy the

jquery.js
and the jquery-vsdoc.js into your application folder

jQuery Core Concepts

$() function runs the total show

var el = $(<div/>)

Create HTML elements on the fly

$() function

$(window).width()
Manipulate existing DOM elements

$() function

$(div).hide();

$(div, $(p)).hide();
Selects document elements (more in a moment)

$() function
$(function(){});

Fired when the document is ready for programming. Better use the full syntax:
$(document).ready(function(){});

Reference it in your markup

<script src=jquery.js/>

No need to reference the vsdoc.js

Reference it in your JS files:

///<reference path=jquery.js/>

or just drag it into the file

You can also reference it from Google

<script src=http://ajax.googleapis.com/ ajax/libs/jquery/1.2.6/ jquery.min.js> </script>

jQuerys programming philosophy is:

GET >> ACT

$(div).hide() $(<span/>).appendTo(body)

$(:button).click()

All Selector

$(*)

// find everything

Selectors return a pseudo-array of jQuery elements

Basic Selectors
By Tag: $(div) // <div>Hello jQuery</div>

By ID:

$(#usr)
// <span id=usr>John</span>

By Class:

$(.menu)
// <ul class=menu>Home</ul>

Yes, jQuery implements CSS Selectors!

More Precise Selectors

$(div.main)

// tag and class

$(table#data) // tag and id

Combination of Selectors
// find by id + by class $(#content, .menu) // multiple combination $(h1, h2, h3, div.content)

Hierarchy Selectors
$(table td) $(tr > td) $(label + input) $(#content ~ div) // descendants // children // next // siblings

Selection Index Filters


$(tr:first) $(tr:last) $(tr:lt(2)) $(tr:gt(2)) $(tr:eq(2)) // first element // last element // index less than // index gr. than // index equals

Effects using jQuery

Showing or Hiding Element


// just show $(div).show(); // reveal slowly, slow=600ms $(div).show(slow); // hide fast, fast=200ms $(div).hide(fast); // hide or show in 100ms $(div).toggle(100);

Sliding Elements
$(div).slideUp(); $(div).slideDown(fast); $(div).slideToggle(1000);

Fading Elements
$(div).fadeIn(fast); $(div).fadeOut(normal); // fade to a custom opacity $(div).fadeTo (fast, 0.5);

Fading === changing opacity

Detecting animation completion

$(div).hide(slow, function() { alert(The DIV is hidden); });

$(div).show(fast, function() { $(this).html(Hello jQuery); }); // this is a current DOM element

Every effect function has a (speed, callback) overload

Custom Animation
// .animate(options, duration) $(div).animate({ width: 90%, opacity: 0.5, borderWidth: 5px

}, 1000);

EFFECTS DEMO

Loading content
$(div).load(content.htm);

// passing parameters $(#content).load(getcontent.aspx, {id:33, type:main});

Useful jQuery links


www.jquery.com jQuery homepage www.learningjquery.com jQuery tutorial blog www.visualjquery.com jQuery documentation http://ui.jquery.com jQuery user interface http://bassistance.de/jquery-plugins/ homepage of the author of several useful jQuery plugins.
39

You might also like