webAPI基础知识

最新推荐文章于 2024-03-27 08:30:14 发布

孤独的天才

最新推荐文章于 2024-03-27 08:30:14 发布

阅读量1.4k

点赞数 5

分类专栏：前端文章标签： webAPI知识

本文链接：https://blog.csdn.net/qq_40181206/article/details/101996862

版权

前端专栏收录该内容

34 篇文章 26 订阅

订阅专栏

WebAPI

节点：标签、文本、属性

获取节点DOM

ById

参数：id的字符串

返回值：DOM节点也是对象

document.getElementById('id字符串');
//获取body
document.body

ByTagName
- 参数：标签名的1字符串
- 返回值：伪数组没有forEach方法可以遍历可以使用for循环
```
document.getElementsByTagName('li');
```
ByClassName
- 参数：类名的字符串
- 返回值伪数组没有forEach方法可以遍历可以使用for循环
```
document.getElementsByClassName('.box');
```
querySelector
- 参数：css选择器
- 返回值：返回节点对象（第一个被选中）
```
var box=document.querySelector('.box');
```
querySelectorAll
- 参数：css选择器
- 返回值伪数组可以使用forEach循环遍历 for循环
```
var lis=document.querySelectorAll('li');
```

注册事件on+事件类型

注册点击click事件

事件源
点击行为
响应

        btn.onclick=function(){
            alert('1');
        }

注册focus和blur事件

focus 获取焦点

blur 失去焦点

txt.onfocus=function(){
    
}
txt.onblur=function(){
    
}

鼠标按下mousedown
```
box.onmousedown=function(){
    
}
```
鼠标移动mousemove
```
box.onmousemove=function(){
    
}
```
鼠标弹起mouseup
```
box.onmouseup=function(){
    
}
```

键盘按下keydown

document.onkeydown=function(e){
    console.log(e.keyCode);//返回不同的键的码数
    console.log(e.ctrlKey);//判断按下的键是否为ctrl键
}

键盘弹起keyup
```
document.onkeyup=function(){
    
}
```
鼠标进入
```
box.onmouseover=function(){
    
}
```
鼠标移出
```
box.onmouseout=function(){
    
}
```

滚动事件

p.onscroll=function(){
    //卷入的高度
    console.log(p.scrollTop);
}

对象的属性

属性：

标准属性：
- style

            console.log(btn.style);//返回是style对象

            //获取
            console.log(btn.style.width);

            //设置
            btn.style.backgroundColor='red';

开关属性
- 值的状态只有两个 true false
- disabled 设置是否禁用
- checked 设置是否选择
- selected 设置下拉框是否选择

btn.value 是专门针对表单元素的标签 textarea 也尽量用value值进行获取
innerHTML
- 返回值为string类型
- 可以识别html结构
```
btn.innerHTML='<li>新的元素</li>';
```
操作属性的方法：
- 对属性进行增删改查
  - 获取属性getAttribute(‘属性名’)
    - 参数：属性名
    - 返回值：属性值
```
box.getAttribute('abc');//可以获取标准属性和自定义属性，还可以获取自己定义的属性名
```
  - 设置属性setAttribute(‘属性名’,‘属性值’)
    - 参数：属性名和属性值
```
box.setAttribute('abc','234');
```
  - 删除属性removeAttribute(‘属性名’)
    - 参数：删除的属性名
```
box.removeAttribute('属性名');
```

设置和获取类名

语法：

//获取
console.log(box.className);
//设置   原来的类名完全被覆盖
box.className='e'；
box.className+='bg_red';

classList

对类名进行增删改
- 返回值：返回一个对象

添加类名：

btn.onclick=function(){
    div.classList.add('bg_red');
}

删除类名

btn.onclick=function(){
    div.classList.remove('bg_red');
}

切换类名

btn.onclick=function(){
    div.classList.toggle('bg_red');
}

自定义属性

自定义属性命名：

//以data-开头进行命名
<input type="button" data-src='./images/01.jpg'>

自定义属性获取

console.log(input.dataset);
//返回一个对象
console.log(input.dataset['src']);//input.dataset.src

函数内部有一个关键字 this 获取当前对象

var div=document.getElementById('box');
div.onclick=function(){
    console.log(this);//div
}

全选与反选案例

        var allCk=document.getElementById(‘all)；
        var cks=document.getElementsByClassName('ck');
        allCk.onclick=function(){
            for(var i=0;i<cks.length;i++){
                cks[i].checked=allCk.checked;
            }
        }
        var is_checked;
        for(var j=0;j<cks.length;j++){
            cks[i].onclick=function(){
                is_checked=true;
                for(var i=0;i<cks.length;i++){
                    if(cks[i].checked==false){
                        is_checked=false;
                        break;
                       }
                }
                if(is_checked){
                    allCk.checked=true;
                }else{
                    allCk.checked=false;
                }
            }
        }

注册事件addEventListener

多次注册事件不被覆盖

语法

btn.addEventListener('click',function(){
    
})

小知识：

btn.click();
//调用点击事件 不论按钮是以on+事件类型方式还是addEventListener注册的点击事件均可以使用此方式进行调用注册的点击事件

事件三个阶段

捕获：从外向里
到达目标

冒泡：从内向外默认事件是在冒泡阶段执行的

box.addEventListener('click',function(){
    
},false);//默认是false 表示冒泡阶段执行事件

box.addEventListener('click',function(){
    
},true);//true 表示捕获阶段执行事件

阻止冒泡

box.addEventListener('click',function(e){
    e.stopPropagation();
},false)

事件对象

描述一次点击行为，看成是一个对象
属性和方法
- 获取位置
  - 可视区域
    - e.clientX()；
    - e.clientY();
  - 页面左上角
    - e.pageX()
    - e.pageY()
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JsXjSz9A-1570087147981)(C:\Users\刘晓慧\AppData\Roaming\Typora\typora-user-images\1568878061632.png)]
- 获取目标对象
  - e.target
- 获取绑定事件对象
  - e.currentTarget==this
- 阻止浏览器默认行为
  - e.preventDefault()
  - return false;
```
document.oncontextmenu=function(){
    return false;
}
```

获取元素位置

当子元素没有设置定位时

box.offsetLeft=父元素的边框+父元素的marginLeft+父元素的paddingLeft+子元素的marginLeft
box.offsetTop=父元素的边框+父元素的marginTop+父元素的paddingTop+子元素的marginTop

当子元素设置定位

box.offsetLeft=left+marginLeft//无论是以谁定位
box.offsetTop=top+marginTop//无论是以谁定位

获取元素位置的相对于哪个父亲

box.offsetParent

跟着鼠标飞

想要东西飞起来就要设置脱标
- position:absolute 绝对定位相对于浏览器也就是页面左上角会随着滚动条的滚动而滚动
- position:fixed 固定定位相对于可视窗口区域不会随着滚动条滚动而滚动
- 所以：
  - 绝对定位和pageX、pageY搭配
  - 固定定位和clientX和clientY搭配，当然也可以和pageX和pageY搭配

事件解绑

当用on+事件类型进行解绑方式

btn.onclick=function(){
    btn.onclick=null;
}

当用addEventListener事件进行解绑方式

btn.addEventListener(‘click’,function fn(){

btn.removeEventListener(‘click’,fn);

})

事件委托

当一些本身存在的子元素设置某些事件，但一旦父元素想办法进行添加一些新的子元素的时候，之前设置的子元素的某些事件就会失效，所以引入事件委托
为了让新增的子元素也有此事件的行为

给子元素的父元素注册事件利用冒泡原理实现父元素所有子元素注册事件

//e.target.nodeType:
//节点标签：1
//属性：2
//文本：3

//e.target.nodeValue
//节点标签：null
//属性:属性值
//文本：文本内容

//e.target.nodeName
//节点标签：eg:LI
//属性：小写属性名
//文本：#text

ul.addEventListener('click',function(e){
    if(e.target.nodeName=='LI'){
        alert('1');
    }
})

修改、创建、添加节点

修改
- 设置DOM节点内部html结构识别HTML结构
```
		box.innerHTML='<a href="#">百度</a>';
```
- 设置DOM节点内部的文本内容
```
		box.innerText='我是你爸爸';
```

创建节点

只是在js中创建，在页面中不显示

var li=document.createElement('li');
document.write();//识别html结构

添加节点
- 在父元素的最后一个子元素后面添加
```
ul.appendChild(li);
```
- 在指定位置添加子元素
```
ul.insertBefore(li,first);
```

发布微博

增删改本地存储

通过节点获取节点

以下均为属性

获取所有的子元素

		ul.children;//返回所有亲生子元素 伪数组

获取亲生父元素

		li3.parentNode;

获取兄弟元素

		li3.nextElementSibling;
		li3.previousElementSibling;

删除节点

方法
```
ul.removeChild(first);
```

BOM

window及onload

window是顶级对象
window上大部分的属性和方法都是window调用的
- 所有全局变量和函数都是window顶级对象上的属性和方法
```
window.a;
var a;
function fn(){}
window.fn();
```
- 隐式全局变量，不推荐使用
- onload 等静态文件全部加在完成，其内部代码才进行执行
```
window.onload=function(){
    
}
```

定时器

一次性定时器
- 第一个参数：等待一定时间后执行的函数
- 第二个参数：设置等待多久毫秒
- 返回值：清除定时器
```
var timer=setTimeout(function(){
    
},1000)

//清除定时器
clearTimeout(timer);
```
永久定时器
- 第一个参数：等待一定时间后执行的函数
- 第二个参数：设置等待多久毫秒
```
var timer=setInterval(function(){
    
},1000)
//清除定时器
clearInterval(timer);
```

BOM的location

BOM上的一个属性重新指定浏览器的地址栏上的地址页面就会进行跳转
```
location.href='http://www.baidu.com';
//必须加协议http://
```

BOM的localStorage

用于将一些数据进行本地存储

返回对象

setItem设置本地数据
```
locaStorage.setItem('a',a);
```

getItem获取本地数据

localStorage.getItem('a');
//获取不存在的数据 返回null

removeItem删除本地数据
```
localStorage.removeItem('a');
```
全部清空
```
localStorage.clear();
```

JSON

因为本地数据存储为字符串格式，当遇到一些对象时，需要转换为字符串，因此BOM提供其JSON格式的字符串的转换
一般格式(字符串数字)
所有的键和使用双引号包起来

字符串也用双引号包起来

var arr=[
    {
        info:"",
        
    }
]

把对象转换为JSON格式的字符串

参数：对象

返回值：JSON格式的字符串

var str=JSON.stringify(arr);
//存入本地时候，对于复杂类型的数据进行转换字符串

把JSON格式的字符串转换为对象
- 参数：JSON格式的字符串
- 返回值：对象
```
var arr=JSON.parse(str);
```

获取DOM节点的样式

只能获取行内样式
```
div.style.left;
```
BOM中的getComputedStyle
- 参数是DOM节点
- 返回值：返回DOM节点的样式对象
```
window.getComputedStyle(box).width;
```

返回盒子的实际宽度和高度

width=content+padding+border
height=content+padding+border

返回值：数字类型

box.offsetWidth;
box.offsetHeight;
console.log(box.style.width);//返回字符串 eg:120px; 只能获取行内元素 可以进行获取和设置
console.log(box.offsetWidth);//返回数字 eg:120;只能进行获取不能设置 获取行内和css内部的样式 获取盒子真实宽度
console.log(window.getComputedStyle(box).width);//返回字符串 eg:120px 返回的就是盒子的内容区域 只能进行获取 可以获取行内和css样式里的样式
console.log(box.clientWidth);//返回数字，eg:100 返回的是盒子的可视区域的宽度，即width+padding 可以获取行内和css内部的样式

tab栏

排他功能
自定义属性的使用

手风琴

排他功能

旋转木马

利用数组存储类名，在每次点击按钮时候，进行转换数组的顺序，使图片的类名重新进行赋值
点击右键数组的操作是，删除第一个，进行添加数组的后面
点击左键数组的操作时删除最后一个进行添加数组的前面

360开机动画

只能使用addEventListener注册事件
动画设置无限播放，下面的事件不会生效

animationend

ul.addEventListener('animationend',function(){
    console.log('动画已经执行完');
})

transitionend

ul.addEventListener('transition',function(){
    console.log('过渡已经执行完');
})

放大镜

比例计算

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BdRsONbh-1570087147989)(C:\Users\刘晓慧\AppData\Roaming\Typora\typora-user-images\1569330592598.png)]

事件对象-触摸事件

移动端
推荐使用addEventListener注册事件

触摸开始

box.addEventListener('touchstart',function(e){
    console.log(e.touches);//获取屏幕上所有的触摸点
    console.log(e.targetTouches);//获取元素上的触摸点
    console.log(e.changedTouches);//变化后的触摸点，获取离开屏幕上时的最后的点
})

触摸移动

box.addEVentlistener('touchmove',function(e){
     console.log(e.touches);//获取屏幕上所有的触摸点
    console.log(e.targetTouches);//获取元素上的触摸点
    console.log(e.changedTouches);//变化后的触摸点，获取离开屏幕上时的最后的点
})

触摸结束

box.addEventListener('touchend',function(e){
     console.log(e.touches);//获取屏幕上所有的触摸点
    console.log(e.targetTouches);//获取元素上的触摸点
    console.log(e.changedTouches);//变化后的触摸点，获取离开屏幕上时的最后的点
})

封装tap手势

思路：
- 获取开始触摸时的位置及时间，判断屏幕上所有的触摸点为1
- 获取离开屏幕时的位置及时间，判断离开时候变化的触摸点数为1
- 进行计算时间差和位置差，然后设置的标准进行比较，如果符合进行执行回调函数

zepto类库引入

语法类似于jQuery

获取节点对象
```
var div=$('div');
```
设置样式
```
box.css({
    width:'500px'
})
```

绑定事件

box.on('click',function(){
    
})
box.click(function(){
    
})

添加子元素
```
box.append('<a href="#">百度</a>');
```

显示或者隐藏

box.show();//显示
box.hide();//隐藏
//对于设置毫秒值的参数的时候，对于jQuery比较适用

手势一些模块分开进行引入

touch.js的引入

点击事件
```
box.on('tap',function(){
    
})
```

左滑

box.on('swipeLeft',function(){
    
})

右滑

box.on('swipeRight',function(){
    
})

轮播图

轮播图-无缝滚动

利用过渡执行结束事件以及定时器的控制是否有过渡，实现无缝滚动的效果

swiper插件

语法：

<!--引入css和js文件-->
<div class='swiper-container'>
    <div class='swiper-wrapper'>
        <div class='swiper-slide'>
            <a href='#'>
            	<img src=''>
            </a>
        </div>
    </div>
    <!--如果需要分页器-->
    <div class='swiper-pagination'>
        
    </div>
    <!--需要导航按钮-->
    <div class='swiper-button-prev'>
        
    </div>
    <div class='swiper-button-next'>
        
    </div>
    <!--需要进度条-->
    <div class='swiper-scrollbar'>
        
    </div>
</div>

var mySwiper=new Swiper('.swiper-container'{
           //过渡执行时间
             speed:200,
           //形成闭环
              loop:true,
           //自动播放
               autoplay:true,
               navigation:{
                    nextEl:'.swiper-button-next',
                    prevEl:'.swiper-button-prev'

              },
                pagination:{
                    el:'.swiper-pagination'
                },
                scrollbar:{
                       el:'.swiper-scrollbar',
                 }

})

孤独的天才

关注

5
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
webAPI基础知识

WebAPI节点：标签、文本、属性获取节点DOMById参数：id的字符串返回值：DOM节点也是对象document.getElementById('id字符串');//获取bodydocument.bodyByTagName参数：标签名的1字符串返回值：伪数组没有forEach方法可以遍历可以使用for循环document.ge...
复制链接

扫一扫

专栏目录