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.

Image copyright jamiebalfour.scot

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.

Image copyright jamiebalfour.scot

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.

Image copyright jamiebalfour.scot

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
jQuery
© 2020 - 2024 J Balfour
21:56 | 14-04-2024
Join Live Session
Start Remote
Save Progress
Slideshow Outline
Presenter Mode
Widget Screen
Canvas Controls
Random Selector
Timer
Volume Meter
Binary Converter
Python Editor
Show Knox 90
Provide Feedback
Help
!
Keywords
    DragonDocs Management
    Random selector
    Sections
      Binary conversion
      Denary to binary conversion
      Binary to denary conversion
      Feedback 👍
      Accessibility

      Apply a filter:

      ×
      All slideshow files