webAPI
- webAPI: 用来操作网页工具的具体实现
- DOM: 文档对象模型 ----> 操作网页
- BOM: 浏览器对象模型 ----> 操作浏览器
- DOM树: 作用描述标签之间的关系
- DOM对象: 网页中的标签就是DOM对象
DOM
操作标签样式
- 操作标签样式
-
a) 行内样式
DOM对象.style.css属性 = 值;注意事项:
- a) 如果css属性中有 - 按照小驼峰命名法写
- b) 本质就是给标签加行内样式
b) 类样式
- 通过 className
DOM对象.className = 类名;
注意:
- a) 会覆盖标签身上原来的类名
- b) 多个类名使用空格隔开
- 通过 classList
DOM对象.classList.add(类名, 类名): 不会覆盖标签原来的类名, 多个类名之间使用逗号隔开
DOM对象.classList.remove(类名): 移除类名
DOM对象.classList.toggle(类名): 切换类名, 如果标签有该类名则切换要删除,否则添加
DOM对象.classList.contains(类名): 判断标签是否包含类名. 返回布尔值 true 包含 false 不包含
-
c)通过id
DOM对象.id ;获取
DOM对象.id = 值;设置
-
获取DOM对象
-
获取DOM对象
我们得到的标签就是一个DOM对象-
a) 获取单个DOM对象
document.getElementById('id值')
document.querySelector('css选择器')
相同点: 返回的结果都是DOM对象, 返回都是所有满足条件中的第一个 -
b)获取多个DOM对象
document.querySelectorAll('css选择器');
document.getElementsByTagName('标签名');
document.getElementsByClassName(类名);
相同点: 返回的结果都是一个伪数组, 数组中的每一个值都是一个DOM对象
-
操作标签的属性
-
操作标签的属性
imgDOM对象.src获取
imgDOM对象.src = 值设置aDOM对象.href获取
aDOM对象.href = 值设置
操作标签的文字内容
- 操作标签的文字内容
- a) 非表单标签
DOM对象.innerHTMLDOM对象.innerTextDOM对象.innerHTML = 值DOM对象.innerText = 值
- b) 表单标签
DOM对象.valueDOM对象.value = 值
- c) 获取form表单
<body> <form name='myform'> <input type="text" name='userName' value="4545"> <input type="password" name='userPwd'> </form> </body> <script> console.log('获取form元素:', document.myform);//form 表单DOM元素 console.log('获取input元素', document.myform.userName);//通过form表单.input的name属性获取inputDOM元素 console.log('获取value值: ', document.myform.userName.value);//获取value值 </script> - a) 非表单标签
获取特殊标签
- 获取特殊标签
document.body
document.documentElement
事件
- 事件
事件源: DOM对象
事件类型: 用户的动作 onclick
处理程序: 函数
事件源.事件类型 = function() {}
事件什么时候执行? 事件必须触发后才会执行
自定义属性
- 自定义属性
内置实现(标准属性): 标签本身就支持的属性 class id value …
自定义属性: 在标签身上自定义的属性
DOM对象.dataset.自定义属性名
DOM对象.dataset.自定义属性名 = 值
DOM对象.getAttribute('属性名')
DOM对象.setAttribute('属性名', 值)
作用: 保存数据
闭包(闭包函数)
- 闭包(闭包函数)
a) 函数嵌套
b) 内部函数使用了外部函数中的变量
this关键字
-
this关键字
事件中的this: 事件源
普通函数中的this: window
方法中的this: 方法的调用对象
全局作用域中的this: windowa) 构造函数中的this指向构造函数创建的实例对象
b) 事件中的this指向事件源
c) 方法中的this指向调用方法的对象
d) 普通函数中的this指向window对象
e) setInterval()中的this指向window对象
f) setTimeOut()中的this指向window对象
onload事件
- onload事件
a) 将js代码写到到html结构前面的时候,必须加 onload
b)window.onload = function(){}
c) 页面中所有的资源全部加载完成后,才会执行 onload事件中的代码
鼠标事件、键盘事件、焦点事件
- 其他事件类型
-
a) 鼠标事件:
onclick鼠标点击事件
ondblclick鼠标双节事件
onmouseenter | onmouseover鼠标移入 移出事件
onmouseleave | onmouseout鼠标进入 离开事件
onmousemove鼠标移动事件
onmousedown键盘按键被按下
onmouseup键盘按键被松开
oncontentmenu鼠键右键
onmousewheel鼠标滚轮事件 -
b) 键盘事件:
onkeydown按下onkeyup抬起 -
c) 焦点事件:
onfocus获取焦点onblur失去焦点 -
d) 表单事件
oninput正在输入
onchange表单内容发生改变时触发
onselect选取表单内容时触发
onsubmit点击submit触发（form驱动）
onreset点击reset按钮触发（form驱动）
-
事件对象参数e
- 事件对象参数e
- a) 事件对象参数不是必须设置的
- b) 事件对象参数只能设置一个
- c) 作用：
通过事件对象参数获取按键信息:
事件对象参数.key | 事件对象参数.code |事件对象参数.keyCode
获取鼠标的坐标
事件委托
阻止事件冒泡
阻止标签的默认行为
操作复选框状态
- 操作复选框状态
a) 获取:DOM对象.checked布尔值: true 选中 false: 未选中
b) 设置:DOM对象.checked = 布尔值
操作按钮的点击状态
- 操作按钮的点击状态
a) 获取: DOM对象.disabled 布尔值 true 不能点击 flase: 可以点击
b) 设置: DOM对象.disabled = 布尔值
oninput事件
- oninput事件: 用户输入内容的时候,执行该事件 ===> 事件源一般都是输入框
onchange事件
- onchange事件: 内容发生改变的时候执行 ===> 文件上传
innerText 和 textContent的区别
-
innerText 和 textContent的区别
相同点:
a) 都是DOM对象身上的一个属性
b) 都可以获取标签中的内容
c) 都可以给标签设置内容不同点:
a) innerText 只能获取纯文本
b) textContent 获取文本 + 回车换行
c) innerText 兼容IE低版本 textContent 不兼容IE低版本
d) innerText 无法或隐藏标签的内容 textContent可以获取隐藏标签的内容
节点操作
- 节点操作
节点: html标签, 标签身上的属性, 标签中的文字, 注释标签, 回车换行
元素: 特征html标签
-
节点分类:
a) 元素节点: html标签
b) 属性节点: 标签身上的属性
c) 文本节点: 标签中的文字 (回车换行)
d) 注释节点: 注释标签 -
区分节点类型操作方式:
- a) 节点类型: 节点对象.nodeType
1(元素节点)
2(属性节点)
3(文本节点)
8(注释节点) - b) 节点名称: 节点对象.nodeName
DIV(大写)
class(属性名)
#text
#comment - c) 节点值: 节点对象.nodeValue
null
属性中的值
文本自己
注释节点中的内容
- a) 节点类型: 节点对象.nodeType
-
节点操作:
获取节点— 通过节点之间的关系获取-
a) 根据父节点找子节点
var div = document.querySelector(‘div’);
div.childNodes获取所有的子节点（包括文本换行），不考虑后代节点
div.children获取当前元素所有的子元素
div.firstChild获取第一个子节点
div.firstElementChild获取第一个子元素
div.lastChild获取最后一个子节点
div.lastElementChild获取左后一个子元素 -
b) 根据子节点找父节点
div.parentElement
div.parentNode -
c) 找兄弟节点
div.nextElementSibling获取下一个兄弟元素
div.previousElementSibling获取上一个兄弟元素div.nextSibling获取下一个兄弟节点
div.previousSibling获取上一个兄弟节点 -
删除节点(移除节点)
隐藏元素
DOM对象.remove()删除元素自己本身
列：div.remove();DOM对象.removeChild(DOM对象)从父元素中删除子元素
列：div.removeChild(div.firstElementChild); -
增加元素(动态创建元素)
- a) 创建节点(元素)
document.createElement('标签名'); - b) 将创建的元素添加到父元素中
DOM对象.appendChild(新标签对象);
- a) 创建节点(元素)
-
插入节点
DOM对象.insertBefore(新节点, 目标节点);在父元素中 的某个目标节点插入新的节点
DOM对象.appendChild(新节点); 在指定节点的最后一个子节点列表后添加一个新的子节点 -
克隆节点
DOM对象.cloneNode(布尔值);
返回值: 返回的结果就是克隆后的标签对象
true: 标签和标签中的所有内容都被克隆
false: 只克隆标签本身 -
替换节点
DOM对象.replaceChile(新节点，旧节点)实现子节点对象的替换，返回被替换对象的引用
-
事件流
- 事件流:
a) 事件流就是事件在执行过程中的一个特征
b) 事件冒泡: 嵌套结构标签,事件从内向外传递 — 事件流中的默认现象
c) 事件捕获: 嵌套结构标签,事件从外向内传递 — 事件捕获
注意:
1. DOML0方式无法查看事件捕获现象
2. DOML2方式并且设置第三个参数为true ---- 事件捕获
d) 阻止事件冒泡:事件对象参数.stopPropagation();
e) 事件冒泡应用场景: 实现事件委托
绑定事件(注册事件)
- 绑定事件(注册事件)
a) DOML0:事件源.事件类型 = functon(){}
b) DOML2:事件源.addEventListener('事件类型', function(){})
c) 委托 :父元素事件源.事件类型 = function(e) { 事件对象参数.target }
移除事件
-
移除事件:
DOML0移除:事件源.事件类型 = null;
DOML2移除:事件源.removeEventListener('事件类型', 函数名)
注意: 注册事件的时候也必须要写成函数名的方式,才可以移除document.getElementById(‘’) — 兼容性好
IE低版本浏览器注册DOML2写法的事件: 事件源.attachEvent(‘on事件类型’, function(){})
IE低版本浏览器移除DOML2写法的事件: 事件源.detachEvent(‘on事件类型’, 函数名)
事件委托
-
事件委托
应用场景:
a) 在任何情况下都可以使用委托 — 减少代码量,提高程序的效率
b) 如果需要给多个元素注册事件 — 推荐使用委托
c) 页面中元素是动态创建且注册事件 — 推荐使用委托委托实现步骤
a) 找父元素
b) 给父元素注册事件
c) 通过 事件对象参数.target 获取事件源
BOM
window对象
- window对象
-
a) 属性
navigator包含有关浏览器的信息
window.navigator.onLine获取客户端是否联网
location获取或设置当前页面的地址，并把浏览器重新定向到新的页面
window.location.href = 值设置或返回当前页面完整的URL
window.location.reload(true)重新加载当前文档 ，相当于刷新
window.location.search(查询参数)
window.location.port获取端口号默认80
window.location.hostname获取主机名
window.location.host获取主机名和端口号
window.location.protocol获取协议类型 https http ftp
history浏览器用户访问过的URL
window.history.back();前一个URL
window.history.forward();下一个URL
window.history.go(0);0当前页面 ； 1下一个URL； -1前一个URL；
window.history.length;
screen包含客户端显示屏幕的信息
window.screen.width返回访问者屏幕的宽度 ，单位像素（屏幕分辨率的宽）
window.screen.height返回访问者屏幕的高度 ，单位像素（屏幕分辨率的高）window.document
-
b) 方法
window.alert();弹窗
window.confirm();显示带有一段消息以及确认按钮和取消按钮的对话框
window.prompt();显示可提示用户输入的对话框
window.open(地址, "_self");打开一个新的浏览器地址
window.close();关闭浏览器 -
c) 事件
window.onloadhtml结构、css样式或图片加载完毕后才执行的代码
window.onscroll监听滚动条变化
获取内容滚动的距离必须要在滚动事件中获取
document.documentElement.scrollTop
document.documentElement.scrollTop = 值;
window.onresize视口大小(浏览器窗口大小)发生改变,执行该事件
-
获取元素的大小
- 获取元素的大小
- a) 获取元素行内设置的大小
DOM对象.style.width
DOM对象.style.height - b)
DOM对象.offsetWidth= 内容 + 内边距 + 外边框 - c)
DOM对象.clientWidth= 内容 + 内边距 - d)
DOM对象.clientLeft= 左边框宽度
- a) 获取元素行内设置的大小
获取元素的位置
- 获取元素的位置
DOM对象.offsetLeft: 默认页面左上角, 父元素设置定位参照父元素
DOM对象.offetTop:
阻止标签的默认行为
- 阻止标签的默认行为
事件对象参数.preventDefault();阻止事件默认行为
事件对象参数.stopPropagation();阻止事件冒泡
事件对象参数兼容写法
- 事件对象参数兼容写法
e || window.event
委托事件中事件源兼容写法
- 委托事件中事件源兼容写法
其他：事件对象参数.target
IE：事件对象参数.srcElement
重绘、回流
- 重绘: 当元素的颜色发生改变(背景色,文字颜色,边框颜色) — 重绘操作
回流: 当前元素的位置,大小发生改变,引起回流 (浏览器重新渲染网页布局)
定时器
- 定时器:
setTimeout如果不设置时间，默认为4毫秒
setInterval如果不设置时间，默认为10毫秒-
a) 间歇函数(定时器)
是window对象中的方法
this指向window
var timeID =setInterval(function(){}, 时间间隔);
clearInterval(timeID);
区别:
间歇函数每隔一段时间执行一次(循环的特点) -
b) 延迟函数(定时器)
是window对象中的方法
this指向windowvar timeID =
setTimeout(function(){}, 延迟时间);
clearTimeout(timeID);
区别:
延迟执行但只执行一次
-
获取鼠标位置
- 获取鼠标位置
事件对象参数.clientX========> 相对视口左上角(可视区域左上角)
事件对象参数.offsetX========> 相对事件源左上角
事件对象参数.pageX========> 相对页面左上角(包含滚动条滚动的距离)
事件对象参数.screenX========> 相对屏幕左上角
时间戳的获取
- 时间戳
本质: 使用毫秒表示当前的时间
应用: 时间差
获取:
Date.now();
+ new Date();
日期对象.getTime();
节流、防抖
-
节流: 频繁操作的时候,执行第一次 — 轮播图
a) 将事件中要执行的功能代码单独封装到一个函数中
b) 封装节流函数(间隔时间, 要被节流操作的函数)
c) 事件调用节流函数2.防抖: 频繁操作的时候,执行最后一次 — 搜索
a) 防抖使用延迟函数实现
滚动事件,resize事件…
原型链
- 原型链:
方法查找规则: 沿着原型链向上查找,一直找到Object构造函数的原型对象上
原型链找到Object构造函数的原型对象上无法再找了,因为最后得到的结果null
沿着 proto 一直去prototype身上找
就近原则prototype: 原型对象,是构造函数身上的属性,设置公共方法或属性
构造函数.prototype.方法名 = function(){}
构造函数.prototype.属性名 = 值__proto__: 对象原型(隐式原型), 是对象身上的属性. 默认指向了原型对象,可以实现其他对象能够访问原型对象身上的公共方法constructor: 构造器(构造函数), 是原型对象prototype身上的属性,保存了一个构造函数 (指明当前原型对象是属于哪个构造函数的)
面向对象 -
- 面向对象: 编程思想,确定对象 (属性 + 方法)
- 封装: 功能封装成一个方法或函数
- 继承: 属性继承 + 方法继承(原型继承) ===> 组合继承
- 多态: 同一个方法(函数)有多种功能
js中的继承
a) 属性继承
b) 方法继承(原型继承)
function Fn1(age) {
this.age = age;
}
公共方法
Fn1.prototype.eat = function() {}
function Fn2(age, height) {
属性继承
Fn1.call(this, age);
this.height = height;
}
继承Fn1构造行中的公共方法
Fn2.prototype.__proto__ = Fn1.prototype;
Fn2.prototype = Fn1.prototype;
Fn2.prototype = new Fn1();
Fn2.prototype.constructor = Fn2;
less
css的预处理器
-
css的预处理器
a) 新建一个less文件
b) 默认在非服务端环境下,浏览器是无法解析less文件
c) 服务端环境下 + +
d) 正常情况下,通过 easy less 插件将less文件编译为css文件
定义变量: @变量名:值;
计算: + - * /
注意:
除法运算必须加(), 如果都没有单位,最后的结果没有单位.
如果有一个带单位,那么以带单位的值为准.
如果都带有单位,以第一个为准
嵌套: 对应的html结构
注意: & 表示当前对应的父类选择器
div {
p {
&
span {
&
}
}
}
混合(函数, 公共样式)
.自定义函数名(@num1:xxx, @num2:xxxx) {
属性: 值;
属性: 值;
}
div {
.自定义函数名(red, 12px);
}
数组的方法
- 数组的方法
ary.push();
ary.pop();
ary.shift();
ary.unshift();
ary.splice();
ary.reverse();
ary.sort(function(a, b){
return a - b;
return b - a;
});
ary.fill();
ary.concat();
ary.join();
ary.map(); 返回修改后的新数组
ary.forEach(); 遍历数组
ary.some(); 返回是布尔值
ary.every(); 返回是布尔值
ary.reduce(); 累加计算(累加求和)
ary.indexOf(); 获取数组中值对应的索引
ary.lastIndexOf(); 获取数组中值对应的索引
ary.findindex(); 获取数组中值对应的索引
ary.filter(); 筛选,返回赛选后的数组
ary.slice(); 截取
ary.toString(); 转为字符串
ary.valueOf(); 获取值
扫一扫
116
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
