Js笔记(二)
- 注册事件
- void运算符
- Date
- DOM编程
- innerHTML innerTExt操作div和span
- 复选框的全选和取消全选
- 获取文本框的value
- 获取下拉列表中的value
- 练习：网页时钟
- 解析JSon动态生成表格
- BOM编程
- 窗口的开启和关闭
- alert和confirm方法
- 将窗口设置为顶级窗口
- 历史记录
- 发送请求的多种方式
- json对象
- eval函数
- 怎么创建json对象以及怎么访问json对象的属性
- json交换数据
- 正则表达式
- 创建正则表达式对象
- 表单验证
- 补充 JS中获取元素的三种方式
每年的毕业季又到了，祝福毕业生毕业快乐。前路漫长愿青春永辉煌!
之前写过几篇JavaScript的基础知识在JavaScript专栏中------>传送门.
注册事件
回调函数：
监听器负责调用，当事件发生之后，监听器回负责调用该函数。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script type="text/javascript">function sayHello(){alert('hello world')}</script><input type="button" value="hello" onclick="sayHello()">
</body>
</html>
在HTML中怎么根据id获取节点
使用document.getElementById获取
<body>
<input type="button" id="mybtn" value="按钮"/>
<script type="text/javascript">var = mybtnElt = document.getElementById("mybtn");console.log(mybtnElt)
</script>
</body>
注册事件的第二种方式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><input type="button" value="hello" id="hellobtn"><script type="text/javascript">function sum(){console.log("sum fun invoke")}var hellobtnElt = document.getElementById("hellobtn");//回调函数可以是一个匿名函数hellobtnElt.onclick = function(){console.log("回调匿名函数")}</script></body>
</html>
练习：捕捉回车键
所有的键盘事件对象有keycode属性，可以获取键值
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script type="text/javascript">window.onload = function(){document.getElementById("username"),onkeydown = function(y){if (y.keyCode == 13) {console.log("正在验证...");}}}</script>用户名:<input type="text" id="username"></body>
</html>
void运算符
语法格式
保留超链接的模式并且点击执行JS代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><a href="javascript:void(0)" onclick="alert('执行js代码')">要求保留超链接的模式并且惦记我执行一段JS代码</a>
</body>
</html>
点击超链接并不跳转
Array常用方法
- join
- pop
- push
- revers
Date
在JS中提供了一个函数toLOcaleString()，其实这个函数是Object中的
转换成具有本地语言环境的日期格式
new Date().getTime()获取时间戳
获取年：getFullyear
获取月：getMonth
获取日：getDate
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script type="text/javascript">var time = new Date();//获取系统当前时间的console.log(time)//转换成具有本地语言环境的日期格式var strTime = time.toLocaleString();console.log(strTime)//获取时间戳console.log(time.getTime())</script>
</body>
</html>
DOM编程
innerHTML innerTExt操作div和span
通过元素的innerHTML属性来设置内部的内容
innerHTML是属性，不是一个方法
innerHTML属性会将后面的字符串当作一段HTML代码解释并执行
innerText后面的字符串即使是一个HTML代码也不会当作HTML执行，只看作普通文本。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">#div1{background-color: burlywood;border: 1px solid red;width: 200px;height: 50px;}</style>
</head>
<body><script type="text/javascript">window.onload = function(){document.getElementById("btn").onclick = function(){var divElt = document.getElementById("div1")divElt.innerHTML = "用户名不能为空"}document.getElementById("spanbtn").onclick = function(){var spElt = document.getElementById("span1")spElt.innerText = "已设置span内容"}}</script><input type="button" id="btn" value="设置div的内容"><input type="button" id="spanbtn" value="设置span中的内容"><br><br><div id="div1"></div><span id="span1"></span>
</body>
</html>
复选框的全选和取消全选
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script type="text/javascript">window.onload = function(){//给ID绑定clickvar firstop = document.getElementById("firstChk")firstop.onclick = function(){//获取到所有复选框 var ahop = document.getElementsByName("ah")//遍历数组if (firstop.checked) {for(var i = 0; i < ahop.length; i ++){var ahck = ahop[i]ahck.checked = true;}}else{for(var i = 0; i < ahop.length; i ++){var ahck = ahop[i]ahck.checked = false;}}}}</script><input type="checkbox" id="firstChk">全选<br><input type="checkbox" name="ah" value="smoke">抽烟<br><input type="checkbox" name="ah" value="drink">喝酒<br><input type="checkbox" name="ah" value="firehair">烫头<br>
</body>
</html>
改良
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script type="text/javascript">window.onload = function(){//给ID绑定clickvar firstop = document.getElementById("firstChk")firstop.onclick = function(){//获取到所有复选框 var ahop = document.getElementsByName("ah")//判断按钮是否选中，并遍历数组firstop.onclick = function(){for(var i = 0; i < ahop.length; i++){ahop.checked = firstop.checked;}}//给每一个name==“ah”复选框绑定鼠标单击事件for(var i = 0;i < ahop.length; i++){ahop[i].onclick = function(){//控制第一个复选框的选中状态//所有的ahop复选框的总数量，如果和总选中的数量相同的时候，第一个复选框选中，反之取消var count = ahop.length;var checkCount = 0;//默认选中数量for(var i = 0; i< ahop.length; i++){if(ahop[i].checked){checkCount++;}}firstop.checked = (count == checkCount);}}}}</script><input type="checkbox" id="firstChk">全选<br><input type="checkbox" name="ah" value="smoke">抽烟<br><input type="checkbox" name="ah" value="drink">喝酒<br><input type="checkbox" name="ah" value="firehair">烫头<br>
</body>
</html>
获取文本框的value
文本框的value属性用来获取用户填写的信息
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script type="text/javascript">window.onload = function(){document.getElementById("btn").onclick = function(){var usernameElt = document.getElementById("username")var name = usernameElt.valuealert(name)}}</script>用户名：<input type="text" id="username"><br><input type="button" id="btn" value="获取用户名">
</body>
</html>
获取下拉列表中的value
第一种方式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script type="text/javascript"></script><select id="province" onchange="alert(this.value)"><option value="">请选择省份</option><option value="001">河北省</option><option value="002">河南省</option><option value="003">山东省</option></select>
</body>
</html>
第二种方式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script type="text/javascript">window.onload = function(){document.getElementById("province").onchange = function(){alert(this.value)}}</script><select id="province"><option value="">请选择省份</option><option value="001">河北省</option><option value="002">河南省</option><option value="003">山东省</option></select>
</body>
</html>
练习：网页时钟
使用两个方法
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval()方法可以停止调用函数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script type="text/javascript">window.onload = function(){document.getElementById("displayTimeBtn").onclick = function(){//每隔1s调用一次displayTime函数//返回值是一个可以取消周期性调用的valuev = window.setInterval("displayTime()", 1000)}document.getElementById("stopTime").onclick = function(){//停止周期性调用window.clearInterval(v)}}function displayTime(){var nowTime = new Date();document.getElementById("timediv").innerHTML = nowTime.toLocaleString();}</script><input type="button" value="显示系统当前时间" id="displayTimeBtn"><input type="button" value="时间停止" id="stopTime"><div id="timediv"></div>
</body>
</html>
解析JSon动态生成表格
拼接html的方式设置table的tbody
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>解析json动态生成表格</title>
</head>
<body><script type="text/javascript">var fromJava = "{\"total\" : 3,\"student\":[{\"name\":\"张三\",\"age\":20},{\"name\":\"李四\",\"age\":19},{\"name\":\"王五\",\"age\":26}]}"window.onload = function(){document.getElementById("displaybtn").onclick = function(){//解析上面的json格式的字符串，将解析出来的数据放到tbody当中//转化jsonn对象window.eval("var json = " + fromJava)//设置总记录条数document.getElementById("totalSpan").innerHTML = json.total//拼接HTMLvar studentArray = json.studentvar html = "";for(var i =0; i < studentArray.length; i++){var s = studentArray[i]html += "";html += ""+(i+1)+" ";html += ""+s.name+" ";html += ""+s.age+" ";html += " ";}//将以上拼接的HTML设置到tbody中document.getElementById("stutbody").innerHTML = htmlconsole.log(html)}}</script><input type="button" id="displaybtn" value="查看学生信息列表"><hr><table border="1px" width="40%"><tr><th>序号</th><th>学生姓名</th><th>学生年龄</th></tr><tbody id="stutbody"></tbody></table>总记录条数：<span id="totalSpan">0</span>条
</body>
</html>
BOM编程
窗口的开启和关闭
window.open开启一个新窗口
window.close关闭窗口
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><input type="button" value="开启百度" onclick="window.open('http://www.baidu.com','_self')">
</body>
</html>
alert和confirm方法
alert弹出消息框
confirm确认框
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script type="text/javascript">function sayHello(){window.alert("hello world")}function del(){if(window.confirm("确认删除数据"))alert("数据正在删除中")}</script><input type="button" value="hello" onclick="sayHello()"><input type="button" value="删除" onclick="del()">
</body>
</html>
将窗口设置为顶级窗口
核心代码：
if (window.top != window.self) {window.top.location = window.self.location;}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><iframe src="000.html" width="500px" height="300px"></iframe>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script type="text/javascript">function setTop(){//console.log(true)if (window.top != window.self) {window.top.location = window.self.location;}}</script>000窗口<input type="button" value="设置顶级窗口" onclick="setTop()" >
</body>
</html>
历史记录
window.history.go() 前进
window.history.back() 后退
发送请求的多种方式
跳转页面可以通过多种方式：
直接在浏览器地址栏上写URL
可以点击超链接
提交表单
window.open(url,target)
js代码：window.location.href window.location document.location.href document.location
json对象
eval函数
eval函数可以将一个字符串当作一段js代码执行
怎么创建json对象以及怎么访问json对象的属性
什么是Json？
全称javascript objecct Notation JavaScript标记对象
是一种轻量级的数据交换格式
在JavaScript当中怎么定义JSON格式的对象，怎么访问对象的属性
语法格式：
var jsonObj = {"属性名" : 属性值,"属性名" : 属性值，"属性名" : 属性值,...
}
访问对象属性
两种方法
对象名.属性名
对象名[属性名]
var emp = {"empno" : 7369
}
console.log(emp.empno)
console.log(emp["empno"])
jason对象的属性可以是json对象
var user = {"username" : "张三"，"password" : "123""address" : {"city" : "深圳", "street" : "宝安"}
}
json交换数据
Java和JavaScript两个语言怎么交换数据呢
可以使用Json格式的字符串
json就是一种轻量级的数据交换格式
Java的JDBC连接数据库查询数据，然后将数据拼接成JSON格式的字符串，将JSON格式的字符串传给JavaScript，然后在JavaScript当中把json格式的字符串转换成json对象
这样就可以从对象中取数据了，这样就完成了数据的交换
正则表达式
常见的正则表达式符号
.匹配除换行符以外的任意字符
\w 匹配字母或数字或下划线或汉字
\s 匹配任意的空白符
\d 匹配数字
\b 匹配单词的开始或结束
^ 匹配字符串的开始
$ 匹配字符串的结束
//数量永远匹配的都是前面的那个字符出现的次数
* 重复零次或更多次 0-N次
+ 重复一次或更多次 1-N次
？重复零次或一次
{n} 重复n次或更多次 n次
{n,} 重复n次或更多次 n+次
{n,m} 重复n次到m次 n到m次
\W 匹配任意不是字母，数字，下划线，汉字的字符
\S 匹配任意不是空白符的字符
\D 匹配任意非数字的字符
\B 匹配不是单词开头或结束的位置
[^x] 匹配除x以外的任意字符
[^aeiou] 匹配除了aeiou这几个字母以外的任意字符
创建正则表达式对象
var regExp = /正则表达式/标记
标记：
- g全局
- i忽略大小写
- gi 全局扫描并忽略大小写
使用内置类
var = regExp = new RegExp(“正则表达式”，“标记”)
正则表达式有test方法 返回布尔值
字符串对象使用正则表达式 使用replace方法
表单验证
用户名不能为空
用户名必须在6-14位之间
用户名只能有数字和字母组成，不能含有其他符号（正则表达式）
密码和确认密码一致
统一失去焦点验证
错误提示信息统一在span标签中提示，并且要求字体12号红色
文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value
最终表单中所有项均合法方可提交
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>注册</title><style type="text/css">span{font-size: 12px;color: #FF3333;}</style>
</head>
<body><script type="text/javascript">var nameErrorSpan = document.getElementById("nameError")window.onload = function(){//给idusername节点绑定blur事件var usernameElt = document.getElementById("username")usernameElt.onblur = function(){//获取用户名var username = usernameElt.value//去除前后空白username = username.trim()//用户名不能为空if (username == "") {nameErrorSpan = document.getElementById("nameError")nameErrorSpan.innerHTML = "用户名不能为空"}else{//用户名不是空，继续判断长度是否合法if (username.length < 6 || username.length > 14) {nameErrorSpan.innerHTML = "用户名长度必须在6-14之间"}else{//用户名不为空，并且长度也合法，接下来继续判断用户名是否有特殊符号var regExp = /^[a-zA-Z0-9]+$/var ok = regExp.test(username)if (ok) {//合法}else{//不合法nameErrorSpan.innerHTML = "用户名只能由数字和字母组成"}}}} var onepwdErrorSpan = document.getElementById("pwdoneError")document.getElementById("userpwd").onblur = function(){var pwdoneError = document.getElementById("userpwd").valuevar onepwd = pwdoneError.trim()if (onepwd == "") {onepwdErrorSpan.innerHTML = "密码不能为空"}}var pwdErrorSpan = document.getElementById("pwdError")//确认密码失去焦点就验证document.getElementById("confirmpwd").onblur = function(){//获取密码var userpwd = document.getElementById("userpwd").value//获取确认米啊吗var confirmpwd = document.getElementById("confirmpwd").valueif (userpwd != confirmpwd) {pwdErrorSpan.innerHTML = "两次密码不一致"}else{pwdErrorSpan.innerHTML = ""}}document.getElementById("confirmpwd").onfocus = function(){pwdErrorSpan.innerHTML = ""} //提交时验证document.getElementById("regbtn").onclick = function(){//注意：要先获取才能失去焦点//验证用户名，让用户名文本框失去焦点//重点使用js代码触发事件usernameElt.focus() //触发文本框的获取焦点事件usernameElt.blur() //触发文本框的失去焦点事件//验证密码让确认密码失去焦点document.getElementById("confirmpwd").focus()document.getElementById("confirmpwd").blur()//当所有的span都为空时表示合法if (nameErrorSpan.innerHTML == "" && pwdErrorSpan.innerHTML == "") {//提交var formObj = document.getElementById("userForm")formObj.submit()}}}</script><form id="userForm">用户名<input type="text" name="username" id="username"><span id="nameError"></span><br>密码<input type="password" name="userpwd" id="userpwd"><span id="pwdoneError"></span><br>确认密码<input type="password" id="confirmpwd"><span id="pwdError"></span><br><input type="button" value="注册" id="regbtn"></form>
</body>
</html>
补充 JS中获取元素的三种方式
document.getElementById(“标签Id”)
document.getElementsByName(“标签name”)
document.getElementsByTagName(“标签”)
人生漫漫其修远兮，网安无止境。
一同前行，加油！
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！