9-11-12 h5总结~文档对象模型、点击事件

最新推荐文章于 2022-11-10 23:29:35 发布
最新推荐文章于 2022-11-10 23:29:35 发布
阅读量162 收藏
点赞数
分类专栏： h5知识
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hfyldx/article/details/100876698
版权

总结
1.点击事件
2.事件类型：onclick点击事件 onmouseover鼠标滑动 onmouseout 鼠标划出
onmousemove鼠标移动 onmouseup鼠标左边向上 onmousedown 鼠标左边向下
绑定事件:
三要素:绑定的事件,事件类型,事件处理函数
document object model:文档对象模型
DOM 树
节点类型：文本节点（text） 元素节点（标签里面的内容） 属性节点
获取元素(直接获取)
文档对象模型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>DOM(document object model:文档对象模型)</title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			li{
				list-style: none;
			
			}
			#nav{
				width:1000px ;
				height: 50px;
				border: 1px solid red;
				margin: 0 auto;
				
			}
			#nav li{
				float: left;
				width: 80px;
				height: 50px;
				text-align: center;
				line-height: 50px;
			}
		.box{
			width:1000px;
			height:500px;
			margin:0 auto;
			border: 1px solid red;
			
		}	
		.box div{
			display: none;
		}
			
		</style>
		
	</head>
	
	<body>
		
		<ul id="nav">
			<li></li>
			<li>导航2</li>
			<li>导航3</li>
			<li>导航4</li>
			<li>导航5</li>
			
			
		</ul>
		<div class="box">
			<div>我关注的内容</div>
			<div style="display: block;">推荐的内容</div>
			<div>导航1</div>
			<div>导航2</div>
			<div>导航3</div>
			
			
		</div>
		<!--<button id="btn">练习绑定事件<botton>-->
	<script>
		
		//先获取到要操作的元素
		var lis = document.getElementById('nav').children;
		var divs = document.getElementsByClassName('box')[0].children;
		  console.dir(lis[0])
		for( var i=0;i<lis.length;i++){
			//给节点对象添加一个属性，赋值为下标
			 lis[i].index = i;
			 //分别给每一个li绑定点击事件
			 lis[i].onclick = function(){
			 	//隐藏3个div
			 	for (var i=0;i<lis.length;i++) {
			 		divs[i].style.display ='none';
			 	}
			 	//对应的div显示
			 	divs[this.index].style.display= "block";
			 	
			 	

//           console.log(this.innerHTML);// 打印
//               this.innerHTML= 'nav'+this.index;
		    }
			 lis[i].onmousemove = function(){
			 	this.style.background='red';
			 }
			 lis[i].onmouseout = function(){
			 	this.style.background='#fff';
			 }
		}
//    var btn = document.getElementById('btn');	
//		  btn.onclick = function(){
//		alert('hello world');
//          console.log('onclick');
//		}
//			btn.onmouseover = function(){
//          this.style.background='red';
//		}
//			
//			btn.onmouseout = function(){
//         this.style.background='#fff';
//		}
//			btn.onmousemove = function(){
//			console.log('onmousemove');
//		}
//		var ul=document.getElementById('nav');
//		console.log(nav);
//		var lis= document.getElementsByTagName('li');
//		console.log(lis[0]);
		
//     通过节点关系获取 
       //console.log(nav.childNodes);
//      console.log(nav.children); 
//		console.log(nav.parentNode);
//		console.log(nav.firstElementChild.nextElementSibling);
		
		</script>
	</body>
</html>

在这里插入图片描述
点击事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>DOM</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        li{
            list-style: none;
        }
        .header{
            width: 1200px;
            height: 50px;
            margin: 0 auto;
            border: 1px solid #ccc;
        }
        .header button{
            float: left;
            width: 100px;
            height: 50px;
        }
        #nav{
            width: 1000px;
            height: 50px;
            float: left;
        }
        #nav li{
            width: 100px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            float: left;
            cursor: pointer;
        }
        .box{
            width: 1200px;
            height: 500px;
            margin: 0 auto;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="header">
        <button id="prev"><</button>
        <ul id="nav">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <button id="next">></button>
    </div>
    <div id="box" class="box">
        <p></p>
        <p></p>
        <p></p>
    </div>

    <script src="data.js"></script>
    <script>
        // 1、获取相关元素
        var prev = get('prev'),
            lis = get('nav').children,
            next = get('next'),
            ps = get('box').children,
            page = 0;
        // 2、初始在li中渲染前10个姓名
        for(var i=0;i<10;i++){
            lis[i].index = i;
            lis[i].innerHTML = data[i].name;
            // 3、给每个li绑定点击事件
            lis[i].onclick = function(){
                ps[0].innerHTML = data[page+this.index].name;
                ps[1].innerHTML = data[page+this.index].age;
                ps[2].innerHTML = data[page+this.index].xuehao;
            }
        }
        // 4、给左右button绑定点击事件
        // 右箭头事件
        next.onclick = function(){
            // 页数+10
            page += 10;
            if(page>data.length){
                page -= 10;
                return;
            }
            if(page===parseInt(data.length/10)*10){
                for(var i=0;i<data.length%10;i++){
                    lis[i].innerHTML = data[i+page].name;
                }
                for(var i=data.length%10;i<10;i++){
                    lis[i].innerHTML = '';
                }
            }else{
                // 十个li的内容变成当前页的
                for(var i=0;i<10;i++){
                    lis[i].innerHTML = data[i+page].name;
                }
            }
            // box里的内容是当前页的第一个人的
            ps[0].innerHTML = data[page].name;
            ps[1].innerHTML = data[page].age;
            ps[2].innerHTML = data[page].xuehao;
        }
        // 左箭头事件
        prev.onclick = function(){
            if(page == 0){
                return;
            }
            page -= 10;
            for(var i=0;i<10;i++){
                lis[i].innerHTML = data[i+page].name;
            }
            ps[0].innerHTML = data[page].name;
            ps[1].innerHTML = data[page].age;
            ps[2].innerHTML = data[page].xuehao;
        }
    </script>
</body>
</html>

JS

var str = `梁方圆
李宪文
覃荟卉
庞鑫
罗壬力
唐伟明
杨钧全
龙冠雄
曹英豪
蓝宇
黄冠博
刘帅
张思芸
赖文卓
欧军
李汉峰
蓝伟格
包仕富
卢华巨
潘俊龙
丘云祥
任朝锐
苏成林
蒋雄杰
莫凡浩
梁敏杰
黄瑞生
陆启扇
丁海峰
李金醒
莫培文
潘冠瑾
韦树冲
黎天敏
班琳
李念
韦荣崎
蒙家文
李锦清
周鹏超
付彩玉
黄筵淞
蒙伟明
梁月娥
许先漂
许政坤
欧大偲
郑庆
李德鑫
蓝剑源
李金辉
黄凤仪
管培嘉
庞礼民
农昊
曾海祥
陈福桔
陈柯宇
黄熠
黄奇锐
杨志鑫
黄贤才
陆海琦
许文怡
韦雨欣
梁昱
陈旻昊
吴乐裕
刘育辰
谢沛明
黄国庆
宁一健
吴文韬
黄志勇
龚鸿炜
李文龙
农建磊
黄珺雄
黄文轩
刘可凡
黄颉
唐洁
陈铭豪
李婉菊
陈柳延
黄良勇
陆师
尤朗
梁永杰
陆保哲
吴元豪
孙珂`;
function get(id){
    return document.getElementById(id);
}
function log(msg){
    console.log(msg)
}
var arr = str.split('\n');
var data = [];
for(var i=0;i<arr.length;i++){
    data.push({
        name:arr[i],
        age: 15+parseInt(Math.random()*10),
        xuehao: 123456789+parseInt(Math.random()*123456789),
    })
}
log(data);

在这里插入图片描述

小菜鸟码住
关注
专栏目录
移动端（H5）的点击事件、滑动事件和长按事件
BigFamer的博客
05-11 1万+
问题描述 接上篇文章的项目。项目中有一部分是单选题答题环节，每道题的选项有文字、图片或者图文结合的形式呈现，所以导致每道题的长度不一样，需要做触屏的点击、滑动和长按判断。没做判断之前滑动和点击事件是不能区分开的，每次想滑动时都会触发点击，从而引发非意愿选择。 问题分析 我们熟知的点击事件click会有300毫秒的延迟（有相关插件可以解决这个问题，有兴趣的小伙伴可以自己上网康康）。还有一种就是touch事件，touch事件包含了touchstart（手指触摸到屏幕时触发）、touchmove（手指在屏幕上移动
前端学习笔记 - Web APIs(DOM) 文档对象模型
fengxm0309的博客
10-11 627
Web APIs 和 JS API API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节 是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能 Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM ) 主要是针对于浏览
使用Keras 实现查看model weights .h5 文件的内容
09-16
主要介绍了使用Keras 实现查看model weights .h5 文件的内容，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
H5之12__触摸与单击：基本的事件处理
daozhongyang的专栏
12-04 8067
在HTML5中， 如果基于鼠标的界面互动是单击， 触摸界面的基本交互方式就是 轻触. 一. 轻触与单击有相似之处， 但是也有不同. 即使触摸设备(例如： 手机) 没有鼠标，它们的浏览器仍然会触发鼠标事件， click, mouseover, mousedown 和 mouseup 都还会被触发。 二 移动浏览器有四种类型的触摸事件 事件名称 描
Vue-事件
qq_56973906的博客
08-30 593
Vue的按键修饰符使用v-on:event.xxx，其中event为按键事件，xxx为键码或键码别名，如v-on:keydown.13或v-on:keydown.enter就表示：当按下回车键时才触发keydown方法。事件触发方法时的参数传递：可以传递普通参数，也可以传递事件对象$event,设置参数不传参时。与按键别名不同的是，修饰键和 keyup 事件一起用时，事件引发时必须按下正常的按键。可以看见点击div2时只冒泡了它的事件,点击div3时只冒泡了div3和div2。...
两数交换
weixin_44347489的博客
09-28 196
package Zuoye; public class Swap { /** @author 许先漂 */ private int num; public int getNum() { return num; } public Swap(int num) { super(); this.num = num; } public void setNum(int num) { this.nu...
前端面试题---（持续更新~~~）
weixin_42247630的博客
11-18 8360
HTML H5常见的块级元素和行内元素 1、行内元素 （a）—— 标签定义链接 （b）—— 字体加粗 （br）—— 换行 （i）—— 斜体文本效果 （img）—— 在网页中嵌入图片 （input）—— 输入框 （span）—— 组合文档中的行内元素 （small）——呈现小号字体效果 （big）——呈现大号字体效果 （sub）—— 定义下标文本 （sup）—— 定义上标文本 2、块级元素 （div）—— 定义文档中的分区或节 （dl）—— 定义列表 （dt）—— 定义列表中的项目 （dd）—— 定义列表中定
DOM——文档对象模型
qq_44700755的博客
11-10 1066
DOM 的概念 • 文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本，更新其内容、结构和 www 文档的风格(目前，HTML 和 XML 文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM 是一种基于树的 API 文档，它要求在处理过程中整个文档都表示在存储器中。 DOM 树 • DOM 又称为文档树模型 • -
15.DOM(文档对象模型)-自定义属性操作
Mr_LiuP的博客
02-22 1500
JavaScript -DOM 自定义属性操作
H5帮助文档
08-12
在H5中，JavaScript可以操作DOM（文档对象模型），响应用户事件，进行数据验证，甚至通过WebGL创建3D图形。学习JavaScript，你需要掌握变量、数据类型、函数、对象、闭包等基础概念，以及ES6（ECMAScript 6）的新...
H5缺省页（pc端禁止f12调试等操作）
06-17
3. **JavaScript**：JavaScript是一种广泛用于客户端Web开发的脚本语言，它可以直接在浏览器中执行，用于操控DOM（文档对象模型）、处理事件、进行AJAX异步通信等。在这里，JavaScript代码可以检测用户的键盘输入...
大转盘h5--jquery插件源码
06-26
2. **jQuery**: jQuery是JavaScript的一个轻量级库，它通过提供简洁的API来操作DOM（文档对象模型），处理事件，执行动画，以及进行异步请求。在这个项目中，jQuery主要用于转盘的动态效果实现，如旋转动画、点击...
APl DOM文档对象模型
m0_46978034的博客
12-07 242
文章目录一.DOM简介 一.DOM简介 1.什么是DOM 文档对象模型(简称DOM) 是W3C组织推荐的处理可扩展标记语言的标准编程接口 W3C已经定义来一系列DOM接口，通过这些DOM接口可以改变网页的内容、结构样式。 2.DOM 树 文档：一个页面就是一个文档，DOM 中使用 document 表示 元素：页面中的所有标签都是元素，DOM 中使用 element 表示 ...
四个方向的九九乘法表
weixin_44347489的博客
09-27 185
package com.bl; /** * @author 许先漂 @ClassName: multiplication @Description: 四个方向的九九乘法表 */ public class multiplication { public static void main(String[] args) { test1(); test2(); test3(); test4()...
考研复习-英语二真题考试题集-带答案
09-14
英语二考研真题复习资料，带答案版
2024中美独角兽公司发展分析报告.pdf
09-14
全球各大洲独角兽企业分布、中美独角兽企业对比（数量、估值、新增及退榜情况、行业分布、所在城市）、
C++ 中的异步编程模型是什么
09-14
在C++中，异步编程模型是处理并发任务、提高程序性能和响应性的关键技术。以下是C++中实现异步编程的几种主要方式： 每种异步编程模型都有其适用场景和优缺点。选择合适的模型可以提高代码的可读性、可维护性和性能。随着C++标准的不断发展，异步编程模型也在不断进化，为开发者提供了更多的工具和选择。 在实际开发中，应根据具体需求选择合适的异步编程模型。例如，对于简单的异步任务，回调函数可能是最直接的选择；而对于需要结构化错误处理和结果获取的复杂异步任务，std::async和std::future可能更合适；在需要高效资源管理的场景下，线程池是一个不错的选择；而对于需要编写大量异步代码的现代应用程序，协程提供了一种更简洁、更直观的解决方案。 总之，C++中的异步编程模型是多核和高并发环境下提高程序性能的重要工具。通过合理使用这些模型，开发者可以构建出更高效、更可靠的软件系统。
正则表达式Regex是一种文本模式.docx
最新发布
09-14
正则表达式（Regular Expression，简称Regex或Regexp）是一种文本模式，包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为"元字符"）。正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。正则表达式是强大的文本处理工具，广泛用于搜索、编辑或操作文本和数据。 基本组成 普通字符：大多数字符，包括所有大写和小写字母、所有数字、所有标点符号和一些其他符号，都是普通字符。正则表达式中的普通字符表示它们自身。例如，正则表达式test会匹配字符串"test"。 特殊字符（元字符）：一些字符在正则表达式中具有特殊的意义，如^、$、.、*、+、?、{、}、[、]、|、\等。这些特殊字符用于表示在搜索文本时要匹配的一个或多个字符。例如，.匹配除换行符之外的任何单个字符。 字符类：字符类允许你指定一组字符中的任何一个字符。例如，[abc]匹配"a"、"b"或"c"中的任意一个字符。你也可以使用范围，如[a-z]匹配任何小写字母。 预定义字符类：正则表达式提供了一些预定义字符类，用于匹配常见的字符集合。例如，\d匹配任何数字（等价于[0-9]），\s匹配任
基于struts+sqlserver网络购物系统毕业课程源码设计+论文资料
09-14
编号：150 系统功能： 展示网站最新的商品信息。 展示网站特价的商品信息。 为用户提供修改个人资料和查看在网站操作情况的平台。 提供用户在网站上购物的平台。 展示网站发布的公告信息。 展示商品的销量排行。 展示网站的友情链接信息。 对商品详细信息以及分类信息进行管理。 对用户基本资料、交易制度、消费情况及留言信息进行管理。 对用户提交的订单进行管理。 对管理员信息、网站公告信息、商业资讯信息及友情链接信息进行管理。 系统运行稳定，具有强大的数据处理能力。 操作注意事项 （1）本系统的用户名为：admin，密码为：admin （2）admin管理员的信息不能删除。 （3）用户注册登录后，可进行商品购买、商品信息查看以及订单查询操作。 （4）后台登陆地址：http://localhost:8080/WebShopping/bg-land.jsp。
.h5文件模型如何打开
08-24
### 回答1： ...总结起来，要打开.h5文件，首先安装相应的深度学习框架，然后导入相关库，并使用对应的函数加载.h5文件。通过这种方式，你就可以成功打开.h5文件，并使用其中的模型进行各种操作了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值