(1)

jQuery Part 1

(2)

jQuery The purpose of jQuery is to make it much easier to use JavaScript

It is a lightweight, “write less, do more” JavaScript library

jQuery has the following features:• HTML/DOM manipulation• CSS manipulation• HTML event methods• Effects and animations• AJAX• Utilities

jQuery is supported by all major browers

(3)

Adding jQuery Download jQuery library from jquery.com• v1.10.2 or v2.0.3• <script src=“jquery-1.10.2.min.js”></script>

Get jQuery from a Content Delivery Network (CDN)• Google and Microsoft host jQuery• <script

src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>• <script

src=“http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js”></script>

(4)

Document Ready Event Want to prevent any jQuery code from running before the document is finished loading• Hiding an element before it is created• Getting the size of an image before it is loaded

$(document).ready(function() {// jQuery and JavaScript

});

$(function() {// jQuery and JavaScript

});

(5)

jQuery Syntax With jQuery you select (query) HTML elements and perform actions on them

$(selector).action()

• $(this).hide()• $(“p”).hide()• $(“.test”).hide()• $(“#test”).hide()

(6)

jQuery Selector Examples

Syntax Description

$(“*”) Selects all elements

$(this) Selects the current element

$(“p.intro”) Selects all <p> elements with class=“intro”

$(“p:first”) Selects the first <p> element

$(“ul li:first”) Selects the first <li> element of the first <ul>

$(“ul li:first-child”) Selects the first <li> element of every <ul>

$(“[href]”) Selects all elements with href attribute

$(“a[target=‘foo’]”) Selects all <a> elements with target attribute == ‘foo’

$(“:button”) Selects all <button> and <input> of type button

$(“tr:even”) Selects all even <tr> elements

(7)

jQuery Event Methods Common DOM events

$(“p”).click(function() {// jQuery, JavaScript code

}

Mouse Events Keyboard Events

Form Events Document / Window Events

click keypress submit load

dblclick keydown change resize

mouseenter keyup focus scroll

mouseleave blur unload

(8)

jQuery Effects – Hide and Show Hide, Show, Toggle• $(selector).hide(speed,callback);• $(selector).show(speed,callback);• $(selector).toggle(speed,callback);- speed is “slow”, “fast” or milliseconds- callback is an optional function that executes

when effect completes

(9)

jQuery Effects - Fading fadeIn, fadeOut, fadeToggle, fadeTo• $(selector).fadeIn(speed,callback);• $(selector).fadeOut(speed,callback);• $(selector).fadeToggle(speed,callback);• $(selector).fadeTo(speed,opacity,callback);

(10)

jQuery Effects – Sliding slideDown, slideUp, slideToggle• $(selector).slideDown(speed,callback);• $(selector).slideUp(speed,callback);• $(selector).slideToggle(speed,callback);

(11)

jQuery Effects – Animation The animate() function lets you create custom animations• $(selector).animate({params},speed,callback);- params defines the CSS properties to be animated- speed is “slow”, “fast” or milliseconds

• To manipulate the position of an element it must have a css position attribute

jQuery queues animate calls

stop() function stops animation• $(selector).stop(stopAll,goToEnd)- stopAll optional, defaults to false, empties queue- goToEnd optional, defaults to false, complete

current animation

var div=$(“#foo”);div.animate({left:’100px’},”slow”);div.animate({fontSize:’3em’},”slow”);