节点控制隔行换色

节点控制隔行换色

1.根据id获取指定元素信息 btn

var btn = document.getElementById("btn")

2.给btn按钮注册点击事件

btn.onclick = function(){     

3.事件触发时获取 ul

var uu = document.getElementById("uu")

4.通过ul获取ul下的所有的子节点

var list = uu.childNodes;

5.打印ul中的第一个子节点的节点名称为

console.log(list[0].nodeName)//#text
console.log(list[1].nodeName)//LI

6.打印ul中子节点的值

console.log(list[0].nodeValue)//
console.log(list[1].nodeValue)//null

7.打印ul中子节点的节点类型

console.log(list[0].nodeType)//3 -- 文本
console.log(list[1].nodeType)//1 -- 元素
console.log(list)			

8. 定义一个本地变量 count 记录 li的次数

var count = 0;
for(var i = 0; i<list.length;i++){
// 判断这个节点是不是一个元素节点
if(list[i].nodeType == 1 && list[i].nodeName == "LI"){
// list[i].style.backgroundColor="pink"
// 判断li当前是偶数还是奇数，偶数：粉色  奇数:蓝色
						list[i].style.backgroundColor=count%2 == 0?"pink":"cyan",
// 没执行进if一次 则count+1
count++;
		}
	}
}

tab切换

1.获取最外层div

var box = document.getElementById("box")

2.获取头部div

var hd = box.getElementsByTagName("div")[0]

3.获取主体div

var bd = box.getElementsByTagName("div")[1]

4.获取所有的li

var list = bd.getElementsByTagName("li")

5. 获取所有span

var spans = hd.getElementsByTagName("span")
// console.log(list,spans,hd,bd)

6.循环遍历span 注册点击事件

for(var i = 0; i < spans.length;i++){

7.给span设置属性

spans[i].setAttribute("index",i)
spans[i].onclick = function(){

8.第一件事：将所有的span颜色设置为粉色 选中的span设置为紫色

for(var j = 0; j < spans.length;j++){						spans[j].removeAttribute("class")
}
this.className = "current"

9.获取属性值

var num = this.getAttribute("index")
console.log(num)

10.第二件事：将所有的li设置为display：none 选中的设置为display：block

for(var k = 0; k < list.length;k++){
list[k].removeAttribute("class")
}
list[num].className = "current"
		}
}

鼠标拖动

1.拖动的元素：box
拖动的过程
1- 当鼠标在拖拽元素时按下，开始拖拽 onmousedown
2- 当鼠标拖拽元素时，元素跟着鼠标移动 onmousemove
3- 当鼠标松开时，元素固定到当前位置 onmouseup

2.获取box

var box = document.getElementById("box")

3.注册鼠标按下事件

box.onmousedown = function(event){
// console.log("down")
// 兼容浏览器
event = event || window.event

4.事件触发的坐标点

var x = event.clientX
var y = event.clientY		
console.log(x,y)

5.获取当前div元素的水平与垂直的偏移量

var l = box.offsetLeft
var t = box.offsetTop
console.log(l,t)				

6.获取div偏移量

var x1 = x - l
var y1 = y - t

7.为document文档绑定事件

document.onmousemove = function(event){
event = event || window.event
var x2 = event.clientX - x1
var y2 = event.clientY - y1
console.log(event.clientX)
box.style.left = x2+"px"
box.style.top = y2+"px"
}
			
document.onmouseup = function(){
// 取消document的onmousemove事件
document.onmousemove = null
// 取消document的onmouseup事件
document.onmouseup = null
    }			
}
			
// box.onmousemove = function(){
// 	console.log("move")
// }
			
// box.onmouseup = function(){
// 	console.log("up")
// }

拖动

1.拖拽box1元素
* - 拖拽的流程
* 1.当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
* 2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
* 3.当鼠标松开时，被拖拽元素固定在当前位置 onmouseup

2.获取box1

var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");

3. 为box1绑定一个鼠标按下事件
   //当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown

box1.onmousedown = function(event){

4.设置box1捕获所有鼠标按下的事件
setCapture()
* - 只有IE支持，但是在火狐中调用时不会报错，
* 而如果使用chrome调用，会报错

if(box1.setCapture){
box1.setCapture();
}

box1.setCapture && box1.setCapture();
event = event || window.event;

5.div的偏移量 鼠标.clentX - 元素.offsetLeft
div的偏移量 鼠标.clentY - 元素.offsetTop

var ol = event.clientX - box1.offsetLeft;
var ot = event.clientY - box1.offsetTop;				

6.为document绑定一个onmousemove事件

document.onmousemove = function(event){
event = event || window.event;

7.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
获取鼠标的坐标

var left = event.clientX - ol;
var top = event.clientY - ot;				

8.修改box1的位置

box1.style.left = left+"px";
box1.style.top = top+"px";
};

9.为document绑定一个鼠标松开事件

document.onmouseup = function(){

10.当鼠标松开时，被拖拽元素固定在当前位置 onmouseup取消document的onmousemove事件

document.onmousemove = null;

11.取消document的onmouseup事件

document.onmouseup = null;

12.当鼠标松开时，取消对事件的捕获

box1.releaseCapture && box1.releaseCapture();
};

*当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，

• 此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，
• 如果不希望发生这个行为，则可以通过return false来取消默认行为
• 但是这招对IE8不起作用
  return false;

键盘事件

1.onkeydowm 键盘按下事件
onkeyup 键盘抬起事件

window.onload = function(){
  document.onkeydown = function(event){
    event = event || window.event
    console.log(event)
    console.log(event.ctrlKey)
    
if(event.keyCode == 13){
	alert("这是一个回车事件")
}
					
// 判断y是否搭配了ctrl键
if(event.keyCode == 89 && event.ctrlKey){
	alert("你按了ctrl")
		}
	}
}