• 首页
  • Technical point 4: jquery

Technical point 4: jquery

Guo Shao 2020-11-09 17:44:29
technical point jquery

jQuery

One 、jQuery Introduce

1. What is? jQuery？

jQuery, seeing the name of a thing one thinks of its function , That is to say JavaScript And query （Query）, It's just auxiliary JavaScript Developed js Class library .

2.jQuery The core idea

Its core idea is write less,do more( Write less , To do more ), So it implements a lot of browser compatibility issues .

3.jQuery The popularity of

jQuery Now it has become the most popular JavaScript library , Before the world 10000 Of the most visited sites , There are more than 55% In the use of jQuery.

4.jQuery The benefits of

① Open source 、 free ;

② The grammar design is simple , Can make development more convenient ;

Two 、jQuery First experience

demand ： Use jQuery Bind a button to a click event ?

Code example ：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Click events </title>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
alert("jQuery Click event for ");
});
});
</script>
</head>
<body>
<button id="btn"> Button </button>
</body>
</html>

The effect is as follows ：

 

 

3、 ... and 、jQuery Core function

$ yes jQuery Core function of , Can finish jQuery Many functions of .$() It's called $ This function .
1、 The incoming parameter is [ function ] when ：
Indicates after the page is loaded . amount to window.onload = function(){} 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Click events </title>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () { // Equivalent to window.onload = function(){}

});
</script>
</head>
<body>
</body>
</html>
2、 The incoming parameter is [ HTML character string ] when ：
Will create this for us html Label object . 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Click events </title>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
var $div = $("<div> I am a div</div>");
$div.appendTo("body");
});
</script>
</head>
<body>
</body>
</html>

The effect is as follows ：

 

 

3、 The incoming parameter is [ Selector string ] when ：
$(“#id Property value ”);id Selectors , according to id Query tag object
$(“ Tag name ”); Tag name selector , Query the tag object according to the specified tag name
$(“.class Property value ”); Type selector , According to class Property query tag object 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Click events </title>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
// Select the tag according to the tag name 
 alert($("div"));
// according to id Check the tab 
 $("#btn01").click(function () {
alert("jQuery Of id Selectors ");
});
// according to class Check the tab 
 $(".cla01").click(function () {
alert("jQuery Of class Selectors ");
});
});
</script>
</head>
<body>
<div> I am a div</div>
<button id="btn01"> Button 1</button>
<button class="cla01"> Button 2</button>
</body>
</html>
 
4、 The incoming parameter is [ DOM object ] when ：
Will take this. dom Object to jQuery object . 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Click events </title>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
var btnObj = document.getElementById("btn01");
alert(btnObj);
alert($(btnObj));
});
</script>
</head>
<body>
<div> I am a div</div>
<button id="btn01"> Button 1</button>
<button class="cla01"> Button 2</button>
</body>
</html>

The effect is as follows ：

 

 

 

 

Four 、jQuery Objects and dom Object distinction

1、 What is? jQuery object , What is? dom object

 

 

 

 

2、 problem ：jQuery What is the nature of the object ？

jQuery The object is dom An array of objects + jQuery Provides a series of function functions . 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Click events </title>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
var $btn = $("button");
console.log($btn);
for (var i = 0; i < $btn.length; i++) {
console.log($btn[i]);
}
});
</script>
</head>
<body>
<button> Button 1</button>
<button> Button 2</button>
<button> Button 3</button>
</body>
</html>

The effect is as follows ：

 

 

3、jQuery Objects and Dom Object usage differences

jQuery Object cannot be used DOM Properties and methods of objects
DOM Objects can't use jQuery Properties and methods of objects

4、Dom Objects and jQuery Object rotation

dom Object to jQuery object （* a key ）

① To have a first DOM object

②$( DOM object ) It can be transformed into jQuery object

jQuery Object to dom object （* a key ）

① To have a first jQuery object

②jQuery object [ Subscript ] Take out the corresponding DOM object

5、 ... and 、jQuery Selectors （***** a key ）

1、 Basic selector （**** a key ）

 

  Add ：

p.myclass： The tag name must be p, and class The value of the property is myclass.

<!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>
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
//1. choice id by one The elements of "background-color","#bbffaa"
 $("#btn1").click(function () {
$("#one").css("background-color","#bbffaa");
});
//2. choice class by mini All elements of 
 $("#btn2").click(function () {
$(".mini").css("background-color","#bbffaa");
});
//3. choice The element name is div All elements of 
 $("#btn3").click(function () {
$("div").css("background-color","#bbffaa");
});
//4. Select all elements 
 $("#btn4").click(function () {
$("*").css("background-color","#bbffaa");
});
//5. Choose all span Elements and id by two The elements of 
 $("#btn5").click(function () {
$("span,#two").css("background-color","#bbffaa");
});
});
</script>
</head>
<body>
<!-- <div>
<h1> Basic selector </h1>
</div> -->
<input type="button" value=" choice id by one The elements of " id="btn1" />
<input type="button" value=" choice class by mini All elements of " id="btn2" />
<input type="button" value=" choice The element name is div All elements of " id="btn3" />
<input type="button" value=" choice All the elements " id="btn4" />
<input type="button" value=" choice be-all span Elements and id by two The elements of " id="btn5" />
<br>
<div class="one" id="one">
id by one,class by one Of div
<div class="mini">class by mini</div>
</div>
<div class="one" id="two" title="test">
id by two,class by one,title by test Of div
<div class="mini" title="other">class by mini,title by other</div>
<div class="mini" title="test">class by mini,title by test</div>
</div>
<div class="one">
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini" title="tesst">class by mini,title by tesst</div>
</div>
<div style="display:none;" class="none">style Of display by "none" Of div</div>
<div class="hide">class by "hide" Of div</div>
<div>
contain input Of type by "hidden" Of div<input type="hidden" size="8">
</div>
<span class="one" id="span">^^span Elements ^^</span>
</body>
</html>

2、 Hierarchy selector （**** a key ）

 

 

Code example ：

<!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>
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//1. choice body In all of the div Elements 
 $("#btn1").click(function(){
$("body div").css("background", "#bbffaa");
});
//2. stay body Inside , choice div Subelement 
 $("#btn2").click(function(){
$("body>div").css("background", "#bbffaa");
});
//3. choice id by one Next div Elements 
 $("#btn3").click(function(){
$("#one + div").css("background", "#bbffaa");
});
//4. choice id by two All of the following elements of div Brother element 
 $("#btn4").click(function(){
$("#two ~ div").css("background", "#bbffaa");
});
});
</script>
</head>
<body>
<!-- <div>
<h1> Hierarchy selector : Select elements according to their hierarchical relationships </h1>
ancestor descendant ：
parent > child ：
prev + next ：
prev ~ siblings ：
</div> -->
<input type="button" value=" choice body In all of the div Elements " id="btn1" />
<input type="button" value=" stay body Inside , choice div Subelement " id="btn2" />
<input type="button" value=" choice id by one Next div Elements " id="btn3" />
<input type="button" value=" choice id by two All of the following elements of div Brother element " id="btn4" />
<br><br>
<div class="one" id="one">
id by one,class by one Of div
<div class="mini">class by mini</div>
</div>
<div class="one" id="two" title="test">
id by two,class by one,title by test Of div
<div class="mini" title="other">class by mini,title by other</div>
<div class="mini" title="test">class by mini,title by test</div>
</div>
<div class="one">
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini" title="tesst">class by mini,title by tesst</div>
</div>
<div style="display:none;" class="none">style Of display by "none" Of div</div>
<div class="hide">class by "hide" Of div</div>
<div>
contain input Of type by "hidden" Of div<input type="hidden" size="8">
</div>
<span id="span">^^span Elements ^^</span>
</body>
</html>

3、 Filter selector  

Basic filter ：

 

  Code example ：

<!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>
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function anmateIt(){
$("#mover").slideToggle("slow", anmateIt);
}
anmateIt();
});
$(document).ready(function(){
//1. Select first div Elements 
 $("#btn1").click(function(){
$("div:first").css("background", "#bbffaa");
});
//2. Choose the last div Elements 
 $("#btn2").click(function(){
$("div:last").css("background", "#bbffaa");
});
//3. choice class Not for one All of the div Elements 
 $("#btn3").click(function(){
$("div:not(.one)").css("background", "#bbffaa");
});
//4. Select even index values div Elements 
 $("#btn4").click(function(){
$("div:even").css("background", "#bbffaa");
});
//5. Select an odd index value div Elements 
 $("#btn5").click(function(){
$("div:odd").css("background", "#bbffaa");
});
//6. Select index value greater than 3 Of div Elements 
 $("#btn6").click(function(){
$("div:gt(3)").css("background", "#bbffaa");
});
//7. Select the index value equal to 3 Of div Elements 
 $("#btn7").click(function(){
$("div:eq(3)").css("background", "#bbffaa");
});
//8. Select index value less than 3 Of div Elements 
 $("#btn8").click(function(){
$("div:lt(3)").css("background", "#bbffaa");
});
//9. Choose all the title elements 
 $("#btn9").click(function(){
$(":header").css("background", "#bbffaa");
});
//10. Select all the elements that are currently executing the animation 
 $("#btn10").click(function(){
$(":animated").css("background", "#bbffaa");
});
//11. Select the last one that doesn't perform animation div Elements 
 $("#btn11").click(function () {
$("div:not(:animated):last").css("background", "#bbffaa");
});
});
</script>
</head>
<body>
<!-- <div>
:first
:last
:not(selector)
:even
:odd
:eq(index)
:gt(index)
:lt(index)
:header
:animated
</div> -->
<input type="button" value=" Select first div Elements " id="btn1" />
<input type="button" value=" Choose the last div Elements " id="btn2" />
<input type="button" value=" choice class Not for one All of the div Elements " id="btn3" />
<input type="button" value=" Select even index values div Elements " id="btn4" />
<input type="button" value=" Select an odd index value div Elements " id="btn5" />
<input type="button" value=" Select index value greater than 3 Of div Elements " id="btn6" />
<input type="button" value=" Select the index value equal to 3 Of div Elements " id="btn7" />
<input type="button" value=" Select index value less than 3 Of div Elements " id="btn8" />
<input type="button" value=" Choose all the title elements " id="btn9" />
<input type="button" value=" Select all the elements that are currently executing the animation " id="btn10" />
<input type="button" value=" Select the last one that doesn't perform animation div" id="btn11" />
<h3> Basic selector .</h3>
<br><br>
<div class="one" id="one">
id by one,class by one Of div
<div class="mini">class by mini</div>
</div>
<div class="one" id="two" title="test">
id by two,class by one,title by test Of div
<div class="mini" title="other">class by mini,title by other</div>
<div class="mini" title="test">class by mini,title by test</div>
</div>
<div class="one">
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini" title="tesst">class by mini,title by tesst</div>
</div>
<div style="display:none;" class="none">style Of display by "none" Of div</div>
<div class="hide">class by "hide" Of div</div>
<div>
contain input Of type by "hidden" Of div<input type="hidden" size="8">
</div>
<div id="mover"> Executing animated div Elements .</div>
</body>
</html>

Content filter ： 

 

 

<!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>
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function anmateIt(){
$("#mover").slideToggle("slow", anmateIt);
}
anmateIt();
});
/**
:contains(text)
:empty
:has(selector)
:parent
*/
$(document).ready(function(){
//1. choice Contains text 'di' Of div Elements 
 $("#btn1").click(function(){
$("div:contains('di')").css("background", "#bbffaa");
});
//2. The selection does not contain child elements ( Or text elements ) Of div Empty elements 
 $("#btn2").click(function(){
$("div:empty").css("background", "#bbffaa");
});
//3. Choose to contain class by mini Elemental div Elements 
 $("#btn3").click(function(){
$("div:has(.mini)").css("background", "#bbffaa");
});
//4. The selection contains child elements ( Or text elements ) Of div Elements 
 $("#btn4").click(function(){
$("div:parent").css("background", "#bbffaa");
});
});
</script>
</head>
<body>
<input type="button" value=" choice Contains text 'di' Of div Elements " id="btn1" />
<input type="button" value=" The selection does not contain child elements ( Or text elements ) Of div Empty elements " id="btn2" />
<input type="button" value=" Choose to contain class by mini Elemental div Elements " id="btn3" />
<input type="button" value=" The selection contains child elements ( Or text elements ) Of div Elements " id="btn4" />
<br><br>
<div class="one" id="one">
id by one,class by one Of div
<div class="mini">class by mini</div>
</div>
<div class="one" id="two" title="test">
id by two,class by one,title by test Of div
<div class="mini" title="other">class by mini,title by other</div>
<div class="mini" title="test">class by mini,title by test</div>
</div>
<div class="one">
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini" title="tesst">class by mini,title by tesst</div>
</div>
<div style="display:none;" class="none">style Of display by "none" Of div</div>
<div class="hide">class by "hide" Of div</div>
<div>
contain input Of type by "hidden" Of div<input type="hidden" size="8">
</div>
<div id="mover"> Executing animated div Elements .</div>
</body>
</html>

Property filter ：

<!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>
<style type="text/css">
div,span,p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
/**
[attribute]
[attribute=value]
[attribute!=value]
[attribute^=value]
[attribute$=value]
[attribute*=value]
[attrSel1][attrSel2][attrSelN]
*/
$(function() {
//1. Choose to include attribute title Of div Elements 
 $("#btn1").click(function() {
$("div[title]").css("background", "#bbffaa");
});
//2. selection attribute title The value is equal to 'test' Of div Elements 
 $("#btn2").click(function() {
$("div[title='test']").css("background", "#bbffaa");
});
//3. selection attribute title Value is not equal to 'test' Of div Elements (* There is no attribute title Will also be selected )
 $("#btn3").click(function() {
$("div[title!='test']").css("background", "#bbffaa");
});
//4. selection attribute title value With 'te' Start Of div Elements 
 $("#btn4").click(function() {
$("div[title^='te']").css("background", "#bbffaa");
});
//5. selection attribute title value With 'est' end Of div Elements 
 $("#btn5").click(function() {
$("div[title$='est']").css("background", "#bbffaa");
});
//6. selection attribute title value contain 'es' Of div Elements 
 $("#btn6").click(function() {
$("div[title*='es']").css("background", "#bbffaa");
});
//7. First select the attribute id Of div Elements , And then in the results Select Properties title value contain 'es' Of div Elements 
 $("#btn7").click(function() {
$("div[id][title*='es']").css("background", "#bbffaa");
});
//8. selection contain title Property value , And title Property value is not equal to test Of div Elements 
 $("#btn8").click(function() {
$("div[title][title!='test']").css("background", "#bbffaa");
});
});
</script>
</head>
<body>
<input type="button" value=" Choose to include attribute title Of div Elements ." id="btn1" />
<input type="button" value=" selection attribute title The value is equal to 'test' Of div Elements ." id="btn2" />
<input type="button"
value=" selection attribute title Value is not equal to 'test' Of div Elements ( There is no attribute title Will also be selected )." id="btn3" />
<input type="button" value=" selection attribute title value With 'te' Start Of div Elements ." id="btn4" />
<input type="button" value=" selection attribute title value With 'est' end Of div Elements ." id="btn5" />
<input type="button" value=" selection attribute title value contain 'es' Of div Elements ." id="btn6" />
<input type="button"
value=" Composite property selector , First select the attribute id Of div Elements , And then in the results Select Properties title value contain 'es' Of div Elements ."
id="btn7" />
<input type="button"
value=" selection contain title Property value , And title Property value is not equal to test Of div Elements ." id="btn8" />
<br>
<br>
<div class="one" id="one">
id by one,class by one Of div
<div class="mini">class by mini</div>
</div>
<div class="one" id="two" title="test">
id by two,class by one,title by test Of div
<div class="mini" title="other">class by mini,title by other</div>
<div class="mini" title="test">class by mini,title by test</div>
</div>
<div class="one">
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini" title="tesst">class by mini,title by tesst</div>
</div>
<div style="display: none;" class="none">style Of display by "none" Of div</div>
<div class="hide">class by "hide" Of div</div>
<div>
contain input Of type by "hidden" Of div<input type="hidden" value="123456789"
size="8">
</div>
<div id="mover"> Executing animated div Elements .</div>
</body>
</html>

Visibility filter ：

<!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>
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function anmateIt(){
$("#mover").slideToggle("slow", anmateIt);
}
anmateIt();
});
/**
:hidden
:visible
*/
$(document).ready(function(){
//1. Select all visible div Elements 
 $("#btn1").click(function(){
$("div:visible").css("background", "#bbffaa");
});
//2. Choose all the invisible div Elements 
// invisible ：display Property is set to none, or visible Set to hidden
 $("#btn2").click(function(){
$("div:hidden").show("slow").css("background", "#bbffaa");
});
//3. Choose all the invisible input Elements 
 $("#btn3").click(function(){
alert($("input:hidden").attr("value"));
});
});
</script>
</head>
<body>
<input type="button" value=" Select all visible div Elements " id="btn1">
<input type="button" value=" Choose all the invisible div Elements " id="btn2" />
<input type="button" value=" Choose all the invisible input Elements " id="btn3" />
<br>
<div class="one" id="one">
id by one,class by one Of div
<div class="mini">class by mini</div>
</div>
<div class="one" id="two" title="test">
id by two,class by one,title by test Of div
<div class="mini" title="other">class by mini,title by other</div>
<div class="mini" title="test">class by mini,title by test</div>
</div>
<div class="one">
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini" title="tesst">class by mini,title by tesst</div>
</div>
<div style="display:none;" class="none">style Of display by "none" Of div</div>
<div class="hide">class by "hide" Of div</div>
<div>
contain input Of type by "hidden" Of div<input type="hidden" value="123456789" size="8">
</div>
<div id="mover"> Executing animated div Elements .</div>
</body>
</html>
Form filter :

 

 

Form object property filter ： 

<!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>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//1. On the form You can use input Assignment operation 
 $("#btn1").click(function(){
$(":text:enabled").val("New Value");
});
//2. On the form Unavailable input Assignment operation 
 $("#btn2").click(function(){
$(":text:disabled").val("New Value Too");
});
//3. Get the number of multiple check boxes selected Use size() Method to get the number of elements in the selected element collection 
 $("#btn3").click(function(){
alert($(":checkbox:checked").size())
});
//4. Get multiple boxes , Every selected value value 
 $("#btn4").click(function(){
var str = "";
var eles = $(":checkbox:checked");
console.log(eles);
for(var i=0;i<eles.size();i++){
str += "【"+$(eles[i]).val()+"】";
}
alert(str)
});
//5. Get the selected content of the drop-down box 
 $("#btn5").click(function(){
var str = "";
// Notice the peculiarity of this selector , because select Inside option It's the real selection ,
// therefore :selected Selectors and select[name='test'] The relationship between selectors is a child parent relationship 
// You have to select the descendant in the same way as the basic selector 
var els = $("select option:selected");
console.log(els);
for(var i=0;i<els.size();i++){
str += "【"+$(els[i]).val()+"】";
}
alert(str)
});
})
</script>
</head>
<body>
<h3> Form object property filter selector </h3>
<button id="btn1"> On the form You can use input Assignment operation .</button>
<button id="btn2"> On the form Unavailable input Assignment operation .</button><br /><br />
<button id="btn3"> Get the number of multiple check boxes selected .</button>
<button id="btn4"> Get the content selected in the multi selection box .</button><br /><br />
<button id="btn5"> Get the selected content of the drop-down box .</button><br /><br />
<form id="form1" action="#">
Available elements : <input name="add" value=" Text boxes are available 1"/><br>
Unavailable elements : <input name="email" disabled="disabled" value=" No text boxes are available "/><br>
Available elements : <input name="che" value=" Text boxes are available 2"/><br>
Unavailable elements : <input name="name" disabled="disabled" value=" No text boxes are available "/><br>
<br>
Checkbox : <br>
<input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
<input type="checkbox" name="newsletter" value="test2" />test2
<input type="checkbox" name="newsletter" value="test3" />test3
<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
<input type="checkbox" name="newsletter" value="test5" />test5
<br><br>
The drop-down list 1: <br>
<select name="test" multiple="multiple" style="height: 100px" id="sele1">
<option> Zhejiang </option>
<option selected="selected"> liaoning </option>
<option> Beijing </option>
<option selected="selected"> tianjin </option>
<option> Guangzhou </option>
<option> hubei </option>
</select>
<br><br>
The drop-down list 2: <br>
<select name="test2">
<option> Zhejiang </option>
<option> liaoning </option>
<option selected="selected"> Beijing </option>
<option> tianjin </option>
<option> Guangzhou </option>
<option> hubei </option>
</select>
</form>
</body>
</html>

6、 ... and 、jQuery Element screening

 

 

 

<!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>DOM Inquire about </title>
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function anmateIt(){
$("#mover").slideToggle("slow", anmateIt);
}
anmateIt();
//(1)eq() Select the index value equal to 3 Of div Elements 
 $("#btn1").click(function(){
$("div").eq(3).css("background-color","#bfa");
});
//(2)first() Select first div Elements 
 $("#btn2").click(function(){
//first() Pick the first element 
 $("div").first().css("background-color","#bfa");
});
//(3)last() Choose the last div Elements 
 $("#btn3").click(function(){
//last() Pick the last element 
 $("div").last().css("background-color","#bfa");
});
//(4)filter() stay div Select an even index in 
 $("#btn4").click(function(){
//filter() Filter The input is a selector string 
 $("div").filter(":even").css("background-color","#bfa");
});
//(5)is() Judge #one Is it :empty or :parent
//is Used to detect jq Whether the object matches the specified selector 
 $("#btn5").click(function(){
alert($("#one").is(":empty"));
});
//(6)has() choice div Contained in the .mini Of 
 $("#btn6").click(function(){
//has(selector) Selector string Does it include selector
 $("div").has(".mini").css("background-color","#bfa");
});
//(7)not() choice div in class Not for one Of 
 $("#btn7").click(function(){
//not(selector) The choice is not selector The elements of 
 $("div").not(".one").css("background-color","#bfa");
});
//(8)children() stay body Choose all class by one Of div Subelement 
 $("#btn8").click(function(){
//children() Select all the child elements 
 $("body").children("div.one").css("background-color","#bfa");
});
//(9)find() stay body Choose all class by mini Of div Elements 
 $("#btn9").click(function(){
//find() Select all the descendant elements 
 $("body").find("div.mini").css("background-color","#bfa");
});
//(10)next() #one Next div
 $("#btn10").click(function(){
//next() Select the next sibling element 
 $("#one").next("div").css("background-color","#bfa");
});
//(11)nextAll() #one All the back span Elements 
 $("#btn11").click(function(){
//nextAll() Select all the elements that follow 
 $("#one").nextAll("span").css("background-color","#bfa");
});
//(12)nextUntil() #one and span Between the elements 
 $("#btn12").click(function(){
//
 $("#one").nextUntil("span").css("background-color","#bfa")
});
//(13)parent() .mini Parent element of 
 $("#btn13").click(function(){
$(".mini").parent().css("background-color","#bfa");
});
//(14)prev() #two The last one of div
 $("#btn14").click(function(){
//prev() 
 $("#two").prev("div").css("background-color","#bfa")
});
//(15)prevAll() span All in front div
 $("#btn15").click(function(){
//prevAll() Select all the elements above 
 $("span").prevAll("div").css("background-color","#bfa")
});
//(16)prevUntil() span Go forward until #one The elements of 
 $("#btn16").click(function(){
//prevUntil(exp) Find all the previous siblings until you find exp stop it 
 $("span").prevUntil("#one").css("background-color","#bfa")
});
//(17)siblings() #two All the sibling elements 
 $("#btn17").click(function(){
//siblings() Find all the sibling elements , Including the front and the back 
 $("#two").siblings().css("background-color","#bfa")
});
//(18)add() Choose all span Elements and id by two The elements of 
 $("#btn18").click(function(){
$("span").add("#two").css("background-color","#bfa");
});
});
</script>
</head>
<body>
<input type="button" value="eq() Select the index value equal to 3 Of div Elements " id="btn1" />
<input type="button" value="first() Select first div Elements " id="btn2" />
<input type="button" value="last() Choose the last div Elements " id="btn3" />
<input type="button" value="filter() stay div Select an even index in " id="btn4" />
<input type="button" value="is() Judge #one Is it :empty or :parent" id="btn5" />
<input type="button" value="has() choice div Contained in the .mini Of " id="btn6" />
<input type="button" value="not() choice div in class Not for one Of " id="btn7" />
<input type="button" value="children() stay body Choose all class by one Of div Subelement " id="btn8" />
<input type="button" value="find() stay body Choose all class by mini Of div Progeny element " id="btn9" />
<input type="button" value="next()#one Next div" id="btn10" />
<input type="button" value="nextAll()#one All the back span Elements " id="btn11" />
<input type="button" value="nextUntil()#one and span Between the elements " id="btn12" />
<input type="button" value="parent().mini Parent element of " id="btn13" />
<input type="button" value="prev()#two The last one of div" id="btn14" />
<input type="button" value="prevAll()span All in front div" id="btn15" />
<input type="button" value="prevUntil()span Go forward until #one The elements of " id="btn16" />
<input type="button" value="siblings()#two All the sibling elements " id="btn17" />
<input type="button" value="add() Choose all span Elements and id by two The elements of " id="btn18" />
<h3> Basic selector .</h3>
<br /><br />
The text box <input type="text" name="account" disabled="disabled" />
<br><br>
<div class="one" id="one">
id by one,class by one Of div
<div class="mini">class by mini</div>
</div>
<div class="one" id="two" title="test">
id by two,class by one,title by test Of div
<div class="mini" title="other"><b>class by mini,title by other</b></div>
<div class="mini" title="test">class by mini,title by test</div>
</div>
<div class="one">
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini" title="tesst">class by mini,title by tesst</div>
</div>
<div style="display:none;" class="none">style Of display by "none" Of div</div>
<div class="hide">class by "hide" Of div</div>
<span id="span1">^^span Elements 111^^</span>
<div>
contain input Of type by "hidden" Of div<input type="hidden" size="8">
</div>
<span id="span2">^^span Elements 222^^</span>
<div id="mover"> Executing animated div Elements .</div>
</body>
</html>

7、 ... and 、jQuery Property operations for

 

 1.html()

obtain ：

<!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 () {
$("button").click(function () {
// obtain 
 alert($("div").html());
});
});
</script>
</head>
<body>
<div> I am a div label <span> I am a div Medium span</span></div>
<button> Operation input box </button>
</body>
</html>

The effect is as follows ：

  Set up ：

<!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 () {
$("button").click(function () {
// Set up 
 $("div").html("<p> Paragraph Tags </p>");
});
});
</script>
</head>
<body>
<div> I am a div label <span> I am a div Medium span</span></div>
<button> Operation input box </button>
</body>
</html>

The effect is as follows ：

 

 2.text()

obtain ：

<!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 () {
$("button").click(function () {
// obtain 
 alert($("div").text());
});
});
</script>
</head>
<body>
<div> I am a div label <span> I am a div Medium span</span></div>
<button> Operation input box </button>
</body>
</html>

The effect is as follows ：

 

  Set up ：

<!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 () {
$("button").click(function () {
// Set up 
 $("div").text("<p> Paragraph Tags </p>");
});
});
</script>
</head>
<body>
<div> I am a div label <span> I am a div Medium span</span></div>
<button> Operation input box </button>
</body>
</html>

The effect is as follows ：

 

 3.val()

obtain ：

<!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 () {
$("button").click(function () {
// obtain 
 alert($(":text").val());
});
});
</script>
</head>
<body>
<input type="text" value="abc" />
<button> Operation input box </button>
</body>
</html>

The effect is as follows ：

 

  Set up ：

<!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 () {
$("button").click(function () {
// Set up 
 $(":text").val("hello");
});
});
</script>
</head>
<body>
<input type="text" value="abc" />
<button> Operation input box </button>
</body>
</html>

The effect is as follows ：

 

 val() Method operation radio 、 check 、 The drop-down list ：

Operation radio ：

<!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 () {
$(":radio").val(["radio2"]);
});
</script>
</head>
<body>
The radio ：
<input name="radio" type="radio" value="radio1" />radio1
<input name="radio" type="radio" value="radio2" />radio2
</body>
</html>

The effect is as follows ：

 

  Operation check ：

<!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 () {
$(":checkbox").val(["checkbox2","checkbox3"]);
});
</script>
</head>
<body>
multi-select ：
<input name="checkbox" type="checkbox" value="checkbox1" />checkbox1
<input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
<input name="checkbox" type="checkbox" value="checkbox3" />checkbox3
</body>
</html>

The effect is as follows ：

 

  Manipulate the drop-down list ：

<!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 () {
$("#multiple").val(["mul1","mul2","mul4"]);
$("#single").val(["sin3"]);
});
</script>
</head>
<body>
Pull down multiple choices ：
<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 the radio ：
<select id="single">
<option value="sin1">sin1</option>
<option value="sin2">sin2</option>
<option value="sin3">sin3</option>
</select>
</body>
</html>

The effect is as follows ：

 

  Operation radio 、 check 、 Drop down to check ：

<!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 () {
$("#multiple,#single,:radio,:checkbox").val(["radio2","checkbox1","checkbox3","mul1","mul4","sin3"]);
});
</script>
</head>
<body>
<body>
The radio ：
<input name="radio" type="radio" value="radio1" />radio1
<input name="radio" type="radio" value="radio2" />radio2
<br/>
multi-select ：
<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 choices ：
<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 the radio ：
<select id="single">
<option value="sin1">sin1</option>
<option value="sin2">sin2</option>
<option value="sin3">sin3</option>
</select>
</body>
</body>
</html>

The effect is as follows ：

 

 4.attr()

<!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 () {
// obtain 
 alert($(":checkbox:first").attr("name"));
// Set up 
 $(":checkbox:first").attr("name", "abc")
});
</script>
</head>
<body>
multi-select ：
<input name="checkbox" type="checkbox" checked="checked" value="checkbox1" />checkbox1
<input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
</body>
</html>

5.prop()

<!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 () {
// obtain 
 alert($(":checkbox:first").prop("checked"));//true
// Set up 
 $(":checkbox:first").prop("checked",false);
});
</script>
</head>
<body>
multi-select ：
<input name="checkbox" type="checkbox" checked="checked" value="checkbox1" />checkbox1
<input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
</body>
</html>

6. practice （ Future generations 、 Totally unselected 、 Reverse election ）

<!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(){
// Click event for all binding 
 $("#checkedAllBtn").click(function () {
$(":checkbox").prop("checked",true);
});
// Click event for none binding 
 $("#checkedNoBtn").click(function () {
$(":checkbox").prop("checked",false);
});
// Click event for the reverse selection binding 
 $("#checkedRevBtn").click(function () {
$(":checkbox[name='items']").each(function () {
// stay each Ergodic function Function , There is one this object . This this Object is the current traversal of DOM object 
this.checked = !this.checked;
});
// Check to see if it's full 
// Get the number of balls that are not at all 
var allCount = $(":checkbox[name='items']").length;
// Get the number of balls selected 
var checkedCount = $(":checkbox[name='items']:checked").length;
// Equal check , No equal, no choice 
 $("#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);
});
});
// to 【 Future generations / Totally unselected 】 Bind click event 
 $("#checkedAllBox").click(function () {
// In the event of function Function , There is one this object , This this Object is currently responding to an event DOM object 
 $(":checkbox[name='items']").prop("checked",this.checked);
});
// Bind click events to all ball games 
 $(":checkbox[name='items']").click(function () {
// Check to see if it's full 
// Get the total number of balls 
var allCount = $(":checkbox[name='items']").length;
// Get the number of balls selected 
var checkedCount = $(":checkbox[name='items']:checked").length;
$("#checkedAllBox").prop("checked",allCount == checkedCount);
});
});
</script>
</head>
<body>
<form method="post" action="">
Your favorite sport is ？<input type="checkbox" id="checkedAllBox" /> Future generations / Totally unselected
<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=" whole choose " />
<input type="button" id="checkedNoBtn" value=" Totally unselected " />
<input type="button" id="checkedRevBtn" value=" back choose " />
<input type="button" id="sendBtn" value=" carry hand over " />
</form>
</body>
</html>

8、 ... and 、DOM Addition, deletion and modification of

 

 

 1.append()

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script>
<script type="text/javascript">
// demand ： towards p Insert a span label 
 $(function () {
$("p").append("<span>hello</span>");
});
</script>
</head>
<body>
<p> The paragraph 1</p>
</body>
</html>

The effect is as follows ：

 

 2.appendTo()

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script>
<script type="text/javascript">
// demand ： take p Tag added to two div In the label 
 $(function () {
$("p").appendTo("div");
});
</script>
</head>
<body>
<p> The paragraph 1</p>
<div></div>
<div></div>
</body>
</html>

The effect is as follows ：

 

 3.prepend()

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
$("p").prepend("<b>hello</b>");
});
</script>
</head>
<body>
<p> The paragraph 1</p>
</body>
</html>

The effect is as follows ：

 

 4.prependTo()

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
$("p").prependTo("div");
});
</script>
</head>
<body>
<p> The paragraph 1</p>
<div></div>
</body>
</html>

The effect is as follows ：

 

 5.after()

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
$("p").after("<div>div1</div>");
});
</script>
</head>
<body>
<p> The paragraph 1</p>
</body>
</html>

The effect is as follows ：

 

 6.before()

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
$("p").before("<div>div1</div>");
});
</script>
</head>
<body>
<p> The paragraph 1</p>
</body>
</html>

The effect is as follows ：

 7.insertAfter()

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
$("p").insertAfter("div");
});
</script>
</head>
<body>
<p> The paragraph 1</p>
<div>div label </div>
</body>
</html>

The effect is as follows ：

 

 8.insertBefore()

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
$("<div>div label </div>").insertBefore("p");
});
</script>
</head>
<body>
<p> The paragraph 1</p>
</body>
</html>

The effect is as follows ：

 

 9.replaceWith()

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
$("p").replaceWith("<div>div label </div>");
});
</script>
</head>
<body>
<p> The paragraph 1</p>
</body>
</html>

The effect is as follows ：

 

 10.replaceAll()

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
$("div").replaceAll("p");
});
</script>
</head>
<body>
<p> The paragraph 1</p>
<p> The paragraph 2</p>
<div>div label </div>
</body>
</html>

The effect is as follows ：

 

 11.empty()

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
$("div").empty();
});
</script>
</head>
<body>
<div>
<span>span label </span>
</div>
</body>
</html>

The effect is as follows ：

 

 12.remove()

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
$("div").remove();
});
</script>
</head>
<body>
<div>
<span>span label </span>
</div>
</body>
</html>

The effect is as follows ：

 

  Nine 、CSS Style operation

 

 

  Code example ：

<!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 $div = $("div:first");
$("#btn01").click(function () {
$div.addClass("redDiv blueBorder");
});
$("#btn02").click(function () {
$div.removeClass();
});
$("#btn03").click(function () {
$div.toggleClass("redDiv");
});
$("#btn04").click(function () {
//offset(): Returns the position of the first matching element relative to the document .
var os = $div.off();
// adopt offset() What you get is an object , This object has two properties ：top Indicates the top margin ,left It means the left margin 
 alert(" Top margin :" + os.top + " The left margin :" + os.left);
$div.offset({
top:50,
left:60
});
});
});
</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>

Ten 、jQuery Animation

 

 

  Code example ：

<!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 href="css/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//show()： Show 
 $("#btn1").click(function () {
$("#div1").show(2000,function () {
alert("show Animation complete ");
});
});
//hide()： hide 
 $("#btn2").click(function () {
$("#div1").hide(1000,function () {
alert("hide Animation complete ");
});
});
//toggle()： Switch 
 $("#btn3").click(function () {
$("#div1").toggle(1000,function () {
alert("toggle Animation complete ");
});
});
// Loop show hide 
// var abc = function () {
// $("#div1").toggle(1000,abc);
// };
// abc();
//fadeIn()： Fade in 
 $("#btn4").click(function () {
$("#div1").fadeIn(2000,function () {
alert("fadeIn complete ");
});
});
//fadeOut()： Fade out 
 $("#btn5").click(function () {
$("#div1").fadeOut(2000,function () {
alert("fadeOut complete ");
});
});
//fadeTo()： Fade to 
 $("#btn6").click(function () {
$("#div1").fadeTo(2000,0.5,function () {
alert("fadeTo complete ");
});
});
//fadeToggle()： Fade switch 
 $("#btn7").click(function () {
$("#div1").fadeToggle(1000,function () {
alert("fadeToggle complete ");
});
});
})
</script>
</head>
<body>
<table style="float: left;">
<tr>
<td><button id="btn1"> Show show()</button></td>
</tr>
<tr>
<td><button id="btn2"> hide hide()</button></td>
</tr>
<tr>
<td><button id="btn3"> Show / Hide Toggle toggle()</button></td>
</tr>
<tr>
<td><button id="btn4"> Fade in fadeIn()</button></td>
</tr>
<tr>
<td><button id="btn5"> Fade out fadeOut()</button></td>
</tr>
<tr>
<td><button id="btn6"> Fade to fadeTo()</button></td>
</tr>
<tr>
<td><button id="btn7"> Fade switch fadeToggle()</button></td>
</tr>
</table>
<div id="div1" style="float:left;border: 1px solid;background-color: blue;width: 300px;height: 200px;">
jquery Animation defines many kinds of animation effects , You can easily use these animation effects
</div>
</body>
</html>

11、 ... and 、jQuery Event operations

 1. Document loading

Native js Document loading for ：

window.onload = function(){
}

jQuery Document loading for ：

$(function(){
});

 

 

 2. event

 click() event ：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
alert("button Click event execution ");
});
});
</script>
</head>
<body>
<div>
<button id="btn"> Button </button>
</div>
</body>
</html>

The effect is as follows ：

 

 mouseover() and mouseout() event ：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
$(":text").mouseover(function () {
console.log(" Came in ");
});
$(":text").mouseout(function () {
console.log(" I'm out ");
});
});
</script>
</head>
<body>
<div>
<input type="text" />
</div>
</body>
</html>

The effect is as follows ：

 

 bind() The binding event ：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
$("h5").bind("click mouseover mouseout", function () {
console.log(" This is a bind Bound events ");
});
});
</script>
</head>
<body>
<div>
<h5>h5 Title Tag </h5>
</div>
</body>
</html>

The effect is as follows ：

 one() The binding event ：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
$("h5").one("click mouseover mouseout", function () {
console.log(" This is a one Bound events ");
});
});
</script>
</head>
<body>
<div>
<h5>h5 Title Tag </h5>
</div>
</body>
</html>

The effect is as follows ：

 

 live() The binding event ：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
$("h5").live("click", function () {
alert("live Method binding click event ");
});
$("<h5> Newly added h5</h5>").appendTo("div");
});
</script>
</head>
<body>
<div>
<h5>h5 Title Tag </h5>
</div>
</body>
</html>

The effect is as follows ：

 

 unbind() Unbind the event ：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
$("div").bind("click mouseover mouseout",function () {
alert("bind Bound events ");
});
$("button").click(function () {
$("div").unbind("mouseover mouseout");
});
});
</script>
</head>
<body>
<div>div label </div>
<button> Button </button>
</body>
</html>

3. The bubble of events

 

 

  Code example ：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
// Cancel a The default click behavior of the tag is 2 ：
// $("a").click(function () {
// return false;
// });
// to button Button binding click event 
 $("button").click(function () {
alert("button Click events ");
 return false;
});
// to body Bind click event 
 $("body").click(function () {
alert("body Click events ");
});
});
</script>
</head>
<body>
<!-- Cancel a The default click behavior of tags is one ：-->
<!--<a href="http://www.baidu.com" onclick="return false;"> use Baidu Search </a>-->
<button> Button </button>
</body>
</html>

4.JavaScript Event object

 

  Native JavaScript Get event object ：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script>
<script type="text/javascript">
window.onload = function () {
document.getElementById("btn").onclick = function (event) {
console.log(event);
}
}
</script>
</head>
<body>
<button id="btn"> Button </button>
</body>
</html>

The effect is as follows ：

 

 jQuery Code gets the event object ：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function (event) {
console.log(event);
});
});
</script>
</head>
<body>
<button id="btn"> Button </button>
</body>
</html>

The effect is as follows ：

 

 

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

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
$(":text").bind("mouseout mouseover",function (event) {
if (event.type == "mouseover"){
console.log(" Mouse migration ");
}else if (event.type == "mouseout"){
console.log(" Mouse removal ");
}
})
});
</script>
</head>
<body>
user name ：<input type="text" />
</body>
</html>

The effect is as follows ：

 

版权声明
本文为[Guo Shao]所创，转载请带上原文链接，感谢
  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图（最新 api，rocketmq原理面试
  10. Vue 学习笔记（3，免费Java高级工程师学习资源
  11. Vue 学习笔记（2，Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考-＆gt;实现-＆gt;不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架，Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考-＆gt;实现-＆gt;不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue，阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5，字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3)，350道Java面试真题分享
  52. 【重识 HTML (2)，Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1)，二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ，nginx面试题阿里
  58. 【重识 HTML (4)，ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple