JQuery-Presentation

Download Report

Transcript JQuery-Presentation 

Vishal Kumar
06131A1258
Why you’re going to love jQuery!

What we want to create?
 Dynamic Live Websites
 Effects filled
 Fast, responsive sites

What do we have?
 Flash
 Java
 Javascript

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.






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 RunTime platform
Currently on Version 1.4, released
DOM element selections using the crossbrowser 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.









Forms
Chatboxes
Menus
Dropdowns
Sliders
Tabs
Slideshows
Games
Because, after all, we are I.T. folks.

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


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>
$(document).ready(function()
{
$("a").click(function(event)
{
alert("Thanks for visiting!");
});
});




$ 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

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 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


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 DOM ready?
We can use the ready() function to find out
$(document).ready(function()
{
// Write Code Here
});

Search with Tags and CSS:






$('p');
$('p.message');
$('#message .text');
$('ul#menu > li');
$('ul#menu ul');
Attribute Matching:
 $('img[@alt]');
 $('a[@href*=google]');



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();
});







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 style (Asynchronous HTML and HTTP)
Easiest way of creating Asynchronous sites
$('#control').click(function()
{
$('#message').load('current.php');
});
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>');
});
});
});


I can’t believe its not Flash!










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/jquerytabbed-menu-queness.html
Flip:
http://lab.smashup.it/flip/
Gallery:
http://visuallightbox.com/photo-gallery-with-lightboxsimple-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/allexamples.html
Site with jQuery:
http://pupunzi.com/#welcome.html
3d Sphere in jQuery:
http://www.devirtuoso.com/Examples/3DEngine/sphere.html
Chat Noir:
www.vishalkumar.in/works/jscat
Impressed?








Google
Dell
Bank of America
Mozilla
Drupal
NetFlix
NBC
Digg





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!
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 at
[email protected]
+91 9985 463 469






jQuery: www.jQuery.com
jQuery 1.4 Reference Guide(Jan 2010), Pack
Publishing
www.noupe.com
www.jquerytutorials.com
http://www.webdesignerwall.com/tutorials/jq
uery-tutorials-for-designers/
www.google.com/images (search “jquery
<feature>”)