JavaWeb全套教程笔记_前端技术
JavaWeb全套教程笔记第一阶段_前端技术
自己整理一套详细的笔记资料,可以满足平时查阅复习,还能帮助别人学习JavaWeb知识。JavaWeb教程分为四个阶段
前端技术
1.HTML、2.CSS、3.JavaScript、4.正则表达式
后端技术
1.HTTP、2.Tomcat服务器、3.XML技术、4.Servlet、5.Session&Cookie、6.Filter&Listener、7.MVC(Model View Controller)
后端高级
1.MVC优化、2.IOC、3.ThreadLocal&TransactionManager、4.OpenSessionViweFilter、5.BaseDAO、6.ContextLoaderListener
前端框架
1.JSON、2.Vue、3.AJAX、4.Axios
整套教程配备三套小案例，学以致用、融会贯通。
大致了解一下JavaWeb架构流程图
HTML+HTML介绍
前言:在学习JavaWeb之前,我们学习的都是Java基础,都是在控制台上交互,从JavaWeb开始就把控制台改成网页(前端),实现前后端互动。
JavaWeb阶段,我们是通过浏览器向服务器发送请求(HttpRequest),当浏览器接收到请求时,会做出请求处理,处理完毕后会把资源响应(HttpResponse)给浏览器,浏览器解析响应资源形成我们看到的可视化页面
网页:是由代码组成的,下面先学习页面技术—>HTML、CSS、JavaScript
1、B/S软件的结构
Javase C/S结构 Client Server客户端----->服务器
B/S结构 Brower Server结构 浏览器----->服务器
2、网页的组成部分
页面由三部分内容组成！
- 内容：是我们在页面中可以看到的数据，我们称之为内容，一般内容使用html技术来展示。
- 表现：指这些内容在页面上的展示形式。比如：布局，颜色，大小等等。一般使用css技术实现
- 行为：指的是页面中元素与输入设备交互的响应，一般使用javascript技术实现
3.HTML简介
HTML：Hyper Text Markup Language（超文本标记语言）
4.HTML文件书写规范
<!DOCTYPE html><!--约束，说明-->
<html lang="zh_CN"><!--html标签表示html的开始 lang="zh_CN"表示中午html标签中一般分为两个部分，分别是head和boby-->
<head><!--表示头部信息，一般包含三个部分内容：title标签，css样式，js代码--><meta charset="UTF-8"><!--表示当前页面使用utf-8字符集--><title>页面主题内容</title><!--表示页面标题-->
</head>
<body><!--boby标签是整个html页面显示的主体内容-->hello
</body>
</html>
5.HTML标签介绍
1.标签的格式: <标签名> 封装的数据</标签名>
2.标签名大小写不敏感
3.标签拥有自己的属性
- 分为基本属性:bgcolor=“red” 可以修改简单的样式效果
- 事件属性:οnclick=“alter(‘你好!’);” 可以直接设置事件响应后的代码
4.标签又分为,单标签和双标签
- 单标签格式: <标签名/>
- 双标签格式:<标签名> …封装的数据…</标签名>
6.常用标签介绍
6.1、font字体标签
<body>
<!--字体标签
1.需求:在网页上显示,我是字体标签,并修改字体为 宋体 颜色为红色font标签是字体标签,它可以用来修改文本的字体 颜色 大小(尺寸)color属性修改颜色face属性修改字体size属性修改文本大小
-->
<font face="黑体" color="red" size="50px">我是字体标签</font>
</body>
6.2、特殊字符
<!--
2.特殊字符需求:把<br/>换行标签变成文本转换成字符显示在页面上常用的特殊字符< ---------> <> ---------> >空格 --------->  
-->
我是<br/>标签<br/>Java 开发 工程师
6.3、 标题标签
<!--
3.标题标签需求:演示标题1 到标题6h1 - h6都是标题标签h1最大h6最小align 属性是对齐属性left 左对齐center 居中right 右对齐
-->
<h1 align="left">标题1 左对齐</h1>
<h2 align="center" >标题2 居中</h2>
<h3 align="right" >标题3 右对齐</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
6.4、 超链接标签
<!--
4.超链接a标签是 超链接href属性设置连接的地址target属性设置哪个目标进行跳转_self 表示当前页面(默认值)_blank 表示打开新页面来进行跳转
-->
<a href="http://www.bilibili.com">百度</a><br/>
<a href="http://www.bilibili.com" target="_self">百度</a><br/>
<a href="http://www.bilibili.com" target="_blank">百度</a><br/>
6.5、 无序列表
<!--
列表标签需求:使用无序列表方式,把四大天王 刘德华 郭富城 黎明 张学友展示出来ul 是无序列表type属性可以修改列表前面的符号li 是列表项
-->
<ul><li>刘德华</li><li>郭富城</li><li>黎明</li><li>张学友</li>
</ul>
6.6、img图片标签
<!--
需求:使用img标签显示一张美女的照片,并修改宽高 和边框属性img标签是图片标签,用来显示图片src属性可以设置图片的路径在Java中路径也分为相对路径和绝对路径相对路径:从工程名开始算绝对路径:盘符:/目录/文件名在web中路径分为相对路径和绝对路径两种相对路径:. 表示当前文件所在的目录.. 表示当前文件所在的上一级目录文件名 表示当前文件所在目录的文件,相当于./文件名 ./可以省略绝对路径:http://ip//prot/工程名/资源路径
-->
<img src="../imgs/youya.jpg" width="200" height="260" border="20" alt="美女找不到了"/>
6.7、table表格标签
<!--需求1:做一个带表头的 三行 三列的表格 并显示边框需求2:修改表格的宽度 高度 表格的对齐方式 单元格间距table 标签是表格标签border 设置表格间距width 设置表格宽度height 设置表格高度align 设置表格相对于页面的对齐方式cellspacing 设置单元格间距tr 是行标签th 是表头标签td 是单元格标签align 设置单元格文本对齐方式b 是加粗标签
-->
<table border="2px" height="400px" width="400px" align="center" cellspacing="10px"><tr align="center"><td align="center" ><b>1.1</b></td><th>1.2</th><th>1.3</th></tr><tr align="center"><th>2.1</th><th>2.2</th><th>2.3</th></tr><tr align="center"><th>3.1</th><th>2.2</th><th>3.3</th></tr>
</table>
效果展示:为了方便看 我自己私下加了颜色,感觉挺好看的,自己结合案例动手实现以下
6.8、 跨行跨列表格
<!--需求:新建一个五行 五列的表格第一行 第一列的单元格要跨两列第二行第一列的单元格跨两行第四行第四列的单元格跨两行两列colspan 属性设置跨列rowspan 属性设置跨行-->
<table height="400px" width="400px" bgcolor="green" border="2px" align="center" cellspacing="5px"><tr><td colspan="2" bgcolor="yellow"></td><td></td><td></td><td></td></tr><tr><td rowspan="2" bgcolor="fuchsia"></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td rowspan="2" colspan="2" bgcolor="red"></td></tr><tr><td></td><td></td><td></td></tr>
</table>
效果展示:一定要动手自己敲
6.9、 表单标签
<!--需求:创建一个个人信息注册的表单界面 包含用户名 密码 确认密码 性别(单选) 兴趣爱好(多选) 国籍(下拉列表)隐藏域 自我评价(多行文本域) 重置 提交什么是表单?表单就是html页面中国,用来收集用户信息的所有元素集合,然后把这些信息发送给服务器form标签就是表单input type="text" 是文本输入框 value设置默认显示内容input type="password" 是密码输入框 value设置默认显示内容input type="radio" 是单选框 name属性可以对其进行分组 checked="checked"表示默认选中input type="checkbox" 是复选框 checked="checked"表示默认选中input type="reset" 是重置按钮 value属性修改按钮上的文本input type="submit" 是提交按钮 value属性修改按钮上的文本input type="button" 是普通按钮 value属性修改按钮上的文本input type="file" 是文件上传域input type="hidden" 是隐藏域 当我们要发送某些信息,而这些信息不需要用户参与,就可以使用隐藏域select 标签是下拉列表框option 标签是下拉列表框中的选项 selected = "selected"设置默认选中textarea 表示多行文本输入框(起始标签和结束标签中的内容是默认值)rows 属性设置可以显示几行的高度cols 属性设置每行可以显示几个字符宽度-->
<form>用户名:<input type="text" value="山美智子"/><br/>密码:<input type="password" value="root"/><br/>确认密码:<input type="password" value="root"/><br/>性别:<input type="radio" name="sex" checked="checked">男 <input type="radio" name="sex">女<br/>兴趣爱好:<input type="checkbox">唱 <input type="checkbox">跳 <input type="checkbox">rap <input type="checkbox"checked="checked">篮球<br/>国籍:<select><option>---请选择国籍---</option><option selected="selected">中国</option><option>美国</option><option>加拿大</option><option>澳大利亚</option><option>瑞典</option>
</select><br/>自我评价:<textarea cols="80" rows="10">请输入文本</textarea><br/><input type="reset" value="重置按钮"/><input type="submit" value="提交按钮"><input type="button" value="自定义按钮"><input type="file"/>
</form>
6.10、 了解iframe框架标签
<!--iframe标签可以在页面上开辟一个小区域显示一个单独的页面iframe标签和a标签组合使用的步骤1.在iframe标签中使用name属性定义一个名称2.在a标签的target属性上设置iframe的name的属性值
-->
<iframe src="/imgs/youya.jpg" width="680px" height="450px" align="center" name="youya"></iframe>
<ul><li><a href="http://www.bilibili.com" target="youya">哔哩哔哩</a></li><li><a href="www.baidu.com" target="youya">百度</a></li><li><a href="www.jd.com" target="youya">京东</a></li><li><a href="www.taobao.com" target="youya">淘宝</a></li>
</ul>
- 表单格式化
<form><h1>用户注册</h1><table bgcolor="#6b8e23"><tr><td>用户名:</td><td><input type="text" value="Java开发"/></td></tr><tr><td>密码:</td><td><input type="password" value="root"/></td></tr><tr><td>确认密码:</td><td><input type="password" value="root"/></td></tr><tr><td>性别:</td><td><input type="radio" name="sex" checked="checked">男<input type="radio" name="sex">女</td></tr><tr><td> 兴趣爱好:</td><td><input type="checkbox">唱<input type="checkbox">跳<input type="checkbox">rap<input type="checkbox" checked="checked">篮球<br/></td></tr><tr><td>国籍:</td><td><select><option>---请选择国籍---</option><option selected="selected">中国</option><option>美国</option><option>加拿大</option><option>澳大利亚</option><option>瑞典</option></select></td></tr><tr><td>自我评价:</td><td><textarea cols="80" rows="10">请输入文本</textarea></td></tr><tr><td><input type="reset" value="重置按钮"/></td><td><input type="submit" value="提交按钮"></td><td><input type="button" value="自定义按钮"></td><td><input type="file"/></td></tr></table>
</form>
- 表单提交的细节
<!--from标签是表单标签action属性设置提交的服务器地址method属性设置提交的方式GET(默认)或POST表单提交的时候,数据没有发送给服务器的三种情况1.表单项没有name属性2.单选、复选(下拉列表中的potion标签)都需要添加value属性，以便发送给服务器3.表单项不在提交的from标签中GET请求的特点是:1.浏览器地址栏中的地址是:action属性[+?+请求参数]2.不安全3.它有数据长度的限制POST请求的特点是:1.浏览器地址栏中只有action属性值2.相对于GET请求要安全3.理论上没有数据长度的限制-->
<form action="http:localhost:8080" method="get" name="login"><h1>用户注册</h1><table bgcolor="#6b8e23"><tr><td>用户名:</td><td><input type="text" value="柚木奈奈子" name="username" d></tr><tr><td>密码:</td><td><input type="password" value="root" name="password"/></td></tr><tr><td>确认密码:</td><td><input type="password" value="root"/></td></tr><tr><td>性别:</td><td><input type="radio" name="sex" checked="checked" value="boy">男<input type="radio" name="sex" value="girl">女</td></tr><tr><td> 兴趣爱好:</td><td><input type="checkbox" name="hobby" value="sing">唱<input type="checkbox" name="hobby" value="jump">跳<input type="checkbox" name="hobby" value="rap">rap<input type="checkbox" checked="checked" name="hobby" value="basketball">篮球<br/></td></tr><tr><td>国籍:</td><td><select name="country"><option>---请选择国籍---</option><option selected="selected" value="china">中国</option><option value="usa">美国</option><option value="canada">加拿大</option><option value="Australian">澳大利亚</option><option value="Australian">瑞典</option></select></td></tr><tr><td>自我评价:</td><td><textarea cols="80" rows="10" name="desc">请输入文本</textarea></td></tr><tr><td><input type="reset" value="重置按钮"/></td><td><input type="submit" value="提交按钮"></td><td><input type="button" value="自定义按钮"></td><td><input type="file"/></td><td><input type="hidden" name="action" value="隐藏域"/></td></tr></table>
</form>
- 其他标签
<!--需求:1.div标签演示div标签 默认独占一行2.span标签演示span标签 它的长度是封装数据的长度3.p标签演示p段落标签 默认会在段落的上方或下方各空出一行来(如果已有就不再空)-->
<div>div1标签</div>
<div>div2标签</div>
<span>span标签1</span>
<span>span标签2</span>
<p>p标签1</p>
<p>p标签2</p>
7.from表单练习
根据效果图,写出html页面代码
CSS+CSS介绍
1. CSS语言介绍
CSS:是[层叠样式表单]是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言
语法规则
选择器:浏览器根据"选择器"决定受CSS样式影响的HTML元素(标签)
属性(property):是你要改变的样式名,并且每个属性都有一个值,属性和值被冒号分开,并由花括号包围,这样就组成一个完整的样式声明 例如:p{color:blue}
多个声明:如果要定义不止一个声明,则需要用分号将每个声明分开,虽然最后一条声明的最后可以不加分号(但尽量在每条声明的末尾都加上分号)
p{color:red;font-size:30px;}注:一般每行只描述一个属性
2.CSS和HTML的结合方式
前言:我这里使用推荐的方式,其他方式 基本不怎么使用,把精力用在刀刃上
把css样式写成一个单独的css文件,在通过link标签引入即可复用
需求:分别定义两个div 三个span标签 分别修改每个div标签的样式为:边框2像素 实线 红色
- CSS代码:demo.css
div{border: 2px solid red;background: orange;
}
span{border:2px solid green;background: chocolate;
}
- HTML代码:demo.html
<head><meta charset="UTF-8"><title>Title</title><!--引用demo.css文件中的代码 href"引入的是文件所在路径"--><link rel="stylesheet" type="text/css" href="demo.css"/>
</head>
<body><div>Java</div>
<div>程序员</div>
<span>要认真学习</span>
<span>要坚持锻炼身体</span>
<span>每天要按时早睡</span></body>
3.CSS选择器
- 标签名选择器
标签名选择器的格式是:标签名{属性:值;}
标签名选择器,可以决定哪些标签可以被动的使用这个样式
CSS代码
div{border: 2px solid yellow;color: blue;font-size: 30px;
}span{border: 5px dashed blue;color: red;font-size: 20px;
}
HTML代码
<head><meta charset="UTF-8"><title>标签选择器</title><link rel="stylesheet" type="text/css" href="../css/2.标签选择器.css">
</head>
<body>
<!--需求:在所有div标签上修改字体颜色为蓝色,字体大小30像素,边框为2像素黄色实线并且修改所有span标签的字体颜色为红色,字体大小20个像素,边框为5像素蓝色虚线
-->
<div>Java</div>
<div>程序员</div>
<span>要认真学习</span>
<span>要坚持锻炼身体</span>
<span>每天要按时早睡</span>
</body>
- id选择器
id选择器的格式是:#id属性值{属性:值;}
id选择器,可以让我们通过id属性选择性的去使用这个样式
CSS代码
#id001{color: blue;font-size: 30px;border: 1px solid yellow;background: chocolate;
}#id002{color: red;font-size: 20px;border: 5px dotted blue ;background: green;
}
HTML代码
<head><meta charset="UTF-8"><title>id选择器</title><link rel="stylesheet" type="text/css" href="../css/3.id选择器.css">
</head>
<body>
<!--需求:分别定义两个div标签第一个div标签定义 id 为id001 然后根据id属性定义css样式修改字体颜色为蓝色字体大小30个像素,边框为1像素黄色实线第二个div标签定义为id002,然后根据id属性定义css样式,修改的字体颜色为红色,字体大小20个像素,边框为5像素蓝色点线-->
<div id="id001">div标签</div>
<div id="id002">div标签</div>
</body>
- class选择器(类选择器)
class类型选择器的格式是:
.class 属性值{属性 : 值;
}
class类型选择器,可以通过class属性有效的选择性地去使用这个样式
CSS代码
.class01{font-size: 30px;color: blue;border: 1px yellow solid;background: green;
}.class02{color: darkgray;font-size: 26px;border: 1px red solid;background: aqua;
}
HTML代码
<body>
<!--需求:修改class属性值为class01 的span或div标签,字体颜色为蓝色,字体大小30个像素,边框为1像素黄色实线需求:修改class属性值为class02的div标签,字体颜色为灰色,字体大小26个像素,边框为1像素红色实线-->
<div class="class01">div标签 class01</div>
<div class="class02">div标签 class02</div>
<span class="class01">span标签class01</span>
<span class="class02">span标签class02</span></body>
- 组合选择器
组合选择器的格式是:选择器1,选择器2,选择器n{属性 : 值;}
组合选择器可以让多个选择器共用同一个css样式代码
CSS代码
.class01,#id01{color: red;font-size: 20px;border: 1px solid yellow;background: green;
}
HTML代码
<body>
<!--需求:修改 class="class01"的div标签和id="id01"所有的span标签字体颜色为蓝色,字体大小20像素,边框为1像素 黄色实线-->
<div class="class01">div标签</div>
<span id="id01">span标签</span><br/>
<div>div标签</div>
<div>div标签id01</div>
</body>
CSS具体相关知识,我在网上找了一篇博客,感兴趣的可以看看,我们是做Java开发的,注重的是后端,
现在项目都是前后端分离,我们只需要懂一点前端就行
CSS知识点扩展-css属性代码大全
JavaScript语言入门
1、JavaScript介绍
JavaScript(JS)语言主要是完成页面的数据验证,因此它运行在客户端,需要运行浏览器来解析执行JavaScript代码
JS是弱类型,Java是强类型
特点:
1.交互性(它可以做的就是信息的动态交互)
2.安全性(不允许直接访问本地硬盘)
3.跨平台性(只要是可以解释JS的浏览器都可以执行,和平台无关)
2、JavaScript和Html代码的结合方式
2.1、第一种方式
只需要在head标签中，或者在body标签中，使用script标签来书写JavaScript代码
代码示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">//alert是JavaScript语言提供的一个警告框函数//它可以接受任意类型的参数，这个参数就是警告框的提示信息alert("我变秃了,也变强了")</script>
</head>
<body></body>
</html>
2.2、第二种方式
使用script标签引入 单独的JavaScript代码文件
js代码
alert("我变秃了,也变强了")
html代码
<head><meta charset="UTF-8"><title>Title</title><!--现在需要使用script引入外部的js文件来执行src 属性专门用来引入js文件路径(可以是相对路径,也可以是绝对路径)script标签可以用来定义js代码,也可以用来引入js文件但是,两个功能二选一使用,不能同时使用两个功能--><script type="text/javascript" src="../js/hello.js"></script><script type="text/javascript">alert("我又强一次");</script>
</head>
3、变量
3.1、什么是变量?变量是可以存放某些值的内存的命名
JavaScript的变量类型:
数值类型: number字符串类型: string对象类型: object布尔类型 boolean函数类型 function
JavaScript里特殊的值:
undefined 未定义,所有js变量未赋予初始值的时候,默认值都是undefinednull 空值NAN 全称是:Not a Number 非数字非数值
JS中定义变量格式
var 变量名var 变量名 = 值
代码示例
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">var i;alert(i);//undefinedi = 32;//typeof() 可以取变量的数据类型返回alert(typeof( i)); //numberi="程序员";alert(i); //程序员var a = 10;var b = "十";alert(a*b); //NaN是非数字 非数值</script>
</head>
3.2 、关系(比较)运算
等于: 等于就是简单的做字面值的比较
全等于: 除了做字面值的比较之外,还会比较两个变量的数据类型
<script type="text/javascript">var a = "10";var b = 10;alert(a == b); //truealert(a === b); //false
</script>
3.3、逻辑运算
且运算: &&
或运算: ||
取反运算: !
在javascript语言中,所有的变量,都可以做为一个boolean类型的变量去使用
0 null undefined “”(空串) 都认为是false
var a = "abc"; //真
var b = true; //真
var c = false; //假
var d = null; //假
&& 且运算:
1.当表达式全为真的时候,返回最后一个表达式的值
2.当表达式中,有一个为假的时候,返回第一个为假的表达式的值
alert(a && b); //true
alert(b && a); //abc
alert(a && d); //null
alert(c && d); //false
|| 或运算
1.当表达式全为假时,返回最后一个表达式的值
2.只要有一个表达式为真,就会返回第一个为真的表达式的值
alert(a || d); //abc
alert(d || c); //false
并且 &&与运算 和 ||或运算 有短路
短路就是说,当这个&&或||运算有结果了以后,后面的表达式不再执行
4、数组(重点)
4.11.数组定义方式
JS中 数组的定义
格式:
var 数组名 = []; 空数组
var 数组名 = [1,“铃”,“木”,“晴子”,true]; 定义数组同时赋值元素
<script type="text/javascript">let arr = [];//定义一个空数组alert(arr[0]) //undefined//JavaScript语言中的数组,只要我们通过数组下标赋值,那么最大的下标值,就会自动的给数组做扩容操作let arrs = [1,"佐藤油奈",true];alert(arrs.length) //3//数组的遍历for (let i = 0; i <arrs.length ; i++) {alert(arrs[i])}
</script>
5、函数(重点)
5.1、函数定义的两种方式
第一种:可以使用function关键字来定义函数
使用的格式如下:
function 函数名 (形参列表){
函数体
}
<script type="text/javascript">//定义一个无参数函数function fun(){alert("无参数fun()执行了...")}//函数调用才会执行fun();//定义一个有参数函数function person(name,age){alert("有参数person()执行了... name:"+ name+"age:"+age);}person("三上悠亚",26)//定义带有返回值的函数function sum(num1,num2){return num1 + num2;}alert(sum(10,20));
</script>
第二种:
var 函数名 = function(形参列表){
函数体
}
<script type="text/javascript">//定义无参函数let fun = function (){alert("无参函数被调用了...");}fun();//定义有参数方法let person = function (name,age){alert("姓名:"+name+"年龄:"+age)}person("小表妹",26);//定义带返回值的函数let girl = function (name,chest){return "姓名:"+name+"胸围:"+chest;}alert( girl("大表姐","36D"));
</script>
注:在Java中函数允许重载,但是在JS中函数的重载会直接覆盖掉上一次的定义
5.2、函数的arguments 隐性参数(只在function函数内)
就是在function函数中不需要定义,但却可以直接用来获取所有参数的变量,我们管它叫隐性参数
隐性参数特别像Java基础的可变长参数一样(public void fun(Object…args))可变长参数其实是一个数组
那么JS中的隐性参数也跟Java的可变长参数一样,操作类似数组
<!-- 需求:编写一个函数,用于计算所有参数相加的和并返回-->
<script type="text/javascript">function sum(num1, num2) {//定义一个临时变量let result = 0;for (let i = 0; i < arguments.length; i++) {//如果值是数值型的我才相加if (typeof (arguments[i] == "number")) {result += arguments[i];}}return result}alert(sum(1, 2, 3, 4, 5, 6, 8, 9));
</script>
6、JS中的自定义对象(扩展内容)
对象的定义:let 变量名 = new Object(); 对象实例(空对象)变量名.属性名 = 值; 定义一个属性变量名.函数名 = function() 定义一个函数对象的访问:变量名.属性/函数名();
<script type="text/javascript">//对象的定义//let 对象名 = new Object(); 对象实例(空对象)//变量名.属性名 = 值 定义一个属性//变量名.函数名 = function() 定义一个函数let person = new Object();person.name = "相泽南";person.age = 18;person.fun = function() (alert("姓名: "+this.name + ", 年龄: " + this.age))//对象的访问//变量名.属性/函数名()alert(person.name)person.fun();
</script>
{}花括号形式的自定义对象
对象的定义:
let 变量名 = {
属性名 : 值, 定义一个属性
属性名 : 值 定义一个属性
函数名 : function(){} 定义一个函数
};
对象的访问:
变量名.属性/函数名();
<script type="text/javascript">// 对象的定义let animal = { //空对象name :"大象",age :8,eat:function (){alert("大象是陆地上最大的动物");}}// 对象的访问alert(animal.name);alert(animal.age);animal.eat();
</script>
7、JS中的事件
什么是事件?事件是电脑输入设备与页面进行交互的相应,我们称之为事件
常用的事件:
1.onload 加载完成事件 页面加载完成之后,常用于做页面js代码初始化操作
2.onclick 单击事件 常用于按钮点击响应操作
3.onblur 失去焦点事件 常用于输入框失去焦点后验证其输入内容是否合法
4.onchange 内容发生改变事件 常用于下拉列表和输入框内容发生改变后操作
5.onsubmit 表单提交事件 常用于表单提交前,验证所有表单是否合法
事件的注册又分为静态注册和动态注册两种
什么是事件的注册(绑定)?
其实就是告诉浏览器,当事件响应后要执行哪些操作代码,叫事件注册或事件绑定
静态注册事件:通过html标签的事件属性直接赋予事件响应后的代码,这种方式我们叫静态注册
动态注册事件:是指先通过js代码得到标签的dom对象,然后再通过dom对象.事件名 = function(){} 这种形式赋予事件响应后的代码,叫动态注册
动态注册基本步骤:
1.获取标签对象
2.标签对象.事件名 = function(){}
onload:加载完成事件
<head><meta charset="UTF-8"><title>静态注册onload事件</title><script type="text/javascript">//onload事件方法function onloadFun(){alert("静态注册onload事件...所有代码");}//onload事件动态注册,是固定写法window.onload = function () {alert("动态注册的onload事件");}</script>
</head><!--静态注册onload事件onload事件是浏览器解析完页面之后就会自动触发的事件-->
<body onload="onloadFun()"></body>onclick:单击事件
<script type="text/javascript">function onclickFun(){alert("静态注册onclick事件");}//动态注册onclick事件window.onclick = function () {//获取标签对象(通过id属性获取标签对象)let element = document.getElementById("btnUpdate");element.onclick =function () {alert("动态注册onclick事件");}}</script>
</head>
<body><button onclick="onclickFun()">提交</button><button id="btnUpdate">修改</button>
</body>onblur:失去焦点事件
<script type="text/javascript">//静态注册失去焦点事件function onplurFun (){//console 是控制台对象,是由JavaScript语言提供,专门用来向浏览器的控制器打印输出,用于测试使用//log() 是打印方法console.log("静态注册失去焦点")}//动态注册事件window.onload = function () {let passwordObj = document.getElementById("password");passwordObj.onblur = function () {console.log("动态注册失去焦点")}}</script>
</head>
<body>用户名:<input type="text" onblur="onplurFun()"><br/>密码: <input id="password" type="password"/>
</body>
onchange:内容发生改变事件
<head><meta charset="UTF-8"><title>内容改变事件</title><script type="text/javascript">function onchangeFun() {alert("女神发生改变");}window.onload = function () {var element = document.getElementById("manGad");element.onchange = function () {alert("男神发生改变")}}</script>
</head>
<body>
请选择你心目中的女神:
<!--静态注册onchange事件--><select onchange="onchangeFun()"><option>----女神----</option><option>迪丽热巴</option><option>古力娜扎</option><option>佟丽娅</option>
</select><br/>
请选择你心目中的女神:
<!--静态注册onchange事件--><select id="manGad" onchange="onchangeFun()"><option>----男神----</option><option>宇髄天元</option><option>炭治郎</option><option>善逸</option>
</select>
</body>
onsubmit:表单提交事件
<script type="text/javascript">//静态注册表单提交事件function onsubmitFun(){//要验证所有表单项是否合法,如果有一个不合法就阻止表单提交alert("静态注册表单提交事件...发现内容不合法,请重试");return false;}window.onload = function () {var element = document.getElementById("submitMethod");element.onsubmit = function () {alert("动态注册表单提交事件");return true;}}</script>
</head>
<body>
<!-- return fasle 可以阻止 表单提交-->
<form action="http://localhost:8080" method="post" onsubmit=" return onsubmitFun()"><input type="submit" value="静态注册"/>
</form>
<form action="http://localhost:8080" method="post" id="submitMethod"><input type="submit" value="动态注册"/>
</form>
</body>
8、DOM模型
DOM(文档对象模型):就是把文档中标签,属性,文本,转换成为对象来管理
8.1、Document对象(重点)
Document对象的理解
第一点:Document它管理了所有的Html文档内容
第二点:Document它是一种树结构的文档,有层级关系
第三点:它让我们把所有的标签 都 对象化
第四点:我们可以通过document访问所有的标签对象
那么html标签要对象化怎么办?
<body>
<div id="div01"> div01</div>
</body>
模拟对象化,相当于:
class Dom{private String id; id属性private String tagName; 表示标签名private Dom parentNode ; 父节点private List<Dom> children; 孩子节点private String innerHTML; 起始标签和结束标签中间的内容
}
8.2、Document对象中的方法介绍(重点)
document.getElementById(elementId)
通过标签的id属性查找标签dom对象,element是标签的id属性值
<script type="text/javascript">/*** 需求:当用户点击了校验按钮,要获取输入框的内容,然后验证其是否合法* 验证的规则是:必须由字母 数字 下划线组成 并且长度是5-12位*/function onclickFun() {//1.当我们要操作一个标签的时候,一定要先获取这个标签对象let usernameObj = document.getElementById("username");//2.根据标签对象获取输入框内容信息let usernameText = usernameObj.value;//3.如何验证 字符串 符合某个规则,需要使用正则表达式技术let patt = /^\w{5,12}$/;let elementById = document.getElementById("usernameSpan");if (patt.test(usernameText)){elementById.innerText = "用户名合法"//可以把√标志套进去elementById.innerText = "<img src=\"cha.png\" width=\"24\" height=\"24\">"}else {elementById.innerText = "用户名不合法"//可以把×标志套进去elementById.innerText = "<img src=\"cha.png\" width=\"24\" height=\"24\">"}}</script>
</head>
<body>用户名:<input type="text" id="username" value="请输入用户名"/><span id="usernameSpan" style="color: red"> </span><button onclick="onclickFun()">校验</button>
</body>
document.getElementsByName(elementName)
通过标签的name属性查找标签dom对象,elementName标签的name属性值
<script type="text/javascript">/*** 让所有复选框都选中* document.getElementsByName():根据指定的name属性查询返回多个标签对象集合* 这个集合的操作跟数组一样* 集合中每个元素都是dom对象* 这个集合中的元素顺序是他们在html页面中从上到下的顺序*/function checkAll() {let names = document.getElementsByName("hobby");//checked表示复选框的选中状态,如果选中是true 不选中是false//checked 这个属性可读,可写for (let i = 0; i < names.length; i++) {names[i].checked = true;}}// 全不选function checkNo() {let names = document.getElementsByName("hobby");for (let i = 0; i < names.length; i++) {names[i].checked = false;}}// 反选function checkReverse() {//获取所有元素let names = document.getElementsByName("hobby");//遍历元素for (let i = 0; i < names.length; i++) {names[i].checked = !names[i].checked;// //判断当前是否是选中状态// if (names[i].checked) {// //是选中状态改为非选中状态// names[i].checked = false;// } else {// //反之改为选中状态// names[i].checked = true;// }}}</script>
</head>
<body>
兴趣爱好:
<input type="checkbox" name="hobby" value="cpp">C++
<input type="checkbox" name="hobby" value="java">Java
<input type="checkbox" name="hobby" value="py">Python
<input type="checkbox" name="hobby" value="php">PHP
<input type="checkbox" name="hobby" value="mysql">Mysql<br/>
<button onclick="checkAll()">全选</button>
<button onclick="checkNo()">全不选</button>
<button onclick="checkReverse()">反选</button>
</body>
document.getElementsByTagName(tagname)
通过标签名查找标签dom对象,tagname是标签名
<script type="text/javascript">function checkAll() {let inputs = document.getElementsByTagName("input");for (let i = 0; i < inputs.length; i++) {inputs[i].checked = true;}}function checkNo() {let inputs = document.getElementsByTagName("input");for (let i = 0; i < inputs.length; i++) {inputs[i].checked = false;}}function checkReverse() {let inputs = document.getElementsByTagName("input");for (let i = 0; i < inputs.length; i++) {inputs[i].checked = !inputs[i].checked;}}</script>
</head>
<body>兴趣爱好:<input type="checkbox" value="cpp">C++<input type="checkbox" value="Java">Java<input type="checkbox" value="py">Python<input type="checkbox" value="php">PHP<br/><button onclick="checkAll()">全选</button><button onclick="checkNo()">全不选</button><button onclick="checkReverse()">反选</button>
</body>
document.createElement(tagName)
方法,通过给定的标签名,创建一个标签对象,tagName是要创建的标签名
<script type="text/javascript">//现在需要我们使用js代码来创建html标签,并显示在页面上//标签内容就是:<div> 慧哥我爱你</div>window.onload = function (){let divObj = document.createElement("div");//在内存中<div></div>//方法1divObj.innerText = "慧哥,我爱你";document.body.appendChild(divObj);//方法2//有一个文本节点对象 美女,加个微信啊var textNode = document.createTextNode("美女,加个微信啊");divObj.appendChild(textNode);; //<div>美女,加个微信啊</div>//添加子元素document.appendChild(textNode);}</script>
</head>
<body>
<!--显示:<div>慧哥 你真帅</div>-->
</body>
图示:
注:
document 对象的三个查询方法,如果有 id 属性,优先使用getElementById()方法进行查询
如果没有 id 属性,则优先使用getElementsByName()方法来进行查询
如果 id 属性和 name 属性都没有最后再按标签名getElementsByTagName()
以上三个方法,一定要在页面加载完成之后执行,才能查询到标签对象
8.3、节点常用的属性和方法
节点就是标签对象
方法:
通过具体的元素节点调用:
getElementByTagName():获取当前节点的指定标签名孩子节点;
appendChild(oChildNode):可以添加一个子节点,oChildNode是要添加的孩子节点;
//当前节点 <div></div>
//指定标签名孩子节点:<input/>
<div><input type="checkbox" name="hobby" value="basketball"> 篮球
</div>
属性:
childNodes属性:获取当前节点的所有子节点;
firstChild属性:获取当前节点的第一个子节点;
lastChild属性:获取当前节点的最后一个子节点;
parentNode属性:获取当前节点的父节点
nextSibling属性:获取当前节点的下一个节点
previousBling属性:获取当前节点的上一个节点
className属性:用于获取或设置标签的class属性值
innerHTML属性:表示获取/设置起始标签和结束标签中的内容
innerText属性:表示获取/设置起始标签和结束标签中的文本
正则表达式
1、正则表达式介绍
正则表达式是由一些具有特殊含义的字符组成的字符串，多用于查找、替换符合规则的字符串。在表单验证、Url映射等处都会经常用到,好处可以简化代码,很多复杂的功能可以用正则表达式轻松实现
2、元字符
元字符：即为有特定含义的字符，常见的元字符如下
常用的元字符
| 代码 | 说明 |
|---|---|
| . | 匹配除换行符以外的任意字符 |
| \w | 匹配字母或数字下划线或汉字 |
| \s | 匹配任意的空白字符 |
| \d | 匹配数字 |
| \b | 匹配单词的开始或结束 |
| ^ | 匹配字符串的开始(在集合字符里[^a表示非]:不匹配)的意思 |
| $ | 匹配字符串的结束 |
| 详解和示例： |
（1）. 匹配任何任意字符 例如 . 可以匹配 1，n，*，+，- ,等（2）\d\w\s 匹配第一个字符为数字，第二个字符为字母或数字、或下划线或汉字，第三字符为空格的字符串 例如：11 ，2a , 1_ （3）^\d\d\d$ 匹配三个全部都为数字的字符串 例如： 123,456,789还可以用于验证输入的字符串是否符合qq（身份证号）的验证 ：例如：^\d{8}$ 匹配8位数字的qq号，^\d{15}&匹配15位均为数字的身份证号（4）\bOlive\b 匹配单词Olive 例如： I Love Oliver and Olive .这个时候返回的是Olive 而不是Oliver,因为\b....\b返回的匹配的单词
3、反义字符
反义字符：多用于查找除某个字符以外其他任意字符均可以的情况
常用的反义字符如下：
| 代码/语法 | 说明 |
|---|---|
| \W | 匹配任意不是字母，数字，下划线，汉字的字符 |
| \S | 匹配任意不是空白符的字符 |
| \D | 匹配任意非数字的字符 |
| \B | 匹配不是单词开头或结束的位置 |
| [^x] | 匹配除了x以外的任意字符 |
| [^aeiou] | 匹配除了aeiou这几个字母以外的任意字符 |
详解和示例：
（1）\W 匹配除字母、数字、下划线、汉字以为的字符形如 +，-，*（2）\S 匹配除空格以外的任意字符形如：1，* ，）（3）[^abcde]匹配除abcde以为的其他字符 如 e，f，g，h
4、限定字符
限定字符多用于重复匹配次数
常用的限定字符如下
| 代码/语法 | 说明 |
|---|---|
| * | 重复零次或更多次 |
| + | 重复一次或更多次 |
| ? | 重复零次或一次 |
| {n} | 重复n次 |
| {n,} | 重复n次或更多次 |
| {n,m} | 重复n到m次 |
详解和示例：
（1）\d* 匹配重复0次或多次数字 例如:可能为空 或 任意数字 （2,3。。。。）（2）\d+ 匹配重复1次或多次数字 例如:可能为1个或多个数字 1,23,234,2345，........（3）\d? 匹配重复次个或者一次数字 例如：可能为空或者任意的一个数字（1,2，。。。）（4）\d{8}匹配重复8次数字 例如：123456768（5）\d{4,}匹配重复至少4次数字 例如：1234,12345,124244,。。。。。（6）^\d{8,11}$ 匹配重复8-11次数字 例如：12345678,123456789,1234567890,12345678901
5、转义字符
在实际的开发中，可能会遇到要比配元字符的情况，这个时候就需要进行字符转义，如元字符 . * \ 需要转换为. * \
例如： 需要匹配qq邮箱 \d{8,}+qq+.+com 在这里的. 就需要加斜杠
6、字符分枝
字符分枝多用于满足不同情况的选择，用“|”将不同的条件分割开来，比如有些固定电话区号有三位，有些有四位，这个时候可以采用字符分枝
例如：\d{3}-\d{8}|\d{4}-\d{8} 可以匹配两种不同长度区号的固定电话
下边的IP地址正则表达式也有用到字符分枝
7、字符分组
字符分组多用于将多个字符重复，主要通过使用小括号()来进行分组
形如：（\d\w){3} 重复匹配3次（\d\w)
常用于表示IP地址 形如： ((25[0-5]|2[0-4][0-9]|[0-1]\d\d).){3}(25[0-5]|2[0-4][0-9]|[0-1]\d\d)
解析：先把IP地址分为两部分一部分是123.123.123. 另一部分是123，又因Ip最大值为255，所以先使用分组，然后在组里边再进行选择，组里也有三部分，0-199,200-249,250-255，分别和上述的表达是对应，最后还要注意分组之后还要加上一个.，因为是元字符所以要转义故加上. 然后再把这部分整体看做是一个组，重复三次，再加上仅有数字的一组也就是不带.的那一组即可完成IP地址的校验
常用分组语法
| 分类 | 代码/语法 | 说明 |
|---|---|---|
| 捕获 | (exp) | 匹配exp,并捕获文本到自动命名的组里 |
| 捕获 | (?exp) | 匹配exp,并捕获文本到名称为name的组里，也可以写成(?'name’exp) |
| 捕获 | (?:exp) | 匹配exp,不捕获匹配的文本，也不给此分组分配组号 |
| 零宽断言 | (?=exp) | 匹配exp前面的位置 |
| 零宽断言 | (?<=exp) | 匹配exp后面的位置 |
| 零宽断言 | (?!exp) | 匹配后面跟的不是exp的位置 |
| 零宽断言 | (?<!exp) | 匹配前面不是exp的位置 |
| 注释 | (?#comment) | 这种类型的分组不对正则表达式的处理产生任何影响，用于提供注释让人阅读 |
8、懒惰匹配和贪婪匹配
贪婪匹配：正则表达式中包含重复的限定符时，通常的行为是匹配尽可能多的字符。
懒惰匹配，有时候需要匹配尽可能少的字符。
例如： a.*b，它将会匹配最长的以a开始，以b结束的字符串。如果用它来搜索aabab的话，它会匹配整个字符串aabab。但是我们此时可能需要匹配的是ab这样的话就需要用到懒惰匹配了。懒惰匹配会匹配尽可能少的字符
常用的懒惰匹配限定符如下
| 代码/语法 | 说明 |
|---|---|
| *? | 重复任意次，但尽可能少重复 |
| +? | 重复1次或更多次，但尽可能少重复 |
| ?? | 重复0次或1次，但尽可能少重复 |
| {n,m}? | 重复n到m次，但尽可能少重复 |
| {n,}? | 重复n次以上，但尽可能少重复 |
9、后向引用
后向引用用于重复搜索前面某个分组匹配的文本。
使用小括号指定一个子表达式后，匹配这个子表达式的文本(也就是此分组捕获的内容)可以在表达式或其它程序中作进一步的处理。默认情况下，每个分组会自动拥有一个组号，规则是：从左向右，以分组的左括号为标志，第一个出现的分组的组号为1，第二个为2，以此类推
示例：\b(\w+)\b\s+\1\b可以用来匹配重复的单词，像go go, 或者kitty kitty。
这个表达式首先是一个单词，也就是单词开始处和结束处之间的多于一个的字母或数字(\b(\w+)\b)，这个单词会被捕获到编号为1的分组中，然后是1个或几个空白符(\s+)，最后是分组1中捕获的内容（也就是前面匹配的那个单词）(\1)。
你也可以自己指定子表达式的组名。要指定一个子表达式的组名，请使用这样的语法：(?\w+)(或者把尖括号换成’也行：(?‘Word’\w+)),这样就把\w+的组名指定为Word了。要反向引用这个分组捕获的内容，你可以使用\k,所以上一个例子也可以写成这样：\b(?\w+)\b\s+\k\b
10、零宽断言
有时候需要查找某些匹配之前或之后的东西，这个时候就需要用到们像\b,^,$那样用于指定一个位置，这个位置应该满足一定的条件(即断言)，因此它们也被称为零宽断言
(?=exp)也叫零宽度正预测先行断言，它断言自身出现的位置的后面能匹配表达式exp。比如\b\w+(?=ing\b)，匹配以ing结尾的单词的前面部分(除了ing以外的部分)，如查找I’m singing while you’re dancing.时，它会匹配sing和danc。
(?<=exp)也叫零宽度正回顾后发断言，它断言自身出现的位置的前面能匹配表达式exp。比如(?<=\bre)\w+\b会匹配以re开头的单词的后半部分(除了re以外的部分)，例如在查找reading a book时，它匹配ading。
11、其他语法
| 名称 | 说明 |
|---|---|
| IgnoreCase(忽略大小写) | 匹配时不区分大小写。 |
| Multiline(多行模式) | 更改^和 的含义，使它们分别在任意一行的行首和行尾匹配，而不仅仅在整个字符串的开头和结尾匹配。 ( 在此模式下 , 的含义，使它们分别在任意一行的行首和行尾匹配，而不仅仅在整个字符串的开头和结尾匹配。(在此模式下, 的含义，使它们分别在任意一行的行首和行尾匹配，而不仅仅在整个字符串的开头和结尾匹配。(在此模式下,的精确含意是:匹配\n之前的位置以及字符串结束前的位置.) |
| Singleline(单行模式) | 更改.的含义，使它与每一个字符匹配（包括换行符\n） |
| IgnorePatternWhitespace(忽略空白) | 忽略表达式中的非转义空白并启用由#标记的注释 |
| ExplicitCapture(显式捕获) | 仅捕获已被显式命名的组 |
| \a | 报警字符(打印它的效果是电脑嘀一声) |
| \b | 通常是单词分界位置，但如果在字符类里使用代表退格 |
| \t | 制表符，Tab |
| \r | 回车 |
| \v | 竖向制表符 |
| \f | 换页符 |
| \n | 换行符 |
| \e | Escape |
| \0nn | ASCII代码中八进制代码为nn的字符 |
| \xnn | ASCII代码中十六进制代码为nn的字符 |
| \unnnn | Unicode代码中十六进制代码为nnnn的字符 |
| \cN | ASCII控制字符。比如\cC代表Ctrl+C |
| \A | 字符串开头(类似^，但不受处理多行选项的影响) |
| \Z | 字符串结尾或行尾(不受处理多行选项的影响) |
| \z | 字符串结尾(类似$，但不受处理多行选项的影响) |
| \G | 当前搜索的开头 |
| \p{name} | Unicode中命名为name的字符类，例如\p{IsGreek} |
| (?>exp) | 贪婪子表达式 |
| (?-exp) | 平衡组 |
| (?im-nsx:exp) | 在子表达式exp中改变处理选项 |
| (?im-nsx) | 为表达式后面的部分改变处理选项 |
| (?(exp)yes | no) |
| (?(exp)yes) | 同上，只是使用空表达式作为no |
| (?(name)yes | no) |
| (?(name)yes) | 同上，只是使用空表达式作为no |
12、常用的实用正则表达式整理
只能输入数字："^[0-9]*$"。只能输入n位的数字："^"d{n}$"。只能输入至少n位的数字："^"d{n,}$"。只能输入m~n位的数字：。"^"d{m,n}$"只能输入零和非零开头的数字："^(0|[1-9][0-9]*)$"。只能输入有两位小数的正实数："^[0-9]+(.[0-9]{2})?$"。只能输入有1~3位小数的正实数："^[0-9]+(.[0-9]{1,3})?$"。只能输入非零的正整数："^"+?[1-9][0-9]*$"。只能输入非零的负整数："^"-[1-9][]0-9"*$。只能输入长度为3的字符："^.{3}$"。只能输入由26个英文字母组成的字符串："^[A-Za-z]+$"。只能输入由26个大写英文字母组成的字符串："^[A-Z]+$"。只能输入由26个小写英文字母组成的字符串："^[a-z]+$"。只能输入由数字和26个英文字母组成的字符串："^[A-Za-z0-9]+$"。只能输入由数字、26个英文字母或者下划线组成的字符串："^"w+$"。验证用户密码："^[a-zA-Z]"w{5,17}$"正确格式为：以字母开头，长度在6~18之间，只能包含字符、数字和下划线。验证是否含有^%&’,;=?$""等字符："[^%&’,;=?$"x22]+"。只能输入汉字："^["u4e00-"u9fa5]{0,}$"验证Email地址："^"w+([-+.]"w+)*@"w+([-.]"w+)*"."w+([-.]"w+)*$"。验证InternetURL："^http://(["w-]+".)+["w-]+(/["w-./?%&=]*)?$"。验证电话号码："^("("d{3,4}-)|"d{3.4}-)?"d{7,8}$"正确格式为："XXX-XXXXXXX"、"XXXX- XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX"。验证身份证号(15位或18位数字)："^"d{15}|"d{18}$"。验证一年的12个月："^(0?[1-9]|1[0-2])$"正确格式为："01"～"09"和"1"～"12"。验证一个月的31天："^((0?[1-9])|((1|2)[0-9])|30|31)$"正确格式为;"01"～"09"和"1"～"31"。利用正则表达式限制网页表单里的文本框输入内容：用正则表达式限制只能输入中文：οnkeyup="value=value.replace(/[^"u4E00-"u9FA5] /g,’’)" onbeforepaste="clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^"u4E00-"u9FA5]/g,’’))"用正则表达式限制只能输入全角字符： οnkeyup="value=value.replace(/[^"uFF00-"uFFFF]/g,’’)" onbeforepaste="clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^"uFF00-"uFFFF]/g,’’))"用正则表达式限制只能输入数字：οnkeyup="value=value.replace(/[^"d]/g,’’) "onbeforepaste="clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^"d]/g,’’))"用正则表达式限制只能输入数字和英文：οnkeyup="value=value.replace(/["W]/g,’’) "onbeforepaste="clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^"d]/g,’’))"
得用正则表达式从URL地址中提取文件名的javascript程序，如下结果为page1
以下是引用片段：
s="http://www.9499.net/page1.htm"
s=s.replace(/(.*"/){0,}([^".]+).*/ig,"$2")
alert(s)
匹配双字节字符(包括汉字在内)：[^"x00-"xff]
应用：计算字符串的长度(一个双字节字符长度计2，ASCII字符计1)
以下是引用片段：
String.prototype.len=function(){return this.replace([^"x00-"xff]/g,"aa").length;}
匹配空行的正则表达式："n["s| ]"r
匹配HTML标记的正则表达式：/<(.)>.<"/"1>|<(.) "/>/
匹配首尾空格的正则表达式：(^"s*)|("s*$)
以下是引用片段：
String.prototype.trim = function()
{
return this.replace(/(^"s*)|("s*$)/g, "");
}
利用正则表达式分解和转换IP地址: 下面是利用正则表达式匹配IP地址，并将IP地址转换成对应数值的Javascript程序：
以下是引用片段：
function IP2V(ip){re=/("d+)".("d+)".("d+)".("d+)/g //匹配IP地址的正则表达式if(re.test(ip)){return RegExp.$1*Math.pow(255,3))+RegExp.$2*Math.pow(255,2))+RegExp.$3*255+RegExp.$4*1}else{throw new Error("Not a valid IP address!")}
}
不过上面的程序如果不用正则表达式，而直接用split函数来分解可能更简单，程序如下：
以下是引用片段：
var ip="10.100.20.168"
ip=ip.split(".")
alert("IP值是："+(ip[0]*255*255*255+ip[1]*255*255+ip[2]*255+ip[3]*1))
JavaWeb全套教程笔记_前端技术相关推荐
- 超全面的Java全套教程分享_动力节点完整版视频教程
各种各样的编程语言不断崛起,但唯有Java是牢牢占据着老大的位置,目前几乎90%以上的大中型互联网应用系统在服务器端开发首选Java. 因此,也是吸引了不少年轻人投入到Java的学习之中. 但不得不说 ...
- jquery 在div追加文本_前端技术--JQuery
JQuery 一.引言 1.JQuery是一个基于javascript语言的框架 --- 是对js代码的合理封装 2.js缺点,jquery优点 1)js代码比较复杂 var tag = docum ...
- jquery input值改变事件_前端技术--JQuery
JQuery 一.引言 1.JQuery是一个基于javascript语言的框架 --- 是对js代码的合理封装 2.js缺点,jquery优点 1)js代码比较复杂 var tag = docum ...
- dao模式和前端控制器结合使用_前端技术及开发模式的演进，带你了解前端技术的前世今生...
先声明,本篇不会讲带有年代性的前端发展史,不讲故事,想了解的读者可以去查阅一些其他的资料和文章,本篇仅仅从技术发展角度结合案例分析,说明前端技术的发展和开发模式的演进变化.本篇内容重点说明PC端技术, ...
- ipa在线安装搭建_前端技术不懂打包IPA？打包 iOS 的 IPA 文件教程奉上
IPA 文件,即 iOS 应用的安装包文件,扩展名为 .ipa.能否正确的打包 IPA 文件,是决定了 IPA 文件上传到微导流后能否被正确安装的关键.以下说明了如何正确打包 iOS 应用的 IPA ...
- 尚硅谷最新版JavaWeb全套教程,java web零基础入门完整版（一）
HTML和CSS ctrl + shift + / 在同一行代码中的后半截产生注释 HTML标签的介绍 标签拥有自己的属性,分为 基本属性 和 事件属性 标签的基本属性 :bgcolor=" ...
- maya python教程下载_[转载]技术教程-MayaPython教程四之实战篇
其实作为一个设置或者技术指导,学习到一定程度必须要接触编程,比如Mel.Python.C++ Api等程序语言,这些教程主要是转载胡泳滨的Maya Python学习教程,现在开始第一章-MayaPyt ...
- 【Mysql数据库全套教程笔记-SELECT使用篇】
Mysql基础篇-SELECT使用篇 SQL之SELECT使用篇 第03章:基本的SELECT语句 第04章:运算符 第05章:排序与分页 第06章:多表查询 第07章:单行函数 第08章:聚合函数 ...
- 尚硅谷最新版JavaWeb全套教程,java web零基础入门完整版（四）
文件的上传和下载 文件上传的介绍 <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns= ...
最新文章
- 第十五届全国大学生智能汽车竞赛山东赛区国赛获奖队伍详细信息
- MATLAB从入门到精通-Matlab R2020b中的新标记符号(New-marker-symbols)
- SQL查询【根据生日计算】
- 微信公众号消息模板开发
- 【OJ】洛谷分支结构题单题解锦集
- 电脑重启f12怎么处理_电脑开机蓝屏按F10F11F12才能打开.怎么办？
- 2013年台式计算机型号,2013cpu天梯图，台式机处理器天梯图
- 从身家500万到两手空空，看她如何再次成功翻身
- UE4.27 基于composure的虚拟制片
- 为什么编程是独一无二的职业
- 安卓期末大作业——单词本APP（源码+任务书）
- 超级应用/_超级应用
- 赛效：WPS何把文档里竖排的文字变成横排的
- Python移动自动化测试面试准备
- 文旅部、国家发改委等十部门：推广旅游电子合同使用
- 饭后吃一种水果就能化痰止咳（附赠10个化痰小偏方）
- linux时间同步命令centos6,CentOS6.5搭建NTP服务器，并为思科交换机提供时间同步
- 学计算机提升,【思想提升】学计算机，就是做计算机的吗？
- 自己写的微信投票系统的小功能
- Ubuntu空间不足，如何扩容（超详细讲解）