JS学习之路系列总结五行阵(此文犹如武林之中的易筋经,是你驰骋IT界的武功心法,学会JS五大阵法就学会了JS,博主建议先学三才阵)...
五行阵法: 内容,属性,样式,节点,事件【【为了便于记忆,减少占用大脑内存,我命名为JS心法为:道阵法,两仪阵法,三才阵法,四象阵法,五行阵法,只需记住阵法的关键字,即可搜索大脑中相应的内容,学会JS五大阵法即可学会JS】
内容:
innerHTML【支持HTML标签】
innerText 【不支持HTML标签,索引会显示h1】
value 【设置和获取input中的内容】
length 【数组/字符串的长度】
属性:
getAttribute("attrName")
setAttribute("attrName","attrValue")
样式:
style【只能获取行间样式,设置样式】
function CSS(obj){
if(){
return obj.currentStyle["styleName"];【 //IE8以下】
}else{
return getComputedStyle(obj,null)["styleName"];
}
}
节点:
element.nodeName 【可以返回元素节点,文本节点等】
element.tagName 【只能返回元素节点,文本节点返回undefined】
element.nodeValue 【属性设置或者返回指定节点的文本内容】
element.textContent 【属性设置或者返回指定节点的文本内容】
element.nodeType
节点类型主要有三种:元素节点,属性节点,文本节点
节点类型 nodeName nodeType nodeValue
元素 元素名称 1 null
属性 属性名称 2 属性值
文本 #text 3 文本内容(不包含html标签)
<div>
<p>123</p>
<p>456</p>
</div>
<script>
var div=document.querySelector("div");
var p=document.querySelector("p");
alert(p.nextElementSibling.innerHTML);
alert(p.nextSibling.innerHTML);//返回undefined【<p>123</p><p>456</p>时返回<P>456</p>】
console.log(p.parentNode);
console.log(p.parentElement);
console.log(div.childNodes);//返回length=4+元素节点[两个p标签]+文本节点[此时一个空格为一个文本节点]【标准】
console.log(div.children); //返回length=2=元素节点[两个p标签]【推荐使用】【野孩子】
console.log(div.firstChild); //返回#text
console.log(div.firstElementChild); //返回<p>123</p>
console.log(div.childNodes[0].nodeType);//返回3[文本节点nodeType==3]
console.log(div.children[0].nodeType); //返回1[元素节点nodeType==1]
【为了兼容IE8,div.firstChild.innerHTML必须先放在前边】
alert(div.firstChild.innerHTML || div.firstElementChild.innerHTML )
【firstElementChild这个方法在现代浏览器中兼容,但是在IE678中却没有这个方法
经测试children方法在所有主流浏览器中都兼容,包括IE678,并且它也能实现firstElementChild的功能】
parentElement/children/firstElementChild/lastElementChild/nextElementSibling/previousElementSibling【推荐使用】【野孩子适应能力强】
【childNodes[偶数]firstChild/lastChild/nextSibling/previousSibling都是空格文本节点】【标准】【IE8+】
parentNode/childNodes/firstChild/lastChild【父子关系】nextSibling/previousSibling【兄弟关系】【为了便于记忆,简称父子兄弟】
事件:
鼠标事件
onmousedown事件和onmouseup事件构成了onclick事件
onclick 当用户单击鼠标左键时
ondblclick 当用户双击鼠标左键时
oncontextmenu 在用户点击鼠标右键打开上下文菜单时触发
onmousedown 鼠标按钮被按下。
onmouseup 鼠标按键被松开。
onmouseover 鼠标移到某元素之上。
onmouseout 鼠标从某元素移开。
onmouseenter 当鼠标指针移动到元素上时触发。
onmouseleave 当鼠标指针移出元素时触发
onmousemove 鼠标被移动。
mouseover与mouseenter
不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。
只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。
mouseout与mouseleave
不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。
只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。
键盘事件
onkeydown 某个键盘按键被按下
onkeyup 某个键盘按键被松开
onkeypress 某个键盘按键按下并松开
onresize 事件会在窗口或框架被调整大小时发生。
onscroll 事件在元素滚动条在滚动时触发。
提示: 使用 CSS overflow 样式属性来创建元素的滚动条。
表单事件
onfocus 获取焦点时触发事件
onblur 失去焦点时触发事件
onfocusin 元素即将获取焦点时触发
onfocusout 元素即将失去焦点时触发
onchange 改变内容时触发( <input>, <keygen>, <select>, 和 <textarea>)
oninput 事件在用户输入时触发。
onreset 事件在表单被重置后触发。
onselect 事件会在文本框中的文本被选中时发生。
onsubmit 事件在表单提交时触发。 支持的 HTML 标签<form>, <keygen>
oncopy 事件在用户拷贝元素上的内容时触发。
oncut 事件在用户剪切元素的内容时触发。
onpaste 事件在用户向元素中粘贴文本时触发。
鼠标/键盘事件对象
属性
clientX 返回当事件被触发时,鼠标指针相对于浏览器页面的水平坐标。
clientY 返回当事件被触发时,鼠标指针相对于浏览器页面的垂直坐标。
screenX 返回当某个事件被触发时,鼠标指针的水平坐标。
screenY 返回当某个事件被触发时,鼠标指针的垂直坐标。
ctrlKey 返回当事件被触发时,"CTRL" 键是否被按下。
altKey 返回当事件被触发时,"ALT" 是否被按下。
shiftKey 返回当事件被触发时,"SHIFT" 键是否被按下。
button 返回当事件被触发时,哪个鼠标按钮被点击。
Location 返回按键在设备上的位置
charCode 返回onkeypress事件触发键值的字母代码。
key 在按下按键时返回按键的标识符。
keyCode 返回onkeypress事件触发的键的值的字符代码,或者 onkeydown 或 onkeyup 事件的键的代码。
which 返回onkeypress事件触发的键的值的字符代码,或者 onkeydown 或 onkeyup 事件的键的代码。
metaKey 返回当事件被触发时,"meta" 键是否被按下。
relatedTarget 返回与事件的目标节点相关的节点。
转载于:https://www.cnblogs.com/xingkongly/p/7668741.html
JS学习之路系列总结五行阵(此文犹如武林之中的易筋经,是你驰骋IT界的武功心法,学会JS五大阵法就学会了JS,博主建议先学三才阵)...相关推荐
- Vue.js学习详细课程系列--共32节(1 / 6)
Vue.js学习课程(1 / 6) 01. 什么是Vue.js? 什么是Vue.js? 官方网站 竞争对手 技术前提 开发工具 02. 从index.html开始 知识点 index.html vue ...
- Vue.js学习详细课程系列--共32节(4 / 6)
Vue.js学习课程(4 / 6) 19. 表单复选框 知识点 表单复选框绑定 20. 表单单选按钮 知识点 表单单选按钮绑定 21. 表单下拉框 知识点 表单下拉框绑定 22. 表单修饰符 知识点 ...
- Vue.js学习详细课程系列--共32节(2 / 6)
Vue.js学习课程(2 / 6) 07. 过滤器 知识点 filters 08. 计算属性 知识点 computed 09. 观察属性 知识点 $watch 10. 设定机算属性 知识点 sette ...
- JS学习之路,菜鸟总结的注意事项及错误更正
JavaScript 是一种面向对象的动态语言,它的语法来源于 Java 和 C,所以这两种语言的许多语法特性同样适 用于 JavaScript.需要注意的一个主要区别是 JavaScript 不支持 ...
- node.js学习之路(1)
node.js 属于后台语言,后台语言还有php,java等. 优势:1.性能好 node.js VS php 86倍 2.跟前台JS配合方便 3.node.js便于前端学习 https:// ...
- Three.js 学习之路(一)
1.一个友好的编辑器可以提高工作效率,webstrom,vscode是开发three.js的不错选择. 2.快速学习Three.js,可以从官网https://threejs.org/ 下载源码,查阅 ...
- Node.js学习之路--npm包管理工具操作汇总
因为在学习使用Express(第三方Web开发框架)时需要下载这个包,所以使用npm包管理工具这个相关的操作,现在将其相关的操作进行汇总. npm命令在cmd或者powershell中进行;注意:使用 ...
- babylon 画线_【温故知新】——BABYLON.js学习之路·前辈经验(一)
前言:公司用BABYLON作为主要的前端引擎,同事们在长时间的项目实践中摸索到有关BABYLON的学习路径和问题解决方法,这里只作为温故知新. 一.快速学习BABYLON 二.需要掌握的基本技能 1. ...
- Node.js学习之路24——Express框架的app对象
1.express() 基于Node.js平台,快速.开放.极简的web开发框架. 创建一个Express应用.express()是一个由express模块导出的入口top-level函数. cons ...
- Node.js学习之路09——Path基本介绍
Path 1. normalize()将非标准路径字符串转换为标准路径字符串 解析路径字符串中的..和.字符串,返回解析后的标准路径 将多个斜杠字符串转换为一个斜杠字符串,例如将\\转换为\ 将win ...
最新文章
- Node.js中的常用工具类util
- 机器学习实战-集成学习-23
- 智能家居 (7) ——网络服务器线程控制
- 不要在facelets中重复表情
- 使用一个超简单的类实现一个简易服务器,明白Tomcat的运行机制
- 定积分数值计算(C++实现)
- 小型超市管理系统的设计与实现 毕业设计-附源码011136
- 简易矩阵乘法计算器2.0
- Jenkins 配置 Maven 环境变量
- 百度AI认为最漂亮的中国女星是----范冰冰
- Spring之bean标签属性详解
- MoveKit:一款功能强大的Cobalt Strike横向渗透套件
- AMD将用FPGA干什么?
- scanner 获取控制台信息_关于java.util.scanner:如何使用Java中的Scanner类从控制台读取输入?...
- photoshop的应用领域
- PDF文件制作方法与指南
- JAVA毕业生就业信息管理系统计算机毕业设计Mybatis+系统+数据库+调试部署
- mysql删除主键_mysql如何删除主键?
- How project description length and expected duration affect bidding and project success 论文笔记
- C语言编程求解:1到1000之间所有的素数