2020-11-30节点隔行换色&&tab切换&&鼠标拖动&&拖动&&键盘事件

这篇博客详细介绍了如何使用JavaScript实现节点控制的隔行换色,点击按钮后列表项交替显示粉红色和青色。同时,展示了利用JavaScript实现tab切换的功能,点击不同的选项,内容区域相应切换。此外,还探讨了鼠标拖动元素的基本步骤,包括鼠标按下、移动和松开时元素的动态定位。最后,讲解了如何处理键盘事件,如监听回车键和组合键的触发。
摘要由CSDN通过智能技术生成

节点控制的隔行换色

<button id="btn">按钮</button>
		<ul id="uu">
			<li>清蒸晓阳</li>
			<li>红烧四个点</li>
			<li>爆炒小金昂</li>
			<li>水煮小安安</li>
			<li>油炸小康康</li>
			<li>炭烤刚子</li>
		</ul>
		<script type="text/javascript">
			// 根据id获取指定元素信息 btn
			var btn = document.getElementById("btn")
			// 给btn按钮注册点击事件
			btn.onclick = function(){
				// 事件触发时获取 ul
				var uu = document.getElementById("uu")
				// 通过ul获取ul下的所有的子节点
				var list = uu.childNodes;
				// 打印ul中的第一个子节点的节点名称为
				console.log(list[0].nodeName)//#text
				console.log(list[1].nodeName)//LI
				// 打印ul中子节点的值
				console.log(list[0].nodeValue)//
				console.log(list[1].nodeValue)//null
				// 打印ul中子节点的节点类型
				console.log(list[0].nodeType)//3 -- 文本
				console.log(list[1].nodeType)//1 -- 元素
				console.log(list)
				
				// 定义一个本地变量 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++;
					}
				}
			}
		</script>

tab切换

<style>
			* {
				margin: 0;
				padding: 0;
			}

			ul {
				list-style-type: none;
			}

			.box {
				width: 400px;
				height: 300px;
				border: 1px solid #ccc;
				margin: 100px auto;
				overflow: hidden;
			}

			.hd {
				height: 45px;
			}

			.hd span {
				display: inline-block;
				width: 90px;
				background-color: pink;
				line-height: 45px;
				text-align: center;
				cursor: pointer;
			}

			.hd span.current {
				background-color: purple;
			}

			.bd li {
				height: 255px;
				background-color: purple;
				display: none;
			}

			.bd li.current {
				display: block;
			}
		</style>

	</head>
	<body>
		<div class="box" id="box">
			<div class="hd">
				<span >体育</span>
				<span>娱乐</span>
				<span class="current">新闻</span>
				<span>综合</span>
			</div>
			<div class="bd">
				<ul>
					<li>我是体育模块</li>
					<li>我是娱乐模块</li>
					<li  class="current">我是新闻模块</li>
					<li>我是综合模块</li>
				</ul>
			</div>
		</div>
		<script>
			// 获取最外层div
			var box = document.getElementById("box")
			// 获取头部div
			var hd = box.getElementsByTagName("div")[0]
			// 获取主体div
			var bd = box.getElementsByTagName("div")[1]
			// 获取所有的li
			var list = bd.getElementsByTagName("li")
			// 获取所有span
			var spans = hd.getElementsByTagName("span")
			// console.log(list,spans,hd,bd)
			// 循环遍历span 注册点击事件
			for(var i = 0; i < spans.length;i++){
				// 给span设置属性
				spans[i].setAttribute("index",i)
				
				spans[i].onclick = function(){
					// 第一件事:将所有的span颜色设置为粉色 选中的span设置为紫色
					for(var j = 0; j < spans.length;j++){
						spans[j].removeAttribute("class")
					}
					this.className = "current"
					// 获取属性值
					var num = this.getAttribute("index")
					console.log(num)
					// 第二件事:将所有的li设置为display:none  选中的设置为display:block
					for(var k = 0; k < list.length;k++){
						list[k].removeAttribute("class")
					}
					list[num].className = "current"
				}
			}
		</script>

鼠标拖动

拖动的元素:box

拖动的过程

			1- 当鼠标在拖拽元素时按下,开始拖拽 onmousedown
			2- 当鼠标拖拽元素时,元素跟着鼠标移动 onmousemove
			3- 当鼠标松开时,元素固定到当前位置  onmouseup
<style type="text/css">
			div{
				width: 50px;
				height: 50px;
				background: blue;
				position: absolute;
			}
		</style>
		<div id="box">
			
		</div>
		<script type="text/javascript">
			// 获取box
			var box = document.getElementById("box")
			
			// 注册鼠标按下事件
			box.onmousedown = function(event){
				// console.log("down")
				// 兼容浏览器
				event = event || window.event
				
				// 事件触发的坐标点
				var x = event.clientX
				var y = event.clientY
				
				console.log(x,y)
				
				// 获取当前div元素的水平与垂直的偏移量
				var l = box.offsetLeft
				var t = box.offsetTop
				console.log(l,t)
				
				// 获取div偏移量 
				var x1 = x - l
				var y1 = y - t
				
				// 为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
				}
				
			}

拖动

拖拽box1元素

拖拽的流程

  •  1.当鼠标在被拖拽元素上按下时,开始拖拽  onmousedown
    
  •  2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
    
  •   3.当鼠标松开时,被拖拽元素固定在当前位置	onmouseup
    
<style type="text/css">
			
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
			
			#box2{
				width: 100px;
				height: 100px;
				background-color: yellow;
				position: absolute;
				
				left: 200px;
				top: 200px;
			}
			
		</style>
		<script type="text/javascript">
			
			window.onload = function(){
				//获取box1
				var box1 = document.getElementById("box1");
				var box2 = document.getElementById("box2");
				//为box1绑定一个鼠标按下事件
				//当鼠标在被拖拽元素上按下时,开始拖拽  onmousedown
				box1.onmousedown = function(event){
					
					//设置box1捕获所有鼠标按下的事件
					/*
					 * setCapture()
					 * 	- 只有IE支持,但是在火狐中调用时不会报错,
					 * 		而如果使用chrome调用,会报错
					 */
					/*if(box1.setCapture){
						box1.setCapture();
					}*/
					box1.setCapture && box1.setCapture();
					
					
					event = event || window.event;
					//div的偏移量 鼠标.clentX - 元素.offsetLeft
					//div的偏移量 鼠标.clentY - 元素.offsetTop
					var ol = event.clientX - box1.offsetLeft;
					var ot = event.clientY - box1.offsetTop;
					
					
					//为document绑定一个onmousemove事件
					document.onmousemove = function(event){
						event = event || window.event;
						//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
						//获取鼠标的坐标
						var left = event.clientX - ol;
						var top = event.clientY - ot;
						
						//修改box1的位置
						box1.style.left = left+"px";
						box1.style.top = top+"px";
						
					};
					
					//为document绑定一个鼠标松开事件
					document.onmouseup = function(){
						//当鼠标松开时,被拖拽元素固定在当前位置	onmouseup
						//取消document的onmousemove事件
						document.onmousemove = null;
						//取消document的onmouseup事件
						document.onmouseup = null;
						//当鼠标松开时,取消对事件的捕获
						box1.releaseCapture && box1.releaseCapture();
					};
					
					/*
					 * 当我们拖拽一个网页中的内容时,浏览器会默认去搜索引擎中搜索内容,
					 * 	此时会导致拖拽功能的异常,这个是浏览器提供的默认行为,
					 * 	如果不希望发生这个行为,则可以通过return false来取消默认行为
					 * 
					 * 但是这招对IE8不起作用
					 */
					return false;
					
				};
				
				
				
			};
			
			
		</script>
	</head>
	<body>
		
		我是一段文字
		
		<div id="box1"></div>
		
		<div id="box2"></div>

键盘事件

onkeydowm 键盘按下事件

onkeyup 键盘抬起事件

 <script type="text/javascript">
			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")
					}
				}
			}
		</script>
		<input type="text">
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值