高级网页设计Class-jQuery
2024-05-10 06:16:40
2019.2.27
1.初识jQuery ，2019-2月使用的是jQuery3
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="js/jquery-3.3.1.js"></script>
</head>
<body><script>$(function () {alert("hello,jquery!");$("body").css("background","#bfa");});</script>
</body>
</html>
效果：
点击确定之后，body获取背景色
2.标志-等待DOM文档载入后执行类似于window.onload
$(document).ready(function(){...
});以上 简写为：
<script>在body后不用写开始的结构$(function () {});</script>是在页面DOM加载完成后执行的代码，而window.onload需要页面DOM和图片都加载完成后才执行，所以前者效率更高 。
$(document).ready() 里的代码是在页面DOM都加载完才执行的，如果把代码直接写到script标签里，当页面加载完这个script标签就会执行里边的代码了，此时如果你标签里执行的代码调用了当前还没加载过来的代码或者DOM，那么就会报错，当然如果你把script标签放到页面最后面那么就没问题了，此时和ready效果一样。
3.获得 jQuery 库（http://jquery.com）
jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。
jquery.js（无压缩版, 用于测试、学习）
jquery.min.js（压缩版, 用于产品、项目)
4.选择器
$("li:eq(1)") 第二个li元素
$("li:lt(5)") index索引号小于5的li$("li:gt(1)") index索引号大于1的li- 在ID、Class或者元素名称的后面可以添加条件，条件在冒号的后面
- odd、 even、 gt、eq、lt都是从第0个开始的
.html( ) //内容 .css( ) //样式 .attr( ) //样式 都可以对元素进行修改和获取的操作- odd是奇数，even是偶数
范例1：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="js/jquery-3.3.1.js"></script>
</head>
<body><ul> <li>北京</li> <li>上海</li> <li>沈阳</li> <li>天津</li> <li>大连</li> <li>青岛</li> </ul> <script>$(function(){$("li:odd").css("background","#bfa");//所有奇数个（从0开始）$("li:eq(2)").css("background","#eee");//第三个$("li").html("沈阳");})</script>
</body>
</html>
$("li:nth-child(odd)") 从1开始计数$("li:nth-child(even)") 同一个父元素下的所有的第偶数个li$("li:nth-child(2)") 同一个父元素下的 第二个li$("ul li a") ul下的li下的a$("#box li a") #box里的li里的a$(“ul li”) 或 $(“ul>li") ul里的li，li是ul的后代$("li:has(a)") li元素，其后代中包括a$(“ul.listUL") ul，且该ul上应用了listUL这个类（类名为这个的ul）$("span, #one") span和#one$("a[title]") 有title属性的a$("li.yellow") li，且该li上应用了yellow这个类
完整示例-1：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="js/jquery-3.3.1.js"></script><style>#jq{/* display: flex; */}.box,span{width: 250px;height: 250px;border: 1px solid #cccccc;margin: 10px;float: left;}.son{width: 40%;margin: 3%;height: 100px;border: 1px solid #eee;background-color: cornflowerblue;float: left;}.cur{border-style: dotted;border-radius: 50%;}</style>
</head>
<body><button>改变所有box</button><button>改变所有小盒子</button><button>改变第二个大盒子的里面的所有小盒子</button><button>改变所有小盒子里的文字的内容</button><button>改变所有的大盒子里的第二个小盒子</button><button>改变第三个大盒子里的第二个小盒子的内容</button><button>改变所有大盒子里的第一个和第三个小盒子</button><button>改变span</button><button>9</button><button>10</button><div id="jq"><div class="box"><div class="son"></div><div class="son"></div><div class="son"></div><div class="son"></div></div><div class="box"><div class="son"></div><div class="son"></div><div class="son"></div><div class="son"></div></div><div class="box"><div class="son"></div><div class="son"></div><div class="son"></div><div class="son"></div></div><div class="box"><div class="son"></div><div class="son"></div><div class="son"></div><div class="son"></div></div><div class="box"><div class="son"></div><div class="son"></div><div class="son"></div><div class="son"></div></div><div class="box"><div class="son"></div><div class="son"></div><div class="son"></div><div class="son"></div></div><div class="box"><div class="son"></div><div class="son"></div><div class="son"></div><div class="son"></div></div><span>span</span></div><script>$(function(){// 点击事件//click点击 里面是匿名事件,匿名函数$("button:first").click(function(){// location.reload();//刷新，按钮恢复初始状态//$(".box").等于$("#jq>div").// $(".box").addClass("cur");$(".box").css("background","#fe0");});})</script><!-- alt+b自动打开谷歌浏览器 --><script>$("button:eq(1)").click(function(){// $(".son")==$(".box>div")$(".son").addClass("cur");})</script> <script>$("button:nth-child(3)").click(function(){// $(".box:eq(1)>.son").addClass("cur");$(".box:eq(1) .son").addClass("cur");})</script><script>// 改变所有小盒子里的文字的内容——按钮4$("button:nth-child(4)").click(function(){$(".son").html("wsw");})</script><script>// 改变所有的大盒子里的第二个小盒子——按钮5$("button:nth-child(5)").click(function(){// $(".box>nth-child(1)").addClass("cur");$(".box .son:nth-child(2)").css("background","#fe0");// $(".box .son:eq(1)").addClass("cur");只是第一个大盒子里的第二个小盒子不是所有})</script><script>// 改变第三个大盒子里的第二个小盒子的内容——按钮6$("button:nth-child(6)").click(function(){$(".box:eq(2) .son:eq(1)").html("wsw is beautiful!!");})</script><script>// 改变所有大盒子里的第一个和第三个小盒子——按钮7$("button:nth-child(7)").click(function(){$(".box .son:nth-child(1)").addClass("cur");$(".box .son:nth-child(3)").addClass("cur");})</script><script>// 改变span——按钮8$("button:nth-child(8)").click(function(){ $("span").css("color","red");})</script>
</body>
</html>
按钮一
按钮二
按钮三
按钮四
按钮五
按钮六
按钮七
按钮八
完整示例-2：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="../js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="navigation"><ul id="listUL"><li><a href="#">Home</a></li><li><a href="#">News</a><ul class="myHide"><li><a href="#">Lasters News</a></li><li><a href="#">All News</a></li></ul></li><li><a href="#">Sports</a><ul class="myHide"><li><a href="#">Basketball</a></li><li><a href="#">Football</a></li><li><a href="#">Volleyball</a></li></ul></li><li><a href="#">Weather</a><ul class="myHide"><li><a href="#">Today's Weather</a></li><li><a href="#">Forecast</a></li></ul></li><li><a href="#">Contact Me</a></li></ul>
</div>
<script>$(function () {// 改变所有的菜单$("a").css("background","#bfa");// 只改变一级菜单$("#listUL>li>a").css("background","#bfa");// 只改变二级菜单$("li li a").css("background","#bfa");// 改变第二个 一级菜单$("#listUL>li:eq(1)>a").css("background","#bfa");//改变所有的二级菜单的第一项$("li li:nth-child(1)>a").css("background","#bfa");})
</script>
</body>
</html>
2019-3-4
1.点击之后span标签的内的0数字跟随变化，并且每次点击出现一个div并展示其中到达的次数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="js/jquery-3.3.1.js"></script><style>.box{width: 150px;height: 150px;border: 1px solid #c00;text-align: center;line-height: 150px;font-size: 50px;margin: 8px;float: left;}body{height: 3000px;}</style>
</head>
<body><h1>网页中一个有 <span>0</span>个盒子</h1><script>// ready缩写$(function(){// 事件响应，点击网页发生// alert("111");//判断jq是否引入成功// 点击之后span标签的内的0数字跟随变化$("body").click(function(){var n=$(".box").length+1;// var str ="<div class='box'>"+"1"+"</div>">";var str ="<div class='box'>"+($(".box").length+1)+"</div>"$("body").append(str);//append append() 方法在被选元素的结尾（仍然在内部）插入指定内容。$("span").html(n);// 点击之后span标签的内的0数字跟随变化$("span").text(n);}) });</script>
</body>
</html>
2.链式操作
要求：判断文本框的内容是否为空；空不添加，不空添加
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>属性选择器</title><script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){$("#button").click(function(){var sr=$("#dishname").val();//没有参数是get，有参数是setif(sr!=""){$("ul").append("<li>"+sr+"</li");$("#dishname").val("").focus();//链式操作}})
});
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action=""><input name="dishname" type="text" id="dishname" /><input type="button" name="button" id="button" value="添加菜单" />
</form>
<ul><li>糖醋排骨</li><li>圆笼粉蒸肉</li><li>泡菜鱼</li><li>板栗烧鸡</li><li>麻婆豆腐</li>
</ul>
</body>
</html>
3.addClass removeClass
<!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>jQuery hello world</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){$(".datalist li").click(function() {// alert("ddd");$(this).siblings('li').removeClass('yellow'); $(this).addClass('yellow'); });
});
</script>
<style type="text/css">.yellow{background-color: #FF0;color:blue;
}
.yellow:hover{background-color: palevioletred;color:#fff;
}
li {font-size: 14px;line-height: 30px;background-color: #0FF;height: 30px;width: 100px;border: 1px solid #033;text-align: center;list-style-type: none;
}
</style></head><body>
<ul class="datalist"><li>北京</li><li>太原</li><li>沈阳</li><li>苏州</li><li>大连</li><li>青岛</li><li>济南</li><li>西安</li>
</ul>
</body>
</html>
4.实现 列表内容的下拉
<!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: 0px;padding: 0px;}a {color: #12438E;font-size: 12px;text-decoration: none;}ul {height: 582px;overflow: hidden;list-style-type: none;}.none {display: none;}#box {border: 1px solid #C3E1FF;height: 582px;overflow: hidden;width: 238px;margin: 20px;}img {border-top-style: none;border-right-style: none;border-bottom-style: none;border-left-style: none;}li {border-bottom: 1px solid #C3E1FF;height: 35px;overflow: hidden;padding-left: 8px;width: 230px;line-height: 36px;clear: both;}.price_d {color: #CC3300;float: right;font: bold 14px Arial;margin-top: 10px;text-align: left;width: 74px;}.now {height: 238px;line-height: 18px;padding-top: 20px;position: relative;}.pic {display: block;height: 150px;margin: 0 auto;overflow: hidden;width: 150px;}.number {background: url("pic/title_shuma.png") no-repeat scroll -154px -105px transparent;color: #FFFFFF;display: block;height: 14px;left: 11px;overflow: hidden;position: absolute;text-align: center;top: 20px;width: 14px;font-size: 10px;line-height: 14px;font-weight: bold;}.name {display: block;height: 36px;margin: 10px auto 3px;overflow: hidden;width: 200px;}.price {color: #CC3300;display: block;font: bold 26px/26px "宋体";margin: 0 auto;width: 200px;}.price_m {background: url("pic/bg_del.png") repeat-x scroll 0 9px transparent;color: #9C9C9C;font: 12px Arial;margin-left: 8px;}.price_d {color: #CC3300;float: right;text-align: left;width: 74px;font-family: Arial;font-size: 14px;font-weight: bold;margin-bottom: 10px;}--></style><script language="javascript" src="jquery.min.js"></script><script language="javascript">$(function () {/* 链式操作 */$("#box li:odd").mouseover(function () {$("#box li:odd").show().prev().hide().removeClass("now");$(this).hide().prev().show().addClass("now");});});</script>
</head><body><div id="box"><ul><li class="now"><span class="number">1</span><span class="pic"><a href="#"><img width="150" height="150" src="pic/1.jpg"></a></span><span class="name"><a href="#">（秒杀）SEENDA new ipad3 ipad2 皮质保护套 超薄皮套带智能休眠</a></span><span class="price">¥68.00<span class="price_m">¥158.00</span></span></li><li class="none"><span class="price_d"><b>¥</b>68.00</span>1、<a href="#">（秒杀）SEENDA new i</a></li><li class="none"><span class="number">2</span><span class="pic"><a href="#"><img width="150px" height="150px" src="pic/2.jpg"></a></span><span class="name"><a href="#">（秒杀）SEENDA new ipad3 ipad2 皮质保护套 超薄皮套带智能休眠</a></span><span class="price">¥68.00<span class="price_m">¥158.00</span></span></li><li><span class="price_d">¥69.00</span>2、<a href="#">（秒杀）SEENDA new i</a></li><li class="none"><span class="number">3</span><span class="pic"><a href="#"><img width="150px" height="150px" src="pic/3.jpg"></a></span><span class="name"><a href="#">（秒杀）SEENDA new ipad3 ipad2 皮质保护套 超薄皮套带智能休眠</a></span><span class="price">¥68.00<span class="price_m">¥158.00</span></span></li><li><span class="price_d">¥68.00</span>3、<a href="#">（秒杀）SEENDA new i</a></li><li class="none"><span class="number">4</span><span class="pic"><a href="#"><img width="150px" height="150px" src="pic/4.jpg"></a></span><span class="name"><a href="#">（秒杀）SEENDA new ipad3 ipad2 皮质保护套 超薄皮套带智能休眠</a></span><span class="price">¥68.00<span class="price_m">¥158.00</span></span></li><li><span class="price_d">¥68.00</span>4、<a href="#">（秒杀）SEENDA new i</a></li><li class="none"><span class="number">5</span><span class="pic"><a href="#"><img width="150px" height="150px" src="pic/5.jpg"></a></span><span class="name"><a href="#">（秒杀）SEENDA new ipad3 ipad2 皮质保护套 超薄皮套带智能休眠</a></span><span class="price">¥68.00<span class="price_m">¥158.00</span></span></li><li><span class="price_d">¥68.00</span>5、<a href="#">（秒杀）SEENDA new i</a></li><li class="none"><span class="number">6</span><span class="pic"><a href="#"><img width="150px" height="150px" src="pic/6.jpg"></a></span><span class="name"><a href="#">（秒杀）SEENDA new ipad3 ipad2 皮质保护套 超薄皮套带智能休眠</a></span><span class="price">¥68.00<span class="price_m">¥158.00</span></span></li><li><span class="price_d">¥68.00</span>6、<a href="#">（秒杀）SEENDA new i</a></li><li class="none"><span class="number">7</span><span class="pic"><a href="#"><img width="150" height="150" src="pic/7.jpg"></a></span><span class="name"><a href="#">（秒杀）SEENDA new ipad3 ipad2 皮质保护套 超薄皮套带智能休眠</a></span><span class="price">¥68.00<span class="price_m">¥158.00</span></span></li><li><span class="price_d">¥68.00</span>7、<a href="#">（秒杀）SEENDA new i</a></li><li class="none"><span class="number">8</span><span class="pic"><a href="#"><img width="150px" height="150px"src="pic/8.jpg"/></a></span><spanclass="name"><a href="#">（秒杀）SEENDA new ipad3 ipad2 皮质保护套 超薄皮套带智能休眠</a></span><span class="price">¥68.00<span class="price_m">¥158.00</span></span></li><li><span class="price_d">¥68.00</span>8、<a href="#">（秒杀）SEENDA new i</a></li><li class="none"><span class="number">9</span><span class="pic"><a href="#"><img width="150px" height="150px" src="pic/9.jpg"></a></span><span class="name"><a href="#">（秒杀）SEENDA new ipad3 ipad2 皮质保护套 超薄皮套带智能休眠</a></span><span class="price">¥68.00<span class="price_m">¥158.00</span></span></li><li><span class="price_d">¥68.00</span>9、<a href="#">（秒杀）SEENDA new i</a></li><li class="none"><span class="number">10</span><span class="pic"><a href="#"><img width="150px" height="150px" src="pic/10.jpg"></a></span><span class="name"><a href="#">（秒杀）SEENDA new ipad3 ipad2 皮质保护套 超薄皮套带智能休眠</a></span><span class="price">¥68.00<span class="price_m">¥158.00</span></span></li><li><span class="price_d">¥68.00</span>10、<a href="#">（秒杀）SEENDA new i</a></li></ul></div>
</body>
</html>
5.鼠标放上显示文字
<!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>hover</title>
<style type="text/css">
<!--a {color: #06346F;font-size: 12px;text-decoration: none;
}.box p {background-color: #FFF;bottom: 0px;color: #303537;font-size: 18px;font-weight: bold;height: 37px;line-height: 37px;text-align: center;width: 100%;position: absolute;left: 0px;filter:alpha(opacity=50); /*ie透明度*/opacity:0.5; /*firefox透明度*/margin: 0px;padding: 0px;display: none;
}
.box {height: 200px;width: 200px;position: relative;z-index: 100;padding: 3px;border: 1px solid #CCC;
}-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){$(".box").mouseover(function(){/* 鼠标放上显示文字 */$(".box>p").show();/* $("this>p").show(); */});$(".box").mouseout(function(){/* $("this>p").hide(); */$(".box>p").hide();});
});
</script>
</head><body>
<div class="box"><img src="img/1.jpg" width="200" height="200" />
<p><a href="#">北京新签证制度落挪威</a></p>
</div>
</body>
</html>
鼠标放上
6.扩展
<!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">
a {color: #06346F;font-size: 12px;text-decoration: none;
}
.box p {background-color: #FFF;bottom: 0px;color: #303537;font-size: 18px;font-weight: bold;height: 37;line-height: 37px;text-align: center;width: 100%;z-index: 10;position: absolute;left: 0px;filter:alpha(opacity=50); /*ie透明度*/opacity:0.5; /*firefox透明度*/margin: 0px;padding: 0px;display: none;
}
.box {height: 200px;width: 200px;position: relative;z-index: 100;float: left;margin: 10px;border: 1px solid #CCC;padding: 4px;
}
.container {width: 1200px;margin-right: auto;margin-left: auto;
}</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){/* $(".box").hover(function(){},function(){}) */$(".box").hover(function(){/* museover */$(".box>p").show();},function(){$(".box>p").hide();})});
</script>
</head><body>
<div class="container">
<div class="box"><img src="img/1.jpg" width="200" height="200" /><p><a href="#">北京新签证制度落挪威</a></p>
</div>
<div class="box"><img src="img/2.jpg" width="200" height="200" />
<p><a href="#">北京新签证制度落挪威</a></p>
</div>
<div class="box"><img src="img/3.jpg" width="200" height="200" />
<p><a href="#">北京新签证制度落挪威</a></p>
</div>
<div class="box"><img src="img/4.jpg" width="200" height="200" />
<p><a href="#">北京新签证制度落挪威</a></p>
</div>
<div class="box"><img src="img/5.jpg" width="200" height="200" />
<p><a href="#">北京新签证制度落挪威</a></p>
</div>
<div class="box"><img src="img/6.jpg" width="200" height="200" />
<p><a href="#">北京新签证制度落挪威</a></p>
</div>
<div class="box"><img src="img/7.jpg" width="200" height="200" />
<p><a href="#">北京新签证制度落挪威</a></p>
</div><div class="box"><img src="img/8.jpg" width="200" height="200" />
<p><a href="#">北京新签证制度落挪威</a></p>
</div><div class="box"><img src="img/9.jpg" width="200" height="200" />
<p><a href="#">北京新签证制度落挪威</a></p>
</div><div class="box"><img src="img/10.jpg" width="200" height="200" />
<p><a href="#">北京新签证制度落挪威</a></p>
</div>
</div></body>
</html>
鼠标放在任意图片上都显示文字，鼠标移开文字都消失
7.这次随机，鼠标放到任意图片上只在当前图片上显示文字，移开只是当前图片上文字消失
<!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">
<!--a {color: #06346F;font-size: 12px;text-decoration: none;
}.box p {background-color: #FFF;bottom: 0px;color: #303537;font-size: 18px;font-weight: bold;height: 37;line-height: 37px;text-align: center;width: 100%;z-index: 10;position: absolute;left: 0px;filter:alpha(opacity=50); /*ie透明度*/opacity:0.5; /*firefox透明度*/margin: 0px;padding: 0px;display: none;
}
.box {height: 200px;width: 200px;position: relative;z-index: 100;float: left;margin: 10px;border: 1px solid #CCC;padding: 4px;
}
.container {width: 1200px;margin-right: auto;margin-left: auto;
}-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){/* $(".box").hover(function(){},function(){}) */$(".box").hover(function(){/* museover当前 */$(this).children("p").show();},function(){$(this).find("p").hide();})});
</script>
</head><body>
<div class="container">
<div class="box"><img src="img/1.jpg" width="200" height="200" /><p><a href="#">北京新签证制度落挪威</a></p>
</div>
<div class="box"><img src="img/2.jpg" width="200" height="200" />
<p><a href="#">北京新签证制度落挪威</a></p>
</div>
<div class="box"><img src="img/3.jpg" width="200" height="200" />
<p><a href="#">北京新签证制度落挪威</a></p>
</div>
<div class="box"><img src="img/4.jpg" width="200" height="200" />
<p><a href="#">北京新签证制度落挪威</a></p>
</div>
<div class="box"><img src="img/5.jpg" width="200" height="200" />
<p><a href="#">北京新签证制度落挪威</a></p>
</div>
<div class="box"><img src="img/6.jpg" width="200" height="200" />
<p><a href="#">北京新签证制度落挪威</a></p>
</div>
<div class="box"><img src="img/7.jpg" width="200" height="200" />
<p><a href="#">北京新签证制度落挪威</a></p>
</div><div class="box"><img src="img/8.jpg" width="200" height="200" />
<p><a href="#">北京新签证制度落挪威</a></p>
</div><div class="box"><img src="img/9.jpg" width="200" height="200" />
<p><a href="#">北京新签证制度落挪威</a></p>
</div><div class="box"><img src="img/10.jpg" width="200" height="200" />
<p><a href="#">北京新签证制度落挪威</a></p>
</div>
</div></body>
</html>
8.tab选项卡-1
<!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">li {line-height: 30px;text-align: center;float: left;height: 30px;width: 100px;list-style-type: none;border-top-width: 1px;border-left-width: 1px;border-top-style: solid;border-left-style: solid;border-top-color: #036;border-left-color: #036;font-size: 14px;font-weight: bold;letter-spacing: 3px;
}
.rightborder {border-right-width: 1px;border-right-style: solid;border-right-color: #036;
}
.none {display: none;
}
.box{height: 200px;width: 302px;border: 1px solid #006;background-color: #eee;clear: both;text-align: center;padding-top: 50px;font-size:150px;
}ul {margin: 0px;padding: 0px;
}
.cur{border-bottom: none;color: blue;font-weight: bold;
}</style>
<script language="javascript" src="jquery.min.js"></script><script language="javascript">
$(function(){$("li").mouseover(function(){/* index从0开始索引 */var index = $("li").index(this);/* eq等于，当前显示，其他隐藏（兄弟） */$(".box").eq(index).show().siblings(".box").hide();$(".box").hide().eq(index).show();$("li").removeClass("cur").eq(index).addClass("cur"); });
});
</script>
</head>
<body>
<ul><li>国内</li><li>国际</li><li class="rightborder">综合</li>
</ul>
<div class="box">1</div>
<div class="box none">2</div>
<div class="box none">3</div></body>
</html>
9.tab选项卡-2
<!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">
<!--
li {line-height: 30px;text-align: center;float: left;height: 30px;width: 100px;list-style-type: none;border-top-width: 1px;border-left-width: 1px;border-top-style: solid;border-left-style: solid;border-top-color: #036;border-left-color: #036;font-size: 14px;font-weight: bold;letter-spacing: 3px;
}
.rightborder {border-right-width: 1px;border-right-style: solid;border-right-color: #036;
}
.none {display: none;
}
.box{height: 200px;width: 302px;border: 1px solid #006;background-color: #eee;clear: both;text-align: center;padding-top: 50px;font-size:150px;
}ul {margin: 0px;padding: 0px;
}
.cur{border-bottom: none;color: blue;font-weight: bold;
}
--></style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){$("li").mouseover(function(){/* index从0开始索引 */var index = $("li").index(this);/* eq等于，当前显示，其他隐藏（兄弟） */$(".box").eq(index).show().siblings(".box").hide();/* 点击哪里哪里变化 */$(this).addClass("cur").siblings().removeClass("cur");});
});
</script>
</head>
<body>
<ul><li>国内</li><li>国际</li><li class="rightborder">综合</li>
</ul>
<div class="box">1</div>
<div class="box none">2</div>
<div class="box none">3</div></body>
</html>10.点击的时候不断切换toggleClass
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>toggleClass()方法</title>
<style type="text/css">
<!--
li{color:blue;font-size:16px;margin:0px;padding:5px;height: 30px;width: 100px;text-align: center;line-height: 30px;list-style-type: none;border-top-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-top-style: none;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;border-top-color: #009;border-right-color: #009;border-bottom-color: #009;border-left-color: #009;
}
.top {border: 1px solid #006;
}
.highlight{background-color:#FFFF00;font-weight: bold;color: #906;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){$("li").click(function(){/* //点击的时候不断切换 *//* 点击该块 可以变化 */$(this).toggleClass("highlight");});
});
</script>
</head>
<body>
<ul><li class="top">新闻</li><li>娱乐</li><li>体育</li><li>理财</li><li>育儿</li><li>汽车</li>
</ul>
</body>
</html>
点击之后：
再次点击样式将消失
11.toString字符串形式，字符0可以处理
点击哪个模块显示对应的编码数字
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>index(element)方法</title>
<style type="text/css">
<!--
body{font-size:12px;font-family:Arial, Helvetica, sans-serif;
}
div{border:1px solid #003a75;background:#fcff9f;margin:5px; text-align:center;height:100px; width:100px;float:left;font-size:20px;font-weight:bold;text-align:center;line-height:100px;}
p{ clear:both;font-size:28px;color:blue;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){//click()添加点击事件$("div").click(function(){//将块本身用this关键字传入，从而获取自身的序号var index = $("div").index(this);/* toString字符串形式，字符0可以处理 */$("span").html(index.toString());});
});
</script>
</head>
<body>
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<p>点击的div块序号为：<span></span></p>
</body>
</html>
2019-3.18
1.according
<!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>特效16</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="js/jquery-1.4.2.min.js"></script><script type="">$(function () {$(".tupian .texiao").mouseover(function () {var index=$(this).index()console.log(index)$('.word').eq(index).hide()$('.hot').eq(index).show()});$(".tupian .texiao").mouseleave(function () {var index=$(this).index()console.log(index)$('.word').eq(index).show()$('.hot').eq(index).hide()});});</script>
</head><body>
<div id="ranking"> <strong class="changjian">一周销量排行榜</strong><div class="tupian"><!--1--><div class="texiao"><div class="word" style="display:none"><i class="now">1</i><a href="http://www.ranking.com/pic/2496.html" class="wql">苹果（Apple） iPad mini MD</a></div><div class="hot" ><i class="hover">1</i><a href="http://item.jd.com/761146.html" class="anli_tu" target="_blank"><img src="data:images/ranking1.jpg" width="71" height="57"/></a><div class="info"> <p class="detail">苹果（Apple） iPad mini MD528CH </p><p class="detail"><span style="color:#FF0000">￥2098.00</span> </p></div></div></div><!--1--><div class="texiao"><div class="word" ><i class="now">2</i><a href="http://item.jd.com/996957.html" class="wql" target="_blank">苹果（Apple）iPad Air MD78</a></div><div class="hot" style="display:none"><i class="hover">2</i><a href="http://item.jd.com/996957.html" target="_blank" class="anli_tu"><img src="data:images/ranking2.jpg" width="71" height="57"/></a><div class="info"><p class="detail">苹果（Apple）iPad Air MD785CH/A</a></p><p class="detail"><span style="color:#FF0000">￥3588.00
</span> </p></div></div></div><!--1--><div class="texiao"><div class="word" ><i class="now">3</i><a target="_blank" href="http://item.jd.com/984225.html" class="wql">七彩虹（Colorfly） E708 Q2</a></div><div class="hot" style="display:none"><i class="hover">3</i><a target="_blank" href="http://item.jd.com/984225.html" class="anli_tu"><img src="data:images/ranking3.jpg" width="71" height="57"/></a><div class="info"> <p class="detail">七彩虹（Colorfly） E708 Q2 </p><p class="detail"><span style="color:#FF0000">￥499.00
</span> </p></div></div></div><!--1--><div class="texiao"><div class="word" ><i class="now">4</i><a target="_blank" href="http://item.jd.com/959457.html" class="wql">昂达（ONDA） V819 mini 7.9</a></div><div class="hot" style="display:none"><i class="hover">4</i><a target="_blank" href="http://item.jd.com/959457.html" class="anli_tu"><img src="data:images/ranking4.jpg" width="71" height="57"/></a><div class="info"><p class="detail">昂达（ONDA） V819 mini 7.9</p><p class="detail"><span style="color:#FF0000">￥699.00
</span> </p></div></div></div><!--1--><div class="texiao"><div class="word" ><i class="now">5</i><a target="_blank" href="http://item.jd.com/932121.html" class="wql">爱国者(aigo)PAD707 双核 7</a></div><div class="hot" style="display:none"><i class="hover">5</i><a target="_blank" href="http://item.jd.com/932121.html" class="anli_tu"><img src="data:images/ranking5.jpg" width="71" height="57"/></a><div class="info"> <p class="detail"> 爱国者(aigo)PAD707 双核 7英寸</p><p class="detail"><span style="color:#FF0000">￥299.00</span>
</p> </div></div></div><!--1--><div class="texiao"><div class="word" ><i class="now">6</i><a target="_blank" href="http://item.jd.com/723171.html" class="wql">华为MediaPad 10 FHD 101u </a></div><div class="hot" style="display:none"><i class="hover">6</i><a target="_blank" href="http://item.jd.com/723171.html" class="anli_tu"><img src="data:images/ranking6.jpg" width="71" height="57"/></a><div class="info"> <strong class="name"><p class="detail">华为MediaPad 10 FHD 101u 10英寸平板电脑</p><p class="detail"><span style="color:#FF0000">￥2599.00</span></p></div></div></div></div>
</div>
<script language="javascript"></script>
</body>
</html>
<!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: 0px;padding: 0px;}a {color: #12438E;font-size: 12px;text-decoration: none;}ul {height: 350px;overflow: hidden;list-style-type: none;}.none {display: none;}#box {border-bottom: 1px solid #ccc;border-right: 1px solid #ccc;border-left: 1px solid #ccc;border-top: none;height: 350px;overflow: hidden;width: 238px;}img {border-top-style: none;border-right-style: none;border-bottom-style: none;border-left-style: none;}li {border-bottom: 1px solid #ccc;height: 35px;overflow: hidden;text-align: center;padding-left: 8px;width: 230px;line-height: 36px;clear: both;}.price_d {color: #CC3300;float: right;font: bold 14px Arial;margin-top: 10px;text-align: left;width: 74px;}.now {height: 78px;line-height: 18px;padding-top: 20px;position: relative;}.pic {display: block;height: 60px;margin-left: 30px;overflow: hidden;width: 60px;}.number {background: url("../javascript/常见效果/according/pic/title_shuma.png") no-repeat scroll -154px -105px transparent;color: #FFFFFF;display: block;height: 25px;left: 11px;overflow: hidden;position: absolute;text-align: center;top: 20px;width: 25px;font-size: 10px;line-height: 14px;font-weight: bold;}.name {display: block;height: 36px;overflow: hidden;margin-left: 90px;margin-top: -60px;width: 120px;}.price {color: #CC3300;display: block;font: bold 14px/14px "宋体";width: 100px;margin-left: 90px;}.price_m {background: url("../javascript/常见效果/according/pic/bg_del.png") repeat-x scroll 0 9px transparent;color: #9C9C9C;font: 12px Arial;margin-left: 8px;}.price_d {color: #CC3300;float: right;text-align: left;width: 74px;font-family: Arial;font-size: 14px;font-weight: bold;margin-bottom: 10px;}.top {width: 228px;height: 30px;text-align: left;line-height: 30px;color: #000;font-size: 14px;border-top: 1px solid #CCC;border-left: 1px solid #CCC;border-right: 1px solid #CCC;font-weight: bold;background-image: url(16/img/back.png);background-repeat: repeat;padding-left: 10px;}.none a:hover {text-decoration: underline;color: #F00;}.now a:hover {text-decoration: underline;color: #F00;}--></style><script language="javascript" src="jquery.min.js"></script><script language="javascript">$(function () {$("#box li:odd").mouseover(function () {$("#box li:odd").show().prev().hide().removeClass("now");$(this).hide().prev().show().addClass("now");});});</script>
</head><body>
<div class="top">本周排行
</div><div id="box"><ul><li class="now"><span class="number"><img src="16/img/1r.png" width="27" height="28"/></span><span class="pic"><a href="#"><img src="16/img/1.jpg" width="50" height="50"/></a></span><span class="name"><a href="#">（秒杀）SEENDA new ipad3 ipad2</a></span><span class="price">¥1998.00</span></li><li class="none"><img src="16/img/1r.png" width="27" height="28"/><spanclass="price_d"><b>¥</b>1998.00</span><span class="n"></span><a href="#">（秒杀）SEENDA new i</a></li><li class="none"><span class="number"><img src="16/img/2.png" width="26" height="29"/></span><span class="pic"><a href="#"><img src="16/img/2.jpg" width="50" height="50"/></a></span><span class="name"><a href="#">（秒杀）SEENDA new ipad3 ipad2</a></span><span class="price">¥1268.00</span></li><li><span class="price_d">¥1268.00</span><img src="16/img/2.png" width="26" height="29"/><a href="#">（秒杀）SEENDAnew i</a></li><li class="none"><span class="number"><img src="16/img/3.png" width="27" height="25"/></span><span class="pic"><a href="#"><img src="16/img/3.jpg" width="50" height="50"/></a></span><span class="name"><a href="#">（秒杀）SEENDA new ipad3 ipad2</a></span><span class="price">¥1368.00</span></li><li><span class="price_d">¥1368.00</span><img src="16/img/3.png" width="27" height="25"/><a href="#">（秒杀）SEENDAnew i</a></li><li class="none"><span class="number"><img src="16/img/4.png" width="26" height="28"/></span><span class="pic"><a href="#"><img src="16/img/4.jpg" width="50" height="50"/></a></span><span class="name"><a href="#">（秒杀）SEENDA new ipad3 ipad2</a></span><span class="price">¥1468.00</span></li><li><span class="price_d">¥1468.00</span><img src="16/img/4.png" width="26" height="28"/><a href="#">（秒杀）SEENDAnew i</a></li><li class="none"><span class="number"><img src="16/img/5.png" width="26" height="26"/></span><span class="pic"><a href="#"><img src="16/img/5.jpg" width="50" height="50"/></a></span><span class="name"><a href="#">（秒杀）SEENDA new ipad3 ipad2</a></span><span class="price">¥1968.00</span></li><li><span class="price_d">¥1968.00</span><img src="16/img/5.png" width="26" height="26"/><a href="#">（秒杀）SEENDAnew i</a></li><li class="none"><span class="number"><img src="16/img/6.png" width="23" height="25"/></span><span class="pic"><a href="#"><img src="16/img/6.jpg" width="50" height="50"/></a></span><span class="name"><a href="#">（秒杀）SEENDA new ipad3 ipad2 </a></span><span class="price">¥2068.00</span></li><li><span class="price_d">¥2068.00</span><img src="16/img/6.png" width="23" height="25"/><a href="#">（秒杀）SEENDAnew i</a></li><li class="none"><span class="number"><img src="16/img/7.png" width="25" height="25"/></span><span class="pic"><a href="#"><img src="16/img/7.jpg" width="50" height="50"/></a></span><span class="name"><a href="#">（秒杀）SEENDA new ipad3 ipad2</a></span><span class="price">¥2128.00</span></li><li><span class="price_d">¥2168.00</span><img src="16/img/7.png" width="25" height="25"/><a href="#">（秒杀）SEENDAnew i</a></li><li class="none"><span class="number"><img src="16/img/8.png" width="25" height="25"/></span><span class="pic"><ahref="#"><img src="16/img/8.jpg" width="50" height="50"/></a></span><span class="name"><a href="#">（秒杀）SEENDA new ipad3 ipad2</a></span><span class="price">¥2168.00</span></li><li><span class="price_d">¥2168.00</span><img src="16/img/8.png" width="25" height="25"/><a href="#">（秒杀）SEENDAnew i</a></li></ul></div>
</body>
</html>
高级网页设计Class-jQuery相关推荐
- html网页设计课程的思维导图,UI设计初级教程学哪些？课程大纲和思维导图分享给你！...
如果你现在还不会ps一张照片,那么说明你落伍了,如果一个企业没有一个专业的UI设计师,那么这个企业的前端后端产品应该不会太美,所以,UI设计师是一个企业的灵魂,有了设计师,一切都变得更美了,UI设计行 ...
- 计算机在网站设计中的应用,图形设计在计算机网页设计中的应用研究.doc
图形设计在计算机网页设计中的应用研究 摘 要:计算机网页设计作为交叉性学科,既涉及计算机科学技术,还涵盖图形艺术等内容,即优秀的网页设计者应同时具备上述两项能力.同时,图形设计以核心角色,在计算机网页 ...
- 网页设计作业 酒店公寓网站设计——高级酒店公寓网页(4页) HTML+CSS+JavaScript 旅游主题度假酒店
HTML5期末大作业:酒店公寓网站设计--高级酒店公寓网页(4页) HTML+CSS+JavaScript 旅游主题度假酒店 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠 ...
- 25个强大的 jQuery 砌体网页设计作品
砌体(Masonry)是一种网页排布形式,类似于砖砌体.石砌体建造的结构,如下图,左侧是传统的使用CSS浮动实现的布局效果,右图是砌体排布.砌体布局在不规则的网页内容块布局中非常有用,能够充分利用网页 ...
- Python+django网页设计入门（12）：使用Bootstrap和jQuery
文中有源码下载方式,请仔细寻找. 前导课程: Python+django网页设计入门(11):在线考试与自动评分 Python+django网页设计入门(10):分页显示 Python+django网 ...
- 配色高手！一组有范又高级的深色网页设计案例解析
我们日常所看到的网页设计大多是浅色系和亮色系,作为神秘色系的黑色总给人一种严肃的感觉,它可以很低调,也可以很奢华,但永不过时. 深色网站总是给人以个性而充满高品质的感觉.浅色或亮色文本或图片,搭配深色 ...
- 后台模板 开源_3个开源样板网页设计模板
后台模板 开源 在过去,从头开始创建网站很容易. 有了HTML的基本知识,也许还有一点CSS,您就可以毫不费力地构建一个功能强大的网页. 将其扔到您的Web服务器上,您就很好了. < html ...
- HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(HTML+CSS)~动漫主题html5网页模板-HTML期末作业课程设计期末大作业动漫主题html5网页模板-html5网页设计源码...
HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(DIV+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没 ...
- HTML网页设计期末课程大作业 ~中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码...
HTML网页设计期末课程大作业 ~ 中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
最新文章
- 经典 | 深度学习的7大实用技巧
- 必须要改变这样的生活
- NASM汇编helloworld图解
- ubuntu 14.04安装chrome浏览器
- 部署支持php和Redis的Nginx服务器
- Linux备份MySQL xshell_linux shell脚本备份mysql数据库
- 【笔记】Automatic recognition of soybean leaf diseases using UAV images and deep convolutional neural ne
- Spring小学习小结2
- 全国哀悼日，英来网停站一天。
- 最好用的临时邮箱网站
- R学习连续变量之间的关系
- 人工智能助力三维几何自动化建模
- 纯css svg 改变图片颜色 ios android 小程序
- 天地孤影任我行（东邪西毒电影原声曲）铃声 天地孤影任我行（...
- 计算机和通信技术对未来的,谈计算机技术与通信技术的发展
- ASM和AAM的一些代码资源
- JSON與ajax使用方法
- 系统架构设计笔记（15）—— 网络架构与协议
- The road you are trudging is bound for loneliness.（前行的道路注定孤独）
- 2022年全国职业院校技能大赛（中职组）网络安全竞赛试题（10）（总分100分）