jQuery Framework - Property Content

1,498 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,498
On SlideShare
0
From Embeds
0
Number of Embeds
23
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

jQuery Framework - Property Content

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

×