JQuery——选择器作业

未来见

于 2020-09-24 16:03:27 发布

阅读量948

点赞数 1

文章标签： jquery css javascript

本文链接：https://blog.csdn.net/weixin_44502548/article/details/108776170

版权

这篇博客展示了使用JQuery选择器完成的六个网页效果，包括省市级联动、当当网首页布局、图书简介展示、非缘勿扰设计、隔行变色商品列表以及全网热播视频页面的实现。通过代码实现和效果展示，详细地阐述了JQuery选择器在实际项目中的应用。

摘要由CSDN通过智能技术生成

一、省市级连

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function sel(){
    
			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);
					city.add(new Option("榆林市","榆林市"),null);
					break;
				case "山西省":
					city.add(new Option("太原市","太原市"),null);
					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);
					city.add(new Option("洛阳市","洛阳市"),null);
					break;
				}
			}
		</script>
	</head>
	<body>
		省份：
		<select id="province" onchange="sel()">
			<option value="陕西省">陕西省</option>
			<option value="山西省">山西省</option>
			<option value="河南省">河南省</option>
		</select>
		市:
		<select id="city">
			<option value="0">西安市</option>
			<option value="1">安康市</option>
			<option value="2">渭南市</option>
			<option value="3">榆林市</option>
		</select>
	</body>
</html>

效果截图：
在这里插入图片描述
二、当当网首页

代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我的当当</title>
		<style>
			div{
    
				
			}
			a{
    
				padding-left: 1065px;
			}
			#head li{
    
				list-style: none;
				float: left;
				padding-left: 50px;
			}	
			#foot li{
    
				list-style: none;
				float: left;
				padding-left: 50px;
			}	
			#head{
    
				margin-top: 50px;
				float: right;
				background-color: lightgreen;
				width: 500px;
				height: 40px;"
				border-radius: 5px;
			}
			#foot{
    
				padding-top: 0px;
				margin-top: 106px;
				background-color: orange;
				height: 30px;
				line-height: 30px;
				border-radius: 5px;
				
			}
			#size li{
    
				padding-left: 0px;
				width: 110px;
			}
			#top{
    
				position: relative;
			}
			b ul{
    
				position: absolute;
				list-style: none;
				padding-left: 1447px;
				padding-top: 0px;
				margin-top: 0px;
				display: none;
			}
			#main li{
    
				border-left:  1px solid coral;
				border-right:  1px solid coral;
				color: gainsboro;
			}
			#main li:last{
    
				border-bottom:  1px solid coral;
			}
			{
    
				color: gainsboro;
				
			}
			
			
		</style>
		<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
		<script>
			$(function(){
    
				$("#foot").css({
    "background-color":"orange","width":"100%","height":"40px"});
				$("b").mouseover(function(){
    
					$(this).children("#main").show();
					$("b").css({
    "color":"gainsboro","border-top":"1px solid coral","border-left":"1px solid coral","border-right":"1px solid coral"});
				}).mouseout(function(){
    
					$(this).children("#main").hide();
					$("b").css({
    "border-top":"","border-left":"","border-right":""});
				})
				
			})
		</script>
	</head>
	<body>
		<div id="top">
				<img src="img/list_tool_fav1.gif" />收藏当当  | 您好，jesson   【退出登录】
						<a><img src="img/QQ截图20200923174116.png"/>购物车  | 
								<b>我的当当
									<ul id="main">	
										<li>我的订单</li>
										<li>我的收藏</li>
										<li>我的礼品

最低0.47元/天解锁文章