jQuery

jQuery is known as the syntactic-sugar for JavaScript. This means you can write valid JavaScript without having to learn the full syntax of JavaScript. jQuery is a JS library and hence all jQuery written is JS, but not the other way around.

Including jQuery

The jQuery library can be included either using a content delivery network (CDN) or via downloading and linking the jQuery JS file.

Via CDN

Include the following into the <head> of your html document

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Via local copy

<script src="jquery-3.5.1.min.js"></script>

The $() function

jQuery implements the dollar function. The argument to this function can be any valid CSS selector. This makes using jQuery intuitive for designers who are familiar with CSS.

$("<CSS selector>")

Other jQuery Functions

The $() function in itself is not very useful. After selecting a group of tags (using CSS selectors), we need to do something with these tags. jQuery provides a variety of functions that do something with those tags.

We now look at some examples:

fadeOut()/fadeIn()

Consider the following example

<div id='fadeEg' style='height:100px; width:100px;background:red'></div>
<button onclick='$("#fadeEg").fadeOut()'>Fade Out</button>
<button onclick='$("#fadeEg").fadeIn()'>Fade In</button>

The <div id='fadeEg'> can be hidden or shown when the button is clicked. The onclick event triggers the jQuery written as the attribute value.

The duration of fadeIn/fadeOut (in milli-seconds) can also be specified as the argument for these functions. e.g.:

<div id='fadeEg1' style='height:100px; width:100px;background:red'></div>
<button onclick='$("#fadeEg1").fadeOut(1000)'>Fade Out</button>
<button onclick='$("#fadeEg1").fadeIn(2500)'>Fade In</button>

css()

<div id='cssEg' style='height:100px; width:100px;background:red'></div>
<button onclick='$("#cssEg").css("border", "10px solid")'>Add Border</button>
<button onclick='$("#cssEg").css("border", "")'>Remove Border</button>

<div id='cssEg1' style='height:100px; width:100px;background:red'></div>
<button onclick='$("#cssEg1").css({"border": "10px solid","background":"green"})'>Add style</button>
<button onclick='$("#cssEg1").css({"border": "","background":"red"})'>Remove style </button>

animate()

<div id='aniEg1' style='height:100px; width:100px;background:red'></div>
<button onclick='$("#aniEg1").animate({"margin-left":"70%","height":"10px"},2000)'>Add style</button>
<button onclick='$("#aniEg1").animate({"margin-left":"","height":"100px"}, 4000)'>Remove style </button>

Following is the list of some basic jQuery functions. Try them out. A full list can be found here: https://api.jquery.com/.

Function Description
hide() Hide the selected tags
show() Show the selected tags
toggle() Toggle the selected tags
slideUp() Slide up tag
slideDown() Slide down tag
slideToggle() Toggle silde up/down status of tag
hasClass() Check if selected tag has a class
addClass() Add class to selected tag
removeClass() Remove class from selected tag
toggleClass() Add/remove class
height() Height of tag
width() Width of tag

Chaining jQuery functions

jQuery functions can be chain linked like so:

$("body").addClass("night").delay(500).removeClass("night");

While chaining functions delay() (adds delay to the queue of transitions/animations) and stop() (which empties the transition/animation queue) are very useful.

Single Page Resume, with jQuery

Improving on where we left off we add night mode to our resume. We add the following new CSS (lines 44-56):

body.dark{
  font-family: courier;
  background: black;
  color: white;
}
body.dark a{
  color: white;
}
body.dark h2,
body.dark tr{
  background: white;
  color: black;
}

and makeup for 2 buttons (lines 61,62):

<button onclick='$("body").removeClass("dark")'>Regular</button>
<button onclick='$("body").addClass("dark")'>Dark Mode</button>

In order to enable night mode by default we attach an onload event listerner to <body> (line 60):

<body onload='$("body").addClass("dark")'>

Full HTML

Output