• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
jQuery
 

jQuery

on

  • 1,117 views

 

Statistics

Views

Total Views
1,117
Views on SlideShare
1,117
Embed Views
0

Actions

Likes
0
Downloads
23
Comments
0

0 Embeds 0

No embeds

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

    jQuery jQuery Presentation Transcript

    • jQuery
      is a new kind of JavaScript Library
    • jQuery : is a new kind of JavaScript Library
      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
    • Created by John Resig
      Open source
      MIT and GPL license
      Cross-browser compatible
      Internet Explorer 6+, Firefox 2+, Opera 9+, and Safari 2+
      Current Release:
      V 1.6.1
      Lightweight Footprint
      CSS3 Compliant
      jQuery Overview
    • What jQuery Does
      Access parts of a page.
      Modify the appearance of a page.
      Alter the content of a page.
      Respond to a user's interaction with a page.
      Add animation to a page.
      Retrieve information from a server without refreshing a page (AJAX).
      Simplify common JavaScript tasks.
    • Download jQuery
      http://docs.jquery.com/Downloading_jQuery
    • jQuery API Reference
      jQuery Core
      Selectors
      Attributes
      Traversing
      Manipulation
      CSS
      Events
      Effects
      Ajax
      Utilities
      jQuery UI
    • jQuery & ASP.NET
    • Different types of web applications
      ASP.NET Server-Side
      Pages are created on the server and updated through postbacks
      ASP.NET AJAH
      Pages created on the server and updated through AJAX requests for HTML
      ASP.NET AJAX
      Pages are created on the client and updated through Ajax requests for JSON
    • jQuery & ASP.NET
      Microsoft AJAX Content Delivery Network
      Ajax Control Toolkit
    • JavaScript: The Good Parts
      http://docs.jquery.com
      http://encosia.com
    • Selectors
      http://docs.jquery.com/Selectors
    • Basics:
      $(“#firstName”)
      Selects element with Id firstName
      $(”*")
      Select all elements.
      $(“div,span”)
      Selects Div AND Span element
    • Basic Filters:
      $("tr:first")
      Finds the first table row.
      $("input:not(:checked) + span")
      Finds all inputs that are not checked and Select the next sibling span
      $("tr:even")
      Finds even table rows
    • Other
      Attribute Filters:
      $("div[id]")
      $("input[name='newsletter']")
      Child Filters:
      $("div span:first-child")
      Forms:
      $(":input");
      Form Filters:
      $("input:enabled")
    • Effects
      http://docs.jquery.com/Effects
    • Basics:
      show( speed, [callback] )
      $("p").show("slow“)
      hide( speed, [callback] )
      $("p").hide("slow");
      toggle( speed, [callback] )
      $("p").toggle("slow");
    • Sliding:
      slideDown( speed, [callback] )
      $("div").slideDown("slow");
      slideUp( speed, [callback] )
      $("div").slideUp();
      slideToggle( speed, [callback] )
      $("p").slideToggle("slow");
    • Fading:
      fadeIn( speed, [callback] )
      $("div").fadeIn("slow");
      fadeOut( speed, [callback] )
      $("div").fadeOut();
      fadeTo( speed, opacity, [callback] )
      $(this).fadeTo("slow", 0.33);
    • Events
      http://docs.jquery.com/Events
    • ready
      ready( fn )
      $(document).ready(function () { $("p").
      text("The DOM is now loaded and can be manipulated.");
      });
    • Event Handling:
      bind( type, data, fn )
      one( type, data, fn )
      trigger( event, data )
      triggerHandler( event, data )
      unbind( type, fn )
    • Interaction Helpers:
      hover( over, out )
      toggle( fn, fn2, fn3,fn4,... )
    • Event Helpers:
      blur( fn )
      change( fn )
      click( fn )
      dblclick( fn )
      focus( fn )
      …………………
    • live( type, fn )
      Possible event values:click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup
      This method works and behaves bind
      important distinction: When you bind a "live" event it will bind to all current and future elements on the page
    • AJAX
    • jQuery.ajax( options )
      Options:
      Success
      function (data, textStatus)
      Complete
      function (XMLHttpRequest, textStatus)
      Data
      {foo:["bar1", "bar2"]}
      Error
      function (XMLHttpRequest, textStatus, errorThrown)