正则表达式的边界匹配器: 以^开头,以$结尾
如果没有写清边界,则从整段字符串中匹配是否有满足正则表达式的内容
而不是从头开始匹配(类似String的contains()方法)
var reg1 = /^[0-9]{4}$/;
var reg2 = /[0-9]{4}/;
String str = "a5324";
var boolean1 = reg1.test(str); //返回:false
var boolean2 = reg2.test(str); //返回:true
reg1表示的是:第一位开始到最后是4位数字
reg2表示的是:整个字符串包含4位连续的数字
正则数量词:用大括号{}括起来的数字,就表示前一个类型出现的次数
{n} | 恰好出现n次 |
{n,} | 至少出现n次 |
{n,m} | 出现n~m次 |
"+" | 至少出现1次 |
"*" | 出现了0~n次 |
"?" | 出现0~1次 |
var reg1 = /^a{1}$/; //匹配一个a字符
var reg2 = /^a{1,}$/; //匹配至少一个a字符
var reg3 = /^a{1,5}$/; //匹配1-5个a字符
var reg4 = /^a+$/; //匹配至少1个a字符
var reg5 = /^a*$/; //匹配0~n个a字符
var reg6 = /^a?$/; //匹配0~1个a字符
var reg7 = /^a$/; //没有写清数量词,则表示匹配1个a字符
正则范围词:[ ]表示一个字符的取值范围
\d | 匹配所有数字:[0-9] |
\w | 匹配所有字符和下划线:[A-Za-z0-9_] |
正则表达式中"."代表匹配任意字符,若仅是想匹配"."这个字符,需要将他转译"\."这样就是匹配一个"."符号
var reg1 = /^\d$/; //匹配所有数字
var reg2 = /^\w$/; //匹配所有数字英文字符和下划线_
var reg3 = /^.$/; //匹配任意字符
var reg4 = /^\.$/; //匹配一个.字符
定义好了正则表达式,用正则表达式变量调用test("字符串")
就可以与传递的字符串进行匹配,若相互匹配则返回true,不正确返回false
var reg = /^\w\d{5}$/;
var boolean = reg.test("a54905"); //返回true
在提交表单时,使用正则表达式给每一个表单项作判断,全都满足正则表达式才允许提交表单
先给每一个表单项添加onblur属性,让表单失去焦点时就会调用函数检验表单数据是否满足
然后给<form>标签中添加一个onsubmit属性<form οnsubmit="return checkAll()">
让checkAll()方法调用全部检验表单的函数,全都返回true时才允许表单提交
DOM文档对象编程
其实浏览器在加载html对象时,加载标签后都会将这些标签对象保存在document(文档树)对象中
通过标签的属性获取节点对象:
document.getElementById(“id”) 通过id属性到唯一的元素
<sciprt type="text/javascript">
var div = document.getElementById("one");
</script>
<div id="one">通过id属性获取对象</div>
如果页面上有多个同名的id,则得到第1个元素
document.getElementsByName(“name”) 通过name属性得到一组标签,返回一个数组
<sciprt type="text/javascript">
var arr = document.getElementsByName("one");
</script>
<div name="one"></div>
<a name="one">通过name属性获取对象</a>
获取到所有name属性为"one"的对象,返回一个集合
document.getElementsByTagName (“标签名”) 通过标签名字得到一组标签,返回一个数组
<sciprt type="text/javascript">
var arr = document.getElementsByTagName("div");
</script>
<div></div>
<div>通过标签名获取对象</div>
document.getElementsByClassName("类名") 通过类名得到一组标签,返回一个数组
<sciprt type="text/javascript">
var arr = document.getElementsByClassName("one");
</script>
<div calss="one"></div>
<div class="one">通过class属性获取对象</div>
获取到标签元素,便可以对标签的数据或标签体的内容进行修改
有标签体的标签(非闭合标签):
元素.innerHTML:可以用来赋值也可以用来获取标签体的内容,并且可以输出HTML标签内容
<div id="one">aaa</div>
<script type="text/javascript">
var div = document.getElementById("one");
var html = div.innerHTML; //获取到id为one的标签体内容aaa
div.innerHTML = "<a href="#">往标签体内添加了标签内容</a>";
</script>
元素.innerText:可以用来赋值也可以用来获取标签体的内容,只能输出文本不能输出HTML标签文本
<div id="one">bbb</div>
<script type="text/javascript">
var div = document.getElementById("one");
var text = div.innerText; //获取到标签体内容bbb
div.innerText = "往标签体内添加了文本内容";
</script>
无标签体的标签(闭合标签):
要修改无标签体的标签内容例:<input typetext="text" id = "one"/>这类文本框内的内容
其实就是使用元素对象来修改闭合标签的value属性
var one = document.getElementById("one");
one.value = "aa"; //给闭合标签的value属性赋值
想给标签的其他属性赋值,就要去找api文档找html标签属性对应js是什么了
通过上述方式获取到元素对象后,同样可以对对象内的标签元素进行操作:
以下示例都使用此HTML文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div id="one">
<!-- 注释-->
<a href="#"></a>
</div>
</body>
</html>
childNodes | 得到当前元素下的所有子节点 |
children | 得到当前元素下的所有标签元素 |
parentNode | 得到当前元素的父节点 |
nodeName | 得到节点的名称 |
nodeType | 得到节点的类型 |
childNodes不仅会获取标签元素,还会获取空白文本元素和注释元素
var div = document.getElementById("one");
var arr = div.childNodes;
for (var i = 0;i<arr.length;i++){
document.write("节点名:"+arr[i].nodeName+" 节点类型:"+arr[i].nodeType);
document.write("<br/>");
}
输出结果:
节点名:#text 节点类型:3
节点名:#comment 节点类型:8
节点名:#text 节点类型:3
节点名:A 节点类型:1
节点名:#text 节点类型:3见nodeName的结果#text就是开发工具上的空白文本,#comment是注释元素
对应nodeType3位空白文本,8位注释元素,1是标签元素
平时开发中我们仅需要标签元素,而不需要空白文本等元素,可以使用children
var div = document.getElementById("one");
var arr = div.children;
for (var i = 0;i<arr.length;i++){
document.write("节点名:"+arr[i].nodeName+" 节点类型:"+arr[i].nodeType);
document.write("<br/>");
}
输出结果: 节点名:A 节点类型:1 (仅输出一个结果,就是a标签元素)
利用js代码在html上添加标签
document.createElement("标签名") 在文档上创建一个元素对象
元素对象.setAttribute("属性名", "属性值") 给元素添加一个属性名和属性值
var newElement = document.createElement("div");
newElement.setAttribute("id","two");
元素名不存在则是添加属性,存在则是修改属性值
父元素.appendChild(子元素) 将元素追加成父元素的最后一个子元素
var newElement = document.createElement("div");
var one = document.getElementById("one");
newElement.setAttribute("id","two");
one.appendChild(newElement);
父元素.removeChild(子元素) 通过父元素删除一个子元素
one.removeChild(newElement);
元素.remove() 元素删除本身
newElement.remove();