Web Development
Module 12 – JQUERY AND DOM MANIPULATION
Learning Objectives
At the end of the module the student is expected to:
1. Understand and apply JQUERY in web application
2. Download JQUERY and setup
3. Understand the steps in using JQUERY
4. Understand and apply $(document) statement
5. Understand and apply calling or targeting HTML elements
6. Understand the jQuery method
7. List, explain and apply the jQuery Event handlers
Module 12 – JQUERY AND DOM MANIPULATION 1
Web Development
Introduction
jQuery is a javascript library that makes web scripting easier for us.
Before, most website builders use HTML and JavaScript to build websites. They uses HTML for
web content just like today and for web design since there were no CSS yet. Also with the help of
JavaScript scripting, they were able to manipulate, interact and make use of web elements especially for
events/triggers.
Download JQuery
To download the latest version of jQuery, visit:
https://jquery.com/download/
How to jQuery
In order to use jQuery, you should do any of the following:
a. Download jQuery into your application folder and use it in the view:
Assuming you have downloaded jQuery and placed it on a local js folder,
you can link it to script tag’s src attribute inside the head tag.
b. Use jQuery CDN
Module 12 – JQUERY AND DOM MANIPULATION 2
Web Development
It is almost identical to a.) but rather than downloading the jQuery js file, it is linked to a jQuery
js file on a hosted server (or jQuery site) instead.
Are you $(document).ready();?
After linking the jQuery resource js file, create an internal or external script with a
$(document).ready() function in it. This function will be called if the browser contents has properly
loaded its contents and is ready.
You can put this code right after the jQuery script linking(<script src…) line.
If the page is ready, it will show a modal with a message “jQuery is ready!” like this:
Looks confusing? Too many parenthesis and curly braces?
Well, memorize it, you’ll benefit from it. I promise
Again, that is:
$(document).ready(function(){
//code here
});
Practice makes perfect.
Module 12 – JQUERY AND DOM MANIPULATION 3
Web Development
Calling or Targeting HTML elements
With jQuery, you can call or target HTML elements. If you know targeting elements in CSS, you
can also target elements in jQuery!
To target an html element, we have to use the magic code:
$( element )
Where inside the parenthesis you can simply call the element tag,
Example:
$( p ) //which targets all paragraph elements
$( div ) //targets all div elements
$( input ) //targets the input elements
element ID,
Example:
$( “#header” ) //targets all element who has an ID of header
And/or class
Example:
$( “.navigation-item” ) //targets elements with the class: navigation-item
When selecting ID, we have to put the element string inside quotes and include a (#) number symbol
prefix. On the other hand, classes uses (.) dot symbol prefix.
jQuery Methods
So what’s next after learning to call or target elements? We have jQuery Methods. These are functions
that manipulate the selected element. Below are some:
.val()
It is used to get or set values from and to an input element particularly textboxes.
Example
var x = $( “#txtname” ).val() ; //gets the value of the id “txtname” and assigns it to a variable
$( “txtname” ).val( “Dustin” ); //sets the value of the id “txtname” to “Dustin”
.text()
It is used to get or set values from and to a non-input element like divs.
Example
var y = $( “.header” ).text(); //gets the value of the class “header” and assigns it to a variable
$( “.header” ).text( “jQuery Tutorial” ); //sets the value to “jQuery Tutorial”
Module 12 – JQUERY AND DOM MANIPULATION 4
Web Development
.hide()
It is used to hide selected element(s)
Example:
$(“#some-item”).hide(); //hides the element with the id “some-item”
.show()
It is used to show selected element(s)
Example:
$(“#hidden-item”).show(); //shows the element with the id “hidden-item”
.toggle()
It is used to toggle, switch or alternate the selected item’s visibility: show and hide
Example:
$(“#some-item”).toggle(); //toggles the element with the id “some-item”
.fadeIn(interval)
It is used to produce a fading in effect within a given time on a selected element
Example:
$(“#some-item”).fadeIn(3000); //fades-in the item in 3 sec (3000ms)
.fadeOut(interval)
It is used to produce a fading out effect within a given time on a selected element
Example:
$(“#some-item”).fadeOut(3000); //fades-out the item in 3 sec (3000ms)
.slideUp(interval)
It is used creates a sliding up transition within a given time on a selected element
Example:
$(“#some-item”). slideUp (3000); //slide the item up in 3 sec (3000ms)
.slideDown(interval)
It is used creates a sliding down transition within a given time on a selected element
Example:
$(“#some-item”). slideDown (3000); // slide the item down in 3 sec (3000ms)
.slideLeft(interval)
It is used creates a sliding to the left transition within a given time on a selected element
Example:
$(“#some-item”). slideLeft (3000); // slide the item to the left in 3 sec (3000ms)
.slideRight(interval)
It is used creates a sliding to the right transition within a given time on a selected element
Example:
$(“#some-item”). slideRight (3000); // slide the item to the right in 3 sec (3000ms)
Module 12 – JQUERY AND DOM MANIPULATION 5
Web Development
Using jQuery Event Handlers
Before a specific jQuery action execute, we call the Event Handlers to trigger the action. After
targeting elements, we instantly add the event handler that will be called to execute the instructions
within the code block. Examples of event handlers are click, dblclick, mouseover and many more. (see
api.jquery.com for a full documentation).
Example of click event usage:
$( “#btnsubmit” ).click(function(){
alert(‘ The submit button is clicked!’);
});
This will show a message “The submit button is clicked!” on a pop-up modal upon a single click.
Example of dblclick event usage:
$( “#btnsubmit” ).dblclick(function(){
alert(‘ The submit button is clicked twice!’);
});
This will show a message “The submit button is clicked twice!” on a pop-up modal. This will be triggered
by a double mouse click.
Example of mouseover event usage:
$( “#btnsubmit” ).mouseover(function(){
alert(‘ The submit button has just mouse hovered!’);
});
This will show a message “The submit button has just mouse hovered!” on a pop-up modal.
Module 12 – JQUERY AND DOM MANIPULATION 6
