WebAPI个人学习心得

JS快速入门个人学习心得

1、API简介

2、DOM

3、获取页面元素

3.1 根据id获取元素

通过document来获取

是这个对象真实类型

3.2 获取对应标签的元素

获取id为container下的所有div标签：

3.3 其他方式

4、属性操作和注册事件

事件源

一般来说，页面标签的属性在对象中是都存在的。

非表单元素属性

注册事件：当点击或者是其他操作时去做什么事（监听事件产生去执行一个事）。

this

取消a标签跳转
获取到a标签元素后在点击事件中return false就可以

案例一：点击小图片显示大图片且不跳转

innerHTML和innerText
获取开始标签和结束标签之间的内容

控制台打印出对象



textContent和innerText相同，都是获取文本内容。但是兼容性不同。

获取内容时，根据是否想获取带标签的元素来决定使用哪个
设置的时候：

表单元素属性

有三个：

获取到所有input标签后它是一个数组，可以通过数组形式访问里面每个元素。

案例二：检测用户名和密码不满足就高亮显示

注意： class属性对应的DMO对象是className

这段写在JS里：

案例三：设置下拉框的随机选中

案例四：全选反选

先把定义出来


由于频繁调用所以封装成函数

自定义属性操作

获取

设置

移除

模拟DOM

5、节点层次结构

DOM维护了一个节点树，页面结构在DOM中就是树形结构。

父子结构：获取子节点和子元素

获取子元素：

隔行换色小案例


获取第一个和最后一个子元素和子节点：

案例一：菜单栏

、

兄弟节点

6、动态创建元素

把已经存在的元素移动到另一个地方：


write：用得少
放在按钮中会切换页面。

innerHTML : 创建简单标签所用

这个不会切换页面：

**createElement *生成复杂结构用


p元素就是p标签。

这个对象里就有相对应的方法。先创建在放在DOM树上，追加在之前标签后面。

案例一：点击按钮生成列表

innerHTML实现：

基础版本：问题：每次加载innerHTML都会重新绘制，效率低

注意：这里之所以是 += 是因为 = 会将之前的覆盖掉，我们要做的不是赋值而是字符串拼接。

优化一：先拼接好字符串在赋值
问题：字符串因为不可变，所以每次拼接都需要重新开辟内存，需要耗费时间

优化二：用数组代替，拼接后在转化为字符串

createElement实现：

将案例一高亮显示

案例二：动态创建表格

删除功能：

案例三： 多选水果移动

multiple : 这个属性可以让select下拉框变为一个可以多选的文本框。

children是实时的


注意：如果使用下面方式移动的话

7、事件

注册事件

第二种方法：

新的注册事件的方法：（与上面 事件源.事件名（一般带on） 不同）

事件类型就是之前的事件名不带on


第三种注册事件方式：浏览器兼容IE 6-10

处理兼容性问题：了解

移除事件

通过第一种方式创建的时候：

通过第二种方式创建的时候：


从外到内：

从内到外：

事件委托

交给上一级去做，原理事件冒泡，这样就不用给每一个子元素都添加事件，直接给父元素添加事件有时就可以达到目的。

8、事件对象

获取真正触发事件的对象

获取事件处理函数所属对象（当前正在执行的元素）

二者区别：比如在事件冒泡中，给下面三个盒子都注册事件，点击蓝色，那么两者都是蓝色盒子，蓝色盒子执行完之后，会冒泡传递到绿色盒子，此时真正触发事件的对象为蓝色盒子，事件处理函数所属对象（当前正在执行的元素）为绿色盒子…

e.type ：获取事件名称

获取鼠标点击位置

案例一：获取鼠标在盒子中的位置（不是相对于整个页面是相对于盒子）

这里这个getPage方法是为了解决兼容性问题，我们自己自定义的方法在common.js中。

取消默认行为

方法一：在事件函数中返回false

方法二：通过事件对象

取消冒泡

键盘事件

9、BOM

了解三种对话框（不用）

JS加载

点关闭页面就是卸载页面。

定时器

setTimeOut:

属于window的属性都可以省略window
之所以把标示定义为全局变量是因为局部变量外部无法访问。

让一个块隔一段时间自动隐藏：

setInterVal:

案例一：倒计时

获取两个日期时间差

返回一个对象

location对象（可以实现页面跳转）

页面跳转：

法一：

法二：

法三：

法四：

案例二：小盒子移动动画（获取当前位置坐标）

URL

模拟浏览器自带：

前进：

后退：

可以通过 navigator.userAgent 来判断是PC还是移动端

10、和大小、位置相关的三组属性

offset（偏移量）

Left - 横向偏移：横坐标
Top - 纵向偏移： 纵坐标

client(客户区大小)

scrool (滚动偏移)

案例一：鼠标拖拽

鼠标点下并未抬起事件
鼠标移动事件
位置：


注意：一定要在style.left = x + **‘px’**带单位！

案例二：登录框

显示遮盖层：将display从none变为其他
隐藏就改为none

案例三：放大镜

结构：

11、简单动画

让一个盒子执行从左移动到右的动画。JS可以随时给一个元素增加属性： 元素名.要增加的属性名 就可以了。

案例一：轮播图

注：这里的my$就是根据id获取元素

第二步放在第一步的循环中，把函数定义放在循环外。记录索引放在循环中，第二步之后










在这里添加：

案例二：回到顶部

结束~