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

of 20

http://www.ejohn.org/


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

of 20


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


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>


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


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


jQuery – XPath – Element Selection

all links with a title attributes

$('a[@title]')

all ”divs” containing on ”li” element

$('div[li]')

Page 10 of 20


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


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


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


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


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


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()


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

http://www.jquery.com/

http://www.jquery.com/

http://docs.jquery.com/

http://www.slideshare.net/manugoel2003/extending-jquery


Thank You !!

Page 20 of 20

jQuery Framework - Property Content

Documents

Transcript of jQuery Framework - Property Content