JavaScript高级Ⅰ(自认为很全面版)

目录

第1章 BOM编程

1.1 BOM编程概述

1.1.1 BOM编程的概念

1.1.2 BOM编程的作用

1.1.3 BOM常用的对象

1.2 window对象

1.2.1 JS三个弹框(了解)

代码演示:

运行效果:

1.2.2 JS两个定时器

代码演示:

运行效果:

1.2.3 案例-可以启停的时钟

1.3 location对象

1.3.1 location是什么

1.3.2 location常用的属性

1.3.3 location常用的方法

1.3.4 案例演示

1.4 history对象

1.4.1 作用

1.4.2 方法

1.4.3 案例演示

第2章 DOM编程

2.1 DOM编程概述

2.1.1 DOM编程的基本概念

2.1.2 DOM编程的作用

2.1.3 dom获取元素

代码演示:

运行效果:


第1章 BOM编程

1.1 BOM编程概述

1.1.1 BOM编程的概念

BOM:Browser Object Model 浏览器对象模型 js把浏览器抽象成为一个对象,允许我们使用JS代码来模拟浏览器的功能.

1.1.2 BOM编程的作用

用于操作浏览器中的各种对象,不同浏览器定义上是有差别的,实现方式也会有不同。以下是Chrome浏览器各个 BOM对象。

1.1.3 BOM常用的对象

window   整个浏览器窗口对象

location   浏览器地址(栏)对象

history     浏览器历史记录对象

1.2 window对象

BOM的核心对象是window,它表示浏览器的一个实例。

注:只要是window的方法和属性,window对象名都可以省略

window对象最常使用的是  JS三个弹框(了解)  JS两个定时器(掌握)

1.2.1 JS三个弹框(了解)

代码演示:
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>03-JS三个弹框</title>
</head>
<body>
<!--
JS三个弹框查询手册完成1. 警告用户网站内容可能不安全alert2. 让用户确认是否删除所有数据confirm 如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。3. 提示用户输入银行卡密码prompt 如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。小扩展:在js编码中 所有的 window. 都可以省略不写. 例如 alert()所有的全局函数都被挂靠在window上, 即前面都可以加window. 例如: window.eval()一般都省略 window.--><script >// 1. 警告用户网站内容可能不安全// window.alert("您访问的内容可能会害眼!!!");alert("您访问的内容可能会害眼+2!!!");//省略window.的简写形式// 2. 让用户确认是否删除所有数据// let boo = window.confirm("您确定要删除所有小三聊天记录吗?")let boo = confirm("您确定要删除所有小三聊天记录吗?");//省略window.的简写形式console.log(boo);//用户确认true,取消false// 3. 提示用户输入银行卡密码// let pass = window.prompt("请输入银行卡密码",123);let pass = prompt("请输入银行卡密码",123);//省略window.的简写形式console.log(pass);</script>
</body>
</html>
运行效果:

1.2.2 JS两个定时器

代码演示:
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>04-JS两个定时器</title>
</head>
<body><!--
JS两个定时器1. 定时5秒之后在控制台打印当前时间setTimeout(函数,毫秒数) 在固定的毫秒数后执行一次函数使用实例:setTimeout(printTime,5000);setTimeout("printTime()",5000);2. 点击按钮取消打印时间clearTimeout(定时器对象) 清除定时器对象3. 每隔2秒在控制台打印递增自然数setInterval(函数,毫秒数) 以固定毫秒数为频率循环执行函数使用实例:setInterval(printNumber,2000);setInterval("printNumber()",2000);4. 点击按钮取消打印自然数总结:定时器执行一次函数使用 setTimeout 清除定时器 clearTimeout定时器循环一直执行函数使用 setInterval 清除定时器 clearInterval-->
<button onclick="clearPrintTime()">取消打印时间</button>
<button onclick="clearprintNumber()">取消打印自然数</button>
<script >// 1. 定时5秒之后在控制台打印当前时间function printTime(){console.log("当前时间");}let timeout = setTimeout(printTime,5000);//5秒后执行printTime//let timeout = setTimeout("printTime()",5000);//5秒后执行printTime// 2. 点击按钮取消打印时间function clearPrintTime(){clearTimeout(timeout);//清除定时器}// 3. 每隔2秒在控制台打印递增自然数let k = 1;function printNumber(){console.log(k++);}let interval = setInterval(printNumber,2000);//每隔2秒打印一次数字//let interval = setInterval("printNumber()",2000);//每隔2秒打印一次数字// 4. 点击按钮取消打印自然数function clearprintNumber(){clearInterval(interval);//清除定时器}
</script>
</body>
</html>
运行效果:

1.2.3 案例-可以启停的时钟

案例技术分析:

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>15-可以启停的时钟</title>
</head>
<body>
<!--
可以启停的时钟实现步骤1. 点击开始按钮: 使用定时器获取当前时间显示在页面中2. 点击结束按钮: 清理定时器对象
-->
<style>.clock {color: red;font-size: 100px;font-family: "楷体";}
</style>
<button id="start">开启</button>&emsp;<button id="stop">停止</button>
<div class="clock"></div><script >//获取时钟div元素let clock = document.querySelector(".clock");let timer = null;//全局定时器//获取当前时间设置到页面function showTime(){//1. 创建日期对象let d1 = new Date()//当前时间let d2 = new Date(2019,8,19,12,0,0,0);//固定时间 2019-07-19 12:00:00.000//2. 获取当前时间 转为字符串 格式 yyyy-MM-dd HH:mm:ss.SSSlet dt = d1;let year = dt.getFullYear();//获取年2019console.log(year);//let month = dt.getMonth()+1;//获取月//console.log(month);//month = "7".padStart(2,"0");//把7补齐为07//console.log(month);let month = new String(dt.getMonth()+1).padStart(2,"0");//获取月,补齐为2位字符let date = new String(dt.getDate()).padStart(2,"0");//获取日,补齐为2位字符let hour = new String(dt.getHours()).padStart(2,"0");//获取时,补齐为2位字符let minute = new String(dt.getMinutes()).padStart(2,"0");//获取分,补齐为2位字符let second = new String(dt.getSeconds()).padStart(2,"0");//获取秒,补齐为2位字符let millisecond = new String(dt.getMilliseconds()).padStart(3,"0");//获取毫秒,补齐为3位字符
//  let dateStr = `yyyy-MM-dd HH:mm:ss.SSS`;let dateStr = `${year}-${month}-${date} ${hour}:${minute}:${second}.${millisecond}`;console.log(dateStr);clock.innerText = dateStr;//设置到页面中}//给开始按钮绑定事件document.querySelector("#start").onclick = function(){//定时 获取当前时间设置到页面timer = setInterval(showTime,1);//每隔1毫秒显示一次的当前时间};//给停止按钮绑定事件document.querySelector("#stop").onclick = function(){clearInterval(timer);//清除定时器}</script>
</body>
</html>

运行效果:

1.3 location对象

1.3.1 location是什么

代表浏览器的地址栏对象

1.3.2 location常用的属性

1.3.3 location常用的方法

1.3.4 案例演示

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>05-location地址</title>
</head>
<body>
<!--
location地址1. 获取当前地址window.location.href 属性返回当前页面的 URL。2. 刷新当前页面window.location.reload();//刷新页面,等同于页面的刷新按钮3. 跳转页面window.location.href = 新地址 跳转到新地址
-->
<button onclick="getLocation()">获取当前地址</button>
<button onclick="refeshLocation()">刷新页面</button>
<button onclick="jumpLocation()">地址跳转</button>
<script >// 1. 获取当前地址function getLocation(){let locationStr = window.location.href;//获取当前页面地址console.log(locationStr);}// 2. 刷新当前页面function refeshLocation(){window.location.reload();//刷新页面,等同于页面的刷新按钮}// 3. 跳转页面function jumpLocation(){location.href = "https://www.jd.com";}
</script>
</body>
</html>

运行效果:

1.4 history对象

1.4.1 作用

访问浏览器之前已经访问过的页面

1.4.2 方法

1.4.3 案例演示

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>06-history对象</title>
</head>
<body>
<!--
history对象(了解)1. 页面后退 window.history.back(); history.go(-1);//页面后退2. 页面前进 window.history.forward(); history.go(1);//页面前进3. 页面刷新 history.go(0);//当前页面
-->
<button onclick="back()">页面后退</button>
<button onclick="forward()">页面前进</button>
<button onclick="refresh()">页面刷新</button>
<a href="04-JS两个定时器.html">两个定时器</a>
<script >// 1. 页面后退function back(){history.back();//页面后退// history.go(-1);}// 2. 页面前进function forward() {history.forward();//页面前进// history.go(1);}// 3. 页面刷新function refresh(){history.go(0);//当前页面}
</script>
</body>
</html>

第2章 DOM编程

2.1 DOM编程概述

2.1.1 DOM编程的基本概念

Document Object Model 文档对象模型,用于操作网页中元素

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。

简单来说JS把页面抽象描述为一个dom对象.

2.1.2 DOM编程的作用

每个HTML页面在被浏览器解析的时候都会在内存中创建一棵DOM树,我们通过编写JS代码就可以访问这棵树上任 何一个节点,并且对节点进行操作。通过 DOM模型,可以访问所有的 HTML 元素,连同它们所包含的文本和属 性。可以对其中的内容进行修改和删除,同时也可以创建新的元素。新创建的元素对象,要挂到DOM树上才可以 在网页上显示出来。

  • JavaScript 能够改变页面中的所有 HTML 元素
  • JavaScript 能够改变页面中的所有 HTML 属性
  • JavaScript 能够改变页面中的所有 CSS 样式
  • JavaScript 能够对页面中的所有事件做出反应

通过dom对象JS拥有了如上功能

2.1.3 dom获取元素

dom获取元素

第一种(掌握):es6提供了强大的根据CSS选择器获取元素的接口 document.querySelector(CSS选择器) 根据CSS选择器获取一个元素,匹配到多个时只返回第一个元素对象

document.querySelectorAll(CSS选择器) 根据CSS选择器获取所有元素,返回所有元素数组对象

根据第一种语法,完成如下功能:

1.根据Id选择器获取一个元素

2.根据类选择器获取一个(多个)元素

3.根据标签选择器获取一个(多个)元素

4.根据属性选择器获取一个(多个)元素

5.根据关系选择器获取一个(多个)元素

第二种(了解):es5之前也有一个获取元素的接口

1. 根据id获取一个元素 getElementById(ID)

2. 根据class获取多个元素 getElementsByClassName(class)

3. 根据标签名称获取多个元素 getElementsByTagName(标签)

4. 根据name属性获取多个元素 getElementsByName(name)

小总结:

es6接口获取元素功能非常强大,而且接口非常易用.

es5接口功能非常局限,而且接口使用复杂.

代码演示:
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>08-dom获取元素</title>
</head>
<body>
<!--
dom获取元素第一种(掌握):es6提供了强大的根据CSS选择器获取元素的接口document.querySelector(CSS选择器) 根据CSS选择器获取一个元素,匹配到多个时只返回第一个元素对象document.querySelectorAll(CSS选择器) 根据CSS选择器获取所有元素,返回所有元素数组对象根据第一种语法,完成如下功能:1.根据Id选择器获取一个元素2.根据类选择器获取一个(多个)元素3.根据标签选择器获取一个(多个)元素4.根据属性选择器获取一个(多个)元素5.根据关系选择器获取一个(多个)元素第二种(了解):es5之前也有一个获取元素的接口1. 根据id获取一个元素 getElementById(ID)2. 根据class获取多个元素 getElementsByClassName(class)3. 根据标签名称获取多个元素 getElementsByTagName(标签)4. 根据name属性获取多个元素 getElementsByName(name)小总结:es6接口获取元素功能非常强大,而且接口非常易用.es5接口功能非常局限,而且接口使用复杂.-->
<form action="#" method="get">姓名 <input type="text" name="userName" id="userName" value="邱少云"/> <br/>密码 <input type="password" name="userPass"> <br/>生日 <input type="date" name="userBirth"><br/>性别 <input type="radio" name="gender" value="male" class="radio">男&emsp;<input type="radio" name="gender" value="female" class="radio"/>女<br/>爱好 <input type="checkbox" name="hobby" value="1">抽烟<input type="checkbox" name="hobby" value="2">喝酒<input type="checkbox" name="hobby" value="3">烫头<br/>头像 <input type="file" name="userPic"><br/>学历<select name="userEdu" ><option value="0">请选择</option><option value="1">入门</option><option value="2">精通</option><option value="3">放弃</option></select><br/>简介<textarea name="userIntro"  cols="30" rows="10">默认值</textarea><br/><input type="reset" value="清空按钮"/><input type="submit" value="提交按钮"/><br/><input type="button" value="普通按钮"><button>专业按钮</button><button>&times;</button></form><script >// 1.根据Id选择器获取一个元素let userName = document.querySelector("#userName");//获取id=userName的元素,返回第一个console.log(userName);console.log(userName.value);// 2.根据类选择器获取一个(多个)元素let radio = document.querySelector(".radio");//获取class=radio的元素,返回第一个console.log(radio);let radios = document.querySelectorAll(".radio");//获取class=radio元素,返回所有元素数组for(let r of radios){console.log(r.value);}// 3.根据标签选择器获取一个(多个)元素let option = document.querySelector("option");//获取option标签,返回一个元素console.log(option);let options = document.querySelectorAll("option");//获取所有的option标签,返回元素数组for(o of options){console.log(o.value);}// 4.根据属性选择器获取一个(多个)元素let pass = document.querySelector('input[type="password"]');//获取type="password"的input的标签,返回一个元素console.log(pass);let checkboxs = document.querySelectorAll('input[type="checkbox"]');//获取type="checkbox"的所有input标签,返回所有元素数组for(let check of checkboxs){console.log(check);}// 5.根据关系选择器获取一个(多个)元素let sno = document.querySelector('select[name="userEdu"]>option');//获取name="userEdu"的select标签的孩子标签option,返回一个元素console.log(sno);let snos = document.querySelectorAll('select[name="userEdu"]>option');//获取name="userEdu"的select标签的所有孩子标签option,返回所有元素数组for(let sn of snos){console.log(sn);}//第二种(了解):es5之前也有一个获取元素的接口console.log("------------ 华丽丽的分割线 --------");// 1. 根据id获取一个元素let es5UserName = document.getElementById("userName");console.log(es5UserName);// 2. 根据class获取多个元素let es5radios = document.getElementsByClassName("radio");//获取class=radio元素,返回所有元素数组for(let r of es5radios){console.log(r);}// 3. 根据标签名称获取多个元素let es5options = document.getElementsByTagName("option")//获取所有的option标签,返回元素数组for(o of es5options){console.log(o);}// 4. 根据name属性获取多个元素let es5hobby = document.getElementsByName("hobby");//获取所有name="hobby"的所有标签,返回所有元素数组for(let h of es5hobby){console.log(h);}
</script></body>
</html>
运行效果:

  

更多内容敬候 JavaScript高级Ⅱ

欢迎大家指点评论~ 点赞+关注⭐⭐⭐

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/729342.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

机器学习——向量化

通常各种编程语言里&#xff0c;都有对应的各种线性代数库&#xff0c;我们可以利用现成的代数库来快速的求解我们想要的结果&#xff0c;也就是说&#xff0c;通过代数库&#xff0c;会让我们可以用更少的代码&#xff0c;更高的效率实现需求&#xff0c;这就是向量化的作用 …

(黑马出品_05)SpringCloud+RabbitMQ+Docker+Redis+搜索+分布式

&#xff08;黑马出品_05&#xff09;SpringCloudRabbitMQDockerRedis搜索分布式 微服务技术分布式搜索 今日目标1.初识elasticsearch1.1.了解ES1.1.1.elasticsearch的作用1.1.2.ELK技术栈1.1.3.elasticsearch和lucene1.1.4.为什么不是其他搜索技…

go语言基础 -- 文件操作

基础的文件操作方法 go里面的文件操作封装在os包里面的File结构体中&#xff0c;要用的时候最好去查下官方文档&#xff0c;这里介绍下基本的文件操作。 打开关闭文件 import("os" ) func main() {// Open返回*File指针&#xff0c;后续的操作都通过*File对象操作…

白酒:蒸馏技术的优化与新型蒸馏设备的研发

蒸馏技术是豪迈白酒生产中的重要环节&#xff0c;直接关系到产品的质量和风格。云仓酒庄在蒸馏技术的优化和新型蒸馏设备的研发方面进行了大量探索和实践&#xff0c;旨在提升白酒的品质和口感。 首先&#xff0c;蒸馏技术的优化对于豪迈白酒的品质至关重要。传统的蒸馏技术通常…

Python实现时间序列分析Theta模型(ThetaModel算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 时间序列分析中的Theta模型(Theta Model)是由Athanasios Theodoridis在2008年提出的一种统计预测方法&…

DNDC模型下载与安装、建模方法、结果分析、率定验证

目录 专题一 DNDC模型介绍 专题二 DNDC初步操作 专题三 遥感和GIS基础 专题四 DNDC气象数据 专题五 DNDC土地数据 专题六 DNDC土壤数据 专题七 DNDC结果分析 专题八 DNDC率定验证 专题九 土壤碳储量与作物产量 专题十 温室气体排放分析 专题十一 农田减排潜力分析 …

义乌等保测评公司有哪些?用哪款堡垒机好?

对于义乌&#xff0c;相信大家都听过&#xff0c;也都知道&#xff0c;耳熟能详。这不有义乌小伙伴在问&#xff0c;义乌等保测评公司有哪些&#xff1f;用哪款堡垒机好&#xff1f;今天我们就来简单聊聊。 义乌等保测评公司有哪些&#xff1f; 目前浙江义乌本地暂未有正规等保…

守护国货,爱创助力花西子全面升级打假体系

图源自花西子官方微博 2021年、2022年、2023年上半年中国彩妆类目销售额均排名第一&#xff08;天猫、抖音&#xff09;&#xff0c;这就是中国品牌花西子。 “水光潋滟晴方好&#xff0c;远山渺渺&#xff0c;花间西子笑。”以花为姓&#xff0c;西子为名的花西子&#xff0c…

Threejs用切线实现模型沿着轨道行驶

这次讲一个经常遇到的使用场景&#xff0c;让模型沿着轨迹运动&#xff0c;这个场景需要解决两个问题&#xff0c;第一是让模型沿着轨迹运动&#xff0c;第二是在沿着轨迹运动的同时&#xff0c;要保持模型的头部也时刻保持前方&#xff0c;而不是单纯的只是更新模型位置。 还是…

南京观海微电子---PCIe协议(一)

概述 PCIe协议是一种端对端的互连协议&#xff0c;提供了高速传输带宽的解决方案。与传统的并行总线标准如PCI和PCI-X相比&#xff0c;PCIe提供了更低的延迟和更高的数据传输速率。每个连接到主板上的设备都通过独立的点对点连接与之相连&#xff0c;这避免了设备之间因为共享…

Leetcode HOT150

55. 跳跃游戏 给你一个非负整数数组 nums &#xff0c;你最初位于数组的 第一个下标 。数组中的每个元素代表你在该位置可以跳跃的最大长度。 判断你是否能够到达最后一个下标&#xff0c;如果可以&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 示例 1 …

【动态规划】二维费用的背包问题

欢迎来到Cefler的博客&#x1f601; &#x1f54c;博客主页&#xff1a;折纸花满衣 &#x1f3e0;个人专栏&#xff1a;题目解析 &#x1f30e;推荐文章&#xff1a;【LeetCode】winter vacation training 目录 &#x1f449;&#x1f3fb;一和零 &#x1f449;&#x1f3fb;一…

2024新疆专升本考试报名教程详解

2024新疆专升本报名时间已经开始了&#xff0c;想要参加考试报名的同学可以提前准备好报名照

如何实现class文件的反编译:java-decompiler 反编译工具

java-decompiler 反编译工具 &#x1f600; Java Decompiler 是Java反编译工具&#xff0c;可以对 Java 5 和更高版本的 class 文件进行反编译分析。 &#x1f4dd; 主旨内容 Java Decompiler是一项开源工具&#xff0c;Java Decompiler工具不仅可以实现反编译.class文件&…

央企数字化转型进行时,IT自身数字化大有可为

这几天&#xff0c;新质生产力成为两会热词之一。发展新质生产力&#xff0c;推动高质量发展是中国企业需要答好的课题。国资央企作为我国国民经济的支柱力量&#xff0c;更需要在布局培育新质生产力先行先试&#xff0c;释放高质量发展新动能&#xff0c;朝着世界一流企业目标…

【OpenGL实践02】glDrawElements的使用案例

目录 一、说明二、顶点顺序渲染和选择渲染2.1 基本方法函数2.2.顶点数据管理2.3 层级关系 三、测试EBO的代码四、总结五、后记 一、说明 我们常用的着色器绘制函数是glDrawArray和glDrawElements&#xff0c;glDrawArray我们已经使用的很熟练&#xff0c;不需要重提&#xff…

常见数据类型

目录 数据类型 字符串 char nchar varchar varchar2 nvarchar 数字 number integer binary_float binary_double float 日期 date timestamp 大文本数据 大对象数据 Oracle从入门到总裁:https://blog.csdn.net/weixin_67859959/article/details/135209645 数…

windows@查看主机名@查看IP地址

文章目录 计算机名获取ip地址方式0(最可靠)方式1方式2 查看到多个ip安装了vmware其他情况 计算机名 开始菜单中直接搜索计算机名可以进入到设置查看 更通用的办法是打开cmd或powershell 输入hostname.exe PS>HOSTNAME.EXE ColorfulCxxu返回的ColorfulCxxu就是计算机名 或…

使用anaconda管理多python版本环境

anaconda使用 安装 下载地址 miniconda anaconda 两者区别 Miniconda只包含了conda和Python&#xff0c;以及一些必要的依赖项&#xff0c;它的安装文件较小&#xff0c;占用空间较少&#xff0c;用户可以根据需要自行安装其他的包。Anaconda包含了conda、Python和超过150…

unity学习(51)——服务器三次注册限制以及数据库化角色信息6--完结

同一账号只写第一次&#xff0c;不同账号第一次爆炸 &#xff0c;就因为下面部分得到逻辑有问题 修改后的代码如下&#xff1a;1.成功完成角色注册信息的数据库化记录。2.每个账号上限3个角色。3.角色是可以重名的&#xff0c;但是角色的id不会重名。 internal class UserCach…