• Ralph Whitbeck
• jQuery Team Member
• ASP.NET and Front-end Developer

• The Company Dedicated to jQuery
• Founded by jQuery Team Members
• Services include:
  • Consultation
  • Custom Development
  • Remote Staff Augmentation
  • Training
• For more information contact us at http://appendto.com

• Cohost w/ Rey Bango
• 50 episodes
• http://podcast.jquery.com

• Why jQuery?
• jQuery basics
  • Find something, do something
  • Selectors
  • Iterations
  • Manipulation
  • Behaviors
  • Traversing
  • Chaining
  • Creating/Inserting Elements

• Why jQuery?
• jQuery basics
• Ajax
• Events
• Animations
• Plugins
• jQuery UI

• A Library that simplifies interaction between HTML and JavaScript
• Consistent API across browsers
• Will work IE6+, FireFox 2+, Chrome, Opera 9+, and Safari 3+
• Consistent and terse programming syntax
• Ajax support
• Easily extended

• Great Community
• Excellent Documentation
• Small Size

• jQuery is incredibly popular: jQuery Usage Statistics

• jQuery is incredibly popular: jQuery Usage Statistics
• Companies: Microsoft, Google, HP, Mozilla, IBM, Amazon, Intel
• Technologies with jQuery integrated:
  • Oracle APEX
  • Ruby on Rails
  • ASP.NET MVC
  • WordPress
  • Drupal

• Version 4.0 includes:
  • jQuery 1.4.2
  • jQuery UI 1.8
  • various jQuery plugins
• Using jQuery with APEX
  • Step Up Your APEX Apps with jQuery and Ajax (Abstract ID:242793)
  • Raj Mattamal, Niantic Systems
  • 06/29/2011, 3:00 PM-4:00 PM
  • 201A

• Instantiate the jQuery object
• Pass it a CSS selector
• Perform an action

jQuery( "div" ).hide();

//jQuery object shortcut alias - $
$( "div" ).hide();

<div></div>

Select by Id:

$( "#myId" ).css( "color", "red" );

<div id="myId">Div with id of myId</div>
<div id="theirId">another div</div>
<div id="yourId">another div</div>

Select by Class:

$( ".demoClass" ).css( "color", "red" );

<div class="demoClass otherClass">Div 1</div>
<div class="demoClass">Div 2</div>
<div class="anotherClass">Div 3</div>

Select by Tag:

$( "li" ).css( "color", "red" );

<ul>
	<li>Apple</li>
	<li>Pear</li>
</ul>

Once selection occurs, we do something

$( "#thisId" ).css( "color" , "green" );
$( "#lastId" ).css( "color" , "blue" );

<div id="thisId">Div with id of thisId</div>
<div id="thatId">another div</div>
<div id="lastId">Div with id of yourId</div>

Changes all elements returned via Implicit Iteration

$( "p" ).css( "color", "red" );

<p>One</p>
<p>Two</p>
<p>Three</p>

Some methods take callback functions .each() Operates on each p individually.

$( "p" ).each(function() {
	var rand;
	rand = Math.random();
	if ( rand > 0.5 ) {
		$( this ).hide();
	}
});

$( "p" ).each(function() {
	var rand;
	rand = Math.random();
	if ( rand > 0.5 ) {
		$( this ).hide();
	}
});

<p>One</p>
<p>Two</p>
<p>Three</p>

$( "#logo" ).attr( "src", "images/appendTo-avatar.png" );

<img id="logo" />

$( "#logo2" ).attr({
	src: "images/appendTo-avatar.png",
	alt: "Company logo"
});

<img id="logo2" />

$( "p" ).addClass( "baz" );
$( "p" ).removeClass( "foo" );
$( "p" ).toggleClass( "bar" );

<style type="text/css">
	.baz { color: red;}
	.foo { color: blue;}
	.bar { color: green;}
</style>
<p>One</p>
<p class="foo">Two</p>
<p class="bar">Three</p>

$( "p" ).css( "color", "red" );
$( "p" ).css({
	fontWeight: "bold", 
	border: "1px solid black"
});

<p>One</p>
<p>Two</p>

$( "p" ).click(function() {
	$( this ).css( "color", "red" );
});

<p>One</p>
<p>Two</p>
<p>Three</p>

$( "p" ).hover(function() {
	$( this ).css( "color", "green" );
}, 
function() {
	$( this ).css( "color", "" );
});

<p>One</p>
<p>Two</p>
<p>Three</p>

$( "ul" ).children().addClass("child");

<ul>
	<li>Fork</li>
	<li>Spoon</li>
</ul>

Many methods return the jQuery object. This allows another jQuery object method to be 'chained' on.

$( "a" ).text( "new anchor text!" ).css( "color", "red" );

// easier reading with returns and indents
$( "a" )
	.text( "new anchor text!" )
	.css( "color", "red" );

JS Bin Demo

$( "<div></div>" );

// Creates ...
<div></div>

$( "<ul><li>Hello</li></ul>" );

// Creates ...
<ul>
	<li>Hello</li>
</ul>

// New in 1.4
$( "<div/>" , {
	class: "test",
	text: "Click me!",
	click: function(){
		$( this ).toggleClass( "test" );
	}
});

// Creates ...
// Clicking toggles the class
<div class="test">Click me!</div>

Attach immediately after the p

$( "p" ).after( "<img src='images/appendTo-avatar.png' />" );    

<p>Apple</p>
<p>Orange</p>

Attach immediately after the p

$( "<img src='images/appendTo-avatar.png' />" )
	.attr( "alt", "logo" )
	.insertAfter( "p" );

<p>Apple</p>
<p>Orange</p>

Attach immediately before the p

$( "p" ).before( "<img src='images/appendTo-avatar.png' />" );

<p>Apple</p>
<p>Orange</p>

$( "#apple" )
	.prepend( "<img src='images/red_apple.jpg' />" );

$( "#orange" )
	.append( "<img src='images/orange.jpg' />" );

<p id="apple">Apple</p>
<p id="orange">Orange</p>

$( "<img src='images/red_apple.jpg' />" )
	.prependTo( "#apple2" );

$( "<img src='images/orange.jpg' />" )
	.appendTo( "#orange2" );

<p id="apple2">Apple</p>
<p id="orange2">Orange</p>

$( "p" ).wrap( "<div></div>" );

<p>Hello world</p>

• Ajax = Interrelated set of web technologies.
• Allow retrieval of data from the server asynchronously and in the background.

$.get( "../references/sample.html", function( data ) {
	$( "p" ).html( data );
}, "html" );

Direct Link to HTML file

<p>Add content here</p>

$.getJSON( "../references/sample.json", function( json ) {
	$( "p" ).append( json.states[0] + "\n" );
});

Direct Link to JSON file

<p>Add content here</p>

$.ajax() takes in an object literal

$.ajax({
	url: "../references/sample.html",
	type: "GET",
	dataType: "html",
	success: function( data ) {
		$( "p" ).append( data );
	}
});

<p>Add content here</p>

Seems simple enough at first glance

$( "#hideshowDemo" )
	.hide( 1000 )
	.show( 1000 );

<p id="hideshowDemo">A paragraph to animate</p>

Other animation shortcuts

var speed = 400;
$( "#slidefadeDemo" )
	.slideUp(speed)
	.slideDown(speed)
	.fadeOut(speed)
	.fadeIn(speed);

<p id="slidefadeDemo">A paragraph to animate</p>

Custom animations

$( "p" ).animate({"margin-left": "300px"}, 5000);

<p>I should move to the right</p>

$( "a.foo" ).click(function( e ) {
	$( this ).css( "color", "green" );
	e.preventDefault();
});

$( "a.foo" ).mouseover(function() {
	$( this ).css( "color", "red" );
});

<a class="foo" href="http://appendto.com">.appendTo()</a>

Events are chainable

$( "a.foo" )
	.click(function( e ) {
		$( this ).css( "color", "green" );
		e.preventDefault();
	})
	.mouseover( function() {
		$( this ).css( "color", "red" );
	});

<a class="foo" href="http://appendto.com">.appendTo()</a>

• click, dblclick, mouseover, mouseout
• mouseenter, mouseleave
• change, focus, blur
• keydown, keyup, keypress
• scroll, resize

• jQuery core library contains a number of actions, but more can be added
• A plugin typically extends the core jQuery object
• A plugin is a jQuery method defined externally to jQuery Core
• A collection of one or more methods
• Extends the core jQuery object

$( ".big-text" ).bigtext();

<div class="big-text" style="width: 300px">
  <div>The plugin</div>
  <div>BIGTEXT</div>
  <div>DEMO</div>
  <div>for you to see how it works</div>
</div>

• Oracle APEX includes jQuery UI 1.8
• Subset only
  • Datepicker
  • Tabs

• Effects
• Interactions
• Widgets
• Theming...

$( ".resize-demo" ).resizable();

<div class="resize-demo"><h3>\m/   \ > . < /   \m/<h3></div>

$(".draggable-demo").draggable({
	parent: "body",
	helper: "clone"
});

<div class="draggable-demo">Drag me around!</div>

$(".draggable-demo").draggable({
  helper: "clone",
  scope: "demoItem"
});
$(".droppable-demo").droppable({
	drop: function() { // <--- custom event hook.
		alert( "smart." );
	}, scope: "demoItem"
});

<div class="draggable-demo" >Bacon Strips</div>
<div class="droppable-demo" >Oven</div>

$( ".sortable-priorities" ).sortable();
// ... later in code ...
$( ".sortable-priorities" ).bind( "sortupdate",
	function( evt, ui ) {
		if ( $( this ).find( "li:first" ).text() === "beer" ) {
			alert( "wow. nice priorties Ralph." );
		} else if( $( ui.item ).text() === "beer" ) {
			alert( "shouldn't you be concerned with other things?" );
		}
	});

<ul class="sortable-priorities">
	<li><span>beer</span></li>
	<li><span>beer</span></li>
	<li><span>conference talk</span></li>
	<li><span>beer</span></li>
	<li><span>beer</span></li>
</ul>

UI Widgets are fully-featured UI controls

• HTML (typically dynamically added)
• CSS (themeing)
• JavaScript (event handling and functionality)

Included with APEX 4.0 jQuery UI

$(".datepicker-demo").datepicker();

<input class="datepicker-demo" type="text" />

Included with APEX 4.0 jQuery UI

$( ".tabs-demo" ).tabs();
setTimeout( function() {
	$( ".tabs-demo" ).tabs( "select", 2 );
}, 3000 );

<div class="tabs-demo">
	<ul>
		<li><a href="#tabs-1">Nunc tincidunt</a></li>
		<li><a href="#tabs-2">Proin dolor</a></li>
		<li><a href="#tabs-3">Aenean lacinia</a></li>
		</ul>
		<div id="tabs-1">
		<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci.</p>
	</div>
	<div id="tabs-2">
		<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam.</p>
	</div>
	<div id="tabs-3">
		<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
		<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit.</p>
	</div>
</div>

var data = ['BSD','GPL','MIT','Apache', 'APEX'];
$(".autocomplete-demo").autocomplete({
	source: data
});

<input class="autocomplete-demo" type="text" />

$(".dialog-demo").dialog({
	autoOpen: true,
	hide: "explode"
});

<div class="dialog-demo">This is the text that will appear in the dialog.</div>

$( ".slider-demo" ).slider({
	change: function( evt, ui) {
		alert( ui.value );
	}
});

<div class="slider-demo" style="width: 1000px;"></div>

$( ".progress-demo" ).progressbar({
	value: 45
});

<div class="progress-demo" style="width: 1000px;"></div>