jQuery Framework - Property Content
-
Upload
jagadeeshm -
Category
Documents
-
view
1.321 -
download
0
Transcript of jQuery Framework - Property Content
CONFIDENTIAL & PROPRIETARY – May not be reproduced or distributed without written permission of Starwood Hotels & Resorts Worldwide, Inc.
Nov 16, 2009
jQuery Framework
Presented by,
Jagadeesh MotamarriLead 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 $()
<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>
© 2008 Starwood Hotels & Resorts Worldwide, Inc. All rights reserved.
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^="mailto:"]')
all links with ”href” ending with ”.pdf”
$('a[@href$=".pdf"]')
all links that contain ”mysite.com” anywhere in ”href”
$('a[@href*="mysite.com"]')
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
$("#moveRight").attr(‘disabled’,true);
// remove disabled attribute
$("#moveLeft"). 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("Henry")').parent().find('td').not(':contains("Henry")') )
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..
$("select").bind("change", function() { … // do something when you change dropdown
$("input").bind("keyup", 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