关于webAPI笔记--日常复习
webAPI第1天
1-文档
document: 整个文档
DOM : 操控文档--文档对象模型，操作网页上的元素的API
BOM : 浏览器对象模型--操作浏览器部分功能的API
2-获得元素
1.通过id名获得元素--documenlementById('id名')--dgi
2.通过标签名获得元素--document.getElementsByTagName('div');--dgt
3.通过类名获得元素--document.getElementsByClassName('');--dgc
4.通过name值来获取元素--document.getElementsByName('');--dgn
5.通过选择器名获得元素
#box{
} ID选择器--document.querySelecto--doq
.items{
}类选择器--document.querySelectorAll--doa
3-点语法设置css属性
1.样式---style 样式属性值---字符串
2.如果css属性名带有 -- , 应该去掉,然后首字母大写
3.js设置css属性连写 -- divBox.style.border = '5px solid blue';
4-事件
1.三要素
事件源--谁来做--拿到的是数组,所以要加下标--直接拿到元素
事件类型--怎么做--当元素被点击的时候,执行函数--onclick
事件类型--做什么
2.给页面元素设置事件
鼠标单击 onclick
鼠标移入 onmouseover
鼠标移出 onmouseout
成为焦点 onfocus
失去焦点 onblur
表单输入 oninput
5-获取标签内容
1.innerText--获得标签内部文本,但是隐藏的元素无法获取
2.innerHTML--获取标签内所有的内容(文本,标签,属性,隐藏的内容)
3.textContent--获得标签内的文本内容,包括隐藏的元素--低版本浏览器不兼容(上古IE)
6-阻止a标签跳转
<a href="#你来动我啊">百度a>
<a href="JavaScript:">京东a>
<a href="JavaScript:void(0)">京东a>
<a href="JavaScript:null">京东a>
<a href="JavaScript:undefined">京东a>
<a href="#" onclick="return false">淘宝a>
有多种方式可以a标签的跳转阻止，第一种不建议，其他的看你喜欢
webAPI第2天
1-内置系统属性
获取
1.点语法
内置属性获取
console.log(box.mm)
2.中括号 +key的方式
3.geAttribute( )
内置或者自定义属性都可以获取
console.log(box.getAttribute( ' id ' ) )
设置(添加)
1. 点语法
divBox.mm = '秀儿'
可以设置,但是不会再行内显示
2. 利用中括号
divBox['mm'] = '秀儿'
可以设置,不在行内显示
3. setAttribute
divBox.setAttribute( ' mm ' , ' pipi ' )
可以设置,还在行内结构显示
删除
1. 点语法
divBox.mm = ' '
只能删除属性值,无法删除属性名 自定义属性无法控制
2. 中括号 + key
divBox [ ' mm ' ] = ' '
删除了值,属性名还在 自定义无法控制
3. removeAttribute
divBox.removeAttribute( ' mm ' )
连根拔起 属性名和属性值都删除了
2-节点
2-1种类
1.元素节点
类型 : 1
名称 : 大写标签名
内容 : null
2.属性节点
类型 : 2
名称 : 属性名
内容 : 属性值
3.文本节点
类型 : 3
名称 : #text
内容 : 文本内容
4.注释节点
类型 : 8
#comment
内容 : 注释内容
2-2特性
节点类型--nodeType
节点名称--nodeName
节点值----nodeValue
2-3子节点–childNodes
把空的文本节点当成节点
获取所有元素的子节点
元素节点
文本节点
注释节点
2-4Children
Children
只显示元素节点即使非空的文字节点也不显示
获取所有子元素节点--元素节点
3-排他思想
先排除掉其他的(包括自己),最后再给自己(this)加想要的效果
4-设置索引index–>i
lis[i].setAttribute('index', i);
webAPI第3天
1-文本节点
1-节点与元素节点
1-1上一个节点与上一个元素节点
console.log(pBox.previousSibling);//文本:回车
console.log(pBox.previousElementSibling);//元素节点
1-2下一个节点与下一个元素节点
console.log(box.nextSibling); //文本: 回车
console.log(box.nextElementSibling); // 元素节点
1-3第一个子节点与子元素节点
console.log(box.firstChild); // 元素/文本/注释
console.log(box.firstElementChild); // 元素
1-4最后一个子节点与最后一个元素节点
console.log(box.lastChild); // 文本: 回车
console.log(box.lastElementChild); //元素节点
1-5如何获得父节点
通过子元素获得父元素
console.log(box.parentElement);
comsole.log(box.parentNode);
2-克隆节点与追加节点
2-1克隆节点
返回值,返回一个新节点
cloneNode( ) 克隆节点, 没有节点内容
cloneNode(true) 包括节点内容
克隆注意id问题
newBox.id += index;
idnex ++;
2-2追加节点
appendChild( ); 追加到父元素的后面
3-创建元素与删除元素
1-创建新元素
创建新元素 : creatElem( 标签名 )
只有document可以创建新的元素
document.createElement( ) ---快捷键 doc
2-删除元素
删除元素 : removerChild ( 需要删除的元素)
删除元素必须由父元素控制删除
removerChild(pArr[3])---删除指定元素
利用for循环removerChild(pArr[0])---删除所有元素
(父元素).innerHTML = ' '; 删除所有元素--简单快捷建议使用
3-插入元素
插入元素: insertBefore(需要插入的元素)
父元素.insertBefore(新元素,位置元素)
如果想插入到后面,那么必须获得下一个元素来设置
4-替换元素
父元素: replaceChild(新元素,旧元素)
由父元素调用,直接替换旧元素
5-键盘事件
onkeyup : 键盘弹起
onkeydown : 键盘按下
onkeypress : 键盘按下(屏蔽功能键)
6-输入框的内容
获得输入框内容 input.value
7-判断文字是否存在
字符串.indexOf(文字)
如果等于-1就代表不存在
4-静态结构与动态结构
使用querySelectorAll拿到的结构属于静态结构,后续document的改变对他没有影响
getElementsByTangName: 动态结构,会根据document的改变而改变
webAPI第4天
1- 定时器
1-普通版定时器
每隔一段时间,就执行某个操作一次 如:闹钟
// 声明定时器
// 1. 利用匿名函数的方式来声明
setInterval (
function(){
console.log('哥哥,我爱你');
},1000
// 1000是毫秒,也就是一秒钟
)
// 2. 利用封装函数方法
// timeID是定时器的编码
setInterval(love,1000);
2-倒计时版定时器
// 1.用匿名函数
// timeID = setTimeout(
// function () {
// console.log('现场燃爆了');
// }, 3000
// )
// 2. 函数封装定时器
timeID = setTimeout(boomEgg, 3000);
总结:
setlnterval---普通定时器
clearInterval(timeID)---清空定时器
----------------------------------
setTimeout---倒计时定时器
clearlTimeout(timeID)---清空定时器
普通定时器:每隔一段时间就执行一次
倒计时定时器:倒数结束之后,会执行一次代码,之后定时器就结束
3-定时器动画
1.利用定时器修改top或者left=值
2.每隔一段时间就修改位移距离
3.赋值时记得拼接单位
4.需要给动画设置到达终点停止定时器
5.注意定时器加速问题
4-盒子平移动画js
1. 互相干扰 因为共用同一个timeID
2. 互不干扰 利用元素对象保存各自的timeID
5-offset家族
1. 盒子真实宽度---offsetWidth
2. 盒子真实高度---offsetHeight
3. 与父元素左边距离---offsetLeft
4. 与父元素右边距离---offsetTop
6.-动画封装
// 2. 封装动画函数
function moveAnimation(elm,target) {
// 3. 清空定时器
clearInterval(elm.timeID);
// 4. 获得当前元素的位置
let elmLeft = elm.offsetLeft;
// 5. 设置步长
// 如果是往右走,那么步长为正数
// 如果是往左走,那么步长为负数
// 问题: 如何判断.步长是正数还是负数
// 还没有到终点,那就继续走,就是正数
// 如果已经超过终点,那就需要回头,就是负数
// 目标 当前
// target - elmLeft > 0 ,代表你还没到终点,继续走,正数
// target - elmLeft < 0 ,代表你已经超过终点,往回走,负数
let step = (target - elmLeft) > 0 ? 2 : -2;
// 5. 设置定时器
elm.timeID = setInterval(
function () {
// 6. 修改当前位置
elmLeft += step;
// 7. 判断盒子需不需要继续移动
// 如果剩余距离大于步长,那么继续走
// 如果剩余距离小于步长,那么写死终点,并停止定时器
// 剩余距离: 目标 - 当前---> Math.abs(target - elmLeft)
if (Math.abs(target - elmLeft) > Math.abs(step)) {
// 如果剩余距离大于步长,那么继续走
elm.style.left = elmLeft + 'px';
} else {
// 如果剩余距离小于步长,那么写死终点,并停止定时器
elm.style.left = target + 'px';
clearInterval(elm.timeID);
}
},5
)
}
7-判断回车
e.keyCode == 13
webAPI第5天
1-简单轮播图
// 需求:
// 点击数字按钮.背景会发生改变: 设置类名current
// 点击数字按钮,对应的ul需要发生位移: 调用动画函数
// 动画函数(谁动,去哪)
// 谁动: ul盒子
// 去哪: 根据按钮的下标来确定位移的距离
// 1. 获得需要的元素
let spanArr = document.getElementsByTagName('span');; //数字按钮
let ulBox =document.getElementsByTagName('ul')[0];; //运动元素
let moveWidth = document.getElementsByClassName('inner')[0].offsetWidth; //位移单位的长度
// 2. 遍历数字按钮设置点击事件
for (let i = 0; i < spanArr.length; i++) {
// 4. 给每一个按钮设置索引: index = i
spanArr[i].setAttribute('index',i);
// 3. 设置点击事件,修改背景颜色
spanArr[i].onclick = function () {
// 排他思想
for (let j = 0; j < spanArr.length; j++) {
spanArr[j].className = '';
}
this.className = 'current';
// 5. 根据按钮的索引,来确定位移的距离
// 按钮索引 目标距离
// 0 0 * 单位距离
// 1 1 * 单位距离
// 2 2 * 单位距离
// 获得当前点击的按钮索引值
let index = this.getAttribute('index');
// 6. 计算位移的目标距离
// 注意,因为动画整体失望左边移动,所以方向是负数
let target = -index * moveWidth;
// 7. 调用动画函数
moveAnimation(ulBox, target);
}
}
2-焦点轮播图
//当鼠标移入,箭头按钮出现
// 当鼠标移出,箭头按钮消失
// 左边箭头,上一页功能
// 右边箭头,下一页功能
// 根据点击的次数,来决定位移的距离
// 注意: 按钮的点击是有限制
// 位移距离 = -点击次数 * moveWidth;
let target = -clickCount * moveWidth;
3-简单焦点轮播图
// 3. 给每一个数字按钮设置点击事件
for (let i = 0; i < spanArr.length; i++) {
// 设置索引
spanArr[i].setAttribute('index', i);
spanArr[i].onclick = function () {
for (let j = 0; j < spanArr.length; j++) {
spanArr[j].className = '';
}
this.className = 'current';
let target = -this.getAttribute('index') * moveWidth;
moveAnimation(ulBox, target);
// 6. 每次点击数字按钮的时候,要让箭头按钮保持同步
// 将index与clickCount进行同步
clickCount = this.getAttribute('index');
4-自动无缝轮播图
// 1. 获取需要的元素
let ulBox = document.getElementsByTagName('ul')[0];//位移的元素
let timeID;
// 2. 设置一个定时器(不需要停止,永动机)
timeID = setInterval(moveInterval,8);
function moveInterval( ) {
let ulLeft = ulBox.offsetLeft;//当前位置
// 3. 修改位移的距离,整体往做运动,所以是负数
ulLeft += -2;
// 4. 将修改的位移,赋值给ul
// 判断: 当前ul位移是否已经达到替身图片
// 如果是,那么要立刻切换回第0张
// 如果已经到达替身图片,那就代表已经位移了四张图片的宽度总和: 1200
if (ulLeft > -1200) {
// 还没有到替身图片,可以继续平移
ulBox.style.left = ulLeft + 'px';
} else {
// 已经到达替身图片,再继续就会穿帮
// 应该立刻切换回第0 张的位置
ulBox.style.left = '0px';
}
}
document.getElementById('divBox').onmouseover = function ( ) {
clearInterval(timeID);
// 停止定时器
}
document.getElementById('divBox').onmouseout = function ( ) {
timeID = setInterval(moveInterval,8);
// 重启定时器
}
5-完整版轮播图
// 需求:
// 根据图片的数量来创建数字按钮
// 克隆第0张图片的元素,追加到最后,作为替身图片
// 点击数字按钮,会修改背景颜色
// 点击数字按钮,ul元素会进行位移
// 鼠标悬停会出现箭头按钮
// 下一页功能
// 上一页功能
// 箭头按钮与数字按钮也要同步
// 自动轮播功能
// 自动轮播的时候,数字按钮也要同步
webAPI第6天
1-获得元素样式属性
window.getComputedStyle(元素)['属性名']
通过封装函数减少代码量
2-scrool家族
scrollWidth 内容的宽---不受隐藏影响
scrollHright 内容的高---不受隐藏影响
scrollTop 垂直滚动距离
scrollLeft 水平滚动距离
3-滚动事件
onscroll事件 当滚动的时候回持续触发
获得页面滚动距离
4-client家族
宽高+padding
clientWidth 内容区域宽度
clientHeight 内容区域高度
---------------------
clientTop 上边框宽度
clientLeft 左边框宽度
5-获得页面滚动距离
document.body body标签
document.documentElement html标签
兼容方式:
1. scrollTop:document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop || 0
2. scrollLeft:document.documentElement.scrollLeft || window.pageXOffset || document.body.scrollLeft || 0
6-获得页面内容区域
1. clientWidth: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0
2. clientHeight:window.innerHeight|| document.documentElement.clientHeight || document.body.clientHeight || 0
7-事件对象
e = window.event || e;
事件对象: 不管是哪个事件被触发,都会产生事件对象,里面保存了一些与事件触发相关的信息
事件对象的三个坐标
1. clientX--Y
可视区域的左上角与触发点的距离
滚动出去看不见的区域是不算可视的
console.log('clientX:' + e.clientX);
2. pageX--Y
页面的左上角与触发点的
页面区域包括滚动出去的区域(不管页面有没有滚动)
console.log('pageX' + e.pageX);
3. screenX--Y
屏幕的左上角与触发点的距离
console.log('screenX' + e.screenX);
8-注册事件的方法
1. 利用on关键字----无法同时存在多个相同事件类型
2. 利用add方法
addEventListener('事件类型',执行函数,false)
事件类型:不要+on--->click,mouseover等
9-事件源
e.target---事件源:触发事件的源头
10-冒泡与捕获
冒泡:从内到外,从小到大
捕获:从外到内,从大到小
e.stopPropagation();
11-事件阶段
e.eventPhase
1-捕获
2-正常
3-冒泡
webAPI第7天
1-window中三个事件
1. window.onload --> 等页面加载完毕之后执行
2. window.onbeforeunliad -->页面关闭之前,要关闭还没关闭的一刹那
3. window.onunload -->页面正在关闭(执行完这个事件,整个页面就关闭了)
2-location对象
1.显示网站当前地址---->console.log(location.href)
2.修改当前地址,跳转页面---->location.href = 'http://www/jd.com';
location.assign('http://www.jd.com');
location = 'http://www.jd.com';
3.替换页面地址------->location.replace('http://www.jd.com');
3.重载页面------->location.reload();