一.DOM和BOM介绍
1.JavaScript包括三大块:
①ECMAScript:JS的核心语法。(ES规范/ECMA-262标准)
②DOM:Document Object Model(文档对象模型,对网页当中的节点进行增删改的过程)HTML文档被当作一棵DOM树来看待。
③BOM:Browser Object Model(浏览器对象模型)
比如关闭浏览器窗口,打开一个新的浏览器窗口,后退、前进、浏览器地址栏上的地址等,都是BOM编程
2.BOM和DOM的区别和联系
BOM的顶级对象是window
DOM的顶级对象是:document
实际上BOM是包括DOM的
3.初次尝试DOM编程-获取文本框的value
<!DOCTYPE html>
<html>
<head>
<title>DOM编程案例-获取文本框的value</title>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
document.getElementById("mybutton").onclick = function(){
alert(document.getElementById("mytext").value);
}
}
</script>
<input type="text" id="mytext"/>
<input type="button" value="获取" id="mybutton"/>
</body>
</html>
二.innerText和innerHTML
<!DOCTYPE html>
<html>
<head>
<title>innerHTML和innerText</title>
</head>
<body>
<!--innerText和innerHTML属性有什么区别?
相同点:都是设置元素内部的内容
不同点:
innerHTML会把后面的“字符串”当作一段HTML代码来解释并执行
innerText,即使后面是一段HTML代码,也只是将其当作普通的字符串来看待-->
<script type="text/javascript">
window.onload = function(){
document.getElementById("btn").onclick=function(){
/*document.getElementById("div").innerHTML="<font color='red'>用户名不能为空</font>"*/
document.getElementById("div").innerText="用户名不能为空"
}
}
</script>
<input type="button" value="设置div中的内容" id="btn"/>
<div id="div"></div>
</body>
</html>
三.正则表达式
1.什么是正则表达式,有什么用处?
正则表达式(Regular Expression),主要用在字符串格式匹配方面
它实际上是一门独立的学科,最初用在医学方面,用来表示神经符号等。目前使用最多的是计算机编程领域,用作字符串格式匹配,包括搜索方面等。
2.常见正则表达式符号
. 匹配除换行符以外的任意字符
\w 匹配字母或数字或下划线或汉字
\s 匹配任意的空白符
\d 匹配数字
\b 匹配单词的开始或结束
^ 匹配字符串的开始
$ 匹配字符串的结束
* 重复零次或更多次
+ 重复一次或更多次
? 重复零次或一次
{n} 重复n次
{n,} 重复n次或更多次
{n,m} 重复n到m次
\W 匹配任意不是字母,数字,下划线,汉字的字符
\S 匹配任意不是空白符的字符
\D 匹配任意非数字的字符
\B 匹配不是单词开头或结束的位置
[^x] 匹配除了x以外的任意字符
[^aeiou] 匹配除了aeiou这几个字母以外的任意字符
3.使用示例
<!DOCTYPE html>
<html>
<head>
<title>关于正则表达式</title>
</head>
<body>
<!--qq号的正则表达式
^[1-9][0-9]{4,}$
email的正则表达式:^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
创建正则表达式对象
1.var regExp = /正则表达式/flags;
2.使用内置支持类RegExp
即 var regExp = new RegExp("正则表达式","flags");
其中flags可选项。
如果使用语法 2 要用引号将 flag 引起来。标志可以组合使用,可用的有:
g (全文查找出现的所有 pattern)
i (忽略大小写)
m (多行查找)(ES规范制定之后才支持m),如果前面是正则表达式,则flags不能用m,只有前面是普通字符串的时候m才可以使用
test()方法
正则表达式对象.test(用户填写的字符串),返回true或者false
-->
<script type="text/javascript">
window.onload = function(){
document.getElementById("btn").onclick=function(){
var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if(!emailRegExp.test(document.getElementById("email").value)){
alert("邮箱地址不合法");
}
}
//给文本框绑定focus
document.getElementById("email").onfocus = function(){
alert("sdasdasd");
}
}
</script>
<input type="text" id="email"/>
<br>
<input type="button" value="验证邮箱" id="btn"/>
</body>
</html>