document
getElementById(), ByTagName(), ByClassName(),querySelector(), querySelectorAll()
getElementById
- 相同id的元素只得到第一个
- js代码一定要写到html节点后面
- 延迟执行： window.onload = function(){} 页面加载完毕后执行代码
ByTagName()
- 返回数组，方便批量操控节点
- 任何一个元素调用该方法可以得到内部元素节点
ByClassName()
- 任何一个元素调用该方法可以得到内部元素节点
querySelector()
document.querySelector('#box1 .spec')
- 只得到一个元素
- 支持:nth-child(), :[src^='dog'] 以dog开头的src的元素
节点关系
image
节点关系也包括空白文本节点，IE9支持的只考虑元素节点的属性
image
改变元素节点
改变内容
innerHTML：以HTML语法设置节点内容
innerText：设置文本内容
改变样式
element.style.backgroundColor = xxx;
- CSS属性要写成驼峰形式，路径等要设置成完整形式
改变HTML属性
标准W3C属性，直接更改即可
不符合W3C属性的，使用setAttribute和getAtrribute进行读写
oBox.setAttribute('data-n', 10);
var n = oBox.getAttribute('data-n');
节点的操作
创建
var div = docment.createElement('div')
- 孤儿节点：未挂载的节点
- 挂载方法
- appendChild()：将节点挂在到内部作为最后一个节点
- insertBefore()：挂在至节点的内部，成为标杆子节点之前的节点
parentEle.insertBefore(孤儿节点， 标杆节点)
删除节点
parentEle.removeChild()
节点不能删除自己，必须由父节点删除
克隆节点
var div = parentEle.cloneNode()
若传入true，表示深度克隆
事件监听
-
主要方法：onXXX()和addEventListener()
-
onClick = function(){}
-
鼠标事件监听
image
-
键盘事件监听
image
-
表单事件监听
image
-
页面事件监听
image
事件传播
- 表面上事件的传播是从内到外的
-
实际上是从外到内，再从内到外
image
- 捕获阶段和冒泡阶段
- onXXX只能监听冒泡阶段
- addEventListener()
- DOM 0级事件监听：element.onclck = f()
- DOM 2级事件监听：element.addEventListener('click', f(), true)
- true监听捕获阶段，false监听冒泡阶段
- 最内部元素不分捕获和冒泡
- 同名的多个事件，DOM 0级写法后面的会覆盖前面的，DOM 2级会按顺序执行
事件对象
事件处理函数的参数封装了事件的细节，通常用event表示
element.onclick = function(e) {}
鼠标位置
image
image
image
image
e.charCode和e.keyCode
- e.charCode用于onkeypress事件，表示用户输入的字符的“字符码”
-
e.keyCode用于onkeydown事件和onkeyup中，表示用户按下的按键的“键码
image
image
e.preventDefault()
防止事件产生的默认动作，常用
e.stopPropgation()
阻止事件继续传播，常用
事件委托
批量添加事件监听
动态绑定事件的问题
-
新元素必须分别添加事件监听，不能自动获得监听
-
通过事件冒泡机制，将后代元素的事件委托给祖先元素
-
事件委托通常结合e.target
image
使用场景
- 批量添加事件监听的场景使用委托可以减少内存开销
- 动态元素上树时，委托可以让元素有事件监听
注意事项
- 1.onmouseenter和onmouseover都表示“鼠标进入”，它们有什么区别呢？
- 答：onmouseenter不冒泡，onmouseover冒泡
- 2.使用事件委托时要注意：不能委托不冒泡的事件给祖先元素
- 3.最内层元素不能再有额外的内层的元素
- 例如 ul > li > span
动画
- JavaScript可以利用CSS3的transition实现元素动画,规避了定时器制作动画的缺点
函数节流
- 函数执行一次后，只有>T后才允许执行第二次
- 实现：借助setTimeout()
- 未完成作业：实现几个动画效果
BOM
- Browser Object Model，js与浏览器交互的接口
- 浏览器改变尺寸，滚动条特效要借助BOM
window对象
- window对象是js脚本运行所处的窗口
- 窗口包含DOM结构，window.document就是document对象
- 浏览器的每个标签都有自己的window对象
全局变量是window的属性
var a = 10;
console.log(window.a)
- 意味着多个js文件之间共享全局作用域，文件没有作用域隔离
内置函数普遍是window的方法
如setInterval()、alert()等内置函数，普遍是window的方法
窗口尺寸相关属性
- innerHeight 窗口内容区域的高度，包含水平滚动条
- outerHeight 浏览器窗口的外部高度
- 获得不包含滚动条的窗口宽度，用document.documentElement.clientWidth
resize事件
- 窗口大小改变之后触发resize事件
- 可以使用window.onresize或者window.addEventListener('resize')来绑定事件处理函数
已卷动高度
- window.scrollY属性表示在垂直方向已滚动的像素值
- document.documentElement.scrollTop属性也表示窗口
卷动高度
var scrollTop = window.scrollY || document.documentElement.scrollTop;
image
scroll事件
- 在窗口被卷动之后触发scroll事件，可以使用
- window.onscroll或者window.addEventListener('scroll')
来绑定事件处理函数
Navigator 对象
- window.navigator 属性可以检索navigator对象，内部
- 含有浏览器的相关属性和标识
- appName，appVersion
- userAgent浏览器用户代理（含有内核信息和封装壳信息）
- platform 用户操作系统
识别用户浏览器品牌
- 使用navigator.userAgent属性
var sUsrAg = navigator.userAgent;
if (sUsrAg.indexOf("Firefox") > -1) { }
else if (sUsrAg.indexOf("Opera") > -1) { }
else if (sUsrAg.indexOf("Edge") > -1) { }
else if (sUsrAg.indexOf("Chrome") > -1) { }
else if (sUsrAg.indexOf("Safari") > -1) { }
else { }
History 对象
- window.history 对象提供了操作浏览器会话历史的接口
- 常用操作就是模拟浏览器回退按钮
- history.back(); // 等同于点击浏览器的回退按钮
- history.go(-1); // 等同于history.back();
Location 对象
- window.location标识当前网址，可以通过给属性赋值命令浏览器进行页面跳转
window.location = 'http://www.imooc.com';
window.location.href = 'http://www.imooc.com';
重新加载当前页面
- 用location的reload方法以重新加载当前页面
- 参数true表示强制重新加载当前页面
- window.location.reload(true);
GET请求查询参数
- window.location.search属性即为当前浏览器的GET请求查询参数
比如网址 https://www.imooc.com/?a=1&b=2
console.log(window.location.search); // "?a=1&b=2"
BOM特效开发
待完成作业
对象
对象属性操作
- 对象属性是否加引号：如果对象的属性键名不符合JS标识符命名规范，则这个键名必须用引号包裹
- 属性的访问：
- 如果属性名不符合JS标识符命名规范，则必须用方括号的写法来访问，如 xiaoming['favorite-book'];
- 如果属性名以变量形式存储，则必须使用方括号形式
- 删除对象的属性，使用delete操作符
网友评论