CHAPTER FOUR
jQuery
What is jQuery?
jQuery is just a JavaScript library that you include on your web page. As jQuery is built
on top of JavaScript, it provides all the functionalities of JavaScript. We can say from above
points jQuery is enhanced version of JavaScript.
As a library, it provides many built-in functions using which you can accomplish various
tasks easily and quickly.
jQuery is different from vanilla JavaScript because is basically a simpler way of doing
things in a more compatible way.
jQuery library contains features like HTML/DOM manipulation, CSS manipulation, CSS
manipulation and effects and animations
What can we do with jQuery?
DOM manipulation
Document Object Model (DOM) is tree like representation of your html.
DOM Manipulation is changing the structure, content, or style of a web page using
JavaScript after the page has been loaded.
To manipulate the DOM first the specific element must be selected and then update it.
Selecting: jQuery provides simpler and CSS-like way of selecting HTML elements
Updating: Multiple jQuery methods provide different ways to update, animate and loop
through elements in a much simpler way
COMPILED BY TADESSE SHEFERA 1
Handling events
jQuery allows you to bind events with elements without the need to write a fall back for
older versions
Events are actions like clicks or typing
Effects and animations
jQuery also allows us to add animated effects on our web page which takes a lot of pain
and lines of code with JavaScript.
Effects like show,hide, toggle, animate, slideDown are some examples.
Adding jQuery library to our web page
There are two ways to include jQuery into your HTML
You can download the latest version, save it locally in your computer and include
it in your HTML’s. Link to official jQuery website: [Link]
Including jQuery from a CDN and adding it right before the closing </body> in
<script> tag. Note: Your jQuery CDN needs to be placed before your custom
JavaScript file. It is always recommended to use the latest version available.
Currently, 3.7.1 is the latest (March 25, 2025).
[Link]
Selecting elements with jQuery (id, class, element selectors)
jQuery selectors: They select HTML elements based on their name, id, classes, types, attributes,
values of attributes and much more.
jQuery selectors mostly use the existing CSS Selectors and, in some instances, custom
selectors.
jQuery() vs $(): All jQuery selectors use a function called jQuery(). However, there is a shorthand
representation of the jQuery() method, just using the dollar sign at the start and add parentheses
like this: $(). Therefore, jQuery() is the same as $()
jQuery .class Selector: jQuery .class selector finds elements with a specific class.
Syntax: $(“.class-name”)
jQuery #id Selector: jQuery #id selector finds elements with a specific id.
Syntax: $(“#id”)
COMPILED BY TADESSE SHEFERA 2
jQuery element selector: jQury element selector selects elements based on the element name.
Syntax: $(“element”)
Examples using the following sample code
From the above code on line 16 you can observe how to add jQuery to our html using CDN.
Line 17 [Link] is your own JavaScript file to use jQuery
<<you will see the effect on Internet_Programming_II_Lab_Task_4>>
jQuery (filters): jQuery provides several filter methods to narrow down the search for elements
in a DOM tree.
first(): The first() method filters the set of matched elements and returns the first element
of the specified elements
last(): This method returns the last element of the specified elements.
COMPILED BY TADESSE SHEFERA 3
Example: The script below will select all <li>s and filters the first <li> and the last <li>
only from above department list and change its background color to green.
even() and odd() : These method filter the set of matched/selected elements and returns
those with an even/odd index number.
Example: Add bg-color css effect for even index of li element purple for odd and yellow
for even
Updating elements:
before(): The before() method inserts specified content in front of (before) the selected
elements.
after(): The after() method inserts specified content in behind the selected elements
COMPILED BY TADESSE SHEFERA 4
prepend(): The prepend() method inserts specified content inside the selected element at
the beginning of this selected element. In short, it puts the selected element at the first
index.
append(): The append() method inserts specified content inside the selected element at the
end of this selected element. In short, it puts the selected element inside an element at the
last index.
Example: Add two more department at beginning and end of our list as follow. (The
departments are Data Science and Information system)
Events handling
Click Event
The click event is triggered when a user presses and releases the mouse button on a
selected element, allowing you to perform actions like adding, removing, or modifying
content.
Example:
The above code used to add new list “Data Science” at the end of ul in deplist
COMPILED BY TADESSE SHEFERA 5
Double-Click Event
The dblclick event occurs when a user rapidly clicks twice on an element, often used for
actions like editing or removing content.
Example:
The above code used to remove a list when double clicked on list from ul in deplist
Hover Event
The hover event combines mouse enter and mouse leave, triggered when a user moves
the mouse over an element and then moves it away, often used to highlight items.
Example:
The above code is used to change the color of lists to when the user hover the mouse and
default when leaves.
<<please read, practice on Internet_Programming_II_Lab_Task_4>>
COMPILED BY TADESSE SHEFERA 6