各种API以及事件初识——笔记
1.outerHTML/ innerText / innerHTML
innerHTML
将元素中所有的内容都获取到 包括HTML标签 但是不包括自身标签
innerText
将元素的内容获取出来不包括HTML标签
outerHTML
将自身以及子元素所有的内容都获取出来 包括HTML标签 包括自身标签
<body ><div id="d">老王<span>住你隔壁</span></div></body>
</html>
<script>var x = document.getElementById("d");console.log(x.innerHTML);console.log(x.innerText);console.log(x.outerHTML);
</script>
自定义属性及getAttribute/setAttribute方法
<div id="d"></div>
//setAttribute("属性名称","属性值名称")
//getAttribute("属性名称") : 返回属性名称对应的属性值
//我们可以通过setAttribute设置自定义属性
var d = document.getElementById("d");d.setAttribute("heihei",123);document.write(d.getAttribute("heihei"));
获取非行内样式(兼容问题)
行内样式
行内样式就是卸载标签体内的样式
非行内样式
非行内样式就是指不是写在标签内的样式
<div id="box" style="color: red;"> </div>
var d = document.getElementById("box");//获取行内样式
document.write(d.style.color);
#box{color: blue;
}
var d = document.getElementById("box");
//获取非行内样式
document.write(d.style.color); 返回空
----------------------------------------
#box{color: red;font-size: 22px;
}
//照抄 扩展 兼容性
var d = document.getElementById("box");
function getStyle(obj,attr){ //获取非行间样式,obj是对象,attr是值if(obj.currentStyle){ //针对ie获取非行间样式return obj.currentStyle[attr];}else{return getComputedStyle(obj,false)[attr]; //针对非ie};
};
document.write(getStyle(d,"color") + "</br>");
document.write(getStyle(d,"font-size"));
insertBefore:添加到一个节点前面
父节点:insertBefore(要添加的子节点,参照节点);
参照节点如果为null 那就和appendChild()一样
<html><head><meta charset="utf-8"><title></title></head><body><ul id="list"><li>槑槑</li><li>晶晶</li><li>叕叕</li></ul></body>
</html>
<script>var list = document.getElementById("list");var o = document.createElement("li");o.innerHTML = "淼淼"; //如果参数2位null,则和appendChild一样//list.insertBefore(o,null);list.insertBefore(o,list.children[2]);
</script>
offsetWidth/offsetHeight/offsetLeft/offsetTop
<style>*{margin: 0;padding: 0;}#big{border: 1px solid red;position: relative;height: 400px;width: 400px;}#small{border: 1px solid red;position: absolute;height: 100px;width: 100px;left: 80px;top: 70px;}</style></head><body><div id="big"><div id="small"></div></div></body>
</html>
<script>var d = document.getElementById("small");//只读document.write(d.offsetLeft + " " + d.offsetTop + "</br>");//这2是哪来的?document.write(d.offsetWidth + " " + d.offsetHeight);//d.style.left = 200 + "px";
style.left返回字符串 如20px, offsetLeft返回数值 如20
style.left读写,offsetLeft只读
style.left必须要事先定义,否则值为空
//style.height style.width style.top 也一样
window.onscroll事件
回到顶部案例
<body><div id="t"><p>111111111111111</p>....<p>111111111111111</p></div><button onclick="fun()">按钮</button></body>
</html>
<script>var _top = null;window.onscroll = function(){//兼容问题 获取滚动条移动的垂直距离_top = document.body.scrollTop || document.documentElement.scrollTop;console.log(_top);}function fun(){document.body.scrollTop = document.documentElement.scrollTop = 0;}
事件
- 事件对象
事件:对某一个元素的某种操作
事件对象:当某个事件触发时产生的对象,就是事件对象
event 使用前提,必须有事件,不同的事件产生的事件对象不同
事件对象的兼容 : var e = event || evt;
事件对象拥有改事件相关的属性和方法
Demo:
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><script type="text/javascript">//事件对象 eventdocument.onkeyup = function(evt){var e = evt || event;alert(e);}</script></body>
</html>
Demo: 小老虎跳一跳
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>#box{height: 100px;width: 100px;background: url(img/3.jpg);background-size: 100px 100px;position: absolute;left: 200px;top: 600px;}</style></head><body><div id="box" onclick="jump()"></div></body>
</html>
<script>var d = document.getElementById("box");function jump(){d.style.top = d.offsetTop - 200 + "px";setTimeout(function(){d.style.top = "600px";},2000);}
</script>
2.事件对象的属性
坐标属性
pageX / pageY :x相对于整个文档顶部和左侧的坐标。
clientX / clientY :相对于局部窗口的左侧和顶部的坐标
offsetX / offsetY : 相对于内部元素的距离左侧和顶部的坐标,常用于拖拽
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>*{margin: 0;padding: 0;}body{height: 1000px;}#div1{height: 200px;width: 200px;border: 1px solid red;position: absolute;left: 200px;}</style><script>document.onclick = function(evt){var e = evt || event;console.log("client" + e.clientX + "," + e.clientY);//只记录当前的局部页面算console.log("page" + e.pageX + "," + e.pageY);//从document页面算起...习惯上用pageconsole.log("offset" + e.offsetX + "," + e.offsetY);}</script></head><body><div id="div1"></div></body>
</html>
3.案例图片跟随(练习)
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>#myimg{height: 100px;width: 100px;position: absolute;background: url(img/clothes.jpg);background-size: 100px 100px;}</style></head><body><div id="myimg"></div></body>
</html>
<script>document.onmousemove = function(evt){//获取实var e = evt || event;var oImg = document.getElementById("myimg");//操作图片X和Y的位置oImg.style.left = e.pageX - oImg.offsetWidth/2 + "px";oImg.style.top = e.pageY -oImg.offsetHeight/2 + "px";}
</script>
4.键盘事件
onkeyup: 用户释放某一个按键时发生
onkeydown: 用户按下按键时发生,任何一个按键即可发生事件
onkeypress: 用户按下按键,并且产生一个字符时发生(意思就是说按ctrl这样的按键没有效果的)
事件对象的属性:
keyCode: 获取键盘按键值 字母 对应其ASCII值识别
A:65 a:97 0:48 回车:13
【注意】:keyPress 的ctrl+回车返回值为10
document.onkeypress = function(evt){var e = evt || event;if(e.keyCode == 13 || e.keyCode == 10 && e.ctrlKey){alert("send");}}
ctrlKey:返回当事件被触发时,“Ctrl” 是否被按下,返回值为true or false
【注意】:键盘检测兼容写方法
var key = e.keyCode || e.which || e.charCode;
各种API以及事件初识——笔记相关推荐
- 微信小程序-常用API开发技巧学习笔记
常用API开发技巧学习笔记 第一章 认识微信小程序 前后端分离的开发方式 小程序的特点 小程序对开发者的影响 学习小程序需要的基础 第二章 小程序环境搭建与开发工具介绍 小程序开发环境 没有小程序号对 ...
- 迷你世界api 系统事件
迷你世界api 系统事件 游戏活动管理 只需添加需要监视的事件,而无需创建事件对象,如下所示: --Game Event--- ScriptSupportEvent:registerEvent([=[ ...
- HTML标签 初识笔记(二)
HTML标签 初识笔记(二) hello world 我是前小白,我是一名平凡的小白级前端工程师. HTML 元素介绍 一.meta 元素 charset:网页字符编码 < meta chars ...
- Javascript常用API及事件原理相关笔记(一)
1.定义Date日期对象的四种方式及对日期对象进行操作 <!DOCTYPE html> <html lang="en"> <head><m ...
- 笔记--jQuery常用API,事件,其他方法
1. jQuery 选择器 1.1 jQuery 基础选择器 原生js获取元素方式很多,很杂,而且兼容性情况不一致,因此jQuery给我们做了封装,使获取元素统一标准. 1.2 jQuery 层级选择 ...
- Microsoft SignalR Map Controller具有页面可见性API和事件模糊功能,可映射文档管理系统(DMS)中的用户交互
介绍 信息技术已成为企业中的战略因素,在业务流程中提供了强大的支持[6].当前,来自多个部门的技术人员的使用直接影响了所获得的组织成果[3].管理文档的能力已成为管理业务知识必不可少的工具[9].在这 ...
- Jquery第二篇【选择器、DOM相关API、事件API】
tags: Jquery 前言 前面已经介绍过了Jquery这门语言,其实就是一个javaScript的库...能够简化我们书写的代码....本博文主要讲解使用Jquery定位HTML控件[定位控件就 ...
- ebay的api的开发技术笔记
使用eBay API基本步骤介绍 要开始使用eBay API,需要如下基本步骤: 1. 注册开发帐号: https://developer.ebay.com/join/Default.aspx ...
- Lumerical Python API学习之补充笔记
一.笔记1 1.1.关于SYS 在导入之前添加 Python代码解释 当我们导入一个模块时: import xxx ,默认情况下python解释器会搜索当前目录.已安装的内置模块和第三方模块. 搜索路 ...
- OpenCV 3 Tracking API目标跟踪学习笔记——定义、物体跟踪常用算法、demo
今天开始接触目标跟踪 本文翻译自https://www.learnopencv.com/object-tracking-using-opencv-cpp-python/#opencv-tracking ...
最新文章
- 云计算、大数据、物联网等IT技术发展趋势
- xcode6.3配置svn,详情教程,小白戳进来。
- oculus ios学习资料整理
- 中国新能源重卡行业十四五规划及投资可行性研究报告2022-2028年版
- python37降到36原来的包还可以用吗_【lc刷题】36/37 有效的数独/解数独(143-144/300)...
- rosdep update 报错: File “/usr/lib/python2.7/dist-packages/pkg_resources/__init__.py“, line 829
- python修改html表格,使用styles和css更改pandas dataframe html表python中...
- 什么是AES算法?(整合版)
- java api限流_Java 9:流API的增强
- 服务器系统巡检记录表,服务器月度巡检记录
- Win7下如何挂载NFS共享目录
- 8086 寻址方式_8086微处理器的不同寻址模式
- linux csi驱动添加,CSI接口Camera驱动学习
- Qt中对main.cpp的代码解释
- 解决gensim报错AttributeError: type object ‘Word2Vec‘ has no attribute ‘load_word2vec_format‘
- 计算机信息管理是学什么课程设计,毕业论文计算机专业学生信息管理系统(数据库课程设计)...
- 在学习时,遇到in module ssbuild. File is included in 4 contexts
- oracle服务名XDB_Oracle XDB和XPT
- maven多模块编译子包
- Vue活动倒计时的功能