Scribd
Upload
40 views

Web Application Development: Jquery

The document provides an overview of web application development using jQuery. It covers key concepts like jQuery syntax, events, effects, DOM manipulation, and AJAX. Specifically, it discusses: - jQuery syntax which allows selecting HTML elements and performing actions on them. - Common jQuery events like click, change, and load that trigger functions. - Effects and animations that can be applied to HTML elements using jQuery. - Methods for manipulating the DOM by accessing and updating element content and attributes. - Using jQuery's AJAX capabilities to asynchronously load and update content on web pages.

Uploaded by

Nguyễn Phương Thảo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
40 views

Web Application Development: Jquery

The document provides an overview of web application development using jQuery. It covers key concepts like jQuery syntax, events, effects, DOM manipulation, and AJAX. Specifically, it discusses: - jQuery syntax which allows selecting HTML elements and performing actions on them. - Common jQuery events like click, change, and load that trigger functions. - Effects and animations that can be applied to HTML elements using jQuery. - Methods for manipulating the DOM by accessing and updating element content and attributes. - Using jQuery's AJAX capabilities to asynchronously load and update content on web pages.

Uploaded by

Nguyễn Phương Thảo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 41

Web Application Development

jQuery
Outline
• Concepts of jQuery
• jQuery syntax
• jQuery events
• jQuery effects
• jQuery DOM manipulation
• jQuery AJAX

2
Introduction
• jQuery is a lightweight JavaScript library

• jQuery wraps many complicated JavaScript


codes into simple ones

• jQuery simplifies the use of JavaScript to


develop the websites

3
Introduction
The main uses of jQuery on the websites
include:
– HTML/DOM manipulation
– CSS manipulation
– HTML event methods
– Effects and animations
– AJAX methods

4
Installing jQuery
• jQuery can be added to the webpages using off-
line method or on-line method

• In off-line method, jQuery source file is


downloaded from jQuery.com and added into the
HTML <script> tag

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

5
Installing jQuery
• In on-line method, jQuery is included from a
Content Delivery Network (CDN). Both Google and
Microsoft host jQuery
• Include jQuery from Google CDN:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/
1.12.4/jquery.min.js"></script>
</head>
• Include jQuery from Microsoft CDN:
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/
jquery-1.12.4.min.js"></script>
</head>

6
jQuery Syntax
• jQuery syntax allows to select HTML
elements and perform actions on these
elements
• Basic syntax is:
$(selector).action()
• $ sign allows to define/access jQuery. It
is a shortcut for jQuery
• selector allows to find/query HTML
elements
• action() allows to perform some actions
on these HTML elements
7
Examples of jQuery Syntax

• $(this).hide(): hides the current element


• $(“p”).hide(): hides all <p> elements
• $(“.intro”).hide(): hides all elements with
class="intro"
• $(“#intro”).hide(): hides the element with
id="intro"

8
jQuery Selectors

• jQuery selectors allow to select and manipulate


HTML elements
• Selectors can be id, classes, types, attributes,
values of attributes, etc.
• Most jQuery selectors are based on existing CSS
selectors
• Selector syntax: the dollar sign with
parentheses: $()

9
Element Selector
In jQuery, element selector selects elements
based on element name
$(document).ready(function(){

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

$("p").hide();

});

});
<html>
…
<p>Hello</p>
<button>Click me</button>
…
</html>

10
ID Selector
In jQuery, id selector selects elements based
on id attribute
$(document).ready(function(){

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

$("#p1").hide();

});

}); <html>
…
<p>jQuery Introduction</p>
<p id=“p1”>Hello</p>
<button>Click me</button>
…
</html>

11
Class Selector
In jQuery, class selector selects elements
based on class name
$(document).ready(function(){

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

$(".intro").hide();

});

}); <html>
…
<p class=“intro”>jQuery Introduction</p>
<p class=“intro”>Hello</p>
<button>Click me</button>
…
</html>

12
Popular jQuery Selectors
Syntax Description

$("*") Selects all elements

$(this) Selects the current HTML element

$("p.intro") Selects all <p> elements with class="intro"

$("p:first") Selects the first <p> element

$("ul li:first") Selects the first <li> element of the first <ul>

$("ul li:first-child") Selects the first <li> element of every <ul>

$("[href]") Selects all elements with an href attribute

13
Popular jQuery Selectors
Syntax Description

$ Selects all <a> elements with a target attribute


("a[target='_blank']") value equal to "_blank"

$("a[target! Selects all <a> elements with a target attribute


='_blank']") value NOT equal to "_blank"

Selects all <button> elements and <input> elements


$(":button")
of type="button"

$("tr:even") Selects all even <tr> elements

$("tr:odd") Selects all odd <tr> elements

14
jQuery Events

• jQuery events allow to perform HTML


events

• Most DOM events have an equivalent


jQuery method

• Event syntax:
$(“selector”).jQueryEventMethod()

15
Example of jQuery Events
$(document).ready(function(){

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

alert("Hello ICT5 Bachelor Class!");
});

});
<html>
…
<p class=“intro”>jQuery Introduction</p>
<p class=“intro”>Hello</p>
<button>Click me</button>
…
</html>

16
Popular Events

Document/
Mouse Events Keyboard Events Form Events
Window Events

click keypress submit load

dblclick keydown change resize

mouseenter keyup focus scroll


mouseleave   blur unload

17
jQuery Effects

• jQuery provides a lot of effects for website


function and design
• Examples of jQuery effects are hide/show
HTML elements, fade elements in/out of
visibility, slide elements up/down, or create
custom animations, etc.

18
Example of jQuery Effects
$(document).ready(function(){

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

$("div").animate({
left: '100px'
});
});

});
<html>
…
<button>Start Animation</button>
<div style=“background:green;height:100px;width:
100px;position:absolute;"></div>
…
</html>
19
Example of jQuery Effects
$(document).ready(function(){

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

$("div").animate({
left: '100px'
});
});

});
Before calling animate() After calling animate()

20
jQuery DOM Manipulation

• Manipulating DOM is an important capability


of jQuery

• jQuery supports a bunch of DOM related


methods for accessing and manipulating HTML
elements and attributes

21
Basic DOM Manipulation Functions
• Functions to get web content:
- text(): gets the text content of selected
elements
- html(): gets the content with HTML tag of
selected elements
- val(): gets the value of form fields
- attr(“attribute_name”): gets attribute
values of selected elements

22
Basic DOM Manipulation Functions
• Functions to get web content:
$(document).ready(function(){
$("button").click(function(){
alert("Value: " + $("#p1").text());
});
});

<html>
…
<p>jQuery Introduction</p>
<p id=“p1”>Hello</p>
<button>Click me</button>
…
</html>

23
Basic DOM Manipulation Functions
• Functions to set web content:
- text(“set_value”): sets the text content of
selected elements
- html(“set_value”): sets the content with
HTML tag of selected elements
- val(“set_value”): sets the value of form
fields
- attr(“attribute_name”,“set_value”): sets
attribute values of selected elements

24
Basic DOM manipulation functions
• Functions to set web content:
$(document).ready(function(){
$("button").click(function(){
$(“#p1”).text(“Hello Web Class");
});
});

<html>
…
<p>jQuery Introduction</p>
<p id=“p1”></p>
<button>Click me</button>
…
</html>

25
jQuery AJAX

• jQuery AJAX is an important capability of jQuery


which allows to simplify the communication
between web client and web server

26
What is AJAX?
• AJAX = Asynchronous JavaScript and XML
• AJAX is a technique for creating fast and dynamic
web pages
• AJAX allows web pages to be updated
asynchronously by exchanging small amounts of
data with the server behind the scenes This means
that it is possible to update parts of a web page,
without reloading the whole page
• Examples of applications using AJAX: Google Maps,
Gmail, Youtube, and Facebook

27
What is AJAX?

28
jQuery AJAX
• jQuery AJAX methods allow to request text,
HTML, XML, or JSON data from a remote
server using both HTTP Get and HTTP Post
requests
• External data can also be loaded directly
into the selected HTML elements of the web
page

29
jQuery load() Method

• The load() method loads data from a server and


puts the returned data into the selected element
• Syntax:
$(selector).load(URL,data,callback);
• “URL” parameter specifies the source to load
data
• “data” parameter specifies query value to send
along with the request
• “callback” parameter is a function to be
executed after the load() method is completed

30
jQuery load() method
Having a “data.txt” file with the following
contents:

<h2>Welcome to the class about jQuery!


</h2>
<p id="p1">jQuery is a very powerful
JavaScript library.
</p>

31
jQuery load() method
Use load() method to load data from
“data.txt” file:
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("data.txt");
});
});

<html>
…
<div id=“div1"></div>
<button>Load data file</button>
…
</html>
32
jQuery load() method
• Use load() method to load data from
“data.txt” file:
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("data.txt");
});
});

• Loaded Results:
Welcome to the class about jQuery!
jQuery is a very powerful JavaScript library

33
jQuery GET and POST methods
• Two commonly used methods for a request-
response between a client and server are:
GET and POST.
- GET - Requests data from a specified resource
- POST - Submits data to be processed to a
specified resource
• Syntax:
- $.get(URL,callback);
- $.post(URL,data,callback);

34
jQuery $.get() method
Having an Active Server Page (get_test.asp)
file as follows:

<%
response.write("Welcome to the class
about get and post methods using jQuery")
%>

35
jQuery $.get() method
• Use $.get() method to retrieve data from
“get_test.asp” file on the server:
$(document).ready(function(){
$("button").click(function(){
$.get(“get_test.asp”, function(data, status){
alert("Data: " + data + "\nStatus: " + status);
}); });
});

<html>
…
<button>Get content of asp file</button>
…
</html>

36
jQuery $.get() method
• Use $.get() method to retrieve data from
“get_test.asp” file on the server:
$(document).ready(function(){
$("button").click(function(){
$.get(“get_test.asp”, function(data, status){
alert("Data: " + data + "\nStatus: " + status);
}); });
});

• Response Results:
Data: Welcome to the class about get and post methods
using jQuery
Status: success

37
jQuery $.post() method
Having an Active Server Page (post_test.asp)
file as follows:

<%
dim name
name=Request.Form("name")
Response.Write("Hello " & name)
%>

38
jQuery $.post() method
Use $.post() method to send some data a
long with the request to server:
$(document).ready(function(){
$("button").click(function(){
$.post(“post_test.asp",
{
name: “John Smitt"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
}); });
});

<body>
<button>Post content of asp file</button>
</body>
39
jQuery $.post() method
• Use $.post() method to send some data a
long with the request to server:
$(document).ready(function(){
$("button").click(function(){
$.post(“post_test.asp",
{
name: “John Smitt"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
}); });
});
• Response Results:
Data: Hello John Smitt
Status: success
40
41

You might also like