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>