Introduction to jquery
This presentation is the property of its rightful owner.
Sponsored Links
1 / 71

Introduction to jQuery PowerPoint PPT Presentation

  • Uploaded on
  • Presentation posted in: General

Introduction to jQuery. jQuery Quick facts. Is a cross-compatible javascript library Released in 2006 by John Resig Simplifies HTML document traversing, event handling, animating, and AJAX. Write less, do more!. Disclaimer!.

Download Presentation

Introduction to jQuery

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript

Introduction to jquery

Introduction to jQuery

Jquery quick facts

jQuery Quick facts

  • Is a cross-compatible javascript library

  • Released in 2006 by John Resig

  • Simplifies HTML document traversing, event handling, animating, and AJAX.

  • Write less, do more!



  • No lecture, tutorial, or video will be able to give you all possible information about jQuery.

  • You MUST visit the jQuery API website to find extensive documentation and some examples for learning all the ins/outs of jQuery.

CSE 3345

Getting jquery

Getting jQuery

  • You can download and locally host a copy which can be downloaded here.

  • Hotlink Google’s copy which is available here.

  • I prefer hot linking to Google’s copy.

CSE 3345

Including jquery in web pages

Including jQuery in web pages

  • To include jQuery in your website, all you need is a script tag with its srcpointed to the hosted location.



CSE 3345

Using jquery

Using jQuery

  • To use the jQuery library in your javascript, you can either use the jQuery() function or more simply the $().

  • $() creates a jQuery object

CSE 3345

W indow onload


  • Previously, we used the window.onload event as the place to start using javascript that manipulates the HTML document.

  • We used the window.onload event because that gets fired when all the objects in the document have been loaded into the DOM and all the images have finished loading.

CSE 3345

Ready event

.ready() event

  • jQuery provides a simple statement that checks the document and waits until it’s ready to be manipulated called the ready event.

  • You’ll put most of your code in this method


    // Your code here


CSE 3345

Get some elements

Get some Elements

  • jQuery provides two approaches to select elements:

    • jQuery Selectors

    • jQuery Filter Methods

  • Both approaches return a jQuery object which contains an array of all elements found.

CSE 3345

Jquery selectors

jQuery Selectors

Supports CSS selectors versions 1-3

  • By element: $(“div”)

  • By id : $(“#id”)

  • By class: $(“.classname”)

  • By attribute: $(“a[href]”)

  • By attribute that contains value: $(“div[class*=‘warning’]”)

  • Any CSS selector will work

CSE 3345

Jquery selectors1

jQuery selectors

  • See here for complete list.

CSE 3345

Your turn

Your turn







<pclass="warning">You should be careful!! jQuery is super

powerful and may be harmful to small babies</p>




-Select the google anchor element ( I can think of 5 ways to do this)

-Select the element with an id equal to nav

-Select the element with the class equal to warning

CSE 3345

Jquery example link

jQuery Example Link


CSE 3345

Jquery filter methods

jQuery Filter Methods

  • jQuery provides methods that will ‘filter’ sets return from a selector search.

  • .first() – reduces a set of matched elements to the first item

  • .last() – reduces a set of matched elements to the last item

  • .eq(index) – reduces a set of matched elements to the one at the specified index

  • .slice( start [, end] ) - reduces a set of matched elements to the subset specified by the range of indices

  • .find(selector|jQueryObject|element) –search the descendants of the current set filtered by a selector, jQuery Object, or element.

CSE 3345

Jquery object

jQuery Object

  • $(‘div’) will return a jQuery Object that contains an array of matched elements for the specified selector.

  • Using that jQuery object, we can perform any jQuery method on that object.

CSE 3345

Jquery method examples

jQuery Method Examples


$("body *").first();

$("body *").last();

$("body > *").slice(0,2);//selects the first two children of the body element

CSE 3345

Css methods

CSS Methods

  • .addClass() – Adds the specified class(es) to each element of the matched set.

  • .hasClass() - Determine whether any of the matched elements are assigned the given class.

  • .removeClass() -Remove a single class, multiple classes, or all classes from each element in the set of matched elements.

CSE 3345

Css methods1

CSS Methods

.addClass("warning");//adds the warning class

.addClass("warning critical");//adds the warning & critical classes

.hasClass("warning");// returns true

.hasClass("penguin");// returns false

.removeClass("warning");//remove the warning class

.removeClass("warning critical");//remove the warning & critical classes

.removeClass();//removes all classes

CSE 3345

Css method height

CSS Method .height()

  • Gets the current computed height for the first element’s content area of the matched set.

  • Returns a unit-less numeric pixel value (No parseInt() required).

  • Recommended for math calculations

CSE 3345

Css method height value

CSS Method .height(value)

  • Sets the CSS height of every element in the matched set

  • value can be an integer representing a number

  • value can be a String but it must include valid units

CSE 3345

Height example

.height() example


$('div').height();// 50

$('div').eq(0).height(100);//sets the height of the first div element of the matched set to 100px

$('div').eq(0).height("100px");//same as previous statement

CSE 3345

Other css height methods

Other CSS height Methods

  • .innerHeight() – get the height of the element including padding.

  • .outerHeight(includeMargin) – get the height of the element including padding, border, and optionally margin.

CSE 3345

Css method width

CSS Method .width()

  • Exactly like .height(), but using width

CSE 3345

Css element coordinate methods

CSS Element Coordinate Methods

  • .offset() – returns the current coordinates of the first element in the matched set relative to the document.

  • .position() - returns the current coordinates of the first element in the matched set relative to the elements containing block.

CSE 3345

Css methods css

CSS Methods .css()

  • .css() – Get the value of a style property for the first element in the set of matched elements.

  • .css(propertyName, value) – set one or more CSS properties for the matched set.

  • Get/set any CSS 1 & 2 property. Some of CSS3 isn’t supported by vanilla jQuery, but plugins can be used to support them.

CSE 3345

Css examples

.css() examples

$('p').css('height');// "50px"

$('p').css('color');// "rgb(255, 255, 255)"

$('p').css('width','100px');//sets the matched elements' width to 100px

$('p:last').css('color','red');//sets the last item of the matched elements color to red

CSE 3345

Mixing jquery and dom api

Mixing jQuery and DOM API

  • Using the jQuery object of matched elements, we can access a particular element using array index notation.

  • Doing this will return a DOM node.

    // returns a DOM node for the first matched element


CSE 3345

Mixing jquery and dom api1

Mixing jQuery and DOM API

  • You CAN’T use jQuery methods directly on a DOM node.

    $('div')[0].css('color','red');//this WON'T work

    $('div')[2].height();//this WON'T work

CSE 3345

Mixing jquery and dom api2

Mixing jQuery and DOM API

  • You CAN use DOM API properties and methods on DOM nodes directly.

    //The following uses DOM API properties on DOM nodes

    $('div')[0].style.color;// "red"

    $('div')[0].style.display;// "block"

    //The following uses DOM API methods on DOM nodes

    $('div')[0].addEventListener('click',function(e){ alert(;},false);

CSE 3345

Mixing jquery and dom api3

Mixing jQuery and DOM API

  • If you have a DOM node and want to use jQuery on it, use the node as the selector.

    //This example is a little wasteful

    var node = $('div')[0];

    $(node).css('color');// "black"

    //This example is useful

    $(document.body).css('display');// "block"

CSE 3345

Jquery events

jQuery Events

CSE 3345

Subset of jquery events

Subset of jQuery Events

  • .click()

  • .dblclick()

  • .focus(), .focusin(), .focusout()

  • .hover()

  • .keydown(), .keyup(), .keypress()

  • .mousedown(), .mouseup()

  • .mousemove()

  • .ready()

CSE 3345



  • Binds two event handlers to the set of matched elements.

  • One handler is executed when the mouse pointer enters an element.

  • A second handler is executed when the point leaves the element.

CSE 3345

Hover example

.hover() example


CSE 3345

Ways to use hover

Ways to use .hover()

  • Fade in/out objects

  • Make elements grow/shrink

  • Change element’s class and take advantage of CSS

CSE 3345



  • Unlike the window.onload event, jQuery’sready() is handled once the DOM hierarchy has been fully constructed.

  • In most cases, this is the best place to attach jQuery event handlers or run other jQuery code.

  • However if you need to perform operations on images, you’ll need to use jQuery’sload() event.

CSE 3345

Css revisited

.css() revisited

  • Using .css() as a setter method only modifies the element’s inline style.

  • You can unset an applied inline styles by supplying an empty string a the property value.

  • Note this does NOT remove a style that has been applied with a CSS rule in a stylesheet or <style> element.

CSE 3345

Unsetting inline css property

Unsetting inline CSS property

//this removes any inline color style applied


CSE 3345

Css revisited1

.css() revisited

  • jQuery can equally interpret CSS and DOM style properties.

  • So the following sets are equivalent:



    $('div').css('margin-top');// 100px


CSE 3345

Css revisited2

.css() revisited

  • If you dislike having to set CSS properties one at a time, then you’re in luck.

  • You can pass a JSON string which consists of property-value pairs to set multiple CSS properties.

CSE 3345

Css with json

.css() with JSON

//sets the bg color to black and the color to red all in one //method call



CSE 3345

Jquery effects

jQuery Effects

CSE 3345

Jquery effects1

jQuery Effects

  • The jQuery library provides several techniques for adding animations to a webpage.

  • You can create custom animations

  • You can use standard pre-made animations

CSE 3345

Premade fade animations

Premade Fade Animations

  • .fadeIn() - display matched elements by fading them to opaque.

  • .fadeOut() – display matched elements by fading them to transparent.

  • .fadeTo() – adjust the opacity of matched elements.

CSE 3345



  • .fadeIn() – animates matched elements to opaque over 400ms.

  • .fadeIn([duration]) – animates matched elements to opaque over duration ms.

  • You can use the string fast and slow to indicate durations of 200 and 600ms.

CSE 3345



  • .fadeIn([callback]) – you can provide a function to call once the animation is complete.

  • Using the .fadeIn() method on an element with display: none will change the element’s display value to inline or block.

CSE 3345

Fadein example

.fadeIn() Example

//fades matched img element to opaque after 400ms


//fades matched img elements to opaque after 200ms;



alert('~100ms have elapsed since click');


CSE 3345



  • Very similar to fadeIn() except for the following:

    • Matched elements fade to transparent

    • At the end of the animation, the element’s display property is set to none.

CSE 3345

Fadeout example

.fadeOut() Example


alert("The element's display property value is now none");


CSE 3345

Premade hiding showing animations

Premade hiding/showing animations

  • .hide() – Hide the matched elements

  • .show() – Display the matched elements

CSE 3345

Introduction to jquery


  • .hide() will immediately hide an element and is equivalent to .css(‘display’, ‘none’). The element displayvalue is saved in cache.

  • .hide([duration]) will animate the width, height, and opacity of matched elements. After the animation completes, the elements display values are set to none.

CSE 3345

Fadeout versus hide

fadeOut() versus hide()



CSE 3345

Introduction to jquery


  • .show() will immediately reveal matched elements and is equivalent to .css(‘display’, ‘block’). The elements display property is restored to its previous value.

  • .show([duration])will animate the width, height, and opacity simultaneously for durationms.

CSE 3345

Premade slide animations

Premade slide animations

  • .slideDown() – Display the matched elements with a sliding motion.

  • .slideUp() – Hide the matched elements with a sliding motion.

CSE 3345



  • Animates the height of matched elements. This will cause elements beneath the selected elements to slide down as well.

  • .slideDown() – with no specified duration the animation will complete in 400ms.

  • .slideDown([duration]) – performs slide animation for durationms. You can also specify fastand slow.

CSE 3345



  • .slideDown([callback]) – If supplied, the callback function will be called with the animation completes.

    $('img').slideDown();//performs animation for default 400ms

    $('img').slideDown('slow');//performs slide animation for 600ms

    $('img').slideDown(300,function(){ $(this).css('height');});

CSE 3345



  • Opposite of slideDown()

  • Supports same parameters

CSE 3345

Custom animation

Custom Animation

  • If you need more power than the premade animations, then you can make your own.

CSE 3345



  • This method allows developers to create animations effects on any numeric CSS value.

  • By default you can’t animate colors.

  • You can‘t animate font-family, position, display, etc. You can however set these properties once the animation completes.

CSE 3345

Specifying properties to animate

Specifying properties to .animate()

  • The animate() method accepts a property map similar to .css().

  • Use any numeric valued properties to animate.

  • Provide a duration and callback function for when the animation completes.

CSE 3345

Animate example

.animate() Example

//Use JSON string to specify CSS property map







CSE 3345

This in jquery

this in jQuery

  • In callback functions, the thisvariable is a DOM node.

  • That means you can’t use jQuery methods directly on it.

  • How do we fix that?

CSE 3345

This example



console.log('this: '+this);//this is a DOM node

// is the target of the click event.

console.log(' ';


console.log(' === target');


//stop the default action of the browser opening the link.




CSE 3345

Each function

.each() function

  • Iterates over a jQuery object executing a function for each matched element.

  • Each time the function runs, it is passed the current loop iteration.

  • The function is fired in the current context of the DOM element, so this refers to the element.

CSE 3345

Each example

.each() example


console.log(i+': '+this.tagName+

' '+ $(this).text(););


CSE 3345

Jquery extras

jQuery Extras

CSE 3345

Store data with jquery data

Store data

  • Store arbitrary data associated with the specified element.

  • Data is cleared when page reloads, key, value)

Get data with jquery data

Get data with

  • Returns a value for the named data store on the element., key);

CSE 3345

Jquery data example example,'foo','bar');// 'bar','foo');// 'bar'

//In chrome $0 is shorthand for document.body$0,'json',"{ 'name' : 'fred' }");// "{ 'name' : 'fred'}"$0,'json');// "{ 'name' : 'fred'}"$0,'id',52);// 52$0,'id');// 52$0,'isAwesome',true);// true$0,'isAwesome');// true

CSE 3345

Use can also do ajax with jquery

Use can also do ajax with jQuery

// Assign handlers immediately after making the request,

// and remember the jqxhr object for this request

varjqxhr= $.ajax("example.php")

.done(function(){ alert("success");})

.fail(function(){ alert("error");})

.always(function(){ alert("complete");});

// perform other work here ...

// Set another completion function for the request above

jqxhr.always(function(){ alert("second complete");});

CSE 3345

Jquery ui

jQuery UI


  • Provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications.

CSE 3345

  • Login