四、JavaScript实战（上）

最新推荐文章于 2024-10-05 16:28:34 发布
最新推荐文章于 2024-10-05 16:28:34 发布
阅读量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元/天 解锁文章
嘿，程序猿
关注
专栏目录
原生js实现移动端Touch轮播图的方法步骤
明月如霜丶
01-20 796
Touch 轮播图 touch轮播图其实就是通过手指的滑动，来左右切换轮播图，下面我们通过一个案例，来实现下。 1. html 结构 结构上，还是用ul、li来存放轮播图片，ol、li来存放轮播小圆点： 2. 样式初始化 html的一些标签，都会有一些默认样式，比如body标签默认是有一个边距的，为了不影响美观，我们需要清除掉。 /* 清除标签默认边距 */ body,ul,li,ol,img ...
从javascript语言本身谈项目实战
12-14 528
随着ajax的升温，javascript越来越得到人们的重视。重要的是，ajax在一定程度上带来了web软件架构上的变化，人们把越来越多的功能分配到客户端实现，javascript子项目规模越来越大。如何更高效的使用javascript，如何更科学的组织javascript，如何更顺利的保证项目进展？我想就我的经验谈一点浅见。一。 开发人员需要认真学习javascript语言本身      
JavaScript树形结构实战例题集
最新发布
weixin_42596214的博客
10-05 789
本文还有配套的精品资源，点击获取 简介：JavaScript中的树形结构是处理层次数据的关键，广泛应用在文件系统、DOM结构、路由和图形渲染等领域。本资源提供近40种树形结构的JavaScript示例和实践练习，旨在加深开发者对树形结构原理和操作技巧的理解。涵盖了从基础的二叉树到复杂的B树，包括它们的创建、遍历、查找、插入和删除操作。通过这些练习，开发者能够提升数据结构的处...
javascript map 排序_9 个JavaScript 技巧
weixin_39911056的博客
11-29 758
比较JavaScript中的数据结构(数组与对象)1.生成指定范围的数字在某些情况下，我们会创建一个处在两个数之间的数组。假设我们要判断某人的生日是否在某个范围的年份内，那么下面是实现它的一个很简单的方法 ?letstart=1900,end=2000;[...newArray(end+1).keys()].slice(start);//[1900,1901,....
JavaScript实战讲解课程
06-13
文件名中的“实战讲解课程”暗示了这些压缩包可能包含了一系列关于JavaScript实际应用的教学资源，可能包括视频教程、示例代码、练习项目等，帮助学习者深入理解和掌握JavaScript的实际开发技能。通过学习这些资源，...
javascript实战+源码
11-08
《JavaScript实战》是一部讲述 JavaScript实战项目开发的精彩著作，由两部分组成。第一部分讨论一般性的 JavaScript主题，包括 JavaScript的简史、好的编码习惯、调试技巧和工具等；第二部分是 10个具体项目，每一章...
JavaScript实战项目之飞机大战
12-12
在本项目"JavaScript实战项目之飞机大战"中，我们将探讨如何使用JavaScript这门客户端脚本语言来构建一个互动的游戏。JavaScript通常用于网页交互，而在这个案例中，它被用来实现了一个经典的游戏——飞机大战。通过...
Javascript特效实战
07-22
资源名称：Javascript特效实战资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
JavaScript实战.pdf 中文完整版
04-23
本书“JavaScript实战.pdf 中文完整版”深入浅出地介绍了JavaScript在实际项目中的应用，旨在帮助读者提升实战能力，掌握从基础到高级的JavaScript知识。 一、JavaScript基础 1. 变量与数据类型：了解JavaScript中...
JavaScript项目实战-优学网.zip
07-07
优学网项目主要分为首页+登录注册页+视频播放页内容，使用html+css实现基本页面布局，完成ajax请求数据进行页面渲染以及表单正则验证的项目练习。 资源中含有基础布局项目以及项目优化两部分，代码中有详细的注解
javascript项目实战 模板
01-06
北大青鸟 ACCP5.0 51Job项目实战 模板
JavaScript实战大全300例
11-12
JavaScript实战大全300例JavaScript实战大全300例JavaScript实战大全300例JavaScript实战大全300例
JavaScript网页开发实战
08-19
本书是计算机金典工程系列丛书之一。介绍制作JavaScript网页特效所需要的基础知识，并且利用大量例子对JavaScript的实际使用方式进行详细讲解
JavaScript-项目实战（优学网-ajax请求数据渲染页面+登录注册表单正则）
qq_41008567的博客
07-03 1834
优学网项目简介 一、首页 (一) 、轮播图模块 1、图片轮播–定时器 2、鼠标滑入滑出事件 3、左右箭头事件 4、小圆点点击事件 (二) 、热门直播模块 (三) 、精品课程模块 二、登录注册页 (一) 、登录模块 (二) 、注册模块 三、视频播放页 (一) 、视频播放模块 1、视频设置 2、视频播放列表设置 (二) 、学员评价模块 1、评价信息数据处理 2、按钮事件设置
JavaScript项目实战 轮播图（手动切图）
关北道.
11-20 892
imgarray是存储图片名的数组，大家把这个改成自己的图片名称就好 querySelector函数获取img元素，可用getElementByID代替 <!DOCTYPE html> <head> <meta charset="UTF-8"> <title>轮播图</title> <meta name="viewport" content="width=device-width"> <lin.
javascript 技术实战
Quentinlee的专栏
08-23 3964
    我的博客                跨越生活的足迹................... 2007-1-8pt和px的区别    像素（Pixel）是相对长度单位，是相对于显示器屏幕分辨率而言的。   点（Point）是绝对长度单位。1in=2.54cm=25.4mm=72pt=6pc。 用pt的话会随浏览器或系统的显示字体大小改变。   推荐用px，因为px能够精确地表示元素
JavaScript实战：进阶与最佳实践
"《JavaScript实战》是一本深入浅出的JavaScript教程，旨在帮助读者掌握JavaScript语言的进化历程和最佳实践。该书分为两个部分，共包含十个章节，覆盖了从基础知识到高级技术的全方位内容。 第一部分介绍了...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值