jQuery高级应用（上篇）
程序员文章站
2024-02-01 08:47:04
...
学习辅助资料为：JavaScript+jQuery动态网页设计案例课堂（第2版）
jQuery的基础知识
jQuery是一个优秀的JavaScript脚本库。是一个兼容多浏览器的JavaScript框架。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>用JavaScript实现表格奇偶行异色</title>
<style type="text/css">
.datalist{
border: 1px sol #007108;
font-family: arial;
border-collapse: collapse; /*边框重叠*/
background-color: #d999dc;
font-size: 14px;
}
.datalist th{
border: 1px solid #007108;
background-color: #000000;
color: #FFFFFF;
font-weight: bold;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 12px;
padding-right: 12px;
text-align: center;
}
.datalist td{
border: 1px solid #007108;
text-align: left;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 10px;
padding-right: 10px;
}
.datalist tr.altrow{
background-color: #a5e5ff; /*隔行变色：蓝色*/
}
</style>
<script type="text/javascript">
window.onload = function(){
var oTable = document.getElementById("Table");
for(var i=0;i<Table.rows.length;i++)
{
if(i%2==0) Table.rows[i].className = "altrow"
}
}
</script>
</head>
<body>
<table class="datalist" summary="list of members in EE Study" id="Table">
<tr>
<th scope="col">姓名</th>
<th scope="col">性别</th>
<th scope="col">出生日期</th>
<th scope="col">移动电话</th>
</tr>
<tr>
<td>李蕊</td>
<td>女</td>
<td>8月10号</td>
<td>1302304049</td>
</tr>
<tr>
<td>张键</td>
<td>男</td>
<td>5月25号</td>
<td>112304049</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>4月23号</td>
<td>12367899</td>
</tr>
<tr>
<td>杨朝</td>
<td>男</td>
<td>12月23号</td>
<td>189765427</td>
</tr>
</table>
</body>
</html>
这是未加jQuery的代码，显示的效果为：
图1
我们想要使用jQuery库，就必须先下载它并配置它。
在官网中找到最新的jQuery库并下载，https://jquery.com
下载之后，放在你的代码所在的文件里，如我的代码在图2
现在只需要在代码中引用jQuery库即可。
上一个JavaScript实现的奇偶行异色就可以简单的实现了。
将其中的script代码改为如下
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(function (){
$("table.datalist tr:nth-child(odd)").addClass("altrow");
})
</script>
实现的功能完全一样，但是代码比较简单。将之前的循环变成了一句就可以实现和之前一模一样的效果。
- jQuery的引入：弥补了浏览器与CSS3兼容性不好的缺陷，因为jQuery提供了几乎所有的CSS3属性选择器，而且jQuery的兼容性很好。目前的主流浏览器几乎都可以完美实现。开发者只需要按照以前的方法定义CSS类型，在引入jQuery之后，通过addClass（）方法添加至指定元素即可。
接下来正式进入jQuery的第一个简单入门实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>jQuery 第一个实例</title>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("Hello jQuery!");
});
</script>
</head>
<body>
</body>
</html>
在网页中弹出对话框：图3
jQuery的选择器
在JavaScript中，要想获取网页的DOM元素，必须使用该元素的ID和TagName。但是在jQuery库中却提供了许多功能强大的选择器，帮助开发人员获取页面的DOM元素，而且获取到的每个对象都以jQuery包装集的形式返回。
jQuery的$
$是jQuery中最常用的一个符号，用于声明jQuery对象。可以说，在jQuery中，无论使用哪种类型的选择器，都需要从一个
$符号和一对“（）”开始。在“（）”中通常使用字符串参数，参数中可以包含任何CSS选择符表达式。
- $通常的用法：
① 在参数中使用标记名，如
$(“div”),用于获取文档中全部的.
② 在参数中使用ID，如
$("#username"),用于获取文档中ID属性值为username的一个元素。
③ 在参数中使用CSS类名，如
$(".btn_grey"),用于获取文档中使用CSS类名为btn_grey的所有元素。
例：选择文本段落的奇数行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>选择奇数行</title>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
window.onload = function(){
var oElements = $("p:odd");
for(var i=0; i<oElements.length;i++)
oElements[i].innerHTML=i.toString();
}
</script>
</head>
<body>
<div id="body">
<p>第一行</p>
<p>第二行</p>
<p>第三行</p>
<p>第四行</p>
<p>第五行</p>
</div>
</body>
</html>
网页中显示的结果为：图4
- 功能函数的前缀：清理文本框中空格
- 创建DOM元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>选择奇数行</title>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var New = $("<a>(open in a new window)</a>");
New.insertAfter("#target");
});
</script>
</head>
<body>
<a id="target" href="http://www.google.com">Google</a>
<a href="http://www.baidu.com">Baidu</a>
</body>
</html>
网页显示结果为：图5
- 基本选择器：是其他类型选择器的基础，是jQuery选择器中最为重要的 部分。
通配符选择器（*）：选取指定元素中的所有子元素。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("body *").css("background-color","#B2E0FF");
});
</script>
</head>
<body>
<h1>欢迎光临我的网站</h1>
<p class="intro">网站管理员介绍</p>
<p>姓名：沐曦</p>
<p>性别：女</p>
<div id="choose">
兴趣爱好：
<ul>
<li>读书</li>
<li>听音乐</li>
<li>跑步</li>
</ul>
</div>
</body>
</html>
网页显示效果为：图6
ID选择器：利用DOM元素的ID属性值来筛选匹配的元素，并以jQuery包装集的形式返回给对象。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#choose").css("background-color","#B2E0FF");
});
</script>
</head>
<body>
<h1>欢迎光临我的网站</h1>
<p class="intro">网站管理员介绍</p>
<p>姓名：沐曦</p>
<p>性别：女</p>
<div id="choose">
兴趣爱好：
<ul>
<li>读书</li>
<li>听音乐</li>
<li>跑步</li>
</ul>
</div>
</body>
</html>
网页显示效果为：图7
元素选择器：根据元素名称匹配相应的元素。即根据选择的标记名来选择的。一般是一组元素。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").css("background-color","#B2E0FF");
});
</script>
</head>
<body>
<h1>欢迎光临我的网站</h1>
<p class="intro">网站管理员介绍</p>
<p>姓名：沐曦</p>
<p>性别：女</p>
<div id="choose">
兴趣爱好：
<ul>
<li>读书</li>
<li>听音乐</li>
<li>跑步</li>
</ul>
</div>
</body>
</html>
网页显示效果为：图8
复合选择器：将多个选择器组合在一起，可以使任意选择器。它们之间用逗号隔开。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#choose,.intro").css("background-color","#B2E0FF");
});
</script>
</head>
<body>
<h1>欢迎光临我的网站</h1>
<p class="intro">网站管理员介绍</p>
<p>姓名：沐曦</p>
<p>性别：女</p>
<div id="choose">
兴趣爱好：
<ul>
<li>读书</li>
<li>听音乐</li>
<li>跑步</li>
</ul>
</div>
</body>
</html>
网页显示效果为：图9
- 层级选择器：
祖先后代选择器：ancestor祖先元素 descendant后代元素。
例如像获取ul元素下全部的li元素，就可以使用$(“ul li”)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
body{
margin: 0px;
}
#top{
background-color: #B2E0FF;
width: 450px;
height: 150px;
clear: both; /*设置左右两侧无浮动内容*/
padding-top: 10px;
font-size: 12pt;
}
.css{
color: #FFFFFF;
line-height: 20px; /*行高*/
}
</style>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div ul").addClass("css");
});
</script>
</head>
<body>
<div id="top">
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</div>
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</body>
</html>
网页显示效果为：图10
父子选择器：$(“Parent>child”).例
$(“form>input”);
相邻元素选择器：$(“prev+next”) 例
$(“div+p”);
兄弟选择器：用于获取prev元素之后的所有siblings, prev和siblings是两个同辈元素。兄弟选择器的语法格式如下：
$(“prev~siblings”);
$(“div~p”)的意思是div中的p是不发生变化的，在div之后出现的p都是要进行改变的。
- 过滤选择器：
简单过滤选择器：
① first选择器 $(:first)选择第一个。
$(p:first)；第一个p元素发生变化。
② last选择器 $(:last)选择最后一个。
$(p:last)；最后一个元素发生变化。
③ even 用于选取每个带有偶数index值的元素（如2、4 、6）。index值从0开始，所以第一个元素是偶数0。最常见的用法是与其他元素/选择器一起使用，来选择指定的组中偶数序号的元素。
例：使用jQuery制作隔行（偶数行）变色的表格
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
body{
font-family: "黑体";
font-size: 20px;
}
table{
text-align: center;
width: 500px;
border: 1px solid green;
}
td{
border: 1px solid green;
height: 30px;
}
</style>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("tr:even").css("background-color","#B2E0FF");
});
</script>
</head>
<body>
<h2>学生成绩表</h2>
<table>
<tr>
<th>学号</th>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
<tr>
<td>1</td>
<td>张瑞</td>
<td>89</td>
<td>90</td>
<td>98</td>
</tr>
<tr>
<td>1</td>
<td>张瑞</td>
<td>89</td>
<td>90</td>
<td>98</td>
</tr>
<tr>
<td>1</td>
<td>张瑞</td>
<td>89</td>
<td>90</td>
<td>98</td>
</tr>
<tr>
<td>1</td>
<td>张瑞</td>
<td>89</td>
<td>90</td>
<td>98</td>
</tr>
<tr>
<td>1</td>
<td>张瑞</td>
<td>89</td>
<td>90</td>
<td>98</td>
</tr>
</table>
</body>
</html>
网页显示效果为：图11
④ ：odd 选择所有奇数行进行改变，与偶数用法相同。
内容过滤选择器：通过DOM元素包含的文本内容以及是否含有匹配的元素来获取内容。常见的内容过滤选择器有
：contains(text) 选择器选取包含指定字符串的元素，该字符可以是直接包含在元素中的文本，或者被包含于子元素中，该选择器经常与其他元素或选择器一起使用，来选择指定的组中指定文本的元素。
：empty 用于选取所有不包含子元素或者文本的空元素，使用方法与contains一致。
：parent 用于选取包含子元素或者本文的元素。即单元格是有内容的（非空的）都会被选取出来。
：has(selector)
例：选择学生成绩表中包含数字9的单元格。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
body{
font-family: "黑体";
font-size: 20px;
}
table{
text-align: center;
width: 500px;
border: 1px solid green;
}
td{
border: 1px solid green;
height: 30px;
}
</style>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("tr:even").css("background-color","#B2E0FF");
});
</script>
</head>
<body>
<h2>学生成绩表</h2>
<table>
<tr>
<th>学号</th>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
<tr>
<td>1</td>
<td>张瑞</td>
<td>89</td>
<td>90</td>
<td>98</td>
</tr>
<tr>
<td>1</td>
<td>张瑞</td>
<td>89</td>
<td>90</td>
<td>98</td>
</tr>
<tr>
<td>1</td>
<td>张瑞</td>
<td>89</td>
<td>90</td>
<td>98</td>
</tr>
<tr>
<td>1</td>
<td>张瑞</td>
<td>89</td>
<td>90</td>
<td>98</td>
</tr>
<tr>
<td>1</td>
<td>张瑞</td>
<td>89</td>
<td>90</td>
<td>98</td>
</tr>
</table>
</body>
</html>
网页显示效果为：图12
- 可见性过滤选择器：
元素的可见状态有隐藏和显示两种。可见性过滤选择器是利用元素的可见性状态匹配元素的。因此，可见性过滤选择器也有两种，分为用于隐藏元素的：hidden选择器和用于显示元素的：visible选择器。
例：想要获取页面总所有可见的表格元素，就使用$(“table:visible”)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
body{
font-family: "黑体";
font-size: 20px;
}
table{
text-align: center;
width: 500px;
border: 1px solid green;
}
td{
border: 1px solid green;
height: 30px;
}
</style>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("table:visible").css("background-color","#B2E0FF");
});
</script>
</head>
<body>
<h2>学生成绩表</h2>
<table>
<tr>
<th>学号</th>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
<tr>
<td>1</td>
<td>张瑞</td>
<td>89</td>
<td>90</td>
<td>98</td>
</tr>
<tr>
<td>1</td>
<td>张瑞</td>
<td>89</td>
<td>90</td>
<td>98</td>
</tr>
<tr>
<td>1</td>
<td>张瑞</td>
<td>89</td>
<td>90</td>
<td>98</td>
</tr>
<tr>
<td>1</td>
<td>张瑞</td>
<td>89</td>
<td>90</td>
<td>98</td>
</tr>
<tr>
<td>1</td>
<td>张瑞</td>
<td>89</td>
<td>90</td>
<td>98</td>
</tr>
</table>
</body>
</html>
网页显示效果为：图13
例：获取隐藏的元素
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
div{
width: 70px;
height: 40px;
background: #e7f;
margin: 5px;
float: left;
}
span{
display: block;
clear: left;
color: black;
}
</style>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</head>
<body>
<span></span>
<div></div>
<div>Hider!</div>
<div></div>
<div style="display: none;">Hider!</div>
<div></div>
<form>
<input type="hidden">
<input type="hidden">
<input type="hidden">
</form>
<span></span>
<script type="text/javascript">
var hiddenElements = $("body").find(":hidden").not("script");
$("span:first").text("发现" + hiddenElements.length + "个隐藏元素总量");
$("div:hidden").show(3000);
$("span:last").text("发现" + $("input:hidden").length + "个隐藏input元素")
</script>
</body>
</html>
网页显示效果为：图14
- 表单过滤选择器：
通过表单元素的 属性来选取元素的，表单元素的状态属性包括选中、不可用等。表单过滤选择器有四种
：enabled 获取所有被选中的元素。
：disabled 获取所有不可用的元素
：checked 获取所有被选中元素（复选框、单选按钮等，不包括select中的option）。
：selected 获取所有选中的option元素
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>表单过滤器</title>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input:checked").css("background-color","red");
$("input:disabled").val("不可用按钮");
});
function selectVal(){
alert($("select option:selected").val());
}
</script>
</head>
<body>
<form>
复选框1：<input type="checkbox" checked="checked" value="复选框1"/>
复选框2：<input type="checkbox" checked="checked" value="复选框2"/>
复选框3：<input type="checkbox" value="复选框3"/>
不可用按钮：<input type="button" value="不可用按钮" disabled/><br>
下拉列表框：
<select onchange="selectVal()">
<option value="列表项1">列表项1</option>
<option value="列表项2">列表项2</option>
<option value="列表项3">列表项3</option>
</select>
</form>
</body>
</html>
网页显示效果为：图15
：input
：text
：password
：radio
：checkbox
：submit
：reset
：button
：image
：file
- 属性选择器：
属性选择器是通过元素的属性作为过滤条件来进行筛选对象的选择器。常见的属性选择器：
[attribute] ： $("[attribute！=value]")
用于选择每个带有指定属性的元素，可以选取带有任何属性的元素，而且对于指定的属性没有限制。
例如，如果选择body标签中不包含id="choose"的元素，代码如下
$(“body[id!=choose]”);
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("body [id!=header]").css("background-color","#B2E0FF");
});
</script>
</head>
<body>
<h1 id="header">欢迎光临我的网站主页</h1>
<p class="intro">网站管理员介绍</p>
<p>姓名：沐曦</p>
<p>性别：女</p>
<div id="choose">
兴趣爱好：
<ul>
<li>读书</li>
<li>听音乐</li>
<li>跑步</li>
</ul>
</div>
</body>
</html>
网页显示效果为：图16
在此段代码中，我犯了一个错误：
$(“body [id!=header]”).css(“background-color”,"#B2E0FF");
body和[id!=header]之间一定要有空格，没有空格就会出现错误。
[attribute$ = value]选择器选取每个带有指定属性且以指定字符串结尾的元素。
例：选择所有带有id属性且属性值以header结尾的元素。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("[id$=header]").css("background-color","#B2E0FF");
});
</script>
</head>
<body>
<h1 id="header">欢迎光临我的网站主页</h1>
<p class="intro">网站管理员介绍</p>
<p>姓名：沐曦</p>
<p>性别：女</p>
<div id="choose">
兴趣爱好：
<ul>
<li>读书</li>
<li>听音乐</li>
<li>跑步</li>
</ul>
</div>
</body>
</html>
在网页中显示的效果为：图17
实例：匹配表单中的元素并实现不同的操作
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(":checkbox").attr("checked","checked");
$(":radio").attr("checked","true");
$(":image").attr("src","images/demo1.jpg");
$(":file").hide();
$(":password").val("123");
$(":text").val("文本框");
$(":button").attr("disabled","disabled");
$(":reset").val("重置按钮");
$(":submit").val("提交按钮");
$("#testDiv").append($("input:hidden:eq(1)").val());
});
</script>
</head>
<body>
<form>
复选框：<input type="checkbox"/>
单选按钮：<input type="radio"/>
图形域：<input type="image"/><br>
文件域：<input type="file"/><br>
密码域：<input type="password" width="150px"/><br>
文本框：<input type="text" width="150px"/><br>
按钮：<input type="button" value="按钮"/><br>
重置：<input type="reset" value=""/><br>
提交：<input type="hidden" value="这是隐藏的元素"/>
隐藏域：<input type="checkbox"/>
<div id="testDiv"><font color="blue">隐藏域的值：</font></div>
</form>
</body>
</html>
网页显示效果为：图18
jQuery控制页面
jQuery提供了text（）和text（val）两种方法，用于对文件内容进行操作，主要作用是设置或返回所选元素的文本内容。其中，text（）用来
获取全部匹配元素的文本内容；text（val）方法用来设置全部匹配元素的文本内容。
- text()方法获取文本信息：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
alert("文本内容为：" + $("p").text());
})
});
</script>
</head>
<body>
<p id="test">山有木兮木有枝</p>
<button id="btn1">获取文本内容</button>
</body>
</html>
重点是获取p标签的内容，注意代码是：
alert(“文本内容为：” + $(“p”).text());
网页显示效果为：图19
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text("心悦君兮君不知");
})
});
</script>
</head>
<body>
<p id="test1">山有木兮木有枝</p>
<button id="btn1">修改文本内容</button>
</body>
</html>
点击按钮之后，文本信息就会发生改变：
效果如下：图20
-
html（方法获取信息）
与text（）方法一致，使用方法也相同 -
移动和赋值页面的内容：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
// $("<b>，蝶恋花。</b>").append("$p");
$("p").append("<b>，蝶恋花。</b>");
})
});
</script>
</head>
<body>
<p>山有木兮木有枝</p>
<p>心悦君兮君不知</p>
<button>每个p元素都添加</button>
</body>
</html>
在写代码的时候，出现了一次错误：
$("<b>，蝶恋花。</b>").append("$p"); //错误
$("p").append("<b>，蝶恋花。</b>");
第一句是错误代码，第二句才是正确的，所以正确的引用append方法正确的顺序为：先写p标签，再添加信息。
- 删除页面的内容：
$("p").remove();
调用remove()方法即可。
- 克隆页面内容：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("body").append($("p:first").clone(true));
});
});
</script>
</head>
<body>
<p>山有木兮木有枝</p>
<button>克隆内容</button>
</body>
</html>
点击克隆内容三次之后的效果：图21
- 对标记的属性进行操作
获取属性的值：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
alert("图片高度为：" + $("img").prop("height"));
});
});
</script>
</head>
<body>
<img src="images/demo1.jpg"/>
<button>查看图片的高度</button>
</body>
</html>
网页显示的效果为：图22
-
设置属性的值：prop(name,value);
例：prop(“width”,“30”); -
删除属性的值：
例：
$(“p”).removeAttr(“style”); //删除所有p元素的style的值。 -
对表单元素进行操作：
获取表单元元素的值：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
alert("最后一个属性的值为：" + $("input:last").val());
});
});
</script>
</head>
<body>
<div>
<input type="text" name="fname" id="fname" value="123" /><br><br>
<input type="text" name="lname" id="lname" value="234" />
</div>
<br>
<button>获取属性的值</button>
</body>
</html>
网页显示效果为：
图23
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("input:last").val("789");
});
});
</script>
</head>
<body>
<div>
<input type="text" name="fname" id="fname" value="123" /><br><br>
<input type="text" name="lname" id="lname" value="234" />
</div>
<br>
<button>改变表单元素的值</button>
</body>
</html>
网页显示效果为：图24
- 对元素的CSS样式进行操作
addClass()方法主要是向被选元素添加一个或多个类。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
});
</script>
<style type="text/css">
.important{
font-size: xx-large;
font-weight: bold;
}
.blue{
color: blue;
}
</style>
</head>
<body>
<h1>一生</h1>
<h2>这一生都是想做一件自己不会后悔的事</h2>
<p>但是这件事却十分的难</p>
<p>难到最后回忆竟只剩悔恨</p>
<div>自己却无法做到让自己舒心</div>
<br>
<button>向元素添加CSS类</button>
</body>
</html>
网页显示效果：
未点击之前：图25
点击“向元素添加CSS类”之后：图26
也可以对一个元素设置两个CSS，如：
$(“div”).addClass(“important blue”);
这样div元素就会有多个CSS属性了
- 删除CSS类：
$(“h1,h2,p”).removeClass(“important blue”); - 获取和设置CSS样式：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
alert("第一个p元素的颜色为：" + $("p:first").css("color"));
});
});
</script>
<style type="text/css">
.important{
font-size: xx-large;
font-weight: bold;
}
.blue{
color: blue;
}
</style>
</head>
<body>
<h1 class="blue">一生</h1>
<h2 class="blue">这一生都是想做一件自己不会后悔的事</h2>
<p style="color: red;">但是这件事却十分的难</p>
<p class="blue">难到最后回忆竟只剩悔恨</p>
<div class="important">自己却无法做到让自己舒心</div>
<br>
<button>获取样式CSS类</button>
</body>
</html>
网页显示效果为：图27
实例：制作奇偶变色的表格
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('tr:odd').addClass('odd');
$('tr:even').addClass('even');
});
</script>
<style type="text/css">
#hacker td:hover{
background-color: palevioletred; /*使用CSS伪类实现鼠标移入行变色的效果*/
}
.odd{
background-color: #ffc;
}
.even{
background-color: #cef;
}
</style>
</head>
<body>
<table width="182" height="164" border="3" id="hacker">
<tr>
<td>商品名称</td>
<td>销量</td>
</tr>
<tr>
<td>香水</td>
<td>123</td>
</tr>
<tr>
<td>洗发水</td>
<td>230</td>
</tr>
<tr>
<td>眼影</td>
<td>90</td>
</tr>
<tr>
<td>身体乳</td>
<td>45</td>
</tr>
<tr>
<td>沐浴露</td>
<td>78</td>
</tr>
<tr>
<td>面膜</td>
<td>40</td>
</tr>
<tr>
<td>腮红</td>
<td>330</td>
</tr>
<tr>
<td>粉底</td>
<td>60</td>
</tr>
</table>
</body>
</html>
网页显示效果为：
图28
jQuery的动画特效
jQuery提供了两种显示与隐藏元素的方法：一个是分别显示和隐藏网页元素；二是切换显示与隐藏元素。
hide()来隐藏匹配元素。hide()方法相当于将元素的CSS样式属性的display设置为none。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>如果点击我，我就会消失</p>
<p>如果点击我，我也会消失</p>
<p>如果点击我，我也会消失哦</p>
</body>
</html>
网页显示效果为：
原图为：图29
点击其中一句话之后：图30
hide()方法还可以实现内容中的部分隐藏。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".hide").click(function(){
$(".ex").hide();
});
});
</script>
</head>
<body>
<div class="ex">
如果点击我，就会消失
</div>
<p>内容信息如下：</p>
<div class="ex">
如果点击我，就会消失
</div>
<button class="hide">隐藏</button>
</body>
</html>
网页显示效果为：
点击之后的效果为：图31
设置隐藏参数：
$(".ex").hide(“3000”);
加入参数之后，隐藏时就会有动画效果。
- 显示元素：
使用show()方法可以显示匹配的网页元素。show()方法有两种语法格式：一是不带参数的形式；二是带有参数的形式。
不带参数，即直接使用show()
带参数例如想要显示页面中的所有文本元素，就可以使用 $(“p”).show()；
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".show").click(function(){
$(".ex").show("3000");
});
$(".hide").click(function(){
$(".ex").hide("3000");
});
});
</script>
</head>
<body>
<div>
显示信息：
</div>
<p>内容信息如下：</p>
<div class="ex" style="display: none;">
*机密文件
</div>
<button class="show">显示</button>
<button class="hide">隐藏</button>
</body>
</html>
网页显示效果为：
原图：
点击显示之后：图32
点击隐藏之后就会隐藏文本元素，和原图一致。
带有参数的格式：
用来实现以优雅的动画方式显示网页中的元素，并在隐藏完成后可选择地触发一个回调函数。
speed：规定显示的速度，可以取slow、fast或毫秒等参数。
callback：规定显示完成后执行的函数名称。
- 状态切换：
使用toggle（）方法可以切换元素的可见（显示、隐藏）状态。即当元素为显示状态时，使用toggle（）方法可以将其隐藏起来，反之则显示。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".toggle").click(function(){
$(".ex").toggle("3000");
});
});
</script>
</head>
<body>
<div>
显示信息：
</div>
<p>内容信息如下：</p>
<div class="ex" style="display: none;">
*机密文件
</div>
<button class="toggle">点击</button>
</body>
</html>
网页显示效果为：
原图：
信息是隐藏的，所以点击按钮之后，就会在网页中显示：图33
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn("3000");
});
});
</script>
</head>
<body>
<p>以不同参数方式淡入网页元素</p>
<button>单击按钮</button><br><br>
<div id="div1" style="width: 80px;height: 80px;display: none;background-color: red;"></div><br>
<div id="div2" style="width: 80px;height: 80px;display: none;background-color: green ;"></div><br>
<div id="div3" style="width: 80px;height: 80px;display: none;background-color: blue;"></div><br>
</body>
</html>
div开始是隐藏的，点击了按钮之后，就会显示出。三个div的显示方法是不一样的。图34
淡出可见元素：
fadeOut()是通过减小不透明度来实现匹配元素淡出（隐藏）效果的方法。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut("3000");
});
});
</script>
</head>
<body>
<p>以不同参数方式淡入网页元素</p>
<button>单击按钮</button><br><br>
<div id="div1" style="width: 80px;height: 80px;background-color: red;"></div><br>
<div id="div2" style="width: 80px;height: 80px;background-color: green ;"></div><br>
<div id="div3" style="width: 80px;height: 80px;background-color: blue;"></div><br>
</body>
</html>
网页显示效果为：图35
切换淡入淡出效果：
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle("3000");
});
});
淡入淡出元素至指定参数值：
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeTo("solw",0.15);
$("#div2").fadeTo("solw",0.4);
$("#div3").fadeTo("solw",0.7);
});
});
网页显示效果为：图36
- 滑动效果：
jQuery中用于创建滑动效果的方法有：
slideDown()
slideUp()
slideToggle()
slideDown()例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").slideDown("solw");
});
});
</script>
</head>
<body>
<p style="display: none;">陌上人如玉</p>
<button>单击按钮</button><br><br>
</body>
</html>
网页显示效果为：图37
slideUp()方法是一致的。
slideToggle()方法是通过高度的变化动态切换元素的可见性，即隐藏就显示，反之则隐藏。
- 自定义动画效果：
在jQuery中，主要使用animate()方法创建自定义动画，使用stop()方法停止动画。
使用animate（）方法创建自定义动画的方法更加*，可以随意控制元素的元素，实现更加绚丽的动画效果。
语法格式：
$(selector).animate({parms},speed,callback);
参数：
params：定义形成动画的CSS属性。
speed：规定效果的时长，可以取slow、fast或毫秒等参数。
callback：动画完成后所执行的函数名称。
注：在默认情况下，所有HTML元素都有一个静态位置，且无法移动。如果需要对位置进行操作，要记得首先把元素的CSS
position属性设置为：relative、fixed或absolute。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
var div = $("div");
div.animate({left:'100px'},"6000");
div.animate({fontSize:'3em'},"slow",callback());
});
});
function callback(){
alert("移动结束，开始改变字体大小");
}
</script>
</head>
<body>
<button>开始动画</button><br><br>
<div style="background: blueviolet;height: 100px;width: 200px;position: absolute;">Hello</div>
</body>
</html>
网页显示效果为：图38
一定要注意每一个函数使用的时候的格式。
- 停止动画：
stop（）
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".start").click(function(){
var div=$("div");
div.animate({left:'200px'},"slow");
});
$(".stop").click(function(){
var div=$("div");
div.stop();
});
});
</script>
</head>
<body>
<button class="start">开始动画</button><br><br>
<button class="stop">停止动画</button><br><br>
<div style="background: blueviolet;height: 100px;width: 200px;position: absolute;">Hello</div>
</body>
</html>
网页显示效果为：图39
上一篇： haproxy负载均衡部署
下一篇： JS高级（2）——函数高级