java-Web（Jquery选择器）作业

于 2020-09-24 15:14:13 发布
阅读量486 收藏 1
点赞数 1
文章标签： html css jquery javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jxcncb/article/details/108774788
版权

实现页面：
在这里插入图片描述实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>当当</title>
		<style>
			li{
				list-style: none;
			}
			.h4{
				background-color: orange;
				border-spacing: none;
				border-color: black;
				color: white;
			}
			
			.d3{
				background-color: antiquewhite;
				border: thin;
				
			}
			
			.h1{
				background-color: antiquewhite;
			}
			div{
				position: absolute;
			}
		</style>
		<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
		<script>
			$(function(){
				$("li").mouseover(function(){
					$(this).children("div").show();
				}).mouseout(function(){
					$(this).children("div").hide();
				})
			})
		</script>
	</head>
	<body>
		<div>
			<table width="1000px" style="text-align: center;" align="center">
				<tr>
					<td colspan="2">
						<img src="img/butter.png" />收藏当当&nbsp;|
					</td>
					<td colspan="3">
						您好，jeannzez
					</td>
					<td>[退出登录]</td>
					<td></td>
					<td></td>
					
					<td></td>
					<td></td>
					<td style="text-align: right;">
						<img src="img/car.png" />购物车
					</td>
					<td>
						<ul>
							<li>我的当当
								<div style="border-color:#EE7304; border-style:solid ; text-align: right;" align="right">我的订单<br />
								  我的收藏<br />
								    我的礼品<br />
								  我的积分<br />
								  我的余额</div></li>
							
						</ul>
					</td>
				</tr>
				
				<tr>
					<td colspan="2" rowspan="2">
						<img src="img/当当.png" />
					</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
				
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td class="d3">唯品会</td>
					<td class="d3">数字馆</td>
					<td class="d3">都看阅读器</td>
					<td></td>
				</tr>
				
				<tr class="h4">
					<td>首页</td>
					<td>图书</td>
					<td>音像</td>
					<td>孕</td>
					<td>婴</td>
					<td>童</td>
					<td>美妆</td>
					<td>珠宝</td>
					<td>酒</td>
					<td>手机</td>
					<td>数码</td>
					<td>电脑</td>
				</tr>
			</table>
		</div>
	</body>
</html>

实现效果：
在这里插入图片描述实现页面：
在这里插入图片描述

在这里插入图片描述
实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>选择器的使用</title>
		<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
		<script>
			$(function(){
				$("#two").css({"color":"red"});
				$("#four>span").css({"font-size":"24px","color":"red","font-weight":"bload"});
				$("#four>a").css({"color":"#cccccc","text-decoration":"line-through"});
				$("#seven").css({"color":"red"});
				$(".six").css({"color":"red"});
				$(".eight").css({"color":"red"});
				$("#seven span").css({"color":"white","background-color":"red","padding":"1px 5px","margin-right":"5px"});
				$(".eight span").css({"color":"white","background-color":"red","padding":"1px 5px","margin-right":"5px"});
				$("#nine span").css({"color":"white","background-color":"red","padding":"1px 5px","margin-right":"5px"});
			})
			$(function(){
				$(".six").mouseover(function(){
					$(this).children("div").show();
				}).mouseout(function(){
					$(this).children("div").hide();
				})
				
			})
		</script>
	</head>
	<body>
		
			<table align="center">
				<tr>
					<td rowspan="9">
						<img src="img/book.png" />
					</td>
					<td>岛上书店【荐书联盟推荐】&nbsp;[The Storied Life of A.J.Fikry]</td>
				</tr>
				
				<tr>
					<td id="two">自营图书几十万畅销品种阶梯满减，抽奖赢魅蓝note3、JDRead阅读器！</td>
				</tr>
				
				<tr>
					<td>[美]加·泽文（Gabrielle Zevin）著：孙仲新，李玉瑶 译</td>
				</tr>
				
				<tr>
					<td id="four">京东价：<span>￥24.10</span>[6.9折]<a>[定价：￥35.00]</a>（降价通知）</td>
				</tr>
				
				<tr>
					<td>促销信息：手机专享价 ￥9.90</td>
				</tr>
				
				<tr>
					<td class="six">以下促销可在购物车任选其一</td>
				</tr>
				
				<div>	
				
				<tr>
					<td id="seven"><span>加价购</span> 满99.00元另加6.18元即可在购物车换购热销商品</td>
				</tr>
				
				<tr>
					<td class="eight"><span>满减</span> 满100.00减20.00，满200.00减60.00，满300.00减100.00</td>
				</tr>
				
				<tr>
					<td id="nine">领 劵：<span>105-6</span> <span>200-16</span></td>
				</tr>
				</div>
			</table>
	
	</body>
</html>

实现效果：
在这里插入图片描述
实现页面：
在这里插入图片描述

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#container{
				width: 900px;
				margin: 0px auto;
			}
			
			#main{
				
				height: 700px;
			}
			
			#left{
				width: 30%;
				height: 100%;
				float: left;
			}
			
			#right{
				width: 70%;
				height: 100%;
				float: left;
			}
			
			li{
				list-style: none;
				font-size: 18px;
				line-height: 40px;
			}
			
			#d1{
				font-weight: bolder;
				font-size: 25px;
				padding-top: 10px;
				padding-bottom: 30px;
				
			}
		</style>
		
		<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
		<script>
			$(function(){
				$("#d1").mousedown(function(){
					$("#lable").css({"color":"#FF0099","font-weight":"bloder"});
				})
			})
			
			$(function(){
				$("#d2").mousedown(function(){
					$("#d3").css({"font-weight":"bolder"});
				
				})
			})
			
			$(function(){
				$("#d4").mousedown(function(){
					$("#d5").css({"background-color":"#E0F8EA","color":"#10A14B","padding":"2px 8px"});
					$("#d6").css({"background-color":"#E0F8EA","color":"#10A14B","padding":"2px 8px"});
				})
			})
			
			function first(){
				var a = document.getElementsByClassName("sele");
				alert("收藏成功！");
			}
		</script>
	</head>
	<body>
		<div id="container">
			<div id="mian">
				<div id="left">
					<img src="img/fwiyuanwurao.png" />
				</div>
				
				<div id="right">
					<ul>
						<li id="d1">非缘勿扰</li>
						<div id="lable">
							<li>主演：苏有朋/秦岚/傅艺伟等</li>
							<li><span id="d2">导演：</span><span id="d3">赖水清</span></li>
							<li><span id="d4">标签：</span><span id="d5">苏有朋</span> 国产电视剧<span id="d6"> 2013</span> 连续剧</li>
							<li>剧情：当代都市，大年女刘林、杨阳都在寻找自己的如意郎君，</li>
							<li>刘林偶遇陆氏房地产总裁路西诺，两人成了欢喜冤家遭到暗恋</li>
							<li>西诺的丁娟的嫉恨。。。<a href="https://baike.baidu.com/item/非缘勿扰/8311208?fr=aladdin" >点击了解更多</a></li>
						</div>
					</ul>
				</div>
			</div>
			
			<div id="footer">
				<img src="img/collect.png" class="sele" onclick="first()" />
				<img src="img/promptly.png" />
			</div>
		</div>
	</body>
</html>

实现效果：
在这里插入图片描述
实现页面：
在这里插入图片描述

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>隔行变色</title>
		<style>
			#h1{
				background-color: blue;
				color: white;
			}
			td{
				text-align: center;
			}
		</style>
		
		<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
		<script>
			$(function(){
				$("td:even").css({"background-color":"#eff7d1"});
				$("td:odd").css({"background-color":"#f7e195"});
			})
		</script>
	</head>
	<body>
		<table width="900px" align="center">
			<tr id="h1">
				<th>商品</th>
				<th>&nbsp;</th>
				<th>单价</th>
				<th>数量</th>
				<th>操作</th>
			</tr>
			
			<tr>
				<td>
					<img src="img/coat1.png" />
					
				</td>
				<td style="text-decoration: underline;">丹慕妮通勤波点印花毛衣</td>
				<td>180.0</td>
				<td>3</td>
				<td style="text-decoration: underline;">删除</td>
			</tr>
			
			<tr>
				<td>
					<img src="img/coat2.png" />
					
				</td>
				<td style="text-decoration: underline;">预售太平洋女装连衣裙</td>
				<td>765.0</td>
				<td>4</td>
				<td style="text-decoration: underline;">删除</td>
			</tr>
			
			<tr>
				<td>
					<img src="img/coat3.png" />
					
				</td>
				<td style="text-decoration: underline;">丹慕妮通勤红色小外套</td>
				<td>456.0</td>
				<td>2</td>
				<td style="text-decoration: underline;">删除</td>
			</tr>
			
			<tr>
				<td>
					<img src="img/coat4.png" />
					
				</td>
				<td style="text-decoration: underline;">漫巴森秋装新款套头衫</td>
				<td>140.0</td>
				<td>1</td>
				<td style="text-decoration: underline;">删除</td>
			</tr>
		</table>
	</body>
</html>

实现效果：
在这里插入图片描述

实现页面：
在这里插入图片描述

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>热播视频</title>
		<style>
			#container{
				width: 900px;
				margin: 0px auto;
			}
			
			#main{
				
				height: 262px;
			}
			
			#left{
				width: 40%;
				height: 100%;
				float: left;
			}
			
			#right{
				width: 40%;
				height: 100%;
				float: left;
				line-height: 30px;
			}
			
			#header{
				font-size: 25px;
				font-weight: bolder;
			}
			
			li{
				list-style: none;
			}
			
			a{
				width: 10px;
				
			}
			
			#haha{
				float: left;
				line-height: 30px;
				background-color: #f0f0f0;
				height: 262px;
				color: #f0a30f ;
				font-weight: bolder;
			}
			
			#gaga{
				background-color: yellow;
			}
		</style>
		
		<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
		<script>
			$(function(){
				/*$("#left:not(ol)").css({"padding-right":"10px"});*/
				$("#right:last").css({"background-color":"#f0f0f0"})
				$("#d1").css({"background-color":"#f0a30f"});
				$("#d2").css({"background-color":"#f0a30f"});
				$("#d3").css({"background-color":"#f0a30f"});
				$("#d4").css({"background-color":"#a4a3a3"});
				$("#d5").css({"background-color":"#a4a3a3"});
				$("#d6").css({"background-color":"#a4a3a3"});
				$("#d7").css({"background-color":"#a4a3a3"});
				$("#d8").css({"background-color":"#a4a3a3"});
				$("#gaga").mouseover(function(){
					$("#haha").children("div").show();
				}).mouseout(function(){
					$("#haha").children("div").hide();
				})
			})
		</script>
	</head>
	<body>
		<div id="container">
			<div id="header">
				全网热播视频
			</div>
			
			<div id="main">
				<div id="left">
					<img src="img/video.png" />	
				</div >
				
				<div id="right">
					<ul>
						<li><a id="d1">1</a>三八线</li>
						<li><span id="d2">2</span>&nbsp;吉祥天宝</li>
						<li><span id="d3">3</span>&nbsp;亲爱的翻译官</li>
						<li><span id="d4">4</span>&nbsp;仙剑云之凡</li>
						<li><span id="d5">5</span>&nbsp;权利的游戏第五季&nbsp;<a id="gaga">加入看单</a></li>
						<li><span id="d6">6</span>&nbsp;琅琊榜</li>
						<li><span id="d7">7</span>&nbsp;那年青春我们正好</li>
						<li><span id="d8">8</span>&nbsp;乡村爱情8（上）</li>
					</ul>
				</div>
				<div id="haha">
			<ul>
				<li>↓</li>
				<li>↓</li>
				<li>↑</li>
				<li>↓</li>
				<li>↑</li>
				<li>↑</li>
				<li>↑</li>
				<li>↓</li>
			</ul>
		</div>
			</div>
		</div>
		
		
	</body>
</html>

实现效果：
在这里插入图片描述实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>级联</title>
		<script>
			function checkcity(){
				var province=document.getElementById("province").value;
				var city=document.getElementById("city");
				city.options.length=0;
					switch(province){
						case "陕西省":
						city.add(new Option("西安市","西安市",null));
						city.add(new Option("榆林市","榆林市",null));
						city.add(new Option("延安市","延安市",null));
						break;
						
						case "山西省":
						city.add(new Option("大同市","大同市",null));
						city.add(new Option("太原市","太原市",null));
						city.add(new Option("运城市","运城市",null));
						break;
						
						case "广东省":
						city.add(new Option("广州市","西安市",null));
						city.add(new Option("深圳市","西安市",null));
						city.add(new Option("西安市","西安市",null));
						break;
					}
			}
		</script>
	</head>
	<body>
		<div>
			<select id="province" onchange="checkcity()">
				<option value="陕西省">陕西省</option>
				<option value="山西省">山西省</option>
				<option value="广东省">广东省</option>
			</select>
			
			<select id="city">
				<option value="西安市">西安市</option>
				<option value="榆林市">榆林市</option>
				<option value="延安市">延安市</option>
			</select>
		</div>
	</body>
</html>

实现效果：
在这里插入图片描述以上均为个人所写，如有不对之处，欢迎指正，谢谢！

新时代的农民工
关注
JQuery——选择器作业
weixin_44502548的博客
09-24 924
一、省市级连 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> function sel(){ var province=document.getElementById("province").value; var city=document.getElementById("cit
15-Javaweb学习-jQuery-选择器
weixin_42401546的博客
04-06 134
15-Javaweb学习-jQuery-选择器 1.常规选择器 选择器 CSS****模式 jQuery****模式 描述 标签选择器 div{} $(‘div’) 获取所有 div 元素的 DOM 对象 ID选择器 #box{} $(‘#box’) 获取一个 ID 为 box 元素的 DOM 对象 类选择器(class) .box{} $(‘.box’) 获取所有 cla...
总结
Liuxb_zao的博客
10-10 269
html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">script> script> $(document).re
Java NIO6：选择器2---代码篇
weixin_33849942的博客
02-10 134
选择器服务器端代码 上一篇文章毫无条理地讲了很多和选择器相关的知识点，下面进入实战，看一下如何写和使用选择器实现服务端Socket数据接收的程序，这也是NIO中最核心、最精华的部分。 看一下代码： 1 public class SelectorServer 2 { 3 private static int PORT = 1234; 4 5 pu...
jquery选择器练习
helloqhq的专栏
07-12 1409
--> option1 option2 option3 你好世界！ //===================DOM对象与JQuery包装集=================== /
jQuery 选择器练习
guliguliguliguli的博客
09-20 258
<!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</tit.
以SSH框架与jQuery技术为_省略_础的Java_Web开发应用探讨_何晶.pdf
11-21
jQuery的核心特性包括选择器（用于选取HTML元素）、DOM操作、事件处理、动画效果以及Ajax交互，极大地丰富了Web页面的动态性和用户体验。 在Java-Web开发中，SSH框架和jQuery技术的结合应用可以带来以下优势： 1. ...
JAVAspring-使用JavaSpring+JQuery开发的web天气APP.zip
最新发布
03-03
在这个项目中，我们探讨的是如何使用Java Spring框架与jQuery技术来构建一个Web天气应用程序。Java Spring是一个开源的、全面的企业级应用开发框架，它提供了一种模块化且松散耦合的方式来构建Java应用程序，尤其...
《Java-Web应用开发基础》综合练习2.docx
12-16
Java Web 应用开发基础综合练习 《Java-Web 应用开发基础》综合练习 2 中包含了多个与 Java...这些知识点涵盖了 Java Web 应用开发的多个方面，包括 Struts、Hibernate、JavaScript、jQuery、Servlet 和数据库编程等。
jsp日期选择器开发技术- Web开发
06-13
日期选择器是Web应用程序中不可或缺的组件，它允许用户方便地选取日期，常见于表单输入、日程安排等场景。本教程将重点探讨如何在JSP中实现日期选择器的开发技术。 首先，我们需要理解JSP中的基本概念。JSP是由HTML...
ACCP 8.0 jQuery蔚蓝网上书店.zip
12-12
使用jQuery快速高效制作网页交互特效 的项目《蔚蓝网上书店》。首页：打开首页时弹出固定大小的广告页面窗口 “新手入门”下拉菜单的自动显示与隐藏 随滚动条上下移动的广告图片，展示图书内容。 管理购物车中的商品（购物车页面）。用户注册（新用户注册页面）。用户登录（用户登录页面） 等等
蔚蓝网购物车js代码
04-03
属于北大青鸟S2jQuery这本书的最后一章蔚蓝网项目中的购物车的js代码
北大青鸟ACCP8.0S2蔚蓝网上书店
06-27
北大青鸟ACCP8.0蔚蓝网上书店、代码类、jQuery，欢迎下载!
项目案例之网上书店全套源程序代码
11-02
项目案例之网上书店全套源程序代码，奉献给各位爱好编程的朋友！
Java模拟Jquery选择器
12-25
本主题将深入探讨如何使用`org.htmlparser.Parser`这个Java库来模拟JavaScript中的jQuery选择器，以实现类似的页面元素查找功能。 `org.htmlparser.Parser`是HTMLParser项目的一部分，它是一个用于解析HTML文档的...
jquery选择器的练习
amn9450的博客
11-01 227
<style> img,#one span{ width: 150px; height: 150px; border-radius: 75px; float: left; margin: 20px 10px; } #one{ heigh...
Jquery选择器练习（一）
千江有水千江月，万里无云万里天
07-22 899
Example 1.
Jquery选择器练习（二）
千江有水千江月，万里无云万里天
07-23 1183
Jquery的选择器非常强大，只要运用熟悉，方可对Dom操作得心应手。一些选择器和CSS伪类很相似，很容易引起混淆，需要多加练习和注意。
jquery - 选择器 - 试题
yuxuac的专栏
07-23 945
最近在慕课网学习Jquery, 觉得很好，其中有一道题如下： 编程练习   在页面中,添加一个元素,里面放置多个(至少7个以上)的元素,此外,再添加一个元素. 任务   初始时:元素中仅显示5个元素,其中包含还包括最后一个元素,元素中的显示"更多"字符.   当点击"更多"链接时,自身内容变为"简化",同时,元素中显示全部的元素.   当点击"简化"链接时,自身内容变为"更多",同时,
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值