webAPI基础知识

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='
    新的元素
    ';
    
    

• 操作属性的方法：

  • 对属性进行增删改查

    • 获取属性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='百度';
  
  

  • 设置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('百度');
    
    

  • 显示或者隐藏

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

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

touch.js的引入

• 点击事件

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

• 左滑

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

• 右滑

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

轮播图

轮播图-无缝滚动

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

swiper插件

• 语法：

  
  <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',
                   }
  
  })