• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Basics of j query
 

Basics of j query

on

  • 1,124 views

 

Statistics

Views

Total Views
1,124
Views on SlideShare
1,091
Embed Views
33

Actions

Likes
0
Downloads
5
Comments
0

3 Embeds 33

http://www.codeproject.com 26
http://www.linkedin.com 6
https://www.linkedin.com 1

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

    Basics of j query Basics of j query Presentation Transcript

    • Rupesh Kumar Tiwari
      June, 2011
      Basics of JQueryThe write less, do more JavaScript library
    • Agenda
      • jQuery Basics
      • Plugins
      • Advanced jQuery
    • jQueryBasics…
      $
      • $(CSS Selector)
      • $(HTML)
      • $(DOM element)
    • jQueryBasics…
      Demo
    • jQueryBasics…
      $
      • $(something).action();
    • jQueryBasics…
      $:Basic actions
    • jQueryBasics…
      $:Traversal
      • .not(expression)
      • .add(expression)
      • .next()
      • .nextAll()
      • .prev()
      • .prevAll()
      • .slice(start,end)
      • .siblings()
      • .children()
      • .children(expression)
      • .parent()
      • .parent(expression)
      • .find(expression)
      • .filter(expression)
      • .filter(function)
      • eq(index)
    • jQueryBasics…
      $:Traversal
      • .end()
    • jQueryBasics…
      Demo
    • jQueryBasics…
      $:Manipulation
      • .html(val)
      • .text(val)
      • .append(content)
      • .appendTo(expression)
      • .appendTo(jQuery object)
      • .prepend(content)
      • .prependTo(expression)
      • .prependTo(jQuery object)
      • .after(content)
      • .before(content)
      • .wrap(html)
      • .empty()
      • .remove()
      • .remove(expression)
    • jQueryBasics…
      Demo
    • jQueryBasics…
      Selectors
      • :odd
      • :contains(text)
      • :empty
      • :hidden
      • :vissible
      • [attribute]
      • [attribute=value]
      • [attribute!=value]
      • #id
      • .class
      • .elementType
      • :first
      • :last
      • :not(expression)
      • .parent > child
      • :even
    • jQueryBasics…
      Demo
    • jQueryBasics…
      $:Attributes & CSS
      • .val(val)
      • .css(name,value)
      • css(properties)
      • .addClass(class)
      • .removeClass(class)
      • .attr(name,value)
      • .attr(name,function)
      • .attr(properties)
      • .removeAttr(name)
    • jQueryBasics…
      Demo
    • jQueryBasics…
      $:Just a few more
      • .height()
      • .width()
      • .is(expression)
      • .hasClass(class)
      • .offset()
      • .html()
      • .text()
      • .val()
      • .attr(name)
      • .css(name)
    • Demo
    • jQueryBasics…
      Chaining
      Speed + Not much code + pretty code + Fun
    • jQueryBasics…
      Attaching multiple functions to a single selector
      $(CSS Selector).action1().action2();
    • jQuery Basics…
      Bindings
      How to respond to user interaction
    • jQuery Basics…
      Events
      • click
      • mouseover
      • mouseout
      • mouseenter
      • mouseleave
      • blur
      • change
      • dblclick
      • focus
      • keydown
      • keyup
      • keypress
      • scroll
      • resize
      • load
      • ready
    • jQueryBasics…
      Demo
    • jQueryBasics…
      Effects
      • $(expression).function();
      • $(expression).function(speed);
      • $(expression).function(speed,callback);
    • jQuery Basics…
      Effects
      • show
      • hide
      • toggle
      • slideUp
      • slideDown
      • slideToggle
      • fadeIn
      • fadeOut
      • fadeTo
      • scroll
      • resize
      • load
      • ready
    • jQueryBasics…
      Demo
    • jQueryBasics…
      Advanced animations
      If you need that little extra something
    • jQueryBasics…
      .animate(params,duration,easing,callback)
    • jQueryBasics…
      Demo
    • jQueryBasics…
      AJAX
      Want to be buzzword compliant, don’t you?
    • jQueryBasics…
      AJAX
      • $(CSS Selector).load(url, data, callback);
      • $.post(url, data, callback);
      • $.get(url, data, callback)
    • jQueryBasics…
      $.ajax - options
      • data
      • type
      • url
    • jQueryBasics…
      AJAX events (global)
      $(CSS selector).bind(‘globalAjaxEvent’,…);
    • jQuery Basics…
      • ajaxStart
      • ajaxSend
      • ajaxSuccess
      • ajaxError
      AJAX events (global)
    • jQueryBasics…
      AJAX events (local)
      $.ajax({
      enventName:function(){

      }
      });
    • jQueryBasics…
      AJAX events (local)
      • beforeSend
      • success
      • error
      • complete
    • jQueryBasics…
      Demo
    • Plugins
      Plugins
      If you think jQuery should do more, this part is for you
    • Plugins…
      How to build Plugins
      • Extend jQuery.fn
      • jQuery.fn.myPlugin = function(){ … };
      • $( … ).myPlugin();
    • Plugins…
      The magical plugin helper
      .each(function)
    • Plugins…
      The typical plugin
      jQuery.fn.myPlugin = function () {
      return $(this).each(function(){
      //Do stuff with $(this) here
      });
      }
    • AdvancedjQuery
      Advanced jQuery
      Now have I left you wondering how all this near stuff works?
      Sorry for leaving you hanging – I’ll answer that right now..
    • AdvancedjQuery…
      The Stack
    • AdvancedjQuery…
      Advanced Scripting
      • $.getScript(url, callback)
      • $.getJSON(url, data, callback)
    • Resources
      • http://jquery.com/
      • http://visualjquery.com/
      • Book: jQueryin Action
    • ThankYou
      • roopkt@gmail.com
      • Tweeter: @roopkt
      • http://Rupesht.wordpress.com