javascript web API

一JS组成

1
js基础由 ECMAscript 标准规定语法
WEb API 由 W3C组织规定的

2 API 和 WEb API

  •  API （Application Programming  Linterface）应用程序编程接口 ，是一些预先定义好的函数，目的是提供应用程序与开发人员基于软件或者硬件得已访问一组列程的能力，而无需访问源码，或理解内部工作机制细节
  • web api
    web api 是浏览器提供的一套操作浏览器功能的页面元素的api（BOM 和 DOM）
    web api 一般都有输入和输出，（函数的传参和返回值）web api 很多都是，方法（函数）；

二  DOM (Document Object Model)
DOM是w3c组织推荐的处理可扩展标记语言（HTML 或 XML）的标准编程接口

  • DOM  树
     

文档：一个页面就是一个文档，DOM中用documen 表示
元素：页面的所有标签都是元素，DOM中用 element表示
节点：网页中所有的内容都是节点（标签，属性，文本，注释等）DOM中用node表示
 

  • 操作元素 
    document.getElementById() 通过id获取元素
document.getElementsByTagName()通过标签名字获取元素
document.getElementByClassName()通过类名获取元素
document.querySelectorAll()获取元素集合
document.querySelector()获取元素
document.body获取body元素
document.documentElement获取html元素

    3事件

  • 事件是由三部分组成：事件源，时间类型，事件处理程序，也称为事件三要素
     

  • 事件源：事件被触发的对象

  • 事件类型：如何触发，什么事件，比如鼠标点击，按下，经过，键盘按下

  • 事件处理程序：通过函数赋值的方式完成

4 获取，修改，标签内容

  • innerText       
  • innetrHTML(常用)
  • value
  • src
  • href 
    <body>
    <div onclick="alert('nihao')">12</div>
    <a href="http://www.baidu.com">百度/淘宝</a>
    <img src="/images/图层 26.png" alt="">
    <script>
        var div = document.querySelector('div');//获取div元素
        var a = document.querySelector('a');//获取 a元素
        var img = document.querySelector('img');//获取 img 元素
        console.log(div.innerHTML);//获取元素内容
        div.innerHTML = 'hello';//x修改内容
        div.innerText = 'hello';//如果带有空格 ，换行 。会自动取消空格，换行
        a.href = 'http://www.taobao.com';//修改href 路径
        img.src = '/images/图层 21.png';//修改图片路径
    </script>  
</body>

    5修改 css样式

  • 元素 .style.属性  = '属性值'；
    若属性有两个及以上单词，要用驼峰命名法

  • 元素.className = '类名'；
    如果动态修改较多css 样式，可以预先创建一个类名，修改时直接赋值给元素
    但是元素有类名的情况下，会覆盖掉，
    解决 ，再把原先的类名写上，空格隔开即可
    例如
     

    div.className = 'box box1'

  • 排他思想
    取消所有的样式，单独给当前元素修改效果

  • 获取元素的属性值
    1 element.属性
    比如  div.id 
    2 element.getAttibute('属性');
    比如 div.getAttribute('id')
    还可以获取自定义的属性

  • 修改 设置 元素的属性值
    1 element.属性 = '值'；
    2 element.setAttribute ("属性"，"值");

  • 移除，删除 属性
    element.removeAttribute('属性')；
     

  • 自定义属性规范
    data-属性 = '' '';
     H5新增 获取自定属性方法
    element.dataset.自定义属性；
    dataset 是一个集合里面存放了所有以data开头的自定义属性

  • 节点操作
    一般节点至少拥有nodeType（节点类型），nodeName(节点名称),nodeValue(节点值)这三个属性
    元素节点 nodeType 为1
    属性节点 nodeName 为2
    文本节点 nodeValue 为3   文本节点包含文字，空格，换行等

  • 节点层级
    1 父级 节点

    node.parentNode


    返回某节点的父节点   注：是返回的直接父级 找不到返回null 

       2 子节点
 

         node.children
         node.firstElementchild  第一个元素节点
         node.lastElemenrchild 最后一个子元素节点
         或者 node.children[0] 返回第一个

          node.children[ node.children.length-1 ]  返回最后一个

  • 兄弟节点

    nextElementSibling  下个元素节点
previousElementSibling  上个元素节点

    注：找不到返回null  IE9 以上支持

  • 节点操作
        

           /*创建*/
        document.createElement('标签名')//创建标签
        var li = document.createElement('li')//创建一个li 节点
        /*添加*/
        node.appendchild(child)  // node 父级 child 子级
        ul.appendchild(li);//此节点加入父级最后一个
        /*指定添加*/  
        node.insertBefore(child,指定元素位置即索引);//把标签添加在指定位置前面
        ul.insertBefore(li,ul.childer[0]);//把li 添加到ul子元素的第一个
        /*删除*/
        node.removeChild(child);//删除
        ul.removeChild(ul.children[0]);//删除ul子元素 索引为0 的元素
        /*复制节点*/
        node.cloneNode();//参数为空，或者为false 是浅拷贝，只复制标签不复制内容
        //参数为true 深拷贝，复制标签及内容
        var list = ul.children[0].cloneNode(true); //拷贝需要储存到变量，方便把拷贝的添加到父 
        级元素
        ul.appendchild(list);//向ul添加拷贝的节点元素


        

  • 三种创建节点区别
    1 document.write() 创建元素 
    如果页面文档流加载完毕，再调用这句话会导致页面重绘（不推荐使用）
    2 innerHTML 创建元素
    创建多个元素效率更高（不要拼接字符串，采取数组形式拼接）结构稍微复杂
    3 document.createElement() 创建元素
    创建多个元素效率会低一些，但是结构更清晰，简单

三  事件

  •  1 注册事件概述
    给元素添加事件，称为注册事件，或绑定事件,注册事件有两种方式：传统方式 ， 方法监听注册方式

  • 事件侦听注册事件 addEventListener （）
     里面的事件类型是字符串，必须加引号  不用加  on
    同一个元素可以添加多个侦听器
     
  • 参数
    addEventListener （‘行为’，‘时间处理函数’，true/false）；
    注；true 是捕获阶段
    false是 冒泡阶段，不写也默认是冒泡阶段
     
  • 删除事件  

          1 传统方式


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


           2 事件监听移除

  div.addEventListener('click',fun);
        function fun(){
            div.removeEventListener('click',fun)
         }

注意，事件函数不用带 （）； 直接写函数名

  • DOM 事件流
    事件流描述的是从页面中接收事件的顺序
  • 事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即是DOM事件流
    DOM事件流分为三个阶段

       1 捕获阶段
       2   当前目标阶段
        3  冒泡阶段
    

 dom事件流
注意：1js代码中只能执行捕获阶段或者冒泡其中一个阶段
           2 onclick 和 attachEvent(ie的以前事件方式) 只能为冒泡阶段
           3 事件监听事件，可以设置 为 true false 
          4 有些事件是没有冒泡行为的 比如 onblur ,onfocus onmouseenter ,onmouseleave

  • 事件对象 event
      
     div.addEventListener('click',function(event){
          console.log(event);
      })

    1 event 就是一个事件对象，写到我们侦听函数的小括号里面，当形参来开
    2 事件对象只有有了事件才会存在，他是系统给我们创建的，不需要我们传参数
    3 事件对象是我们事件的一系列相关的数据集合,跟时间相关的，比如鼠标点击，里面就包含了鼠标的相关信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息，比如判断用户按下了哪个键
     

     div.addEventListener('click',function(event){
          console.log(event);
      })



    4 可以简写为 evt  e 
    5 ie 678 不支持

      div.addEventListener('click',function(event){
          e = e || window.event
          console.log(event);
      })

  • 事件对象常见的属性和方法
    1 e.target  返回的是触发事件的对象元素
    this 返回的是绑定事件的对象元素
    e.target 点击哪个返回哪个，this是绑定哪个返回哪个
  • e.type  返回事件类型 
      div.addEventListener('click',function(e){
          e = e || window.event
          console.log(e.type);
      })

阻止默认行为（事件）
让连接不跳转，或者让按钮不提交，

    div.addEventListener('click',function(e){
          e = e || window.event
          e.preventDefault()//监听事件
      })
      div.onclick = function(e){
          e.preventDefault();//正常浏览器
          e.returnValue//ie 678 版本
          return false;//传统事件通用，但是return后面还有代码的话就不会执行了
      }
  • 阻止冒泡行为 
    
      div.addEventListener('click',function(e){
          e = e || window.event
          e.stopPropagation();//停止冒泡行为
      })

          

  • 事件委托
    原理：不是每个节点单独设置事件监听器，而是事件监听器设置在器 父节点上，然后利用冒泡原理影响设置每个子节点
     

  • 常用的鼠标事件

  • 常用键盘事件

    e.keycode 属性返回该键的ASCII 值
    keyup ，keydown 事件不区分大小写
    keypress区分大小写 大写和小写的ASCII 值  不一样
     

      
        document.addEventListener('keyup',function(e){
          console.log(e.keyCode);//返回的是按键的ASCII 值
      })


     

    BOM

  • BOM概述：BOM（Browser Obiect Model）即浏览器对象模型，它提供了独立内容而与浏览器窗口进行交互的对象，其核心就是window
     

  •  一   BOM的组成
    window 对象是浏览器的顶级对象
               它是js访问浏览器窗口的以接口
               它是一个全局对象，定义在全局作用域的变量，函数，都是window 对象的 属性 和方法

  • 二  window常见的事件

  • window.onload = function (){};
window.addEventListener('load',function(){})
/* load等页面内容全部加载完毕，包含页面 dom元素，
图片 ，flash ，css，等再去执行事件函数 
*/

  • document.addEventListener('DOMContentLoaded',function (){})
/*DOMContentLoaded 事件触发时，文档dom加载完成，
不包含 样式表，图片，flash 等*/
  • 调整窗口大小事件
window.onresize = function(){};
winwow.addEventListener('resize',function(){})
/*当窗口大小发生改变时，触发事件*/
  • 定时器 
    setTimeout (调用函数，延迟的毫秒数）；

    注 延时单位是毫秒。可以省略，省略默认为0
    调用函数可以直接写函数，或者函数名
    setTimeout是隔多久执行，只执行一次
    setTimeout（）也称为回调函数，callback

  • 普通函数按照代码顺序直接调用，而回调函数需要等待时间，时间到了才去调用因此称为回调函数

  • 清除定时器

clearTimeout(定时器函数名)//清除定时器
  • 定时器 
    setInterval(调用函数，每隔多久执行一次/毫秒)
      
    setInterval 是隔多久调用一次，重复调用
clearInterval(定时器函数名)//清除定时器

三 js执行机制

  •  js是单线程      js语言的一个特点，就是单线程，也就是说同一个时间只能做一件事
  • 单线程意味着 ，js任务需要排队，一个执行完才能执行下一个
  • 导致的问题：如果js执行时间长，会造成页面渲染不连贯，导致页面渲染加载阻塞。
  1. 同步和异步  （解决堵塞的问题）
    （1）同步：前一个任务执行完，在执行下个
    （2）异步：同时进行多个任务
    同步任务：同步任务都在主线程上执行，形成一个执行栈
    异步任务：js 异步是通过回调函数实现的，异步任务有以下三种 
       I  普通事件：例如 onclick ，resize 等
       II  资源加载 ： 例如 load 。error等
      III  定时器：例如setTimeout，setInterval

           异步任务相关；回调函数，添加到任务队列中，任务队列也称为消息列表

    2.执行机制
      2.1先执行 执行栈中的同步任务
      2.2 异步任务回调函数放入任务队列中
      2.3 一旦执行栈中的所有同步任务 执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行

四  location 对象

  1. location 属性是用于获取或设置窗体的URL ，并可用于解析URL，（返回的是一个对象，所以也称为location对象） 
     
  2. URL(Uniform Resourse Locator)是互联网上标准资源地址，互联网上的每一个文件都有一个唯一的URL
     
  3. URL语法格式   

protocol://host[iport]/path/[?query]#fragment
例如 http:///www.itcast.cn/index.html?name=andy&age=18#link

protocol:通信协议 常用的  http ftp maito等
host ：主机（域名）
port：端口号（可省略）http默认为80端口
path：路径，有0个或1个符号隔开，一般表示主机上目录或文件地址

query：参数，以键值对的形式通过& 符号隔开
fragment：片段，#后面的内容常见于链接锚点

4 location 对象的属性
 

location.href//获取或者设置 URL
location.host//返回主机（域名）
location.port//返回端口号
location.pathname//返回路径
location.search//返回参数
location.hash//返回片段，# 后面的内容常见链接锚点

5 location 对象常见方法
 

location.assign();//跟href 一样可以跳转页面，也称为 重定向页面
location.replace();//替换当前页面，不记录历史，不能后退
location.reload();//刷新页面，参数为true 强制刷新  ctrl + f5

五  navigator对象

  • navigator对象包含了有关浏览器相关信息，有很多的属性，常见的是   userAgent ，该属性可以返回有客户机发送服务器的 user-agent 头部的值
    可以用来判断用户用的那个终端打开页面，实现跳转，   

 六 history  对象
 history 与浏览器历史记录进行交互，该对象包含用户在浏览器窗口中访问过的URL

history方法
 

history.back()//回退
history.forward()//前进
history.go()//指定参数 前进 后退

PC  网页特效

  • 一   元素偏移量  offset系列

 注意：返回值不带单位，

  •  元素可视区 client  系列
  • 立即执行函数  
            (function(){}())//写法一 函数立即执行，自调用
        (function(){})()//写法二 函数立即执行，自调用

    主要作用：独立创建作用域，避免命名冲突（函数执行完会自动释放空间）

  • scroll 系列 

     

  •  scroll事件   滚动触发 

       div.addEventListener('scroll',function(){//滚动触发事件
            console.log(div.scrollTop);
        })


总结三系列的用法：

  • 鼠标事件  mouseenter
    当鼠标移动到元素上时就会触发  mouseenter事件
    类似mouseover ，他们两者之间的差别就是：

    mouseover鼠标经过自身盒子会触发  ，经过子盒子还会触发
    mouseenter只会经过自身盒子触发
    之所以这样就是mouseenter  不会冒泡
    跟mouseenter、搭配鼠标离开   mouseleave同样不会冒泡 




     
  • 移动端事件
     
  • 一  触屏事件  touch
    touch（也称为触摸事件） 对象是一个触摸点，触摸点可能是一个手指，也可能是一个触摸笔，触屏事件响应用户手指（或触屏笔）对屏幕或者触控板操作

     
  • 常见事件
     
  • touchstart 手指触摸到一个DOM元素时触发
  • touchmove  手指在一个DOM元素上  滑动触发
  • touchend  手指从一个DOM元素上移开时 触发



     
  • 二   触屏对象

TocuhEvent 是一类描述手指在触摸平面（触摸屏，触摸板）的状态变化的事件，这类事件用于描述一个或多个触点，是开发者可以检测触点的移动，触点的增加和减少等等

常见的触摸事件对象   ：

touches  正在触摸屏幕所有的手指列表
targetTouches 正在触摸当前DOM元素上的手指列表
changedTouches 手指状态发生了改变的列表，从无到有，从有到无的变化

平时都是给元素注册触摸事件，重点注意 targetTouches

 targetTouches [0]  就可以得到正在触摸Dom元素的第一个手指的相关信息，比如手指的坐标的等等

  • 三 移动端拖动元素
    拖动三部曲：
    1 触摸 touchstart 获取初始坐标，同时获取盒子原来的位置
    2 移动手指touchmove 计算出手指滑动距离，并且移动盒子
    3 离开 touchend 
    注意：手指移动也会触发滚动屏幕所有要阻止屏幕滚动。e.preventDefault();

补充： classList 属性
classList属性是HTM5新增的一个属性，返回元素类名

添加类名 （是在后面追加类名，不会覆盖原有类名，不用加   “ . ”   ）

div.classList.add('类名')//添加类名 注意不用加" . "
div.classList.remove('类名')//删除类名
div.classList.toggle('类名')// 有这个类名，会移除。没有这个类名会添加上

                
 

 

posted on 2021-10-03 20:13  oh日常  阅读(125)  评论(0)    收藏  举报
博客园  ©  2004-2026
浙公网安备 33010602011771号 浙ICP备2021040463号-3