html基础 持续更新
2019-06-14 本文已影响0人
wkmx
html js 基础
js 常见获取dom对象的方法
- getElementById()
- getElementByName()
- getElementByTagName()
- getElementByClassName()
getElementById 根据ID获取元素
getElementsByTagName 通过标签名获取元素, 返回 NodeList
getElementByClassName 根据类名获取, 返回 HTMLCollection 类数组类型
添加事件的常用方法
1. 使用 onlock 属性 (不推荐, 不方便管理)
<button onclick="clickHandler(event)">按钮</button>
2. 给 dom 对象添加 onclick 方法
document.getElementById("btn1").onclick = function() {}
3. 事件监听绑定 click 事件
document.getElementById("id").addEventListener("click", function() {});
js 后端确认框
var dels = document.getElementByClassName('btn btn-outline-danger'); // 通过 类名 获取一个 nodeList, 循环添加 onclick 方法
for (var i = 0; i < dels.length; i++) {
// dom 事件处理级别
dels[i].onclick = function() {
if (!confirm) {
return false; // 如果取消了, 返回false
}
}
// 事件监听绑定 click
dels[i].addEventListener("click", function() {
})
}
常见页面定时跳转
history.back(): 页面回退
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Skip</title>
</head>
<script type="text/javascript">
onload = function() {
setInterval(go, 1000);
var v = document.getElementById("backHref")
v.onclick = function() {
event()
}
}
var x = 3; // 使用全局变量保存时间
function go() {
x--;
if (x > 0) {
document.getElementById("sp").innerHTML = x;
} else {
event();
}
}
function event() {
history.back()
}
</script>
<body>
{{ .msg }} <span id="sp">3</span> <a id="backHref" href="#">点击立即返回</a>
</body>
</html>
{{.msg}} 后端模板渲染的时候需要提示的消息
页面跳转, 提示信息后, 三秒跳转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script type="text/javascript">
onload = function() {
setInterval(go, 1000);
var v = document.getElementById("backHref")
v.onclick = function() {
event()
}
}
var x = 3;
function go() {
x--;
if (x > 0) {
document.getElementById("sp").innerHTML = x;
} else {
event();
}
}
function event() {
location.href={{ .href }};
}
</script>
<body>
</body>
{{ .msg }}, <span id="sp">3</span> <a id="backHref" href="{{ .href }}">点击立即返回</a>
</html>
{{.msg}} 后端模板渲染的时候需要提示的消息, {{.href}} 需要跳转的地址
