J Query Presentation
31
Vishal Kumar 06131A1258
-
Upload
vishal-kumar -
Category
Technology
-
view
107 -
download
2
description
A presentation on jQuery, how you can use it on your website, with links to live examples.
Transcript of J Query Presentation
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
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
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>”)
