正则表达式概述
1.什么是正则表达式:是一个特性的字符串模版
提供一种字符模式的模版,来验证输入项中数据的合法性
2.正则表达式是a-z和特殊字符(元字符)组成
正则表达式(重点)
1.字符类
2.量词
3.指定匹配位置
4.选择匹配符
5.分组
正则表达式的格式:
var 变量名=/正则表达式/
正则表达式判定(重点)
1.test()方法:匹配成功,返回true,匹配不成功返回false
格式:变量名.test("要匹配的字符串");
2.exec()方法:匹配不成功返回null,匹配成功,返回数组
格式:变量名.exec("要匹配的字符串");
数组中的元素,可以根据下标来获取
正则表达式-字符类
1.[...]:在方括号内指定一个或者多个字符组成的字符列表,与字符列表中任意字符匹配,都被认为是匹配的。每次匹配只能匹配列表中的一个字符。可以使用连接字符-来指定范围匹配
2.[^...]:匹配列表中指定字符以外的所有字符,可以使用连接字符-来指定范围不匹配
3..:匹配除换行符\n和回车符之外的任何单个字符,等效于[^\n\r]
4.\d:匹配一个数字字符,等效于[0-9]
5.\D:与\d互补
6.\s:匹配任何Unicode空白字符,包括空格、制表符、换页符等,等效于[\f\t\n\r]
7.\S:与\s互补
8.\w:匹配包括下划线的任何单个字符,包括A~Z,a~z,0~9和下划线"_",等效于[a-zA-Z0-9_]
正则表达式-量词
? 出现零次或一次(最多出现一次)
+ 出现一次或多次(至少出现一次)
* 出现零次或多次(任意次)
{n} 出现n次
{n,} 至少出现n次
{n,m} 出现n到m次
正则表达式-指定匹配位置
^ (脱字符)匹配开头,在多行匹配中匹配行开头。
$ (美元符号)匹配结尾,在多行匹配中匹配行结尾。
\b 匹配单词边界
\B 匹配单词的非边界
正则表达式-选择匹配符
正则表达式的选择匹配符只有一个"|",使用"|"可以匹配指定的多个选项中的任意一项。
例如/World|Dream/可以匹配"One World One Dream"中的World或者Dream
正则表达式-分组
分组就是使用小括号将多个单独的字符或字符类组合成子表达式,以便可以像处理一个独立的单元那样,用"|"、"*"、"+"或者"?"等来处理他们。比如/J(ava)?Script/可以匹配JavaScript,也可以匹配JScript
正则表达式案例(重点)
案例:要一个输入框,一个按键,输入框输入身份证,点击按键,弹出生日,如果身份证号码不正确,那么弹出'请输入合法的身份证号'
思路:
1.获取输入的信息
2.正则表达式判定
3.获取生日打印出来
4.输入错误提示
cookie的概述和组成
1.什么是cookie:是一个保存在客户机中的简单的文本文件.
2.有什么用:这个文件与特定的 Web 文档关联在一起, 保存了该客户机访问这个Web 文档时的信息, 当客户机再次访问这个 Web 文档时这些信息可供该文档使用。
3.cookie的组成:cookie由名/值对形式的文本组成:name=value。
4.JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。
完整格式为:
document.cookie = 'user=值;[expires=失效时间; path=路径访问; domain=域名访问; secure=安全的https限制通信]'
中括号是可选,name=value是必选。
案例:向本地磁盘写入cookie,内容为用户名和昵称,并在页面上弹出cookie的内容
cookie的局限性
第一:每个特定的域名下最多生成20个cookie(根据不同的浏览器有所区别)
第二:cookie的最大大约为4096字节(4k),为了更好的兼容性,一般不能超过4095字节即可。
第三:cookie存储在客户端的文本文件,所以特别重要和敏感的数据是不建议保存在cookie的。比如银行卡号,用户密码等
Vue.js框架简单描述
Vue.js是什么:是一套构建用户界面的渐进式框架
渐进式框架说明:
Vue.js框架有很多东西,你可以先使用一部分,然后逐渐的使用全部
有什么用:Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件,它不仅易于上手,还便于与第三方库或既有项目整合.
Vue.js引入到html文件中
<script language="JavaScript" src="js/vue.min.js">
</script>
Vue.js的helloworld
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</body>
<!--
div 标签可以把文档分割为独立的、不同的部分
{{message}} : 表示view。
new Vue():表示创建Vue对象,用于连接view和model。
el:表示指向view。
data:表示指向model。
通过Vue对象连接view和model,{{message}}就可以获取到Vue对象中data定义的message的内容。
-->
Vue.js的绑定元素
<!--
span用来组合文档中的行内元素,span 没有固定的格式表现。
当对它应用样式时,它才会产生视觉上的变化
v-bind:称为指令,将这个元素节点的 title 特性
和 Vue 实例的 mes 属性保持一致
-->