目录
一、js事件
事件源:当前所操作的元素(标签
)
事件:事件的状态
事件处理函数:监听到触发事件之后的操作
案例:
1.添加事件,方式一实现点击按钮后弹框
2.添加事件,方式二实现双击按钮后弹框
3.添加事件,方式三实现鼠标移入
div
标签后在页面实现鼠标移入,移出
div
标签后在页面显示鼠标移出
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js事件</title>
</head>
<body>
<!-- 按钮1 -->
<input type="submit" onclick="dianji()" value="点击1"/>
<!-- 按钮2 -->
<button id="btn1">点击2</button>
<!-- 按钮3 -->
<div id="div1" style="width: 100px;height: 100px;background-color: #00FFFF;">div标签</div>
<span id="sp"></span>
</body>
</html>
<script type="text/javascript">
//方式一
function dianji(){
alert("点击弹窗");
}
//方式二
var btn1 = document.getElementById("btn1");
btn1.ondblclick = function(){
alert("双击弹窗");
}
//方式三
var div1 = document.getElementById("div1");
var move = document.getElementById("move");
var out = document.getElementById("out");
div1.addEventListener('mousemove',function(){
sp.innerHTML="鼠标移入div";
})
div1.addEventListener('mouseout',function(){
sp.innerHTML="鼠标移出div";
})
</script>
(一)常见的事件
事件
|
描述
|
onclick
| 点击事件 |
ondblclick
| 双击事件 |
onmouseover
| 鼠标移入 |
onmouseout
| 鼠标移出 |
onfocus
| 获取焦点 |
onblur
| 失去焦点 |
(二)事件的应用
案例:
1.在页面
A
输入用户名,跳转至页面
B
显示所输入的内容
2.找到一张图片,鼠标移入,图片变大,鼠标移出,回归原大小
3.判断两次输入的是否一致
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js应用</title>
<form action="../htmlDemo02/succeed.html" method="get">
<input name="username" type="text" placeholder="请输入用户名"/>
<input type="submit" value="登录"/><br />
<input id="p1" type="text" placeholder="请输入密码"/><br />
<input id="p2" type="text" placeholder="请再次输入密码"/>
<span id="sp"></span>
</form>
<img id="i1" src="../img/right.png" />
</body>
</head>
<body>
</html>
<script type="text/javascript">
var i1 = document.getElementById("i1");
i1.onmouseover = function(){
i1.style.width="100px";
}
i1.onmouseout = function(){
i1.style.width="37px";
}
var p1 = document.getElementById("p1");
var p2 = document.getElementById("p2");
var sp = document.getElementById("sp");
p2.addEventListener('blur',function(){
if(p1.value == p2.value){
sp.innerHTML="两次密码一致";
sp.style.color="red";
}else{
sp.innerHTML="两次密码不一致";
sp.style.color="red";
}
})
</script>
二、DOM编程
DOM(
Document Object Model):
文档对象模型
(一)DOM节点的分类
1.整个文档为文档节点
2.所有的标签为元素节点
3.所有的属性为属性节点
4.所有的文本内容为文本节点
5.所有的注释为注释节点
使用dom
就是为了:
1.获取节点
2.更新节点
3.删除节点
4.添加节点
(二)获取节点
1.通过
id获取节点:getElementBYId()
2.通过标签获取节点,获取的是数组:getElementsByTagName()
3.
通过
class
获取节点,获取的是数组 :
getElementsByClassName()
4.
通过父标签获取节点,获取的是数组 :
getElementById()、
children
5.通过同胞获取节点:
getElementById("sp1") 、
nextElementSibling 、
previousElementSibling
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取节点</title>
</head>
<body>
<span>111</span>
<span>222</span>
<span>333</span>
<div id="div1">hhhhhh</div>
<div class="div2">111</div>
<div class="div2">222</div>
<div class="div2">333</div>
<div id="div3">
ddd
<p>000</p>
<p>888</p>
<span id="sp1">
111
<p>kkk</p>
</span>
<span>222</span>
<span>333</span>
</div>
</body>
</html>
<script type="text/javascript">
// 通过标签获取节点,获取的是数组
var tags = document.getElementsByTagName("span");
console.log(tags);
// 通过id获取节点
var div1 = document.getElementById("div1");
console.log(div1);
// 通过class获取节点,获取的是数组
var cla = document.getElementsByClassName("div2");
console.log(cla);
// 通过父标签获取节点,获取的是数组
var div3 = document.getElementById("div3");
var childs = div3.children;
console.log(childs);
// 通过同胞获取节点
var sp1 = document.getElementById("sp1");
var next = sp1.nextElementSibling;
console.log(next);
var previous = sp1.previousElementSibling;
console.log(previous);
</script>
(三)更新节点
1.更新样式属性 :
节点.style.属性名=属性值
2.
更新文本节点
节点.innerHTML=""
节点.innerText=""
3.
更新属性节点
节点.setAttribute("属性名","属性值")
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>更新</title>
<style type="text/css">
.div2{
width: 100px;
height: 100px;
background-color: #A9A9A9;
color: #228B22;
font-size: 30px;
}
</style>
</head>
<body>
<div id="div1">111</div>
<span id="sp1"></span>
</body>
</html>
<script type="text/javascript">
// 更新样式属性
div1.style.color="blue";
div1.style.fontSize="20px";
// 更新文本节点
sp1.innerHTML="<a href='../htmlDemo/chensen.html' target='_blank'>陈森</a>";
// sp1.innerText="<a href='#'>陈森</a>";
// 更新属性节点
div1.setAttribute("class","div2");
</script>
(四)删除节点
1.通过父节点删除子节点
2.删除节点本身
(五)添加节点
1.添加元素节点
createElement(标签名)
2.
添加文本节点
createTextNode(文本内容)
案例:
1.
通过删除节点和添加节点,实现在输入框获取焦点后,显示提示文字已获取焦点,在输入框失去焦点后,显示提示文字已失去焦点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>删除、添加节点</title>
</head>
<body>
<div id="div1">
<input id="t1" type="text"/>
</div>
</body>
</html>
<script type="text/javascript">
var t1 = document.getElementById("t1");
var div1 = document.getElementById("div1");
// 添加元素节点
var sp = document.createElement("span");
div1.appendChild(sp);
t1.onfocus = function(){
sp.innerHTML="已获取焦点";
}
t1.onblur = function(){
sp.innerHTML="已失去焦点";
}
</script>
案例:
实现全选和全不选
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全选全不选</title>
</head>
<body>
全选\全不选<input type="checkbox" id="checkAll"/><br />
<input type="checkbox" name="student"/>小森<br />
<input type="checkbox" name="student"/>啊森<br />
<input type="checkbox" name="student"/>陈森<br />
</body>
</html>
<script type="text/javascript">
var checkAll = document.getElementById("checkAll");
var stu = document.getElementsByName("student");
checkAll.onclick = function(){
for(i=0;i<stu.length;i++){
stu[i].checked=checkAll.checked;
}
}
</script>