CSS、JS、servelet

最新推荐文章于 2024-07-11 17:17:41 发布

m0_53608009

最新推荐文章于 2024-07-11 17:17:41 发布

阅读量194

点赞数

文章标签：前端 css html

本文链接：https://blog.csdn.net/m0_53608009/article/details/126828317

版权

CSS:字体文本背景边框盒子

CSS:层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

文本:

<style>
			div{
				/*字体大小*/
				font-size: 25px;
				/*文本颜色*/
				color: blue;
				/*文本修饰*/
				text-decoration: underline;
				/*鼠标经过标签,变成小手状态*/
				cursor: pointer;
				
			}
</style>

字体:

<style>
div{
    font:italic bold 30px "楷体" ;   //字体样式,粗细,行高,文本效果
}
</style>
 font-family:设置字体文本效果:
						新宋体,楷体,黑体,宋体...谷歌字体(关联谷歌字体样式)
				*/
			  /* font-family: "楷体"; */
				/*font-size:字体大写*/
				/* font-size: 40px; */
				/* font-style:设置字体样式:
					默认值:normal 字体不会倾斜(正常体)
					italic:斜体 (推荐)
					oblique:倾斜,跟上面很相似
				 */
				/* font-style: italic; */
				/* font-weight 属性指定字体的粗细
						normal:默认不加粗
						bold:适当加粗
						可以指定像素,---700px
				 */
				/* font-weight:bold ; */

css定位绝对相对固定

                  定位属性:position
                           absolute:绝对定位
                           当前这个元素根据父元素的位置进行移动

                           relative:相对定位
                           当前这个元素根据当前位置进行移动


                           fixed:固定定位
                           当前这个元素处在浏览器中的位置,永远处在这个位置
                           根据top/left设置向下,向右移动的距离(不会随着滚动条的滚动而滚动)

		<style>
				#d1{
					width:150px;
					height: 150px;
					border:1px solid #000000;
					background-color: aquamarine;
				}
				#d2{
					width:150px;
					height: 150px;
					border:1px solid #000000;
					background-color: #00FF00;
				}
				#d3{	
					width:150px;
					height: 150px;
					border:1px solid #000000;
					background-color: #0000FF;
					
					/* 加入定位属性 */
					/* position: absolute ;
					top: 50px;
					left:30px; */
					/* position: relative;
					top:30px;
					left:50px; */
					
				}
				#advDiv{
					width: 590px;
					height: 470px;
					/* border: 1px solid #000000; */
					
					/*固定定位*/
					position: fixed;
					top:50px;
					left:400px;
				}
		</style>

JavaScript 数据类型\运算符\逻辑运算符\输出函数的使用

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Js中的函数定义以及调用</title>
		<!-- 
				定义函数的格式
				function 函数名(形式参数名1,参数名2,...){
					1)直接在函数里面逻辑,直接去打印在浏览器中输出
					
					2)完成逻辑之后,使用return 返回结果;
					
				}
				
				调用函数的
					1)单独调用   函数名(实际参数列表...);
					2)赋值调用 
							var 结果变量 = 函数名称(实际参数列表) ;
		 
		 
		 注意事项:
				1)定义函数的时候,函数名上的形式参数不能带var
				2)定义函数的时候,虽然js中没有返回值类型,但是函数依然可以使用return 关键字
				3)在js中,没有方法重载的概念,后面定义的方法会将前面方法覆盖了
							
							当实际参数列表个数<形式参数列表个数, 函数依然会调用,结果NaN(没有值)
							实际参数列表格式>形式参数列表个数,函数会调用,前面的实际参数赋值给形式参数进行计算
							多出来实际参数不参与逻辑运算;
				4)函数内置一个数组，arguments	，就是实际参数赋值给形式参数	
		 -->
		 <script>

			function add( a, b){
			
				var result = a +b ;
				return result ;
			}
			function add(a,b,c,d){//10,40,20,30
				for(var i = 0 ; i < arguments.length; i++){
					document.write(arguments[i]+"&ensp;") ;
				}
				return a+b+c+d;
			}
				var r = add(10,40,20,30) ;
				document.write("结果是:"+r) ;
		 </script>
	</head>
	<body>
	</body>
</html>

JavaScript事件三要素

1)事件源----就是html标签
2)编写监听器 ----就是编写一个函数 function 函数名称(){}
3)绑定事件监听器 ---就是在事件源上通过一些属性on事件名称 = "函数名称()"

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件三要素</title>
		 <script>
		function myClick(){
				alert("你点我了") ;
			}
		 </script>
	</head>
	<body>
		<input type="button" value="查询" onclick="myClick()"/>
	</body>
</html>

表单校验

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
		body{
			background-image: url(img/bgimg.jpg) ;
			background-repeat: no-repeat;
		}
		#id1{
			border: 3px solid #ffffff;
			margin:15% 0  0 35%;
			font-weight: bold;
			width: 480px;
			height: 380px;
			border-radius: 8px;
			background-color: aliceblue;
		}
		#id2{
			margin-top: 45px;
			margin-left: 100px;
		}
		#id3{
			margin:35px 0 0 100px;
		}
		#id4{
			margin:35px 0 0 100px;
		}
		#id5{
			/* margin-top: 35px;
			margin-left: 100px; */
			margin:35px 0 0 100px;
		}
		#id6{
		
			margin:35px 0 0 140px;
		}
		#userId{
			//width: 60%;
			//height: 30px;
			//border: 6px solid #00FFFF;
			border-radius: 5px;
		}
		#id7{
			width: 200px;
		}
		</style>
	</head>
	<body>
		<div id="id1">
		<form action="getDate.html" method="get" onsubmit="return checkAll">
			<div id="id2">
				<label for="username" style="margin: 15px;">用户名:</label>
				<input type="text" name="username" onblur="checkUserName()" id="userId"  placeholder="请输入用户名"/>
				<span id="userTip"></span>
			</div>
			<div id="id3">
				<label for="password" style="margin: 15px;">密&ensp;&ensp;码:</label>
				<input type="password" name="password" placeholder="请输入密码" id="pwdId" onblur="checkPwd()"/>
				<span id="pwdTip"></span>
			</div>
			<div id="id4">
				<label for="repassword" style="margin: 7px;">确认密码:</label>
				<input type="password" name="repassword" placeholder="请确认密码" id="rePwdId" onblur="checkRePwd()"/>
				<span id="rePwdTip"></span><br />
			</div>
			<div id="id5">
				<label for="email" style="margin: 15px;">邮&ensp;&ensp;箱:</label>
				<input type="text" name="email" placeholder="请输入您的邮箱" id="emainId" onblur="checkEmail()"/>
				<span id="emailTip"></span><br />
			</div>
			<div id="id6">
				<input type="submit" id="id7" value="注&ensp;&ensp;&ensp;&ensp;册"  />
				
			</div>
		</form>
		</div>
	</body>
	<script>
	function checkAll(){
					//校验整个表单中所有的表单项
					if(checkUserName() && checkPwd() && checkRePwd() && checkEmail()){
						return true ;//能够提交
					}else{
						return false  ;//不能提交
					}
				}
	function checkUserName(){
		var userName = document.getElementById("userId").value;
		//alert(userName)
		var chUser = document.getElementById("userTip");
		var reg =/^[A-Za-z0-9_]{8,16}$/ ;	
		if(reg.test(userName)){//[\u4e00-\u9fa5]
			//chUser.innerHTML="<stong>恭喜您,可以使用</strong>".fontcolor("green");
			chUser.innerHTML = "<strong>恭喜您,可用</strong>".fontcolor("green");
			return true ;
		}else{
			chUser.innerHTML="<strong>不可用</strong>".fontcolor("red");
			return false  
		}
	}

	function checkPwd(){
		var pwd = document.getElementById("pwdId").value
		var pwdtip = document.getElementById("pwdTip")
		var reg = /^[A-Za-z0-9]{6,10}$/;
		if(reg.test(pwd)){
			pwdtip.innerHTML = "<strong>密码符合要求</strong>".fontcolor("green")
			return true ;
		}else{
			pwdtip.innerHTML = "<strong>密码不符合要求</strong>".fontcolor("red")
			alert("密码请输入6-10位大小写字母,数字")
			return false  
		}
		
	}
	function checkRePwd(){
		var repwd = document.getElementById("rePwdId").value
		var repwdtip = document.getElementById("rePwdTip")
		var pwd = document.getElementById("pwdId").value
		if(repwd==pwd){
			repwdtip.innerHTML = "<strong>密码一致</strong>".fontcolor("green")
			return true ;
		}else{
			repwdtip.innerHTML = "<strong>两次密码不一致</strong>".fontcolor("red")
			return false  
		}
		
		
	}
	function checkEmail(){
		var email = document.getElementById("emainId").value
		var emailtip = document.getElementById("emailTip")
		var reg =/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
		if(reg.test(email)){
			emailtip.innerHTML = "<strong>邮箱格式正确</strong>".fontcolor("green")
			return true ;
		}else{
			emailtip.innerHTML = "<strong>邮箱格式错误,重新输入</strong>".fontcolor("red")
			return false  
		}
	}
	</script>
</html>

构造方法,静态方法,方法重写,方法重载在继承\接口中的关系

Jquery

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

书写步骤

1)导入js库

2)书写语句

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>01_Jquery的入门</title>

		 <script src="js/jquery-3.4.1.min.js"></script>
		 <script>
		
		
			$(function(){
				$("#btn").click(function(){
					 alert("点击了") ;
				 }) ;
				 input.onclick = function(){
					 alert("点击了") ;
				 }	 
			}) ;
			
		 </script>
	</head>
	<body>
		<input type="button" id="btn" value="点我"  />
	</body>
</html>

JQuery选择器

   1)[attribute]
       $("元素名称[attribute]")---获取带有指定属性的标签对象

       2)[attribute=value]
       $("元素名称[attribute=value]")---获取带有指定属性以及指定属性值的标签对象

       3)[attribute!=value]
       $("元素名称[attribute!=value]")---获取标签对象,属性名称不等于某个值的

       4)[attribute^=value]
       $("元素名称[attribute!=value]") 匹配给定的属性是以某些值开始的元素

           5)[attribute$=value]
       $("元素名称[attribute$=value]")匹配给定的属性是以某些值结尾的元素

       6)[attribute*=value]
       $("元素名称[attribute*=value]")匹配给定的属性是以包含某些值的元素


       7)复合属性选择器,同时满足多个属性条件获取指定标签对象
       [selector1][selector2][selectorN]

       $("元素名称[selector1][selector2][selectorN]")