Scribd
Upload
115 views

Introduction To Jquery: Study Guide For Module No. 6

The document provides an overview and study guide for a module on jQuery. It introduces jQuery as a JavaScript library that simplifies interaction between HTML and JavaScript. The module objectives are to learn jQuery concepts, embedding jQuery in web pages, selectors, events, and methods. Key points covered include the basics of jQuery syntax, how to select elements, common events, and some example jQuery methods. Learning activities are included to apply concepts from the module.

Uploaded by

Dhan Cabugao
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
115 views

Introduction To Jquery: Study Guide For Module No. 6

The document provides an overview and study guide for a module on jQuery. It introduces jQuery as a JavaScript library that simplifies interaction between HTML and JavaScript. The module objectives are to learn jQuery concepts, embedding jQuery in web pages, selectors, events, and methods. Key points covered include the basics of jQuery syntax, how to select elements, common events, and some example jQuery methods. Learning activities are included to apply concepts from the module.

Uploaded by

Dhan Cabugao
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

FM-AA-CIA-15 Rev.

0 10-July-2020

Study Guide in WS101 Web Systems and Technologies 1 Module No. 6

STUDY GUIDE FOR MODULE NO. 6

Introduction to jQuery

MODULE OVERVIEW

jQuery is a Javascript library with the philosophy “write less, do more”. It was conceived in 2006
by John Resig. The contents of the module include embedding juery scripts in a web page, its
basic syntax, selectors, event handling and jQuery method effects.

MODULE LEARNING OBJECTIVES

At the end of this module, students are expected to:

1. Learn the basic concepts of jQuery

 Understand Javascript libraries, jQuery and its benefits

 Embed jQuery scripts in a web page

 Understand the use of jQuery selector

2. Discover event handling in jQuery

 Understand the use of jQuery effects method

LEARNING CONTENTS (Javascript Libraries, JQuery and its Benefits)

6.1. JavaScript Libraries, jQuery and its Benefits


Javascript libraries are aimed to simplify the use of JavaScript and makes it more
accessible by creating easy-to-use controls. It has simpler syntax and supports different
browsers (cross browser). One of which is jQuery.

jQuery is a javascript library/framework that is fast, concise, lightweight which is based


on the principle “write less, do more”. It is CSS 3 compliant, supports myriad of
browsers and has a great community. It simplifies that interaction of HTML and
Javascript.

It was originally created by John Resig in early 2006. The jQuery project is currently run
and maintained by a distributed group of developers as an open source project.

.LEARNING CONTENTS (Embedding in a Page)

6.2 Embedding in a Page

<html>
<head>
<script src=“path/jquery-
x.x.js"></script>
$(function() {
// Start here
});

 The <script> element – the jQuery code can be placed inside the <script> element.

PANGASINAN STATE UNIVERSITY 1


FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WS101 Web Systems and Technologies 1 Module No. 6

 The $function (handler) – this statement is known as ready event where the handler
is basically a function to be executed safely as the document is ready to be
manipulated.

LEARNING CONTENTS (Basic Syntax)

6.3 Basic Syntax

A jQuery statement starts with the dollar sign ($) and ends with a semicolon (;). The
dollar sign ($) is an alias for jQuery.

LEARNING CONTENTS (Selecting Elements with jQuery)

6.4 Selecting Elements with jQuery

Selecting the elements through typical Javascript approach can be tedious but jQuery
can be of great help. The following are the common ways of selecting elements on a
page and do something with them using jQuery.

1. Selecting By Id

$(“#header”)

<body>
<div id=“header”>
<span id=“logo”>Logo
here…</span>
<ul class=“menu”>
<li>user name</li>

…..
<li>logout</li>
</ul>
</div>
……
</body>

PANGASINAN STATE UNIVERSITY 2


FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WS101 Web Systems and Technologies 1 Module No. 6

2. Selecting By Class

$(“.updated”)

3. Selecting by tag name

$(“table”)

4. Combine them

$(“#header ul.menu li”)


<body>

 <div id=“header”>
 <span id=“logo”>Logo
here…</span>

 <ul class=“menu”>
 <li>user name</li>

 …..

<li>logout</li>
</ul>
</div>
……
</body>

LEARNING CONTENTS (Events)

6.5 Events

Events are often triggered by the user’s interaction with the web page such moving a
mouse over an element, selecting a radio button, clicking on an element among others.
These are user actions that a web page can respond to. Some of the commonly used
events are listed in the table below.

Table 6.1

Mouse Keyboard Form Events Document/Window


Events Events Events

click keypress submit load

dblclick keydown change resize

mouseenter keyup focus scroll

mouseleave blur unload

PANGASINAN STATE UNIVERSITY 3


FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WS101 Web Systems and Technologies 1 Module No. 6

Example:

<script>
$(function() {
$(“#message”).click(function(){
alert(“Hello World”);
})
});
</script>

<span id=“message”> Click Me </span>

When you click “Click Me” text, this will display alert with the text “Hello World”.

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-
3.5.0.js"></script>
<script>
$(function(){

$("p").click(function(){
alert("Hello World");
});

$( "#target2" ).blur(function() {
alert( "Handler for .blur() called." );
});

$( "li" ).hover(
function() {
$( this ).append( $( "<span>***</span>" ) );
}, function() {
$( this ).find( "span").last().remove();
};

$('#target1').keypress(function(e) {
code = e.which;
if(code.toString() == 13) {
alert('Hello, '+$("#target1").val()+' You pressed
enter!');
}
});

PANGASINAN STATE UNIVERSITY 4


FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WS101 Web Systems and Technologies 1 Module No. 6

});
</script>
</head>
<body>
<p> Click Me</p>
<input id="target1" type="text">
<input id="target2" type="text">
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Chips</li>
<li>Socks</li>
</ul>
</body>
</html>

PANGASINAN STATE UNIVERSITY 5


FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WS101 Web Systems and Technologies 1 Module No. 6

LEARNING ACTIVITY 1

Checkpoint: Home-Based Activity

The following will be submitted on the specified d ate. It includes softcopy of the UI and
codes and the physic al files for the activity.

1. Crete a navigation menu that changes color (use hover event) and when the user

clicks the item, it loads a website to the container. See jQuery load() method.

Item

Item

Item

Item

PANGASINAN STATE UNIVERSITY 6


FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WS101 Web Systems and Technologies 1 Module No. 6

LEARNING CONTENTS (jQuery Methods)

6.6 jQuery Methods


jQuery provides various methods for different tasks eg.DOM manipulation, ajax etc.
Some of the methods are discussed as follows. For the complete set of methods and its
categories visit api.jquery.com.

Effects

In jQuery, the following are methods for creating animation effects.


 Hide()
 Show()
 Toggle()
 Slide()

jQuery hide() and show()

With jQuery, you can hide and hsow HTML elements with the hide() and show()
methods.

Syntax:

 $(selector).hide(speed, callback);
 $(selector).show(speed, callback);

Example:

$("button").click(function(){
 $("p").hide(3000,function(){

 alert("The paragraph is now hidden");

 });
});

jQuery fadeIn(), fadeout(), fadeToggle(), fadeTo()


With jQuery you can fade an element in and out of visibility. jQuery has the
following fade methods:
 fadeIn()
 fadeOut()
 fadeToggle()
 fadeTo()

Syntax:

 $(selector).fadeIn(speed,callback);

 $(selector).fadeOut(speed,callback);

 $(selector).fadeToggle(speed,callback);

 $(selector).fadeTo(speed,callback);

Example:

PANGASINAN STATE UNIVERSITY 7


FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WS101 Web Systems and Technologies 1 Module No. 6

$("button").click(function(){
$("p").fadeToggle(3000,function(){

alert("The paragraph is now


shown/hidden");
});
});

jQuery slideDown(), slideUp(), slideToggle

With jQuery you can create a sliding effect on elements. It has the following slide
methods:
 slideDown()
 slideUp()
 slideToggle()

Syntax:

 $(selector).slideDown(speed,callback);

 $(selector).slideUp(speed,callback);

 $(selector).slideToggle(speed,callback);

Example:

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

$("#flip").slideToggle(3000,function(){
alert("The paragraph is now
shown/hidden");
});

});

PANGASINAN STATE UNIVERSITY 8


FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WS101 Web Systems and Technologies 1 Module No. 6

LEARNING ACTIVITY 2

Checkpoint: Home-Based Activity

The following will be submitted on the specified date. It includes softcopy of the UI and codes
and the physic al files for the activity.

1. Modify the previous lab activity and integrate jQuery effects.

SUMMARY

REFERENCES

Lengstorf, J. and Wald, K (2016). “Pro PHP and JQUERY. 2nd edition. Spring Science and
Business Media: NewYork.

Online Learning Materials


api.juery.com
tutorialrepublic.com/jquery-tutorial

w3schools.com/jquery

PANGASINAN STATE UNIVERSITY 9

You might also like