jquery anica

7/31/2019 Jquery Anica

1/39

Naresh Information

Technologies


2/39

jQuery Nagaraju Bende

MCPD.NET Sr Consultant,Trainer

http://nbende.wordpress.com
http://nbende.wordpress.com/http://nbende.wordpress.com/


3/39

JavaScript is a weakly typed, classless,

prototype based OO language, that

can also be used outside the

browser. It is not a browser DOM.

About JAvascript


4/39

The worlds most misunderstood

programming language.

Most People Say


5/39

With AJAX 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, time-

consuming, and error-prone


6/39

jQuery is a lightweight, open-source

JavaScript library that simplifies

interaction between HTML and

JavaScript

jQuery


7/39

It was and still being

developed

by John Resigfrom

Mozilla and was

first announced inJanuary 2006


8/39

with jQuery

jQuery makes writing Javascript mucheasier

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


9/399

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/non-developers to understand

Active developer community

Extensible - plugins


10/3910

Example Ajax the old wayfunction GetXmlHttpObject(handler) {

var objXmlHttp = null; //Holds the local xmlHTTP object instance

//Depending on the browser, try to create the xmlHttp objectif (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;


11/3911

Example Ajax with jQuery

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


12/39

$(#firstName).text(Joe Black);

$(button).click(function() {alert Clicked;});

$(.content).hide();

$(#main).load(content.htm);

$().html(Loading).appendTo(#content);

A Quality code by Query:

Very compact and fluent programming model


13/39

Download the latest version from

http://jquery.com
http://jquery.com/http://jquery.com/


14/39

To enable itellisense in VS 2008 SP1

install thevsdoc hotfix:VS90SP1-KB958502-x86.exe
http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736


15/39

Copy thejquery.js

and the

jquery-vsdoc.js

into your application

folder


16/39

jQuery Core Concepts


17/39

Create HTML elements on the fly

var el = $()

$() function runs the total show


18/39

Manipulate existing DOM elements

$(window).width()

$() function


19/39

Selects document elements

(more in a moment)

$(div).hide();

$(div, $(p)).hide();

$() function


20/39

$(document).ready(function(){});

Fired when the document is ready forprogramming.

Better use the full syntax:

$(function(){});

$() function


21/39

No need to reference thevsdoc.js

Reference it in your markup


22/39

or just drag it into the file

///

Reference it in your JS files:


23/39

You can also reference it from Google


24/39

$(div).hide()

$().appendTo(body)

$(:button).click()

jQuerys programming philosophy is:

GET >> ACT


25/39

$(*) // find everything

All Selector

Selectors return a pseudo-array of jQuery

elements


26/39

$(div)

// Hello jQuery

Basic Selectors

Yes, jQuery implements CSS Selectors!

$(#usr)

// John

$(.menu)

// Home

By Tag:

By ID:

By Class:


27/39

$(div.main) // tag and class

$(table#data) // tag and id

More Precise Selectors


28/39


29/39

$(table td) // descendants

$(tr > td) // children

$(label + input) // next

$(#content ~ div) // siblings

Hierarchy Selectors


30/39

$(tr:first) // first element

$(tr:last) // last element

$(tr:lt(2)) // index less than

$(tr:gt(2)) // index gr. than

$(tr:eq(2)) // index equals

Selection Index Filters


31/39

Effects using

jQuery


32/39

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

Showing or Hiding Element


33/39

$(div).slideUp();

$(div).slideDown(fast);

$(div).slideToggle(1000);

Sliding Elements


34/39

$(div).fadeIn(fast);

$(div).fadeOut(normal);

// fade to a custom opacity

$(div).fadeTo (fast, 0.5);

Fading Elements

Fading === changing opacity


35/39

$(div).hide(slow, function() {

alert(The DIV is hidden);

});

$(div).show(fast, function() {

$(this).html(Hello jQuery);

});// this is a current DOM element

Detecting animation completion

Every effect function has a (speed, callback)

overload


36/39

// .animate(options, duration)

$(div).animate({

width: 90%,opacity: 0.5,

borderWidth: 5px

}, 1000);

Custom Animation


37/39

EFFECTS DEMO


38/39

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

// passing parameters

$(#content).load(getcontent.aspx,

{id:33,

type:main});

Loading content


39/39

Useful jQuery links

www.jquery.com jQuery homepage www.learningjquery.com jQuery tutorial

blog

www.visualjquery.com jQuerydocumentation

http://ui.jquery.com jQuery user interface

http://bassistance.de/jquery-plugins/ -

homepage of the author of several useful

jQuery plugins.
http://www.jquery.com/http://www.learningjquery.com/http://www.visualjquery.com/http://ui.jquery.com/http://bassistance.de/jquery-plugins/http://bassistance.de/jquery-plugins/http://bassistance.de/jquery-plugins/http://bassistance.de/jquery-plugins/http://ui.jquery.com/http://www.visualjquery.com/http://www.learningjquery.com/http://www.jquery.com/

jquery anica

Documents