Your SlideShare is downloading. ×
0
J Query Presentation
J Query Presentation
J Query Presentation
J Query Presentation
J Query Presentation
J Query Presentation
J Query Presentation
J Query Presentation
J Query Presentation
J Query Presentation
J Query Presentation
J Query Presentation
J Query Presentation
J Query Presentation
J Query Presentation
J Query Presentation
J Query Presentation
J Query Presentation
J Query Presentation
J Query Presentation
J Query Presentation
J Query Presentation
J Query Presentation
J Query Presentation
J Query Presentation
J Query Presentation
J Query Presentation
J Query Presentation
J Query Presentation
J Query Presentation
J Query Presentation
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

J Query Presentation

5,944

Published on

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.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,944
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
163
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Vishal Kumar
    06131A1258
  • 2. Introduction
    Why you’re going to love jQuery!
  • 3. Introduction
    What we want to create?
    Dynamic Live Websites
    Effects filled
    Fast, responsive sites
    What do we have?
    Flash
    Java
    Javascript
  • 4. 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.
  • 5. 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
  • 6. 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.
  • 7. A Few Examples
    Forms
    Chatboxes
    Menus
    Dropdowns
    Sliders
    Tabs
    Slideshows
    Games
  • 8. jQuery Enhanced Forms
  • 9. Menus and Dropdowns
  • 10. Sliders and Slideshows
  • 11. Technical Implementation
    Because, after all, we are I.T. folks.
  • 12. 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
  • 13. 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>
  • 14. jQuery Syntax
    $(document).ready(function()
    {
    $("a").click(function(event)
    {
    alert("Thanks for visiting!");
    });
    });
  • 15. 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
  • 16. 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
  • 17. 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
  • 18. 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
  • 19. When is the DOM Ready?
    When is DOM ready?
    We can use the ready() function to find out
    $(document).ready(function()
    {    // Write Code Here
    });
  • 20. 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]');
  • 21. 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();});
  • 22. 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();
  • 23. AHAH !?!
    AHAH style (Asynchronous HTML and HTTP)
    Easiest way of creating Asynchronous sites
    $('#control').click(function()
    {    $('#message').load('current.php');});
  • 24. 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>');        });    });});
  • 25. Live Examples
    I can’t believe its not Flash!
  • 26. 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
  • 27. Conclusion
    Impressed?
  • 28. Who’s using jQuery?
    Google
    Dell
    Bank of America
    Mozilla
    Drupal
    NetFlix
    NBC
    Digg
  • 29. 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!
  • 30. 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
  • 31. 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>”)

×