• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
A Short Introduction To jQuery
 

A Short Introduction To jQuery

on

  • 7,966 views

A Short Introduction To jQuery by Sudar

A Short Introduction To jQuery by Sudar

Statistics

Views

Total Views
7,966
Views on SlideShare
7,541
Embed Views
425

Actions

Likes
2
Downloads
145
Comments
0

4 Embeds 425

http://sudarmuthu.com 415
http://www.slideshare.net 6
http://www.linkedin.com 3
http://www.lmodules.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

    A Short Introduction To jQuery A Short Introduction To jQuery Presentation Transcript

    • Sudar ( http://SudarMuthu.com ) WebCamp Chennai – 23 Feb 2008
      • Famous Client – Side frameworks
      • jQuery
      • Prototype
      • Yahoo User Interface Library (YUI)
      • Dojo
      • Rico
      WebCamp - Chennai http://SudarMuthu.com
      • The $() function
      • Build around CSS selectors
      • WordPress has started to use jQuery
      • Lots of Plugins
      • Can be used with other libraries
      • Doesn’t hijack the global namespace
      • Small Size (Just 15 KB after Minified and Gzipped)
      • Write Less, Do More
      WebCamp - Chennai http://SudarMuthu.com
      • Matches a set of elements and returns a collection.
      • Uses CSS Selectors
      • $ (‘#comment’)
      • $(‘div.comment’)
      • $(‘div#content h2’)
      • $(‘input:password’)
      • $(‘a[href^=“http://”]’)
      • $(‘ul#nav > li’)
      • You can also use jQuery() instead of $()
      WebCamp - Chennai http://SudarMuthu.com
      • $ (‘h2:first’)
      • $(‘h2:last’)
      • $(‘p:visible’)
      • $(‘p:hidden’)
      • $(‘input:password’)
      • $(‘input:text’)
      • $(‘p:odd’)
      WebCamp - Chennai http://SudarMuthu.com
      • The $ () function returns a collection consisting of
      • the elements that match the selector.
      • It is similar to an array, but not exactly same.
      • You can use
      • $(‘p.special’).length or
      • $(‘p.special’).size()
      • Both return the number of matched elements
      WebCamp - Chennai http://SudarMuthu.com
      • You can use .each() to iterate the collection
      • $(‘p.special’).each(function () {
      • alert (this);
      • });
      • $(‘p.special’)[0] – First element
      • $(‘p.special’)[1] - Second element
      WebCamp - Chennai http://SudarMuthu.com
      • Access a property of matched element
      • $(‘img#header’).attr(‘src’) – returns the src attribute
      • $(‘img#header’).attr(‘src’, ‘http://e.in/head.gif’)
      • Set the src attribute
      WebCamp - Chennai http://SudarMuthu.com
      • val() – Get the value of the input element
      • var singleValue = $(‘#single’).val();
      • val(val) – Set the value of an input element
      • $("input:text"). val (“Value Text”);
      • $(“#multiple”).val([“multiple1”, “multiple2”]);
      WebCamp - Chennai http://SudarMuthu.com
      • $(‘img#header’).addClass(‘highlighted’)
      • $(‘img#header’).removeClass(‘highlighted’)
      • $(‘img#header’).toggleClass(‘highlighted’)
      • var hasBar = #(‘img#header’).hasClass(‘special’)
      • $(‘p.special’).css(‘font-size’, ’12px’ )
      • $(‘p.special’).css({‘font-size’:’12px’, ‘color’:’red’ })
      WebCamp - Chennai http://SudarMuthu.com
      • Similar to innerHTML
      • $(‘span#error’).text(“There is some error”)
      • $(‘div#msg’).html(“<strong>Message</strong>”)
      WebCamp - Chennai http://SudarMuthu.com
      • $(‘span#msg’).show()
      • Also show(speed, [callback])
      • $(‘span#msg’).show(“fast”, function() {
      • alert (“Done”);
      • });
      • $(‘span#msg’).hide()
      • Also hide(speed, [callback])
      WebCamp - Chennai http://SudarMuthu.com
      • toggle()
      • fadeIn()
      • fadeOut()
      • fadeTo()
      • slideUp()
      • slideDown()
      • animate()
      • stop()
      WebCamp - Chennai http://SudarMuthu.com
      • Enhanced methods for traversing DOM
      • $(‘div#nav’).parent()
      • $(‘div#nav’).next()
      • $(‘div#nav’).prev()
      • $(‘div#nav’).nextAll(‘a’)
      WebCamp - Chennai http://SudarMuthu.com
      • Enhanced methods for manipulating DOM
      • after(content)
      • append(content)
      • before(content)
      • clone()
      • empty()
      • remove(expr)
      WebCamp - Chennai http://SudarMuthu.com
      • Provides methods for assigning events in a cross
      • browser way
      • $(‘div#msg’).click(function(ev) {
      • $(this).css(‘color’, ‘red’);
      • alert(‘Clicked’);
      • });
      • Lot of other handlers also available
      WebCamp - Chennai http://SudarMuthu.com
      • Alternate to onLoad event
      • $(document).ready(function() {
        • alert (“DOM is Ready”);
      • });
      • You can also use
      • $(function() {
        • alert (“DOM is Ready”);
      • });
      WebCamp - Chennai http://SudarMuthu.com
      • jQuery has excellent support for AJAX
      • $(‘div#msg’).load(‘/dir/file.html’)
      • You can also use other advanced methods
      • $.get(url, params, callback)
      • $.post(url, params, callback)
      • $.getJSON(url, params, callback)
      • $.getScript(url, callback)
      WebCamp - Chennai http://SudarMuthu.com
      • $.trim(str)
      • $.browser
        • if ($.browser.safari) {
        • alert(“This is Safari”);
        • }
      • You can also use
        • safari
        • opera
        • msie
        • Mozilla
      • $.each(object, callback)
      WebCamp - Chennai http://SudarMuthu.com
      • Lot of Plugins available for
      • Form Validation
      • Drop down Menus
      • UI
      • Drag and Drop
      • Etc..,
      • Official Plugin repository at http://plugins.jquery.com/
      WebCamp - Chennai http://SudarMuthu.com
      • http://jquery.com – Official Site
      • http://docs.jquery.com - Documentation
      • http://plugins.jquery.com – Plugin repositry
      • http://visualjquery.com – API Reference
      • http://sudarmuthu.com/blog/tag/jquery - My blog posts about jQuery
      WebCamp - Chennai http://SudarMuthu.com