Web API(1)

其他 2021-03-27 19:13:28 阅读次数: 0

JS的组成

在这里插入图片描述

Web APIs与javascript基础的区别

Web APIs是javascript基础的应用，大量使用javascript基础做页面交互效果

API与Web APIs的区别

  • API是提供给程序员的一种工具，会使用即可
  • Web API是浏览器提供的一套操作浏览器功能与页面元素的API(DOM与BOM)
  • Web API一般都有输入与输出（函数的传参与返回值）针对浏览器做交互效果

DOM

DOM:文档对象模型，提供访问与操作网页内容的接口与方法，通过DOM,可以改变网页结构的外观与样式

DOM树

```

  • 一个页面就是一个文档，用document表示
  • 页面中所有的元素被称为标签，用element表示
  • 页面所有的内容被称为节点，用node表示

获取元素

通过id名获取元素

通过getElementById(id)获取

注意事项

  • 返回值是一个元素对象
  • 参数是一个大小写敏感的字符串
  • js代码从上往下依次执行，所以script元素写在body元素的下面
  • console.dir可以打印返回的元素对象，更好的查看元素的属性与方法
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>通过id名获取元素</title>
</head>

<body>
    <div id='box'>hello word</div>
</body>
<script>
    var box = document.getElementById('box');
    console.log(box);
    console.log(typeof box);
    console.dir(box)
</script>

</html>

在这里插入图片描述

通过标签名获取元素

根据getElementsByTagName(‘标签名’)获取

注意事项

  • 参数是一个大小写敏感的字符串
  • 返回值是一个元素对象集合，以伪数组的方式进行存储
  • 通过遍历可以获取每一个元素对象
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通过标签名获取元素</title>
</head>

<body>
    <ul>
        <li>CSDN 程序员的天堂</li>
        <li>CSDN 程序员的天堂</li>
        <li>CSDN 程序员的天堂</li>
        <li>CSDN 程序员的天堂</li>
        <li>CSDN 程序员的天堂</li>
        <li>CSDN 程序员的天堂</li>
    </ul>
</body>
<script>
    var lis = document.getElementsByTagName('li');
    console.log(lis);

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

</html>

在这里插入图片描述

获取某个元素里面的标签（曲线救国）

思路如下

  • 先获取元素的id
  • 通过元素的id获取元素的标签名

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取某个元素的标签</title>
</head>

<body>
    <!-- 要求如下：获取第二个ul里面的li -->
    <ul>
        <li>hello word</li>
        <li>hello word</li>
        <li>hello word</li>
        <li>hello word</li>
        <li>hello word</li>
    </ul>

    <ul id="UI">
        <li>尧子陌</li>
        <li>尧子陌</li>
        <li>尧子陌</li>
        <li>尧子陌</li>
        <li>尧子陌</li>
        <li>尧子陌</li>
    </ul>
</body>
<script>
    var ul = document.getElementById('UI');
    var lis = ul.getElementsByTagName('li');
    console.log(lis);
</script>

</html>

在这里插入图片描述

通过类名获取元素

通过getElementsByClassName(‘类名’)来获取元素
注意事项

  • 参数为一个大小写敏感的字符串
  • 返回值是一个元素对象集合
  • 具有兼容性（h5新增）
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>通过类名获取元素</title>
</head>

<body>
    <div class="box"></div>
    <div class="box"></div>
</body>
<script>
    var boxs = document.getElementsByClassName('box');
    console.log(boxs)
</script>

</html>

在这里插入图片描述

通过querySelector(‘选择器’)来获取元素

注意事项

  • 可以获取指定选择器的第一个元素对象
  • 参数里面的选择器要加符号
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>通过类名获取元素</title>
</head>

<body>
    <div class="box"></div>
    <div class="box"></div>
</body>
<script>
    var boxs = document.getElementsByClassName('box');
    console.log(boxs)
</script>

</html>

在这里插入图片描述

通过querySelectorAll(‘选择器’)来获取元素

注意事项

  • 返回值是指定选择器的所有元素对象集合。
  • 参数里面的选择器必须要加符号

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通过querySelectorAll('选择器')来获取元素对象</title>
</head>

<body>
    <ul id="box">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
<script>
    var box = document.getElementById('box')
    var lis = box.querySelectorAll('li');
    console.log(lis);
</script>

</html>

在这里插入图片描述

获取特殊元素（body html）

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取特殊元素</title>
</head>

<body>

</body>
<script>
    var body = document.body;
    console.log(body);
    console.dir(body);


    var html = document.documentElement;
    console.log(html);
    console.dir(html)
</script>

</html>

在这里插入图片描述

事件基础

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

触发 ------> 响应机制

事件三要素

  • 事件源:事件被触发的对象
  • 事件类型：触发什么样的事件，例如点击事件，键盘按下事件
  • 事件处理程序：采用函数赋值的方式完成

事件三要素之唐伯虎点秋香

点击按钮 弹出唐伯虎点秋香的警示框

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件三要素</title>
</head>

<body>
    <button>唐伯虎</button>
</body>
<script>
    var bth = document.querySelector('button');
    bth.onclick = function() {
        alert('唐伯虎点秋香')
    }
</script>

</html>

在这里插入图片描述

事件执行的步骤

1.获取事件源

2.绑定事件对象

3.事件处理程序

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件执行的步骤</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div></div>
</body>
<script>
    // 获取事件源
    var div = document.querySelector('div');
    // 绑定事件类型并执行事件处理程序
    div.onclick = function() {
        console.log('hello word');

    }
</script>

</html>

在这里插入图片描述

鼠标事件

在这里插入图片描述

操作元素

通过操作DOM可以改变元素的外观 结构 内容等

操作元素之改变元素内容

  • element.innerHTML
  • element.innerText

区别如下

  • innerHTML是w3c推荐的标准，识别HTML标签 空格及换行
  • innerText是非w3c推荐的标准，不识别HTML标签 空格及换行
  • innerHTML及innerText都是实现可读写的

改变元素内容之习题1

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>innerHTML执行的步骤</title>
    <style>
        div {
            font: normal normal 20px '楷体';
            color: blue;
        }
    </style>
</head>

<body>
    <button>time</button>
    <div></div>
</body>
<script>
    var bth = document.querySelector('button');
    var div = document.querySelector('div')
    bth.onclick = function() {
        div.innerHTML = getTimer()
    }

    function getTimer() {
        var date = new Date();
        var year = date.getFullYear(); //年
        var mouth = date.getMonth(); //年
        var day = date.getDate(); //当天日期
        var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
        var week = date.getDay(); //星期
        return year + '年' + mouth + '月' + day + '日' + arr[week]
    }
</script>

</html>

在这里插入图片描述

改变元素内容之习题2


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>innerHTML及innerText</title>
</head>

<body>
    <div> </div>
    <p>
        hello word
        <span>尧子陌</span>
    </p>
</body>
<script>
    var div = document.querySelector('div');
    div.innerHTML = '<strong>惊鸿</strong>'

    var p = document.querySelector('p');
    console.log(p.innerHTML);
    console.log(p.innerText);
</script>

</html>

在这里插入图片描述

常用元素的属性

在这里插入图片描述

常用元素属性之习题一

点击对应按钮 显示对应的季节图片


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用的属性</title>
    <style>
        img {
            width: 528px;
            height: 300px;
        }
        
        button:nth-of-type(1) {
            margin-left: 0px;
        }
        
        button {
            margin-left: 134px;
        }
    </style>
</head>

<body>

    <img src="./upload/star.jpeg" alt="星星">
    <br />
    <button id="spring">春</button>
    <button id="summer">夏</button>
    <button id="fall">秋</button>
    <button id="winter">冬</button>
</body>
<script>
    var img = document.querySelector('img');
    var spring = document.getElementById('spring');
    var summer = document.querySelector('#summer');
    var fall = document.querySelector('#fall');
    var winter = document.getElementById('winter')
    spring.onclick = function() {
        img.src = './upload/spring.jpg';
        img.title = '春'
    }
    summer.onclick = function() {
        img.src = './upload/summer.jpg';
        img.title = '夏'
    }
    fall.onclick = function() {
        img.src = './upload/autumn.jpeg';
        img.title = '秋'
    }
    winter.onclick = function() {
        img.src = './upload/winter.jpg';
        img.title = '冬'
    }
</script>

</html>

在这里插入图片描述

常用元素属性之习题二

根据不同的时间，来显示不同的图片及文字

在这里插入图片描述
思路如下

  • 根据系统时间来进行判断，所以需要内置日期对象
  • 利用多分支语句进行判断而设置不同的照片
  • 需要一个div容器，根据时间的不同来设置不同的文字
  • 需要一个图片容器，根据时间的不同来设置不同的时间

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用元素属性之习题2</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        img {
            width: 600px;
            height: 600px;
        }
        
        div {
            font: normal normal 20px '宋体';
            color: blue;
        }
        
       
    </style>
</head>

<body>
    <img src="./upload/star.jpeg" alt="">

    <div></div>

</body>
<script>
    // 获取div及img的元素对象
    var div = document.querySelector('div');
    var img = document.querySelector('img')
        // 获取内置对象之小时
    var date = new Date();
    var h = date.getHours();
    console.log(h);
    if (h < 12) {
        img.src = './upload/morning.jpg';
        div.innerHTML = '早晨好'
    } else if (h < 18) {
        img.src = './upload/midday.jpg';
        div.innerHTML = '下午好'
    } else {
        img.src = 'upload/night.jpg';
        div.innerHTML = '晚上好'
    }
</script>

</html>

在这里插入图片描述

表单常用属性

在这里插入图片描述
注意事项

  • 表单里面的值不能通过innerHTML及innerText来改变
  • 表单里面的值通过value来改变
  • this是当前事件函数的调用者

表单常用属性之习题1

点击当前按钮，表单的内容改变且按钮禁用


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单常用属性之习题1</title>
</head>

<body>
    <button>按钮</button>
    <input type="text" value="可用">
</body>
<script>
    var bth = document.querySelector('button');
    var ipt = document.querySelector('input');
    bth.onclick = function() {
        ipt.value = '禁用';
        this.disabled = true
    }
</script>

</html>

在这里插入图片描述

表单常用属性之彷京东密码框

核心思路

点击眼睛按钮，input类型从密码框转换成输入框

步骤如下

  • 一个按钮有两种状态，点击一次变为输入款类型，再次点击则为密码框类型

  •   声明一个flag变量，当flag为0，表单类型为输入框，随后flag为1，当flag为1的时候，表单类型为密码框，flag为0

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>彷京东密码框</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            position: relative;
            width: 400px;
            height: 40px;
            margin: 200px auto;
        }
        
        input {
            outline: none;
            width: 400px;
            height: 40px;
            border: 0;
            border-bottom: 1px solid gray;
        }
        
        img {
            position: absolute;
            top: 10px;
            left: 362px;
            width: 25px;
        }
    </style>
</head>

<body>
    <div class="box">
        <label for="">
            <img src="./upload/close.png" alt="" id="eyes">
        </label>
        <input type="password" id="ipt">
    </div>
</body>
<script>
    var eyes = document.querySelector('#eyes');
    var ipt = document.querySelector('input');
    var flag = 0;
    eyes.onclick = function() {

        if (flag == 0) {
            ipt.type = 'text';
            this.src = './upload/open.png';
            flag = 1
        } else {
            ipt.type = 'password';
            this.src = './upload/close.png';
            flag = 0;
        }

    }
</script>

</html>

在这里插入图片描述

样式操作属性

  • element.style:行内样式操作
  • element.className：类名操作样式

注意事项

  • 修改样式时采用驼峰式命名的写法，如fontSize,backgroundColor等等
  • js修改的样式属于行内样式,占的比重比较高

样式操作属性之习题1

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式操作属性之习题</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
            color: red;
        }
    </style>
</head>

<body>
    <div></div>
</body>
<script>
    var box = document.querySelector('div');
    box.onclick = function() {
        this.style.backgroundColor = 'yellow'
    }
</script>

</html>

在这里插入图片描述

样式操作之二维码隐藏

核心思路

  • 利用display属性来显示或隐藏元素。 dispaly:block（显示） dispaly:block(隐藏)
  • 点击按钮，便让二维码隐藏
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式操作之二维码</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            position: relative;
            width: 160px;
            margin: 200px auto;
        }
        
        img:nth-of-type(2) {
            position: absolute;
            top: -10px;
            right: -14px;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="./upload/tao.png" alt="">
        <img src="./upload/wrong.png" alt="" class="bth">
    </div>
</body>
<script>
    var box = document.querySelector('.box');
    var bth = document.querySelector('.bth');
    bth.onclick = function() {
        box.style.display = 'none'
    }
</script>

</html>

在这里插入图片描述

样式操作淘宝精灵图

思路如下

  • 首先精灵图的图片是有规律可寻的
  • 利用循环，修改精灵图的位置background-position
  • i*44便是每个精灵图y坐标的位置
    在这里插入图片描述


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式操作之精灵图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            width: 128px;
            margin: 200px auto;
            overflow: hidden;
            list-style: none;
        }
        
        li {
            float: left;
            width: 24px;
            height: 24px;
            margin-left: 5px;
            margin-bottom: 5px;
            border: 1px solid gray;
            background: url('./upload/sprite.png') no-repeat;
        }
    </style>
</head>

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
<script>
    var lis = document.querySelectorAll('li');
    for (var i = 0; i < lis.length; i++) {
        var index = i * 44
        console.log(lis[i]);
        console.log(index);
        console.log(lis[i].style.backgroundPosition = '0 -' + index + 'px');
    }
</script>

</html>

在这里插入图片描述

样式操作之显示隐藏文本内容

需要两个事件：获得焦点事件及失去焦点事件

  • 当获得焦点的时候，表单的内容则会被清空
  • 当失去焦点的时候，表单的内容会恢复成默认值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式操作之显示与隐藏文本内容</title>
    <style>
        input {
            display: block;
            width: 200px;
            margin: 200px auto;
            padding-left: 20px;
            color: #999;
        }
    </style>
</head>

<body>
    <input type="text" value="手机">
</body>
<script>
    // 获取元素对象
    var ipt = document.querySelector('input');
    // 绑定事件
    ipt.onfocus = function() {
        if (this.value == '手机') {
            this.value = ''
        }
        this.style.color = '#333'

    }

    ipt.onblur = function() {
        if (this.value == '') {
            this.value = '手机'
        }
        this.style.color = '#999'

    }
</script>

</html>

在这里插入图片描述

calssName操作样式

主要事项

  • class是个关键字
  • 如果样式比较多，采用类名操作样式属性等
  • className会直接改变元素的类名，会覆盖原先的类名

className操作样式之习题1

点击div时，会添加多个类名来改变样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>className来操作样式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 200px;
            height: 200px;
            background: pink;
            margin: 200px auto;
        }
        
        .box {
            box-sizing: border-box;
            width: 400px;
            height: 400px;
            background-color: blueviolet;
            margin: 200px auto;
            padding-top: 200px;
            text-align: center;
            font: normal normal 25px '楷体';
        }
    </style>
</head>

<body>
    <div>文本</div>
</body>
<script>
    // 获取事件源
    var div = document.querySelector('div');
    console.log(div);
    div.onclick = function() {
        this.className = 'box'
    }
</script>

</html>

在这里插入图片描述

classNmae操作样式之密码框格式提示错误

  • 首先判断的是否是失去焦点onblur
  • 如果输入正确，则显示正确的信息并且图标提示为绿色
  • 如果输入的字数不是6~11位，先显示错误的信息并且图标为红色
  • 使用className来操作样式
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>classNmae操作样式之密码框格式提示错误</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .register {
            width: 800px;
            margin: 200px auto;
        }
        
        .message {
            display: inline-block;
            font-size: 12px;
            color: #999;
            background: url('./upload/mess.png') no-repeat;
            padding-left: 20px;
        }
        
        .right {
            background: url('./upload/right.png') no-repeat;
            color: green;
        }
        
        .wrong {
            background: url('./upload/wrong.png') no-repeat;
            color: red;
        }
    </style>
</head>

<body>
    <div class="register">
        <input type="password">
        <p class="message">请输入6~16位密码</p>
    </div>
</body>
<script>
    // 获取元素对象
    var ipt = document.querySelector('input');
    var message = document.querySelector('.message');
    //进行内部处理得出结果
    ipt.onblur = function() {
        if (this.value.length < 6 || this.value.length > 16) {
            message.innerHTML = '输入的信息有误';
            message.className = 'message wrong'
        } else {
            message.innerHTML = '输入的信息正确';
            message.className = 'message right'
        }
    }
</script>

</html>

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_45419127/article/details/111935171
今日推荐
周排行
AIZU 2224 Save your cats(并查集)
HTTP响应头状态码详解
Python socket编程（2）
MaxCompute Studio使用心得系列7—作业对比
Supervisor安装使用
LeetCode 164. Maximum Gap
mysql面试题: 一张表里面有ID自增主键，当insert了17条记录之后，删除了第15,16,17条记录，再把mysql重启，再insert一条记录，这条记录的ID是18还是15
nutch1.2 DeleteDuplicates IndexMerger 详解
OC - @property与setter,getter方法
SpringBoot @Transactional的rollbackFor属性
每日归档
更多
2024-09-19(0)
2024-09-18(0)
2024-09-17(0)
2024-09-16(0)
2024-09-15(0)
2024-09-14(0)
2024-09-13(0)
2024-09-12(0)
2024-09-11(0)
2024-09-10(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022