ECMAScript:JS的核心语法（ES规范/ECMA-262标准）
DOM：Document Object Model(文档对象模型)。HTML文档被当做一颗DOM树来看待
BOM:Browser Object Model(浏览器对象模型)。关闭浏览器窗口，操作浏览器的为BOM编程
2.DOM与BOM的区别与联系
BOM的顶级对象是window
DOM的顶级对象是document
这里可以看出DOM实际上是包含在BOM中的
1.获取文本框的内容
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById("mybtn");
btn.onclick = function(){
//获取了文本框1的值赋给了文本框2
document.getElementById("mytext2").value = document.getElementById("mytext1").value;
}
}
</script>
</body>
<input type="button" value="提交" id="mybtn"/><br>
<input type="text" id="mytext1"/><br>
<input type="text" id="mytext2"/>
<br>
//失去焦点后，输出文本框内容
<input type="text" onblur="alert(this.value)"/> //this代表的是当前文本框
2.innerHTML和innerText
两者都是属性，不是方法
相同点：同时两者都是设置元素内部的内容
不同点：innerHTML会把后面的"字符串"当作一段HTML代码解释并执行
innerText:即使后面是一段HTML代码，也只是将当作普通字符来看待
<!--加入css样式-->
<style type="text/css">
#div1{
background-color: aqua;
width:300px; /* 宽度 */
height: 200px; /* 高度 */
border: 1px black solid; /* 边框 */
position: absolute; /* 定位方式:绝对定位 */
top:100px; /* 离顶部的高度 */
left:200px; /* 离底部的高度 */
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById("mybtn");
var div = document.getElementById("div1");
btn.onclick = function(){
/* div.innerHTML = "wenshao"; */
/* div.innerHTML = "<font color='red'>点击后生成</font><br>"; */
div.innerText = "wenshao";
}
}
</script>
<input type="button" value="提交" id="mybtn"/>
<div id="div1"></div>
</body>
3.正则表达式
1.什么是正则表达式：
正则表达式主要用在字符串格式匹配方面，以及搜索方面
正则表达式是独立的学科：很多语言都可以使用
a.常见的正则表达符号要认识
b.简单的正则表达式要会写
c.别人写的正则表达式要能看懂
d.在JS中，要学会怎么创建正则表达式对象(new对象)
e.在JS中，正则表达式有哪些方法！(调方法)
f.要能快速的从网络上找到自己需要的正则表达式，并测试其有效性
(1).常见的正则表达式符号
. 匹配除换行符以外的任意字符
\w 匹配字母或数字或下划线或汉字
\s 匹配任意的空白符
\d 匹配数字
\b 匹配单词的开始或结束
^ 匹配字符串的开始
$ 匹配字符串的结束
* 重复零次或更多次
+ 重复一次或更多次
? 重复零次或一次
{n} 重复n次
{n,} 重复n次或更多次
{n,m} 重复n到m次
\W 匹配任意不是字母，数字，下划线，汉字的字符
\S 匹配任意不是空白符的字符
\D 匹配任意非数字的字符
\B 匹配不是单词开头或结束的位置
[^x] 匹配除了x以外的任意字符
[^aeiou] 匹配除了aeiou这几个字母以外的任意字符
| 表示或者
(2).简单的正则表达式要会写
QQ号正则表达式
^[1-9][0-9]{4,}$
解析：
正则表达式当中的小括号()优先级较高
[1-9]表示1到9的任意一个数字(次数是一次)
[A-Za-z0-9]表示A-Z,a-z,0-9中的任意一个字符，表示的是A到Z，a到z，0到9,中的任意一个字符
[A-Za-z0-9-]表示A-Z,a-z,0-9,'-' 中的任意一个字符，这里-成了一个减号
(3)他人编写的正则表达式要能看懂
Email正则表达式
^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
(4)怎么创建正则表达式对象，怎么调用正则表达式对象的方法?
第一种创建方式：
var regExp = /正则表达式/;
第二中创建方式:使用内部支持类创建RegExp
var regExp = new RegExp(“正则表达式”,flags);
flags可取以下的值：
g:全局匹配
i:忽略大小写
m:多行搜索，当前面是正则表达式时不支持m，
意思时，这种语法不仅仅用来对正则表达式的匹配
(5).正则表达式对象的test()方法
正则表达式.tes(“字符串”); 返回值为true，表示字符串匹配上了这个正则表达式
返回值为false，表示字符串美哟与此正则表达式匹配上
匹配邮箱的示例程序
<body>
<script type="text/javascript">
window.onload = function(){
var regExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
var mybtn = document.getElementById("mybtn");
var mytext = document.getElementById("mytext");
var myspan = document.getElementById("span");
mybtn.onclick = function(){
var ok = regExp.test(mytext.value);
if(!ok){
myspan.innerText = "邮箱格式不合法";
}else{
myspan.innerText = "邮箱格式合法";
}
}
//绑定一个focus事件,当文本获得焦点后,提示信息消失
mytext.onfocus = function(){
myspan.innerText = "";
}
}
</script>
<input type="text" id="mytext">
<span style="color: #00FFFF;" id="span"></span>
<br><input type="button" value="验证邮箱" id="mybtn">
</body>
4.去除前后空白的函数trim()
通过该trim(),可以去除掉文本框里字符串内容的前后空白
5.表单验证
项目代码：依托杜老师视频完成，简单完成一些前端登陆注册，限制页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
span{
color: red;
size: 12px;
}
</style>
</head>
<!--
需求：
1.用户名不能为空
2.用户名必须在6-14位之间
3.用户名只能有数字和字母组成，不能含有其他字符
4.当用户名不合法再次选中该文本框时，清空文本框里得数据
5.两次密码是否一致确认、
6.当所有内容合法之后再提交（重要内容：当内容合法后表单才会提交内容）
-->
<body>
<script type="text/javascript">
window.onload = function(){
var acc = document.getElementById("account");
var span = document.getElementById("myspan1");
var span2 = document.getElementById("myspan2");
var pwd = document.getElementById("pwd");//获取到密码栏节点
var cpwd = document.getElementById("cpwd");//获取到确认密码栏节点
var submitbtn = document.getElementById("submitbttn");//获取提交表单的按钮
var regExp2 = /^.{4,6}$/;//用户名4-6位
var regExp3 = /^[A-Za-z0-9]*$/;//用户名只能含有数字与字母
//当用户名栏始去焦点
acc.onblur = function(){
//获取到文本框里的值
var value = acc.value;
//基本素养,要去除前后空白字符串
value = value.trim();
if(value == ""){
span.innerHTML = "用户名不能为空" ;
return;
}
ok = regExp2.test(acc.value);
if(!ok){
span.innerHTML = "用户名必须在4到6位";
}else{
//在满足了4-6位的条件之后,在判断用户名具体的字符
var ok1 = regExp3.test(acc.value);
if(!ok1){
span.innerHTML = "用户名必须由数字或者字母组成";
}else{
}
}
}
//用户栏获取到焦点
acc.onfocus =function(){
if(span.innerText != ""){ //span没有内容时代表合法
acc.value = "";
}
span.innerHTML=""; //当获取焦点后,如果不合法数据自动清空
}
//当确认密码栏失去焦点
cpwd.onblur = function(){
var pwdvalue = pwd.value.trim();
var cpwdvalue = cpwd.value.trim();
if(pwdvalue == ""){
span2.innerText = "密码输入不能为空";
}
if(pwdvalue != cpwdvalue){
span2.innerText = "两次输入的密码不一致";
}
}
//当确认密码栏获得焦点
cpwd.onfocus = function(){
span2.innerText = "";
}
//判断所有信息是否合法且准备提交(表单拦截)
submitbtn.onclick = function(){
//这里focus()是触发该事件,注意和事件区别
//事件句柄需要人去做这件事,这里是通过代码发生这件事
acc.focus();
acc.blur();
cpwd.focus();
cpwd.blur();
if(span.innerText==""&&span2.innerText==""){
//获取到表单,准备提交
var form = document.getElementById("forminfo");
//这样也是一种提交的方式
form.submit();
}
}
}
</script>
<form action="a" id="forminfo">
<table>
<tr>
<td>用户名:</td><td><input type="text" id="account" name="username"/> <span id="myspan1"></span></td>
<tr>
<tr>
<td>密码:</td><td><input type="password" id="pwd"/></td>
<tr>
<tr>
<td>确认密码:</td><td><input type="password" id="cpwd" name = "userpwd"/><span id="myspan2"></span></td>
<tr>
<tr>
<td>邮箱:</td><td><input type="text" id="email" name="useremail"/></td><span id="myspan3"></span></td>
<tr>
</table>
<input type="button" value="提交" id="submitbttn"/>
<input type="button" value="重置" id="refresh"/>
</form>
</body>
</html>
复选框的全选和取消全选
<body>
<script type="text/javascript">
/*
后续拓展需求：
当三个复选框都选中时，全选框的勾自动打上
*/
window.onload = function(){
var check = document.getElementById("check");
var checks = document.getElementsByName("aihao");
check.onclick = function(){
if(check.checked){
for(var i=0;i<checks.length;i++){
checks[i].checked = true;
}
}else{
for(var i=0;i<checks.length;i++){
checks[i].checked = false;
}
}
}
//当三个复选框全部选中后,全选框打赏勾
}
</script>
<input type="checkbox" id="check"><br>
<input type="checkbox" name="aihao" value="zuqiu" id="check1">足球<br>
<input type="checkbox" name="aihao" value="lanqiu" id="check2">篮球<br>
<input type="checkbox" name="aihao" value="paiqiu" id="check3">排球<br>
</body>
获取下拉列表框里面的value值
<body>
<script type="text/javascript">
/*
需求是：当选着下拉列表中的value之后，要拿到这个value
*/
window.onload = function(){
var select = document.getElementById("select");
select.onchange = function(){
alert(select.value);
}
}
</script>
<!--当选中点击选中下拉列表框一次时，会发生一次change事件，不再是click事件-->
<select id="select">
<option value="">--下拉选择省份--</option>
<option value="hebei">河北</option>
<option value="sichan">四川</option>
</select>
</body>
动态显示网页时钟：
1.以及window.interval与window.clearinterval的使用
<body>
<script type="text/javascript">
/*
关于JS中的内置的支持类：Date，可以用来获取时间/日期
*/
var nowTime = new Date();
//输出
//document.write(nowTime);
//转换为具有本地语言环境的日期格式
nowTime = nowTime.toLocaleString();
document.write(nowTime);
//当以上格式不是自己想要的,可以通过日期获取年月日等信息,自定制日期格式
/*
包括有方法：getDate();getDay();
*/
//重点了解getTime()方法可以获取从1970到今天的毫秒数
<br><br>
</script>
<script type="text/javascript">
/*
希望达到的效果是，点击一次后，网页时钟动态显示
*/
function display(){
var nowTime = new Date();
var div = document.getElementById("div1");
nowTime = nowTime.toLocaleString();
div.innerText = nowTime;
}
//每隔一秒,调用一次display函数,要使用到setInterval
start = function(){
//Interval的返回值,可以被拿来中止循环
v = window.setInterval("display()",1000); //意为每隔1s执行一此display
}
stop = function(){
window.clearInterval(v);
}
</script>>
<input type="button" id="mybtn" onclick="start()"/>
<div id="div1">
</div>
</body>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
