四、JavaScript实战（上）

最新推荐文章于 2024-07-17 19:46:06 发布
最新推荐文章于 2024-07-17 19:46:06 发布
阅读量1k 收藏 1
点赞数 3
分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52289068/article/details/121455245
版权
这篇博客介绍了JavaScript中的Web APIs，特别是DOM操作。包括根据ID、标签名、类名获取元素，事件处理程序的概念，如何改变元素内容，操作元素属性和样式，以及自定义属性的操作。此外，还讲解了节点操作，如获取节点、创建和删除节点，并提供了多个实战案例，如关闭二维码、改变元素内容、全选反选等。
摘要由CSDN通过智能技术生成

文章目录

四、JavaScript实战（上）

（一）Web APIs 简介

1、Web APIs主要学DOM和BOM，是js的应用

Web API 是浏览器提供的一套操作浏览器功能和页面元素的API(BOM 和 DOM)。

（二）DOM

文档对象模型（DOM），其实是一些接口，通过这些接口可以改变页面的结构、内容和样式。

文档：一个页面就是一个文档，DOM使用document表示

1、获取元素
1.1 根据ID获取

使用 getElementById() 来使用.

	<!-- 根据ID获取元素 -->
    <!--  <div id="time">2021-11-14</div>
    <script>
        // 文档页面从上往下加载，所以先得有标签，所以script写到标签的下面
        var timee = document.getElementById('time');
        console.log(timee);
        // 可以打印我们返回的元素对象，更好地查看属性和方法
        console.dir(timee);
    </script> -->
1.2 根据标签名获取

使用 getElementsByName() 来使用

	<!-- 根据标签名获取 -->
    <ul>
        <li>你好你好1</li>
        <li>你好你好2</li>
        <li>你好你好3</li>
        <li>你好你好4</li>
        <li>你好你好5</li>
    </ul>
    <script>
        // 返回的是 获取过来元素对象的集合，以伪数组的形式存储的
        var lis = document.getElementsByName('li');
        console.log(lis);
        console.log(lis[0]);
        // 我们想要依次打印里面的元素对象，我们可以采取遍历的方式
        for(var i = 0; i < lis.length;i++){
   
            console.log(lis[i]);
        }
    </script>

​ 伪数组的概念：伪数组我们可以理解为类似数组的一个集合，我们常见的有俩个，一个是arguments还有一个是DOM的children属性，获取回来的子节点集合。他们与数组一样，具有索引(下标)和length属性。

还可以获取某个元素（父元素）内部所有指定标签的子元素

	<ul>
        <li>你好你好1</li>
        <li>你好你好2</li>
        <li>你好你好3</li>
        <li>你好你好4</li>
        <li>你好你好5</li>
    </ul>
    <ol id="ol">
        <li>你好比哈</li>
        <li>你好比哈</li>
        <li>你好比哈</li>
        <li>你好比哈</li>
        <li>你好比哈</li>
    </ol>
    <script>
        var oll = document.getElementById('ol');
        console.log(oll.getElementsByTagName('li'));
    </script>
1.3 H5新增获取元素方式

getElementByClassName() 通过类名来获取元素集合，其返回值是一个数组。

	<!-- 通过类名来获取元素集合 -->
    <div class="box">我是一个盒子</div>
    <div class="box">我是第二个盒子</div>

    <script>
        var box = document.getElementsByClassName('box');
        console.log(box);
    </script>

querySelector() 返回指定选择器的第一元素对象

	<div class="box">我是一个盒子</div>
    <div class="box">我是第二个盒子</div>
    <div id="hello">我是第nnnn个盒子</div>

    <script>
        var box = document.getElementsByClassName('box');
        console.log(box);

        // querySelector()
        var firstBox = document.querySelector('.box');
        var hello = document.querySelector('#hello');
    </script>

querySelectorAll() 返回指定选择器的所有元素集合

		// querySelectorAll()
        var boxs = document.querySelectorAll('.box');
        console.log(boxs);
1.4 获取body 元素 和 获取html元素

获取body： document.body //返回body元素对象

获取html： document.documentElement //返回html元素对象

2、事件概述

javaScript使我们有能力创建动态页面，而事件是可以被JavaScript检测到的行为

简单理解为：触发——>响应机制 例如：点击按钮，换图片

事件三要素：事件源、事件类型、事件处理程序

2.1 事件源

事件被触发的对象 eg：按钮

	var btn = document.getElementById('btn');
2.2 事件类型

如何触发 什么事件 eg：鼠标点击(onclick)还是鼠标经过还是鼠标按下

2.3 事件处理程序

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

	//事件源:按钮
	//事件类型：点击
	//事件处理程序：通过一个函数，它的作用是弹出一个对话框
	btn.onclick = function(){
   
		alert('点秋香');
	}
2.4 执行事件的步骤

1、获取元素

2、绑定事件（注册事件），程序处理

	<div>123</div>
    <script>
        // 执行事件步骤
        // 点击div，控制台输出：我被选中了

        //1 获取事件源
        var div = document.querySelector('div');
        //2 绑定事件
        // div.onclick
        //3.添加事件处理程序
        div.onclick = function(){
   
            console.log('我被选中了');
        }

    </script>
3、案例：改变元素内容

element.innerText

从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉。

注意：innerText 不识别html标签，非标准，一般都用innerHTML

	<button>显示当前系统时间</button>
    <div>某个时间</div>

    <p>12346</p>

    <script>
        //当我们点击了按钮，div里面的文字会发生变化
        //1、获取元素
        var button = document.querySelector('button');
        var div = document.querySelector('div');

        //2、注册事件
        button.onclick = function () {
   
            div.innerText = getDate();
        }

        function getDate() {
   
            //案例，今天的日期
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            var day = date.getDate();
            return '今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day];
        }

        //元素可以不用添加事件
        var P = document.querySelector('p');
        p.innerText = getDate();
    </script>

element.innerHTML

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

注意：识别HTML标签，W3C标准

4、操作元素
4.1 修改元素属性

案例1：通过点击按钮，实现刘德华与张学友图片的转换

	<div>
        <button id="ldh">刘德华</button>
        <button id="zxy">张学友</button>
    </div>

    <img src="img/liu.jpg" alt="" title="刘德华">

    <script>
        //修改元素属性
        var ldh = document.getElementById('ldh');
        var zxy = document.getElementById('zxy');
        var img = document.querySelector('img');

        //注册事件，处理程序
        zxy.onclick = function () {
   
            img.src = 'img/zhang.jpg';
            img.title = '张学友';
        }
        ldh.onclick = function () {
   
            img.src = 'img/liu.jpg';
            img.title = '刘德华';
        }
    </script>

案例2：分时显示不同图片，显示不同问候语

根据不同时间，页面显示不同图片，同时显示不同的问候语

	<!-- 分时显示不同图片，显示不同问候语案例 -->
    <img src="img/swh.jpg" alt="">
    <div>上午好</div>

    <script>
       // 1、获取元素
        var img = document.querySelector('img');
        var div = document.querySelector('div');

        // 2、得到当前的小时数
        var data = new Date();
        var h = data.getHours();
        
        //判断小时数，改变图片和文字信息
        if(h < 12){
   
            img.src = 'img/swh.jpg';
            div.innerHTML = '上午好,好好学习';
        }else if(h < 18){
   
            img.src = 'img/zwh.jpg';
            div.innerHTML = '中午好，好好学习';
        }else{
   
            img.src = 'img/wsh.jpg';
            div.innerHTML = '晚上好，好好学习啊';
        }
    </script>
4.2 修改表单属性

表单里面的内容，是通过 value 属性来修改的

	<button>按钮</button>
    <input type="text" name="" id="" value="输入内容">

    <script>
        //  1、获取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        // 2、注册事件，处理程序
        btn.onclick = function () {
   
            // input.onclick = '点击了'  这样不行，得通过value来修改
            input.value = '被点击了';
            //input.disabled = true;    点击完一次就不能再点击了
            this.disabled = true;	//this 指向的是事件函数的调用者
        }
    </script>

4.2.1 表单元素的属性操作

仿京东显示密码的案例

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示密码案例</title>
    <style>
        .box {
     
            position: relative;
            width: 400px;
            border: 1px solid #ccc;
            margin: 100px auto;
            height: 44px;
        }

        .box input {
     
            width: 370px;
            height: 30px;
            border: 0;
            outline: none;
            margin-top: 6px;
        }

        .box img {
     
            position: absolute;
            top: 10px;
            right: 10px;
            width: 24px;
            height: 24px;
        }
    </style>
</head>

<body>
    <div class="box">
        <label>
            <img src="img/yanjing1.png" id="eye">
        </label>
        <input type="password" id="pwd">
    </div>

    <script>
        // 1、获取元素
        var eye = document.getElementById('eye');
        var pwd = document.getElementById('pwd');

        // 2、绑定事件，处理程序
        var flag = 0;
        eye.onclick = function () {
     
            //点击了一次之后，flag一定要变化
            if (flag == 0) {
     
                pwd.type = 'text';
                eye.src = 'img/yanjing2.png';
                flag = 1;
            } else {
     
                pwd.type = 'password';
                eye.src = "img/yanjing1.png";
                flag = 0;
            }

        }
    </script>

</body>

</html>
4.3 修改样式属性

elemnet.style 行内样式操作 适用于修改的属性少的情况

element.className 类名样式操作 eg：this.className = ‘change’ ; 让我们当前元素的类名改为了 change，适合于样式较多或者功能复杂的情况。 className 会直接更改元素的类名，会覆盖原先的类名。 如果想要保留原先类名，可以这么做：

first 表示原先的类名，change表示更改后的类名

	this.className = 'first change'    //多类名选择器

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

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改样式</title>
    <style>
        div {
     
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>

    <script>
        //通过点击div，让它换颜色
        // 1、获取元素
        var div = document.querySelector('div');
        // 2、注册事件，处理程序
        div.onclick = function () {
     
            //this 指向函数的调用者
            this.style.backgroundColor = 'purple';

        }
    </script>

</body>

</html>
4.4 总结
5、案例
5.1 案例1：关闭二维码

点击关闭按钮时，二维码的属性 display 为 none；

5.2 案例2：显示隐藏文本框的内容

onfocus 获得焦点事件

onblur 失去焦点事件


<!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>
    <style>
        input {
     
            color: #999;
        }
    </style>
</head>

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

</body>

</html>
5.3 案例3：密码框验证信息

this.value.length 所调用的input标签输入框里所需要输入的长度

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

<head>
    <meta charset="UTF-8">
    <
最低0.47元/天 解锁文章
嘿，程序猿
关注
专栏目录
JavaScript+jQuery+项目实战系列视频教程
10-27
JavaScript jQuery 项目实战系列教程 能掌握JS和Jquery的基本技能，能完成基本的网页特效！
javascript基础&实战
du_ai_me的博客
01-02 885
javascript基础，适合所有初学者用来学习。
【前端】JavaScript入门及实战1-5
最新发布
weixin_45980065的博客
07-17 923
要养成良好的编写注释的习惯，也可以通过注释来对代码进行一些简单的调试。变量更加方便我们使用，所以在开发中都是通过变量去保存一个字面量。而且有些时候，浏览器会加错分号，所以在开发中，分号必须写。字面量都是可以直接使用的，但是我们一般都不会直接使用字面量。变量，可以用来保存字面量，而且变量的值可以任意改变，x=1。所以理论上讲，所有的utf-8中含有的内容都可以作为标识符。多行注释，注释中的内容不会被执行，但是可以在源代码中查看。在JS中所有的可以由我们自主命名的都可以称为是标识符。
Web基础之JavaScript实战
BlueSky_USC的博客
04-18 1278
Web基础之JavaScript实战 一、JavaScript基本概念： 1.JS的执行环境 宿主环境：客户端的JS代码的执行需要宿主环境，一般来说，客户端的浏览器就是JS的宿主环境 解析器：JS代码的执行需要一个解析器来解析JS代码，即JS是一种解释性语言，没有编译，运行时由解析器负责解释运行，现在的主流浏览器一般多带有解析器 IE浏览器 V8版本后都支持JS；
JavaScript高级教程(javascript实战进阶)
m0_47743942的博客
05-31 1260
对JS高级部分进行详细讲解包括：数据类型、引用变量赋值问题、对象和函数、函数原型与原型链（对经典面试题详细说明和总结）、执行上下文和执行上下文栈、作用域、闭包、线程与事件循环
【JavaScript】实战训练小项目-WebAPI
Carefree_State的博客
05-21 3406
本文章是结合之前的知识，学习jQuery框架，和一些其中的API，实现一些互动性强的小项目！
JavaScript实战项目之飞机大战
12-12
在本项目"JavaScript实战项目之飞机大战"中，我们将探讨如何使用JavaScript这门客户端脚本语言来构建一个互动的游戏。JavaScript通常用于网页交互，而在这个案例中，它被用来实现了一个经典的游戏——飞机大战。通过...
Javascript特效实战
07-22
资源名称：Javascript特效实战资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
javascript实战+源码
11-08
《JavaScript实战》是一部讲述 JavaScript实战项目开发的精彩著作，由两部分组成。第一部分讨论一般性的 JavaScript主题，包括 JavaScript的简史、好的编码习惯、调试技巧和工具等；第二部分是 10个具体项目，每一章...
13个JavaScript最佳实践
粉丝们务必加入微信粉丝群
07-11 253
今天就这样吧！真心希望你觉得有用；如果是的话，请一定鼓掌并与他人分享。
JS项目案例实战简单管理系统
yanqiu12138的博客
02-06 993
json-server环境编写路径问题引发后续bug的连锁反应第一次写不清楚如何写ajax和fetch，进行ajax的数据存储不能熟练运用项目的文件夹排版一开始没有慎重导致链接无法对应es6语法不熟悉js的接口交互听不太懂，只会照抄，说不出原理对业务逻辑分析不知所措，找不到方向对echarts库，Lodash不是特别明白如何引用，对bootstrap框架的代码具体实例掌握地一知半解。
JS项目实战
weixin_73696461的博客
02-06 1026
主要由导航栏和产品轮播图构成，多数操作是由bootscript的插件构成，后进行修改，导航栏不同区域对应不同的网站跳转。这是第一次做的较为完整的页面，体量较大，在获取数据和将数据渲染至网页中，极其容易导致文本错乱。需要极规整的思路和部署，更主要的是需要大量练习，来强化思维和技能。
JavaScript实战之购物车案例
mirror_Mx的博客
12-25 1808
这个是通过网上视频案例学习，然后，自己想整理一下页面书写流程文档。 show样式： HTML代码结构+CSS结构 初始化css样式： * { margin: 0; padding: 0; } a { color: #666; text-decoration: none; } body { padding: 20px; } 此页面主要...
JavaScript实战教程
宠着长岛冰茶吗
08-29 2871
Don’t let the past steal your present.
一些javascript的简单实战应用
SamaelzzZ的博客
04-26 1364
Hellow大家好！又到了我们最痛苦的学习时间！相较于CSS和HTML啊，javascript相比之下会难一点点（亿点点），大家一起努力（摆烂）啊！ 来看一下作业 <script> let a = 'abc'; let b = a.split(''); let arr = b.reverse().join(''); document.write(arr); </script> 这样就成功啦 我们来讲解一下思路 先声明一个变量a为"abc"，注意啊这边的ab
Web前端：JavaScript最强总结 附详细代码 （带常用案例！）
热门推荐
BudingCode的博客
03-30 8万+
JavaScript 是脚本语言，是一种解释性脚本语言(代码不进行预编译)
javaScript实战项目之动态表格【文末附源码】
2303_79056168的博客
04-12 800
核心竞争力，怎么才能提高呢？成年人想要改变生活，逆转状态？那就开始学习吧~万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。
js基础知识汇总01
AnalogElectronic的博客
09-13 94
Hello Wolrd！！！ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--JS代码需要编写到script标签中--> <script type="text/javascript"> /* * 控制浏览器弹出一个警告框 * alert("哥，你真帅啊！！");
JavaScript实战：进阶与最佳实践
"《JavaScript实战》是一本深入浅出的JavaScript教程，旨在帮助读者掌握JavaScript语言的进化历程和最佳实践。该书分为两个部分，共包含十个章节，覆盖了从基础知识到高级技术的全方位内容。 第一部分介绍了...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值