4 introduction to jquery
1 / 34

4 . Introduction to jQuery - PowerPoint PPT Presentation

  • Uploaded on

4 . Introduction to jQuery. What is jQuery ?. Popular JavaScript library that helps you accomplish a lot of JavaScript functionality without having to reinvent the wheel. Cross browser compatible so that it will work in all major browsers.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about '4 . Introduction to jQuery' - lelia

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
4 introduction to jquery

4. Introduction to jQuery

What is jquery
What is jQuery?

  • Popular JavaScript library that helps you accomplish a lot of JavaScript functionality without having to reinvent the wheel.

  • Cross browser compatible so that it will work in all major browsers.

  • Web Designer friendly by taking advantage of CSS syntax.

  • Special functions for animation, web form validation, AJAX, and much more.

Accessing the library
Accessing the Library

  • Accessing the live library lets you always have the latest version. As an alternative you can download to your directory and link from there.

  • Link to the live jQuery library in the head before calling any other JS/JQ code:

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

    [The current version as of 23 December is 1.10.1]

Adding custom code on document load
Adding Custom Code on Document Load



// JQ code to run after page is loaded



Similar to:

document.onload = function(){

// JS code



$function() {

// same thing as above


Selecting elements in jquery
Selecting Elements in JQuery

  • In jQuery you select elements in the same way you do with css.

  • To select elements you use the function $() which is short for jquery() and put quotes around what we’re selecting:

  • ID: $(“#name”)

  • Tag: $(“name”)

  • Class: $(“.name”)

Selecting elements by tag name
Selecting Elements by Tag Name

  • If we had a set of paragraph tags we can access them ALL as:


  • And perform operations like this without writing a loop:

    $(“p”).size() -> to say how many there are

Selecting elements by class
Selecting Elements by Class

  • Just like in css you put a ‘.’ before the class name that you want to access


    Or if it’s in a paragraph you can do

    $(“p.className) //just like in css

Advanced selectors
Advanced Selectors

  • Descendent Selectors

    $(‘#navbar a’)

    Selects all the anchor tags within the navbar id.

  • Child Selectors

    $(‘body > p’)

    Selects all p tags that are children of the body tag.

  • Attribute Selectors


    Selects all image tags that contain the alt attribute


  • Even/odd

  • First/last

  • Not

  • Has

  • Items in a set

    • Ex. $(“p”)[0]

  • Contains

    • Ex. $(“p:contains(‘hello’)”)

  • Let’s go to the testbed page and try some!

    Add remove replace content
    Add, Remove, Replace Content

    • .html()

      • Reads or replaces markup of selected element

  • .text()

    • Does NOT accept tags

  • .append()

    • Adds child tag at the end

  • .prepend()

    • Add child tag at the beginning

  • Let’s try it!!!!

    Read set remove attributes
    Read, Set, Remove Attributes

    • .addClass()

    • .removeClass()

    • .css()

    • .attr()

    Special jquery features
    Special JQuery Features

    • Automatic Loops

      • Hide ALL images without writing a loop

      • $(‘img’).hide()

  • Chaining Functions

    • Set the height and width on ALL images

    • $(‘img’).width(300).height(300)

  • Manual looping each this
    Manual Looping: each, this

    $( "li" ).each(function( index ) {

    console.log( index + ": " + $( this ).text() );


    Introduction to jquery

    Introduction to jQuery

    Modifying Elements

    Selecting elements by their text
    Selecting elements by their text

    • You can use contains(“text”) to select an element.

    • E.g. $(“p:contains(‘hello’)”)

    Show and hide elements
    Show and Hide Elements

    • Use .hide() and .show() to show and hide your elements



    Ex creating new html elements
    Ex. Creating New HTML Elements

    • You can insert an element using the insertAfter function:

    • E.g.

      $(“<p>my new paragraph</p>”).insertAfter(“#last”);

    Ex re writing html
    Ex. Re-writing html

    • You can override elements html using the .html() function.

    • If you wanted to change an elements html you can go:

      $(“#elemId”).html(“<p>Hi Everyone</p>”);

    Ex re writing text
    Ex. Re-writing Text

    • You can change an elements text using:

      .text(“text I want to replace with”);

    Ex appending text
    Ex. Appending Text

    • You can append text to the end of an html element using .append(“…”);

      e.g. you have an element

      <p id=“age”>Today you are</p>

      You can append (It will go inside the <p> tag):

      $(“#age”).append(“5 years old”);

    Ex accessing checkboxes
    Ex. Accessing Checkboxes

    • You can get a list of checked, check boxes by:


    • You can get the number of checked items by:


    Ex selected dropdown
    Ex. Selected dropdown

    • You can figure out which item in a select box was picked by using the selected property.

      $(“select option:selected”).length


    • Events in javascript and jQuery are the triggers that you want to invoke an action:

    • E.g. mouse click, mouse hover…

    Binding an event
    Binding an Event

    • Binding an event to a function means that when the event is triggered the function that was bound to it will be executed.

      $(“img”).bind(event, data, handler)

    Let s bind a function
    Let’s bind a function

    Now everytime a click is executed functionName was exectued.

    $(function() {

    $(“#target”).bind(“click”, functionName);


    Binding multiple event handlers
    Binding Multiple Event Handlers

    • You can tie more than one event handler to the same event!


    • The shorthands for .bind(click,…) are:

    • For Click: .click(functionName)

    • For Hover: .hover(functionName)

    • For Key Up: .keyup(functionName)

    Keyup event this program displays text user entered
    KeyUp Event (This program displays text user entered)

    Hover events
    Hover Events

    • With hover events you can specify both the entry and exit events.

      .hover(over, out)