Web API(1)

Web APIs 和JS基础的关联性

JS的组成:

ECMAScript
DOM
BOM

API和Web API

API

Application Programming Interface 应用成语编程接口
是一些预先定义的函数, 目的是提供应用程序与开发人员基于某软件或硬件得以访问一组列程的能力,而无需访问源代码, 或理解内部工作机制的细节

Web API

介绍:

是浏览器提供的一套操作浏览器功能和页面元素的API(DOM和BOM)
现阶段我们主要针对浏览器讲解常用的API, 做浏览器的交互效果

Web APIs:

Web API 一般都有输入和输出(函数的传参和返回值), Web API很多都是方法(函数).

DOM

DOM基础

DOM简介

是W3C组织推荐的处理可扩展标记语言(html或者xml)的标准编程接口

可以改变网页的内容,结构和样式

DOM树 文档

点击查看图片来源

解释:

文档: 一个页面就是一个文档, DOM中使用document表示

元素: 页面中所有标签都是元素, DOM中使用element表示

节点: 网页中的所有内容都是节点(标签,属性,文本,注释等) 使用node表示

DOM把以上内容都看做是对象

获取元素

根据ID获取:getElementById()

使用getElementById()方法可以获取带有ID的元素对象

<div id="time">2019-9-9</div>

说明

    //因为我们文档页面从上往下加载, 所以得先有标签
    //驼峰命名法
    //参数:大小写敏感的字符串 加引号
    //返回的是一个对象

实例

var timer =document.getElementById('time') 
console.log(timer); // <div id="time">2019-9-9</div>
console.log(typeof timer); //object
//console.dir() 打印我们返回元素对象  更好的查看里面的属性和方法
console.dir(timer)

根据标签名获取:getElementsByTagName

获取文档中指定标签的所有这个标签元素

说明:

  • 使用**getElementByTagName()**方法 可以返回带有指定标签的对象的集合
  • 返回的是 获取元素对象的集合 以伪数组的形式存储的

实例

        <ul>
        <li>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈1</li>
        <li>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈2</li>
        <li>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈3</li>
        <li>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈4</li>
        <li>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈5</li>
    </ul>
<script>
        var lis =document.getElementsByTagName('li')
        console.log(lis); //  [li, li, li, li, li]
        console.log(lis[0]); //获取第一个li

遍历—把拿到的所有li取出来

for(var i = 0; i<lis.length; i++) {
    console.log(lis[i]);
}

注意

因为得到的是一个对象的集合, 所以我们想要操作里面的元素就需要遍历
得到的元素对象是动态的
如果页面中只有一个li 返回的还是为数组的形式
如哦页面中没有这个元素 返回的是一个空的伪数组 [ ] 长度为0

获取某个元素(父元素)内部所有指定标签名的子元素

element.getElementsByTagName(‘标签名’)

例如 获得ol下的li, 而不是ul下的li

问题:

// var ol = document.getElementsByTagName('ol'); // [ol]  这是一个伪数组
// console.log(ol.getElementsByTagName('li')); // 错误  ol是伪数组  不能执行对象才有的方法;

解决方法

// 将html中的ol标签增加id属性;
var ol=document.getElementById('ol');
console.log(ol.getElementsByTagName('li'));  //[li, li, li, li, li, li]
console.log(ol);  // 获取父元素本身

(重点html5)根据类名:document.getElementsByClassName(‘类名’)

根据类名返回元素对象集合

var boxs = document.getElementsByClassName('box');
console.log(boxs);

(重点html5)querySelector

返回指定选择器的第一个元素 切记 里面的选择器需要加符号 .box #nav

var firstBox = document.querySelector('.box');
console.log(firstBox);
var nav = document.querySelector('#nav');
console.log(nav);
var li = document.querySelector('li');
console.log(li);

(重点html5)querySelectorAll()

返回指定选择器的所有元素对象集合

var allBox = document.querySelectorAll('.box');
console.log(allBox);
var lis = document.querySelectorAll('li');
console.log(lis);

特殊元素获取

获取body元素

var bodyEle = document.body;
console.log(bodyEle);
console.dir(bodyEle);

获取html元素

var htmlEle = document.documentElement
console.log(htmlEle);

事件基础

概述

JS使我们能有能力创建动态页面, 而事件是可以被JS侦测到的行为

简单理解 :触发—-响应机制

事件三要素

事件源

事件被触发对象

var btn = document.getElementById(‘btn’);

事件类型

如何触发, 什么事件

比如鼠标点击(onclick), 还是鼠标经过 还是键盘按下

事件处理程序

格式: 被赋予元素的变量名.事件类型= function( ) { 要达到的效果 }

通过一个函数赋值的方式 完成

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

实例

<body>
    <button id="btn">Sammy</button>
    <script>
        var btn = document.getElementById('btn');
        btn.onclick = function(){
            alert('你好');
        }
    </script>
</body>

事件执行的步骤

  1. 获取事件源
  2. 注册事件(绑定事件)
  3. 添加事件处理程序(采用函数赋值的方式)

实例

<body>
    <div>123</div>
    <script>
        var div = document.querySelector('div');
        div.onclick = function () {
            console.log('我被选中了');
        }
    </script>
</body>

利用事件来操作元素

改变元素的文本

element.innerText

<button>当前系统时间</button>
<div>某个时间</div>
<p>123</p>
//获取元素
var btn = document.querySelector('button');
var div = document.querySelector('div');
//注册事件
btn.onclick = function () {
    div.innerHTML = getDate();
}
//获取系统时间的函数
function getDate() {
    var date = new Date(); //调用当前日期对象
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var dates = date.getDate();
    var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'] //星期日写在最前面
    var day = arr[date.getDay()];//利用数组 将数字的星期1换成汉字的星期一
    return '今天是' + year + '年' + month + '月' + dates + '日 ' + day;
}

刷新页面直接显示当前日期

var p = document.querySelector('p');
p.innerHTML = getDate();

说明

从起始位置到终止位置的内容, 不识别我们写入的html标签 去除空格与换行

var div = document.querySelector('div')  //非标准
div.innerText = '<strong>今天是:2019'  // 不会加粗  <strong>今天是:2019

element.innerHTML

起始位置到终止位置的全部内容, 包括html标签, 同时保留空格和换行

var p = document.querySelector('p');
console.log(p.innerText);
console.log(p.innerHTML);

这以上两个属性是可读写的 可以获取元素里面的内容

常用元素属性操作: 修改src, href

innerText, innerHTML改变元素内容

img.src=,

a.href=

案例: 点击更换图片

<body>
    <button id="ldh">刘德华</button>
    <button id="zxy">张学友</button>
    <img src="images/ldh.jpg" alt="" title="刘德华">
    <script>
        var ldh = document.getElementById('ldh');
        var zxy = document.getElementById('zxy');
        var img = document.querySelector('img');
        //2.注册事件  处理程序
        zxy.onclick = function () {
            img.src = 'images/zxy.jpg';
            img.title = '张学友'
        }
        ldh.onclick = function () {
            img.src = 'images/ldh.jpg';
            img.title = '刘德华';
        }
    </script>

案例:分时间显示不同图片, 显示不同问候语

要求:

根据不同时间，页面显示不同图片，同时显示不同的问候语。
如果上午时间打开页面，显示上午好，显示上午的图片。
如果下午时间打开页面，显示下午好，显示下午的图片。
如果晚上时间打开页面，显示晚上好，显示晚上的图片。

分析:

① 根据系统不同时间来判断，所以需要用到日期内置对象
② 利用多分支语句来设置不同的图片
③ 需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性
④ 需要一个div元素，显示不同问候语，修改元素内容即可

实施:

<img src="images/s.gif" alt="">
<div>上午好</div>
<script>
    //获取元素
    var img = document.querySelector('img');
    var div = document.querySelector('div');
    //得到当前的小时数
    var date = new Date()
    var h = date.getHours();
    //判断小时数 改变图片和文字信息;
    if (h < 12 && h>=6) {
        img.src = 'images/s.gif';
        div.innerHTML = '亲,上午好啊,好好写代码';
    } else if (h < 18 && h>=12) {
        img.src = 'images/x.gif';
        div.innerHTML = '亲,下午好啊,好好写代码';
    } else {
        img.src = 'images/w.gif';
        div.innerHTML = '亲,晚上好,好好写代码';
    }
</script>

element.id

element.alt

element.title

表单元素的操作

可以操作如下表单元素的属性:

  1. type

  2. value

  3. checked

  4. selected

  5. disabled

    element.disabled = true/false;

    案例: 点击按钮禁用

<body>
    <button>按钮</button>
    <input type="text" value="输入内容">
    <script>
        //1.获取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        //2.注册时间
        btn.onclick = function() {
            input.value='被点击了';
            //表单禁用 disabled  我们想要按钮禁用
            // btn.disabled = true;
            this.disabled = true; //this指向的是事件函数的调用者  this指向btn
        }
    </script>
</body>

案例:仿京东显示隐藏密码明文案例(作废了 可以通过设置文本框的类型为password)

要求:

点击按钮 将密码切换为文本框, 并可以查看密码明文

分析

  • 核心思路: 点击眼睛按钮, 把密码框类型改为文本框就可以看见里面的密码了.
  • 一个按钮两个状态，点击一次，切换为文本框，继续点击一次切换为密码框
  • 算法：利用一个flag变量，来判断flag的值，如果是1 就切换为文本框，flag 设置为0，如果是0 就切换为密码框，flag设置为1

style样式属性的操作

通过JS修改元素的大小, 颜色, 位置等样式.

如果样式较少或者功能较简单的情况下 则使用element.style
如果要一次修改大量样式, 则用element.className

element.style 网页行内操作

实现为行内样式的直接改动,权重很高, 可以立即生效

实例

<script>
    var div = document.querySelector('div');
    div.onclick = function() {
        this.style.backgroundColor= 'purple';
        this.style.width= '150px';

    }
</script>

注意:

JS里面的样式采取驼峰命名大:fontSize, backgroundColor

JS修改style样式操作, 产生的是行内样式, css权重比较高

案例:仿淘宝关闭二维码案例

要求: 当鼠标点击二维码关闭按钮的时候，则关闭整个二维码。

分析:

核心思路：

利用样式的显示和隐藏完成， display=none 隐藏元素 display=block 显示元素
点击按钮，就让这个二维码盒子隐藏起来即可

实施:

<script>
    //1.获取元素
    var btn = document.querySelector('.close-btn');
    var box = document.querySelector('.box')
    btn.onclick = function () {
        box.style.display = 'none';
    }
</script>

案例:循环精灵图背景

要求: 可以利用 for 循环设置一组元素的精灵图背景

分析:
① 首先精灵图图片排列有规律的
② 核心思路： 利用for循环 修改精灵图片的 背景位置 background-position
③ 剩下的就是考验你的数学功底了
④ 让循环里面的 i 索引号 * 44 就是每个图片的y坐标

<script>
    //1.获取元素
    var lis = document.querySelectorAll('li'); //取所有的li
    for(var i= 0; i<lis.length; i++) {
        // 让索引号   乘以44  就是每个li 的背景y坐标 index就是y坐标
        var index = i*44;   
        lis[i].style.backgroundPosition = '0 -'+ index +'px';
    }
</script>

案例:显示隐藏文本框内容

要求: 当鼠标点击文本框时，里面的默认文字隐藏，当鼠标离开文本框时，里面的文字显示。
分析
① 首先表单需要2个新事件，获得焦点 onfocus 失去焦点 onblur
② 如果获得焦点， 判断表单里面内容是否为默认文字，如果是默认文字，就清空表单内容
③ 如果失去焦点， 判断表单内容是否为空，如果为空，则表单内容改为默认文字

实施:

<script>
    //1.获取元素
    var text = document.querySelector('input');
    //2.注册事件 获取焦点 onfocus
    text.onfocus = function() {
        // console.log('得到了焦点');
        if (text.value ==='手机') {
            this.value = '';
        }
        //获得焦点 文字颜色变深
        this.style.color = '#333'
    }
    //3.注册事件 失去焦点事件 onblur
    text.onblur = function() {
        // console.log('失去了焦点');
        if(this.value==='') {
            this.value= '手机';
        }
        //失去焦点 文字颜色变浅
        this.style.color = '#999'
    }
</script>

element.className 引用css中的类, 加入到html中

类名样式操作

在