开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> javaScript -> 正文阅读

[JavaScript知识库]javaScript

概述

? 是一种直译式的脚本语言，用来为网页添加各式各样的动态效果

作用

响应客户端鼠标和键盘事件
客户端页面表单数据验证
使用JavaScript动态的改变页面标签的样式

与html，css关系关系

? JavaScript是一种基于对象和事件驱动的具有安全性的解释性语言，目的是为了增强web和客户的交互，弥补了html的缺陷

解释性语言&编译型语言

解释性语言：

不需要编译，由某种解释器解释执行，在运行程序的时候才进行翻译，每个语句在执行的时候才进行翻译。
编译性语言：

把源代码整体编译成机器语言，程序执行效率比较高，但比较依赖编译器，因此跨平台性差一些；

历史

JavaScript是由Netscape公司（美国网景公司）开发的一种脚本语言，结构简单，使用方便，对用户自身知识水平的要求并不高，易学易懂。
Netscape公司将这种脚本语言命名为LiveScript，与java一样,也是面向对象的语言,而且无需编译，可由浏览器直接解释运行，而不象Java那样需要经过编译。
Netscape公司见LiveScript大有发展前途，而SUN公司( java)也觉得可以利用Livescript为Java的普及做铺垫，于是两家签订协议，将LiveScript改为JavaScript，造就了这个强力的WEB开发工具。

基本语法

引入方式

头部head里

		<!-- 创建js，按顺序执行 -->
		<script type="text/javascript">
			alert("内部js窗口");//弹出窗口
		</script>

body里
js文件里

		<!-- 从外部导入js文件 -->
		<script src="js/out.js" type="text/javascript" charset="utf-8"></script>

声明变量

var

<script type="text/javascript">

    // 全局变量
    name = 'seven';

    function func(){
        // 局部变量
        var age = 18;

        // 全局变量
        gender = "男"
    }
</script>

数据类型

数值型：整数型，浮点型
布尔型：
字符串型：“ “、’ ‘ 都表示字符串
undefined类型：声明未初始化赋值的变量
Object类型：对象型（window、date）: var date = new Date();

typeof（）：获取变量的类型

null、undefined：

null是JavaScript语言的关键字，它表示一个特殊值，常用来描述“空值”。

undefined是一个特殊值，表示变量未定义。

算数运算符

**+：**字符串和数值会进行连接 console.log(“10.5”+5) //10.55

数字类型的字符串相**（减/乘/除）**会自动转换成数字类型进行相减 console.log(“10.5”-5) //5.5

比较运算符

=：赋值

==：比较值是否相等 console.log(“5”==5) //true

===：比较值和类型是否相等（全等） console.log(“5”===5) //false

条件运算符

var result = （条件式表达式）？结果1：结果2

当条件成立返回?后的内容，否则返回:后的内容

var result =(5==0)?1:2

函数

全局函数

parseInt(arg) 把括号内的内容转换成整数之后的值。如果括号内是字符串，则字符串开头的数字部分被转换成整数，如果以字母开头，则返回 “NaN”
parseFloat(arg) 把括号内的字符串转换成浮点数之后的值，字符串开头的数字部分被转换成浮点数，如果以字母开头，则返回“NaN”
typeof (arg) 返回arg值的数据类型
eval(arg) 把一串字符串当作js脚本运行
```
	var str="alert(123)"
	eval(str)
```

内置对象

String字符串

length ：返回该字符串的长度

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。

trim：移除空白

concat(value,…)：拼接

Array数组

数组定义

			//定义空数组，给元素赋值
			var array1 = new Array();
			array1[0] = 1;
			array1[1] = "aa";
			array1[3] = true;
			console.log(array1);  //[1, 'aa', empty, true]
			
			//定义数组直接初始化赋值
			var array2 = new Array(1,"aa",true);
			console.log(array2);	// [1, 'aa', true]
			
			//直接传元素
			var array3 = [1,"aa",true];
			console.log(array3);	// [1, 'aa', true]

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

concat()：用于连接两个或多个数组。arrayObject.concat(arrayX,arrayX,…,arrayX)

pop()：用于删除并返回数组的最后一个元素。

push() ：可向数组的末尾添加一个或多个元素，并返回新的长度。

shift()：用于把数组的第一个元素从其中删除，并返回第一个元素的值。

slice()：可从已有的数组中返回选定的元素。arrayObject.slice(start(必须),end(可选)),该方法并不会修改数组

splice()：向/从数组中添加/删除项目，然后返回被删除的项目。该方法会改变原始数组。

splice(index(删除的位置),howmany(数量,为0不删除),item1,…,itemX(插入的元素))

join(<分隔符>) ：返回一个字符串，该字符串把数组中的各个元素串起来，用<分隔符>置于元素与元素之间。

reverse()：使数组中的元素顺序反过来。如果对数组[1, 2, 3]使用这个方法，它将使数组变成：[3, 2, 1]。

sort() ：使数组中的元素按照一定的顺序排列。如果不指定<方法函数>，则按字母顺序排列。

? 对数字排序需要调用排序函数。

? function sortNumber(a,b){

? return a - b;

? }

Date

获取日期

new Date() 返回当日的日期和时间 //Sat Sep 18 2021 20:09:27 GMT+0800 (GMT+08:00)

getFullYear() 返回四位数字年份

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

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

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

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

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

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

设定日期

setDate() 设置 Date 对象中月的某一天 (1 ~ 31))

setMonth() 设置 Date 对象中月份 (0 ~ 11))

setYear() 设置 Date 对象中的年份（两位或四位数字）

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 中的最小值

事件

onclick()鼠标点击时；

ondblclick鼠标双击时;

onblur()标签失去焦点;

onfocus()标签获得焦点;

onmouseover()鼠标被移到某标签之上;

onmouseout鼠标从某标签移开;

onload()是在网页加载完毕后触发相应的的事件处理程序;

onchange()是指当前标签失去焦点并且标签的内容发生改变时触发事件处理程序。

Onkeydown键盘按下

Onkeyup 键盘抬起

Event对象

? 事件产生的同时，会创建一个event事件对象，此对象包含事件的一些信息

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function test(e){
				console.log(e);
			}
		</script>
	</head>
	<body>
		<!-- 事件产生的同时，会创建一个event事件对象，此对象包含事件的一些信息 -->
		<input type="button" value="测试" ondblclick="test(event)" />
	</body>
</html>

type 事件类型

Button 被点击的鼠标键位

altKey 按下altKey返回true

ctrlKey 按下ctrlKey返回true

shiftKey按下shiftKey返回true

keyCode 返回被按下的键位编码

offsetX 当前标签内的鼠标X轴

offsetY 当前标签内的鼠标Y轴

clientX 鼠标在浏览器内部X轴

clientY鼠标在浏览器内部Y轴

screenX 鼠标在显示器内的X轴

screenY鼠标在显示器内的Y轴

ctrlkey 返回按键是否为ctrl 返回true , false

DOM

Document Object Model 文档对象（网页中的标签）模型的缩写

js要对网页中的标签进行操作，那么js认为网页中的每个标签都是一个对象（DOM对象）

操作网页中的标签就可以认为是操作DOM对象

当浏览器载入 HTML 文档, 它就会成为 Document 对象

Document 对象是 HTML 文档的根节点

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

操作标签步骤：

获得标签对象
document.getElementById() 返回对拥有指定 id 的第一个对象的引用。
document.getElementsByClassName() 返回文档中所有指定类名的元素集合，作为 NodeList 对象
document.getElementsByTagName() 返回带有指定标签名的对象集合
document.getElementsByName() 返回带有指定名称的对象集合
改变html内容、css、属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<!-- js -->
		<script type="text/javascript">
		function test(){
			/* 要想操作，先获取对象 */
			var div1= document.getElementById("div1");
			var div2= document.getElementById("div2");
				/* 1、改变html */
				console.log(div1.innerHTML)  //div
				div2.innerHTML=div1.innerHTML;
				/* 2、改变css */
				div2.style.backgroundColor="red";
				div2.style.width="30px";
		}
		
		function test1(){
			var text1=document.getElementById("text1");
			var text2=document.getElementById("text2");
				/* 3、改变属性 */
				text2.value=text1.value;
				text1.value="";
		}
		</script>
	</head>
	<body>
		<div id="div1">div</div>
		<div id="div2"></div>
		<input type="button" value="操作" onclick="test()" /><br>
		
		<input type="text" id="text1" value="" />
		<input type="text" id="text2" value="" />
		<input type="button" name="" id="zybtn" value="转移" onclick="test1()" />
	</body>
</html>

在js中绑定事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 
		   前面讲完了js的基本语法  变量,数据类型,运算符,控制语句,函数,内置对象.
		   又讲了标签可以产生事件,事件可以调用(触发)函数. 本质就是在js函数中又反过来对网页上的标签进行操作.
		   
		   html DOM对象 是一类对象的统称
		   DOM是Document Object Model文档对象（网页中的标签）模型的 缩写
		   
		   js要对网页中的标签进行操作,那么js认为网页中每个标签都是一个对象(dom对象)
		   操作网页就可以认为是操作对象.
		   
		   那么我们想要在js中对网页中的标签进行操作,
		   首先要获得网页中的标签,  要操作,先得到
		   如何获得网页中的标签:
		    document对象: 表示整个html文档,当浏览器加载网页时,会创建一个document对象
			通过id获得: document.getElementById("id");  返回对应id的标签对象
			操作网页:
			 1.标签体中的内容 innerHTML  = 
			 2.操作css obj.style.属性
			 3.操作标签数性  obj.属性
			 4.事件的其它用法
		
		 -->
		 <script type="text/javascript">
		 	/* function test(){
				 
			 } */
			               //匿名函数
			 window.onload=function(){  //在js中为onload事件 绑定一个处理函数
				 
				 var btn1 = document.getElementById("btn1");
				 //在js代码为标签事件绑定处理函数,将js函数从html中分离出来
				     btn1.onclick = function(){
				 					 alert(111);
				 				 }
								 
			 }
		 </script>
	</head>
	<body>
		<!-- <input type="button" οnclick="test()" /> -->
		 
		  <input type="button" value="保存"  id="btn1"/>
		 
	</body>
</html>

获取js对象集合

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		 <script type="text/javascript">
		 	 
			 function test(){
				 //根据标签名获取指定名称的标签对象, 得到的是一个集合, 哪怕满足条件的只有一个
				 //var objs = document.getElementsByTagName("input");
				 //var objs = document.getElementsByClassName("h");
				 var objs = document.getElementsByName("c");
			     for (var i = 0; i < objs.length; i++) {
			     	    objs[i].checked = true;
			     }
			 }	 
			 
			 window.onload=function(){
				 var objs1 = document.getElementsByClassName("c1");
				 for (var i = 0; i < objs1.length; i++) {
					objs1[i].onclick = function(){
						  alert(this.value); //批量为多个标签的事件绑定处理函数
					}
				 }
			 }
 	
		 </script>
	</head>
	<body>
	
		  <input type="checkbox" value="1" class="h" name="c"/>
		  <input type="checkbox" value="2" class="h"  name="c"/>
		  <input type="checkbox" value="3" class="h"  name="c"/>
		  <input type="checkbox" value="4" class="h"  name="c"/>
		  <input type="button" value="全选"  id="btn1" onclick="test()"/>
		  
		  <input type="button" value="1"   class="c1"/>
		  <input type="button" value="2"   class="c1"/>
		  <input type="button" value="3"   class="c1"/>

	</body>
</html>

浏览器对象

window对象

? 表示浏览器窗口

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 html dom 的 document 也是 window 对象的属性之一

window.innerHeight - 浏览器窗口的内部高度

window.innerWidth - 浏览器窗口的内部宽度

window.parent获得父级窗口对象(父子级之间调用)

window.parent

? 子窗口调用父窗口对象：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			
		</script>
	</head>
	<body>
		父
		<input type="text" name="" id="partext" value="" /><br>
		<iframe src="demo2.html" width="300" height="200"></iframe>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var btnobj = document.getElementById("btn")
				btnobj.onclick=function(){
					var textobj = document.getElementById("text")
                    //获取父窗口对象，再获取标签对象
					var partextobj = window.parent.document.getElementById("partext")
					partextobj.value = textobj.value
				}
			}
		</script>
	</head>
	<body>
		子
		<input type="text" name="" id="text" value="" />
		<input type="button" name="" id="btn" value="发送" />
	</body>
</html>

? 子窗口调用父窗口方法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function send(msg){
				var partextobj=document.getElementById("partext");
				partextobj.value = msg
			}
		</script>
	</head>
	<body>
		父
		<input type="text" name="" id="partext" value="" /><br>
		<iframe src="demo2.html" width="300" height="200"></iframe>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var btnobj = document.getElementById("btn")
				btnobj.onclick=function(){
					var msg = document.getElementById("text").value
					window.parent.send(msg)
				}
			}
		</script>
	</head>
	<body>
		子
		<input type="text" name="" id="text" value="" />
		<input type="button" name="" id="btn" value="发送" />
	</body>
</html>

window.open

? window.open(‘url’, ‘name’,’features’) 打开新的窗口

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			
			//console.log(window.innerWidth+"::"+window.innerHeight);
			
			 function show(msg){
				 var msgdiv = document.getElementById("msgshow");
				  msgdiv.innerHTML  = msg;
			 } 

			 //获取鼠标点击位置
			 function openNewWin(e){
				 var x = e.screenX;
				 var y = e.screenY;
				 window.open("child.html","child","width=400,height=400,left="+x+",top="+y);
			 }
		</script>
	</head>
	<body>
		父
		<div id="msgshow"></div>
		 <iframe src="child.html" name="aa"></iframe>
		 
		 <input type="button" value="打开新窗口" onclick="openNewWin(event)" />
		 
		 <a href="http://www.baidu.com" target="child">百度</a>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function send(){
				var  msg = document.getElementById("msg").value;
				/* var msgdiv = window.parent.document.getElementById("msgshow");
				 msgdiv.innerHTML  = msg; */
				 
				 window.parent.show(msg);//在子窗口中调用父窗口方法
			}	 
		</script>
	</head>
	<body>
		子
		<input type="text" id="msg"/>
		<input type="button" value="发送"  onclick="send()"/>
	</body>
</html>

location对象

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
		
		     //alert(location.href); 获得当前窗口中的页面地址
			
			 //location.href =  'child.html';  重新设置新的地址  重定向
			
			
			function assigndemo(){
				location.assign("child.html"); //加载新页面,保留原来的
			}
			
			function reloaddemo(){
				location.reload();//刷新当前页面
			}
			
			function replacedemo(){
				location.replace("child.html"); //加载新页面 替换当前页面
			}
		</script>
	</head>
	<body>
	   
	   <input type="button"  value="assign" onclick="assigndemo()"/>
	   <input type="button"  value="reload" onclick="reloaddemo()"/>
	   <input type="button"  value="replace" onclick="replacedemo()"/>
	</body>
</html>

计时

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

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

**clearTimeout()**取消setTimeout()

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

**clearInterval()**取消setInterval()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			
			function test(){
				alert();
			}
			
			//在指定的时间后,调用指定的函数,只调用一次
			var t1 = setTimeout("test()",5000);
			
			//每隔指定的时间,调用一次指定的函数
			 var t2 = setInterval("test()",3000);
			
			function clearTime(){
			   //clearTimeout(t);//取消指定的定时器
			   clearInterval(t2);
			}
		</script>
	</head>
	<body>
		
		<input type="button" value="取消定时"  onclick="clearTime()"/>
	</body>
</html>