1.获取节点的方法
①getElementById:通过节点的ID属性获取标签
②getElementsByTagName:通过标签名字获取节点,返回一个类数组。
<body>
<li>我爱学习</li>
<li>我爱学习</li>
<li>我爱学习</li>
<li>我爱学习</li>
<li>我爱学习</li>
<li>我爱学习</li>
<li>我爱学习</li>
</body>
</html>
<script type="text/javascript">
var arr = document.getElementsByTagName("li");
//遍历数组元素,改变节点样式
for(var i =0;i<arr.length;i++){
arr[i].style.color = "red";
}
</script>
③getElementsByClassName:通过标签的class属性值获取相应节点,返回一个类数组。
<script type="text/javascript">
var arr = document.getElementsByClassName("cur");
for(var i= 0;i<arr.length;i++){
arr[i].style.background="blue";
}
</script>
④querySelector:可以通过任意的选择器获取第一个出现的节点。
<script type="text/javascript">
//使用标签选择器
var ele = document.querySelector("li");
ele.style.background = "red";
</script>
2.批量添加事件
即先获取全部节点,再用循环语句遍历数组。
<script type="text/javascript">
var liArr = document.getElementsByTagName('li');
for(var i = 0;i<liArr.length;i++){
+function(index){
//在每一个IIFE作用域里给元素绑定单击事件
liArr[index].onclick = function(){
//单击变红
liArr[index].style.color = "red";
}
}(i);
}
</script>
3.函数上下文this
概述:当用户触发了元素事件时,函数的上下文即为触发这个事件的元素。
上例代码的第二种实现方式:
<script type="text/javascript">
var liArr = document.getElementsByTagName('li');
for(var i = 0;i<liArr.length;i++){
liArr[i].onclick = function(){
this.style.color = "red";
}
}
</script>
4.事件对象
任意节点都可以绑定事件,当用户触发事件时,系统自动给事件处理函数传递实参,这个参数即为事件对象。
<script type="text/javascript">
var div = document.querySelector("div");
div.onclick = function (a) {
console.log(a);
}
</script>
5.获取鼠标位置
鼠标移动时事件对象的常见属性:
①screenX与screenY:指鼠标位置。注意坐标原点在电脑屏幕的左上角。
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
<script type="text/javascript">
var inner = document.querySelector('.inner');
//鼠标移动就会有打印出鼠标位置
document.onmousemove = function(event){
inner.innerHTML = "screenX"+event.screenX+"screenY"+event.screenY;
}
</script>
②pageX与pageY:作用也是获取鼠标位置,但原点是网页主题部分的左上角。
③clientX与clientY:获取鼠标位置,原点为可视区域的左上角,可视区域指当前网页所显示的部分。
④offsetX与offsetY:类似于pageX与pageY,但是原点会随元素的子元素变化。
6.实现拖拽效果
步骤:鼠标按下、拖拽、鼠标抬起。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo1</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.cur{
position: absolute;
width: 300px;
height: 200px;
background: url("./JS封面.jpg");
/*设置背景图尺寸大小*/
background-size: 300px 200px;
}
</style>
</head>
<body>
<div class="cur"></div>
</body>
</html>
<script type="text/javascript">
var div = document.querySelector('.cur');
//鼠标按下
div.onmousedown = function(event){
var startX = event.offsetX;
var startY = event.offsetY;
//鼠标按下后在整个网页中移动
document.onmousemove = function(event1){
//将元素进行拖拽
div.style.left = event1.clientX-startX+"px";
div.style.top = event1.clientY-startY+"px";
}
}
//鼠标抬起时将事件移除,即将函数制空。
document.onmouseup = function(){
document.onmousemove = null;
}
</script>