hub.eb?material_id=382&track_id=426

Getting Started With jQuery


jQuery is a useful JavaScript library that simplifies methods of interacting with the DOM and is included in the Default Presentation Template.

In jQuery, you:

  1. Select an element using a jQuery selector.
    • jQuery selectors take the form $(‘#elementID’), more information can be found here
  1. Perform an action upon the element.
    • One pair of useful methods in jQuery is .addClass(‘class’) and .removeClass(‘class’). These methods can be used to manipulate the CSS classes on the selected element. More information can be found on jQuery methods
$("#myElement").addClass("myClass");

Steps


1

Create a form and add a Panel Control. Give the panel a red border using the Styling Assistant.

Ensure that the form has jQuery attached. The bootstrap4 Presentation Template includes jQuery.

2

Open the HTML Properties window and give the panel the following id: myPanel

3

Create a jQuery click event with the following script attached:

$("#myPanel").css("border", "1px solid blue");
4

Run the form and click on the panel. You will notice that the border will change.

Current Module

Related