1. Addition, deletion and modification of DOM
Internal insertion
appendTo(content) a.appendTo(b); Add a to B to the end
prependTo(content) a.prependTo(b); Add a to B and add to the front
External insertion
insertAfter(content) a.insertAfter(b); Insert a after B
insertBefore(content) a.insertBefore(b); Insert a in front of B
replace
replaceWith(content|fn) a.replaceWith(b) replace a with B
replaceAll(selector) a.replaceAll(b) replace all B with a
delete
empty() a.empty() empties a and deletes all elements in a
remove([expr]) a.remove(b) all a's. If b's, a.remove() deletes a
appendTo(content) a.appendTo(b); Add a to B to the end
prependTo(content) a.prependTo(b); Add a to B and add to the front
External insertion
insertAfter(content) a.insertAfter(b); Insert a after B
insertBefore(content) a.insertBefore(b); Insert a in front of B
replace
replaceWith(content|fn) a.replaceWith(b) replace a with B
replaceAll(selector) a.replaceAll(b) replace all B with a
delete
empty() a.empty() empties a and deletes all elements in a
remove([expr]) a.remove(b) all a's. If b's, a.remove() deletes a
*/
$(function(){
$("#btn01").click(function(){
//Create a "Guangzhou" node and add it to #city [appendTo()]
//Child nodes Appendto (parent node)
$("<li>Guangzhou</li>").appendTo($("#city"));
});
$("#btn02").click(function(){
//Create a "Guangzhou" node and add it to #city [prependTo()]
$("<li>Guangzhou</li>").prependTo($("#city"));
});
$("#btn03").click(function(){
//Insert the "Guangzhou" node to #bj the front [insertBefore()]
//in front. InsertBefore
$("<li>Guangzhou</li>").insertBefore($("#bj"));
});
$("#btn04").click(function(){
//Insert the "Guangzhou" node into #bj the following [insertAfter()]
//back. Insertafter (front)
$("<li>Guangzhou</li>").insertAfter($("#bj"));
});
$("#btn05").click(function(){
//Replace #bj node with "Guangzhou" node [replaceWith()]
//Replaced replaceWith
$("#BJ "). Replacewith ($(" < li > Guangzhou < / Li > ");
});
$("#btn06").click(function(){
//Replace #bj node with "Guangzhou" node [replaceAll()]
//New node Replaceall (old node)
$("<li>Guangzhou</li>").replaceAll($("#bj"));
});
$("#btn07").click(function(){
//Delete #rl node [remove()]
//$("ul").remove("#rl");
//$("#rl").remove();
$("*").remove("#rl");
});
$("#btn08").click(function(){
//Empty #city node [empty()]
$("#city").empty();
});
$("#btn09").click(function(){
//Read HTML code in #city
alert($("#city").html()); / / read
alert($("#city").html(" ha ha "); / / modify
});
$("#btn10").click(function(){
//Set #bj the HTML code in the
alert($("#bj").html()); / / read
alert($("#bj").html(" ha ha "); / / modify
});
});
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>
Which city do you like?
</p>
<ul id="city">
<li id="bj">Beijing</li>
<li>Shanghai</li>
<li>Tokyo</li>
<li>Seoul</li>
</ul>
<br>
<br>
<p>
What kind of stand-alone game do you like?
</p>
<ul id="game">
<li id="rl">Red police</li>
<li>Actual situation</li>
<li>Best flying car</li>
<li>World of Warcraft</li>
</ul>
<br />
<br />
<p>
What is the operating system of your mobile phone?
</p>
<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
</div>
<div class="inner">
gender:
<input type="radio" name="gender" value="male"/>
Male
<input type="radio" name="gender" value="female"/>
Female
<br>
<br>
name:
<input type="text" name="name" id="username" value="abcde"/>
</div>
</div>
<div id="btnList">
<div><button id="btn01">Create a"Guangzhou"node,Add to#[appendto()] < / button > < / div > under city
<div><button id="btn02">Create a"Guangzhou"node,Add to#[prependto()] < / button > < / div > under city
<div><button id="btn03">take"Guangzhou"Insert node into#bj [insertbefore()] < / button > < / div >
<div><button id="btn04">take"Guangzhou"Insert node into#bj followed by [insertafter()] < / button > < / div >
<div><button id="btn05">use"Guangzhou"Node replacement#bj node [replacewith()] < / button > < / div >
<div><button id="btn06">use"Guangzhou"Node replacement#bj node [replaceall()] < / button > < / div >
<div><button id="btn07">delete#rl node [remove()] < / button > < / div >
<div><button id="btn08">use up#city node [empty()] < / button > < / div >
<div><button id="btn09">read#HTML code in city < / button > < / div >
<div><button id="btn10">set up#HTML code in bj < / button > < / div >
</div>
</body>
</html>
case:Move from left to right,Move 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">
$(function () {
//1. Select move to the right
$("button:eq(0)").click(function () {
$("select[name='sel01'] option:selected").appendTo($("select[name='sel02']"));
})
//2. Select move to the left
$("button:eq(2)").click(function () {
$("select[name='sel02'] option:selected").appendTo($("select[name='sel01']"));
})
//3. Move all to the right
$("button:eq(1)").click(function () {
$("select[name='sel01'] option").appendTo($("select[name='sel02']"));
})
//4. Move all to the left
$("button:eq(3)").click(function () {
$("select[name='sel02'] option").appendTo($("select[name='sel01']"));
})
})
</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>Check add to right</button>
<button>Add all to the right</button>
</div>
<div id="rigth">
<select multiple="multiple" name="sel02">
</select>
<button>Select Delete to the left</button>
<button>Delete all to the left</button>
</div>
</body>
</html>
2.CSS style operation
addClass() add style
removeClass() deletes the style
toggleClass() will be deleted if it exists and added if it does not exist
offset() gets and sets the coordinates of the element
<!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">
div{
width:100px;
height:260px;
}
div.whiteborder{
border: 2px white solid;
}
div.redDiv{
background-color: red;
}
div.blueBorder{
border: 5px blue solid;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
var $divEle = $('div:first');
$('#btn01').click(function(){
//addClass() - add one or more classes to the selected element
$divEle.addClass("redDiv")
});
$('#btn02').click(function(){
//removeClass() - Deletes one or more classes from the selected element
$divEle.removeClass("redDiv");
});
$('#btn03').click(function(){
//toggleClass() - switch between adding / deleting classes for the selected element
$divEle.toggleClass("redDiv");
});
$('#btn04').click(function(){
//offset() - returns the position of the first matching element relative to the document.
console.log($divEle.offset());
});
})
</script>
</head>
<body>
<table align="center">
<tr>
<td>
<div class="border">
</div>
</td>
<td>
<div class="btn">
<input type="button" value="addClass()" id="btn01"/>
<input type="button" value="removeClass()" id="btn02"/>
<input type="button" value="toggleClass()" id="btn03"/>
<input type="button" value="offset()" id="btn04"/>
</div>
</td>
</tr>
</table>
<br /> <br />
<br /> <br />
</body>
</html>
3.JQuery animation
Basic animation
show() displays the hidden elements
hide() hides visible elements.
toggle() hides when visible and displays when invisible
The above animation methods can add parameters.
1. The first parameter is the duration of animation execution, in milliseconds
2. The second parameter is the callback function of the animation (the function automatically called after the animation is completed)
Fade in and fade out animation
fadeIn() fade in (slowly visible)
fadeOut() fades out (slowly disappears)
fadeTo() slowly changes the transparency to the specified value within the specified time. 0 transparent, 1 visible, 0.5 translucent
fadeToggle() fade in / fade out switch
Exercise 06. CSS_ Animation brand display
Requirements:
1. Hide and display the brand after Casio when clicking the button.
2. When all contents are displayed, the button text is "display compact brand", and then the small triangle is upward. All brand products are the default color.
3. When only simplified brands are displayed, hide the brands after Casio, the button text is "show all brands", and then the small three shapes are downward. And change the brand color of Canon and Nikon to red (add promoted style to li label)
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;
}
The order in which they trigger?
1. After the jQuery page is loaded, execute it first
2. After the page of native js is loaded
How many times do they perform?
1. After the page of native js is loaded, only the last assignment function will be executed.
2. After the jQuery page is loaded, all the registered function functions are executed in sequence.
javaScript event object
Event object is a javascript object that encapsulates the triggered event information.
We focus on how to get the event object of javascript. And use.
How to get javascript event objects?
When binding an event to an element, add a parameter to the function (event) parameter list of the event. We are used to calling this parameter event. This event is the event object that javascript passes the parameter event handler.
//1. Get the event object with native javascript
window.onload = function () {
document.getElementById("areaDiv").onclick = function (event) {
console.log(event);
}
}
//2. Get the event object with jQuery code
$(function () {
$("#areaDiv").click(function (event) {
console.log(event);
});
});
//3. Use bind to 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 in");
} else if (event.type == "mouseout") {
console.log(" Mouse out");
}
});
Exercise: picture following
$(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();
}
});
});