jQuery Framework - Property Content
Upcoming SlideShare
Loading in...5
×
 

jQuery Framework - Property Content

on

  • 1,490 views

 

Statistics

Views

Total Views
1,490
Views on SlideShare
1,476
Embed Views
14

Actions

Likes
0
Downloads
6
Comments
0

2 Embeds 14

http://www.linkedin.com 10
https://www.linkedin.com 4

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 Framework - Property Content jQuery Framework - Property Content Presentation Transcript

  • Nov 16, 2009 jQuery Framework Presented by, Jagadeesh Motamarri Lead Developer [Property Content]
  • © 2008 Starwood Hotels & Resorts Worldwide, Inc. All rights reserved. History
    • John Resig – www.ejohn.org
    • Released at BarCamp NYC on Jan 2006
    • jQuery 1.0 out on Aug 2006
    • Version 1.3.1 latest
      • ~ 800% faster for DOM processing
      • various other improvements
    Page 2 of 20
  • © 2008 Starwood Hotels & Resorts Worldwide, Inc. All rights reserved. Why jQuery ?
    • Write less do more
    • Lightweight – minified [19KB in size]
    • CSS 3 complaint
    • Cross-browser
      • IE 6.0 +
      • FF 2.0 +
      • Safari 3.0 +
      • Opera 9.0 +
      • Chrome
    • Great Documentation
    • Community Support
    • Tons of plugins
    Page 3 of 20
  • © 2008 Starwood Hotels & Resorts Worldwide, Inc. All rights reserved. What jQuery Does?
    • In general, jQuery provides general purpose abstraction layer for common web scripting tasks.
      • Accessing parts of a page is easier
      • Modify appearance of a page
      • User Interaction
      • Animation
      • AJAX
      • Common Utilities [with the help of plugins]
    Page 5 of 20
  • © 2008 Starwood Hotels & Resorts Worldwide, Inc. All rights reserved. Getting Started Page 6 of 20
    • The $() function
      • is a factory object
      • provides a jQuery instance
      • all operations are done using $()
  • © 2008 Starwood Hotels & Resorts Worldwide, Inc. All rights reserved. <html> <head> <script src=“jQuery.js” type=“text/javascript” /> <script type=“text/javascript”> $(document).ready(function(){ // your stuff goes here }); </script> </head> <body> </body> </html> Getting Started cont… Page 7 of 20
  • Some Basics…. Page 8 of 20 © 2008 Starwood Hotels & Resorts Worldwide, Inc. All rights reserved.
    • CSS – Element Selection
    • XPath – Element Selection
    • XPath + RegEx
    • Selectors
    • Attributes
    • DOM Traversal
    • Events
    • AJAX
    • Animation
  • © 2008 Starwood Hotels & Resorts Worldwide, Inc. All rights reserved.
    • select all ”p” elements
    • $(”p”);
    • select an element with id=”some-id”
    • $(”#footer”);
    • select all elements with class=”some-class”
    • $(”.navigation”);
    jQuery – CSS – Element Selection Page 9 of 20
  • © 2008 Starwood Hotels & Resorts Worldwide, Inc. All rights reserved. jQuery – XPath – Element Selection
    • all links with a title attributes
    • $('a[@title]')
    • all ”divs” containing on ”li” element
      • $('div[li]')
    Page 10 of 20
  • © 2008 Starwood Hotels & Resorts Worldwide, Inc. All rights reserved. jQuery – XPath + RegEx
    • all links with ”href” starting with ”mailto:”
    • $('a[@href^=&quot;mailto:&quot;]')
    • all links with ”href” ending with ”.pdf”
      • $('a[@href$=&quot;.pdf&quot;]')
    • all links that contain ”mysite.com” anywhere in ”href”
      • $('a[@href*=&quot;mysite.com&quot;]')
    Page 11 of 20
  • © 2008 Starwood Hotels & Resorts Worldwide, Inc. All rights reserved. jQuery - Selectors //selects 2 nd div from the set $('div.someclass:eq(0)') // same as above but CSS based $('div.someclass:nth-child(1)') Other examples – $('tr:odd') // select all odd rows $('tr:even') // select all even rows More – $ (‘h2:first’) $(‘h2:last’) $(‘p:visible’) $(‘p:hidden’) $(‘input:password’) $(‘input:text’) $(‘p:odd’) Page 12 of 20
  • © 2008 Starwood Hotels & Resorts Worldwide, Inc. All rights reserved. jQuery - Attributes
    • Access a property of a matched element
    • .text()
    • .html()
    • .attr()
    • .removeAttr()
    • .remove() // returns element .css()
    • Examples
    • // add disabled attribute
    • $(&quot;#moveRight&quot;).attr(‘disabled’,true);
    • // remove disabled attribute
    • $(&quot;#moveLeft&quot;). removeAttr(‘disabled’);
    • //change the ”title” attribute of ”a” element where id=”some-id”
    • $('a#some-id').attr({'title': 'Some Text here'});
    Page 16 of 20
  • © 2008 Starwood Hotels & Resorts Worldwide, Inc. All rights reserved. jQuery – DOM Traversal
    • Several methods for DOM traversing
    • .next() .prev() .find() .children() .parent() .filter()
    • Examples –
    • $(‘div#navigate’).parent()
    • $(‘div#navigate’).next()
    • $(‘div#navigate’).prev()
    • $(‘div#navigate’).nextAll(‘a’)
    • DOM Manipulation
    • $(this). text ( “lorem ipsum” ) // inputs text into the selected element
    • $(this). empty () // empties the current selected element
    • $(this). append ( “<span>Foobar!</span>” ) // appends stuff !!
    • Advanced DOM Manipulation
    • $('td:contains(&quot;Henry&quot;)').parent().find('td').not(':contains(&quot;Henry&quot;)') )
    Page 17 of 20
  • © 2008 Starwood Hotels & Resorts Worldwide, Inc. All rights reserved. jQuery - Events $( “p” ). hover (function() {… // when you hover over all p tags.. $( “a” ). click (function() {… // when you click on any anchor tag.. $(&quot;select&quot;).bind(&quot;change&quot;, function() { … // do something when you change dropdown $(&quot;input&quot;).bind(&quot;keyup&quot;, function(event) { … // bind a key up event to an input element Page 18 of 20
  • © 2008 Starwood Hotels & Resorts Worldwide, Inc. All rights reserved. jQuery – AJAX Page 19 of 20
    • jQuery has excellent support for AJAX
    • .load(url) ;
    • Other advanced methods
    • $.get(url, params, callback)
    • $.post(url, params, callback)
    • AJAX Events
    • $.ajaxSend()
    • $.ajaxStart()
    • $.ajaxStop()
    • $.ajaxError()
    • $.ajaxSuccess()
    • $.ajaxComplete()
  • © 2008 Starwood Hotels & Resorts Worldwide, Inc. All rights reserved. jQuery – Animation Page 19 of 20
    • jQuery has built support for effects
      • .show() .hide() .toggle()
      • .fadeIn() .fadeOut() .fadeTo()
      • .animate() .stop() .queue()
      • .slideUp() .slideDown() .slideToggle()
    • Examples
    • $('h1').hide('slow');
    • $('h1').slideDown('fast');
    • $('h1').fadeOut(2000);
    • You can also chain them
      • $('h1').fadeOut(1000).slideDown() .load(url) ;
  • © 2008 Starwood Hotels & Resorts Worldwide, Inc. All rights reserved. Page 20 of 20 jQuery in Property Content
    • UI Alert Module
    • Enable Save button only when there is a change on the screen
    • AJAX – Lifecycle screen, Room Class Type Feature Search
    • Selectors, Animation, DOM manipulation etc – Lifecycle dynamic fields
  • © 2008 Starwood Hotels & Resorts Worldwide, Inc. All rights reserved. Page 20 of 20 References http:// www.jquery.com http://docs.jquery.com http://www.slideshare.net/manugoel2003/extending-jquery
  • © 2008 Starwood Hotels & Resorts Worldwide, Inc. All rights reserved. Thank You !! Page 20 of 20