java web复习（1）html+javaScript+jquery+css

最新推荐文章于 2021-02-12 22:26:37 发布

我铠他超

最新推荐文章于 2021-02-12 22:26:37 发布

阅读量345

点赞数

分类专栏： Java Web

本文链接：https://blog.csdn.net/Robert_Ln/article/details/79846747

版权

Java Web 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBliC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>nuist</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<style type="text/css">
#topbar1 {
	width: 100%;
	height: 30px;
	background-color: #0064b4;
	position: absolute;
	top: 0px;
	left: 0px;
}

#topguid {
	position: absolute;
	left: 70%;
	line-height: 30px;
	color: white;
}

#logoandmotto {
	margin-top: 50px;
	width: 100%;
	height: 100px;
}

#logo {
	padding-top: 20px;
	padding-left: 10%;
}

#motto {
	position: absolute;
	padding-top: 10px;
	padding-left: 30%;
}

#xialaliebiao {
	width: 100%;
	height: 40px;
	line-high:40px;
	background-color: rgb(0, 127, 229);
	text-align: center;
}

.ul li {
	text-align: center;
	background: #0064b4;
	display: none;
	/*去除标签前的圆点 */
	list-style-type: none;
}

.ul {
	position: relative;
	margin-left: 100px;
	cursor: pointer;
	color: white;
	line-height: 40px;
	display: inline-block;
}

#divul {
	/* 		<!-- display
		clear:both
		加空div用clear:both方法

在两个浮动div下面加个空div，然后给空div加上clear:both 方法亦可清除浮动；
用overflow:hidden方法可以在两个浮动div外面加个容器，然后加上overflow:hidden 方法即可清除浮动；
		--!> */
	display: inline-block;
}


* {
	padding: 0px;
	margin: 0px;
}

.ul a{
	
} 


</style>
<script type="text/javascript" src="lib/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
	var count = 0;
	$(function() {
		$(".ul").hover(function(){
			$(this).children("li").show();
		},function(){
			$(".ul li").hide();
		});
		/* $(".ul a ").hover(function() { 
			$(this).animate({
				"height" : "110"
			}, 2000);
			$(this).children("li").css({
				'display' : ' block',
			})
			$(this).css({
				'background-color' : '#0064b4'
			}); //设置导航栏目样式，醒目 
		},
			function() {
				$(".ul li").hide(); //鼠标移开后隐藏下拉列表  
				$(".ul").css({
					'background-color' : 'rgb(0, 127, 229)'
				});
				$(this).animate({
					"height" : "0px"
				}, 1);

			}
		);  */
		var t = setInterval(function() {
			$(".tu").hide();
			$(".tu").eq(count).show();
			count++;
			if (count == $(".tu").length)
				count = 0;
		}, 1000)
	})
</script>
</head>

<body>
	<!-- 头部，我们今天也就只做头部 top-->
	<div id="top">
		<!-- 最顶层的导航topbar1 -->
		<div id="topbar1">
			<!-- 导航栏topguid -->
			<span id="topguid"> <a href="index.jsp"><font
					color="white">首页</font></a> | <a href="index.jsp"><font
					color="white">邮箱</font></a> | <a href="index.jsp"><font
					color="white">门户信息</font></a> | <a href="index.jsp"><font
					color="white">校长信箱</font></a> | <a href="index.jsp"><font
					color="white">收藏我</font></a> |
			</span>
		</div>
		<!-- logo和校训motto，两张图片  -->
		<div id="logoandmotto">
			<img id="logo" alt="logo" src="IMG/logo.png"> <img id="motto"
				alt="motto" src="IMG/search.png">
		</div>

		<div id="xialaliebiao" class="xialaliebiao">
			<div id="divul">
				<ul class="ul">
					<a>学校概况</a>
					<li>学校概况</li>
					<li>学校概况</li>
				</ul>
			</div>
			<div id="divul">
				<ul class="ul">
					<a>院系部门</a>
					<li>学校概况</li>
					<li>学校概况</li>
				</ul>
			</div>
			<div id="divul">
				<ul class="ul">
					<a>科学研究</a>
					<li>学校概况</li>
					<li>学校概况</li>
				</ul>
			</div>
			<div id="divul">
				<ul class="ul">
					<a>招生就业</a>
					<li>学校概况</li>
					<li>学校概况</li>
				</ul>
			</div>
			<div id="divul">
				<ul class="ul">
					<a>国际交流</a>
					<li>学校概况</li>
					<li>学校概况</li>
				</ul>
			</div>
			<div id="divul">
				<ul class="ul">
					<a>公共服务</a>
					<li>学校概况</li>
					<li>学校概况</li>
				</ul>
			</div>
		</div>
	</div>
	<div class="lunbotu">
		<ul>
			<li class="tu"><img alt="tu1" src="IMG/tu1.jpg" /></li>
			<li class="tu"><img alt="tu2" src="IMG/tu2.jpg" /></li>
		</ul>
	</div>
</body>
</html>

1.清除float浮动的两种方式

（1）用overflow:hidden方法可以在两个浮动div外面加个容器，然后加上overflow:hidden 方法即可清除浮动；

（2）加空div用clear:both方法

2.JS设置定时器

<script>
			var count = 0;
			$(function() {
				var t = setInterval(function() {
					console.log(count);
					$(".lipic").hide();
					$(".lipic").eq(count).show();
					count++;
					if(count == $(".lipic").length) {
						count = 0;
					}
				}, 3000);

			});
                   if(time==0) {
					clearInterval(t);
				}
		</script>

3.调试必备技能

（1）alert("message");//必备技能不必多说

（2）console.log("message");//在浏览器的控制台里输出

4.行内标签和块级标签转换

(1).把块标签变行内标签（div,p,h1-h6,ul,li,dl,dt,dd）

display: inline-block;

display:inline;    /*转换为行内*/

(2).把行内标签编程块级标签（a，span,strong,u,em-->）

display:block;    /*转换为块级*/

5.一些常用的属性和方法

//隐藏该元素
        display: none;
	/*去除标签前的圆点 */
	list-style-type: none;
        //改变鼠标形状为手指
        cursor: pointer;
        //文字居中
        line-height：
$(this).animate({"width":"200px"},2000);
<div style="overflow: hidden"></div>
//1.设置样式
$(this).css({'background-color' : 'rgb(0, 127, 229)'}); box-shadow: 0px 0px 20px rgb(30, 93, 151);background-color: rgb(30, 93, 151); border: none; color: white; margin-left: 120px; cursor: pointer; .btnReg{ width: 150px; height: 30px; line-height: 30px; background-color: rgb(30, 93, 151); border: none; color: white; margin-left: 120px; cursor: pointer; //渐变 transition:all 5s;	}
//2.设置鼠标悬浮动作	
     .btnReg:hover{ background-color: green; } //3.设置鼠标点击事件 $(".btnReg").click(function(){ //获取用户名的值 var username= $("#userName").val(); if(username==""){ alert('用户名不能为空'); return ; }             //获取单选框内容 //$("input[name='rd']:checked").val(); var sex = $("input[name='sex']:checked").val();//	alert(sex); if(sex=="man"||sex=="femal"){ }else{ alert('性别不能为空'); return ; }4.jquery遍历方法： 		$(".btnReg").click(function(){
		 			//获取用户名的值
		 			var username= $("#userName").val();
		 			if(username==""){
		 				alert('用户名不能为空');
		 				return ;
		 			}
		 			//获取单选框内容
		 			//方法三：
		 			//$("input[name='rd']:checked").val();
		 			var sex = $("input[name='sex']:checked").val();
//		 			alert(sex);
		 			if(sex=="man"||sex=="femal"){
		 				
		 			}else{
		 				alert('性别不能为空');
		 				return ;
		 			}
		 			//获取复选框内容
		 			/*var hobby = $("input[name='hobby']:checked").val();
//		 			alert(hobby);
		 			if(!hobby=="wangzherongyao"&&hobby=="NBA"){
		 				alert('爱好不能为空');
		 				return ;
		 			}*/
		 			
		 			/*
		 			 * 遍历方法1：
		 			 * var istrue = false;
		 			var hobby = $(".hobby");
		 			for(var i = 0;i<=hobby.length-1 ;i++){
		 				if(hobby.eq(i).prop("checked"))	{
		 					istrue="true";
		 					break;
		 				}
		 			}
		 			if(!istrue){
		 				alert('爱好不能为空');
		 			}*/
		 			
		 			/**
		 			 * 方法2：
		 			 */
		 			if($(".hobby:checked").length==0){
		 				alert('爱好不能为空');
		 			}
		 		})5.jquery常用获取对象的方法：<body>
		<div id="div1" class="div1" name="name" style="height:100px"><span style="color:red;">linweida</span></div>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
		<script>
			$(function(){
					//根据id获取
				 var getById = $("#div1");
				//根据class获取
				var getByClass = $(".div1"); 
				//根据标签获取
				var getByTag = $("div")	;
				
				//根据name获取
				var getByName = $("div[name='name']");
				//获取样式
				var style = $(".div1").attr("style");
				
				var css = $(".div1").css("width");
				var text=$(".div1").text();
				var html=$(".div1").html();
				console.log(getById+"\n"+getByClass+"\n"+getByName+"\n"+getByTag+"\n"+style+"\n"+css+"\n"+text+"\n"+html);
			});
		</script>
	</body>6.jquery跟换图片：		function showMouse() {
			reset();
			//获取地鼠的数量
			var nums = $(".mouse").length;
			//定时器
			t = setInterval(function() {
				
				$(".time").text(--time);
				time = $(".time").text();
				if(time==0) {
					clearInterval(t);
				}
				//生成0到地鼠个数个随机数
				var radom = parseInt(Math.random() * nums);
				//让第随机数个地鼠冒出来
				$(".mouse").eq(radom).attr("src", "img/mouse1.png");
				
				t1 = setTimeout(function() {


					//让第随机数个地鼠缩回去
					$(".mouse").eq(radom).attr("src", "img/mouse.png");
				}, 2000);
			}, 1000);
		}


//引入外部js和外部CSS

<link rel="stylesheet" href="css/index.css" />

<script type="text/javascript" src="lib/jquery-3.3.1.min.js"></script>

6.JQuery常用方法

$("#chkAll").click(function() {
					//class为chk的复选框元素是否被选中取决于id为chkAll的元素是否被选中
					//设置class元素为chk的元素的选中状态为istrue
					$(".chk").prop("checked", $(this).prop("checked"));

				});

$(".chk").prop("checked", $(this).prop("checked"));


            $("#chkReverse").click(function() {
					var s = $(this).prop("checked");
					console.log(s);
					$(".tbStu :checkbox,.chk").each(function() {
						$(this).attr("checked", !$(this).prop("checked"));
					});
				});$(".mouse").eq(radom).attr("src", "img/mouse1.png");	$(".num").text(0);  
  	$(this).attr("src", "img/mouse2.png");