Scribd
Upload
38 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
Available Formats
Download as PDF, TXT or read online on Scribd
38 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
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