为了应付俩招新而学学黑马
结果学着学着忘记原先目的了。。。
既然都记了这么多了
对象
构造函数首字母大写
this!
!(https://gitee.com/darren-greenhand//picture/raw/master/image-20210330213907799.png)
其实函数也能遍历到,但是很少用
内置对象
对象分:自定义,内置,浏览器对象
前俩是ES里的,浏览器对象是JS独有的
内置对象就是JS自带的,提供了最常用的和最基本的功能
可以查询MDN文档
Math
Math.random()返回一个随机小数 0<= x < 1
MDN提供了以此为基础的得到各种随机数的方法
DOM
元素是标签
节点:所有内容,标签,属性,。。。
DOM把所有内容看作对象
因为文档页面从上往下加载,所以script
如果没有
小心不要把伪数组当初对象哟
document.querySelector 返回指定选择器的第一个元素对象
document.querySelectorAll
获取body直接document.body,HTML 是documentElement
事件基础
事件是可以被JS侦测到的行为
是一种触发–响应机制
改变内容
innerHTML是W3C推荐的
所以标签的属性在DOM中被当作属性
记得表单里显示的内容是value属性
修改样式
行内样式(优先级最高)
循环精灵图
onfocus
onblur
提前准备好另一个类,然后修改类名
element.className = “change”
这会覆盖原先的类名
不想覆盖则 .className += “ new”
排他思想
先清除其他所有,再给自己设置
onmouseovr onmouseout
获得属性
.removeAttribute(‘index’)
display none/block
自定义属性(在页面而不是服务器存储并使用数据)
ie11以上才有dataset,一般使用getAttribute
节点操作
获得节点
dir方法用来对一个对象进行检查(inspect),并以易于阅读和打印的格式显示。
console.log({f1: 'foo', f2: 'bar'})
// Object {f1: "foo", f2: "bar"}
console.dir({f1: 'foo', f2: 'bar'})
// Object
// f1: "foo"
// f2: "bar"
// __proto__: Object
上面代码显示dir方法的输出结果,比log方法更易读,信息也更丰富。
该方法对于输出DOM对象非常有用,因为会显示DOM对象的所有属性。
父子关系
node.parentNode(离元素最近的父级节点,找不到返回null)
.node.childNodes()集合(包含元素节点和文本节点等等),用nodetype加以筛选
非官方但是被广泛支持:.children(集合)
.firstChild .lastChild 这个会返回(元素节点或文本节点,超坑的是换行也是一个文本节点!)
兼容性问题👇IE9
.firstElementChild
.lastElementChild
兄弟节点用的很少
实际开发写法还是用ol.children[0]和ol.children[ol.children.length-1]或者自己知道数量
.node.nextSibling
.node.previousSibling
这俩也会看到文本节点
兼容性问题👇IE9
.node.nextElementSibling
node.previousElementSibling
创建添加节点
document.createElement(‘li’)
node.appendChild(child) node 父级 child子级
这是后面追加元素
node.insertBefore()
删除节点
node.removeChild() 删的必须是子元素,
复制添加节点
new = node.cloneNode()
事件高级
注册事件
删除事件
事件流
事件对象
兼容性问题 e = e||window.event
event有个类似this的属性 currentTarget,没啥鬼用
兼容性问题处理👇
阻止默认行为
或者直接return false; 谁都能用但是return后的代码不执行,而且只用于传统的注册方式
直接preventDefault吧,
阻止冒泡
event.stopPropagation(); 兼容性问题。。
event.cancelBubble;老版本
事件委托
配合e.target就很牛逼
常用事件
禁止右键和选中文字
然而做得好的网站也不知道用什么方法防住了偷取内容。。
鼠标事件对象
MouseEvent
mousemove 鼠标移动1px就会触发
记得css修改img为position: absolute
键盘数据对象
如果一直按着,down和press会一直输出。。
BOM
所以不要声明名叫name的全局变量
常见事件
窗口加载
调整窗口大小
只要大小像素变化就会触发resize
定时器
拯救男主角 clearTimeout(timerID)
倒计时!
JS执行队列
如定时器3秒,就是3秒后吧事件放到任务队列中
location对象
传递参数
navigator对象
navigator.userAgent对象存储了用户使用的浏览器的信息
history对象
网页特效
offset系列
在用后面俩的时候记得加上 + ‘px’
没有带定位的父亲则以一直网上找直到。。body
拖动模态框
电商放大图
大图片是一个图片,overflow:hidden
client系列
可视区
立即执行函数
无需调用,立马自己执行的函数,第二个小括号可以看成是调用函数
最大的作用是独立创建了个作用域
(function () {} ) ()
如 (function (a.b) {console.log(a+b); } ) (1,2) //传参
(function () {} () )
很多flexble核心源码是有关这个的
Scroll系列
onscroll事件,滚动事件