Slides badge

jQuery

Learning Intentions

  • Understand the use cases for jQuery

  • Be able to animate using jQuery

Success Criteria

  • I can use jQuery to simplify web development

What is jQuery?

  • jQuery is a JavaScript library. 
  • This means that you add it to an existing webpage and it enables functionality.
  • Since jQuery is written in JavaScript, everything you can do in it can be done with pure JavaScript.
  • However, jQuery makes it easier to write than having to write it in pure JavaScript.
  • jQuery's motto is write less, do more and it makes sense for how it works.

Writing jQuery

  • jQuery has a strange looking syntax:

First, the $ sign represents the jQuery library. Any time you use jQuery, you start the statement with a $ sign.

The selection part is very important as it tells jQuery what you want to style, animate or modify. This is done using selectors like those found in CSS such as .main_text

The `on` part of the statement is telling jQuery what jQuery function to apply. There are loads of these! The `on` function is used to tell the browser how to respond to an event, in this case a click event.

Writing jQuery

  • jQuery has a strange looking syntax:

First, the $ sign represents the jQuery library. Any time you use jQuery, you start the statement with a $ sign.

The selection part is very important as it tells jQuery what you want to style, animate or modify. This is done using selectors like those found in CSS such as .main_text

The `on` part of the statement is telling jQuery what jQuery function to apply. There are loads of these! The `on` function is used to tell the browser how to respond to an event, in this case a click event.

Writing jQuery

  • jQuery has a strange looking syntax:

First, the $ sign represents the jQuery library. Any time you use jQuery, you start the statement with a $ sign.

The selection part is very important as it tells jQuery what you want to style, animate or modify. This is done using selectors like those found in CSS such as .main_text

The `on` part of the statement is telling jQuery what jQuery function to apply. There are loads of these! The `on` function is used to tell the browser how to respond to an event, in this case a click event.

Writing jQuery

  • jQuery has a strange looking syntax:

First, the $ sign represents the jQuery library. Any time you use jQuery, you start the statement with a $ sign.

The selection part is very important as it tells jQuery what you want to style, animate or modify. This is done using selectors like those found in CSS such as .main_text

The `on` part of the statement is telling jQuery what jQuery function to apply. There are loads of these! The `on` function is used to tell the browser how to respond to an event, in this case a click event.

//Adds a click event to every button
$("button").click(function(){
  alert("Button clicked");
  //Animate the main content section
  $("#main_content").animate({"opacity" : 0.2}, 2000);
})

Click here

This is the main content

Writing jQuery

  • Examples of jQuery
//Animation
$("#content").animate(
  {
    "margin-top" : 50px,
    "margin-left" : 20px
  }
);

//Changing HTML
$("#main_text").html("This is the new main text");

//Adding event handlers
$("button").on("click", function(){
  alert("A button was clicked");
});

Visit https://www.w3schools.com/jquery/ and work through the jQuery examples there. 

Start by copying the examples, then trying them out in your web browser.

Your teacher will check in on you as you work through them.

Task

Presentation Overview
Close
JB
NPA Web Design :: 3 Interactive Multimedia :: jQuery
© J Balfour
06:37 | 13-08-2022
Save progress Show presenter mode Toggle whiteboard
Dark Mode Bold Text Accessibility
Random Number Generator Timer Binary & decimal converter
Provide feedback Help
Keywords
    Binary conversion
    Feedback 👍
    Accessibility

    Apply a filter:

    All slide files