CSS_JavaScript_jQuery_Servlet

最新推荐文章于 2024-08-04 16:33:59 发布

IL tuo

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量401

点赞数

文章标签： javascript css jquery

本文链接：https://blog.csdn.net/Awww_20/article/details/126841783

版权

文章目录

1. CSS
2. JavaScript
3. jQuery
4. Servlet
单例设计模式

1. CSS

CSS : Cascading Style Sheet 关联层叠样式表

给html标签进行渲染加入一些修饰,达到一定的视觉效果

1.1 使用CSS样式的方式

方式1: 行内样式,在每一个HTML标签上都有style属性
	style="样式属性:样式属性值, 样式属性2,样式属性值2, ..."
	弊端:一次只能控制某一个某一个标签,如果有同名的标签需要被同时控制,就很麻烦

方式2: 内联样式(内部样式)
	在head标题书写 style标签
	style标签中
	选择器{
		样式属性: 属性值1;
		样式属性: 属性值2;
		...
	}
	如果有同名的标签,可以通过选择器来控制标签
	弊端:css样式代码和HTML标签混合在一起,不利于后期管理

方式3: 外联样式(外部样式)
将css样式单独放在.css文件中,放在指定的css文件夹中,通过在当前HTML页面使用link标签导入
link标签
	属性 href="css文件"
	固定属性 rel="stylesheet"  关联层叠样式表

1.2 CSS的选择器

1. 标签选择器
	标签名称{
		 样式属性: 属性值;
         样式属性2: 属性值2;
         ...
	}
	
2. 类选择器
	在标签中指定class属性="属性值"
	在同一个页面下,class属性可以重名
	.class属性值{
		样式属性: 属性值;
        样式属性2: 属性值2;
        ...
	}
	
 3. id选择器
	在标签指定id属性, id = "id属性值"
    在同一个页面下,id属性值必须唯一
    后面在JavaScript, dom编程, 通过id获取标签对象,如果id 值重复, 就会获取不到
    
    #id属性值{
        样式属性: 属性值;
        样式属性2: 属性值2;
        ...
    }
    
 4. 子元素选择器(交集选择器)
	选择器1 选择器2 ...{
        样式属性: 属性值;
        样式属性2: 属性值2;
        ...
    }
    选择器2选择的标签是选择器1里面的子元素
    
 5. 并集选择器
	同时对多个标签进行控制
    选择器1, 选择器2, 选择器3, ...{
        样式属性: 属性值;
        样式属性2: 属性值2;
        ...
    }
    
 6. 伪类选择器
	用于定义元素的特殊状态
    ①link状态: 鼠标没有访问过的状态
    ②hover状态: 鼠标悬停在元素上的状态
    ③active: 获取元素焦点状态(点击元素,但是没有松开)
    ④visited: 鼠标访问过的状态(点击并松开)
    
    选择器 : 状态名称(不区分大小写){
        样式属性: 属性值;
        样式属性2: 属性值2;
        ...
    }
    想不断的出现循环效果hover必须在link和visited的之后, active必须在hover之后
    link->visited->hover->active

1.3 CSS常用样式属性

CSS文本样式

1.	color:文本颜色
	文本颜色可以用以下三种方式表示:
		(1)颜色名称:英文单词
		(2)十六进制数据:#ff0000;#00ff00;#0000ff;
		(3)rgb(0~255,0~255,0~255);
	color: red;

2.	text_align:用于设置文本的水平对齐方式
		left:左对齐
		right:右对齐
		center:居中对齐
	text-align: left;

3.	text-decoration:用于设置或删除文本装饰
		none:不设置任何修饰
		underline:下划线
		overline:上划线
		live-through:中划线
	text-decoration: underline;

4.	text-indent:用于指定文本首行缩进
	text-indent: 30px; 首行缩进30像素

5.	letter-spacing:用于指定文本中字符的间距
		word-spacing:单词间距
			浏览器解析:两个字组成一个单词,中间有空格(中文)
		line-height:行高
		
6. text-transform: 用于文本中的英文字母的大小写转换

CSS背景样式

	background-image:设置图像
		如果图片分辨率和屏幕分辨率不同的话,导致图片x轴和y轴都在重复
	background-repeat:设置背景图片是否重复以及如何重复
		默认值:repeat:x轴和y轴都重复
		no-repeat:不重复
		repeat-x:x轴重复
		repeat-y:y轴重复
	background-position:设置图片的起始位置
		图片的位置  图片在浏览器中显示的位置
		默认值 top left
	background-color:背景颜色
		
	背景的简写属性
	background: background-color background-image background-repeat background-position
	可以将背景的属性写在同一行,按照上面顺序依次设置属性,每个属性之间用空格隔开

CSS边框样式
div块标签四个边

		边框的颜色样式属性:
			border-color
		边框宽度样式属性:
			border-width
		必须有边框样式属性
			border-style
					
		特点:
			1)这些简写属性默认方向
				上右下左
			2)某一边如果没有设置边框的颜色,宽度,样式,
				会补齐对边的颜色,宽度,样式
		
		边框的简写属性:
		border: border-width border-style(必须) border-color

    div{
			/* 边框的颜色 */
			/* border-top-color: #0000FF;
			border-bottom-color: #7FFFD4;
			border-left-color: #9370DB;
			border-right-color: #FF0000; */
			/* 边框宽度 */
			/* border-top-width: 10px;
			border-bottom-width: 20px;
			border-left-width: 30px;
			border-right-width: 40px; */
			/* 
			设置四个边框的样式
				solid:单实线
				dotted:点
				double:双实线
				dashed:虚线
			 */
			border: 3px solid #ADFF2F;
			width: 100px;
			height: 100px;
		}
        
        border-radius  圆角边框

CSS浮动属性样式

	当为某个标签(div)设置浮动的时候,此时这个标签就表现的像块边框不存在一样
	(脱离了这个文档流),它可以向左向右浮动,直到碰到其他块的边框
	
	浮动属性:
		left:左浮动
		right:右浮动
	清除浮动:clear
		left:左边不浮动
		right:右边不浮动
		both:左右两边都不浮动

1.4 CSS的盒子模型

将任何标签都可以用div包裹,使用css选择器—控制样式

div+CSS---层级布局

将任何标签都可以看成一个盒子,使用div块标签将标签包裹起来

盒子容量大小:在div中指定的width和height 宽度和高度,可以指定像素,
	或者百分比(占整个分辨率的百分比)
	
盒子的厚度:就是边框的大小,就是border

盒子的padding:就是盒子的内边距,  控制盒子的内容和边框线之间的距离

盒子的margin: 盒子的外边距,控制盒子和盒子之间的距离

1.5 CSS的定位属性

CSS绝对定位
属性: position : absolute
    top:将整个盒子向下移动
    left:向右移动
当前这个元素根据父元素的位置移动

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

CSS固定定位
属性: position : fixed
当前这个元素处在浏览器的位置,永远处在这个位置,不会随着滚动条的滚动而滚动

2. JavaScript

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言

2.1 js的使用方式

内部方式
在< head>标签体中,书写script标签
外部方式
将js代码写在.js文件中,保存在js文件夹中
在html页面导入js文件
< srcipt src=“js文件地址”></ srcipt>

js常用内置函数

//给浏览器写入内容
document.write("hello,javascript我来了") ;

//在浏览器的控制台打印日志
console.log("hello,javascript!") ;

//在浏览器中弹一个提示
//window可以不写
window.alert("hello,javascript")

2.2 JavaScript的基本数据类型

数据类型:
1. String--->String内置对象
2. number--->Number内置对象
3. boolean--->Boolean内置对象
4. object--->Object内置对象 : 代表所有js对象的模板
5. undefined : 未定义类型

注意:

在js中,定义变量用var, var可以省略不写

在js中,查看变量的数据类型使用 typeof(变量名) 函数

在js中,变量可以重复定义,后面的值会将前面的值覆盖掉

无论是小数还是整数,都是number类型–自动提升为浏览器内置对象Number
无论是字符还是字符串,都是string类型–自动提升为浏览器内置对象String
boolean类型–自动提升为浏览器内置对象Boolean
object类型–自动提升为浏览器内置对象Object(代表所有js对象的模板)
undefined:未定义类型,没有赋值,没有意义;

2.3 JavaScript的流程控制语句以及运算符

顺序结构:js代码由上而下一次加载

选择结构语句:
	(1)if语句:
		格式1:if(表达式){语句}
		
		格式2:
		if(表达式){
			语句1;
		}else{
			语句2;
		}
	如果表达式为非空字符串,则条件成立
		格式3:
		if(表达式){
			语句1;
		}else if(表达式2){
			语句2;
		}else{
			语句n;
		}
	(2)switch语句:
		switch(表达式){
			case 值1:
				语句1;
				break;
			case 值2:
				语句2:
				break;
			...
			default:
				语句n;
		}
		case语句的值可以是变量,也可以是常量

循环结构语句:
	for
	while
	do...while(循环体至少执行一次)
	for-in语句:用来遍历数组/自定义对象的属性(类似于Java中的增强for)
		
	js中创建一个数组
		var arr = new Array(5);  动态初始化
		var 对象名 = new Array()[元素1,元素2,...];
		for(var 变量名 in 数组对象名或者自定义对象名){
			使用对象名[索引值];
		}

	//算术运算符
	//+,-,*,/,%
	var a = 3;
	var b = 4;
	document.write("(a+b):" + (a+b) + "<br />");
	document.write("(a-b):" + (a-b) + "<br />");
	document.write("(a*b):" + (a*b) + "<br />");
	document.write("(a/b):" + (a/b) + "<br />");
	document.write("(a%b):" + (a%b) + "<br />");
	document.write((a+true));
	document.write("<hr />");
	
	//比较运算符
	var x = 3;
	var y = 4;
	var z = 5;
	document.write("<hr />");
	
	//逻辑运算符
	//逻辑单与& ,逻辑双与&&,逻辑单或|,逻辑双或||,逻辑非,逻辑异或^
	//表示并列关系:多个条件必须同时满足逻辑双与&& ,跟Java一样,左边为false,右边不执行!  
	//表示或的关系:多个条件满足一条件即可 ||, 跟Java一样,左边true,右边不执行!
	var m = 3 ;
	var n = 4 ;
	
	document.write("m:"+m+"<br/>") ;
	document.write("n:"+n+"<br/>") ;
	document.write(((++m)==3) && ((--n)==4)+"<br/>") ;
	document.write("m:"+m+"<br/>") ;
	document.write("n:"+n+"<br/>") ;
	document.write("<hr/>") ;

	//三元运算符 (表达式)?执行true的结果:执行false的结果
	var age = 15 ;
	document.write((age>18)?"成年人":"未成年人") ;

2.4 JavaScript的函数定义以及调用

定义函数的格式:
	function 函数名(形参列表){
		直接输出或者使用return关键字,返回结果
	}
调用函数
	如果调用的函数中是直接输出的,则可以直接调用
	如果函数中有return,返回了结果,则需要赋值调用

注意事项:
1. 定义函数的时候,形参前面不需要写var
2. 虽然js中没有返回值类型,但是依然可以使用 return 关键字
3. JavaScript中没有方法重载的概念,后边定义的方法会将前面定义的方法覆盖掉
当实际参数个数小于形式参数个数是,语句依然执行,结果为NaN
当实际参数个数大于形式参数个数 , 函数也会调用, 多余的实际参数不参与运算
4. 函数内置一个数组 arguments , 就是将实际参数赋值给形参

2.5 JavaScript的内置对象

2.5.1 JS内置对象之String

创建一个字符串对象
	var 对象名 = new String("字符串值");
	常用方法:
	valueOf():获取对象的原始值,比较内容是否相同
	charAt(index):返回指定索引处的字符
	concat(str):拼接一个字符串,返回一个新的字符串
	fontcolor(颜色名):对字符串进行颜色标记
	indexOf(str):查询子字符串在原字符串中第一次出现的索引值
	spilt(str):使用指定的分隔符将字符串拆分成字符串数组

2.5.2 JS内置对象之Array

三种方式创建数组
	var arr = new Array0 ;//不指定长度
	var arr = new Array(size)://指定长度
	var arr =[元素1,元素2.....]://静态初始化(推荐)

	js中没角标越界,可以不断扩容
	
	内置方法
		join(str):使用str符号将数组元素拼接成字符串

2.5.3 JS内置对象之Date

Date:代表日期时间
	创建日期对象: var 对象名 = new Date();
	
	getYear:获取当前年份与1900年的差值
	getFullYear:获取日期中的年份
	getMonth:获取日期中的月份(0-11之间的整数)
	getDate:获取月份中的日期(1-31之间的整数)
	getHours:获取一天中的小时(0-23之间的整数)
	getMinutes:获取分钟数(0-59之间的整数)
	getSeconds:获取秒数(0-59之间的整数)

2.5.4 网页定时器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网页时钟</title>
		<!-- 
			网页定时器
			window对象的方法
			setInteval("函数()",时间毫秒值):每经过这个毫秒值,重复执行这个任务函数
			settimeout("函数()",时间毫秒值):经过毫秒值后,执行一次任务
		 -->
	</head>
	<body>
		<h1>当前系统时间:</h1><span id="tip"></span>
	</body>
	<script>
		function time() {
     
			//1)获取当前时间
			var date = new Date();
			//2)拼接日期时间
			var dateStr = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" +
				date