无知的我正在复盘js…

文章目录

JavaScript
1 常用命令
- 输出语句
- 转换为字符串
- 得到变量类型
1 获取元素对象
- 1.1 H5新增获取元素对象
- 1.2 直接获取特殊元素对象
2 事件三要素
- 2.1 对象事件类型
- 2.2 修改元素文本
- 2.3 修改元素class属性
- 2.4 修改元素样式中的属性
3 内置对象
- 常见对象
- 对象内置属性
4 CSS属性
5 节点操作
6 创建元素
7 高级地使用事件
- 7.1 注册事件
- 7.2 删除事件
- 7.3 事件处理流
- 7.4 事件对象
- - 7.4.1 属性和方法详细
  - 7.4.2 鼠标事件
  - 7.4.3 键盘事件
案例

JavaScript

Web APIS
1. DOM（页面文档模型）
2. BOM（浏览器对象模型）
JS基础
1. ECMAScript

是什么？

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。
W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

1 常用命令

输出语句

输出到控制台console.log();
弹窗：alert();
弹出输入框：prompt();

转换为字符串

String([变量名]);

得到变量类型

typeof [变量名];

1 获取元素对象

-document.getElementById('[id属性]');返回：标签及内容---对应id属性的标签的-根据标签，获取document.getElementsByTagName('[标签名]');返回：元素对象集合as：var lis = document.getElementsByTagName('li');console.log(list[0]);-根据父标签对象，获取document.getElementsByTagName('[标签名]');细节：只能通过一个父标签来...as：var lo = document.getElementsByTagName('ol');XXX lo.getElementsByTagName('li'); XXX=>lo[0].getElemntsByTagName('li');-打印对象的属性以及属性值等等：console.dir([对象名]);

细节1：根据id获取不需要为@param getElement加上s

细节2：获取对象的属性：[对象].[属性名]

1.1 H5新增获取元素对象

1.
document.getElementsByClassName('[类名]')
根据类名，获取
返回：类对象
2.(选择器)
document.querySelector('[（css）类名 | id | 标签]')
返回：对应的第一个对象
document.querySelectorAll('[...]')
返回：所有对应对象

细节：@param getElemet… : 没加上s

querySelector 和 querySelectorAll里面的选择器需要加符号,比如:document.querySelector(‘#nav’);

1.2 直接获取特殊元素对象

对body元素

documment.body
返回：body元素对象

对html元素

documment.documentElement
返回：html元素对象
XXX ducument.documentHtml XXX

2 事件三要素

1事件源（对象）; 2事件类型（方法） ; 3事件处理程序（方法实现）

<body><button id="btn">唐伯虎</button><script>var btn = document.getElementById('btn');btn.onclick = function () {//1事件源（对象）; 2事件类型（方法） ; 3事件处理程序（方法实现）alert('点秋香');}</script>
</body>

还可以在实现方法里面，调用方法

2.1 对象事件类型

点击事件：[对象].onClick

焦点事件：

获得焦点事件：[对象].onfocus

失去焦点事件：[对象].onblur

应用案例：212-显示隐藏文本框内容

2.2 修改元素文本

[对象].innerText = ‘xxx’ 非标准，不具有通用性

作用：读取对象内容
细节：不识别html标签; 去除换行和空格

as:

 var p = document.querySelector('p');p.innerText = getDate();

[对象].innerHTML

作用：读取对象内容
细节：识别html标签

2.3 修改元素class属性

[对象].className

xxx [对象].class xxx

修改后，覆盖原有类名
修改为多类名：as：[对象].className = ‘first name’(不同类名间加上空格)
案例：213-使用其修改元素样式

2.4 修改元素样式中的属性

[对象].style.[属性]修改元素样式as：隐藏对象[对象].style.display = 'none'

细节：如修改，修改的是行内样式，所以权重比css样式低

细节：如修改，与直接修改css样式的分别：[ : ] => [ = ]; 添加单引号

应用案例：214-密码验证信息

3 内置对象

常见对象

时间对象

as：获取当前小时

var date = new Date();
var h = date.getHours();

对象内置属性

as：禁用表单

[对象名].disabled = true;

扩展：as：this.disabled = true：@param this：代表当前的对象的调用者———在事件中

4 CSS属性

对于<input>:outline:none 去除输入框的边框

display: none 隐藏对象

5 节点操作

原理：利用父子层级关系获取元素

如何识别节点？
- html页面全是节点; 细节：注释…换行…空格都是节点；并非包含在标签之内的文本才是节点
为什么要节点？
- DOM提供获取元素方法逻辑性不强，繁琐
节点的内容？
- 至少有节点类型、节点名称、节点值

获取父节点

[对象].parentNode

获取的是距离其最近的父节点

获取子节点

1.[parentNode].childNodes 获取所有子节点(标准，不推荐)

as：获得ul所有的li：ul.childeNodes
引出问题：获取到的节点经常会包含文本节点（无用的节点）
解决：利用元素类型遍历节点而筛选节点

2.[parentNode].children 获取元素子节点(非标准，推荐)

获取第几个子节点：

获取第一个和最后一个子节点-firstChild as:[ol].firstChild;-lastChild as:[ol].lastChilde;需要IE9以上版本：-firstElementChild as:[ol].firstElementChild;-lastElementChild as:[ol].lastElementChild;
利用索引获取任意节点：-childeren：[ol].childeren[0];-childeren：[ol].childeren[ol.children.length-1];

案例1：231.新浪下拉列表

-鼠标悬浮事件：[对象].onmouseover
-鼠标离开事件：[对象].onmouseout

添加节点（以下略）
- 创建和添加节点
删除节点
复制节点

兄弟节点

**获取节点的类型：**文本节点：3 ；元素节点：1；…

[node].nodeType

6 创建元素

document.write() 细节：当页面文档流加载完毕，再调用(as：调用事件)会导致页面重绘
innerHTML
- 循环拼接输出
- 1.添加到数组 2.循环数组输出（输出效率最高）
document.creatElement()
- 直接创建，不需要拼接

7 高级地使用事件

7.1 注册事件

-就是给元素添加事件

传统方式
- 当同一个元素同一个事件注册多个监听器时，最后注册的处理函数将覆盖前面注册的处理函数
方法监听注册方式
- 当同一个元素同一个事件注册多个监听器时，按注册顺序依次执行

-方法监听1详解：

语法：eventTarget.addEventListener(type, listener[, useCapture])

@type：事件类型字符串，比如 click 、mouseover
@listener：事件处理函数，事件发生时，会调用该监听函数
@useCapture：可选参数，是一个布尔值，默认是 false。

细节：1.都要带单引号 2.注意@type不要带 on

-方法监听2详解(了解)：

语法： eventTarget.attachEvent(eventNameWithOn, callback)

@eventNameWithOn：事件类型字符串，比如 onclick 、onmouseover ，这里要带 on
@callback：事件处理函数，当目标触发事件时回调函数被调用
细节：IE8 及早期版本支持

-兼容性方案解决（略）

7.2 删除事件

-传统注册方式

eventTarget.onclick = null;

-方法监听注册方式

eventTarget.removeEventListener(type, listener[, useCapture]);
eventTarget.detachEvent(eventNameWithOn, callback);

细节：不能使用匿名函数

7.3 事件处理流

作用：当有多个事件时，需要指定事件执行的顺序。

-指定捕获阶段的顺序as：

[对象].addEventLisenter('click', funciton(){alert('你好');}, true);

-指定冒泡阶段的顺序as：flase(默认)

7.4 事件对象

定义as：（事件对象的命名：可以随便取）。

[对象].addEventLisenter('click', funciton(event){alert('你好');}, true);

@event是形参，但不需要传递值。

创建事件对象的机制：需要先创建事件，才会创建对应的事件对象。

属性as：

target : div (绑定的事件标签)。
type : clik (绑定的事件类型)。
补充：属性因对象的变化而变化。

兼容性问题：

问题：window.event，在IE678中获取事件对象，获取命令必须写完全。

解决：e = e || window.event（当识别失败，为假；反之，为真）

7.4.1 属性和方法详细

-阻止默认行为：

as：阻止链接跳转/按钮提交：

[对象].addEventListener('click', function(e)){e.preventDefault();// 为了阻止默认的
}

[对象].addEventListener('click', function(e)){return false;
}

-阻止事件冒泡：

e.stopPropagation();// 停止传播

-事件委托：

7.4.2 鼠标事件

-contextmenu => 禁用右键菜单:

document.addEventListener('contextmenu', funtion(e){e.preventDefault();})

-selectstart => 禁止选中：

document.addEventListener('selectstart', funtion(e){e.preventDefault();})

细节：别忘了e.preventDefault()。

-x，y事件属性：

e.client == 鼠标在可视区域的x，y
e.page == 鼠标在页面文档的x，y
e.screen == 鼠标在电脑屏幕的x，y

-案例：跟随鼠标的天使

...图片添加绝对定位...
pic.style.left = x + "px";
pic.style.top = y + "px";

细节：别忘了拼接字符串

7.4.3 键盘事件

keyup == 按下后抬起事件
keydown == 按下事件
keypress == 按下事件(不识别功能键，无论如何后执行)

-属性：

e.keyCode == 获取键盘按键的ASCII值

补充：只有keypress事件识别键盘按键的大小写

案例

207-仿京东显示隐藏按钮

211-循环精灵图

216-排他思想（算法）

JS详解 | 对象事件节点 | 系统性学习 | 无知的我费曼笔记相关推荐

JVM核心考案2 | 系统性学习 | 无知的我费曼笔记（图文排版无水印）
无知的我正在复盘JVM... 笔记特点是重新整理了涉及资料的一些语言描述.排版而使用了自己更容易理解的描述.. 提升了总结归纳性同样是回答了一些常见关键问题.. 文章目录 JVM-是什么 JVM- ...
RabbitMQ图文详解 | MQ_SpringAMQP | 系统性学习 | 无知的我费曼笔记
重新整理了涉及资料的一些语言描述.排版而使用了自己的描述 . 对一些地方做了补充说明.比如解释专有名词.类比说明.对比说明.注意事项. 提升了总结归纳性.尽可能在每个知识点上都使用一句话 || 关键词 ...
微信小程序 | 小Demo_学生资讯 | 系统性学习 | 无知的我费曼笔记
无知的我正在复盘微信小程序下图是我总结的 uniapp 思维导图,后续会不断补充文章目录微信小程序项目框架项目目录图解 app.json 具体看官方文档配置全局初始化文件清空文件内容 ...
被动与主动信息收集 | 系统性学习 | 无知的我费曼笔记
文章目录信息收集-被动信息收集介绍收集手段收集内容信息用途信息收集-域名解析过程以手段域名解析过程信息收集 DNS **DNS 信息收集-NSLOOKUP** **DNS 信息收集-DI ...
网络协议与攻击模拟 | APR_TCP | 系统性学习 | 无知的我费曼笔记
文章目录网络协议与攻击模拟-APR协议网络协议与攻击模拟-实施ARP攻击与欺骗实施ARP攻击实施ARP欺骗网络协议与攻击模拟-TCP三次握手网络协议与攻击模拟-APR协议 APR协议的作用 ...
微信小程序学习：（二）app.js及index.js详解
微信小程序学习:(二)app.js及index.js详解项目地址:https://github.com/leoricding/- 在用ide创建小程序项目时,系统默认为我们创建了一个hellowor ...
html js不触发_图文详解鼠标事件CSS:hover和JS:mouseover的区别
在工作中为了使页面更具有吸引力,前端开发人员经常会在页面中加上鼠标移入和移出的效果.鼠标移入移出的设置,一般有两种方法,一种是单纯用CSS中的hover伪类,另一种可以用JS 中的DOM事件,即onm ...
Grunt学习笔记002---Gruntfile.js详解
Gruntfile.js详解使用yeomen新建一个项目,里面会自动帮你创建一个完整项目的全部目录,这里针对新建出来的Gruntfile.js做一下简单说明,用作以后参考使用,由于还是菜鸟,很多东西 ...
android 拖动点击事件,Android事件详解——拖放事件DragEvent
1.Android拖放框架的作用? 利用Android的拖放框架,可以让用户用拖放手势把一个View中的数据移到当前layout内的另一个View中去. 2.拖放框架的内容? 1)拖放事件类 2)拖放 ...

JS详解 | 对象事件节点 | 系统性学习 | 无知的我费曼笔记

文章目录

JavaScript

1 常用命令

输出语句

转换为字符串

得到变量类型

1 获取元素对象

1.1 H5新增获取元素对象

1.2 直接获取特殊元素对象

2 事件三要素

2.1 对象事件类型

2.2 修改元素文本

2.3 修改元素class属性

2.4 修改元素样式中的属性

3 内置对象

常见对象

对象内置属性

4 CSS属性

5 节点操作

6 创建元素

7 高级地使用事件

7.1 注册事件

7.2 删除事件

7.3 事件处理流

7.4 事件对象

7.4.1 属性和方法详细

7.4.2 鼠标事件

7.4.3 键盘事件

案例

JS详解 | 对象事件节点 | 系统性学习 | 无知的我费曼笔记相关推荐

最新文章

热门文章

JS详解 | 对象 事件 节点 | 系统性学习 | 无知的我费曼笔记

文章目录

JavaScript

1 常用命令

输出语句

转换为字符串

得到变量类型

1 获取元素对象

1.1 H5新增获取元素对象

1.2 直接获取特殊元素对象

2 事件三要素

2.1 对象事件类型

2.2 修改元素文本

2.3 修改元素class属性

2.4 修改元素样式中的属性

3 内置对象

常见对象

对象内置属性

4 CSS属性

5 节点操作

6 创建元素

7 高级地使用事件

7.1 注册事件

7.2 删除事件

7.3 事件处理流

7.4 事件对象

7.4.1 属性和方法详细

7.4.2 鼠标事件

7.4.3 键盘事件

案例

JS详解 | 对象 事件 节点 | 系统性学习 | 无知的我费曼笔记相关推荐

最新文章

热门文章

JS详解 | 对象事件节点 | 系统性学习 | 无知的我费曼笔记

JS详解 | 对象事件节点 | 系统性学习 | 无知的我费曼笔记相关推荐