//总结浏览器往服务器发请求
//表单,超链接
//document.location文本重定向
//window.location窗口重定向
//window.open()请求地址
//以上所有方法都可以往服务器传送数据,只有表单提交的数据才是动态的(JSP可以动态)
<!DOCTYPE html>
<!-- 这是HTML的注释 -->
<html lang="en" id="myHtml">
<head>
<!-- 这里不是设置了编码,而是告诉浏览器,用什么编码方式打开文件避免乱码 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HtmlAll</title>
<style type="text/css">
span
{
color: red;
font-size: 12px;
}
</style>
</head>
<body>
<!-- JS包括三大块
dom指的是文档对象模型,对网页中的节点进行增删改查的过程
bom浏览器对象模型(关闭浏览器窗口,打开一个浏览器窗口,后退前进,浏览器地址栏上的地址)
ecmascript是JS的核心语法ES标准
bom的顶级对象是window(浏览器窗口),dom的顶级对象是document(HTML文档) -->
<!-- 实际上bom是包含dom的 -->
<!-- bom和DOM是包含关系 -->
<script type="text/javascript">
window.onload = function()
{
var UF = document.getElementById("usernameError");
//通过浏览器窗体获取了html元素
document.getElementById("btn").onclick = function()
{
alert(btn);
}
document.getElementById("get").onclick = function()
{
alert(document.getElementById("txt").value);
document.getElementById("nwx").value = "jack";
}
var un = document.getElementById("username");
un.onblur = function()
{
username = un.value;
username = username.trim();
if(username)
{
//代表非空
if(username.length < 6 || username.length > 14)
{
//用户名长度非法
UF.innerText = "用户名必须在6到14之间";
}
else
{
//用户名长度合法
//判断是否有非法字符
var regExp = /^[A-Za-z0-9]+$/;
if(regExp.test(username))
{
//合法
}
else
{
//不合法
UF.innerText = "用户名只能由数字和字母组成";
}
}
}
else
{
//代表空
//提示信息
UF.innerText = "用户名不能为空";
}
}
un.onfocus = function()
{
//这里要先检测再清空,这样就可以判断内容是否为空格组成用于清理
if(UF.innerText != "")
{
//清空空格内容
un.value = "";
}
//清空提示信息
UF.innerText = "";
}
document.getElementById("pwd2").onblur = function()
{
var pwd1 = document.getElementById("pwd1").value;
var pwd2 = document.getElementById("pwd2").value;
if(pwd1 != pwd2)
{
//密码错误的提示标签提示错误
document.getElementById("pwdError").innerText = "两次输入的密码不一致";
}
if(pwd1 === "" || pwd2 === "")
{
document.getElementById("pwdError").innerText = "密码不能为空";
}
}
document.getElementById("pwd2").onfocus = function()
{
if(document.getElementById("pwdError").innerText != "")
{
document.getElementById("pwdError").innerText = "";
}
}
document.getElementById("email").onblur = function()
{
var email = document.getElementById("email").value;
var emailRegExp = /^[A-Za-z0-9]+([-._][A-Za-z0-9]+)*@[A-Za-z0-9]+(-[A-Za-z0-9]+)*(\.[A-Za-z]{2,6}|[A-Za-z]{2,4}\.[A-Za-z]{2,3})$/;
if(emailRegExp.test(email))
{
}
else
{
//没过
document.getElementById("emailnameError").innerText = "必须输入一个邮箱";
}
}
document.getElementById("email").onfocus = function()
{
if(document.getElementById("emailnameError").innerText != "")
{
document.getElementById("emailnameError").innerText = "";
}
}
document.getElementById("myForm").onsubmit = function()
{
}
document.getElementById("update").onclick = function()
{
document.getElementById("username").onblur();
document.getElementById("pwd2").onblur();
document.getElementById("email").onblur();
var emailnameError = document.getElementById("emailnameError").innerText;
var emailnameError = document.getElementById("pwdError").innerText;
if(UF.innerText === "" && emailnameError === "" && pwdError === "")
{
document.getElementById("myForm").submit();
}
else
{
alert("输入信息有误");
}
}
var aihaos = document.getElementsByName("aihao");
document.getElementById("firstCheck").onclick = function()
{
var flag = document.getElementById("firstCheck");
// if(flag.checked)
// {
// //全选
// //返回的是多个对象
// for(var i = 0;i < aihaos.length;i++)
// {
// aihaos[i].checked = true;
// }
// }
// else
// {
// //取消全选
// //返回的是多个对象
// for(var i = 0;i < aihaos.length;i++)
// {
// aihaos[i].checked = false;
// }
// }
//简便写法
for(var i = 0;i < aihaos.length;i++)
{
aihaos[i].checked = flag.checked;
}
}
for(var i = 0;i < aihaos.length;i++)
{
aihaos[i].onclick = function()
{
var count = 0;
//总选中量和被选中量相同,全选打勾
for(var i = 0;i < aihaos.length;i++)
{
if(aihaos[i].checked)
{
count++;
}
}
//简便写法
document.getElementById("firstCheck").checked = (count == aihaos.length);
// if(count == aihaos.length)
// {
// document.getElementById("firstCheck").checked = true;
// }
// else
// {
// document.getElementById("firstCheck").checked = false;
// }
}
}
document.getElementById("provinceList").onchange = function()
{
alert(document.getElementById("provinceList").value);
}
var code;
document.getElementById("GetTime").onclick = function()
{
code = window.setInterval(displayTime,100);
}
function displayTime()
{
//获取系统当前时间
var Time = new Date();
//通过日期Date对象获取年月日
var year = Time.getFullYear();
//获取月份,但是是0到11,所以要加1
var month = Time.getMonth();
//获取的一周的第几天
var day = Time.getDate();
//怎么获取毫秒数
var times = Time.getTime();
//转换本地语言的日期格式
Time = Time.toLocaleString();
document.getElementById("TimeDiv").innerText = Time;
}
document.getElementById("World!").onclick = function()
{
window.clearInterval(code);
}
document.getElementById("closeDE").onclick = function()
{
window.close();
}
document.getElementById("chooseD").onclick = function()
{
//取消和确认会返回一个布尔类型
var i = window.confirm("亲,确认删除吗");
alert(i);
}
document.getElementById("forwords").onclick = function()
{
window.history.go(1);
}
document.getElementById("goBaidu").onclick = function()
{
//可以设置我们的链接为百度
var location = window.location;
location.href = "http://www.baidu.com";
//总结浏览器往服务器发请求
//表单,超链接
//document.location文本重定向
//window.location窗口重定向
//window.open()请求地址
//以上所有方法都可以往服务器传送数据,只有表单提交的数据才是动态的(JSP可以动态)
}
}
</script>
<input type="button" id="btn" value="hello"/>
<input type="text" id="txt"/>
<input type="button" id="get" value="获取文本的value"/>
<input type="text" id="nwx"/>
<input type="text" value="哈哈哈哈哈哈哈哈哈" onblur="alert(this.value)"/>
<div>
<table>
<form id="myForm" action="http://www.baidu.com">
<tr>
<th>
用户名:
</th>
<th>
<input type="text" id="username"/>
</th>
<th>
<span id="usernameError"></span>
</th>
</tr>
<tr>
<th>
密码:
</th>
<th>
<input id="pwd1" type="text"/>
</th>
</tr>
<tr>
<th>
确认密码:
</th>
<th>
<input id="pwd2" type="text"/>
</th>
<th>
<span id="pwdError"></span>
</th>
</tr>
<tr>
<th>
邮箱:
</th>
<th>
<input id="email" type="email"/>
</th>
<th>
<span id="emailnameError"></span>
</th>
</tr>
<tr>
<th>
注册或重置
</th>
<th>
<input id="update" type="button" value="注册"/>
<input type="reset" value="重置"/>
</th>
</tr>
</form>
</table>
</div>
<div>
<table>
<form>
<tr>
<th>
<th>
<input type="checkbox" name="aihao"/>抽烟
</th>
<th>
<input type="checkbox" name="aihao"/>喝酒
</th>
<th>
<input type="checkbox" name="aihao"/>烫头
</th>
</th>
</tr>
<tr>
<th>
<th>
<input type="checkbox" id="firstCheck"/>全选
</th>
</th>
</tr>
</form>
</table>
</div>
<div>
<select id="provinceList">
<option selected>请选择省份</option>
<option value="河北省">河北省</option>
<option value="河南省">河南省</option>
<option value="山东省">山东省</option>
<option value="山西省">山西省</option>
<option value="陕西省">陕西省</option>
</select>
<input type="button" value="获取时间" id="GetTime"/>
<input type="button" value="扎瓦鲁多" id="World!"/>
</div>
<div id="TimeDiv"></div>
<input type="button" value="关闭" id="closeDE"/>
<input type="button" id="chooseD" value="确认"/>
<a href="file:///C:/Users/15713/Desktop/Demo/New.html">跳转页面</a>
<input type="button" value="前进" id="forwords"/>
<input type="button" value="百度" id="goBaidu">
</body>
</html>第二个页面
<!DOCTYPE html>
<!-- 这是HTML的注释 -->
<html lang="en" id="myHtml">
<head>
<!-- 这里不是设置了编码,而是告诉浏览器,用什么编码方式打开文件避免乱码 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HtmlAll</title>
<style type="text/css">
#div1{
background-color: aquamarine;
width: 300px;
height: 300px;
border: 1px solid black;
position: relative;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<script type="text/javascript" src="j.js"></script>
<div id="div1">
<input type="text" id="email">
<span id="emailError" style="color: red; font-size: 12px;"></span>
<br>
<input type="button" value="验证邮箱" id="btn"/>
</div>
<div>
<table align="center">
<form id="myForm">
<tr><td>登录窗口</td></tr>
<tr>
<td>
<input type="text" id="username"/>
</td>
</tr>
<tr>
<td>
<input type="password" id="password"/>
</td>
</tr>
<tr>
<td>
<input type="submit" value="登录"/>
</td>
</tr>
</form>
</table>
</div>
<div>
<!-- void运算符的语法是,执行运算符,但不返回任何结果 -->
<!-- 让我们href的路径消失,用void不返回即可 -->
<!-- javascript:void(0)我们的javascript是用来提示浏览器的,这是一段JS代码,这是不能省略的 -->
<a href="javascript:void(0)" onclick="alert('test')">执行页面不跳转</a>
<input type="button" onclick="vars()" value="123" />
<input type="button" id="auto" value="auto" />
<input type="button" id="tyo" value="tyo" />
<input type="button" value="设置div的内容" id="btnm"/>
<!-- 正则表达式,主要用在字符串格式匹配方面 -->
<!-- 正则表达式是独立的学科,在JAVA语言中支持,C和JS也支持 -->
<!-- 怎么new对象怎么调用方法 -->
<!-- .匹配除换行外的任意字符
\w匹配字母或数字或下滑线或汉字
\s匹配任意的空白符号
\d匹配数字
\b匹配单词的开始或结束
^匹配字符串的开始
$匹配字符串的结束
*重复零次或更多次
+重复一次或更多次
?重复零次或者一次
{n}重复n次
{n,}重复n次或更多次
{n,m}重复n到m次 -->
<!-- \W匹配不是字母或数字或下滑线或汉字的任意
\S匹配不是空白符号的任意
\D匹配不是数字的任意
\B匹配不是单词的开始或结束的任意
[^x]匹配除了x以外的任意
[^aeiou]匹配除了aeiou以外的任意字符 -->
<!-- 正则表达式小括号的优先级较高 -->
</div>
<script type="text/javascript">
// var regExp = /正则表达式/flags;
// var regExp = new RegExp("正则表达式");
window.onload = function()
{
function Check()
{
var input = document.getElementById("email").value;
var inputEmp = /^[A-Za-z0-9]+([-._][A-Za-z0-9]+)*@[A-Za-z0-9]+(-[A-Za-z0-9]+)*(\.[A-Za-z]{2,6}|[A-Za-z]{2,4}\.[A-Za-z]{2,3})$/;
var boolean = inputEmp.test(input);
if(!boolean)
{
//不合法
document.getElementById("emailError").innerText = "邮箱地址不合法";
}
else
{
//合法
document.getElementById("emailError").innerText = "邮箱地址合法";
}
}
document.getElementById("btn").onclick = Check;
document.getElementById("email").onfocus = function()
{
document.getElementById("emailError").innerText = "";
}
document.getElementById("email").onkeydown = function(event)
{
if(event.keyCode === 13)
{
Check();
}
}
document.getElementById("Baidu").onclick = function()
{
window.open("http://www.baidu.com");
}
document.getElementById("Baidu1").onclick = function()
{
window.open("http://www.baidu.com","_self");
}
document.getElementById("Baidu2").onclick = function()
{
window.open("http://www.baidu.com","_blank");
}
document.getElementById("Baidu3").onclick = function()
{
window.open("http://www.baidu.com","_parent");
}
document.getElementById("Baidu4").onclick = function()
{
window.open("http://www.baidu.com","_top");
}
document.getElementById("openED").onclick = function()
{
window.open("file:///C:/Users/15713/Desktop/Demo/001.html");
}
String.prototype.trim = function()
{
//prototype可以覆盖源代码
//后期拓展的trim函数直接去掉前后空白
return this.replace(/^\s+/,"").replace(/\s+$/,"");
}
document.getElementById("uxba").onclick = function()
{
var username = document.getElementById("asdzxcz").value;
//去除空格
username = username.trim();
alert("["+username+"]");
}
document.getElementById("backED").onclick = function()
{
window.history.back();
}
var arr = [];
var arr1 = [1,2,3,false,"abc",3.14];
//数组下表不会越界
arr1[7] = "op";
//push会在数组末尾添加一个元素
arr1.push(10);
//提取全部元素,并用放入的内容链接为字符串
// alert(arr1.join("-"));
//遍历输出,并不会数组下标越界
// for (var i = 0; i < arr1.length; i++) {
// alert(arr1[i]);
// }
//弹出末尾的元素,并从数组删除这个元素
// alert(arr1.pop());
//JS的数组可以自动模拟栈数据结构,后进先出,先进后出
//push就是压栈,pop就是弹栈
//reverse()就是反转
arr1.reverse();
// alert(arr1.join("-"))
}
</script>
<div>
<!-- QQ号正则表达式^[1-9][0-9]{4,}$
[1-9]表示一到九的数字出现一次 -->
<!-- [A-Za-z0-9]表示任意一个字符出现一次 -->
<!-- [A-Za-z0-9-+]表示以上的任意一个字符 -->
<!-- 前面的-表示区间,单独出现则表示符号减号 -->
<input type="text" id="asdzxcz"/>
<input type="button" value="获取用户名" id="uxba"/>
</div>
<input type="button" value="打开百度(新窗口)" id="Baidu"/>
<input type="button" value="打开百度(当前窗口)" id="Baidu1"/>
<input type="button" value="打开百度(新窗口)" id="Baidu2"/>
<input type="button" value="打开百度(父窗口)" id="Baidu3"/>
<input type="button" value="打开百度(顶级窗口)" id="Baidu4"/>
<input type="button" value="new" id="openED"/>
<input type="button" value="后退" id="backED"/>
</body>
</html>JS效果
window.onload = function()
{
document.getElementById("btnm").onclick = function()
{
//设置div的内容
var divElt = document.getElementById("div1");
//innerHtml和innerText不是代码,是属性,和我们设置text的value原理相同
//innerHtml会把后面的字符串视为html代码,innerText视为字符串
divElt.innerHTML = "<font color='red'>哈哈哈哈哈哈哈哈哈</font>";
divElt.innerText = "<font color='red'>哈哈哈哈哈哈哈哈哈</font>";
}
document.getElementById("password").onkeydown = function(event,b)//局部变量
{
//获取键值
//回车键键值是13,ESC是27
//对于键盘事件来说,他都有keyCode属性用来获取键值
if(event.keyCode === 13)
{
//识别到回车键位提示正在登录
alert("正在登录")
}
}
document.getElementById("myForm").onsubmit = function()
{
alert("正在登录")
}
document.getElementById("auto").onclick = function()
{
var ui = [false,true,1,2,"abc",3.14];
for(var i = 0; i < ui.length; i++)
{
alert(ui[i]);
}
for(var i in ui)
{
//这个var i不是数组的元素,而是数组的下标
alert(i);//显示都是下标的index
alert(ui[i]);
}
}
document.getElementById("tyo").onclick = function()
{
User = function(username,password)
{
this.username = username;
this.password = password;
}
var u = new User("张三","12345");
alert(u["username"] + "," + u["password"]);
//这个用在数组上是角标index,用在对象上,是对象的属性名,返回字符串
for(var value in u)
{
//属性名是一个字符串
alert(value);
//本身就是一个字符串,直接放进去即可
alert(u[value]);
}
with(u)
{
//这种方式仅作了解,不要用尽量,不能所见即所得
alert(username + "," + password);
}
}
}
function vars()
{
alert("1");
}