• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
J Query Presentation
 

J Query Presentation

on

  • 7,020 views

A presentation on jQuery, how you can use it on your website, with links to live examples.

A presentation on jQuery, how you can use it on your website, with links to live examples.

Statistics

Views

Total Views
7,020
Views on SlideShare
6,131
Embed Views
889

Actions

Likes
3
Downloads
154
Comments
0

7 Embeds 889

http://www.vishalkumar.in 805
http://vothanhduy.com 43
http://vothanhduy.wordpress.com 18
http://translate.googleusercontent.com 10
http://www.slideshare.net 8
http://feeds2.feedburner.com 4
http://www.google.com.mx 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    J Query Presentation J Query Presentation Presentation Transcript

    • Vishal Kumar
      06131A1258
    • 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#menuul');
      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:
      varfoo = 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 at
      vishalkumar@gmail.com
      +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/tutorials/jquery-tutorials-for-designers/
      www.google.com/images (search “jquery <feature>”)