JavaWeb Classic_04_jQuery

JavaWeb Classic_04_jQuery

Today’s tasks

1. jQuery
The attribute operation

2. jQuery
practise

3. jQuery CSS
style manipulation

4. jQuery
animation operation

5. jQuery
event action

Class Notes

Today’s lesson content:

Attribute manipulation of

1, jQuery

jQuery
Attribute manipulation

html()

It can set and get the content in the opening and closing tags.

and
dom
Attributes
innerHTML
Same.

text()

It can set and get the text in the opening and closing tags.

and
dom
Attributes
innerText
Same.

val()

It can set and get
form item
of
value
attribute value.

and
dom
Attributes
value
Same

val
Method to set the selected state of multiple form items at the same time:

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>Title</title><script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
/*
// Batch operation radio
$(":radio").val(["radio2"]);
// The selected state of the batch operation filter box
$(":checkbox").val(["checkbox3","checkbox2"]);
// The selected state of the drop-down box for batch operation multiple selection
$("#multiple").val(["mul2","mul3","mul4"]);
// Operate the selected state of the drop-down box of the radio
$("#single").val(["sin2"]);
*/
$("#multiple,#single,:radio,:checkbox").val(["radio2","checkbox1","checkbox3","mul1","mul4\ ","sin3"]
);
});
</script>
</head>
<body>
<body>
Single choice:
<input name="radio" type="radio" value="radio1" />radio1
<input name="radio" type="radio" value="radio2" />radio2
<br/>
Multiple choice:
<input name="checkbox" type="checkbox" value="checkbox1" />checkbox1
<input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
<input name="checkbox" type="checkbox" value="checkbox3" />checkbox3
<br/>
Pull down multiple choice:
<select id="multiple" multiple="multiple" size="4">
<option value="mul1">mul1</option>
<option value="mul2">mul2</option>
<option value="mul3">mul3</option>
<option value="mul4">mul4</option>
</select>
<br/>
Drop-down radio:
<select id="single">
<option value="sin1">sin1</option>
<option value="sin2">sin2</option>
<option value="sin3">sin3</option>
</select>
</body></body>
</html>

attr()

Can set and get the value of the property, not recommended
checked
,
readOnly
,
selected
,
disabled
etc

attr
Methods can also operate on non-standard properties. For example custom properties:
abc,bbj

prop()

Can set and get the value of the property
,
only recommended
checked
,
readOnly
,
selected
,
disabled
etc

2, jQuery Exercise

2.
Select all, unselect all, inverse

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
// bind click event to select all
$("#checkedAllBtn"). click(function () {
$(":checkbox").prop("checked",true);
});
// Bind click event to unselect all
$("#checkedNoBtn"). click(function () {
$(":checkbox").prop("checked",false);
});
// Invert the click event
$("#checkedRevBtn").click(function () {// Query all ball check boxes
$(":checkbox[name='items']").each(function () {
// In the function function traversed by each, there is a this object. This this object is the dom object currently being traversed
this.checked = !this.checked;
});
// To check if the selection is full
// Get the number of all balls
var allCount = $(":checkbox[name='items']").length;
// get the number of selected balls
var checkedCount = $(":checkbox[name='items']:checked").length;
// if (allCount == checkedCount) {
//
$("#checkedAllBox").prop("checked",true);
// } else {
//
$("#checkedAllBox").prop("checked",false);
// }
$("#checkedAllBox").prop("checked",allCount == checkedCount);
});
// [Submit] button click event
$("#sendBtn"). click(function () {
// Get the check box of the selected ball
$(":checkbox[name='items']:checked").each(function () {
alert(this. value);
});
});
// Bind the click event to 【Select All/Unselect All】
$("#checkedAllBox"). click(function () {
// In the function function of the event, there is a this object, which is the dom object currently responding to the event
// alert(this. checked);
$(":checkbox[name='items']").prop("checked",this.checked);
});
// Bind click events to all balls
$(":checkbox[name='items']").click(function () {
// To check if the selection is full
// Get the number of all balls
var allCount = $(":checkbox[name='items']").length;
// get the number of selected balls
var checkedCount = $(":checkbox[name='items']:checked").length;
$("#checkedAllBox").prop("checked",allCount == checkedCount);
});});
</script>
</head>
<body>
<form method="post" action="">
What is your favorite sport? <input type="checkbox" id="checkedAllBox" />Select all/Not select all
<br />
<input type="checkbox" name="items" value="football" />football
<input type="checkbox" name="items" value="basketball" />basketball
<input type="checkbox" name="items" value="Badminton" />Badminton
<input type="checkbox" name="items" value="Table Tennis" />Table Tennis
<br />
<input type="button" id="checkedAllBtn" value="check all" />
<input type="button" id="checkedNoBtn" value="check none" />
<input type="button" id="checkedRevBtn" value="checkedRevBtn" />
<input type="button" id="sendBtn" value="Submit" />
</form>
</body>
</html>

4, DOM additions and deletions

Insert:

appendTo()

a.appendTo(b)

Bundle
a
insert into
b
end of child element, becomes the last child element

prependTo()

a.prependTo(b)

Bundle
a
plug into
b
Before all child elements, become the first child element

External insert:

insertAfter()

a. insertAfter(b)

get
the b

insertBefore()

a. insertBefore(b)

get
ab

Replace
:

replaceWith()

a. replaceWith(b)

use
b
replace
a

replaceAll()

a. replaceAll(b)

use
a
replace all
b

Delete:

remove()

a. remove();

delete
a
Label

empty()

a.empty();

empty
a
content in tab

5, jQuery Exercise 2

2.
Practice left to right, right to left

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
select {
width: 100px;
height: 140px;
}
div {
width: 130px;
float: left;
text-align: center;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
// page loaded
$(function () {// The first button [select and add to the right]
$("button:eq(0)"). click(function () {
$("select:eq(0) option:selected").appendTo($("select:eq(1)"));
});
// The second button [add all to the right]
$("button:eq(1)"). click(function () {
$("select:eq(0) option").appendTo($("select:eq(1)"));
});
// The third button [select and delete to the left]
$("button:eq(2)"). click(function () {
$("select:eq(1) option:selected").appendTo($("select:eq(0)"));
});
// The fourth button [delete all to the left]
$("button:eq(3)"). click(function () {
$("select:eq(1) option").appendTo($("select:eq(0)"));
});
});
</script>
</head>
<body>
<div id="left">
<select multiple="multiple" name="sel01">
<option value="opt01">Option 1</option>
<option value="opt02">Option 2</option>
<option value="opt03">Option 3</option>
<option value="opt04">Option 4</option>
<option value="opt05">Option 5</option>
<option value="opt06">Option 6</option>
<option value="opt07">Option 7</option>
<option value="opt08">Option 8</option>
</select>
<button>Select to add to the right</button>
<button>Add all to the right</button>
</div>
<div id="rigth">
<select multiple="multiple" name="sel02">
</select>
<button>Select to delete to the left</button>
<button>Delete all to the left</button>
</div>
</body>
</html>

3.
Add and delete table records dynamically

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="styleB/css.css" />
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
// Create a delete function for reuse
var deleteFun = function(){
// alert("Delete the function of the operation : " + this);
// In the function function of the event response, there is a this object. This this object is the dom object currently responding to events.
var $trObj = $(this).parent().parent();
var name = $trObj.find("td:first").text();
/**
* confirm is a confirmation prompt box function provided by JavaScript language. What you pass to it, it will prompt you<br/>
* Returns true when the user clicks OK. When the user clicks cancel, return false
*/
if(confirm("Are you sure you want to delete [" + name + "]?") ){
$trObj. remove();
}
// return false; prevents the default behavior of the element.
return false;
};
// Bind the click event to the [Submit] button
$("#addEmpButton"). click(function () {
// Get the content of the input box, name, email, salary
var name = $("#empName").val();
var email = $("#email").val();
var salary = $("#salary").val();
// Create a row label object and add it to the table displaying data
var $trObj = $("<tr>" + "<td>" + name + "</td>" +
"<td>" + email + "</td>" +
"<td>" + salary + "</td>" +
"<td><a href="deleteEmp?id=002">Delete</a></td>" +
"</tr>");
// Add to the table that displays the data
$trObj.appendTo( $("#employeeTable") );
// Bind an event to the a tag of the added row
$trObj.find("a").click( deleteFun );
});
// Bind the click event to the deleted a tag
$("a"). click( deleteFun );
});
</script>
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>[email protected]</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>[email protected]</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Bob</td><td>[email protected]</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</table>
<div id="formDiv">
<h4>Add new employee</h4>
<table>
<tr>
<td class="word">name: </td>
<td class="inp">
<input type="text" name="empName" id="empName" />
</td>
</tr>
<tr>
<td class="word">email: </td>
<td class="inp">
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td class="word">salary: </td>
<td class="inp">
<input type="text" name="salary" id="salary" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton" value="abc">
Submit
</button>
</td>
</tr>
</table>
</div>
</body>
</html>

6, CSS style manipulation.

addClass()

add style

removeClass()

delete style

toggleClass()

If there is, delete it, if not, add a style.

offset()

Get and set the coordinates of an element.

7, jQuery animation

Basic animation

show()

show hidden elements

hide()

Hide visible elements.

toggle()

Hide when visible, show when invisible.

The above animation methods can add parameters.

1
, the first parameter is the duration of the animation execution, in milliseconds

2
, the second parameter is the animation callback function
(
Function to be called automatically after the animation completes
)

Fade animation

fadeIn()

fade in (slowly visible)

fadeOut()

fade out (disappear slowly)

fadeTo()

Slowly modify the transparency to the specified value over the specified duration.
0
transparent,
1
finish visible,
0.5
translucent

fadeToggle()

fade in
/
fade out toggle

Exercise
06
,
CSS_
Animated branding

Requirements:

1.
When the button is clicked, hide and show the brand after Casio.

2.
When the full content is shown, the button text is “Show Lite Branding”

Then, the little triangle goes up. All branded products are default colors.

3.
When only the simplified brand is displayed, the brand after Casio should be hidden, and the button text is “Show all brands”

Then the small triangle goes down. And change the brand color of Canon and Nikon to red (for
li
label added
promoted
style)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Brand Display Exercise</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-size: 12px;
text-align: center;
}
a {
color: #04D;
text-decoration: none;
}
a:hover {
color: #F50;
text-decoration: underline;
}
.SubCategoryBox {
width: 600px;
margin: 0 auto;
text-align: center;
margin-top: 40px;
}
.SubCategoryBox ul {
list-style: none;
}
.SubCategoryBox ul li {
display: block;
float: left;
width: 200px;
line-height: 20px;
}
.showmore , .showless{
clear: both;
text-align: center;
padding-top: 10px;
}
.showmore a , .showless a{
display: block;
width: 120px; margin: 0 auto;
line-height: 24px;
border: 1px solid #AAA;
}
.showmore a span {
padding-left: 15px;
background: url(img/down.gif) no-repeat 0 0;
}
.showless a span {
padding-left: 15px;
background: url(img/up.gif) no-repeat 0 0;
}
.promoted a {
color: #F50;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function() {
// basic initial state
$("li:gt(5):not(:last)").hide();
// Bind the click event to the button of the function
$("div div a"). click(function () {
// Make certain brands, show, or hide
$("li:gt(5):not(:last)").toggle();
// Determine whether the brand is currently visible
if( $("li:gt(5):not(:last)").is(":hidden") ){
// Status of brand hiding: 1 shows all brands
== Subscript down showmore
$("div div a span").text("Show all brands");
$("div div"). removeClass();
$("div div").addClass("showmore");
// remove highlight
$("li:contains('Sony')").removeClass("promoted");
} else {
// Status of brand visible: 2 shows condensed brand
== Subscript up showless
$("div div a span").text("Show compact brand");
$("div div"). removeClass();
$("div div").addClass("showless");
// highlight
$("li:contains('Sony')").addClass("promoted");}
return false;
});
});
</script>
</head>
<body>
<div class="SubCategoryBox">
<ul>
<li><a href="#">Canon</a><i>(30440)</i></li>
<li><a href="#">Sony</a><i>(27220)</i></li>
<li><a href="#">Samsung</a><i>(20808)</i></li>
<li><a href="#">Nikon</a><i>(17821)</i></li>
<li><a href="#">Panasonic</a><i>(12289)</i></li>
<li><a href="#">Casio</a><i>(8242)</i></li>
<li><a href="#">Fuji</a><i>(14894)</i></li>
<li><a href="#">Kodak</a><i>(9520)</i></li>
<li><a href="#">Pentax</a><i>(2195)</i></li>
<li><a href="#">Ricoh</a><i>(4114)</i></li>
<li><a href="#">Olympus</a><i>(12205)</i></li>
<li><a href="#">BenQ</a><i>(1466)</i></li>
<li><a href="#">Patriot</a><i>(3091)</i></li>
<li><a href="#">Other brands of camera</a><i>(7275)</i></li>
</ul>
<div class="showmore">
<a href="more.html"><span>Show all brands</span></a>
</div>
</div>
</body>
</html>

8, jQuery Event Actions

$( function(){} );

and

window.onload = function(){}

The difference?

When are they triggered?

1
,
jQuery
After the page is loaded, the browser’s kernel parses the page’s tags and creates them.
DOM
The object will be executed immediately afterwards.

2
,Native
js
After the page is loaded, in addition to waiting for the browser kernel to parse the tags and create them
DOM
object, and wait for the content required to display the label to complete loading.

The order in which they fire?

1
,
jQuery
Executed first after the page has loaded

2
,Native
js
After the page loads for

How many times did they execute?

1
,Native
js
After the page is loaded, only the last assignment function will be executed.

2
,
jQuery
After the page is loaded, all the registered
function
Functions are executed in sequence.

jQuery
Other event handling methods in :

click()

It can bind the click event, and trigger the click event

mouseover()

mouseover event

mouseout()

mouse out event

bind()

One or more events can be bound to an element at once.

one()

Use the upper heel
bind
Same. but
one
The event bound to the method will only be responded to once.

unbind()

and
bind
The opposite operation of the method, unbinding the event

live()

It is also used to bind events. It can be used to bind events for all elements matched by the selector. It is valid even if this element is dynamically created later

Event bubbling

What is event bubbling?

Event bubbling means that parent and child elements listen to the same event at the same time. When the event of the child element is triggered, the same event is also passed to the event of the parent element to respond.

So how to stop the event from bubbling?

In the child element event function body,
return false;
Bubbling of events can be prevented.

javaScript
Event object

An event object, which encapsulates the triggered event information
javascript
object.

What we care about is how to get this
javascript
event object. as well as use.

how to get it
javascript
What about event objects?

When binding an event to an element, in the event
function( event )
Add a parameter to the parameter list, this parameter name, we are used to name it
event
.

this event
that is
javascript
Pass the event object to the event handler function.

for example:
//1.
Native
javascript
Get the event object

window
.
onload
=
function
() {

document
.
getElementById
(
“areaDiv”
).
onclick
=
function
(event) {

console
.
log
(event);

}

}

//2.jQuery
Code to get the event object

$
(
function
() {

$
(
“#areaDiv”
).
click
(
function
(event) {

console
.
log
(event);

});

});

//3.
use
bind
Bind the same function to multiple events at the same time. How to get what event the current operation is.

$
(
“#areaDiv”
).
bind
(
“mouseover mouseout”
,
function
(event) {

if
(event.
type
==
“mouseover”
) {

console
.
log
(

Mouse over

);

}
else if
(event.
type
==
“mouseout”
) {

console
.
log
(

Mouse out

);

}

});

☆Exercise
07
Event Image Follow

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
text-align: center;
}
#small {
margin-top: 150px;
}#showBig{
position: absolute;
display: none;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$("#small").bind("mouseover mouseout mousemove", function (event) {
if (event.type == "mouseover") {
$("#showBig").show();
} else if (event.type == "mousemove") {
console. log(event);
$("#showBig").offset({
left: event.pageX + 10,
top: event.pageY + 10
});
} else if (event.type == "mouseout") {
$("#showBig").hide();
}
});
});
</script>
</head>
<body>
<img id="small" src="img/small.jpg" />
<div id="showBig">
<img src="img/big.jpg">
</div>
</body>
</html>