当前位置： 首页 > news >正文

JavaScript学习小结

news 2026/4/3 23:59:01
变量声明：使用var关键字，变量没有类型，但值有类型（弱类型语言）
数据类型：

①number

②string（单引号，双引号都可以表示字符串）

③boolean

④Object类型

⑤undefined类型（声明但未赋值的变量）

比较运算符中与JAVA中不同的：
==：等于，只比较值，有隐式转换

===：全等，比较值和数据类型

函数：①自定义函数 ②全局函数

语法：

			function functionName([arguments]) {alert("自定义函数");}

全局（内置）函数：

parseInt(arg);参数arg转换为整数

parseFloat(arg);参数转换为Float类型数

eval("xxxxx");执行字符串内容，可以当作js脚本运行

typeof();返回当前数值类型 

alert("xxx");弹窗内容

console.log(a);控制台输出a

事件（HTML中的常用事件，调用js函数）

onclic:单击事件

ondblclick：双击事件

onblur：失焦事件

onfocus：聚焦事件

onmouseover：移入事件

onmouseout：移开事件

onload：网页所有内容加载完自动执行（一般放在body）

onchange：内容发生改变且光标失焦之后

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script>function main() {console.log("自定义函数")}</script></head><!-- 加载完页面加载 --><body onload="main()"><!-- 单击事件 --><button type="submit" onclick="main()">提交</button><hr><!-- 双击事件 --><button type="submit" ondblclick="main()">提交</button><hr><!-- 失焦事件 --><textarea cols="5" rows="10" onblur="main()"></textarea><hr><!-- 聚焦事件 --><textarea cols="5" rows="10" onfocus="main()"></textarea><hr><!-- 移入事件 --><textarea cols="5" rows="10" onmouseover="main()"></textarea><hr><!-- 移出事件 --><textarea cols="5" rows="10" onmouseout="main()"></textarea><hr><!-- 更改保存事件 --><textarea cols="5" rows="10" onchange="main()"></textarea></body>
</html>
内置对象 

string字符串：

s.length

s.substring(开始位置，结束位置+1)；

s.substr(开始位置，截取长度);

s.split(";");分隔符

Array数组：

string s=Array.join("");//连接数组，转化为字符串

array.reverse();//反转数组

array.sort();//给数组排序，需要传入自定义排序函数

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>var s = "a b c d e f g h i j k l m n";console.log(s.length);console.log(s.split(' '));console.log(s.substr(0, 3));console.log(s.substring(1, 3));var array = [1, 2, 3, 9, 0];console.log(array);console.log(array.join(''));array.reverse();console.log(array);array.sort(array_sort);console.log(array);function array_sort(a, b) {return a - b;}var date = new Date();console.log(date.getFullYear());console.log(date.getMonth());console.log(date.getDate());console.log(date.getHours());console.log(date.getTime());console.log(Math.PI);console.log(Math.sqrt(9));console.log(Math.floor(10.9));console.log(Math.ceil(9.1));</script></head><body></body>
</html>

 

DOM（document object model）

 使用步骤：

1，触发js

2，js获得网页标签（在js中，每一个网页标签就是一个对象）

通过document对象()

document：文档对象

document.getElementById("div_id"):通过id找到HTML标签。

可以精确获得网页中的某个标签。

js中所获得的网页中的标签对象称为DOM。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>function oper() {var text1 = document.getElementById("text1");// 获得text1标签对象var text2 = document.getElementById("text2");// 获得text2标签对象console.log(text1.value)// 输出text1中的内容text2.value = text1.value; //将text2框中内容变成text1内容text1.value = ''; //置空text1}function change(color) {var x = document.getElementById("div1");// 获得div1对象x.style.height = "100px";x.style.width = "100px"; //使用"100px"而不是"100 px"x.style.backgroundColor = color; // 一旦触发当前函数，div1对象更改宽高颜色}</script></head><body><input type="text" value="" id="text1"><input type="text" value="" id="text2"><button onclick="oper()">上传</button><div id="div1">div</div><button id="red" onclick="change('red')">红色</button><button id="yellow" onclick="change('yellow')">黄色</button><button id="pink" onclick="change('pink')">粉色</button></body>
</html>

 

js操作标签体内容：

obj.innerHTML

obj.innerText

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><div id="div_id">我的标签</div><script>var c = document.getElementById("div_id");alert(c.innerHTML);</script></body>
</html>

 

 

相关文章：

JavaScript学习小结

变量声明&#xff1a;使用var关键字&#xff0c;变量没有类型&#xff0c;但值有类型&#xff08;弱类型语言&#xff09; 数据类型&#xff1a; ①number ②string&#xff08;单引号&#xff0c;双引号都可以表示字符串&#xff09; ③boolean ④Object类型 ⑤undefine…...

编程日记 2023/9/25 20:27:29

MySQL学习笔记13

DISTINCT数据去重&#xff1a; 案例&#xff1a;获取tb_student学生表学员年龄的分布情况。 mysql> select * from tb_student; ------------------------------------------------- | id | name | age | gender | address | --------------------------…...

编程日记 2023/9/25 20:26:27

怎么获取外网ip地址

在网络连接中&#xff0c;每个设备都被分配一个唯一的IP地址&#xff0c;用于标识和定位该设备。其中&#xff0c;内部或局域网IP地址是在局域网内使用的&#xff0c;而外网IP地址则是与公共互联网通信时所使用的地址。 获取外网IP地址对于许多人来说可能是一个常见的需求&…...

编程日记 2023/9/25 20:22:24

算法 只出现一次的两个数字-(哈希+异或)

牛客网: BM52 题目: 数组中仅2个数字出现1次&#xff0c;其余出现2次 思路: 出现2次的数字异或结果为0&#xff0c;另外两个不同的数字异或结果res不为0&#xff0c;异或结果的二进制位必与其中一个相同&#xff0c;求出二进制位为1的pos, 遍历数组&#xff0c;所有此位置为1…...

编程日记 2023/9/25 20:21:23

外卖霸王餐小程序、H5、公众号版外卖系统源码

最新外卖霸王餐小程序、H5、微信公众号版外卖系统源码、霸王餐美团、饿了么系统&#xff0c;粉丝裂变玩源码下载&#xff0c;外卖cps小程序项目&#xff0c;外卖红包cps带好友返利佣金分销系统程序、饿了么美团联盟源码&#xff0c;外卖cps带分销返利后端源码&#xff0c;基于L…...

编程日记 2023/9/25 20:20:23

amlogic 机顶盒关闭DLNA 后，手机还能搜到盒子

S905L3 带有投屏的功能&#xff0c;并通过 com.droidlogic.mediacenter.dlna.MediaCenterService 服务的启动和停止来开启和关闭DLNA功能&#xff0c;但是在测试中发现机顶盒关闭DLNA后&#xff0c;手机还能搜索到盒子。我在复测中发现关闭后有时很难很久搜索到盒子&#xff0c…...

编程日记 2023/9/25 20:18:20

@Autowire、@Recourse用啥？

在使用IDEA写Spring相关的项目的时候&#xff0c;在字段上使用Autowired注解时&#xff0c;总是会有一个波浪线提示&#xff1a;Field injection is not recommended. 这是为啥呢&#xff1f;今天就来一探究竟。 众所周知&#xff0c;在Spring里面有三种可选的注入方式&#xf…...

编程日记 2023/9/25 20:17:18

[linux] 过滤警告⚠️

如果你在Python脚本中输出和执行脚本文件时想要过滤掉警告信息&#xff0c;可以尝试以下方法&#xff1a; 使用warnings模块&#xff1a;导入warnings模块并设置warnings.filterwarnings("ignore")&#xff0c;这将会忽略所有的警告信息。在需要过滤警告的部分之前添…...

编程日记 2023/9/25 20:15:15

Linux必备操作系统命令大全

一、基础命令 pwd 命令 pwd命令用于显示当前所在的工作目录的全路径名称。该命令无需任何参数&#xff0c;只需在终端窗口中输入 pwd 命令即可使用。 cd 命令 cd命令用于更改当前工作目录。该命令需要一个参数&#xff1a;目标目录名称。例如&#xff0c;若要进入 Document…...

编程日记 2023/9/25 20:14:14

【rtp】VideoTimingExtension 扩展的解析和写入

VideoTimingExtension 扩展有13个字节，并非都是字符串类型 class VideoTimingExtension {public:using value_type = VideoSendTiming;static constexpr RTPExtensionType kId = kRtpExtensionVideoTiming;static constexpr uint8_t kValueSizeBytes = 13...

编程日记 2023/9/25 20:13:14

网络安全CTF比赛有哪些事？——《CTF那些事儿》告诉你

目录 前言 一、内容简介 二、读者对象 三、专家推荐 四、全书目录 前言 CTF比赛是快速提升网络安全实战技能的重要途径&#xff0c;已成为各个行业选拔网络安全人才的通用方法。但是&#xff0c;本书作者在从事CTF培训的过程中&#xff0c;发现存在几个突出的问题&#xff1…...

编程日记 2023/9/25 20:11:11

Winform直接与Wpf交互

Winform项目中&#xff0c;可以直接使用wpf中的自定义控件和窗体 测试环境&#xff1a; vistual studio 2017 window 10 一 winform直接使用wpf的自定义控件 步骤如下&#xff1a; 1 新建winfrom项目&#xff0c;名为WinFormDemo&#xff0c;默认有一个名为Form1的窗体…...

编程日记 2023/9/25 20:10:10

Uni-app 调用微信地图导航功能【有图】

前言 我们在使用uni-app时&#xff0c;有时候会遇到需要开发地图和导航的功能&#xff0c;这些方法其实微信小程序的API已经帮我们封装好了 详见&#xff1a;微信小程序开发文档 接下来我们就演示如何用uni-app来使用他们 使用 <template><view><button type…...

编程日记 2023/9/25 20:07:07

Golang slice 通过growslice调用nextslicecap计算扩容

先来看一段代码 code: e : []int64{1, 2, 3}fmt.Println("cap of e before:", cap(e))e append(e, 4, 5, 6, 7)fmt.Println("cap of e after:", cap(e))output:cap of e before: 3 cap of e after: 8 为什么容量是8&#xff1f; append了的4个元素&…...

编程日记 2023/9/25 20:06:06

HTTP 协商缓存 Last-Modified,If-Modified-Since

浏览器第一次跟服务器请求一个资源&#xff0c;服务器在返回这个资源的同时&#xff0c;在respone header加上Last-Modified属性&#xff08;表示这个资源在服务器上的最后修改时间&#xff09;&#xff1a; ----------------------------------------------------------------…...

编程日记 2023/9/25 20:05:06

零基础教程：Yolov5模型改进-添加13种注意力机制

1.准备工作 先给出13种注意力机制的下载地址&#xff1a; https://github.com/z1069614715/objectdetection_script 2.加入注意力机制 1.以添加SimAM注意力机制为例&#xff08;不需要接收通道数的注意力机制&#xff09; 1.在models文件下新建py文件&#xff0c;取名叫Sim…...

编程日记 2023/9/25 20:04:04

vue截取地址参数

const getQueryValueFn () >{// 获取当前页面的URLconst currentURL window.location.href;//创建一个URL对象来解析当前URL。URL对象提供了方便的属性和方法来处理URL的各个部分const url new URL(currentURL);// 使用URLSearchParams获取查询参数const queryParams ne…...

编程日记 2023/9/25 20:03:03

ubuntu 14.04更新GCC版本

按最基本的apt-get install gcc-8&#xff0c;不成功&#xff0c;提示如下。 按网上说的&#xff1a;apt-get update ,apt-get upgrade 后都无效果。 apt-cache search get 搜索后&#xff0c;发现资源链接里最新的也只有4.8.4所以不行。 需要更新资源链接&#xff0c;镜像地…...

编程日记 2023/9/25 20:02:02

AndroidUtil - 强大易用的安卓工具类库

官网 https://github.com/Blankj/AndroidUtilCode/blob/master/README-CN.md 项目介绍 AndroidUtilCode &#x1f525; 是一个强大易用的安卓工具类库&#xff0c;它合理地封装了安卓开发中常用的函数&#xff0c;具有完善的 Demo 和单元测试&#xff0c;利用其封装好的 API…...

编程日记 2023/9/25 20:01:01

[多态设计模式]枚举

背景&#xff1a; 游戏服务器中&#xff0c;多态可以说体现的淋漓尽致。 如&#xff1a; 1.开启条件。有的系统是根据玩家等级&#xff0c;有的是根据通关第几关。 2.商店可能有不同类型的商店。 3.任务系统中&#xff0c;不同的计数类型&#xff0c;不同的任务目标类型。…...

编程日记 2023/9/25 20:00:00

MPC轨迹跟踪：基于运动学、动力学CarsimSimulink联仿

&#xff08;MPC&#xff09;轨迹跟踪&#xff0c;基于运动学、动力学carsim&simulink联仿方向打死油门踩到底&#xff0c;轮胎和地面摩擦的青烟还没散尽&#xff0c;手里的MPC控制器已经算好了未来三秒的轨迹——这大概就是模型预测控制在轨迹跟踪中最性感的瞬间。今天咱们…...

编程新知 2026/4/3 23:04:43

3分钟掌握绝地求生压枪黑科技：罗技鼠标宏终极指南

3分钟掌握绝地求生压枪黑科技&#xff1a;罗技鼠标宏终极指南 【免费下载链接】logitech-pubg PUBG no recoil script for Logitech gaming mouse / 绝地求生 罗技 鼠标宏 项目地址: https://gitcode.com/gh_mirrors/lo/logitech-pubg 还在为《绝地求生》中AKM的后坐力而…...

编程新知 2026/4/3 22:14:17

拆解中金2025财报：飞轮效应，如何驱动高质量增长？

2025年的中国资本市场&#xff0c;有三条主线在交汇&#xff1a;创新驱动、资本市场深化改革、个人养老金全面推开。它们分别指向一家投行必须具备的三种能力——资产端的挖掘、交易端的兑现、资金端的配置。 与此同时&#xff0c;证券行业正在经历一场无声的洗牌。牌照红利在…...

编程新知 2026/4/3 21:46:00

SClick技术解析：防休眠工具的工作原理探讨

SClick是一款轻量级的防休眠工具&#xff0c;能够帮助用户解决Windows系统自动休眠带来的诸多不便。 软件体积仅有几十KB&#xff0c;绿色便携&#xff0c;无需安装&#xff0c;即用即走。 它通过模拟鼠标点击的方式&#xff0c;让系统以为用户一直在操作电脑&#xff0c;从而防…...

编程新知 2026/4/3 20:33:29

BROADCHIP广芯 BCT0104EGD-TR QFN 转换器/电平移位器

特性 无需方向控制信号数据速率 24Mbps(推) 2Mbps(开漏) A端口1.65V至5.5V&#xff0c;B端口2.3V至5.5V(VCCA < VCCB) VCC隔离:若任一VCC接地&#xff0c;则两个端口均处于高阻抗状态 无需电源供应顺序&#xff0c;VCCA或VCCB可先斜坡上升 lOFF:支持部分断电模式操作 提供QF…...

编程新知 2026/4/3 18:36:19

DCT-Net效果实测：保留真人特征的同时，完美融入卡通美学

DCT-Net效果实测&#xff1a;保留真人特征的同时&#xff0c;完美融入卡通美学 1. 引言&#xff1a;当真实照片遇见卡通魔法 想象一下&#xff0c;你随手拍的一张普通自拍&#xff0c;在几秒钟内就能变成专业插画师级别的卡通头像。这不是科幻电影里的场景&#xff0c;而是DC…...

编程新知 2026/4/3 18:15:39

保姆级教学：用FUTURE POLICE和MySQL管理你的语音字幕数据

保姆级教学&#xff1a;用FUTURE POLICE和MySQL管理你的语音字幕数据 1. 为什么需要管理语音字幕数据&#xff1f; 想象一下这样的场景&#xff1a;你刚刚用FUTURE POLICE处理了100个会议录音&#xff0c;得到了精确到毫秒的字幕文件。这些文件散落在各个文件夹里&#xff0c…...

编程新知 2026/4/3 17:10:48

推进军民融合标准化建设，超导磁探测军民应用前景广阔

作为首都科技创新与产业融合核心&#xff0c;北京市正以标准化为抓手&#xff0c;推进军民融合深度发展&#xff0c;重点落实军民融合标准化试点任务&#xff0c;探索建设军民通用标准信息化平台&#xff0c;打通“军标—民标”转化堵点。依托首都科研、企业集聚优势&#xff0…...

编程新知 2026/4/3 17:06:45

市场推广需要哪些数据分析能力？渠道评估、归因和转化怎么分析

市场推广数据分析能力框架市场推广的核心在于数据驱动决策&#xff0c;掌握以下能力可显著提升推广效果。CDA数据分析师证书持证者通常在这些领域具备系统化知识。能力维度关键技能应用场景数据采集能力熟悉Google Analytics、Adobe Analytics等工具&#xff0c;掌握UTM参数设置…...

编程新知 2026/4/3 15:49:36

C++的std--ranges选择管理

C的std::ranges选择管理&#xff1a;现代算法的新范式 在C20标准中&#xff0c;std::ranges的引入彻底改变了传统算法的实现方式&#xff0c;为开发者提供了更简洁、更安全的范围操作工具。通过范围库&#xff0c;开发者可以摆脱繁琐的迭代器对&#xff0c;直接操作数据序列&a…...

编程新知 2026/4/3 15:37:31