正则表达式对象
正则表达式主要用于表单验证,如手机号、邮箱、身份证等
中文字符:/^[\u4e00-\u9fa5]$/
邮箱:/^[0-9a-zA-Z]+@ [0-9a-zA-Z]+[\.]{1}[0-9a-zA-Z]+$/
电话:/^(\d{3,4}-)?\d{7,8}$/
月份:/^((0?[1-9])|1[0-2])$/
天数:/^((0?[1-9])(((1|2)[0-9])|3031)$/
匹配符 | 说明 |
\b | 匹配单词边界 |
\d | 匹配单个数字字符[0-9] |
\f | 匹配单个换页符 |
\n | 匹配单个换行符 |
\r | 匹配单个回车符 |
\s | 匹配任何空白符,包括空格、制表符、换页符等[\f\n\r\t\v] |
\t | 匹配单个制表符 |
\v | 匹配单个垂直制表符 |
\w | 匹配包含下划线的任意单个字符[0-9a-zA-Z] |
^ $ | 四配字符串的开始和结束位置 |
匹配符 | 说明 |
+ | 匹配前面的子表达式1-多次 |
? | 匹配前面的子表达式0-1次 |
{n,m} | 匹配前面的子表达式n-m次 |
. | 匹配除“\n”之外的任意字符 |
(xly) | 匹配x或y |
[] | 匹配所包含的任意一个字符 |
[^] | 匹配非包含的任意一个字符 |
[.] | 匹配指定范围内的任意一个字符 |
* | 匹配前面的子表达式0-多次 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
用户名:<input type="text" name="uname" id="uname" value="" /><br />
密码:<input type="text" name="pwd" id="pwd" value="" /><br />
Email:<input type="text" name="email" id="email" value="" /><br />
<input type="button" id="btn" value="验证" />
<body>
<script type="text/javascript">
document.getElementById("btn").onclick=function(){
var uname = document.getElementById("uname").value
var pwd = document.getElementById("pwd").value
var email = document.getElementById("email").value
//编写一个用于匹配密码格式的正则表达式
//用户名只能是3-5位,中文字符
var reg_1 = /^[\u4e00-\u9fa5]{3,5}$/
//密码只能是6位,且密码只能包含数字、字母、下划线
var reg_2 = /^[0-9a-zA-Z_]{6}$/
//密码长度6-10位,且只能是数字、字母、下划线
//var reg_3 = /^[0-9a-zA-Z_]{6,10}$/
//Email 邮箱
var reg_4 = /^\S+@ [0-9a-zA-Z]+[\.]{1}\w+$/
var isname = reg_1.test(uname)
console.log(isname)
var isPwd = reg_2.test(pwd)
console.log(isPwd)
var isemail = reg_4.test(email)
console.log(isemail)
}
</script>
</body>
</html>
文档对象模型 (DOM)
DOM-Document Obiect Model,它是W3C国际组织的一套Web标准。它以树形结构表示文档
(HTMLXML等),定义了遍历、检查和修改各节点的属性和方法。
W3C组织将DOM分为以下几种不同版本:
Core DOM:定义任意结构文档的标准对象售合
XMLDOM:定义了针对XML文件的标准对象集合
HTML DOM:定义了针对HTML文件的标准对象集合
DOMCSS:定义了在程序中操作CSS样式的接口
DOM Events:给DOM对象添加事件处理
DOM(Document Obiect Model:文对象模型可以干什么?
(1)获取一个元素 (2)移除一个元素
(3)年建一个元素
(4)向页面里面添加一个元素 (5)哈元素绑定一事件
(6)欧元素的服性
(7)哈元素源加一路css样式
DOM的核心对象就是document对象
document对象是浏览器内置对象的一个对象,里面存储着专门用来操作元素的各种方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style type="text/css">
.sp{
color:blue
}
</style>
<input type="button" name="btn" id="btn" value="点击" />
<div id="div1">
这是div1
</div>
<div id="div2">
这是div2
</div>
<div id="div3">
这是div3
</div>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ul>
<span class="sp">
这是一个span标签
</span>
<p class="sp"></p>
性别:<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="" />女<br />
<input type="text" name="uname" value="" />
<script type="text/javascript">
/**
* 使用document获取标签的几种方式
*/
// var div1 = document.getElementById("div1")
// console.log(div1)
//如果这个标签有id属性,那么可以直接使用id的值就可以获取到该标签
console.log(btn)
console.log(div1)
btn.onclick=function(){
//alert("aa")
//通过标签名来获取标签
var div_1 = document.getElementById("div")
//console.log(div_1)
for(var i=0;i<div_1.length;i++){
console.log(div_1[i])
}
//要获取到页面中所有应用.sp标签
var sp_1 = document.getElementById("sp")
console.log(sp_1)
sp_1[0].innerHTML = "更改后的span"
var sex_1 = document.getElementById("sex")
console.log(sex_1[0].value)
console.log(document.querySelector("#div1"))
console.log(document.querySelector("div"))
console.log(document.querySelectorAll("div"))
}
</script>
</body>
</html>