WebApis- BOM&DOM

是W3C的标准,主要学习页面交互功能实现交互效果;

API是一些预先定义的函数,简单理解就是给程序员提供的一种工具,以便能轻松的实现想要完成的功能;

Web APIs是浏览器的API;

DOM

WebApis- BOM&DOM_第1张图片

文档对象模型,是处理html或者xml的编程接口;可以通过里面的接口修改网页内容,样式,结构;

  1. 文档:一个文档就是一个页面,DOM中使用document表示;
  2. 元素:页面中所有的标签就是元素;
  3. 节点:网页中所有的内容都是节点,比如标签,内容,文本,注释等。

获取元素

  1. 根据id获取:
    使用getElementByld()获取,因为文档页面从上往下加载,所以要先有标签 所以我们script写在标签下面;
var timer =document.getElementById('time');
  console.log(timer);
  console.log(typeof timer);//这里返回值是对象object
  console.dir(timer)//它是用来打印我们返回的元素对象,更好地查看里面的属性和方法;
  1. 根据标签名获取:
    使用getElementByTagName()方法可以获取指定标签名的对象的集合;
    返回对象是获取过来的元素对象的集合,以伪数组的形式存储的;
    如果页面中没有元素,返回的是空的伪数组

  2. 通过HTML5新增方法获取:
    (1) getElementsByClassName(‘这里面填class的名字’);根据类名返回元素集合;
    (2)querySelector(‘.box’/‘#nav’/‘li’):只能返回指定选择器的第一个元素对象;这里切记里面的选择器前面需要加符号;
    (3)querySelectorAll():返回的是指定选择器的所有元素对象集合,还是伪数组的形式;这里也要注意选择器前面需要加符号;

  3. 特殊元素获取:
    (1)获取body元素: var bodyEle = document.body;
    (2)获取html元素: document.documentElement;

事件基础

  1. 就是js里面的触发机制;
    事件由三部分组成:事件源,事件类型和事件处理程序;
    事件源:事件被触发的对象;
    事件类型:如何触发;
    事件处理程序:通过函数赋值的方式触发;
<body>
<button id="btn">syc</button>
<script>
    var btn = document.getElementById('btn');
    btn.onclick= function (){
        alert('超棒!')}
</script>

  1. 执行事件的步骤:
    获得事件源----注册事件(绑定事件)----添加事件处理程序(采取函数赋值形式)
<body>
<div>123</div>
<script>
  //1 获取事件源
  var div =document.querySelector('div');
  //2-绑定事件
  div.onclick;
  //3-添加事件处理程序
  div.onclick=function (){
    alert('我被选中了')
  }
</script>

</body>

操作元素(核心)

改变元素内容

  1. element.innerText;不识别html标签;非标准
  2. element. innerHtml;识别html标签;W3C标准;保留空格和换行;

常用元素的属性操作

<body>
<button id="ldh">刘德华</button>
<button id="zxy">张学友</button>
<img src="images/ldh.jpeg" alt="">
<script>
  //修改元素属性 src
  //1-获取元素
  var ldh = document.getElementById('ldh');
  var zxy = document.getElementById('zxy');
  var img = document.querySelector('img');
  //2-注册事件
  zxy.onclick=function (){
      img.src='images/zxy.jpeg';
  }
</script>

</body>

表单元素的属性操作

type,value,checked,selected,disable;

下面展示的是value属性和disabled的用法:

<body>
<button>点这里</button>
<input type="text" value="输入内容">
<script>
    var btn = document.querySelector('button');
    var input = document.querySelector('input');
    btn.onclick =function(){
        input.value='被点击啦';
        //想要某个表单被禁用 不能再点击 用disabled
        btn.disabled=true;
        //和下面这种结果是一样的:
        this.disabled=true;
        //this指向的是这个函数的调用者 在这里就是btn;
    }
</script>
</body>

样式属性操作

  1. element.style :行内样式操作;
  2. element.className:类名样式操作;
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{
      width: 300px;
      height: 300px;
      background-color: pink;
    }
  </style>
</head>
<body>
<div></div>
<script>
  var div=document.querySelector('div');
  div.onclick=function (){
    //div里面的属性采取驼峰命名法
    div.style.backgroundColor='purple';
    div.style.width='400px';
  }
</script>
</body>
淘宝二维码关闭案例

display.none;隐藏
display.block;显示

显示隐藏文本内容

首先表单需要两个事件:
获得焦点onfocus
失去焦点 onblur

节点操作

BOM

操作元素

样式操作

之前讲到,如果样式比较少,或者功能比较简单用element.style修改外观样式:

  1. 获取元素:var xxx= document.queryselector();
  2. 触发动作:这里有很多触发动作的比如onclick(),注意后面要用function实现;

类名样式操作

this.className = ’ 类名 ’

var ipt =document.querySelector('.ipt')
  var message = document.querySelector('.message')
  ipt.onblur= function (){
    if(ipt.value.length<6||ipt.value.length>16){
      console.log('wrong');
      message.className='wrong'
      message.innerHTML='位数不对';
    }
  }

排他思想

就是用到了双层循环;首先先排除所有人,然后再设置自己的样式;

  <script>
    //获取所有按钮
    var btns = document.querySelectorAll('button');
    //btn得到的是伪数组,这里遍历每一个button
    for (var i=0;i<btns.length;i++){
      btns[i].onclick=function (){
          //2。所以可以在这里先让所有的背景颜色清空
          for (i=0;i<btns.length;i++){
              btns[i].style.backgroundColor='';
          }
        this.style.backgroundColor='pink';//1。但是这里循环内部累计了,都变粉色了
  }
    }

  </script>
获得/设置/移除属性
  1. getAttribute(属性);是主要获得自定义的属性;
  2. element.属性;获得内置属性值(元素本身自带的属性);

设置:

  1. element.属性=值
  2. setAttribute(属性,值)

移除

1 . remove

节点操作

获取节点

.parentNode------------------得到父节点;但这个得到的是离他最近的父节点;如果找不到父节点就返回为空null;

console.log(erweima.parentNode);//这个就是erweima的父节点

.childNode--------------------得到子节点;
.children-----------------------也是得到子节点,是实际开发常用的;

DOM 提供的方法(API)获取
        var ul = document.querySelector('ul');
        var lis = ul.querySelectorAll('li');
子节点  childNodes 所有的子节点 包含 元素节点 文本节点等等
        console.log(ul.childNodes);
        console.log(ul.childNodes[0].nodeType);
        console.log(ul.childNodes[1].nodeType);
children 获取所有的子元素节点 也是我们实际开发常用的
        console.log(ul.children);

firstChild/lastChild----------------第一个/最后一个子节点,不管是文本节点还是元素节点;
firstElementChild/lastElementChild----------------第一个/最后一个子元素节点;

返回第一个子元素节点 ie9才支持
        console.log(ol.firstElementChild);
        console.log(ol.lastElementChild);

实际开发的写法 既没有兼容性问题又返回第一个子元素,就是用刚才那种返回子元素的方法,后面加上数组下标:

console.log(ol.children[0]);
console.log(ol.children[ol.children.length - 1]);
创建节点

分为两步: 1. 创建元素 2. 添加元素
.createElement-----------------------------创建;
node.appendChild(child)-----------------添加,类似数组里面的push;
node.insertBefore(child, 指定元素)------添加到指定元素的前面;

// 1. 创建节点元素节点
        var li = document.createElement('li');
        // 2. 添加节点 node.appendChild(child)  node 父级  child 是子级 后面追加元素  类似于数组中的push
        var ul = document.querySelector('ul');
        ul.appendChild(li);
        // 3. 添加节点 node.insertBefore(child, 指定元素);
        var lili = document.createElement('li');
        ul.insertBefore(lili, ul.children[0]);
        // 4. 我们想要页面添加一个新的元素 : 1. 创建元素 2. 添加元素
删除节点

node.removeChild(child)--------------------------删除元素

复制节点
  1. 复制:xxx.node.Clone();()为空或为false的话只复制标签,不复制里面的内容;xxx.node.Clone(true)的话是复制里面的内容;
  2. 然后用appendChild添加进去就行了;
3种动态创建元素
  1. document.write 直接写入内容流,但是文档流执行完毕会导致页面重绘;
  2. inner.HTML 将内容写入某个DOM节点,不会导致页面冲绘;
    创建多个元素效率高,不要采用拼接字符串,采用数组形式拼接,结构稍微复杂;
  3. createElenemt(),创建多个元素效率稍微低一点,但是结构清晰;

操作元素总结

操作元素内容:innerText;innerHTML
操作元素常见属性:src href title alt
操作表单元素属性:type,value,disabled
操作元素常见样式:元素少用element.style;元素多用className;

事件

注册事件

  1. 传统方式:比如onclick

  2. 方法监听注册方式:

    addEventListener事件监听方式
    (1) 里面的事件类型是字符串 必定加引号 而且不带on
    (2) 同一个元素 同一个事件可以添加多个侦听器(事件处理程序)

btns[1].addEventListener('click', function() {
        alert(22);
    })
    btns[1].addEventListener('click', function() {
            alert(33);
        })

删除事件

  1. 传统方式删除事件:在注册事件的function下面写上=null;
divs[0].onclick = null;
  1. removeEventListener 删除事件
divs[1].addEventListener('click', fn)//这里先写移除函数,不需要调用➕小括号
function fn() {//这里定义fn这个函数
            alert(22);
            divs[1].removeEventListener('click', fn);
        }
  1. detachEvent删除事件;
 divs[2].attachEvent('onclick', fn1);

        function fn1() {
            alert(33);
            divs[2].detachEvent('onclick', fn1);
        }

DOM事件流

事件流描述的是从页面中接收事件的顺序,分为三个阶段:

  1. 捕获阶段:如果addEventListener 第三个参数是 true 那么则处于捕获阶段
  2. 当前目标阶段
  3. 冒泡阶段:如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段 son -> father ->body -> html -> document

WebApis- BOM&DOM_第2张图片

事件对象

  1. event 就是一个事件对象 写到我们侦听函数的 小括号里面 当形参来看
  2. 事件对象只有有了事件才会存在,它是系统给我们自动创建的,不需要我们传递参数
  3. 事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息,鼠标坐标啊,如果是键盘事件里面就包含的键盘事件的信息 比如 判断用户按下了那个键
  4. 这个事件对象我们可以自己命名 比如 event 、 evt、 e
  5. 事件对象也有兼容性问题 ie678 通过 window.event 兼容性的写法 e = e || window.event;
事件对象常见属性和方法:WebApis- BOM&DOM_第3张图片

常见事件对象的属性和方法:
1. e.target 返回的是触发事件的对象(元素) this 返回的是绑定事件的对象(元素)
区别 : e.target 点击了那个元素,就返回那个元素 ;this 那个元素绑定了这个点击事件,那么就返回谁
2. e.preventDefault() 阻止默认行为(事件) 让链接不跳转 或者让提交按钮不提交;return false也可以,但是只要有return的话后面的代码就不执行了;
3. 怎么阻止冒泡:
标准写法:e,stopPropagation(),stop 停止 ,Propagation 传播;
e.cancelBubble = true;

事件委托

鼠标事件

我是一段不愿意分享的文字
    <script>
      //禁止鼠标右键菜单contextmenu
      document.addEventListener('contextmenu',function (e) {
          e.preventDefault();
      })

      //禁止鼠标选中文字
      document.addEventListener('selectstart',function (e) {
          e.preventDefault();
      })
// 鼠标事件对象 MouseEvent
        document.addEventListener('click', function(e) {
            // 1. client 鼠标在可视区的x和y坐标,就是当前的可视界面的位置
            console.log(e.clientX);
            console.log(e.clientY);
            console.log('---------------------');

            // 2. page 鼠标在页面文档的x和y坐标,就是相对于一整个页面从头开始的坐标
            console.log(e.pageX);
            console.log(e.pageY);
            console.log('---------------------');

            // 3. screen 鼠标在电脑屏幕的x和y坐标
            console.log(e.screenX);
            console.log(e.screenY);
mouseenter和mouseover的区别

mouseenter只经过自身盒子触发;
mouseover经过自身盒子和经过子盒子都触发;

常用键盘事件

  1. keyup 按键弹起的时候触发
  // document.onkeyup = function() {
    //         console.log('我弹起了');

    //     }
    document.addEventListener('keyup', function() {
        console.log('我弹起了');
    })
  1. keydown 按键按下的时候触发 能识别功能键 比如 ctrl shift 左右箭头啊
 document.addEventListener('keydown', function() {
            console.log('我按下了down');
        })
  1. keypress 按键按下的时候触发 不能识别功能键 比如 ctrl shift 左右箭头啊
document.addEventListener('keypress', function() {
            console.log('我按下了press');
        })

三个事件的执行顺序 keydown – keypress – keyup

键盘事件对象
  1. keyCode(添加侦听器)
    其中keyup和keydown不区分字母大小写,keypress区分字母大小写;实际开发里面常用keyup和keydown;
 document.addEventListener('keyup',function (e) {
    console.log(e.keyCode)
  })

案例:京东快递单号查询

<div class="search">
<!--  字号偏大的一个盒子-->
  <div class="con">123</div>
<!--  下面的一个输入盒子-->
  <input type="text" placeholder="请输入您的快递单号" class="jd">
</div>
<script>
  var con = document.querySelector('.con')
  var jd_input = document.querySelector('.jd')
  jd_input.addEventListener('keyup',function () {
    if (this.value==''){
      con.style.display='none'
    }else {
      con.style.display = 'block';
      con.innerText = this.value;
    }
  })

这个案例里面就必须要用keyup,因为字还没按进去的时候,就触发了事件,触发事件的时候value为空,为空时display还是none,取不过来;

BOM浏览器对象模型

BOM–浏览时对象模型;给浏览器窗口做交互效果;比DOM大,document就是window对象的一部分;

window对象常见的事件

加载

window.onload-------页面加载事件:就是在页面中所有元素和事件都加载完成之后再开始执行这个事件;这样就可以把js的代码写在页面元素的任何地方;但这种注册事件方式只能写一个,如果有多个就只执行最后那个,所以我们平时生产环境里面会用到另一种实现方式:window.addEventListener('load',function(){})

DOMContentLoaded-------窗口加载事件,仅当DOM加载完成事件就触发;不包括要再去加载样式表,图片,flash等;就是只要各种标签加载完就可以了;这个更快一点;
window.addEventListener('DOMContentLoaded',function(){})

窗口大小

window.onresize-----只要窗口大小发生变化就会触发这个事件;
window.innerWidth是当前屏幕宽度
window.addEventListener('resize',function(){})

定时器
  1. setTimeout(调用函数-字符串形式,[延迟的秒数])---------用于设置一个定时器,该定时器在定时器到期后执行调用函数,这里这个调用函数就是回调函数;
1.
setTimeout(function() {
            console.log('时间到了');

        }, 2000);

2.
function callback() {
            console.log('爆炸了');

        }
        var timer1 = setTimeout(callback, 3000);

模拟五秒钟关闭广告:

<img src="images/ad.jpg" alt="" class="ad">
<script>
  var ad = document.querySelector('.ad');
  setTimeout(function () {
    ad.style.display='none';
  },5000)
</script>

  1. 停止定时器:clearTimeout(定时器名字)

<img src="images/ad.jpg" alt="" class="ad">
<button>不管广告啦</button>
<script>
  var ad = document.querySelector('.ad');
  var btn = document.querySelector('button')
  var Timer=setTimeout(function () {
    ad.style.display='none';
  },5000)

  btn.addEventListener('click',function () {
    clearTimeout(Timer);
  })
</script>

  1. setInterval()计时器;这个是每隔所定的时间,就调用一次function;
<script>
  var Timer = setInterval(function () {
    console.log('syc超棒')
  },1000);
</script>
  1. 这个也有停止计时效果:clearInterval(定时器名字);
tihs指向问题

在全局作用下的函数都是window的方法,一般情况下this指向的都是window;
谁调用的函数,this指向的就是哪个对象;

js执行机制

  1. 先执行主线程执行栈,在执行放入任务队列中的异步任务 ;(主线程就是同步任务,任务队列是异步任务);

location对象

  1. location.assign():页面跳转
  2. location.replace():页面跳转但是不能回退,由于不记录浏览历史
  3. location.reload():加载刷新的意思,不加参数就是刷新,加参数true就是强制刷新;

navigator对象

history对象

history.forward():前进
history.back():后退
history.go():前进x步,这个x就是()里面的参数,写几就是几,甚至可以是-1;

pc端网页特效

元素偏移量 offset系列

  1. 可以获取元素距离父元素的位置(带有定位,如果没有带有定位的话就以body为准);
console.log(father.offsetTop);
        console.log(father.offsetLeft);
  1. 可以返回当前元素的偏移位置,大小;包含padding + border + width
console.log(w.offsetWidth);
        console.log(w.offsetHeight);
  1. 返回带有定位的父亲 否则返回的是body;
console.log(son.offsetParent); // 返回带有定位的父亲 否则返回的是body
        console.log(son.parentNode); // 返回父亲 是最近一级的父亲 亲爸爸 不管父亲有没有定位
  1. 和style的区别:就是去获取位置什么的时候,可以用offset,但是offset是只读属性,style是可读写属性,是可以进行赋值改变的;

元素可视区client系列

立即执行函数:不用进行调用直接执行;
两种写法:(function() {})();或者(function(){}());
dpr 物理像素比

元素滚动scroll系列

(仿淘宝页面滚动案例)
获得的是元素真正的,元素内容大小;
scroll就是被卷进去的长度

  1. scroll滚动事件:当我们滚动条发生变化的时候会触发的事件;
  2. pageYoffset 页面被卷进去的部分
三大系列总结

WebApis- BOM&DOM_第4张图片
它们擅长的用法:

  1. offset系列:经常用于获取元素位置: offsetLeft,offsetTop;
  2. client系列:经常用于获取元素大小:clientWidth,clientHeight;
  3. scroll系列:经常用于获取滚动距离:scrollTop,scrollLeft;
  4. 注意页面滚动的距离通过window.pageXOffset实现的;

动画原理

  1. 获得盒子当前位置
  2. 让盒子在当前位置加上1个移动距离
  3. 利用定时器不断重复这个操作
  4. 加一个结束定时器的条件
  5. 注意:动画效果必须要加定位;
 var div = document.querySelector('div');
        var timer = setInterval(function() {
            if (div.offsetLeft >= 400) {
                // 停止动画 本质是停止定时器
                clearInterval(timer);
            }
            div.style.left = div.offsetLeft + 1 + 'px';
        }, 30);
给不同的元素添加不同的定时器
  1. obj.timer;
  2. 一个bug:不断点击定时器就开启了很多个定时器,速度就会越来越快
    解决方案就是:让我们的元素只有一个定时器执行
    先清除以前的定时器,只保留当前的一个定时器执行:
clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                if (obj.offsetLeft >= target) {
                    // 停止动画 本质是停止定时器
                    clearInterval(obj.timer);
                }
                obj.style.left = obj.offsetLeft + 1 + 'px';

            }, 30);
缓慢动画

缓动动画函数封装obj目标对象 target 目标位置
思路:
1. 让盒子每次移动的距离慢慢变小, 速度就会慢慢落下来。
2. 核心算法:(目标值 - 现在的位置) / 10 做为每次移动的距离 步长
(有步长还能让步长成为负数,往后退)

 var step = (target - obj.offsetLeft) / 10;
  1. 停止的条件是: 让当前盒子位置等于目标位置就停止定时器

移动端

移动端触摸事件

你可能感兴趣的:(javascript,前端,html5)