JS入门到精通 第19章 jQuery技术
导读：一、练习 1. 练习1 （1）源代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ID选择器的示例</title>...
一、练习
1. 练习1
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ID选择器的示例</title>
<script type="text/javascript" src="JS/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input[type='button']").click(function(){ //为按钮绑定单击事件
var inputValue = $("#testInput").val(); //获取文本输入框的值
alert(inputValue);
});
});
</script>
</head>
<body>
<input type="text" id="testInput" name="test" value=""/>
<input type="button" value="输入的值为"/>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/19_1/
（3）Tips
src="JS/jquety.min.js"
$(document).ready(function(){});
$("input[type='button']").click(function(){});
var inputValue=$("#testInput").val();
2. 练习2
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素选择器的示例</title>
<style type="text/css">
img{
border:1px solid #777;
}
div{
padding:5px;
font-size:12px;
}
</style>
<script type="text/javascript" src="JS/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input[type='button']").click(function(){ //为按钮绑定单击事件
$("div").eq(0).html("<img src='images/strawberry1.jpg'/>这里长出了一片草莓"); //获取第一个div元素
$("div").get(1).innerHTML="<img src='images/fish1.jpg'/>这里的鱼没有了"; //获取第二个div元素
});
});
</script>
</head>
<body>
<div><img src="images/strawberry.jpg"/>这里种植了一棵草莓</div>
<div><img src="images/fish.jpg"/>这里养殖了一条鱼</div>
<input type="button" value="若干年后" />
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/19_2/
（3）Tips
$(document).ready(function(){});
$("input[type='button']").click(function(){});
$("div").eq(0).html("");
$("div").get(1).innerHTML="";
3. 练习3
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>类名选择器的示例</title>
<style type="text/css">
div{
border:1px solid #003a75;
background-color:#cef;
margin:5px;
width:75px;
height:35px;
float:left;
font-size:12px;
padding:5px;
}
</style>
<script type="text/javascript" src="JS/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var myClass = $(".myClass"); //选取Dom元素
myClass.css("background-color","#C50210"); //为选取的Dom元素设置背景颜色
myClass.css("color","#FFF"); //为选取的Dom元素设置文字颜色
});
</script>
</head>
<body>
<div>注意观察我的样式</div>
<div>我的样式是默认的</div>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/19_3/
（3）Tips
$(document).ready(function(){});
$(".myclass");
myClass.css=("color","#FFF");
4. 练习4
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>复合选择器的示例</title>
<style type="text/css">
.default{
border:1px solid #003a75;
background-color:yellow;
margin:5px;
width:90px;
float:left;
font-size:12px;
padding:5px;
}
.change{
background-color:#C50210;
color:#FFF;
}
</style>
<script type="text/javascript" src="JS/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("input[type=button]").click(function(){ //绑定按钮的单击事件
$("div,#span").addClass("change"); //添加所使用的CSS类
});
});
</script>
</head>
<body>
<p>p元素</p>
<div>div元素</div>
<span id="span">ID为span的元素</span>
<input type="button" value="为div元素和ID为span的元素换肤" />
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/19_4/
（3）Tips
$("div,#span").addClass("change");
5. 练习5
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ancestor descendant选择器的示例</title>
<style type="text/css">
body{
margin:0px;
}
#bottom{
background-image:url(images/bg_bottom.jpg); /*设置背景*/
width:800px; /*设置宽度*/
height:58px; /*设置高度*/
clear: both; /*设置左右两侧无浮动内容*/
text-align:center; /*设置居中对齐*/
padding-top:10px; /*设置顶边距*/
font-size:9pt; /*设置字体大小*/
}
.copyright{
color:#FFFFFF; /*设置文字颜色*/
list-style:none; /*不显示项目符号*/
line-height:20px; /*设置行高*/
}
</style>
<script type="text/javascript" src="JS/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div ul").addClass("copyright"); //为div元素的子元素ul添加样式
});
</script>
</head>
<body>
<div id="bottom">
<ul>
<li>技术服务热线：400-675-1066 传真：0431-84972266 企业邮箱：mingrisoft@mingrisoft.com</li>
<li>Copyright © www.mrbccd.com All Rights Reserved! </li>
</ul>
</div>
<ul>
<li>技术服务热线：400-675-1066 传真：0431-84972266 企业邮箱：mingrisoft@mingrisoft.com</li>
<li>Copyright © www.mrbccd.com All Rights Reserved! </li>
</ul>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/19_5/
（3）Tips
父元素子元素。
6. 练习6
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>parent > child选择器的示例</title>
<style type="text/css">
input{
margin:5px; /*设置input元素的外边距为5像素*/
}
.input {
font-size: 12pt; /*设置文字大小*/
color: #333333; /*设置文字颜色*/
background-color:#cef; /*设置背景颜色*/
border: 1px solid #000000; /*设置边框*/
}
</style>
<script type="text/javascript" src="JS/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#change").click(function(){ //绑定"换肤"按钮的单击事件
$("form>input").addClass("input"); //为表单元素的直接子元素input添加样式
});
$("#default").click(function(){ //绑定“恢复默认”按钮的单击事件
$("form>input").removeClass("input"); //移除为表单元素的直接子元素input添加的样式
});
});
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
姓  名：<input type="text" name="name" id="name" />
<br />
籍  贯：<input name="native" type="text" id="native" />
<br />
生  日：<input type="text" name="birthday" id="birthday" />
<br />
E-mail：<input type="text" name="email" id="email" />
<br />
<span>
<input type="button" name="change" id="change" value="换肤"/>
</span>
<input type="button" name="default" id="default" value="恢复默认"/>
<br />
</form>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/19_6/
（3）Tips
child选择器。
$("form>input").removeClasss("input");
7. 练习7
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>prev + next选择器的示例</title>
<style type="text/css">
.background{background:#cef}
body{font-size:12px;}
</style>
<script type="text/javascript" src="JS/jquery-3.5.1.min.js"></script>
<script type="text/javascript" charset="GBK">
$(document).ready(function() {
$("label+p").addClass("background");
});
</script>
</head>
<body>
<div>
<label>第一个label</label>
<p>第一个p</p>
<fieldset>
<label>第二个label</label>
<p>第二个p</p>
</fieldset>
</div>
<p>div外面的p</p>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/19_7/
（3）Tips
仅仅相邻。
label，给input定位。
fieldlist给表单分组。
8. 练习8
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>prev ~ siblings选择器的示例</title>
<style type="text/css">
body{font-size:12px;}
.background{background:#cef}
</style>
<script type="text/javascript" src="JS/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div~p").addClass("background");
});
</script>
</head>
<body>
<div>
<p>第一个p</p>
<p>第二个p</p>
</div>
<p>div外面的p</p>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/19_8/
（3）Tips
siblings。$("div~p")
9. 练习9
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>隔行换色的表格</title>
<style type="text/css">
table{ border:0;border-collapse:collapse;} /*设置表格整体样式*/
td{font:normal 12px/17px Arial;padding:2px;width:100px;} /*设置单元格的样式*/
th{ /*设置表头的样式*/
font:bold 12px/17px Arial;
text-align:left;
padding:4px;
border-bottom:1px solid #333;
}
.odd{background:#cef;} /*设置奇数行样式*/
.even{background:#ffc;} /*设置偶数行样式*/
.light{background:#00A1DA;} /*设置鼠标移到行的样式*/
</style>
<script type="text/javascript" src="JS/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("tbody tr:even").addClass("odd"); //为偶数行添加样式
$("tbody tr:odd").addClass("even"); //为奇数行添加样式
$("tbody tr").hover( //为表格主体每行绑定hover方法
function() {$(this).addClass("light");},
function() {$(this).removeClass("light");}
);
});
</script>
</head>
<body>
<table>
<thead>
<tr>
<th>产品名称</th>
<th>产地</th>
<th>厂商</th>
</tr>
</thead>
<tbody>
<tr>
<td>爱美电视机</td>
<td>福州</td>
<td>爱美电子</td>
</tr>
<tr>
<td>美好微波炉</td>
<td>北京</td>
<td>美好集团</td>
</tr>
<tr>
<td>理想电脑</td>
<td>沈阳</td>
<td>理想科技</td>
</tr>
<tr>
<td>编程词典</td>
<td>长春</td>
<td>明日科技</td>
</tr>
</tbody>
</table>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/19_9/
（3）Tips
后代选择器，不管隔了多少层。
$("tbody tr").hover(
function() {$(this).addClass("light");},
function() {$(this).removeClass("light");}
);
odd奇，even偶。
10. 练习10
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单过滤器的示例</title>
<style type="text/css">
td{
font-size:12px; /*设置单元格的样式*/
padding:3px; /*设置内边距*/
}
.th{
background-color:#B6DF48; /*设置背景颜色*/
font-weight:bold; /*设置文字加粗显示*/
text-align:center; /*文字居中对齐*/
}
.even{
background-color:#E8F3D1; /*设置偶数行的背景颜色*/
}
.odd{
background-color:#F9FCEF; /*设置奇数行的背景颜色*/
}
</style>
<script type="text/javascript" src="JS/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("tr:odd").addClass("odd"); //设置奇数行所用的CSS类
$("tr:even").addClass("even"); //设置偶数行所用的CSS类
$("tr:first").removeClass("odd"); //移除even类
$("tr:first").addClass("th"); //添加th类
});
</script>
</head>
<body>
<table width="98%" border="0" cellpadding="0" cellspacing="1" bgcolor="#3F873B">
<tr>
<td width="11%" height="27">编号</td>
<td width="14%">祝福对象</td>
<td width="12%">祝福者</td>
<td width="33%">字条内容</td>
<td width="30%">发送时间</td>
</tr>
<tr>
<td height="27">1</td>
<td>琦琦</td>
<td>妈妈</td>
<td>愿你健康快乐的成长！</td>
<td>2021-03-05 13:06:06</td>
</tr>
<tr>
<td height="27">2</td>
<td>wgh</td>
<td>无语</td>
<td>每天有份好心情！</td>
<td>2021-03-05 13:26:17</td>
</tr>
<tr>
<td height="27">3</td>
<td>天净沙小晓</td>
<td>wgh</td>
<td>煮豆燃豆萁，豆在釜中泣。本是同根生，相煎何太急。</td>
<td>2021-03-05 13:36:06</td>
</tr>
<tr>
<td height="27">4</td>
<td>明日科技</td>
<td>wgh</td>
<td>明天会更好！</td>
<td>2021-03-05 13:46:06</td>
</tr>
</table>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/19_10/
（3）Tips
后代选择器，不管隔了多少层。
$("tr:odd")， $("tr:first")。
11. 练习11
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内容过滤器的示例</title>
<style type="text/css">
td{
font-size:12px; /*设置单元格的样式*/
padding:3px; /*设置内边距*/
background-color:white; /*设置背景颜色*/
}
</style>
<script type="text/javascript" src="JS/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("td:parent").css("background-color","#E8F3D1"); //为不为空的单元格设置背景颜色
$("td:empty").html("暂无内容"); //为空的单元格添加默认内容
$("td:contains('wgh')").css("color","red"); //将含有文本wgh的单元格的文字颜色设置为红色
});
</script>
</head>
<body>
<table width="98%" border="0" cellpadding="0" cellspacing="1" bgcolor="#3F873B">
<tr>
<td width="11%" height="27">编号</td>
<td width="14%">祝福对象</td>
<td width="12%">祝福者</td>
<td width="33%">字条内容</td>
<td width="30%">发送时间</td>
</tr>
<tr>
<td height="27">1</td>
<td>琦琦</td>
<td>妈妈</td>
<td>愿你健康快乐的成长！</td>
<td>2021-03-05 13:06:06</td>
</tr>
<tr>
<td height="27">2</td>
<td>wgh</td>
<td>无语</td>
<td>每天有份好心情！</td>
<td>2021-03-05 13:26:17</td>
</tr>
<tr>
<td height="27">3</td>
<td>天净沙小晓</td>
<td>wgh</td>
<td>煮豆燃豆萁，豆在釜中泣。本是同根生，相煎何太急。</td>
<td>2021-03-05 13:36:06</td>
</tr>
<tr>
<td height="27">4</td>
<td>明日科技</td>
<td>wgh</td>
<td></td>
<td>2021-03-05 13:46:06</td>
</tr>
</table>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/19_11/
（3）Tips
$("tr:parent)， $("tr:empty")，$("tr:contains('wgh')") ，内容过滤器。
12. 练习12
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>可见性过滤器的示例</title>
<script type="text/javascript" src="JS/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var visibleVal = $("input:visible").val(); //取得显示的input的值
var hiddenVal1 = $("input:hidden:eq(0)").val(); //取得隐藏的input的值
var hiddenVal2 = $("input:hidden:eq(1)").val(); //取得隐藏的input的值
alert(visibleVal+"\n\r"+hiddenVal1+"\n\r"+hiddenVal2); //alert取得的信息
});
</script>
</head>
<body>
<input type="text" value="显示的input元素">
<input type="text" value="我是不显示的input元素" style="display:none">
<input type="hidden" value="我是隐藏域">
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/19_12/
（3）Tips
$("input:visible)， $("input:hidden:eq(0)") ，可见性过滤器。
type="hedden" display=none。
13. 练习13
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单对象的属性过滤器的示例</title>
<script type="text/javascript" src="JS/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("input:checked").css("display","none");//隐藏选中的复选框
$("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"/><br />
不可用按钮： <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>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/19_13/
（3）Tips
$("input:checked).css("display","none")， $("input:disabled").val("") 。
$("select option:selected").val 。
14. 练习14
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单选择器的示例</title>
<script type="text/javascript" src="JS/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(":checkbox").attr("checked","checked"); //选中复选框
$(":radio").attr("checked","true"); //选中单选框
$(":image").attr("src","images/fish1.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"/><br>
图像域：<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="submit" value=""><br>
隐藏域： <input type="hidden" value="这是隐藏的元素">
<div id="testDiv"><font color="blue">隐藏域的值：</font></div>
</form>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/19_14/
（3）Tips
$(":checkbox).attr("checked","checked")，
$(":radio").attr("checked","true")
$(":file").hide
$("#testDiv").appand($("input:hidden:eq(1)").val());
15. 练习15
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>对元素内容操作的示例</title>
<style>
body{
font-size:12px;
}
</style>
<script type="text/javascript" src="JS/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#div1").text("<span style='color:#FF0000'>我是通过text()方法设置的HTML内容</span>");
$("#div2").html("<span style='color:#FF0000'>我是通过html()方法设置的HTML内容</span>");
});
</script>
</head>
<body>
应用text()方法设置的内容
<div id="div1">
<span id="clock">当前时间：2021-03-03 星期三 13:20:10</span>
</div>
<br />应用html()方法设置的内容
<div id="div2">
<span id="clock">当前时间：2021-03-03 星期三 13:20:10</span>
</div>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/19_15/
（3）Tips
$("#div1").text("")，$("#div1").html("")
16. 练习16
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>对元素值操作的示例</title>
<style>
body{
font-size:12px;
}
</style>
<script type="text/javascript" src="JS/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select").val(['列表项1','列表项2']);
alert($("select").val());
});
</script>
</head>
<body>
<select name="like" size="3" multiple="multiple" id="like">
<option>列表项1</option>
<option selected="selected">列表项2</option>
<option selected="selected">列表项3</option>
</select>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/19_16/
（3）Tips
$("select").val(['列表项1','列表项2'])；
$("select").val()
17. 练习17
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的开心小农场</title>
<style>
div{
font-size:12px;
border:#999 1px solid;
padding:5px;
}
#bg{ /*控制页面背景*/
width:456px;
height:266px;
background-image:url(images/plowland.jpg);
}
img{ /*控制图片*/
position:absolute;
top:85px;
left:195px;
}
#seed{ /*控制播种按钮*/
background-image:url(images/btn_seed.png);
width:56px;
height:56px;
position:absolute;
top:229px;
left:49px;
cursor:pointer;
}
#grow{ /*控制生长按钮*/
background-image:url(images/btn_grow.png);
width:56px;
height:56px;
position:absolute;
top:229px;
left:154px;
cursor:wait;
}
#bloom{ /*控制开花按钮*/
background-image:url(images/btn_bloom.png);
width:56px;
height:56px;
position:absolute;
top:229px;
left:259px;
cursor:move;
}
#fruit{ /*控制结果按钮*/
background-image:url(images/btn_fruit.png);
width:56px;
height:56px;
position:absolute;
top:229px;
left:368px;
cursor:not-allowed;
}
</style>
<script src="JS/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#seed").bind("click",function(){ //绑定“播种”按钮的单击事件
$("img").remove(); //移除img元素
$("#bg").prepend("<img src='images/seed.png' />");
});
$("#grow").bind("click",function(){ //绑定“生长”按钮的单击事件
$("img").remove(); //移除img元素
$("#bg").append("<img src='images/grow.png' />");
});
$("#bloom").bind("click",function(){ //绑定“开花”按钮的单击事件
$("img").replaceWith("<img src='images/bloom.png' />");
});
$("#fruit").bind("click",function(){ //绑定“结果”按钮的单击事件
$("<img src='images/fruit.png' />").replaceAll("img");
});
});
</script>
</head>
<body>
<div id="bg">
<span id="seed">11</span>
<span id="grow">22</span>
<span id="bloom">33</span>
<span id="fruit">44</span>
</div>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/19_17/
（3）Tips
$("img").remove()；
$("#bg").prepend("<img src=''>")
$("grow").bind("click",function(){})
$("img").replaceWith()
$("<img src=''>").replaceAll("img")
cursor:pointer waite move not-allowed。
18. 练习18
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模拟用户的操作触发事件</title>
<script type="text/javascript" src="JS/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("input:button").bind("click",function(event,msg1,msg2){
alert(msg1+msg2); //弹出提示对话框
}).trigger("click",["欢迎访问","明日科技"]); //页面加载触发单击事件
});
</script>
</head>
<body>
<input type="button" name="button" id="button" value="普通按钮" />
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/19_18/
（3）Tips
trigger，触发。
$("input:button").bind("click",function(event,msg1,msg2)
{ }
).trigger("click",["",""])
19. 练习19
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
.redBorder{
border:2px solid red;
}
.test1{
width:240px;
height:150px;
background-color:#3493B9;
text-align:center;
padding:3px 0px;
}
.test2{
width:160px;
height:100px;
background-color:#47BAE7;
text-align:center;
line-height:20px;
margin:10px auto;
}
span{
width:100px;
height:35px;
background-color:#fff;
padding:20px 20px 20px 20px;
}
body{
font-size:12px;
}
</style>
<title>展示事件冒泡</title>
<script type="text/javascript" src="JS/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".test1").mouseover(function(event){
$(".test1").addClass("redBorder");
event.stopPropagation(); //阻止事件冒泡
});
$(".test1").mouseout(function(event){
$(".test1").removeClass("redBorder");
});
$(".test2").mouseover(function(event){
$(".test2").addClass("redBorder");
event.stopPropagation(); //阻止事件冒泡
});
$(".test2").mouseout(function(event){
$(".test2").removeClass("redBorder");
});
$("span").mouseover(function(event){
$("span").addClass("redBorder");
event.stopPropagation(); //阻止事件冒泡
});
$("span").mouseout(function(event){
$("span").removeClass("redBorder");
});
});
</script>
</head>
<body>
<div>
<b>div元素</b>
<p>
<b>p元素</b><br/><br/>
<span><b>span元素</b></span>
</p>
</div>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/19_19/
（3）Tips
冒泡事件，捕获事件
mouseover，mouseout
propagation，传播
event.stopPropagation。
20. 练习20
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自动隐藏式菜单</title>
<style type="text/css">
ul{
font-size:12px;
list-style:none; /*不显示项目符号*/
margin:0px; /*设置外边距*/
padding:0px; /*设置内边距*/
}
li{
padding:7px; /*设置内边距*/
}
a{
color:#000; /*设置文字的颜色*/
text-decoration: none; /*不显示下划线*/
}
a:hover{
color:#F90; /*设置文字的颜色*/
}
#menu{
float:left; /*浮动在左侧*/
text-align:center; /*文字水平居中显示*/
width:70px; /*设置宽度*/
height:295px; /*设置高度*/
padding-top:5px; /*设置顶内边距*/
display:none; /*显示状态为不显示*/
background-image:url(images/menu_bg.gif); /*设置背景图片*/
}
</style>
<script type="text/javascript" src="JS/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#box").hover(function(){
$("#menu").show(300); //显示菜单
},function(){
$("#menu").hide(3000); //隐藏菜单
});
});
</script>
</head>
<body>
<span id="box">
<img src="images/title.gif" width="30" height="80" id="flag" />
<div id="menu">
<ul>
<li><a href="#">图书介绍</a></li>
<li><a href="#">新书预告</a></li>
<li><a href="#">图书销售</a></li>
<li><a href="#">勘误发布</a></li>
<li><a href="#">资料下载</a></li>
<li><a href="#">好书推荐</a></li>
<li><a href="#">技术支持</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
</span>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/19_20/
（3）Tips
$("#box").hover(function(){},function(){});
$("#box").show(300)
这个完成动画时间怎么回事。
21. 练习21
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伸缩式导航菜单</title>
<script type="text/javascript" src="JS/jquery-3.5.1.min.js"></script>
<style type="text/css">
dl {
width: 158px;
margin:0px;
}
dt {
font-size: 14px;
padding: 0px;
margin: 0px;
width:146px; /*设置宽度*/
height:19px; /*设置高度*/
background-image:url(images/title_show.gif); /*设置背景图片*/
padding:6px 0px 0px 12px;
color:#215dc6;
font-size:12px;
cursor:pointer;
}
dd{
color: #000;
font-size: 12px;
margin:0px;
}
a {
text-decoration: none; /*不显示下划线*/
}
a:hover {
color: #FF6600;
}
#top{
width:158px; /*设置宽度*/
height:30px; /*设置高度*/
background-image:url(images/top.gif); /*设置背景图片*/
}
#bottom{
width:158px; /*设置宽度*/
height:31px; /*设置高度*/
background-image:url(images/bottom.gif); /*设置背景图片*/
}
.title{
background-image:url(images/title_quit.gif); /*设置背景图片*/
}
.item{
width:146px; /*设置宽度*/
height:15px; /*设置高度*/
background-image:url(images/item_bg.gif); /*设置背景图片*/
padding:6px 0px 0px 12px;
color:#215dc6;
font-size:12px;
cursor:pointer;
background-position:center;
background-repeat:no-repeat;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("dd").hide(); //隐藏全部子菜单
$("dt[class!='title']").click(function(){ //单击主菜单执行函数
if($(this).next().is(":hidden")){ //如果匹配的元素被隐藏
$(this).css("backgroundImage","url(images/title_hide.gif)");//改变主菜单的背景
$(this).next().slideDown("slow"); //滑动显示匹配的元素
}else{
$(this).css("backgroundImage","url(images/title_show.gif)");//改变主菜单的背景
$(this).next().slideUp("slow"); //滑动隐藏匹配的元素
}
});
});
</script>
</head>
<body>
<div id="top">111</div>
<dl>
<dt>员工管理</dt>
<dd>
<div>添加员工信息</div>
<div>管理员工信息</div>
</dd>
<dt>招聘管理</dt>
<dd>
<div>浏览应聘信息</div>
<div>添加应聘信息</div>
<div>浏览人才库</div>
</dd>
<dt>薪酬管理</dt>
<dd>
<div>薪酬登记</div>
<div>薪酬调整</div>
<div>薪酬查询</div>
</dd>
<dt><a href="#">退出系统</a></dt>
</dl>
<div id="bottom">222</div>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/19_21/
（3）Tips
dt和dd是平级。
dt[class!='title']
$(this).next().is(":hidden")
.slideDown("slow")
.slideUp()
22. 练习22
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>幕帘效果</title>
</head>
<script type="text/javascript" src="JS/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var curtainopen = false;//定义布尔型变量
$(".rope").click(function(){//当单击超链接时
$(this).blur();//使超链接失去焦点
if (curtainopen == false){ //判断变量值是否为false
$(this).text("关闭幕帘");//设置超链接文本
$(".leftcurtain").animate({width:'60px'}, 2000 );//设置左侧幕帘动画
$(".rightcurtain").animate({width:'60px'},2000 );//设置右侧幕帘动画
curtainopen = true;//变量值设为true
}else{
$(this).text("拉开幕帘"); //设置超链接文本
$(".leftcurtain").animate({width:'50%'}, 2000 );//设置左侧幕帘动画
$(".rightcurtain").animate({width:'51%'}, 2000 );//设置右侧幕帘动画
curtainopen = false;//变量值设为false
}
});
});
</script>
<style type="text/css">
*{
margin:0;
padding:0;
}
body {
color: #FFFFFF;
text-align: center;
background: #4f3722 url('images/darkcurtain.jpg') repeat-x;
}
img{
border: none;
}
p{
margin-bottom:10px;
color:#FFFFFF;
}
.leftcurtain{
width: 50%;
height: 495px;
top: 0px;
left: 0px;
position: absolute;
z-index: 2;
}
.rightcurtain{
width: 51%;
height: 495px;
right: 0px;
top: 0px;
position: absolute;
z-index: 3;
}
.rightcurtain img, .leftcurtain img{
width: 100%;
height: 100%;
}
.rope{
position: absolute;
top: 70%;
left: 60%;
z-index: 100;
font-size:36px;
color:#FFFFFF;
}
</style>
</head>
<body>
欢迎光临奥纳影城<hr />
<div><img src="images/frontcurtain.jpg"/></div>
<div><img src="images/frontcurtain.jpg"/></div>
<a href="#">拉开幕帘</a>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/19_22/
（3）Tips
$(this).blur()。
$(this).text("")
$(.leftcurtain).animate({width:'60dx'},2000)
挺强大。
二、编程训练
1. 训练1
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
<script type="text/javascript" src="JS/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("li,div.hot").css("color","#FF0000");
});
</script>
</head>
<body>
<div>金庸武侠小说系列</div>
<ul>
<li>射雕英雄传</li>
<li>白马啸西风</li>
<li>鹿鼎记</li>
</ul>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/19_23/
（3）Tips
$("li,div.hot").css();
2. 训练2
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul{ list-style:none;}
.title{
padding-left:10px;
font-size:18px;
font-weight:bolder;
height:50px;
line-height:50px}
.poem{
width:200px;
height:30px;
line-height:30px;
color:#6633FF;
font-size:14px;}
</style>
<script type="text/javascript" src="JS/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".title~li").addClass("poem");
});
</script>
</head>
<body>
<ul>
<li>题西林壁</li>
<li>横看成岭侧成峰</li>
<li>远近高低各不同</li>
<li>不识庐山真面目</li>
<li>只缘身在此山中</li>
</ul>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/19_24/
（3）Tips
$(".title~li").addClass(""); 与.title同级的排在它后面的li。
3. 训练3
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="JS/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(":radio").click(function(){
$("p").css("font-size",$(this).val());
});
})
</script>
</head>
<body>
<form>
小号<input type="radio" name="size" value="12pt" checked="checked"/>
中号<input type="radio" name="size" value="18pt"/>
大号<input type="radio" name="size" value="24pt"/>
</form>
<p>明日科技是一家专注于编程教育的IT教育公司</p>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/19_25/
（3）Tips
$(":radio").css("font-size",$(this).val()); 表格里的。
4. 训练4
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,td,th {
font-size: 12px;
padding: 5px;
}
</style>
<script type="text/javascript" src="JS/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select[name='year']").val(1980);
$("select[name='month']").val(9);
});
</script>
</head>
<body>
<form id="form1" name="form1">
出生年月：
<select name="year">
<script type="text/javascript">
for(var i=1970;i<2000;i++){
document.write("<option value='"+i+"'>"+i+"年</option>");
}
</script>
</select>
<select name="month">
<script type="text/javascript">
for(var i=1;i<=12;i++){
document.write("<option value='"+i+"'>"+i+"月</option>");
}
</script>
</select>
</form>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/19_26/
（3）Tips
$("select[name='year']").val(9);
5. 训练5
（1）源代码
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>歌曲置顶和删除</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
font-size: 14px;
}
h3,.choose{
text-align: center;
margin: 10px auto;
}
#song{
width: 230px;
margin: 0 auto;
}
#song ul{
list-style: none;
height: 26px;
line-height: 26px;
border-bottom: 1px dashed #AAAAAA;
}
#song ul li{
float: left;
}
#song ul li:not(:first-child){
margin-left: 20px;
}
#song ul li:first-child{
width: 120px;
margin-left: 5px;
}
a{
text-decoration: none;
}
#song ul:first-child li:first-child{
color:red;
}
</style>
<script type="text/javascript" src="JS/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(":button").click(function(){
var songname=$("input[name='songname']").val();
$("input[name='songname']").val("");
var songinfo=$("<ul><li>"+songname+"</li><li><a href='#'>置顶</a></li><li><a href='#'>删除</a></li></ul>");
$("#song").append(songinfo);
});
$("a[class='top']").click(function(){
$(this).parent().parent().prependTo($("#song"));
});
$("a[class='del']").click(function(){
$(this).parent().parent().remove();
});
});
</script>
</head>
<body>
<h3>点歌系统</h3>
<div>
<label>歌名：</label>
<input type="text" name="songname" size="10">
<input type="button" value="点歌">
</div>
<div id="song">
<ul>
<li>没离开过</li>
<li><a href="#">置顶</a></li>
<li><a href="#">删除</a></li>
</ul>
<ul>
<li>你知道我在等你吗</li>
<li><a href="#">置顶</a></li>
<li><a href="#">删除</a></li>
</ul>
<ul>
<li>青花瓷</li>
<li><a href="#">置顶</a></li>
<li><a href="#">删除</a></li>
</ul>
<ul>
<li>爱的初体验</li>
<li><a href="#">置顶</a></li>
<li><a href="#">删除</a></li>
</ul>
<ul>
<li>那就这样吧</li>
<li><a href="#">置顶</a></li>
<li><a href="#">删除</a></li>
</ul>
<ul>
<li>花心</li>
<li><a href="#">置顶</a></li>
<li><a href="#">删除</a></li>
</ul>
</div>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/19_27/
（3）Tips
$("input[name='songname']").val("");
$(this).parent().parent().prependTo($("#song"));子元素到父元素。
6. 训练6
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="JS/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#pic").hover(function(){
$(this).attr("border",1);//为图片加边框
},function(){
$(this).attr("border",0);//去除图片边框
});
});
</script>
</head>
<body>
<img id="pic" src="images/mr.gif" />
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/19_28/
（3）Tips
$("#pic").hover("");
$(this).attr("border",1);},function(){};
7. 训练7
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
}
.menu{
width: 720px;
height: 60px;
margin: 0 auto;
background-color: #EFEFEF;
font-size: 14px;
}
.menu ul{
list-style: none;
}
.menu ul li{
float: left;
width: 120px;
height: 60px;
line-height: 60px;
text-align: center;
cursor: pointer;
}
</style>
<script type="text/javascript" src="JS/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("ul li").hover(function(){
$(this).css({color:"#FFFFFF","background":"red"});
},function(){
$(this).css({color:"#000000","background":"#EFEFEF"});
});
});
</script>
</head>
<body>
<div>
<ul>
<li>平板电视</li>
<li>冰箱洗衣机</li>
<li>厨房小电</li>
<li>厨卫大电</li>
<li>生活电器</li>
<li>空调</li>
</ul>
</div>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/19_29/
（3）Tips
$("ul li").hover();
8. 训练8
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.menubar{
position:absolute;
top:10px;
width:100px;
height:20px;
line-height:20px;
cursor:default;
border-width:1px;
border-style:outset;
color:#99FFFF;
background:#669900
}
.menu{top:32px;
width:90px;
display:none;
border-width:2px;
border-style:outset;
border-color:white sliver sliver white;
background:#333399;
padding:5px
}
.menu a{
text-decoration:none;
color:#99FFFF;
}
.menu a:hover{
color: #FFFFFF;
}
</style>
<script src="JS/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".menubar").mouseover(function(){//当鼠标移到元素上时
$(this).find(".menu").show();//显示当前的子菜单
}).mouseout(function(){//当鼠标移出元素时
$(this).find(".menu").hide();//将该子菜单隐藏
});
});
</script>
</head>
<body>
<table width="400" border="0" cellpadding="0" cellspacing="0" style="font-size:15px">
<tr>
<td width="20%">
<div id="Tdiv_1">
<div>教育网站</div>
<div id="Div1">
<a href="#">重庆XX大学</a><br>
<a href="#">长春XX大学</a><br>
<a href="#">吉林XX大学</a>
</div>
</div>
</td>
<td width="20%">
<div id="Tdiv_2">
<div>电脑丛书网站</div>
<div id="Div2">
<a href="#">PHP图书</a><br>
<a href="#">JScript图书</a><br>
<a href="#">Java图书</a>
</div>
</div>
</td>
<td width="20%">
<div id="Tdiv_3">
<div>新出图书</div>
<div id="Div3">
<a href="#">Delphi图书</a><br>
<a href="#">VB图书</a><br>
<a href="#">Java图书</a>
</div>
</div>
</td>
<td width="20%">
<div id="Tdiv_4">
<div>其它网站</div>
<div id="Div4">
<a href="#">明日科技</a><br>
<a href="#">明日图书网</a><br>
<a href="#">技术支持网</a>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/19_30/
（3）Tips
$(this).find(".menu").show();在后代元素中找。
9. 训练9
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.menubar{
width: 500px;
margin: 10px auto;
text-align: center;
}
.title{
font-size:16px;
cursor:pointer;}
.content{
display:none;
font-size:14px;
width:500px;
line-height:30px;
margin-top:20px;
text-align: left;
}
</style>
<script src="JS/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".title").click(function(){
if($(".content").is(":hidden")){
$(".content").slideDown(500);
}else{
$(".content").slideUp(500);
}
});
});
</script>
</head>
<body>
<div>
<div>公司简介</div>
<div>
  吉林省晨*科技有限公司是一家以计算机软件技术为核心的高科技型企业。公司创建于1999年12月，是专业的应用软件开发商和服务提供商。多年来始终致力于行业管理软件开发、数字化出版物开发制作、行业电子商务网站开发等，先后成功开发了涉及生产、管理、物流、营销、服务等领域的多种企业管理应用软件和应用平台，目前已成为计算机出版行业的知名品牌。
</div>
</div>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/19_31/
（3）Tips
$(".content").is(":hidden")，冒号表示状态。
$(".content").slideDown(500)
10. 训练10
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html{
height:3000px;
background:#CCCCDD
}
#toTop{
width: 50px;
height: 50px;
bottom:10px;
right:15px;
position:fixed;
cursor:pointer;
z-index:9999
}
</style>
<script src="JS/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if($(this).scrollTop()==0){//判断页面向下滚动距离是否为0
$("#toTop").hide();//设置图标隐藏
}
$(window).scroll(function(){
if($(this).scrollTop()==0){//判断页面向下滚动距离是否为0
$("#toTop").hide();//设置图标隐藏
}else{
$("#toTop").show();//设置图标显示
}
});
$("#toTop").click(function(){
$("html,body").animate({
scrollTop:"0px"
},500)
});
});
</script>
</head>
<body>
<div>向下滚动查看效果</div>
<div id="toTop">
<img src="1.png">
</div>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/19_32/
（3）Tips
fixed，钉在屏幕上。
$(windowt).scrollTop()==0
$("html,body").animate({},500)，花括号表示对象。
三、实践与练习
1. 实践1
（1）源代码
index.html：
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link type="text/css" rel="stylesheet" href="css/in.css"/>
<script type="text/javascript" src="JS/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="JS/in.js"></script>
</head>
<body>
<table width="120px" height="120px" border="1" bordercolor="#00CCFF" cellspacing="0">
<tr>
<td>
<table>
<tr>
<td>
<select name="select" id="sex">
<option value="">请选择性别</option>
<option value="nan">男性</option>
<option value="nv">女性</option>
</select>
<div id="o"></div>
<div id="n"></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
in.css：
#sex{
width:100px;
font-family:"楷体_GB2312";
font-size:14px;
}
img{
width:40px;
height:40px;
}
in.js：
$(document).ready(function(){
$("select").change(function(){
var value = $(this).val();
if(value == ""){
alert("请选择性别");
}else{
if(value == "nan"){
$("#o").empty();
$("#o").append("<select id='one'><option value='pic/1.jpg'>头像1</option><option value='pic/2.jpg'>头像2</option><option value='pic/3.jpg'>头像3</option><option value='pic/4.jpg'>头像4</option><option value='pic/9.jpg'>头像5</option></select>");
$("#n").empty();
$("#n").append("<img src='pic/1.jpg'>");
$("#one").change(function(){
var va = $(this).val();
$("#n").empty();
$("#n").append("<img src="+va+">");
});
}else{
$("#o").empty();
$("#o").append("<select id='one'><option value='pic/5.jpg'>头像1</option><option value='pic/6.jpg'>头像2</option><option value='pic/7.jpg'>头像3</option><option value='pic/8.jpg'>头像4</option><option value='pic/10.jpg'>头像5</option></select>");
$("#n").empty();
$("#n").append("<img src='pic/5.jpg'>");
$("#one").change(function(){
var va = $(this).val();
$("#n").empty();
$("#n").append("<img src="+va+">");
});
}
}
});
});
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/19_33/
（3）Tips
$("#n").empty();
$("#one").change();
$("#n").append("<img src='pic/1.jpg'>");
2. 实践2
（1）源代码
index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
font-size: 14px;
}
.title{
width: 260px;
text-align: center;
font-size: 18px;
}
div{
margin: 10px;
}
label{
vertical-align: top;
}
span{
margin-left: 10px;
}
</style>
<script type="text/javascript" src = "JS/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("textarea").keyup(function(){
var value=$(this).val().substr(0,30);
$(this).val(value);
var len=$(this).val().length;
var str="您还有"+(30-len)+"个字可以输入!";
$("span").text(str).css("color","red");
});
});
</script>
</head>
<body>
<form id="form" name="form">
<div>用户信息</div>
<div>
<label>姓名：</label>
<input name="name" id="name" type="text">
</div>
<div>
<label>简介：</label>
<textarea name="intro" cols="26" rows="3"></textarea><span></span>
</div>
</form>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/19_34/
（3）Tips
$("textarea").keyup(function(){});
$(this).text(str).css("color","red")
3. 实践3
（1）源代码
index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
font-family: "微软雅黑";
color: #333333;
}
li{
margin:0;
}
.list{border: solid 1px #B83EFF;margin:20px;}
.scroll{
margin-left:10px;
margin-top:10px;
width:470px;
height:220px;
/* overflow:hidden;*/
border: solid 1px red;
}
.scroll li{
width:270px;
height:30px;
line-height:30px;
margin-left:26px;
}
.scroll li a{
font-size:14px;
color:green;
text-decoration:none;
}
.scroll li a:hover{
color:#66CCFF;
}
</style>
<script type="text/javascript" src="JS/jquery-3.5.1.min.js"></script>
</head>
<body>
<table width="270" border="0" cellpadding="0" cellspacing="0" style="margin-left:12px;">
<tr><td height="50" style="font-size:22px;" valign="bottom">即将上线</td></tr>
</table>
<div>
<ul>
<li><a href="#">《荒野大镖客》重磅来袭</a></li>
<li><a href="#">《星球大战外传》科幻迷不容错过</a></li>
<li><a href="#">《野鹅敢死队》重现战场</a></li>
<li><a href="#">《九死一生》原始丛林探险</a></li>
<li><a href="#">《荒野猎人》莱昂纳多复仇与熊搏斗</a></li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".scroll").hover(function(){//鼠标指向滚动区域
clearTimeout(timeID);//中止超时，即停止滚动
},function(){//鼠标离开滚动区域
timeID=setInterval('autoScroll()',3000); //设置超时函数，每过3秒执行一次函数
});
});
function autoScroll(){
$(".scroll").find(".list").animate({ //自定义动画效果
marginTop : "-25px"
},500,function(){
$(this).css({"margin-top" : "0px"}).find("li:first").appendTo(this); //把列表第一行内容移动到列表最后
});
}
var timeID=setInterval('autoScroll()',3000); //设置超时函数，每过3秒执行一次函数
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/19_35/
（3）Tips
我觉得整个过程反了。
$(".scroll").hover();
clearTimeout(timeID)
setInterval('autoScroll()',3000)
$(".scroll").find(".list").animate()
$(this).css({}).find("li:first").appendTo(this)