前端基础：JavaaScript（篇二）

目录

内置对象

String字符串

属性

代码

运行

方法

代码

运行

日期

代码

运行

Math

代码

运行

数组

定义

属性

代码

运行 

方法

join(分隔符>) ：

代码

运行

reverse()：

代码

运行

sort() ：

代码

运行

事件

代码

运行

代码 

运行

Html DOM对象

Html DOM-查找 元素

HTML DOM - 改变 HTML

HTML DOM - 改变 CSS

代码

运行

代码

运行

代码

运行

代码

运行

计时

代码

运行

代码

运行

内置对象

String字符串

属性

length 用法：返回该字符串的长度.

代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>var s = "abcdefg";console.log(s.length);console.log(s.charAt(2)); </script></head><body></body>
</html>
运行

方法

charAt(n)：返回该字符串位于第n位的单个字符.

indexOf(char)：返回指定char首次出现的位置.

lastIndexOf(char) ：跟 indexOf() 相似，不过是从后边开始找.

substring(start,end) ：返回原字符串的子字符串，该字符串是原字符串从start位 置到end位置的前一位置的一段.

substr(start,length) ：返回原字符串的子字符串，该字符串是原字符串从start位 置开始，长度为length的一段.

split(分隔符字符) ：返回一个数组，该数组是从字符串对象中分离开来的，分隔 符字符>决定了分离的地方，它本身不会包含在所返回的数组中。

例如：'1&2&345&678'.split('&')返回数组：1,2,345,678。

代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>var s = "abcdefg"; console.log(s.charAt(2));console.log(s.indexOf("d"));console.log(s.substring(0,4));//substring(开始的位置，结束的位置)console.log(s.substr(1,4));//substr(开始的位置，截取的长度) </script></head><body></body>
</html>
运行

日期

new Date() 返回当日的日期和时间

getFullYear() 返回四位数字年份

getDate() 返回一个月中的某一天 (1 ~ 31)

getMonth() 返回月份 (0 ~ 11)

getDay() 返回一周中的某一天 (0 ~ 6)

getHours() 返回 Date 对象的小时 (0 ~ 23)

getMinutes() 返回 Date 对象的分钟 (0 ~ 59)

getSeconds() 返回 Date 对象的秒数 (0 ~ 59))

代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>var date = new Date();console.log(date.getFullYear());console.log(date.getMonth()+1);console.log(date.getDate());//月中的天console.log(date.getDay());//星期	</script></head><body></body>
</html>

运行

Math

PI 返回π（3.1415926535...)。

Math.abs(x) 绝对值计算；

Math.pow(x,y) 数的幂；x的y次幂

Math.sqrt(x) 计算平方根；

Math.ceil(x) 对一个数进行上舍入

Math.floor(x) 对一个数进行下舍入。

Math.round(x) 把一个数四舍五入为最接近的整数

Math.random() 返回 0 ~ 1 之间的随机数

Math.max(x,y) 返回 x 和 y 中的最大值 Math.min(x,y) 返回 x 和 y 中的最小值

代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>console.log(Math.random());	</script></head><body></body>
</html>

运行

数组

定义

1、var 数组名> = new Array();

      添加数组元素：数组名>[下标] = 值;

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>var a = new Array();a[0] = 1;a[1] = 2;a[3] = "a";a[5] = true; </script></head><body></body>
</html>

2、var 数组名> = new Array(元素1>, 元素2>, 元素3>...);

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>var a = new Array(1,2,3,4,5,6);	</script></head><body></body>
</html>

3、var 数组名> = [元素1>, 元素2>, 元素3>...];

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>var a = [1,2,3,4,5,66];</script></head><body></body>
</html>

属性

length ：数组的长度，即数组里有多少个元素。

代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>var a = [1,2,3,4,5,66];//a[6] = 7;console.log(a);	console.log(a.length);</script></head><body></body>
</html>
运行 

方法

join(分隔符>) ：
代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>var a = [1,2,3,4,5,66];var s = a.join("  ");//将数组转为字符串console.log(s);</script></head><body></body>
</html>
运行

reverse()：
代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>var a = [1,2,3,4,5,66];console.log(a.reverse());//数组逆序的操作</script></head><body></body>
</html>
运行

sort() ：
代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>//var a1 = ["c","a","b"]; var a1 = [2,11,3,5,1];a1.sort(numbersort);//在sort内部会调用自定义的numbersort函数 ，每次传入两个值console.log(a1);//对数字排序的自定义的比较函数function numbersort(a,b){return a-b;}</script></head><body></body>
</html>
运行

var a1 = ["c","a","b"]; 


var a1 = [2,11,3,5,1];

事件

onclick  鼠标单击事件
ondblclick  鼠标双击事件
onfocus  聚焦事件 当输入框获得鼠标焦点时触发事件
onblur  失焦事件 当输入框失去鼠标焦点时触发事件
onload  当网页内容加载完毕后触发事件
onchange  当输入框/下拉框失去鼠标焦点且内容发生改变时触发事件

代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>function test(){ console.log("测试"); //控制台输出} </script></head><body onload="test()"><input type="button" value="单击事件" onclick="test()"/><div onclick="test()">单击事件</div><input type="button" value="双击事件" ondblclick="test()"/></body>
</html>

运行

代码 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>function test(){ console.log("测试"); //控制台输出} </script></head><body><input type="test" onfocus="test()" onblur="test()"/><div style="background-color: aquamarine;" onmouseover="test()" onmouseout="test()">ooo</div>	<input type="text" onchange="test()"/></body>
</html>

运行

Html DOM对象

DOM--文档对象（网页中的标签）
通过标签事件触发函数（js）,在函数中又返回来对网页中标签操作
在js中如何能够操作网页中的标签？
在js语言中，认为每一个标签就是一个独一无二的对象
在js语言中可以获得网页中的标签，这样就可以在js中对标签的属性，内容，样式进行操作

Html DOM-查找 元素

要操作那个标签，首先获得标签
document对象，在网页加载完成后自动生产的一个文档对象

通过 id 找到 HTML 标签 document.getElementById(“id");

通过标签名找到 HTML 标签 document.getElementsByTagName("p");

通过类名找到 HTML 标签 document.getElementsByClassName("p");

通过name找到 HTML 标签 document.getElementsByName(“name");

HTML DOM - 改变 HTML

Html dom允许javaScript 改变html标签的内容。

document.getElementById(“username").value=“new value"; document.getElementById("image").src=“new.jpg";

修改 HTML 内容的最简单的方法时使用 innerHTML 属性

document.getElementById(“div”).innerHTML=new HTML

HTML DOM - 改变 CSS

html dom允许 javaScript改变html标签的样式。

document.getElementById("id").style.property=new style;

代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>function oper(){//获得网页中的标签var tobg1 = document.getElementById("tid1");var tobg2 = document.getElementById("tid2");//对标签的属性进行操作tobg2.value = tobg1.value;tobg1.value = "";tobg1.type = "button";tobg1.value = "按钮";}</script></head><body> <input type="text" value="" id="tid1"/><input type="text" value="" id="tid2"/><input type="button" value="操作" onclick="oper()"/></body>
</html>

运行

 

代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>function oper(){ var divobj1 = document.getElementById("box1");var divobj2 = document.getElementById("box2");alert(divobj1.innerText);只是获取到标签体中的文本内容alert(divobj1.innerHTML);可以获取标签体中的所有内容，包括子标签divobj2.innerHTML = divobj1.innerHTML;}</script></head><body> <div id="box1"><b>哈哈哈</b> </div><div id="box2"></div><input type="button" value="操作" onclick="oper()"/></body>
</html>

运行

代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>function oper(color1,color2){ var divobj1 = document.getElementById("box1");divobj1.style.width="100px";divobj1.style.height="100px";divobj1.style.backgroundColor=color1;var bodyobj = document.getElementById("bodyid");bodyobj.style.backgroundColor=color2; }</script></head><body id="bodyid"><div id="box1" ></div> <input type="button" value="蓝色" onclick="oper('skyblue','blue')"/><input type="button" value="绿色" onclick="oper('yellowgreen','green')"/><input type="button" value="粉色" onclick="oper('pink','red')"/></body>
</html>

运行

 

代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>function oper(color){ //getElementsByTagName("标签名字") 通过标签名获取所有匹配的标签，返回的时一个标签集合的对象var divobjs = document.getElementsByTagName("div");//通过class属性名获取所有匹配的标签，返回的时一个标签集合的对象var divobjs = document.getElementsByClassName("box");//通过name属性名获取所有匹配的标签，返回的时一个标签集合的对象var divobjs = document.getElementsByName("div1");for (var i = 0; i < divobjs.length; i++) {divobjs[i].style.width="100px";divobjs[i].style.height="100px";divobjs[i].style.backgroundColor=color;}}</script></head><body><div class="box" name="div1">A</div> <div class="box" name="div1">B</div> <div class="box">C</div> <input type="button" value="蓝色" onclick="oper('skyblue')"/><input type="button" value="绿色" onclick="oper('yellowgreen')"/><input type="button" value="粉色" onclick="oper('pink')"/><div>aaa</div></body>
</html>

运行

var divobjs = document.getElementsByTagName("div");


var divobjs = document.getElementsByClassName("box");


var divobjs = document.getElementsByName("div1");

计时

通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执 行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

setTimeout(“函数”,”时间”)未来的某时执行代码

clearTimeout()取消setTimeout()

代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><scriptvar t;function start(){//定时器调用函数t = setTimeout("test()",3000);//延迟指定的时间后，调用指定的函数,只调用一次}function stop(){clearTimeout(t);清除定时器}function test(){alert("aaaa");}</script></head><body><input type="button" value="开始" onclick="start()"/><input type="button" value="关闭定时器" onclick="stop()"/></body>
</html>

运行

只显示弹窗一次 

setInterval(“函数”,”时间”)每隔指定时间重复调用

clearInterval()取消setInterval()

代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><scriptvar t;function start(){//定时器调用函数t = setInterval("test()",2000);//延迟指定的时间后，调用指定发函数，每隔指定时间调用一次}function stop(){clearInterval(t);}function test(){alert("aaaa");}</script></head><body><input type="button" value="开始" onclick="start()"/><input type="button" value="关闭定时器" onclick="stop()"/></body>
</html>

运行

 

点关闭定时器即可停止弹窗提示 

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

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

相关文章

Elasticsearch实战教程： 如何在海量级数据中进行快速搜索

Elasticsearch实战教程： 如何在海量级数据中进行快速搜索

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 引入 Elasticsearch&#xff08;简称ES&#xff09;是一个基于Apache Lucene™的开源搜索引擎&#xff0c;无论在开源还是专有领…
阅读更多...
【SPIE独立出版】第四届智能交通系统与智慧城市国际学术会议（ITSSC 2024）

【SPIE独立出版】第四届智能交通系统与智慧城市国际学术会议（ITSSC 2024）

第四届智能交通系统与智慧城市国际学术会议&#xff08;ITSSC 2024&#xff09;将于2024年8月23-25日在中国西安举行。本次会议主要围绕智能交通、交通新能源、无人驾驶、智慧城市、智能家居、智能生活等研究领域展开讨论&#xff0c; 旨在为该研究领域的专家学者们提供一个分享…
阅读更多...
SWOT视角洞察：一篇文章详解AI Agent发展

SWOT视角洞察：一篇文章详解AI Agent发展

AI Agent自盖茨远见后火爆&#xff0c;吴恩达提出设计模式成创业圣经。其优势显著&#xff1a;技术门槛低&#xff0c;市场需求广&#xff0c;非技术人员可参与开发。然而&#xff0c;挑战亦不容忽视&#xff1a;技术成熟度需提升&#xff0c;数据安全和隐私保护待加强&#xf…
阅读更多...
Linux shell编程学习笔记61： pstree 命令——显示进程树

Linux shell编程学习笔记61： pstree 命令——显示进程树

0 前言 在 Linux shell编程学习笔记59&#xff1a; ps 获取系统进程信息&#xff0c;类似于Windows系统中的tasklist 命令https://blog.csdn.net/Purpleendurer/article/details/139696466?spm1001.2014.3001.5501 中我们研究了ps命令。在Linux中&#xff0c;通过ps命令&am…
阅读更多...
【Hec-Ras】第一期：软件安装

【Hec-Ras】第一期：软件安装

Hec-Ras软件安装 1 HEC-RAS软件介绍2 HEC-RAS软件下载3 HEC-RAS软件安装4 HEC-RAS软件界面介绍参考 1 HEC-RAS软件介绍 HEC-RAS 是美国陆军工程兵团工程水文中心&#xff08; Hydrologic Engineering Centers, HEC&#xff09;开发的河道水力计算程序&#xff08;River Analys…
阅读更多...
go sync包（五） WaitGroup

go sync包（五） WaitGroup

WaitGroup sync.WaitGroup 可以等待一组 Goroutine 的返回&#xff0c;一个比较常见的使用场景是批量发出 RPC 或者 HTTP 请求&#xff1a; requests : []*Request{...} wg : &sync.WaitGroup{} wg.Add(len(requests))for _, request : range requests {go func(r *Reque…
阅读更多...
WebSocket解决方案(springboot 基于Redis发布订阅)

WebSocket解决方案(springboot 基于Redis发布订阅)

WebSocket 因为一般的请求都是HTTP请求&#xff08;单向通信&#xff09;&#xff0c;HTTP是一个短连接&#xff08;非持久化&#xff09;&#xff0c;且通信只能由客户端发起&#xff0c;HTTP协议做不到服务器主动向客户端推送消息。WebSocket确能很好的解决这个问题&…
阅读更多...
基于SpringBoot的漫画网站系统

基于SpringBoot的漫画网站系统

你好呀&#xff0c;我是计算机学姐码农小野&#xff01;如果有相关需求&#xff0c;可以私信联系我。 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;B/S架构模式、Java技术 工具&#xff1a;Visual Studio、MySQL数据库开发工具 系统展示 首页 用户…
阅读更多...
零基础学习MySQL---MySQL入门

零基础学习MySQL---MySQL入门

顾得泉&#xff1a;个人主页 个人专栏&#xff1a;《Linux操作系统》 《C从入门到精通》 《LeedCode刷题》 键盘敲烂&#xff0c;年薪百万&#xff01; 一、什么是数据库 问&#xff1a;存储数据用文件就可以了&#xff0c;为什么还要弄个数据库呢&#xff1f; 这就不得不提…
阅读更多...
如何在《语文新读写》期刊上发表论文？

如何在《语文新读写》期刊上发表论文？

如何在《语文新读写》期刊上发表论文&#xff1f; 《语文新读写》知网 省级G4 3版面4800字符数 24年10-11月 可版权页查稿 出刊晚5个月 《语文新读写》栏目&#xff1a;视点_本期特稿、视点_百家争鸣、探索_教材新探、探索_阅读风向、探索_写作杂谈、实践_教法学法、实践_教…
阅读更多...
【python】OpenCV—Feature Detection and Matching

【python】OpenCV—Feature Detection and Matching

参考学习来自OpenCV基础&#xff08;23&#xff09;特征检测与匹配 文章目录 1 背景介绍2 Harris角点检测3 Shi-Tomasi角点检测4 Fast 角点检测5 BRIEF 特征描述子6 ORB(Oriented Fast and Rotated Brief) 特征描述子7 SIFT(Scale Invariant Feature Transform) 特征描述子8 SU…
阅读更多...
Milvus ConnectionRefusedError: how to connect locally

Milvus ConnectionRefusedError: how to connect locally

题意&#xff1a;怎样在本地连接到 Milvus 数据库。连接 Milvus 数据库被拒绝的错误 问题背景&#xff1a; I am trying to run a RAG pipeline using haystack & Milvus. 我正在尝试使用 haystack 和 Milvus 运行一个 RAG&#xff08;检索增强型生成&#xff09;管道。 …
阅读更多...
vue+element-ui简洁完美实现个人博客“​响石潭 ​”

vue+element-ui简洁完美实现个人博客“​响石潭 ​”

目录 一、项目介绍 二、项目截图 1.项目结构图 2.首页 3.生活 ​编辑 4.文章详情 ​编辑 5.关于我 ​编辑 ​编辑 三、源码实现 1.项目依赖package.json 2.项目启动 3.首页源码 四、总结 一、项目介绍 本项目在线预览&#xff1a;点击访问 参考官网&#xff1…
阅读更多...
腾讯 TRANSAGENTS: 多智能体翻译框架上线

腾讯 TRANSAGENTS: 多智能体翻译框架上线

之前介绍的由腾讯 AI 实验室搞得TRANSAGENTS&#xff08;多 Agent 系统&#xff0c;模拟现实翻译出版流程&#xff09;终于上线演示了&#xff01;提供了基于 GPT-4o 的免费试用, 暂时还是期货开源。
阅读更多...
R语言fastshap包进行支持向量机shap可视化分析

R语言fastshap包进行支持向量机shap可视化分析

1995年VAPINK 等人在统计学习理论的基础上提出了一种模式识别的新方法—支持向量机 。它根据有限的样本信息在模型的复杂性和学习能力之间寻求一种最佳折衷。 以期获得最好的泛化能力.支持向量机的理论基础决定了它最终求得的是全局最优值而不是局部极小值,从而也保证了它对未知…
阅读更多...
[数据集][目标检测]围栏破损检测数据集VOC+YOLO格式1196张1类别

[数据集][目标检测]围栏破损检测数据集VOC+YOLO格式1196张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;1196 标注数量(xml文件个数)&#xff1a;1196 标注数量(txt文件个数)&#xff1a;1196 标注…
阅读更多...
40V转5V,40V转3.3V,40V转3V使用什么降压芯片型号?

40V转5V,40V转3.3V,40V转3V使用什么降压芯片型号?

40V转5V,40V转3.3V,40V转3V使用什么降压芯片型号? # 40V转5V、3.3V、3V降压芯片&#xff1a;AH8820A的介绍与应用 在电子电路设计中&#xff0c;电压转换是一个常见的需求。特别是在需要将较高电压转换为较低电压以供微控制器、传感器和其他低电压设备使用时&#xff0c;降压…
阅读更多...
力扣1685.有序数组中差绝对值之和

力扣1685.有序数组中差绝对值之和

力扣1685.有序数组中差绝对值之和 记录左边之和 和 右边之和从左到右遍历每个元素 求res class Solution {public:vector<int> getSumAbsoluteDifferences(vector<int>& nums) {int n nums.size(),lsum 0,rsum accumulate(nums.begin(),nums.end(),0);ve…
阅读更多...
匿名方法与Lambda表达式

匿名方法与Lambda表达式

知识集锦 一、lambda表达式介绍 无参数 () >{return "1";}; 等同于 string getnum(){ return "1"; } 有两个参数 (p1, p2) >{ return p1*p2;}; 等同于 int mul(p1, p2) { return p1*p2;}; lambda表达式可以捕获外部变量&#xff0c;并在其主体中使用…
阅读更多...
怎么在电脑上录屏？跟着教程一步步操作

怎么在电脑上录屏？跟着教程一步步操作

随着数字化时代的到来&#xff0c;电脑录屏已经成为一项必备技能。无论是录制游戏画面、制作教程视频&#xff0c;还是保存线上会议记录&#xff0c;录屏都能帮上大忙。可是怎么在电脑上录屏呢&#xff1f;本文将介绍两种在电脑上进行录屏的方法&#xff0c;这两种方法各有特点…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023