DOM
DOM：Document Object Model(文档对象模型，对网页当中的节点进行增删改的过程。)HTML文档被当作一棵Dom树来看待
获取文本框value
<script type="text/javascript">javascript">
/*window.onload = function(){
//var btnObj = window.document.getElementById("btn");
var btnObj = document.getElementById("btn");
alert(btnObj);//[object HTMLInputElement]
}*/
window.onload = function(){
document.getElementById("btn").onclick = function(){
/*var usernameElt = document.getElementById("username");
alert(usernameElt.value)*/
//alert(document.getElementById("username").value);
//可以修改它的value
document.getElementById("username").value="zhangsan";
}
}
</script>
<!--<input type="button" id="btn" value="hello" />-->
<input type="text" id="username"/>
<input type="button" id="btn" value="获取文本框中的Value" />
<hr />
<!--下面这个js代码块注释掉就可以实现上面的功能-->
<script type="text/javascript">javascript">
window.onload = function(){
document.getElementById("setbtn").onclick = function(){
var u1 = document.getElementById("usename1").value;
document.getElementById("usename2").value = u1;
}
}
</script>
<input type="text" id="usename1" /><br />
<input type="text" id="usename2" /><br />
<input type="button" id="setbtn" value="把第一文本框中的内容赋值到第二个文本框中" />
<!--blur事件：失去焦点-->
<!--以下代码中的this代表的是当前input节点对象，this.value就是这个节点对象的value属性-->
<input type="text" onblur="window.alert(this.value)" />
innerText和innerHTML属性
相同点：都是设置元素内部的内容
不同点：
innerHTML会把后面的字符串当成一段html代码解释，并执行
innerText，即使后面是一段HTML代码，也只是将其当做普通的字符串来看待
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>innerHTML和InnerText操作div和span</title>
<style type="text/css">
#div1 {
background-color: aqua;
border: 1px solid blueviolet;
height: 200px;
width: 300px;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<script type="text/javascript">javascript">
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function(){
//获取div的内容
//第一：获取div对象
var div1 = document.getElementById("div1");
//第二：使用innerHTML属性来设置元素内部的内容
//
//div1.innerHTML = "adjgfgisag";
div1.innerHTML = "<font color='red'>用户名不能为空！</font>";//会执行HTML代码
//div1.innerText = "<font color='red'>用户名不能为空！</font>";//不会执行HTML代码
}
}
</script>
<input type="button" id="btn" value="设置div中的内容" />
<div id="div1"></div>
</body>
</html>
正则表达式：Regular Expression
用处：正则表达式主要用在字符串格式匹配方面
掌握什么？
第一：常见的正则表达式符号要认识
第二：简单的正则表达式要会写
第三：别人编写的正则表达式要能看懂。
第四：在JavaScript当中，怎么创建正则表达式对象！
第五：在JavaScript当中，正则表达式对象有那些方法!
第六：会搜索需要的正则表达式
怎么创建正则表达式对象，怎么调用正则表示式对象的方法？
第一种创建方式；
var regExp = /正则表达式/flags;
第二种创建方式：使用内置支持类RegExp
var regExp = new RegExp(“正则表达式”,“flags”); 关于flags:
g:全局匹配
i：忽略大小写
m：多行搜索
正则表达式对象的test()方法？
true/false = 正则表达式.test(用户填写的字符串)
true：字符串格式匹配成功
false:字符串格式匹配失败
<script type="text/javascript">javascript">
window.onload = function(){
document.getElementById("btn").onclick = function(){
var email = document.getElementById("email").value;
var regExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var ok = regExp.test(email);
if (!ok) {
document.getElementById("emailError").innerText = "邮箱地址不合法！"
}
document.getElementById("email").onfocus = function(){
document.getElementById("emailError").innerText = ""
}
}
}
</script>
<input type="text" id="email" />
<span id="emailError" style="color: red;font-size: 12px;"></span>
<input type="button" id="btn" value="验证邮箱" />
去除字符串前后空白
trim函数
<script type="text/javascript">javascript">
//低版本的IE浏览器不支持字符串trim()函数，怎么办？
//可以自己对String类扩展一个全新的trim()函数
String.prototype.trim = function(){
//去除当前字符串的前后空白
//在当前的方法中的this代表的就是当前字符串
return this.replace(/^\s+/,"").replace(/^\s+$/,"");
}
/*
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" value="" />
<input type="button" id="btn" value="获取用户名" />
js_169">js表单验证
用户名不能为空不能特殊字符串长度在4~16之间！使用js验证密码和确认密码保持一致！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<style type="text/css">
span {
color: red;
font-size: 12px;
}
</style>
</head>
<body>
<script type="text/javascript">javascript">
//给用户名绑定blur事件
window.onload = function(){
var usernameElt = document.getElementById("username");
var userError = document.getElementById("usernameError");
usernameElt.onblur = function(){
//获取用户名
var username = usernameElt.value;
//去除空白
username = username.trim();
if (username === "") {
//用户名为空
userError.innerText = "用户名不能为空";
} else{
//用户名不为空
//判断长度
if (username <4 || username >16) {
//用户名长度不够
userError.innerText = "用户名小于四或者大于16";
} else{
//长度合法
//继续判断是否含有特殊符号
var regExp = /^[A-Za-z0-9]+$/;
if (regExp.test(username)) {
//用户合法
} else{
userError.innerText = "用户名只能由数字和字母组成";
}
}
}
var regExp = /^[a-zA-Z][a-zA-Z0-9_]{3,15}$/;
if (!regExp.test(username)) {
userError.innerText = "用户名错误";
}
}
usernameElt.onfocus = function(){
//清空value
if (userError.innerText !="") {
usernameElt.value = "";
}
//清空span
userError.innerText = ""
}
//获取提示信息对象
var userpwdError = document.getElementById("userpwdError");
//获取确认密码框对象
var userpwdsElt = document.getElementById("userpwd2");
//绑定blur事件
userpwdsElt.onblur = function(){
//获取密码和确认密码
var pwdElt = document.getElementById("userpwd");
var userpwd = pwdElt.value;
var userpwd2 = userpwdsElt.value;
if (userpwd != userpwd2) {
//密码与确认密码不一致
userpwdError.innerText = "密码不一致"
} else{
//密码一致
}
}
userpwdsElt.onfocus = function(){
//清空value
if (userpwdError.innerText !="") {
userpwdsElt.value = "";
}
userpwdError.innerText = "";
}
//获取email信息框
var emailErrorSpan = document.getElementById("emailError");
//给email绑定blur事件
var emailElt = document.getElementById("email");
emailElt.onblur = function(){
var email = emailElt.value;
var regExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var ok = regExp.test(email);
if (!ok) {
emailErrorSpan.innerText = "邮箱格式错误！"
} else{
}
}
emailElt.onfocus = function(){
if (emailErrorSpan.innerText != "") {
emailElt.value = "";
}
emailErrorSpan.innerText = "";
}
//给提交按钮绑定鼠标点击事件
var submitBtnElt = document.getElementById("submitbtn");
submitBtnElt.onclick = function(){
//当所有表单项都是合法时 提交表单
//触发username的blur focus userpwdsElt的blur focus emailElt的blur focus
//不需要人工操作，使用纯js代码触发事件
usernameElt.blur();
usernameElt.focus();
userpwdsElt.blur();
userpwdsElt.focus();
emailElt.blur();
emailElt.focus();
if (userError.innerText == "" && userpwdError.innerText == "" && emailErrorSpan.innerText == "") {
//获取表单对象
var userFormElt = document.getElementById("userForm");
//可以在这里设置
//提交表单
userFormElt.submit();
}
}
}
</script>
<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="userpwd" id="userpwd" /><br />
确认密码：<input type="text" name="userpwd2" id="userpwd2"/><span id="userpwdError"></span><br />
邮箱：<input type="text" name="email" id="email" /><span id="emailError"></span><br />
<!--<input type="submit" value="注册" />-->
<input type="button" value="注册" id="submitbtn" />
<input type="reset" value="重置" />
</form>
</body>
</html>
网页时钟
关于JS中内置的支持类：Date 可以用来获取时间/日期
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页时钟</title>
</head>
<body>
<script type="text/javascript">javascript">
//获取系统当前时间
var nowTime = new Date();
//document.write(nowTime);
//转换成具有本地语言环境的日期格式
nowTime = nowTime.toLocaleString();
document.write(nowTime);
document.write("<br />")
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 />")
//重点：怎么获取毫秒数？(从1970年1月1日 00:00:00 000 到当前系统时间的总毫秒数)
//var times = t.getTime();
//document.write(times);//一般使用毫秒数当作时间戳，(timestamp)
document.write(new Date().getTime());
</script>
<script type="text/javascript">javascript">
function displayTimes(){
var time = new Date();
var strTime = time.toLocaleString();
var timeDivElt = document.getElementById("timeDiv");
timeDivElt.innerHTML = strTime;
}
//每隔一秒调用dispalyTimes()函数
function start(){
//从这行代码执行结束开始，则会不间断，每隔1000毫秒调用一次displayTimes()函数
v = window.setInterval("displayTimes()",1000);
}
function stop(){
window.clearInterval(v);
}
</script>
<br><br>
<input type="button" value="显示系统时间" onclick="start()" />
<input type="button" value="系统时间停止" onclick="stop()" />
<div id="timeDiv"></div>
</body>
</html>
内置支持类Array
<script type="text/javascript">javascript">
//创建长度为0的数组
var arr = [];
//alert(arr.length);
//数据类型随意
var arr2 = [1,1.11,3,false,"abc","你好"];
// alert(arr2.length);
//下标会越界吗
arr2[7] = "test0";//自动扩容
document.writeln();
//遍历
for (var i = 0; i < arr2.length; i++) {
document.writeln(arr2[i]+"<br />");
}
//另一种创建对象的方式
/*var a1 = new Array();
alert(a1.length);//0
var a2 = new Array(3);
alert(a2.length);//3
var a3 = new Array(2,3);
alert(a3.length);//2*/
var a =[1,2,5,4];
var str = a.join("-");
alert(str);
//push在数组末尾添加一个值
a.push(4)
alert(a.join("+"))
//将数组末尾的元素弹出(数组长度-1)
var endElt = a.pop();
alert(endElt);
alert(a.join("-"));
//注意：JS中的数组可以自动模拟栈数据结构：后进先出，先进后出原则
//push压栈
//pop弹栈
//反转数组
a.reverse();
alert(a.join("="))
</script>
正则表达式我其实也不懂会搜谁会踢一脚
