JavaScript参考手册_javascript手册-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_56921622/article/details/125068299

JS基础理论

简介

JavaScript是一种脚本语言，可以在浏览器中直接运行，是一种在浏览器端实现网页与客户交互的技术。JavaScript 是一种轻量级的编程语言。

JavaScript代码可以直接嵌套在HTML网页中 <script>与</script> 之间。

一些老的实例可能会在 <script> 标签中使用 type="text/javascript"。在 HTML5 中，不必那样做了。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言。

注释

注释不能嵌套

<script>
	// 单行注释
	/*
	    多行注释
	    多行注释
	    多行注释
	*/
</script>

位置

脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。

通常的做法是把函数放入 <head> 部分中，或者放在 页面底部。最好是把它们安置到同一处位置，这样不会干扰页面的内容，显得比较直观，又能在出现问题时快速定位。

放在 <script> 标签中的脚本与外部引用的脚本运行效果完全一致。外部脚本不能包含 <script> 标签。

数据类型

值类型（基本类型）：字符串(String)、数字(Number)、布尔(Boolean)、空(Null)、未定义(undefined)、Symbol(Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值)。

引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则(RegExp)和日期(Date)。

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型。

<script>
	var str;           // str 为 undefined
	str = 6;           // 现在 str 为数字
	str = "test";      // 现在 str 为字符串
	// JavaScript 数字
	var a1 = 66.00;      // 使用小数点来写
	var a2 = 66;         // 不使用小数点来写
	// JavaScript 布尔
	var x = true;
    var y = false;
    // JavaScript 数组
    var b1 = new Array();
	b1[0] = "11";
	b1[1] = "22";
	b1[2] = "33";
	var b2 = new Array("11","22","33");
	var b3 = ["11","22","33"];
	var array2 = new Array(10);     //array2是长度为10的数组
	var array3 = new Array("aa", 12, true); //array3是一个长度为3的数组，且元素类型不同
	// JavaScript 对象
	var user = {
		name : "test",
		age : 66,
		id : 1
	};
	// 使用
	var name = user.name;
	var age = user["age"];
</script>

作用域

局部变量：变量在函数内声明。只能在函数内部访问。

全局变量：变量在函数外声明。全局变量有全局作用域：网页中所有脚本和函数均可使用。

没有声明就使用的变量，默认为全局变量，不论这个变量在哪被使用。

函数

JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。在 return 语句时，函数会停止执行（后面的语句不执行），并返回指定的值。

一是在页面中直接嵌入JavaScript：

<script>
	function 函数名(参数列表) {
    	函数体(返回值使用return语句)
    }
</script>

二是链接外部JavaScript文件：

<script type="text/javascript" src="js/test.js"></script>

事件

HTML 事件是发生在 HTML 元素上的事情。使用格式： <标签各有关属性及其属性值 on事件名称="函数名称(参数);" /> 。对于事件，onclick和onClick都可以。

当在 JS 文件中为相关元素设置事件时，其写法与 HTML 事件属性写法相同，例如：

<button id="test" onclick="changeText()">内容变更</button>

也可以在js中，给指定元素绑定事件：

<script>
	var test = document.getElementById("test");
	test.onclick = function changeContent(){
    	// ...
	}
</script>

<script>
// 注意：在为元素添加事件句柄或者删除元素事件句柄的过程中
// 不要将 event 参数设置为 onclick，而必须写成 click，去掉事件名称中的 on 即可。

// 添加事件句柄函数原型:
element.addEventListener(event, function, [useCapture]);
// 示例
document.getElementById("test").addEventListener("mouseover", function(){
			alert(12);
		});

// 删除事件句柄的函数原型:
element.removeEventListener(event, function, [useCapture]);
</script>

鼠标事件

属性	描述
`onclick`	点击 HTML 元素
ondblclick	双击
onmousedown	鼠标按钮被按下
onmouseenter	当鼠标指针移动到元素上时触发
onmouseleave	当鼠标指针移出元素时触发
onmouseover	鼠标移到某元素之上
onmouseout	鼠标从某元素移开
onmousemove	鼠标被移动
onmouseup	鼠标按键被松开

键盘事件

属性	描述
`onkeydown`	用户按下键盘按键
`onkeyup`	在键盘按键被松开时发生
onkeypress	某个键盘按键被按下并松开

其他常用

属性	描述
`onchange`	HTML 元素内容值改变
`onblur`	元素或窗口本身失去焦点时
`onfocus`	获得焦点时
oninput	此事件会在value属性值发生改变时触发，通过js改变value属性值不会触发此事件。只有IE8以上或者谷歌火狐等标准浏览器支持
`onload`	页面加载后再window对象上触发
`onresize`	调整页面大小时
`onselect`	选中文本时触发
`onsubmit`	单击提交按钮时，在<form>上触发
onunload	页面完全卸载时，在window上触发，一般位于body标签
onscroll	onscroll 事件在元素滚动条在滚动时触发

对象

JavaScript中设有内置对象，常用的内置对象（String，Date），浏览器的文档对象（window 、navigator、screen、history、location、document等对象）。

JS 字符串

<script>
	var str = "xxxxx\nsssss";
	var infoall = str.split(/[\n]/);
</script>

JS Date

<script>
	var dnow = new Date();
  	var dyear = dnow.getFullYear();   // 返回年份
  	var dmonth = dnow.getMonth();     // 返回月份（0-11）
  	var ddate = dnow.getDate();       // 返回月中的第几天（1-31）
  	var dday = dnow.getDay();         // 返回星期几（0-6）
	var dhours = dnow.getHours();     // 返回小时（0-23）
	var dminutes = dnow.getMinutes(); // 返回分钟（0-59）
	var dseconds = dnow.getSeconds(); // 返回秒数（0-59）
	var dmi = dnow.getMilliseconds(); // 返回毫秒（0-999）
</script>

JS Number以及数字

语法：var num = new Number(value);

如果一个参数值不能转换为一个数字将返回 NaN (非数字值)。

<script>
	var a = 1;
	var b = 2;
	// c的结果是12
	var c = a + b;

	// c1的结果是3
	var c1 = Number(a) + Number(b);
	var cc = Number("1") + Number("2");
	
	var str = "123.123";
	// "123.1"
	parseFloat(str).toFixed(1);
	
	// 先转Int，再保留小数位数
	// "123.0"
	parseInt(str).toFixed(1);
</script>

window

所有浏览器都支持 window 对象。它表示浏览器窗口。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。全局函数是 window 对象的方法。甚至 HTML DOM 的 document 也是 window 对象的属性之一。

方法	描述
`alert("xxx")`	弹出一个警告框
`confirm("xxx")`	弹出一个确认对话框，单击“确认”返回true，否则返回false
prompt()	弹出一个提示对话框，并要求输入一个简单的字符串
`setTimeout(function,"1000")`	在经过指定的时间后执行代码，单位：毫秒值。
clearTimeout()	取消对指定代码的延迟执行
setInterval()	周期执行指定的代码
clearInterval()	停止周期执行指定的代码
`open()` `window.open()`	打开新窗口
`window.close()`	关闭当前窗口
window.moveTo()	移动当前窗口
window.resizeTo()	调整当前窗口的尺寸

示例：

<script>
	// 警告框
	// \n 用于换行
	alert("第一行\n第二行");
		
	// 确认框
	if(confirm("是否确定?")){
		alert("确定");
   	}else{
		alert("取消");
   	}
   		
   	// prompt("" ,"")	弹出一个提示对话框，并要求输入一个简单的字符串
   	// 1为上面固定的文本，2为虚型文本
	var name = prompt("1请输入","2请输入名字");
  	if(name != null && name != ""){      		
  		alert(name);
 	}  

	window.setTimeout("location.href='http://www.baidu.com'", 3000);
	// window.location.href="http://www.baidu.com";
</script>

window.open()以及相关

使用 window 对象的 open() 方法可以打开一个新窗口。用法如下：

window.open(URL, name, features, replace);

参数列表如下：

URL：可选字符串，声明在新窗口中显示网页文档的 URL。如果省略，或者为空，则新窗口就不会显示任何文档。
name：可选字符串，声明新窗口的名称。这个名称可以用作标记 <a> 和 <form> 的 target 目标值。如果该参数指定了一个已经存在的窗口，那么 open() 方法就不再创建一个新窗口，而只是返回对指定窗口的引用，在这种情况下，features 参数将被忽略。
features：可选字符串，声明了新窗口要显示的标准浏览器的特征，具体说明如下表所示。如果省略该参数，新窗口将具有所有标准特征。
replace：可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。

新窗口显示特征	说明
fullscreen = yes \| no \| 1 \| 0	是否使用全屏模式显示浏览器。默认是 no。处于全屏模式的窗口同时处于剧院模式。
height = pixels	窗口文档显示区的高度。单位为像素。
left = pixels	窗口的 x 坐标。单位为像素。
location = yes \| no \| 1 \| 0	是否显示地址字段。默认是 yes。
menubar = yes \| no \| 1 \| 0	是否显示菜单栏。默认是 yes。
resizable = yes \| no \| 1 \| 0	窗口是否可调节尺寸。默认是 yes。
scrollbars = yes \| no \| 1 \| 0	是否显示滚动条。默认是 yes。
status = yes \| no \| 1 \| 0	是否添加状态栏。默认是 yes。
toolbar = yes \| no \| 1 \| 0	是否显示浏览器的工具栏。默认是 yes。
top = pixels	窗口的 y 坐标.
width = pixels	窗口的文档显示区的宽度。单位为元素。

<script>
// 自动弹出一个窗口，一段时间之后自动关闭该窗口，同时允许用户单击页面超链接，更换弹出窗口内显示的网页 URL。
var url = "c.biancheng.net";
// 设置新窗口的特性
var features = "height=500, width=800, top=100, left=100, toolbar=no, menubar=no, scrollbars=no,resizable=no, location=no, status=no";
// 动态生成一个超链接
document.write('<a href="c.biancheng.net" target="newW">切换到C语言中文网首页</a>');
var me = window.open(url, "newW", featrues);  //打开新窗口
setTimeout (function () {
    if (me.closed) {
        console.log("创建的窗口已经关闭。");
    } else {
        me.close();
    }
}, 5000);
</script>

window.opener 属性是一个可读可写的属性，可返回对创建该窗口的 Window 对象的引用。

当使用window.open()打开一个窗口，您可以使用此属性返回来自目标窗口源（父）窗口的详细信息。

<!-- 其他信息 -->
<script>
	// 在使用window.open()方法打开一个页面后，如果需要在执行完一些操作后自动关闭，可以添加如下语句
	// 其他操作
	window.opener=null;
    window.close();
</script>

screen

window.screen 对象包含有关用户屏幕的信息。

window.screen 对象在编写时可以不使用 window 这个前缀。

属性	描述
screen.width	返回屏幕分辨率宽度
screen.height	返回屏幕分辨率高度
screen.availWidth	返回访问者屏幕的宽度（不包括Windows任务栏），以像素计，减去界面特性，比如窗口任务栏
screen.availHeight	返回访问者屏幕的高度（不包括Windows任务栏），以像素计，减去界面特性，比如窗口任务栏

<script>
	alert("可用宽度: " + screen.availWidth);
	alert("宽度: " + screen.width);	
	alert("可用高度: " + screen.availHeight);
	alert("高度: " + screen.height);
</scritp>

location

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

window.location 对象在编写时可不使用 window 这个前缀。

示例：http://www.123.cn:80/news/index.jsp?id=123&name=location#top

属性，方法	描述	例子
href	设置或获取整个 URL 字符串
protocol	返回一个URL协议，包括后缀的冒号	http:
host	返回一个URL的主机名和端口	www.123.cn:80
hostname	返回URL的主机名	www.123.cn
port	返回一个URL服务器使用的端口号	80
pathname	返回的URL路径名	news/index.jsp
`search`	返回一个URL的查询部分，包括前导问号	?id=123&name=location
hash	返回一个URL的锚部分，包括前导符（#）	#top
`reload()`	重新载入当前文档，用于刷新当前文档类似于浏览器上的刷新页面按钮	location.reload(); location.reload(true); 如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档
assign(url)	载入一个新的文档	window.location.assign(“https://www.baidu.com”);
replace(url)	用新的文档替换当前文档	window.location.replace(“https://www.baidu.com”);

window.location.href = "url";

当前页面打开URL页面，改变url地址，如果URL为空则重新打开当前页面
（1）与self.location.href = "url";，self.location.href="url";相同
（2）this.location.href = "url";       当前页面打开URL页面
（3）parent.location.href = "url";    在父页面打开新页面
（4）top.location.href = "url";        在顶层页面打开新页面

window.location.reload();：强制刷新页面，从服务器重新请求，和F5功能一样。

window.location.assign(url); ：加载 URL 指定的新的 HTML 文档。就相当于一个链接，跳转到指定的url，当前页面会转为新页面内容，可以点击后退返回上一个页面。

window.location.replace(url); ：通过加载 URL 指定的文档来替换当前文档，这个方法是替换当前窗口页面，前后两个页面共用一个窗口，所以是没有后退返回上一页的，这个特点对于做一些过渡页面非常有用

<script>
	alert(location.href);
	alert(location.protocol);
	alert(location.host);
	alert(location.hostname);
	alert(location.port);
	alert(location.pathname);
	alert(location.search);
	alert(location.hash);
</script>

<script>
	// ?k1=v1&k2=v2&...
	var parameters = window.location.search;
	// 获取链接中的参数，如果出现 idxx 这种包含的，要注意代码的书写
	var id = "";
	if(parameters.indexOf('id') > -1){
		id = parameters.substring(parameters.indexOf('id') + 3);
	}
	if(id.indexOf('&') > -1){
		id = id.substring(0, id.indexOf('&'));
	}
</script>

history

history 对象包含用户（在浏览器窗口中）访问过的 URL。

history 对象是 window 对象的一部分。

属性，方法	含义
length	浏览历史记录的总数
go(index)	从浏览历史中加载URL，index参数是加载URL的相对路径。index为负数时，表示当前地址之前的浏览记录，index正数时，表示当前地址之后的浏览记录
forward()	从浏览历史中加载下一个URL，相当于history.go(1)
back()	从浏览历史中加载上一个URL, 相当于history.go(-1)

	var sum = history.length;
	history.back();
	// go() 里面的参数为0,表示刷新页面
	history.go(0);

document

document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

document 对象是 window 对象的一部分，可通过 window.document 或 document 对其进行访问。

属性以及方法	说明
document.createElement()	创建元素节点
document.createTextNode()	创建文本节点
document.write(“<br>”+“<p>这是一个段落</p>”);	向页面输出信息
document.all	页面内所有元素的一个集合，document.all(0)标示页面内第一个元素
document.all.id名	返回一个对象
document.all.name名	返回数组

navigator

window.navigator 对象包含有关访问者浏览器的信息。

window.navigator 对象在编写时可不使用 window 这个前缀。

属性，方法	描述
appCodeName	返回浏览器的代码名
appName	返回浏览器的名称
appVersion	返回浏览器的平台和版本信息
cookieEnabled	返回指明浏览器中是否启用 cookie 的布尔值
platform	返回运行浏览器的操作系统平台
`userAgent`	返回由客户机发送服务器的user-agent 头部的值
javaEnabled()	指定是否在浏览器中启用Java
taintEnabled()	规定浏览器是否启用数据污点(data tainting)

常用属性以及方法

全局属性	描述
Infinity	代表正的无穷大的数值。
NaN	指示某个值是不是数字值。
undefined	指示未定义的值。

全局方法	描述
decodeURI()	解码某个编码的 URI。
decodeURIComponent()	解码一个编码的 URI 组件。
encodeURI()	把字符串编码为 URI。
`encodeURIComponent()`	把字符串编码为 URI 组件。
escape()	对字符串进行编码。
`eval()`	计算 JavaScript 字符串，并把它作为脚本代码来执行。
isFinite()	检查某个值是否为有穷大的数。
`isNaN()`	检查某个值是否是数字。
`Number()`	把对象的值转换为数字。
`parseFloat()`	解析一个字符串并返回一个浮点数。
`parseInt()`	解析一个字符串并返回一个整数。
String()	把对象的值转换为字符串。
unescape()	对由 escape() 编码的字符串进行解码。

Math	说明
Math.PI	返回PI
Math.sqrt(16)	返回16的平方根
Math.abs(x)	返回 x 的绝对值
Math.ceil(x)	对 x 进行上舍入
Math.floor(x)	对 x 进行下舍入
Math.pow(x,y)	返回 x 的 y 次幂
`Math.random()`	返回 0 ~ 1 之间的随机数
`Math.round(x)`	四舍五入

js怎么判断两个字符串是否相等

<script>
	// ==可以自动转换类型比较，===严格同种类型比较
	var a = "123";
	var b = 123;
	alert(a == b);  // true
	alert(a === b); // false
</script>

obj为元素对象

属性，方法	说明
obj.value	标签内的value值，对于文本表现为输入的值；如果对象没有value，则设置为空字符串。
obj.name obj.getAttribute(“name”)	标签内的name值
obj.className obj.getAttribute(“class”)	标签内的class值
obj.style	对象的css样式
obj.style.xxx	返回一个元素的style对象的引用，通过它我们可以获得并修改每个单独的样式； document.getElementById(“test”).style.backgroundColor=“red”
obj.checked	单选框：true选中，false未选中
obj.focus()	光标聚集到此对象
obj.submit()	form表单：表单提交
obj.innerHTML	标签之间的HTML内容
obj.innerTEXT	标签之间的文本内容

在这里插入图片描述

下拉框	说明
obj.options	获取下拉框的所有option的节点对象，是一个数组
obj.options.length	下拉框的数量
obj.options[0].value	下拉框的第一个value值
obj.options[0].text	下拉框的第一个文本内容值
obj.selectedIndex	获取当前选中的option的索引，用上面的两个即可获取当前值
obj.options[Object.selectedIndex].value	当前选中的下拉框的value值
obj.options[Object.selectedIndex].text	当前选中的下拉框的文本内容值

严格模式

针对整个脚本文件

<script>
	"use strict";
　　 console.log("这是严格模式");
</script>

针对单个函数

<script>
	function strict(){
		"use strict";
		return "这是严格模式";
	}
</script>

脚本文件的变通写法：因为第一种调用方法不利于文件合并，所以更好的做法是，借用第二种方法，将整个脚本文件放在一个立即执行的匿名函数之中。

<script>
	(function (){
		"use strict";
		// ...
	})();
</script>

在正常模式中，如果一个变量没有声明就赋值，默认是全局变量。严格模式禁止这种用法，全局变量必须显式声明。

使用let关键字，要注意“javascript 严格模式”。

let和var关键字的异同:

声明后未赋值，表现相同

<script>
	var varTest;
  	let letTest;
 	console.log(varTest); // 输出undefined
  	console.log(letTest); // 输出undefined
</script>

使用未声明的变量，表现不同:

<script>
	console.log(varTest); // 输出undefined(注意要注释掉下面一行才能运行)
	console.log(letTest); // 直接报错：ReferenceError: letTest is not defined
</script>

重复声明同一个变量时，表现不同

<script>
	var varTest = 'test var OK';
  	let letTest = 'test let OK';

  	var varTest = 'varTest changed';
  	let letTest = 'letTest changed'; // 直接报错：SyntaxError: Identifier 'letTest' has already been declared

	// 输出varTest changed.(注意要注释掉上面letTest变量的重复声明才能运行)
  	console.log(varTest);
 	console.log(letTest);
</script>

变量作用范围，表现不同

<script>
	var varTest = 'varTest OK';
  	let letTest = 'letTest OK';

  	{
    	var varTest = 'varTest changed';
    	let letTest = 'letTest changed';
  	}

	// 输出"varTest changed"，内部"{}"中声明的varTest变量覆盖外部的varTest声明
  	console.log(varTest);
  	// 输出"letTest OK"，内部"{}"中声明的letTest和外部的letTest不是同一个变量
  	console.log(letTest);
</script>