Vishal Kumar 06131A1258. Why you’re going to love jQuery!

Vishal Kumar06131A1258

Introduction

Why you’re going to love jQuery!

Introduction

What we want to create? Dynamic Live Websites Effects filled Fast, responsive sites

What do we have? Flash Java Javascript

The Solution : jQuery

What is jQuery? jQuery is a fast and concise JavaScript

Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

History of jQuery

Developed by John Resig Released v1.0 on November 26th,

2006 Maintained as an Open Source

software (dual licensed under MIT and GNU GPL)

Microsoft planning to integrate into Microsoft Visual Web Developer

Nokia planning to integrate into Web Run-Time platform

Currently on Version 1.4, released

Features of jQuery

DOM element selections using the cross-browser open source selector engine Sizzle

DOM traversal and modification Events CSS manipulation Effects and animations AJAX Extensibility through plugins Utilities - such as browser version and

the each function.

A Few Examples

Forms Chatboxes Menus Dropdowns Sliders Tabs Slideshows Games

jQuery Enhanced Forms

Menus and Dropdowns

Sliders and Slideshows

Technical Implementation

Because, after all, we are I.T. folks.

jQuery Object

The jQuery Object Contains a reference to the DOM

element Has properties of the DOM element, like

text, html, tags Can be used to manipulate the DOM

directly Can be nested

Every jQuery Function Should return the same jQuery object

Using jQuery

Download the .JS file (23KB otal, minified)

Use the jQuery file hosted on Google’s Code servers

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

</script> <script type="text/javascript"> </script> </head> <body> <a href="http://jquery.com/">jQuery</a>

</body> </html>

jQuery Syntax

$(document).ready(function(){

$("a").click(function(event){

alert("Thanks for visiting!"); });

});

The $ Symbol

$ is the Shortcut for the jQuery Global Class

Use it to access any part of the DOM Search by CSS to get the element. Returns a jQuery object which can be

futher manipulated

DOM Traversing

Document Object Model: The way of representing the Elements of

a Document as Objects Way we represent HTML, XML, XHTML From BODY, P, DIV, SPAN, etc. Any

element can be accessed from its DOM structure

Chainable Functions

Chainable events: find this, do several things in succession

$('#message2').fadeIn('slow').addClass('alert').html('Validate your markup!');

Allows us to create complex yet easy to understand chains of actions

jQuery Animations

Animations Built in

fadeIn() fadeOut() hide() show() slideDown() slideUp() toggle() slideToggle() fadeTo() animate()

See also: Easing Plug-in jQuery User Interface: http://ui.jquery.com

When is the DOM Ready?

When is DOM ready? We can use the ready() function to

find out

$(document).ready(function() {

// Write Code Here});

CSS & Attribute Matching

Search with Tags and CSS: $('p'); $('p.message'); $('#message .text'); $('ul#menu > li'); $('ul#menu ul');

Attribute Matching: $('img[@alt]'); $('a[@href*=google]');

jQuery Events

Don't add "onclick" to your markup: use jQuery to find and assign events

$('#control').click(function() { $('#message').show().addClass('alert');});

$('#control').toggle(function() { $('#message').show().addClass('alert');}, function(){ $('#message').removeClass('alert').hide();});

jQuery with Other Frameworks

Mootools Prototype, etc

Other frameworks also use the $ shortcut

Add code like this before making any jQuery calls:

var foo = jQuery.noConflict();Then use it like this: foo('#message').show();

AHAH !?!

AHAH style (Asynchronous HTML and HTTP)

Easiest way of creating Asynchronous sites

$('#control').click(function() { $('#message').load('current.php');});

AJAX with jQuery

Asynchronous Javascript and XML AJAX - Processing the feed$('#demo5-1').click(function() {

$('#headline-container').html(''); $.get('headlines.xml', function(rss){ $(rss).find('item title').each(function(index) { $('#headline-container').append('<p>' + $(this).text() + '</p>'); }); });});

Live Examples

I can’t believe its not Flash!

Links

Facebook Search: http://demos.9lessons.info/auto.htm Photoslider:

http://css-tricks.com/examples/AnythingSlider/#panel-5 Tabbed Manu:

http://www.queness.com/resources/html/tabmenu/jquery-tabbed-menu-queness.html

Flip: http://lab.smashup.it/flip/ Gallery:

http://visuallightbox.com/photo-gallery-with-lightbox-simple-html-demo.html

Zoom image: http://www.hotajax.org/demo/jquery/zoomimage/zoomimage/index.html

Mac Dock: http://nettuts.s3.cdn.plus.org/358_jquery/example%20files/all-examples.html

Site with jQuery: http://pupunzi.com/#welcome.html 3d Sphere in jQuery:

http://www.devirtuoso.com/Examples/3D-Engine/sphere.html Chat Noir: www.vishalkumar.in/works/jscat

http://demos.9lessons.info/auto.htm

http://css-tricks.com/examples/AnythingSlider/



http://lab.smashup.it/flip/



http://www.hotajax.org/demo/jquery/zoomimage/zoomimage/index.html

http://www.hotajax.org/demo/jquery/zoomimage/zoomimage/index.html

http://nettuts.s3.cdn.plus.org/358_jquery/example%20files/all-examples.html

http://nettuts.s3.cdn.plus.org/358_jquery/example%20files/all-examples.html

http://pupunzi.com/

http://www.devirtuoso.com/Examples/3D-Engine/sphere.html

http://www.vishalkumar.in/works/jscat

Conclusion

Impressed?

Who’s using jQuery?

Google Dell Bank of America Mozilla Drupal NetFlix NBC Digg

How can I learn and use jQuery

Check out jQuery.com Documentation

Sites like www.jquerytutorials.com Plugins for many of the features Apply it to any web based

application

Change the way you develop websites, and bring life to the online experience!

Closing Remarks

Thank you for listening.

If you have any queries, please feel free to ask .

If you want to know how you can use a particular module of technology for your

project or application, contact me [email protected]

+91 9985 463 469

mailto:[email protected]

References

jQuery: www.jQuery.com jQuery 1.4 Reference Guide(Jan

2010), Pack Publishing www.noupe.com www.jquerytutorials.com http://www.webdesignerwall.com/tut

orials/jquery-tutorials-for-designers/ www.google.com/images (search

“jquery <feature>”)

http://www.jquery.com/

http://www.noupe.com/

http://www.jquerytutorials.com/

http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/

http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/

http://www.google.com/images

Vishal Kumar 06131A1258. Why you’re going to love jQuery!

Documents

Transcript of Vishal Kumar 06131A1258. Why you’re going to love jQuery!