5.jQuery
jQuery是辅助JavaScript开发的js类库,是JavaScript和Query结合的产物
核心思想:Write less,do more。
5.1 jQuery的导入
在jQuery下载地址完成jQuery的下载,之后导入到项目所在路径。
<head>
<script type="text/javascript" src="src/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
//页面加载完之后执行{}中的内容,相当于window.onload = function(){}
$(function (){
var $btnObj = $("#id001");
$btnObj.click(function (){
alert("jQuery 单击事件");
});
});
</script>
</head>
<body>
<button id="id001">点击触发</button>
</body>
5.2 jQuery的核心函数$()
-
当传入参数为函数时
表示页面加载完成之后,相当于window.οnlοad=function(){}
-
当传入参数为HTML字符串时
表示创建这个HTML标签对象。
注:要写在$(function(){});里面,否则无法正常执行
<head> <script type="text/javascript" src="src/jquery-3.6.0.min.js"></script> <script type="text/javascript"> $(function (){ $("<button id=\"id001\">点击触发</button>").appendTo("body"); }); </script> </head> <body> </body>
在body标签内容为空时,出现按钮组件。
-
当传入参数为选择器字符串时
$("#id属性值"); 根据id查询标签对象
$(“标签名”); 根据标签名查询对象
$(".class属性值"); 根据class属性查询对象
-
当传入参数为DOM对象时
会把DOM对象转换为jQuery对象。
5.3 jQuery与Dom对象
DOM对象Alert出来的效果为 [object HTML标签名Element]
jQuery对象Alert出来的效果为 [object Object]
jQuery对象的本质:数组,存放dom对象的数组,同时包含jQuery提供的函数
5.4 jQuery的选择器与过滤器
5.4.1层级选择器
$(“祖标签 后代标签名”): 找祖先标签下的所有匹配的后代标签
$(“父标签 > 子标签”): 找父标签下的所有匹配的子标签
$(“prev标签 + next标签”): 找prev标签的下一个next标签
$(“prev标签 ~ next标签”): 找与prev同级的所有next标签
5.4.2 普通过滤器
$(“标签名:first”): 获取第一个元素
$(“标签名:last”): 获取最后一个元素
$(“标签名:not(:属性名)”): 获取不包含某属性的标签
$(“标签名:even”): 获取所有索引值为偶数的元素
$(“标签名:odd”): 获取所有索引值为奇数的元素
$(“标签名:eq(索引值)”): 获取指定索引值的元素(从零开始)
$(“标签名:gt(索引值)”): 获取大于索引值的元素
$(“标签名:lt(索引值)”): 获取大于索引值的元素
$(“标签名:header”): 获取所有标题
$(“标签名:animated”): 获取正在执行动画效果的标签
5.4.3 内容过滤器
$(“标签名:contains(‘内容’)”): 获取包含指定内容的标签
$(“标签名:empty”): 获取不包含子元素或文本的空元素
$(“标签名:has(选择器名)”): 获取包含选择器所匹配的元素的元素
<head>
<meta charset="UTF-8">
<title>Tutorial1</title>
<script type="text/javascript" src="src/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function (){
//选中包含p标签的div标签,为其添加class属性为test
$("div:has(p)").addClass("test");
});
</script>
</head>
<body>
<div><p>Hello</p></div>
<div>Hello个屁呢!</div>
</body>
效果图如下,在body标签中并未给div标签设置属性,但是执行完之后,发现第一个div标签有了class属性,且值为test。
5.4.4 属性过滤器
$(“标签名[属性名]”): 获取包含某属性的标签
$(“标签名[属性名 = ‘属性值’]”): 获取包含某属性且属性值为特定值的标签
$(“标签名[属性名 != ‘属性值’]”): 获取包含某属性且属性值不为特定值的标签
注:两种情况都会被选出来,第一:不包含该属性;第二:属性值不是给定值
验证如下:
<head>
<meta charset="UTF-8">
<title>Tutorial1</title>
<script type="text/javascript" src="src/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function (){
$("div[name != 'Smile']").addClass("test");
});
</script>
</head>
<body>
<div name = "Smlie">Hello</div>
<div>Hello个屁呢!</div>
<div name = "sry">Hello个屁呢!</div>
</body>
在标签name属性为为sry以及不包含name属性的div标签均出现新的class属性
$(“标签名[属性名 ^= ‘属性值’]”): 获取包含某属性且以某些值开头的标签
比如<div name = “Smile”>,就可以通过<div ^= ‘Sm’>查到
$(“标签名[属性名 $= ‘属性值’]”): 获取包含某属性且以某些值结尾的标签
$(“标签名[属性名 *= ‘属性值’]”): 获取包含某属性包含某些值开头的标签
$(“标签名[属性选择][属性选择]”): 获取包含某属性包含某些值开头的标签
5.4.4 表单过滤器
$(":input"): 获取所有表单内的input、select、textarea、button等标签
$(":text"): 获取所有表单内的type=text的标签
$(":password"): 获取所有表单内的type=password的标签
$(":hidden"): 获取所有表单内的type=hidden以及style="display:non"的标签
$(":enabled"): 获取所有表单内的可用标签
$(":disabled"): 获取所有表单内的不可用标签,内容存在,但不可操作
$(":checked"): 获取所有表单内被选中标签(一般值单选框、复选框,不包含下拉框)
$(":selected"): 获取所有表单内被选中的下拉框标签
5.5 jQuery属性操作
-
html()
可以设置和获取起始标签和结束标签中的内容。与dom属性的innerHTML相同。
<head>
<meta charset="UTF-8">
<title>Tutorial1</title>
<script type="text/javascript" src="src/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function (){
//传参则设置,不传参则获取
//获取是获取第一个,设置,是设置所有
console.log($("div").html());//获取div标签中的内容,包含html标签
console.log($("p").html());//获取p标签中的内容
//console.log($("div").html("关你屁事!"));//将所有div标签中的内容改为关你屁事
$("div").html("<span>关你屁事!</span>");//将所有div标签中的内容改为关你屁事,且添加span标签
});
</script>
</head>
<body>
<div name = "Smlie"><span>Hello!</span></div>
<p>Hello个屁呢!</p>
<div name = "sry">Hello个屁呢!</div>
<h1>放大的屁!</h1>
</body>
效果图如下
页面内容:
控制台内容:
-
text()
可以设置和获取起始标签和结束标签中的文本。与dom属性的innerText相同。
<head> <meta charset="UTF-8"> <title>Tutorial1</title> <script type="text/javascript" src="src/jquery-3.6.0.min.js"></script> <script type="text/javascript"> $(function (){ //不传参是获取,传参是设置 console.log($("div").text()); console.log($("p").text()); //console.log($("div").html("关你屁事!")); console.log($("p").text("<span>关你屁事!</span>")); }); </script> </head> <body> <div name = "Smlie">div标签<span>div中的span标签</span></div> <p>这次我不在p标签里骂人了!<span>我在span里骂</span></p> </body> </html>
可以看到在控制台输出div标签中的内容时,并未包含span标签,而是直接将两个标签内的内容进行输出,在修改内容时,直接将span标签当成文本输出。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6Ataw4Zi-1630828689558)(…/…/…/AppData/Roaming/Typora/typora-user-images/image-20210816110306735.png)]
-
val()
可以设置和获取表单项(见2.4.10)的value属性值。跟dom属性的value相同
<head>
<meta charset="UTF-8">
<title>Tutorial1</title>
<script type="text/javascript" src="src/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function (){
//不传参是获取,传参是设置
$("button").click(function (){
alert($("#Smile").val());
console.log($("smile").val());
});
});
</script>
</head>
<body>
<div name = "Smlie">div标签<span>div中的span标签</span></div>
<input name="smile" type="text"/>
<button>测试val()</button>
</body>
测试过程中发现,KaTeX parse error: Expected 'EOF', got '#' at position 40: …ug()复习[核心函数传参](#̲核心函数传参)在点击测试val…("#Smile").val()无法使用。
-
attr() 获取和设置属性的值
-
prop()获取和设置属性的值
注:attr()在访问表单中的复选框时,若复选框未选中,会返回undefined,因此官方给出来更优解prop(),在复选框未选中时,会返回false。
attr() :不推荐操作checked、readOnly、selected、disabled等等
attr可以操作非标准属性,比如自定义属性。
修改a标签的class属性
$("a:last").click(function (){ if($("this[class = 'showmore']")) { //过滤选择类型为showmore的标签 $("li").show(); $(this).attr("class", "showless");//将showmore改为showless alert("调用成功"); return false; } else{ }
prop() : 只推荐操作checked、readOnly、selected、disabled等等
格式:$(":表单类型").attr(“想获取的属性名(,想修改的值)”)
格式:$(":表单类型").prop(“想获取的属性名(,想修改的值)”)
5.6 DOM对象的增删改
5.6.1 内部插入
a.appendTo(b) 将a插入到b子元素的末尾,成为最后一个子元素
a.prependTo(b) 将a插入到b所有子元素前面,成为第一个子元素
<head>
<meta charset="UTF-8">
<title>Tutorial1</title>
<script type="text/javascript" src="src/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function (){
$("<span>prependto测试</span>").prependTo("div");
$("<span>appendTo测试</span>").appendTo("button");
});
</script>
</head>
<body>
<div id = "Smlie">div标签<span>div中的span标签</span></div>
<input id="smile" type="text"/>
<button >测试val()</button>
</body>
测试结果如下,div标签中最前面的是利用prependTo插入的新标签。
5.6.2 外部插入
a.insertAfter(b) 将a插入到b元素的后面
a.insertBefore(b) 将a插入到b元素的前面
<head>
<meta charset="UTF-8">
<title>Tutorial1</title>
<script type="text/javascript" src="src/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function (){
$("<span>insertAfter测试</span>").insertAfter("div");
$("<span>insertBefore测试</span>").insertBefore("button");
});
</script>
</head>
<body>
<div id = "Smlie">div标签<span>div中的span标签</span></div>
<input id="smile" type="text"/>
<button >测试val()</button>
</body>
测试结果如下:
5.6.3 替换
a.replaceWith(b) 将a换成b,即使有多个a,只出现一个b
a.replaceAll(b) 将a换成b,每一个a都会被换成
<head>
<meta charset="UTF-8">
<title>Tutorial1</title>
<script type="text/javascript" src="src/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function (){
$("div").replaceWith("<span>replaceWith测试</span>");
});
</script>
</head>
<body>
<div id = "Smlie">div标签<span>div中的span标签</span></div>
<div>第二个div标签</div>
<div>第三个div标签</div>
<p>第一个p标签</p>
<p>第2个p标签</p>
<p>第3个p标签</p>
</body>
图片结果如下:
可以看到,所有的div标签全部被替换为replaceWith测试。
<head>
<meta charset="UTF-8">
<title>Tutorial1</title>
<script type="text/javascript" src="src/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function (){
$("<h1>replaceAll测试</h1>").replaceAll("p");
});
</script>
</head>
<body>
<div id = "Smlie">div标签<span>div中的span标签</span></div>
<div>第二个div标签</div>
<div>第三个div标签</div>
<p>第一个p标签</p>
<p>第2个p标签</p>
<p>第3个p标签</p>
</body>
注:replaceAll,在$符号后面的内容要带标签,否则无法完成替换!
5.6.4 删除
$(“标签名”).remove():清除内容带标签
$(“标签名”).empty():清除内容保留标签
5.6.5 代码练习
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="styleB/css.css" />
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function (){
//绑定单击事件
$("#addEmpButton").click(function (){
//获取输入框的内容
var name=$("#empName").val();
var email=$("#email").val();
var salary=$("#salary").val();
//创建行标签对象,添加到上面的表格中
var $trObj = $("<tr>" +
"<td>" + name + "</td>" +
"<td>" + email + "</td>" +
"<td>" + salary + "</td>" +
"<td><a href=\"deleteEmp?id=002\">Delete</a></td>" +
"</tr>")
$trObj.appendTo($("#employeeTable"));
//补绑单击事件
$trObj.find("a").click(function (){
var $rowObj = $(this).parent().parent();
var name = $rowObj.find("td:first").text();
if(confirm("确定要删除["+ name +"]吗?")){
//在事件响应的function中,有this对象,该对象为正在响应事件的dom对象
$rowObj.remove();
}
//阻止默认行为
return false;
});
});
})
//a标签的单击事件(删除内容)
$("a").click(function (){
//JavaScript提供的一个确认提示框函数,点击确认,则返回true,点击取消则返回false
//获取行对象,通过得到这个a标签的父元素得到td标签,再向上找父元素找到tr标签
var $rowObj = $(this).parent().parent();
var name = $rowObj.find("td:first").text();
if(confirm("确定要删除["+ name +"]吗?")){
//在事件响应的function中,有this对象,该对象为正在响应事件的dom对象
$rowObj.remove();
}
//阻止默认行为
return false;
});
</script>
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom.com</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</table>
<div id="formDiv">
<h4>添加新员工</h4>
<table>
<tr>
<td class="word">name: </td>
<td class="inp">
<input type="text" name="empName" id="empName" />
</td>
</tr>
<tr>
<td class="word">email: </td>
<td class="inp">
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td class="word">salary: </td>
<td class="inp">
<input type="text" name="salary" id="salary" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton" value="abc">
Submit
</button>
</td>
</tr>
</table>
</div>
</body>
</html>
5.7 jQuery中的样式操作
allclass() 添加样式
removeclass() 删除样式
toggleclass() 有则删除,无则添加
offset() 获取或设置一个样式的坐标
5.8 jQuery中的动画操作
show() 将隐藏的内容显示出来
hide() 将显示的内容隐藏起来
toogle() 隐藏的显示,显示的隐藏
以上动画方法均可添加参数
-
第一个是动画执行时长,单位:ms
-
第二个是动画的回调函数(动画执行完成后自动调用的函数)
$("#btn1").click(function(){ $("#div1").show(2000,function () { alert("show动画完成 ") }); });
fadeIn() 淡入
fadeOut() 淡出
fadeTo() 淡化到,在指定的时间内将透明度修改到指定值
fadeToogle() 淡化切换
5.9 代码练习:品牌展示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>品牌展示练习</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-size: 12px;
text-align: center;
}
a {
color: #04D;
text-decoration: none;
}
a:hover {
color: #F50;
text-decoration: underline;
}
.SubCategoryBox {
width: 600px;
margin: 0 auto;
text-align: center;
margin-top: 40px;
}
.SubCategoryBox ul {
list-style: none;
}
.SubCategoryBox ul li {
display: block;
float: left;
width: 200px;
line-height: 20px;
}
.showmore , .showless{
clear: both;
text-align: center;
padding-top: 10px;
}
.showmore a , .showless a{
display: block;
width: 120px;
margin: 0 auto;
line-height: 24px;
border: 1px solid #AAA;
}
.showmore a span {
padding-left: 15px;
background: url(img/down.gif) no-repeat 0 0;
}
.showless a span {
padding-left: 15px;
background: url(img/up.gif) no-repeat 0 0;
}
.promoted a {
color: #F50;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function() {
//隐藏后几项内容
$("li:gt(5):not(:last)").hide();
//绑定单击事件
$("a:last").click(function (){
//状态取反(隐藏/显示)
$("li:gt(5):not(:last)").toggle();
//判断是否添加高亮
if($("li:gt(5):not(:last)").is(":hidden")) {
$("div div").attr("class", "showmore");
$("span").text("显示全部品牌");
$("div ul li:contains('佳能')").removeClass();
$("div ul li:contains('尼康')").removeClass();
$("div ul li:contains('奥林巴斯')").removeClass();
return false;
}
else{
$("div div").attr("class", "showless");
$("span").text("显示精简品牌");
$("div ul li:contains('佳能')").addClass("promoted");
$("div ul li:contains('尼康')").addClass("promoted");
$("div ul li:contains('奥林巴斯')").addClass("promoted");
return false;
}
});
});
</script>
</head>
<body>
<div class="SubCategoryBox">
<ul>
<li><a href="#">佳能</a><i>(30440) </i></li>
<li><a href="#">索尼</a><i>(27220) </i></li>
<li><a href="#">三星</a><i>(20808) </i></li>
<li><a href="#">尼康</a><i>(17821) </i></li>
<li><a href="#">松下</a><i>(12289) </i></li>
<li><a href="#">卡西欧</a><i>(8242) </i></li>
<li><a href="#">富士</a><i>(14894) </i></li>
<li><a href="#">柯达</a><i>(9520) </i></li>
<li><a href="#">宾得</a><i>(2195) </i></li>
<li><a href="#">理光</a><i>(4114) </i></li>
<li><a href="#">奥林巴斯</a><i>(12205) </i></li>
<li><a href="#">明基</a><i>(1466) </i></li>
<li><a href="#">爱国者</a><i>(3091) </i></li>
<li><a href="#">其它品牌相机</a><i>(7275) </i></li>
</ul>
<div class="showmore">
<a href="未知连接" ><span>显示全部品牌</span></a>
</div>
</div>
</body>
</html>
5.10 jQuery的事件操作
5.10.1 jQuery与js的页面加载
window.onload()=function(){}
$(function(){});
- 页面在加载完成后先加载jQuery的事件,再加载原生js的事件
- jQuery页面加载完成之后,指的是,浏览器内核解析完页面的标签、创建好dom对象之后执行
- 原生js页面加载完成之后,除了要等以上任务完成,还要等标签显示时需要的内容加载完成。
- 同时,原生js页面只会执行最后一个页面加载完成的代码,而jQuery会执行每一个页面加载完成的代码。
<!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">
window.onload = function () {
alert("原生js的页面加载完成之后--1")
}
$(function () {
alert("jquery的页面加载完成 之后--3")
});
</script>
</head>
<body>
<button>我是按钮</button>
<iframe src="http://localhost:8080"></iframe>
<img src="http://localhost:8080/1.jpg" alt=""/>
</body>
</html>
在上面的代码中,执行顺序为,先显示jQuery页面加载完成,再显示原生js页面加载完成。
可以从下图中观察出,标签中需要含有localhost:8080这个页面,以及要包含localhost:8080/1.jpg这个图片,因此页面加载完成,并创建dom对象后显示jQuery加载完成,而在读取完localhost:8080这个页面后显示整个js页面加载完成。
jQuery页面加载完成:
原生js页面加载完成:
5.10.2 jQuery其他事件操作
click() 绑定与触发单击事件
click()传参数,function则是绑定某组件的单击事件,若无参数,则为触发某组件的单击事件。
mouseover() 绑定与触发鼠标移入事件
mouseout() 绑定与触发鼠标移出事件
bind() 可以给元素一次绑定一个或多个事件
bind(“事件名 事件名 事件名”, “函数”){函数体}
unbind() 解除绑定
unbind(“事件名”)
one() 使用上与bind一样,但是one只触发一次
live() 可以用来绑定选择器匹配的所有元素的时间,后面动态创建出来的标签也有效
<!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(){
//单击事件绑定
$("h5").click(function () { // 传function是绑定事件
alert('h5单击事件 == click方法绑定')
});
//单击事件触发
$("button").click(function () {
$("h5").click(); // 不传function是触发事件,触发h5的单击事件
});
//鼠标移入
$("h5").mouseover(function () {
console.log("你进来了");
});
//鼠标移出
$("h5").mouseout(function () {
console.log("你出去了");
});
});
</script>
</head>
<body>
<div id="panel">
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
</div>
<button>按钮</button>
</div>
</body>
</html>
5.10.3 事件对象
事件冒泡:父子元素同时监听同一个事件,当触发子元素的事件时父元素同时触发
防止冒泡的方法:在子元素触发事件之后添加return false
js事件对象
定义:封装有触发的事件信息的一个JavaScript对象
js事件对象的获取
在给元素绑定事件的时候,在事件的function(event)参数列表中添加一个参数,这个参数,习惯 上取名为event
<!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">
#areaDiv {
border: 1px solid black;
width: 300px;
height: 50px;
margin-bottom: 10px;
}
#showMsg {
border: 1px solid black;
width: 300px;
height: 20px;
}
</style>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
//1.原生javascript获取 事件对象
// window.onload = function () {
// document.getElementById("areaDiv").onclick = function (event) {
// console.log(event);
//在控制台输出事件的类型,触发方式等信息,包含在event里面
// }
// }
//2.JQuery代码获取 事件对象
$(function () {
// $("#areaDiv").click(function (event) {
// console.log(event);
// });
//3.使用bind同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件。
$("#areaDiv").bind("mouseover mouseout",function (event) {
if (event.type == "mouseover") {
console.log("鼠标移入");
} else if (event.type == "mouseout") {
console.log("鼠标移出");
}
});
});
</script>
</head>
<body>
<div id="areaDiv"></div>
<div id="showMsg"></div>
</body>
</html>
5.10.4 淘宝服装细节显示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hcP3Ke2e-1630828689572)(…/…/AppData/Roaming/Typora/typora-user-images/image-20210904160347126.png)]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
text-align: center;
}
#small {
margin-top: 150px;
}
#showBig {
position: absolute;
display: none;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$("#small").bind("mouseover mouseout mousemove",function (event){
if(event.type == "mouseover"){
$("div").show();
}else if(event.type == "mouseout"){
$("div").hide();
}else if(event.type == "mousemove"){
$("div").offset({
left: event.pageX + 10,
top:event.pageY + 10
});
}
});
});
</script>
</head>
<body>
<img id="small" src="img/small.jpg" />
<div id="showBig">
<img src="img/big.jpg">
</div>
</body>
</html>