js（笔记分享）

最新推荐文章于 2024-07-20 10:36:53 发布

小郝同学（恩师白云）

最新推荐文章于 2024-07-20 10:36:53 发布

阅读量1.6k

点赞数 56

文章标签： javascript 笔记开发语言

本文链接：https://blog.csdn.net/m0_68844946/article/details/139637632

版权

一、基本语法

HTML 中的JavaScript脚本必须位于标签之间。

alert("我的第一个 JavaScript");//脚本语句

也可以使用外部脚本script src="myScript.js">script>

几种输出语句：

· 使用 window.alert() 弹出警告框。

· 使用 document.write() 方法将内容写到 HTML 文档中。

· 使用 console.log() 写入到浏览器的控制台（类似日志功能）

· 使用window.confirm();输出带有判断的弹出框

如果⽤户单击“确定”，该框返回 true。如果⽤户单击“取消”，该框返回 false。

· 使用 window.prompt("请输入姓名");输出提示框

如果⽤户单击“确定”，该框返回输⼊值。如果⽤户单击“取消”，该框返回 NULL。

测试片段

测试输入带有默认值的

window.prompt("请输入姓名"，”张三”);

测试确定/取消

<input type="button" value="测试" οnclick="fun()" /> <script> function fun(){ var content; if(confirm("确定 & 取消")){ content_true ="您选择了确定"; document.write(content_true); }else{ content_false ="您选择了取消"; document.write(content_false); } } </script>

测试输入框的返回值

<button οnclick="fun()">选择</button> <script>function fun() { var name = prompt("支持哪个国家","巴勒斯坦"); if (name == null||name =="以色列") { var content_null ="放弃选择" alert("content_null"); }else{ alert(name + "感谢你" ); } }

常见的运算符号

选择器

修改元素内容

<html> <head> <script> function upd(){ // 获取元素对象 var a = document.getElementById("a"); var ipt = document.getElementById("ipt"); a.innerHTML = "京东"; ipt.value = "hello world"; } </script> </head> <body> <a href="" id="a">百度一下</a> <input type="text" id="ipt"><br> <button οnclick="upd()">修改内容</button> </body> </html>

先获取后赋值

修改元素样式

元素对象.style.样式 = “样式值”

<html> <head> <script> function upd(){ // 获取元素对象 var a = document.getElementById("a"); a.style.color = "green"; a.style.backgroundColor = "red"; } </script> </head> <body> <a href="" id="a">百度一下</a> <button οnclick="upd()">修改内容</button> </body> </html>

添加元素属性

元素对象. setAttribute(“属性名”,”属性值”)	添加元素属性
元素对象. removeAttribute (“属性名”)	移除元素属性
元素对象. getAttribute(“属性名”)	获取元素属性
inp.classList.add("123");	追加一个class属性
classList.remove("inp2")	移除一个class属性

<html> <head> <script> function upd(){ // 获取元素对象 var a = document.getElementById("a"); //添加属性 a.setAttribute("href","http://www.baidu.com"); //移除属性 a.removeAttribute("id"); } </script> </head> <body> <a href="" id="a">百度一下</a> <button οnclick="upd()">修改内容</button> </body> </html>

添加/删除元素

parentNode	获取父节点
childNodes	获取子节点
document. createElement	创建标签节点
document. createTextNode	创建文本节点
appendChild	添加节点
parent.removeChild(child);	删除节点
parent.replaceChild(para, child);	替换节点

<html> <div id="div1"> <p id="p1">这是一个段落。</p> <p id="p2">这是另外一个段落。</p> </div> <script> var para = document.createElement("p");//创建标签 var node = document.createTextNode("这是一个新的段落。"); //创建内容 para.appendChild(node); //将文本添加到标签中 var element = document.getElementById("div1");//获取元素 element.appendChild(para); //添加到元素后面 </script>

移除 <div id="div1"> <p id="p1">这是一个段落。</p> <p id="p2">这是另外一个段落。</p> </div> <script> var parent = document.getElementById("div1"); var child = document.getElementById("p1"); parent.removeChild(child); </script>

替换 <div id="div1"> <p id="p1">这是一个段落。</p> <p id="p2">这是另外一个段落。</p> </div> <script> var para = document.createElement("p"); var node = document.createTextNode("这是一个新的段落。"); para.appendChild(node); var parent = document.getElementById("div1"); var child = document.getElementById("p1"); parent.replaceChild(para, child); </script>

事件

常见的 HTML 事件

下面是一些常见的 HTML 事件：

事件	描述
onchange	HTML 元素已被改变
onclick	用户点击了 HTML 元素
onmouseover	用户把鼠标移动到 HTML 元素上
onmouseout	用户把鼠标移开 HTML 元素
onkeydown	用户按下键盘按键
onload	浏览器已经完成页面加载

常用工具类

定时器

setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
setTimeout() ：在指定的毫秒数后调用函数或计算表达式。
clearTimeout():清除定时器。

setInterval()

语法

setInterval(code,millisec,lang)

参数	描述
code	必需。要调用的函数或要执行的代码串。
millisec	必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。
lang	可选。 JScript \| VBScript \| JavaScript

以下实例在每 1000 毫秒执行 clock() 函数。实例中也包含了停止执行的按钮:

<html> <body> <input type="text" id="clock" /> <script type="text/javascript"> var int=self.setInterval("clock()",1000); function clock() { var d=new Date(); var t=d.toLocaleTimeString(); document.getElementById("clock").value=t; } </script> <button οnclick="int=window.clearInterval(int)">停止</button> </body> </html>

setTimeout()

语法

setTimeout(code,millisec,lang)

参数	描述
code	必需。要调用的函数后要执行的 JavaScript 代码串。
millisec	必需。在执行代码前需等待的毫秒数。
lang	可选。脚本语言可以是：JScript \| VBScript \| JavaScript

实例演示如下：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <p>点击按钮，在等待 3 秒后弹出 "Hello"。</p> <button οnclick="myFunction()">点我</button> <script> function myFunction() { setTimeout(function(){alert("Hello")},3000); } </script> </body> </html>

date

Date 对象属性

属性	描述
constructor	返回创建 Date 对象原型的函数。
prototype	允许您向对象添加属性和方法。

Date 对象方法

方法	描述
getDate()	返回月中的第几天（从 1 到 31）。
getDay()	返回星期几（0-6）。
getFullYear()	返回年份。
getHours()	返回小时（从 0-23）。
getMilliseconds()	返回毫秒（0-999）。
getMinutes()	返回分钟（从 0-59）。
getMonth()	返回月份（从 0-11）。
getSeconds()	返回秒数（从 0-59）。
getTime()	返回自 1970 年 1 月 1 日午夜以来与指定日期的毫秒数。
getTimezoneOffset()	返回 UTC 时间与本地时间之间的时差，以分钟为单位。
getUTCDate()	根据世界时，返回月份中的第几天（从 1 到 31）。
getUTCDay()	根据世界时，返回星期几（0-6）。
getUTCFullYear()	根据世界时，返回年份。
getUTCHours()	根据世界时，返回小时（0-23）。
getUTCMilliseconds()	根据世界时，返回毫秒数（0-999）。
getUTCMinutes()	根据世界时，返回分钟（0-59）。
getUTCMonth()	根据世界时，返回月份（0-11）。
getUTCSeconds()	根据世界时，返回秒数（0-59）。
getYear()	已弃用。请改用 getFullYear() 方法。
now()	返回自 1970 年 1 月 1 日午夜以来的毫秒数。
parse()	解析日期字符串并返回自 1970 年 1 月 1 日以来的毫秒数。
setDate()	设置 Date 对象中月的某一天。
setFullYear()	设置日期对象的年份
setHours()	设置日期对象的小时。
setMilliseconds()	设置日期对象的毫秒数。
setMinutes()	设置日期对象的分钟数。
setMonth()	设置日期对象的月份。
setSeconds()	设置日期对象的秒数。
setTime()	将日期设置为 1970 年 1 月 1 日之后/之前的指定毫秒数。
setUTCDate()	根据世界时，设置 Date 对象中月份的一天。
setUTCFullYear()	根据世界时，设置日期对象的年份。
setUTCHours()	根据世界时，设置日期对象的小时。
setUTCMilliseconds()	根据世界时，设置日期对象的毫秒数。
setUTCMinutes()	根据世界时，设置日期对象的分钟数。
setUTCMonth()	根据世界时，设置日期对象的月份。
setUTCSeconds()	根据世界时，设置日期对象的秒数。
setYear()	已弃用。请改用 setFullYear() 方法。
toDateString()	将 Date 对象的日期部分转换为可读字符串。
toGMTString()	已弃用。请改用 toUTCString() 方法。
toISOString()	使用 ISO 标准将日期作为字符串返回。
toJSON()	以字符串形式返回日期，格式为 JSON 日期。
toLocaleDateString()	使用区域设置约定将 Date 对象的日期部分作为字符串返回。
toLocaleTimeString()	使用区域设置约定将 Date 对象的时间部分作为字符串返回。
toLocaleString()	使用区域设置约定将 Date 对象转换为字符串。
toString()	将 Date 对象转换为字符串。
toTimeString()	将 Date 对象的时间部分转换为字符串。
toUTCString()	根据世界时，将 Date 对象转换为字符串。
UTC()	根据 UTC 时间，返回自 1970 年 1 月 1 日午夜以来的日期中的毫秒数。
valueOf()	返回 Date 对象的原始值。

常用string对象

JavaScript 字符串

JavaScript 字符串存储一系列字符，例如 "Bill Gates"。

字符串可以是双引号或单引号内的任何文本：

let carName1 = "Volvo XC60"; let carName2 = 'Volvo XC60';

字符串属性和方法

通常，像 "Bill Gates" 这样的字符串不能有方法或属性，因为它们不是对象。

但是对于 JavaScript，方法和属性也可用于字符串，因为 JavaScript 在执行方法和属性时将字符串视为对象。

JavaScript 字符串方法和属性

方法	描述
charAt()	返回指定位置处的字符。
charCodeAt()	返回指定位置处字符编码。
codePointAt()	返回字符串中索引（位置）处的 Unicode 值。
concat()	返回两个或多个连接的字符串。
constructor	返回字符串的构造函数。
endsWith()	返回字符串是否以指定值结尾。
fromCharCode()	将 Unicode 值作为字符返回。
includes()	返回字符串是否包含指定值。
indexOf()	返回值在字符串中第一次出现的位置。
lastIndexOf()	返回值在字符串中最后一次出现的位置。
length	返回字符串中的字符数。
localeCompare()	使用基于本地的顺序来比较字符串。
match()	在字符串中搜索值或正则表达式，并返回匹配项。
prototype	允许您向对象添加属性和方法。
repeat()	返回拥有多个字符串副本的新字符串。
replace()	在字符串中搜索值或正则表达式，并返回替换值的字符串。
search()	检索字符串中与正则表达式匹配的子串。
slice()	提取字符串的一部分并返回新字符串。
split()	将字符串拆分为子字符串数组。
startsWith()	检查字符串是否以指定字符开头。
substr()	从字符串中抽取子串，该方法是 substring() 的变种。
substring()	从字符串中抽取子串。
toLocaleLowerCase()	使用主机的语言环境返回转换为小写字母的字符串。
toLocaleUpperCase()	使用主机的语言环境返回转换为大写字母的字符串。
toLowerCase()	返回转换为小写字母的字符串。
toString()	将字符串或字符串对象作为字符串返回。
toUpperCase()	返回转换为大写字母的字符串。
trim()	返回删除了空格的字符串。
trimEnd()	返回从末尾删除空格的字符串。
trimStart()	返回从开头删除空格的字符串。
valueOf()	返回字符串或字符串对象的原始值。

提示：所有字符串方法都返回新值。它们不会改变原始变量。

字符串 HTML Wrapper 方法

HTML 包装器方法返回包装在 HTML 标记内的字符串。

这些不是标准的方法，可能无法按预期工作。

方法	描述
anchor()	将字符串显示为锚点。
big()	使用大字体显示字符串。
blink()	显示闪烁的字符串。
bold()	以粗体显示字符串。
fixed()	使用固定间距字体显示字符串。
fontcolor()	使用指定颜色显示字符串。
fontsize()	使用指定大小显示字符串。
italics()	以斜体显示字符串。
link()	将字符串显示为超链接。
small()	使用小字体显示字符串。
strike()	显示带有删除线的字符串。
sub()	将字符串显示为下标文本。
sup()	将字符串显示为上标文本。

String 对象描述

字符串是 JavaScript 的一种基本的数据类型。String 类提供了操作原始字符串值的方法。

String 对象的 length 属性声明了该字符串中的字符数。

String 类定义了大量操作字符串的方法，例如从字符串中提取字符或子串，或者检索字符或子串。

注意：JavaScript 的字符串是不可变的（immutable），String 类定义的方法都不能改变字符串的内容。像 String.toUpperCase() 这样的方法，返回的是全新的字符串，而不是修改原始字符串。

在较早的 Netscape 代码基的 JavaScript 实现中（例如 Firefox 实现中），字符串的行为就像只读的字符数组。例如，从字符串 s 中提取第三个字符，可以用 s[2] 代替更加标准的 s.charAt(2)。此外，对字符串应用 for/in 循环时，它将枚举字符串中每个字符的数组下标（但要注意，ECMAScript 标准规定，不能枚举 length 属性）。因为字符串的数组行为不标准，所以应该避免使用它。

Array对象

Array 对象用于在单个变量中存储多个值：

const cars = ["Tesla", "Volvo", "BMW"];

Array 属性

属性	描述
constructor	返回创建 Array 对象原型的函数。
length	设置或返回数组中元素的数量。
prototype	允许您向数组添加属性和方法。

Array 方法

方法	描述
concat()	连接两个或多个数组，并返回已连接数组的副本。
copyWithin()	将数组中的数组元素复制到指定位置或从指定位置复制。
entries()	返回键/值对数组迭代对象。
every()	检查数组中的每个元素是否通过测试。
fill()	用静态值填充数组中的元素。
filter()	使用数组中通过测试的每个元素创建新数组。
find()	返回数组中第一个通过测试的元素的值。
findIndex()	返回数组中通过测试的第一个元素的索引。
forEach()	为每个数组元素调用函数。
from()	从对象创建数组。
includes()	检查数组是否包含指定的元素。
indexOf()	在数组中搜索元素并返回其位置。
isArray()	检查对象是否为数组。
join()	将数组的所有元素连接成一个字符串。
keys()	返回 Array Iteration 对象，包含原始数组的键.
lastIndexOf()	在数组中搜索元素，从末尾开始，并返回其位置。
map()	使用为每个数组元素调用函数的结果创建新数组。
pop()	删除数组的最后一个元素，并返回该元素。
push()	将新元素添加到数组的末尾，并返回新的长度。
reduce()	将数组的值减为单个值（从左到右）。
reduceRight()	将数组的值减为单个值（从右到左）。
reverse()	反转数组中元素的顺序。
shift()	删除数组的第一个元素，并返回该元素。
slice()	选择数组的一部分，并返回新数组。
some()	检查数组中的任何元素是否通过测试。
sort()	对数组的元素进行排序。
splice()	从数组中添加/删除元素。
toString()	将数组转换为字符串，并返回结果。
unshift()	将新元素添加到数组的开头，并返回新的长度。
valueOf()	返回数组的原始值。

Math 对象

Math 对象允许您执行数学任务。

Math 不是构造函数。Math 的所有属性/方法都可以通过使用 Math 作为对象来调用，而无需创建它：

var x = Math.PI; // 返回 PI var y = Math.sqrt(16); // 返回 16 的平方根

Math 对象属性

属性	描述
E	返回欧拉数（约 2.718）。
LN2	返回 2 的自然对数（约 0.693）。
LN10	返回 10 的自然对数（约 2.302）。
LOG2E	返回 E 的以 2 为底的对数（约 1.442）。
LOG10E	返回 E 的以 10 为底的对数（约 0.434）。
PI	返回 PI（约 3.14）。
SQRT1_2	返回 1/2 的平方根（约 0.707）。
SQRT2	返回 2 的平方根（约 1.414）。

Math 对象方法

方法	描述
abs(x)	返回 x 的绝对值。
acos(x)	返回 x 的反余弦值，以弧度为单位。
acosh(x)	返回 x 的双曲反余弦值。
asin(x)	返回 x 的反正弦值，以弧度为单位。
asinh(x)	返回 x 的双曲反正弦值。
atan(x)	返回 x 的反正切值，返回的值是 -PI/2 到 PI/2 之间的弧度值。
atan2(y, x)	返回其参数商的反正切值。
atanh(x)	返回 x 的双曲反正切值。
cbrt(x)	返回 x 的三次方根。
ceil(x)	返回 x，向上舍入为最接近的整数。
clz32(x)	返回 x 的 32 位二进制表示中前导零的数量。
cos(x)	返回 x 的余弦值（x 以弧度为单位）。
cosh(x)	返回 x 的双曲余弦值。
exp(x)	返回 Ex 的值。
expm1(x)	返回 Ex 减去 1 的值。
floor(x)	返回 x，向下舍入为最接近的整数。
fround(x)	返回数的最接近的（32 位单精度）浮点表示。
log(x)	返回 x 的自然对数。
log10(x)	返回 x 的以 10 为底的对数。
log1p(x)	返回 1 + x 的自然对数。
log2(x)	返回 x 的以 2 为底的对数。
max(x, y, z, ..., n)	返回值最高的数字。
min(x, y, z, ..., n)	返回值最小的数字。
pow(x, y)	返回 x 的 y 次幂值。
random()	返回 0 到 1 之间的随机数。
round(x)	将 x 舍入为最接近的整数。
sign(x)	返回数的符号（检查它是正数、负数还是零）。
sin(x)	返回 x 的正弦值（x 以弧度为单位）。
sinh(x)	返回 x 的双曲正弦值。
sqrt(x)	返回 x 的平方根。
tan(x)	返回角度的正切值。
tanh(x)	返回数的双曲正切值。
trunc(x)	返回数字 (x) 的整数部分。

Number对象

数字可以写成带小数，也可以不带小数：

例子 1

let x = 3.14; // 带小数的数字 let y = 34; // 不带小数的数字

超大或超小数可以用科学（指数）记数法书写：

例子 2

let x = 123e5; // 12300000 let y = 123e-5; // 0.00123

JavaScript Number 方法和属性

名称	描述
constructor	返回对创建此对象的 Number 函数的引用。
EPSILON	返回对创建此对象的 Number 函数的引用。
isFinite()	检查值是否是有限数。
isInteger()	检查值是否为整数。
isNaN()	检查值是否为 Number.NaN。
isSafeInteger()	检查值是否为安全整数。
MAX_SAFE_INTEGER	返回对创建此对象的 Number 函数的引用。
MIN_SAFE_INTEGER	返回对创建此对象的 Number 函数的引用。
MAX_VALUE	可表示的最大的数。
MIN_VALUE	可表示的最小的数。
NaN	非数字值。
NEGATIVE_INFINITY	负无穷大，溢出时返回该值。
POSITIVE_INFINITY	正无穷大，溢出时返回该值。
parseFloat()	检查值是否为整数。
parseInt()	检查值是否为整数。
prototype	允许您向对象添加属性和方法。
toExponential(x)	将数字转换为指数计数法。
toFixed(x)	把数字转换为字符串，结果的小数点后有指定位数的数字。
toLocaleString()	把数字转换为字符串，使用本地数字格式顺序。
toPrecision(x)	把数字格式化为指定的长度。
toString()	把数字转换为字符串。
valueOf()	返回数字的原始值（基本数字值）。

Number 对象描述

比如这样使用属性 MAX_VALUE 是正确的：

var big = Number.MAX_VALUE

但是这样是错误的：

var n= new Number(2); var big = n.MAX_VALUE

作为比较，我们看一下 toString() 和 Number 对象的其他方法，它们是每个 Number 对象的方法，而不是 Number() 构造函数的方法。前面提到过，在必要时，JavaScript 会自动地把原始数值转化成 Number 对象，调用 Number 方法的既可以是 Number 对象，也可以是原始数字值。

var n = 123; var binary_value = n.toString(2);

正则表达式

如何创建正则表达式