1 of 12

Web I

Class 12

Fall 2024

DES255

2 of 12

jQuery

jQuery is a javascript “library” that makes working with Javascript easier.
A “library” in web development is a file you can download or link to of prewritten code that helps you to complete a task more easily.
jQuery simplifies writing Javascript with prebuilt methods and functions.
For example, last week we when we made a dark mode function, we had to create a variable to remember the current state of the button. We can do that with jQuery simply with “button.toggle()”

Installing jQuery

The jQuery library is essentially one big file with lots and lots of javascript optimized to be as efficient as possible
We don’t have to open or edit this file at all, just reference it like other source files.
You can download the file at jquery.com or reference a CDN, or “content delivery network”
A CDN is essentially when a file is hosted somewhere else and we reference it. Google and other big file sharing services offer CDNs.
CDNs have the added benefit of reducing load time if someone has already accessed that same CDN link on another site.
Find the latest jQuery CDN here. You can add the cdn code to end </body> part of the HTML, in addition to your JS file. Make sure jQuery codes first!

jQuery syntax

The jQuery syntax focuses on selecting an element and performing an action on it.
The syntax looks like this: $(“selector”).action()
The $ is used as a shorthand whenever we want to reference jQuery
Inside the selector, we can reference what we want to select similar to css, “.class”, “#id”, “p” etc.
Example: $("p").hide() - hides all <p> elements.
We call the actions associated with an element “methods”

jQuery events

jQuery event methods are similar to the “onclick” “onblur” etc events we learned with vanilla Javascript
This syntax can be easy to mess up, pay attention to the amount of parentheses and curly braces

$("p").click(function(){

// action goes here!!

});

$("#p1").mouseenter(function(){

alert("You entered p1!");

});

jQuery “this”

In jQuery, if you want to perform an action on an element you have already selected, you can do to with the keyword “$(this)”
Example:

$("button").click(function(){

$("this").hide( );

});

Useful jQuery Methods

$(“selector”).hide() = hides the element. It changes the element’s display css to display:none;
$(“selector”).show() = shows the element;
$(“selector”).toggle() = toggles the visibility depending on the current state
$(“selector”).addClass(“class-name”) = adds the specified class to the element
$(“selector”).removeClass(“class-name”) = removes the specified class
$(“selector”).toggleClass(“class-name”) = toggles the class to add/remove depending on current state.

Animating with jQuery

$(“selector”).hide(1000) = You can add a duration (in milliseconds) to the method parameters , which will animate the height, width, and opacity of an element simultaneously
$(“selector”).fadeIn(1000) or $(“selector”).fadeOut() = Animates opacity
$(“selector”).fadeToggle() = fades in or out depending on current state
$(“selector”).slideUp(), $(“selector”).slideDown() or $(“selector”).slideToggle = animates the element in with a sliding animation