摘要:本周的学习内容是前端的css,js,Jquery,Servlet的入门;
文章目录
1 CSS
Cascading Style Sheet :关联层叠样式表
我们想要给html标签进行渲染加入一些修饰,达到视觉效果,书写CSS样式!
样式一定是计算机上系统本身的样式表 ;
1.1 CSS入门以及使用方式
方式1: 行内样式,在每一个html 标签是都有style属性
格式: style=“样式属性:样式属性值;样式属性2:样式属性值2…”
弊端: 一次只能控制某一个标签,如果有同名的标签需要被同时控制,就很麻烦,
开发中,如果某个标签只设置一个样式属性,完全可以使用行内样式
方式2 (后端人员习惯这种写法):内联样式( 内部样式)
格式: 在head标题书写style标签
style标签体中
选择器{
样式属性:样式属性值;
样式属性2:样式属性值2;
....
}
如果有同名标签,可以通过选择器来控制所有标签
弊端: css的样式代码和htmL标签混合一块, 不利于后期管理
方式3: 外部方式(外联样式)
前端开发人员用的方式,
将css代码单独放在文件.css文件中,放在指定css文件夹中
通过在当前页面html页面中
link 标签
属性 href=“css文件”
固定属性 rel=“stylesheet” 关联样式表
1.2 CSS的选择器(重点)
1)标签选择器
标签名称{
样式属性:属性值;
样式属性2:属性值2;
…
}
2)类选择class选择器
在标签指定cLass属性= "class属性值”
在同一个页面下，class属性是可以同名的
.class属性值{
样式属性:属性值;
样式属性2:属性值2;
…
}
class选择器>标签选择器
3)id选择器,
在标签指定id属性id = “id属性值”
在同一个页面下，id属性值必须唯一-!
后面javascript, dom编程，通过id获取标签对象,如果id值重复获取不到!
#id属性值{
样式属性:属性值;
样式属性2:属性值2;
…
}
常用的选择器优先级
id选择>class选择器>标签名称选择器
4)其他选择器:
子元素选择器(交集选择器)
选择器1 选择器2 …{
样式属性:属性值;
样式属性2:属性值2;
…
}
选择器2选中的标签是选择器1里面的子元素
5)并集选择器
选择器1,选择器2,选择器3…{
样式属性:属性值;
样式属性2:属性值2;
…
}
6)通配选择器
全部选中
*{
样式属性:属性值;
样式属性2:属性值2;
…
}
1.3 css的样式属性
1.3.1 CSS文本样式属性
1)color:文本颜色
颜色名称: 英文单词
十进制进制数据 :#FF0000 红色
#00FF00 绿色
#0000FF 蓝色
2)text-align 属性用于设置文本的水平对齐方式。
left:左对齐
right:右对齐
center:中间对齐
3)text-decoration 属性用于设置或删除文本装饰。
none:不设置任何修饰
underline:设置下划线
overline:上划线
line-through:中划线
4)text-indent 属性用于指定文本第一行的缩进
5)letter-spacing 属性用于指定文本中字符之间的间距 (字符间距)
6)word-spacing:单词间距
浏览器解析:中文来说,两个字组成一个单词,单词和单词之间空格
7)行高:行和行之间的距离 line-height
8)text-transform:文本转换
lowercase:小写
uppercase：大写
1.3.2 CSS字体样式属性(font)
1)font-family:设置字体文本效果:
新宋体,楷体,黑体,宋体…谷歌字体(关联谷歌字体样式)—> font-family: “楷体”;
2)font-style:设置字体样式:
默认值:normal 字体不会倾斜(正常体)
italic:斜体 (推荐)
oblique:倾斜,跟上面很相似
3)font-weight 属性指定字体的粗细
normal:默认不加粗
bold:适当加粗
可以指定像素,—700px
字体的简写属性
将所有的字体属性在一个样式代码中写好,方便
必须优先顺序
font:
font-style
font-weight
font-size/line-height
font-family
1.3.3CSS边框样式属性
div标签:块标签 四个边
1)边框的颜色样式简写属性:
border-color:
2)边框的宽度样式简写属性:
border-width:
3)前面两个不行,必须有边框的样式简写属性
border-style:
特点:
1)这些简写属性默认方向：
上 右 下 左
2)某一边如果没有设置边框的颜色,宽度,样式,会补齐对边的颜色,宽度,样式
边框的简写属性
border:border-width border-style border-color
border: 1px solid #000000 ;
/* 这种div的宽度和高度大小*/
width: 150px;
height: 150px;
1.3.4 CSS背景样式属性
1)background-image:设置图像
如果这个图像跟屏幕分辨率不同,导致图片x轴和y轴都在重复
格式:background-image: url(img/bg.jpg);
background-repeat:设置背景图像是否重复以及如何重复
默认值: repeat:x轴和y轴重复
no-repeat:不重复
repeat-x:x轴重复
repeat-y:y轴重复
2)background-position:设置图片的起始位置
图片的位置 图片在浏览器中显示的位置
默认值就是 top left
3)背景颜色 background-color
背景的简写属性
background: background-color background-image background-repeat background-position
background: darkolivegreen url(img/aliyun-12.jpg) no-repeat top center;
1.4 伪类选择器概念以及使用
CSS的伪类:是描述元素的一种状态
状态分类
- 1)link状态:鼠标没有访问过的状态
- 2)hover状态:鼠标悬停在元素上的一种状态(经过)
- 3)active状态:获取元素焦点状态(点击元素了,但是没有松开)
- 4)visited状态:鼠标访问过的状态,点击了并且松开了
书写写法:
选择器:状态名称(不区分大写){
样式属性:属性值;
样式属性2:属性值2;
…
}
想不断的出现效果:必须先后顺序
注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！
伪类名称对大小写不敏感。
前端里面css样式,鼠标经过状态使用最多:hover状态
1.5 CSS浮动
CSS浮动:
当为某个标签(div)设置浮动的时候,
此时这个标签就表现的是块框不存在一样(脱离了这个文档流)
它可以向左,向右浮动,直到碰到其它块狂就停止掉
浮动属性:
float:left/right
left:左浮动
right:右浮动
清除浮动:clear:
left:左边不浮动
right:右边不浮动
both:两边都不浮动(推荐)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS浮动属性</title>
<style>
#dl1{
border: 1px solid #000000;
background-color: red;
width: 200px;
height: 200px;
/* 右浮动 */
/* float: right; */
/* 左浮动 */
float:left;
}
</style>
</head>
<body>
<div id="dl1">div1</div>
</body>
</html>
1.6 CSS盒子模型
盒子的容量大小:就是在div中指定的width和height宽度和高度,
可以指定像素,或者百分比(占整个分辨率的百分比)
盒子的厚度:就是边框的大小，就是border
盒子的padding:就是盒子的内边距控制盒子的内容和边框线之间的距离!
盒子的margin盒子的外边距:
控制盒子和盒子之间的距离!
CSS的盒子模型:
”万物皆盒子”
将任何标签都看成–个盒子，使用div块标签将标签包裹起来!
四个边框
border-radius设置圆角边框,指定像素
外边距:margin :上 右 下 左
//margin: 130px 0 0 400px;
表单标签 label 标签 绑定一个表单元素,代表普通文本
for属性是要和它绑定表单元素的name属性值一样
1.7 CSS定位属性
定位属性:position
absolute:绝对定位
当前这个元素根据父元素的位置进行移动
relative:相对定位
当前这个元素根据当前位置进行移动
fixed:固定定位
当前这个元素处在浏览器中的位置,永远处在这个位置
根据top/left设置向下,向右移动的距离(不会随着滚动条的滚动而滚动)
结合left以及top属性进行移动
1.8 网页定时器
//setInterval:每经过这个毫秒值后,重复执行任务(函数)
//settimeout:经过毫秒值后,执行一次任务
window.setTimeout(“testMouserOver()”,3000);
< img οnmοuseοver=“myTest()” width=“150” height=“150” src=“./img/西瓜.jpg” >
2 JS
2.1 javaScript入门(js)–>以前"liveScript"
方式1:内部方式
在head标签体中,书写script标签,里面js代码
弊端: js代码和html代码混合到一块,不利于管理(后端人员可以直接用)
方式2:外部方式 (前端开发中,推荐)
在js文件夹里面创建.js文件,把js代码代码放进去
在当前html页面导入外部js文件
在head标签体中指定 script标签体里面 src=“js文件地址”
<script src="css/my.js">
//常用的内置函数
//给浏览器写入内容
document.write("hello,javascript我来了") ;
//在浏览器的控制台打印日志
console.log("hello,javascript!") ;
//在浏览器中弹一个提示框
//window可以不写
window.alert("hello,javascript")
//在浏览器总打开确认提示
//var定义任何变量的,var可以不写
flag = window.confirm("您忍心删除吗?") ;
if(flag){
alert("删除了")
}else{
alert("取消删除")
}
</script>
2.2 Js中定义变量以及数据类型
1)在js中,定义变量使用var定义，var可以省略不写 可以定义任何语言
2)在js中查看数据类型使用的函数typeof(变量名):
查看这个变量的数据类型
3)js中,一个变量可以重复定义,在后面的值将前面的值覆盖掉,(js是弱类型语言)
4)js中,变量的数据类型:基本类型
无论是小数还是 整数，都是number类型- --自动提示浏览器内置对象:Number
无论是字符还是字符串,都是string类型- --自动提升为浏览器内置对象String
boolean类型, ----自动提升为浏览器内置对象Boolean
object类型—自动提升为浏览器内置对象bject ( 代表所有js对象的模板)
undefined:未定义类型,没有赋值,没有意义;
2.3 javaScript运算符和流程控制语句
算数运算符 + - * %
比较运算符
< > = >= <= == !=
逻辑运算符
逻辑单&,逻辑双&&,逻辑单|,逻辑双||,逻辑非,逻辑异或^
表示并列关系:多个条件必须同时满足逻辑双与&&,跟java一样,左边为false,右边
表示或的关系:多个条件满足一个条件即可 || 跟java一样,左边true,右边不执行!
2.4 js的函数定义(方法定义)以及调用
定义函数的格式
function 函数名(参数名1,参数名2,…){
1)直接在函数里面逻辑,直接去打印在浏览器中输出
2)完成逻辑之后,使用return 返回结果;
}
调用的函数
1)单独调用 函数名(实际参数列表…);
2)赋值调用
var 结果变量 = 函数名称(实际参数列表) ;
注意事项:
1)定义函数的时候,函数名上的形式参数不能带var
2)定义函数时,虽然js中没有返回值类型,但是函数依然可以使用return 关键字;
3)在js中没有方法重载的概念,后面定义的方法会将前面的方法覆盖掉;
当实际参数的个数小于形式参数个数,函数依然会调用,结果NaN(没有值)
实际参数个数大于形式参数个数,函数依然执行,结果会把多余的参数不参与运算;
4)函数内置一个数组，arguments ，就是实际参数赋值给形式参数
函数的应用代码
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
需求：在文本输入框中输入月份的之，判断所属季节
3，4，5 春季
6，7，8 夏季
9，10，11 秋季
12，1，2 冬季
-->
</head>
<body>
<input type="text" id="month" />
<!-- 1)事件源 -->
<input type="button" value="查询" onclick="myClick()" /><!-- 绑定事件监听器 -->
</body>
<script>
//2)编写事件监听器
function myClick(){
//alert("点击了") ;
//完成:获取input type="text"文本输入框的默认值 value属性
//dom操作:
//1)通过id="month"获取input标签对象
// 语法:oElement = document.getElementById(sIDValue)
var inputElement = document.getElementById("month") ;
//js中属性:nodeName:节点名称
//alert(inputElement.nodeName)
//2)获取里面value属性
var content = inputElement.value ;
//测试
//alert(typeof(content)) ;
//switch语句
//可以case里面的数据值比较,不会自动转换成number
//js---数据类型转换的函数
//parseInt(变量名) :将string(数字字符串)---number
content=parseInt(content) ;
//测试
//alert(typeof(content)) ;
switch(content){ //conent---string(自动转换String)字符串
case 3:
case 4:
case 5:
alert("春季") ;
break ;
case 6:
case 7:
case 8:
alert("夏季") ;
break ;
case 9:
case 10:
case 11:
alert("秋季") ;
break ;
case 12:
case 1:
case 2:
alert("冬季") ;
break ;
default:
alert("非法数据") ;
break ;
}
}
</script>
</html>
2.5 Js事件编程三要素
1)事件源----就是html标签
2)编写监听器 ----就是编写一个函数 function 函数名称(){}
3)绑定事件监听器 —就是在事件源上通过一些属性on事件名称 = “函数名称()”
2.6 js中的内置对象
1)内置对象之String
创建一个字符串对象
var 对象名 = new String(“字符串值”) ;
创建字符串对象,推荐的方式和Java一样,直接常量赋值的方式
var 对象 名 = “字符串” ;
1)js中valueOf():获取的对象的原始值,才比较内容是否相同
2)charAt(inded):返回指定索引处的字符
3)concat(str):拼接一个字符串,返回一个新的字符串
4)fontcolor(颜色名):对字符串进行颜色标记
5)indexOsf(str):查询子字符串在大串第一次出现的索引值
6)spilt(str):使用指定的分割符将字符串拆分字符串数组
2)内置对象之Array
三种方式创建数组
arrayObj = new Array()
arrayObj = new Array([size])
arrayObj = new Array([element0[, element1[, …[, elementN]]]])
第三种方式:可以简写为
arrayObj = [element0, element1, …, elementN]
js中没有角标越界一说,可以不断扩容!
Array内置的方法 join(str):使用分割符号,将数组的元素拼接成字符串
2.7 Js中的for-in语句
静态初始化数组
虽然js的数组可以任何类型元素,但是实际开发中,指定的同一个类型的元素
var arr = ["hello","world","javaee","mysql",10] ;
alert(arr.length) ;
for(var i in arr){
alert(arr[i]) ;
}
document.write("<br/>") ;
3)内置对象之Date
Date对象: 代表日期时间
创建日期对象: var 对象名 = new Date() ;
document.write(date) ; //日期格式 星期 月份以及月中日期 年份 时:分种:秒 时区
yyyy-MM-dd HH:mm:ss 日期文本格式
1)getFullYear():获取当前年份值
2)getMonth():获取年中的月份
3)getDate(): 获取月中的日期
4)getHours(): 获取一天中的小时
5)getMinute(): 获取分钟数
6)getSeconds(): 分钟中的秒
innerHTML和innerText两个区别
这两个都可以给任何标签设置文本 ----任何标签都有这俩个属性
innerHTML属性:渲染html标签
innerText属性:只是指定标签体中的文本内容
获取span标签对象
var span = document.getElementById(“spanTip”) ;
2)可以设置它的文本内容
span.innerHTML = “< h3>helloWorld” ;
2.8 自定义对象
类似Java中,定义学生类—创建学生,描述学生信息
class Student{属性} 创建学生:Student 对象名 = new Student() ;
自定义对象:格式和定义函数的格式一样
方式1:类似Java中的有参构方法
//定义格式
function 对象(形式参数列表){
追加属性
追加方法
}
//创建对象
var 对象 名 = new 对象(实际参数列表) ;
//定义学生对象
function Student(name,age,gender,address){
//追加属性
this.name = name ;
this.age = age ;
this.gender = gender;
this.address = address ;
//追加功能
this.study = function(className){ //课程名称
alert("正学习"+className) ;
}
this.speak = function(){
alert("会说英语") ;
}
}
//创建学生对象
var s = new Student("张三",20,"女","西安市") ;//给属性赋值
方式2:类似于Java中的无参构造方法
//定义对象
function 对象(){
}
//创建对象
var 对象名 = new 对象() ;
//追加属性
对象名.属性名 = 值;
//追击方法
对象名.方法名 =function(){
...
}
function Student(){
}
//创建
var s = new Student() ;
//追加属性
s.name = "李四" ;
s.age = 35 ;
s.gender = "男" ;
s.address = "北京市朝阳区" ;
//追加方法
s.study=function(className){
alert("正在学习"+className) ;
}
s.speak =function(){
alert("会说英语") ;
}
方式3: 利用Object:代表所有js对象的模板
//直接创建
var s = new Object() ;
//追加属性
s.name = "张三" ;
s.age = 30;
s.gender ="男" ;
s.address = "西安市" ;
//追加方法
s.study =function(classname){
alert("正在学习"+classname) ;
}
//对象名.属性
//document.write("姓名是:"+s.name+",年龄是:"+s.age+",性别是:"+s.gender+",地址是:"+s.address) ;
//对象名.方法名() ;
//s.study("JavaEE") ;
//s.speak() ;
方式4:字面值的方式:json数据(重点)
{“key”:value}
普通格式: {}---->代表json对象(描述 类似于Java实体)
var 对象名= {
"key":[
{"key1":value1},{},{}
]
}
//对象名.key索引值.key1
2.9 什么是DOM编程?
标签中唯一id属性值获取
document.getElementById(“id属性值”): 获取指定的标签对象
所有同名class属性值 document.getElementsByClassName(“class属性值”): 获取的是标签对象列表
通过同名name属性值(在一个html页面所有同名name属性值)
document.getElementsByName(“name属性值”) ; —获取的标签对象列表
通过标签名称获取标签对象,返回的也是标签对象列表
documentg.getElementsByTagName(“标签名称”) ;
获取文本输入框输入的内容
方式1)通过id属性值获取 input标签对象(推荐方式1)
var input = document.getElementById(“userId”) ;
方式2)通过class属性值获取 input标签对象 列表
方式3):通过同名name属性值(在一个html页面所有同名name属性值)
方式4):通过标签名称获取,返回标签对象列表
DOM操作的步骤
//页面载入事件的函数
function init(){
//通过 id="btn"获取标签input标签对象
var input = document.getElementById("btn") ;
//获取里面内容vlaue值
var in = input.value;
document.alert(in);
//获取id="userTip"的span标签对象
var span= document.getElementById("userTip") ;
//设置span标签对象的html文本
span.innerHTML = "< stong>hello</ strong>".fontcolor("green") ;
}
2.10 网页时钟
<html>
<head>
<meta charset="utf-8">
<title>网页时钟</title>
<script>
function init(){
//产生日期时间方法
genernateDate();
}
function genernateDate(){
//1)创建日期对象
var date = new Date() ;
//2)拼接出日期时间
var dateStr = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+
date.getDate()+"  "+date.getHours()+":"+
date.getUTCMinutes()+":"+date.getSeconds() ;
//3)dom操作:
//获取id="tip"所在的span标签对象
var span = document.getElementById("tip") ;
//4)设置span标签对象的innerHTML属性
span.innerHTML = "<h3>"+dateStr+"</h3>";
}
//网页定时器两种
//window对象的方法(window可以不写)
//setInteval("函数()",时间毫秒值) :每经过这个毫秒后,重复执行这个任务函数
//settimeout("函数()",时间毫秒值):经过毫秒后,执行一次任务函数
setInterval("genernateDate()",1000) ; //每1秒中,生成时间任务
</script>
</head>
<body onload="init()">
当前系统时间为:<span id="tip"></span>
</body>
</html>
2.11 js中常用的事件分类
点击相关的事件
单击事件 onclick
双击事件 ondblclick
和焦点相关的事件
获取焦点 — 举例:文本输入框 – 点击进去输入内容
onfocus
失去焦点
onblur
和选项卡发生变化相关的事件
onchange :下拉菜单—下拉选项一变化就会触发这个事件
鼠标经过事件
onmouseover
鼠标移出事件
onmouseout
页面载入事件:—用在body标签中,让body内容加载完毕就会触发onload事件
2.12 js 正则表达式
Js正则表达式定义格式
var 正则表达式对象名 = /正则表达式的语法/ ; 基本格式 (不完全匹配)
使用正则表达式对象.test(获取用户输入的内容的字符串)-- 进行校验的方法,如果匹配成功,字符串没有问题
否则,匹配失败;
数量词相关的语法
X:代表字符
X+:X字符出现一次或者多次
X*:X字符出现零次或者多次
X?:X字符出现零次或者一次
范围相关的:
X{n,m}:X字符至少出现n次不超过m次
X{n,}:X字符至少出现n次
X{n}:X字符恰好出现n次
X[A-Za-z0-9_] 匹配数字或者字母(不区分大小写)或下划线— 等价于\w
X[0-9]:匹配纯数字 等价于 \d
和Java语言 需要写上边界匹配符号:完全匹配 (实际开发中使用)
边界符号 :^ 以,…开头
$ 以… 结尾
var 正则表达式对象名 = /^正则表达式语法 $/ ;
X字符本身就是.---- 必须要转义 .
2.13 原生Js表单校验
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 设置背景 */
body{
background-image: url(img/bg.jpg);
}
/* div外边框设置 */
#forDiv{
border: 1px solid #000;
/* 设置圆角边框,指定像素 */
border-radius: 10px;
width: 460px;
height: 400px;
/* 外边距:margin :上 下 左 右 */
margin: 80px 0 0 300px;
}
/* 用户登录设置 */
#u{
margin: 40px 0 0 80px;
}
#p1{
margin: 25px 0 0 80px;
}
#p2{
margin: 25px 0 0 80px;
}
#e{
margin: 25px 0 0 80px;
}
#a{
margin: 25px 0 0 80px;
}
#btn{
margin: 20px 0 0 150px;
}
</style>
</head>
<body>
<div id="forDiv">
<!-- 表单标签 label 标签 绑定一个表单元素,代表普通文本
for属性是要和它绑定表单元素的name属性值一样
-->
<form action="server.html" method="get" onsubmit="return checkAll()">
<div id="u">
<label style="margin-right:30px ;" for="username">用户名</label>
<input type="text" name="username" placeholder="请输入用户名" id="user" onblur="checkUserName()" />
<span id="userTid"></span>
</div>
<div id="p1">
<label for="password" style="margin-right: 30px;">密  码</label>
<input type="text" name="password" placeholder="请输入密码" id="pwd" onblur="checkPwd()" />
<span id="pwdTid"></span>
</div>
<div id="p2">
<label for="password" style="margin-right: 15px;">确认密码</label>
<input type="text" name="password" style="margin-left 10px: ;" placeholder="请再次输入密码" id="repwd" onblur="checkRePwd()" />
<span id="repwdTid"></span>
</div>
<div id="e">
<label style="margin-right:30px ;" for="email">邮  箱</label>
<input type="text" name="email" placeholder="请输入邮箱" id="emaile" onblur="checkEmail()"/>
<span id="emailTid"></span>
</div>
<div id="p2">
<label style="margin-right: 30px" for="happy">爱  好</label>
<input type="checkbox" name ="happy" value="篮球" />篮球
<input type="checkbox" name ="happy" value="羽毛球" />羽毛球
<input type="checkbox" name ="happy" value="足球" />足球
</div>
<div id="a">
<label style="margin-right:30px ;" for="family">住  址</label>
<select style="margin-left:10px ;" name="family" onchange="testChange()" id="jiguan">
<option value="请选择">请选择</option>
<option value="山西省">山西省</option>
<option value="陕西省">陕西省</option>
<option value="广东省">广东省</option>
<option value="广西省">广西省</option>
<option value="河南省">河南省</option>
<option value="河北省">河北省</option>
<option value="黑龙江省">黑龙江省</option>
<option value="哈尔滨省">哈尔滨省</option>
<option value="江苏省">江苏省</option>
<option value="甘肃省">甘肃省</option>
<option value="台湾省">台湾省</option>
</select>
<select id="city">
</select>
</div>
<div id="btn">
<input style="margin-left:55px ;" type="submit" value="注册" />
</div>
</form>
</div>
</body>
<script>
//表单是否能够成功提交的方法
function checkAll(){
//校验整个表单中所有的表单项
if(checkUserName() && checkPwd() && checkRePwd() && checkEmail()){
return true ;//能够提交
}else{
return false ;//不能提交
}
}
//用户校验
function checkUserName(){
//获取用户名输入内容- --通过id= "username”获取标签对象，然后同时访value
var username = document.getElementById("user").value
//获取id= "userTid"的span标签对象
var span = document.getElementById("userTid");
//定义正则表达式
//用户名:8-16位的数字或者字母组成
var reg = /^[A-Za-z0-9]{8,16}$/;
//校验
if(reg.test(username)){
//成立
//设置span标签对象的html文本
span.innerHTML = "<stong> √ </strong>".fontcolor("green");
return true;
}else{
//不成立
span.innerHTML ="<stong> X </strong>".fontcolor("red");
return false ;
}
}
//密码校验
function checkPwd(){
//获取密码名输入内容- --通过id= "username”获取标签对象，然后同时访value
var pwd = document.getElementById("pwd").value
//获取id= "userTid"的span标签对象
var span = document.getElementById("pwdTid");
//定义正则表达式
//密码名:6-12位的数字或者字母组成
var reg = /^[A-Za-z0-9]{6,12}$/;
//校验
if(reg.test(pwd)){
//成立
//设置span标签对象的html文本
span.innerHTML = "<stong> √ </strong>".fontcolor("green");
return true;
}else{
//不成立
span.innerHTML ="<stong> X </strong>".fontcolor("red");
return false ;
}
}
//确认密码校验
//校验确认密码
function checkRePwd(){
//获取密码框输入内容---通过id="pwd" 获取标签对象,然后同时访问value
var pwd = document.getElementById("pwd").value ;
//获取确认密码输入框的内容 id="repwd"
var repwd = document.getElementById("repwd").value ;
//获取id="rePwdTip" 的span标签对
var span = document.getElementById("repwdTid") ;
//校验
if(pwd == repwd){
//成立
//设置span标签对象的html文本
span.innerHTML = "<stong>√</strong>".fontcolor("green") ;
return true ;
}else{
//不成立
span.innerHTML = "<stong>X</strong>".fontcolor("red") ;
return false ;
}
}
//邮箱校验
function checkEmail(){
//获取邮箱名输入内容- --通过id= "username”获取标签对象，然后同时访value
var emaile = document.getElementById("emaile").value
//获取id= "userTid"的span标签对象
var span = document.getElementById("emailTid");
//定义正则表达式
//邮箱名:
var reg = /^[A-Za-z0-9_]+@[A-Za-z0-9_]+(\.[a-z]{1,3}){1,2}$/;
//校验
if(reg.test(emaile)){
//成立
//设置span标签对象的html文本
span.innerHTML = "<stong> √ </strong>".fontcolor("green");
return true;
}else{
//不成立
span.innerHTML ="<stong> X </strong>".fontcolor("red");
return false ;
}
}
//测试选项卡发送变化的事件
function testChange(){
//alert("选项卡变化触发了") ;
//当选项卡一变化,需要获取到选的内容
//id="jiguan" 获取select标签对象
var select = document.getElementById("jiguan");
//alert(select.value)
var jiguan = select.value ;//获取到省份内容
//通过id= "city"获取城市所在的select标签对象
var selectCity = document.getElementById("city");
//选项卡一变化,需要将上一次城市的列表,清除
selectCity.innerHTML = "";
if("陕西省"==jiguan){
//创建一个数组---陕西省的城市
var arr = ["西安市","延安市","神木市","咸阳市","宝鸡市","渭南市"];
//遍历
for(var i= 0 ;i< arr.length; i++){
//alert(arr[i]);
selectCity.innerHTML += "<option value = "+arr[i]+">"+arr[i]+"</option>";
}
}
if("甘肃省"==jiguan){
//创建一个数组---甘肃省的城市
var arr = ["兰州市","甘南藏族自治州","临夏回族自治州","陇南市","张掖市","天水市","定西市"];
//遍历
for(var i= 0 ;i< arr.length; i++){
//alert(arr[i]);
selectCity.innerHTML += "<option value = "+arr[i]+">"+arr[i]+"</option>";
}
}
if("山西省"==jiguan){
//创建一个数组---山西省的城市
var arr = ["太原市","大同市","不知道","不知道","牛马","神州大地"];
//遍历
for(var i= 0 ;i< arr.length; i++){
//alert(arr[i]);
selectCity.innerHTML += "<option value = "+arr[i]+">"+arr[i]+"</option>";
}
}
if("河南省"==jiguan){
//创建一个数组---河南省的城市
var arr = ["郑州","洛阳市","商丘市","开封市"];
//遍历
for(var i= 0 ;i< arr.length; i++){
//alert(arr[i]);
selectCity.innerHTML += "<option value = "+arr[i]+">"+arr[i]+"</option>";
}
}
if("台湾省"==jiguan){
//创建一个数组---台湾省的城市
var arr = ["高台市","台北市","太难市","高雄市","龙井市","钱塘江市"];
//遍历
for(var i= 0 ;i< arr.length; i++){
//alert(arr[i]);
selectCity.innerHTML += "<option value = "+arr[i]+">"+arr[i]+"</option>";
}
}
if("广东省"==jiguan){
//创建一个数组---广东省的城市
var arr = ["潮汕市","深圳市","东莞市","佛山市","香山市","奥特曼市"];
//遍历
for(var i= 0 ;i< arr.length; i++){
//alert(arr[i]);
selectCity.innerHTML += "<option value = "+arr[i]+">"+arr[i]+"</option>";
}
}
if("江苏省"==jiguan){
//创建一个数组---江苏省的城市
var arr = ["上海市","苏州市","南京市","盐城市","无锡市","南通市"];
//遍历
for(var i= 0 ;i< arr.length; i++){
//alert(arr[i]);
selectCity.innerHTML += "<option value = "+arr[i]+">"+arr[i]+"</option>";
}
}
}
</script>
</html>
3 Jquery
Jquery的丰富的js库，大量的api（ajax，dom操作，事件处理 都有自己的功能）
3.1 Jquery 快速入门
1)导入js库
导入压缩js文件 (jquery-版本号-min.js)
实际项目上线的时候,使用压缩格式
jquery-版本号.js(没有压缩格式)—占用空间很多
2)jquery的程序—需要有页面载入事件—body内容加载完毕 里面完成具体逻辑
//页面载入事件:程序入口
$(function(){
//通过id="btn"获取Jquery标签对象
//Jquery的写法
$("#btn").click(function(){
alert("点击了") ;
}) ;
}) ;
3.2 js和jquery之间的转换
<!-- 导入js库 -->
<script src="js/jquery-3.4.1.min.js"></script>
<script>
//原生Js标签对象 ----Jquery标签对象 (常用的)
function testChangeValue(){
//1)获取id="inputId"所在input标签对象
var inputJs = document.getElementById("inputId") ;
//2)将inputJs 标签对象转换成Jquery
//使用$(js对象)---Jquery对象
var $input = $(inputJs) ;
//3)改变文本框的value值 ---jquery ---val(设置值) ;
$input.val("已经转换成了Jquery标签对象") ;
}
//页面载入事件
$(function(){
//点击第二个按钮---->获取id="btn" 的jquery对象
$("#btn").click(function(){
//里面$("#btn")这个就是我们的jquery标签对象
//Jquery提供了一个方法:get(index)--->通过索引值获取匹配第几个元素 (index从0开始)
var inputJs = $("#btn").get(0) ;//jquery对象转换成js
//通过原生js标签对象 改变value属性
inputJs.value = "已经改变为了Js对象" ;
}) ;
}) ;
3.3 Jquery最常见的选择器
通过id属性值获取Jquery标签对象
原生的js的标签对象innerHTML/innerText---->html(“xx”)/text(“xx”) ;
$(function(){
//获取span标签Jquery对象
//设置html文本
//$("#spanTip").html("<h2>hello,Jquery</h2>") ;
//获取标签文本
//var htmlText = $("#spanTip").html() ;
//设置普通文本
$("#spanTip").text("hello") ;
});
//通过原生js方式:通过id属性值获取标签对象
//var span = document.getElementById("spanTip") ;
//设置标签对象的 innerHTML属性:html标签文本
//要么设置普通文本: innerText属性
//span.innerHTML = "<h3>hello,Jquery</h3>" ;
//span.innerText = "helloworld";
3.4 Jquery 的dom操作
//通过document对象的方法获取标签对象,访问属性
var 标签对象名= document.getElementById(“id属性值”) ;
//标签对象名.html标签的属性
标签对象名称.style=“样式属性名:属性值;” ;
value属性
src属性
href属性
3.5 js的常用选择器
3.5.1 基本选择器
Jquery的id选择器
$(“#id属性值”) 获取Jquery标签对象
Jquery的element选择器
$(“标签名称”) 获取标签对象
Jquery.class 类选择器
$(“.class属性值”) 获取标签对象
Jquery的 并集选择器
$(“标签名称,#id属性值,.class属性值”) 获取标签对象
3.5.2 层级选择器
层级选择器
后代选择器(匹配的是所有后代元素:不分层级关系)
$(“#id属性值/标签名称/.class属性值 #id属性值/标签名称/.class属性值”)
子元素选择器 parent > child
$(“选择器1 > 选择器2”) :选择器2它的元素一定是选择器1的子元素
3.5.3 属性选择器
Jquerya属性选择器语法
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]”)
4 Servlet入门(重点)
Server Applet :前后端的交互的这一层
针对后端服务器程序的开发(服务连接器)
入门
1)导入servlet.jar包
2)编写Servlet –
3)配置servlet
4)访问servlet-----需要有服务器(Apache 提供tomcat)
4.1 单例设计模式
单例设计模式思想:在内存中始终创建一个对象
有俩种方法
饿汉式:不会出现安全问题的一种单例模式–类一加载就创建当前类实例
1)当前类的无参构造方法私有化
2)在类的成员位置,创建一个 当前类的实例(实例变量),私有的
3)对外提供静态的公共访问方法,返回值是当前类本身
懒汉式:可能出现安全问题的单例模式
懒汉式:
public class Student {
//在类的成员位置,创建一个当前类的实例( 实例变量),私有的
private static Student s = new Student();
//无参构造私有化
private Student(){
}
public static Student getStudent(){
return s;
}
}
懒汉式:可能出现安全问题的单例模式
延迟加载场景或者懒加载场景,就会导致出现问题----结合多线程场景
如何解决线程安全问题-------->synchronzied(锁对象){}---->或者同步方法
1)无参构造方法私有化
2)在当前类的成员位置提供一个私有化的静态的 当前类型的变化
3)对外还有提供共的静态方法,返回值是当前类本身
需要判断:如果当前对象名是null,然后在却new创建
public class Teacher {
private static Teacher t;
private Teacher(){}
/*public static Teacher getTeacher(){
synchronized (Teacher.class) {
if (t == null) {
t = new Teacher();
}
}
return t;
}*/
public static synchronized Teacher getTeacher(){
if (t == null) {
t = new Teacher();
}
return t;
}
}
4.2 Servlet的生命周期
servlet是一个单例的! ( 单侧设计模式— -属于创建型设计模式(创建对象))
单例:在内存中始终只有一个对象!
1)Servlet什么时候被创建
默认在访问的时候创建,只创建一次,单例
无参构造方法执行了一次
2)init 初始化执行一次
3)service()方法可以不断调用—程序入口-- 以后写代码覆盖里面doGet()/doPost
4)destroy():服务器正常关闭,会调destroty方法,等待jvm的垃圾回收器回收
4.3 Web服务器
web应用服务器
tomcat,jetty,jboss…
tomcat:开源—免费 Apache ----理论并发访问量 500个
Nginx服务器----(处理高并发,负载均衡去使用的) —支持5个并发
下载tomcat服务器:
tomcat.apache.org
4.4 tomcat的目录结构
bin目录主要是用来存放tomcat的命令，主要有两大类，一类是以.sh结尾的（linux命令），另一类是以.bat结尾的（windows命令）。
很多环境变量的设置都在此处，例如可以设置JDK路径、tomcat路径
startup 用来启动tomcat
shutdown 用来关闭tomcat
修改catalina可以设置tomcat的内存
conf目录主要是用来存放tomcat的一些配置文件。
server.xml可以设置端口号、设置域名或IP、默认加载的项目、请求编码
web.xml可以设置tomcat支持的文件类型
context.xml可以用来配置数据源之类的
tomcat-users.xml用来配置管理tomcat的用户与权限
在Catalina目录下可以设置默认加载的项目
lib目录主要用来存放tomcat运行需要加载的jar包。
例如，像连接数据库的jdbc的包我们可以加入到lib目录中来。
logs目录用来存放tomcat在运行过程中产生的日志文件，非常重要的是在控制台输出的日志。（清空不会对tomcat运行带来影响）
在windows环境中，控制台的输出日志在catalina.xxxx-xx-xx.log文件中
在linux环境中，控制台的输出日志在catalina.out文件中
temp目录用户存放tomcat在运行过程中产生的临时文件。（清空不会对tomcat运行带来影响）
webapps目录用来存放应用程序，当tomcat启动时会去加载webapps目录下的应用程序。可以以文件夹、war包、jar包的形式发布应用。
当然，你也可以把应用程序放置在磁盘的任意位置，在配置文件中映射好就行。
work目录用来存放tomcat在运行时的编译后文件，例如JSP编译后的文件。
清空work目录，然后重启tomcat，可以达到清除缓存的作用
4.5 tomcat启动并访问
启动— 手动启动—进入tomcat解压目录 bin start.bat启动
可能出现闪退
1)没有配置JAVA_HOME —jdk环境变量配置第二种方式
tomcat启动的时候–寻找jdk环境变量(tomcat是java编写的,必须找到
JAVA_HOME变量名)
2)配置了JaVAH_HOME—还闪退
需要配置系统变量 JRE_HOME
启动乱码
在tomcat解压目录里面conf---->logging.properties
47行----utf-8—>gbk
访问tomcat http://localhost:8080/
//你电脑关了防火墙----访问其他电脑服务器
http://10.35.165.216:8080/
4.6 在idea创建WEB项目,idea里面配置tomcat部署web项目
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">
<!--web项目下的全局配置文件-->
<!--开始配置自己的白编写servlet-->
<!--servlet的基本配置-->
<servlet>
<!--servlet名称默认和当前自定义的类名一致-->
<servlet-name>MyFirstServlet</servlet-name>
<!--当前这个类全限定名称-->
<servlet-class>com.qf.servlet_01.MyFirstServlet</servlet-class>
</servlet>
<!--servlet的映射配置-->
<servlet-mapping>
<!--servlet名称和上面名称必须一致-->
<servlet-name>MyFirstServlet</servlet-name>
<!--访问的映射路径:
必须以"/开头",没有/,项目启动报错
但是,不能以"/"结束
这个url-pattern必须唯一
-->
<url-pattern>/first</url-pattern>
</servlet-mapping>
</web-app>
4.7 Servlet的执行流程(面试题)
4.8 Servlet一些内置对象
request 请求对象 类型 javax.servlet.ServletRequest 作用域 Request
response 响应对象 类型 javax.servlet.SrvletResponse 作用域 Page
pageContext 页面上下文对象 类型 javax.servlet.jsp.PageContext 作用域 Page
session 会话对象 类型 javax.servlet.http.HttpSession 作用域 Session
application 应用程序对象 类型 javax.servlet.ServletContext 作用域 Application
out 输出对象 类型 javax.servlet.jsp.JspWriter 作用域 Page
config 配置对象 类型 javax.servlet.ServletConfig 作用域 Page
page 页面对象 类型 javax.lang.Object 作用域 Page
exception 例外对象 类型 javax.lang.Throwable 作用域 page
结语:如何接收前端表单提交的数据?这个问题留到下一次在详细讲解.
扫一扫
342
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
