1,javaScript包括三大块:ECMAScript,DOM,BOM
1,ECMAScript:是ECMA制定的262标准,JavaScript,JScript都遵守这个标准,
ECMAScript是JavaScript的核心语法
2,DOM编程是JavaScript对HTML中的dom节点进行操作,DOM是有规范的,DOM规范是由W3C制定的
Document Object Modek(文档对象模型:对网页当中的节点进行增删改的过程.)HTML文档被当成一棵DOM树来看待。
var domObj=document.getElementById("id");
3 ,BOM编程是对浏览器本身操作,例如:前进,后退,地址栏,关闭窗口,弹窗等。由于浏览器有不同的厂家制造,所以BOM缺少规范,一般是有一个默认的行业规范
Brower Object Model(浏览器对象模型)
2,DOM和BOM的区别和联系:
BOM的顶级对象是:window
DOM的顶级对象是:document
实际上BOM是包括DOM的。
JS获取元素的三种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS获取元素的三种方式</title>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<input type="checkbox" name="aihao" value="1"/>
<input type="checkbox" name="aihao" value="2"/>
<input type="checkbox" name="aihao" value="3"/>
<input type="checkbox" name="aihao" value="4"/>
<script type="text/javascript">
//根据id获取一个元素
var div1 =document.getElementById("div1");
console.log(div1);
// 根据name属性获取多个元素,是一个集合
var aihaos= document.getElementsByName("aihao");
console.log(aihaos)
//根据标签的名字获取
var divs=document.getElementsByTagName("div");
console.log(divs);
</script>
</body>
</html>
1,获取文本框的value
<!DOCTYPE html>
<html>
<head>
<title>DOM编程-获取文本框的value</title>
</head>
<script text="text/javascript">
// window.onload=function(){
// //window是可以省略的
// var btnElt=window.document.getElementById("btn01");
// alert(btnElt);//[object HTMLInputElement]
// alert(btnElt.value);//hello
// }
window.onload=function dosome(){
var btnElt=document.getElementById("btn");
btnElt.onclick=function(){
var uesrElt=document.getElementById("username");
var s= uesrElt.value;
alert(s);
//简化
// alert(document.getElementById("username").value);
//可以修改value的值
// document.getElementById("username").value="zangsan";
}
}
//此处需要注意:一个网页时无法使用两个window.onload的,上面一个会被下面的覆盖
window.onload=function(){
document.getElementById("setBtn").onclick=function(){
document.getElementById("username2").value=
document.getElementById("username1").value;
}
}
</script>
<input type="text" id="username"/>
<input type="button" value="获取文本框的value" id="btn"/>
<input type="button" id="btn01" value="hello"/>
<hr/>
<input type="text" id="username1"/>
<input type="text" id="username2"/>
<br/>
<input type="button" value="将第一个文本框中的value赋值到第二个文本框" id="setBtn"/>
<br/>
<!-- blur事件,失去焦点事件
以下代码中的this代表的是当前Inupt节点对象,this.value就是这个节点对象的value属性。
-->
<input type="text" onblur="alert(this.value)"/>
</body>
</html>
2,innerHTML和innerText操作div和span
<!DOCTYPE html>
<html>
<head>
<title>DOM编程-innerHTML和innerText操作div和span</title>
<!--
innerHTML和innerText属性的区别?
相同点:都是设置元素内部的内容。
不同点:
innerHTML会把后面的“字符串”当做一段HTML代码解释并执行
innerText,即使后面是一段HTML代码,也只是将其当作普通的字符串来看待
-->
<style type="text/css">
#div1{
background-color: aquamarine;
width: 300px;
height: 300px;
border: 1px black solid;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
document.getElementById("btn").onclick=function(){
var divElt= document.getElementById("div1");
//使用innerHTML属性来设置元素的内容
divElt.innerHTML="dddddss";
//divElt.innerHTML="<font color='red'>this is a</font> ";
// divElt.innerText="<font color='red'>this is a</font> ";
}
}
</script>
<input type="button" value="设置div的内容" id="btn">
<div id="div1"></div>
</body>
</html>
正则表达式:
1,什么是正则表达式,有什么用?
正则表达式:Regular Expression
正则表达式主要用于字符串格式匹配方面。
2,正则表达式实际上是一门独立的学科,在Java语言中支持,c语言也支持,JavaScript中也支持。
大部分编程语言都支持正则表达式。正则表达式最初使用在医学方面,用来表示神经符号等。目前使用最多的是计算机编程领域,用作字符串格式匹配。包括搜索方面等。
正则表达式修饰符
修饰符 可以在全局搜索中不区分大小写:
修饰符 描述
i 执行对大小写不敏感的匹配。
g 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。
m 执行多行匹配。
正则表达式模式
方括号用于查找某个范围内的字符:
表达式 描述
[abc] 匹配查找方括号之间的任何字符。
[0-9] 匹配任何从 0 至 9 的数字。
(x|y) 查找任何以 | 分隔的选项。就是或者的意思
[A-Za-z0-9] 匹配A-Za-z0-9中任意一个字符
[A-Za-z0-9-] 匹配A-Za-z0-9,-,中任意一个字符
元字符是拥有特殊含义的字符:
元字符 描述
. 匹配除换行符以外的任意字符
\w 匹配字母/数字/下滑线或汉字
\d 匹配数字。
\s 匹配空白字符。
\b 匹配单词的开始或结束。
\uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。
^ 匹配字符串的开始
$ 匹配字符串的结束
量词:
量词 描述
n+ 匹配任何包含至少一个 n 的字符串。
n* 匹配任何包含零个或多个 n 的字符串。
n? 匹配任何包含零个或一个 n 的字符串。
{n} 重复n次
{n,} 重复n次或更多
{n,m} 重复n到m次
\W 匹配不是字母/数字/下滑线或汉字
\D 匹配不是数字。
\S 匹配不是空白字符。
\B 匹配不是单词的开始或结束的位置。
[^x] 匹配除了x以外的任意字符
[^aeiou] 匹配除了aeiou这几个字母以外的任意字符
正则表达式当中的小括号优先级较高
5,简单的正则表达式
QQ号的正则表达式:^[1-9][0-9]{4,}$
6,其它人编写的正则表达式要看懂
eamil:^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
创建正则表达式对象
7,怎么创建正则表达式对象,怎么调用正则表达式对象的方法
第一种创建方式:
var regExp=/正则表达式/flags;
第二种创建方式:使用内置支持类RegExp
var regExp=new RegExp("正则表达式",flags);
关于flags:(其实就是正则表达式修饰符)
g:全局匹配
i:忽略大小写
m:多行匹配(ES规范之后制定之后才支持m),当前面是正则表达式的时候不能用,只有是字符串才能用
正则表达式对象的text()方法?
true/false=正则表达式对象.text(用户填写的字符串);
返回true:字符串匹配成功
alse:字符串匹配失败
代码示例:
<!DOCTYPE html>
<html>
<head>
<title>关于正则表达式</title>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
//给按钮绑定click
document.getElementById("btn").onclick=function(){
var email=document.getElementById("email").value;
var emailRegExp=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var ok=emailRegExp.test(email);
if(!ok){
document.getElementById("emailError").innerText="邮箱地址不合法";
}else{
document.getElementById("emailError").innerText="邮箱地址合法";
}
}
//给文本框绑定focus获得焦点事件
document.getElementById("email").onfocus=function(){
document.getElementById("emailError").innerText="";
}
//绑定enter键盘事件
document.getElementById("email").onkeydown=function(event){
if(event.keyCode==13){
var email=document.getElementById("email").value;
var emailRegExp=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var ok=emailRegExp.test(email);
if(!ok){
document.getElementById("emailError").innerText="邮箱地址不合法";
}else{
document.getElementById("emailError").innerText="邮箱地址合法";
}
}
}
}
</script>
<input type="text" id="email"/>
<span id="emailError" style="color: red;font-size:12px;"></span>
<br/>
<input type="button" value="验证邮箱正则表达式" id="btn"/>
</body>
</html>
去除字符串的前后空白
<!DOCTYPE html>
<html>
<head>
<title>去除字符串的前后空白</title>
</head>
<body>
<script type="text/javascript">
//低版本的IE浏览器不支持字符串的trim()函数,怎么办?
//可以自己对String类扩展一个全新的trim()函数
String.prototype.trim=function(){
//alert("扩展之后的trim")
//去除当前字符串的前后空白
//在当前的方法中的this代表队就是当前字符串
//return this.replace("前空白","").replace("后空白","");
//return this.replace(/^\s+/,"").replace(/\s+$/,"");
return this.replace(/^\s+|\s+$/g,"");
}
window.onload=function(){
document.getElementById("btn").onclick=function(){
//获取用户名
var username=document.getElementById("username").value;
//去除前后空白
username=username.trim();
//测试
alert("--->"+username+"<----");
}
}
</script>
<input type="text" id="username"/>
<input type="button" value="获取用户名" id="btn"/>
</body>
</html>
表单验证代码示例:
此处需要注意:在上面以及注册事件的元素,可以使用"元素.事件()",通过JS代码自动调用,
注意:不是事件句柄,要加();
<!DOCTYPE html>
<html>
<head>
<title>表单验证</title>
<style type="text/css">
span{
color: red;
font-size: 12px;
}
</style>
</head>
<body>
<script type="text/javascript">
/*
1,用户名不能为空
2,用户名必须在6-14位之间
3,用户名只能有数字和字母组成
4,密码和确认密码必须一致,邮箱地址合法
5,统一失去焦点验证
6,错误提示信息统一在span标签中提示,并且要求字体12号,红色
7,文本框再次获得焦点后,清空错误信息,如果文本框中的数据不合法要求清空文本框中的value
8,最终表单中所有的项均合法方可提交
*/
window.onload=function(){
//绑定失去焦点事件:
var usernameElt= document.getElementById("username");
//获取usernamespam标签
var usernameErrorSpan=document.getElementById("usernameError");
usernameElt.onblur=function(){
//获取用户名
var username=document.getElementById("username").value;
username=username.trim();
//判断是否为空,此处是自动转换成了boolean类型,可以去看一下上一章boolean类型
if(!username){//if(username.length==0)或者(username==="")
//代表username是空字符串
// alert("username是空字符串");
//继续判断长度
usernameErrorSpan.innerText="用户名不能为空";
}else{
//alert("username不是空字符串");
//继续判断长度
if(username.length<6||username.length>14){
usernameErrorSpan.innerText="用户名必须在6-14位之间";
}else{
//用户名合法
//继续判断是否含有特殊符号
var regExp=/^[A-Za-z0-9]+$/;
var ok=regExp.test(username);
if(ok){
//用户名最终合法
}else{
//用户名中含有特殊符号
usernameErrorSpan.innerText="用户名只能有数字和字母组成";
}
}
}
//给username这个文本框注册得到焦点事件
usernameElt.onfocus=function(){
// //清空span
// usernameErrorSpan.innerText="";
//清空非法的value
if(usernameErrorSpan.innerText=""){
usernameElt.value="";
}
//清空span
usernameErrorSpan.innerText="";
}
}
//获取密码错误提示的span标签
var pwdErrorSpan=document.getElementById("userpwdError");
//获取确认密码框对象
var userpwd2Elt=document.getElementById("userpwd2");
userpwd2Elt.onblur=function(){
//获取密码和确认密码
var userpwdElt=document.getElementById("userpwd");
var userpwd=userpwdElt.value;
var userpwd2=userpwd2Elt.value;
if(userpwd!=userpwd2){
//密码不一致
pwdErrorSpan.innerText="密码不一致";
}else{
//密码一致
}
}
//绑定focus事件
userpwd2Elt.onfocus=function(){
if(pwdErrorSpan.innerText!=""){
userpwd2Elt.value="";
}
pwdErrorSpan.innerText="";
}
//获取email的span
var emailSpan=document.getElementById("emailError");
//给Email绑定blur事件
var emailElt=document.getElementById("email");
emailElt.onblur=function(){
//获取Email
var email=emailElt.value;
//编写Email的正则
var emailRegExp=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var ok2=emailRegExp.test(email);
if(ok2){
//合法表达式
}else{
//不合法表达式
emailSpan.innerText="邮箱地址不合法";
}
}
//绑定得到焦点事件
emailElt.onfocus=function(){
if(emailSpan.innerText!=""){
emailElt.value="";
}
emailSpan.innerText="";
}
//给提交按钮绑定鼠标单击事件
var submitBtnElt=document.getElementById("submitBtn");
submitBtnElt.onclick=function(){
// alert(111);
//注意:是触发uesrname,userpwd2,email的blur和focus事件,上面注册了的。
//不需要人工操作,使用JS代码触发事件。
usernameElt.focus();
usernameElt.blur();
// xxx.click();//提交
userpwd2Elt.focus();
userpwd2Elt.blur();
emailElt.focus();
emailElt.blur();
//当所有表单项都是合法的时候,提交表单
if(usernameErrorSpan.innerText==""&&pwdErrorSpan.innerText==""&&emailSpan.innerText==""){
var userForm=document.getElementById('userForm');
//使用表单的提交方法
userForm.submit();
}else{
alert("所有的填充必须正确");
}
}
}
</script>
<!-- 表单提交一般使用post此处是为了更好的验证 -->
<form id="userForm" action="http://localhost:8080/jd/save" method="get">
用户名<input type="text" name="username" id="username"/>
<span id="usernameError" ></span>
<br/>
密码<input type="text" name="password" id="userpwd"/>
<br/>
确认密码<input type="text" id="userpwd2"/>
<span id="userpwdError" ></span>
<br/>
邮箱<input type="text" name="email" id="email"/>
<span id="emailError" ></span>
<br/>
<!-- <input type="submit" value="注册" id=""/> -->
<input type="button" value="注册" id="submitBtn"/>
<input type="reset" value="重置" />
</form>
</body>
</html>
复选框的全选和取消全选
<!DOCTYPE html>
<html>
<head>
<title>复选框的全选和取消全选</title>
</head>
<body>
<script type="text/javascript">
/* window.onload=function(){
var firstCheck=document.getElementById("firstCheck");
firstCheck.onclick=function(){
//获取第一个复选框的选中状态
//checked属性返回是否选中的状态/true/false
//主要此处name有相同的,所以返回的是一个数组。
var aihao= document.getElementsByName("aihao");
if(firstCheck.checked){
//全选
for(var i=0;i<aihao.length;i++){
aihao[i].checked=true;
}
} else{
//取消全选
for(var i=0;i<aihao.length;i++){
aihao[i].checked=false;
}
}
*/
//简化(第一个复选框选中,后面全部选中)
window.onload=function(){
var firstCheck=document.getElementById("firstCheck");
var aihao= document.getElementsByName("aihao");
firstCheck.onclick=function(){
for(var i=0;i<aihao.length;i++){
aihao[i].checked=firstCheck.checked;
}
}
//(总数量和选中的数量相等的时候,第一个复选框选中)
//对以上数组进行遍历
var num=aihao.length;
for(var i=0;i<aihao.length;i++){
//这个for循环只是把click事件注册
aihao[i].onclick=function(){
//alert(322);
var checkbox=0;
//alert(checkbox);
//总数量和选中的数量相等的时候,第一个复选框选中。
for(var i=0;i<aihao.length;i++){
if(aihao[i].checked){
checkbox++;
}
//alert(checkbox);//此处还是自己在网页看一下比较容易理解
}
//简写
firstCheck.checked=(num==checkbox);
// if(num==checkbox){
// firstCheck.checked=true;
// }else{
// firstCheck.checked=false;
// }
}
}
}
</script>
<input type="checkbox" id="firstCheck"/><br/>
<input type="checkbox" name="aihao" value="smoke"/>抽烟
<br/>
<input type="checkbox"name="aihao" value="drink"/> 喝酒
<br/>
<input type="checkbox" name="aihao" value="tt"/> 烫头
</body>
</html>
获取下拉列表的value
<!DOCTYPE html>
<html>
<head>
<title>获取下拉列表的value</title>
</head>
<body>
<!-- 使用change事件 -->
<!-- <select onchange="alert(this.value)">
<option value="">请选择省份</option>
<option value="001">河北省</option>
<option value="002">河南省</option>
<option value="003">山东省</option>
<option value="004">山西省</option>
</select> -->
<script type="text/javascript">
window.onload=function(){
var provinceList=document.getElementById("provinceList");
provinceList.onchange=function(){
//获取选中项的value
alert(provinceList.value);
}
}
</script>
<select id="provinceList">
<option value="">请选择省份</option>
<option value="001">河北省</option>
<option value="002">河南省</option>
<option value="003">山东省</option>
<option value="004">山西省</option>
</select>
</body>
</html>
JS内置类:Date (显示网页时钟)
注意:在JS代码块中,不能直接使用<br/>进行换行,
需要使用: document.write("<br/>");进行操作
<!DOCTYPE html>
<html>
<head>
<title>显示网页时钟</title>
</head>
<body>
<script type="text/javascript">
/*
关于JS中内置的支持类:Date,可以用来获取时间/日期
*/
//获取系统当前时间
var nowTime=new Date();
//输出
//document.write(nowTime);
//转换成具有本地语言环境的日期格式。
nowtime=nowTime.toLocaleString();
document.write(nowtime);
//<br/>//在JS中不允许之间出现这个标签
document.write("<br/>");
//当以上格式不是自己想要的,可以通过日期获取年月日等信息,自定制日期格式
var t=new Date();
var year=t.getFullYear();//返回年信息,以全格式返回
var month=t.getMonth();//月份0-11
//var day=t.getDay();//获取的是一周的第几天(0-6)
var day=t.getDate()//获取日期
document.write(year+"年"+(month+1)+"月"+day+"日");
document.write("<br/>");
document.write("<br/>");
//重点:怎么获取毫秒数(从1979年1月1日 00:00:00 000到当前系统时间的总毫秒数)
var t= t.getTime();
alert(t);//就近原则,会覆盖
</script>
<script type="text/javascript">
function displayTime(){
var time=new Date();
var time= time.toLocaleString();
var timeDiv=document.getElementById("timeDiv");
timeDiv.innerHTML=time;
//document.write(time);
}
//每隔一秒调用displayTime方法
function start(){
//从这行代码执行结束开始,则会不间断的,每个1000毫秒调用一次displayTime()函数。
//全局变量
v= window.setInterval("displayTime()",1000);
}
function stop(){
window.clearInterval(v);
}
</script>
<input type="button" value="显示系统时间" onclick="start()"/>
<input type="button" value="系统时间停止" onclick="stop()"/>
<div id="timeDiv"></div>
</body>
</html>