JavaScript (Web)

落日与晚风，

已于 2023-09-17 18:44:03 修改

阅读量209

点赞数 1

文章标签：前端 javascript html

于 2023-09-11 12:05:35 首次发布

本文链接：https://blog.csdn.net/lLlLlL__lL/article/details/132802564

版权

JavaScript

基本概念：js是一门客户端脚本语言，运行在客户端浏览器中，每一个浏览器都有一个js的解析引擎，JS是一个弱类型的语言。

脚本语言:不需要编译的，直接可以被浏览器解析执行

功能：用来增强用户和html页面的交互，也可以用来控制 html元素

1992 nombase 开发第一个脚本语言专门用来做表单验证命名 C-- ScriptEase

1995 网景 netscape LiveScript 同年Java发布 -> JavaScript

1996 微软开发 Jscript 搭载ie浏览器

1997 ECMA（欧洲计算机制造协商会），指定标准，统一了脚本语言

JavaScript ： ECMAScript + JavaScript特有的东西（BOM+DOM）

JS在HTML中的用法

1，行内写法，将js代码写在html标签中

2，文档内部写法，将js代码写在一对<script>标签中

3，外部引入js文件，将js代码，单独写在一个文件中，使用<script>标签引入中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	<!-- 外部引用 -->
	<script src="js/index.js"></script>
	
	
	<body>
		<button onclick="javascript:alert('按钮被点击了')">按钮</button>
	</body>
	
	<!-- 内部引用 -->
	<div id="mydiv"></div>
	<script>
		a = 10;
		
		// alert("弹出弹框")
		// document.write("<br>")
		// document.write(a + "<br>")
		
		console.log("将内容输出浏览器后台");
		console.log("1");
		
		
		document.getElementById("mydiv").innerHTML = "这里的内容展示到div 标签中";
		
		
		
		
	</script>
</html>

JS中的常用内容

注释：和Java中一样

单行： //

多行 : /* */

输出内容

1,弹出弹框 alert()

2,网页上输出 document.write()

3,控制台输出 console.log()

4,通过dom展示到标签中

document.getElementById("id值").innerHTML = "展示内容"

JS 中数据类型

1，原始数据类型

Number ：整数、小数、NaN(not a number) 非数字

String ：双引号或者单引号引起来的

Boolean ： true 或 false

Null ：null

Undefined ：undefined

2，引用数据类型：对象、数组、函数....

JS中的变量

变量的概念：程序运行的过程中，用来存储数据的一个名称，是可以改变的，本质上其实是内存的一个空间

Java是强类型语言，js是弱类型语言，声明变量的区别

强类型：开辟空间的时候，指定数据类型，将来空间中只能存放指定的类型

弱类型:开辟空间的时候，不指定具体的存放类型，可以存放任意类型的数据

语法： var 变量名 = 值; let 变量 = 值 ; const 常量名 = 值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script>
		var a = 10;
			a = "asc";
			console.log(a);
			b = 100;
			console.log(b);
			
		//Numbre类型
		var num1 = 10;
		var num2 = 100.23;
		var num3 = NaN;
		console.log(num1+num2);
		console.log(typeof(num1))
		
		//字符串
		var s1 = "abc";
		var s2 = 'asd';
		var s3 = s1+num1;
		console.log(s3);
		console.log(s1);
		
		//boolean
		var b1 = true;
		console.log(b1);
		
		//Null
		var n1 = null;
		var n2 = undefined;
		var n3;
		console.log(n1);
		console.log(n2);
		console.log(n3);
		
		//作用域
		function fun(){
			var name = 'jack'; 
				age = 20;
			let sex  = '男';
		}
		console.log(name);
		// console.log(age);
		// console.log(sex);
		
	</script>
</html>

JS中的运算符

赋值运算符： =

算数运算符： + - * / %

js中除法会返回小数比较运算符： > < >= <= == ===

== : js中的==是判断值是否相同，不同类型，值相同也返回true

=== ： js中的=== 判断值和类型是否都相同，如果都相同，则返回true

逻辑运算符：&&，|| ，！

!取反，在js中可以完成数据隐式的转换

var num4 = -100;
var num5 = "100";
console.log(num4 == num5); //值相等
console.log(num4 === num5); //false
// console.log( 3 < 5 && num4++ < 200);
//非0数字加上取反默认被当做布尔值中的true，0被当做false
console.log(!num4); 
//非空的字符串遇到!取反，也会被当做布尔值中的true,空字符是false
console.log(!num5);

一元运算符： ++ --

++a ,先将a+1 ，再将a参与表达式的计算

a++ ,先将a参与表达式运算，再给a+1

二元运算符： += ，-= ，*= ，/=

三源运算符：

变量 = 表达式？值 1 ：值2 ；

如果表达式的结果为true ，那么变量的最终结果是值1

如果表达式的结果是false，那么变量的最终结果是值2

Js中的流程控制语句

if - else 和Java完全相同

switch- case ：和Java中语法格式相同

JS中的循环语句

for循环：和Java中相同

for--in循环：js中for-in循环一般用来遍历数组、对象等内容属性...

while 循环: 和Java中一样

do - while循环：和Java中一样

js中使用for循环，写一个乘法口诀表

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
table{
border-collapse: collapse;
}
td{
border: 1px solid #000;
padding: 10px;
}
</style>
</head>
<body>
</body>
<script>
document.write("<table>");
for (var i = 1; i <= 9; i++) {
document.write("<tr>");
for (var j = 1; j <= i; j++) {
document.write("<td>");
document.write(j + "x" + i + "=" + (i*j) + "&nbsp;");
document.write("</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
</html>

Js中常用对象

JS中的数组

Js中的数组对象，可以使用单独的变量名，存储多个值，其实就是一个容器中，装了很多个元素，js数组中可以存放任意类型的数据

数组索引从零开始：数组中的第一个元素是 0，第二个元素是 1，依此类推。

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()	返回数组的原始值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script>
		//数组的定义
		//1，使用new关键字创建Array对象
		var array = new Array();
		var array1 = new Array(3);
		// console.log(array[0]);
		// console.log(array1[4]);
		
		//2,使用new创建的时候，直接给数组赋值
		var array2 = new Array("1",2,"3");
		console.log(array2[2]);
		
		//3，直接使用[] 声明数组
		var array3 = ["hello","1","java"];
		console.log(array3[0]);
		
		//常见的数组操作
		//添加
		//1，直接通过下标赋值
		array[0] = "hello";
		array[1] = "jaav";
		array[2] = "oracle";
		console.log(array);
		
		//2,使用pash方法，加到尾部
		 var num = array.push("mysql");
		 console.log(array);
		 console.log(num);
		 
		 //3,使用unshift()方法,加到头部
		var num1 = array.unshift("linux");
		console.log(array);
		console.log(num1);
		
		//删除数组的最后一个元素
		var num2 = array.pop();
		console.log(array);
		console.log(num2);
		
		//删除数组的第一个元素
		var num3 = array.shift();
		console.log(array);
		console.log(num3);
		
		//splice()方法，可以同时删除与添加()
		array.splice(1,1,"math","sping","spingboot");
		console.log(array);
		
		//遍历
		for(key in array){
			console.log(array[key]);
		}
		console.log("--------------------------------")
		
		for (var i = 0; i < array.length; i++) {
			var i1 = array[i];
			console.log(i1);
			document.write(i1+"&nbsp;");
		}
		console.log("--------------------------------")
		
		array.map(function(value,index){
			console.log(index+"----"+value);
		})
		console.log("--------------------------------")
		
		//其他的常用方法 concat()
		var num4 = array.concat(array1,array2);
		console.log(num4);
		
		//filter
		var array4 = [10,15,20,34,221,56,20];
		//将array4中，比20大的数据过滤，放到新数组中
		var num5 = array4.filter(function(num){
			if(num > 20){
				return num;
			}
		});
		console.log(num5);
		
		//join方法
		var num6 = array.join("|");
		console.log(num6);
		
		//排序sort()方法:按照第一个值排
		var array5 = [12,6,9,4,6,34,2,67];
		array5.sort();
		console.log(array5);
		//从小到大
		array5.sort(function(a,b){
			return a - b;
		})
		console.log(array5);
		
		
		
		
		
		
	</script>
</html>

JS中的字符串

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()	返回字符串或字符串对象的原始值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script>
		
		var s1 = "hello";
		var s2 = "oracle";
		// charAt()	返回指定位置处的字符。
		console.log(s1.charAt(3));
		// concat()	返回两个或多个连接的字符串。
		var s3 = s1.concat(s2);
		console.log(s3);
		
		// endsWith()	返回字符串是否以指定值结尾。
		console.log(s1.endsWith("d"));
		// indexOf()	返回值在字符串中第一次出现的位置。
		console.log(s1.indexOf("l"));
		
		// lastIndexOf()	返回值在字符串中最后一次出现的位置。
		console.log(s1.lastIndexOf("l"));
		
		// length	返回字符串中的字符数。
		console.log(s1.length);
		
		// replace()在字符串中搜索值或正则表达式，并返回替换值的字符串。
		console.log(s1.replace("l","x"));
		console.log(s1);
		
		// split()	将字符串拆分为子字符串数组。
		var s4 = s1.split("d");
		console.log(s4);
		
		// substring()	从字符串中抽取子串。
		var s5 = s1.substring(1,3);
		console.log(s5);
		
		// substr()	从字符串中抽取子串，该方法是 substring() 的变种。
		var s6 = s1.substr(1,3);
		console.log(s6);
		
		
	</script>
</html>

练习

//求大字符串中"aaglsgjavafekwegjavakjkwaegnjavafwaegwegjava" //中小字符串java出现的次数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script>
		var s = "aaglsgjavafekwegjavakjkwaegnjavafwaegwegjava";
		var s1 = "java";
		var s2 = s.split(s1).length-1;
		console.log("java的个数："+s2);
		

		console.log("-----------------------------------");
		
		var s6 = s.indexOf(s1);
		var count1 = 0;
		while(s6 !== -1){
		    count1++;
		    s = s.substring(s6 + s1.length);
		    s6 = s.indexOf(s1);
		}
		console.log("java的个数："+count1);
		console.log("----------------------------------");

		var s3 = "aaglsgjavafekwegjavakjkwaegnjavafwaegwegjava";
		var s4 = "java";
		var count = 0;
		for (var i = 0; i < s3.length; i++) {
		  if (s3.substr(i, s4.length) == s4) {
		    count++;
		  }
		}
		console.log("java的个数：" + count);
		
		
		
		
	
	</script>
</html>

JS正则表达式

Regexp对象

正则表达式是一种字符模式。

该模式用于对文本进行模式匹配的“搜索和替换”功能。

修饰符

修饰符用于执行不区分大小写和全局的搜索：

修饰符描述

g 执行全局匹配（查找所有匹配而不是在第一个匹配后停止）。

i 执行不区分大小写的匹配。

m 执行多行匹配。

方括号

方括号用于查找某个范围内的字符：

表达式描述

[abc] 查找括号之间的任何字符。

[^abc] 查找任何不在方括号之间的字符。

[0-9] 查找任何从 0 至 9 的数字。

[^0-9] 查找任何不在括号内的字符（任何非数字）。

(x|y) 查找任何指定的选项。

元字符

元字符是具有特殊含义的字符：

元字符描述

. 查找单个字符，除了换行符或行终止符。

\w 查找单词字符。

\d 查找数字。

量词

量词描述

n+ 匹配任何包含至少一个 n 的字符串。

n* 匹配任何包含零个或多个 n 的字符串。

n? 匹配任何包含零个或一个 n 的字符串。

n{X} 匹配包含 X 个 n 的序列的字符串。

n{X,Y} 匹配包含 X 至 Y 个 n 的序列的字符串。

n{X,} 匹配包含至少 X 个 n 的序列的字符串。

n$ 匹配任何以 n 结尾的字符串。

^n 匹配任何以 n 开头的字符串。

?=n 匹配任何其后紧接指定字符串 n 的字符串。

?!n 匹配任何其后没有紧接指定字符串 n 的字符串。

RegExp 对象方法

方法描述

exec() 测试字符串中的匹配项。返回第一个匹配项。

test() 测试字符串中的匹配项。返回 true 或 false。

toString() 返回正则表达式的字符串值。

<script>
//匹配电话
var tel = "我的电话是:13333338888";
var reg = /1[3-9][0-9]{9}/;
console.log(reg.exec(tel));
console.log(reg.test(tel));
console.log(tel.match(reg));
//匹配内容
var s1 = "gagewgweaAAWEGaa";
var reg = /[a]/gi;
console.log(s1.match(reg));
//匹配日期格式
var str1 = "1999-11-10";
var reg2 = /^[\d]{4}-[\d]{1,2}-[\d]{1,2}$/;
console.log(reg2.test(str1));
//写一个邮箱的正则表达式格式
// 12314@qq.com gaweg1241@163.com waggw3e12@yahool.com.cn
var reg3 = /[\w]{2,16}@[\w]{2,10}\.[\w]{2,3}/;
var str2 = "12314@qq.com";
console.log(reg3.exec(str2));
</script>

JSZ中对象的创建

JS中的对象Object，是以一个键值对的形式存储属性的集合，每个属性都是自己定义的一个名称，以及和名称对应的值。

创建对象的方法

通过对象的构造器来定义

构造器就是一个构造函数

函数的定义方式 : function (参数){ }

通过new Object()来定义

通过{}来定义

<script>
//1,创建对象，es5中，先去创建对象的构造函数
var User = function(userid,username){
this.userid = userid;
this.username = username;
}
//通过new关键字结合对象的构造函数，完成对象的创建及初始化
var user1 = new User(1001,"jack");
console.log(user1.userid);
console.log(user1.username);
var user2 = new User(1002,"tom");
console.log(user2.userid);
console.log(user2.username);
//2,通过new关键字结合Object对象，创建空对象
var user3 = new Object();
user3.id = 1003;
user3.name = 'lucy';
console.log(user3.id);
console.log(user3.name);
//3, js中可以通过 {} 来直接声明对象，声明的时候进行赋值
var user4 = {id:1004,name:"tonny"};
console.log(user4.id);
console.log(user4.name);
var user5 = {};
user5.id = 1005;
user5.name = 'jandy';
console.log(user5.id);
console.log(user5.name);
</script>

es6中的面向对象

将来前端开发的过程中，大部分情况下，不需要去通过定义类的方式来完成开发，但是很多时候，我们会去使用别人定义好的类(很多的前端框架中，都有这些定义)

<script>
class Animal{
//构造函数
constructor(name,age){
this.name = name;
this.age = age;
}
say(){
console.log("我的名字是"+ this.name
+",年龄是" + this.age);
}
}
class Dog extends Animal{
constructor(name,age,gender){
super(name,age);
this.gender = gender;
}
}
var dog = new Dog("旺财",2,"母");
dog.say();
console.log(dog.gender);
</script>

JS中对象的属性和方法

js中的属性可以动态的添加

//添加属性 
//通过对象.属性 = 值 和 对象["属性名"] = 值
//动态的添加和删除user1对象的属性，添加和删除不影响其他的相关对象
user1.userage = 20;
user1["gender"] = "男";
console.log(user1);
//删除属性
delete user1.userage;
console.log(user1);
//user2的属性不受user1属性添加的影响
console.log(user2);
//对象中方法的创建
//对象的方法也可以动态的添加、删除，方法只能通过对象.方法名 来创建
user1.product = [];
user1.chooseProduct = function(product){
user1.product.push(product);
}
//调用对象方法
user1.chooseProduct("电脑");
user1.chooseProduct("手机");
user1.chooseProduct("pad");
console.log(user1);
//对象的遍历
// Object.values() 、JSON.stringify()
var userArr = Object.values(user1);
console.log(userArr);
var userJson = JSON.stringify(user1);
console.log(userJson);

//创建一个Student对象的构造函数，有姓名、年龄两个属性
//创建好构造函数之后，完成对象的创建，通过构造方法完成初始化
//动态的添加一个班级属性、一个课程属性，
//然后添加一个选课方法，将所选课程，加入到课程属性中
//最后，完成对象的遍历
function Student(name,age){
this.name = name;
this.age = age;
}
var student = new Student("jack",20);
student.className = "1班";
student.course = [];
student.chooseCourse = function(cname){
student.course.push(cname);
}
student.chooseCourse("oracle");
student.chooseCourse("mysql");
var stuJson = JSON.stringify(student);
console.log(stuJson);

JS中的函数

Js中的函数，其实就是java中的方法在js中，通过函数可以对代码进行有效的组织，可以让代码更加结构化，易于理解和维护 js中的函数，是事件的驱动，函数可以将重复使用的代码，进行封装，完成调用 js中一般通过事件或者在其他的代码中调用函数

JS中函数的创建

js中的函数主要由，函数名、参数、函数体、返回值4 个部分组成

语法 : function 函数名(参数){ 函数体； return 返回值; }

<script>
//函数的声明和调用
//1，声明的时候指定函数名
function fun1(){
console.log("函数fun1被调用了");
}
//调用
fun1();
//2，将匿名函数赋值给变量
var fun2 = function(){
fun1();
console.log("函数fun2被调用了");
}
fun2();
//3,通过new关键字 ，调用Function()构造函数
var fun3 = new Function(console.log("函数fun3被调用了"));
</script>

函数声明提升现象

//1，
 fun = function(x,y){
return x-y;
}
//函数声明的提升
//使用function声明的函数，提升优先级比变量提升要高
//不会被变量声明覆盖，但是会被变量的赋值覆盖
//2，
function fun(x,y){
return x+y;
}
//为什么返回-1，因为2处声明的函数提升到了最顶部，之后
//又被1处的函数赋值所覆盖，所以，这里执行的fun其实是
//1处的函数
var num = fun(1,2); // -1
console.log(num);

JS中的函数是一个对象

通过typeof()方法测试发现，函数是一个function对象

所以，js中函数也存在一些属性和方法

属性：

arguments.length 可以返回函数被调用的时候，传入的参数的个数

方法：

toString() 返回函数的字符串格式

function fun4(a,b){
return arguments.length;
}
var num = fun4(1,2);
console.log(num);
//toString()方法
console.log(fun4.toString());

es6中的函数

箭头函数的用法

箭头函数就是允许使用更简单的写法来表示函数表达式，使用箭头函数的时候，可以不用function关键字、 return、花括号

//es5
var f1 = function(a,b){
return a+b;
}
var n = f1(1,2);
console.log(n);
//es6 箭头函数, 箭头函数没有提升
const f2 = (a,b) => a+b;
var n1 = f2(1,2);
console.log(n1);

JS函数中的参数

js的函数的参数在函数声明的时候，并没有指定类型，参数可以传入任意类型

//无参的函数
function f3(){
console.log("abc");
}
//有参的函数
function f4(a,b){
console.log(a+b);
}
//不定长的参数
function f5(...param){
for (var i = 0; i < param.length; i++) {
console.log(param[i]);
}
}
f5(1,2,3,4,5);

参数的默认值设置

//参数的默认值
function f6(name,age){
name = name || "jack";
age = age || 20;
console.log( name + "--" + age);
}
f6();
f6("tom");
f6("lucy",22);

JS函数中的arguments对象

如果函数中调用的参数太多了，可以使用arguments来得到某些参数

//写一个函数找到最小值，调用函数的可以传入一些值
		function finMin(){
			var min = 0;
			for (var i = 0; i < arguments.length; i++) {
				if(arguments[i] < min){
					min = arguments[i];
				}
			}
			return min;
		}
		var n = finMin(12,54,2,6,-14);
		console.log(n);

JS中的this对象

this 是什么？

JavaScript this 关键词指的是它所属的对象。

它拥有不同的值，具体取决于它的使用位置：

在方法中，this 指的是所有者对象。
单独的情况下，this 指的是全局对象。
在函数中，this 指的是全局对象。
在函数中，严格模式下，this 是 undefined。
在事件中，this 指的是接收事件的元素。

像 call() 和 apply() 这样的方法可以将 this 引用到任何对象。

js中的this，表示拥有当前函数的对象

1、this表示全局对象

当我们声明的函数的时候，没有将函数声明在对象中，那么函数中的this，就表示当前的窗口对象，也称为全局对象，在浏览器中，全局对象，指的就是 window对象

2，this表示当前对象

如果将函数声明在对象中的时候，函数中的对象，就表示函数的所属对象

	// 如果将函数声明在对象中的时候，函数中的对象， 就表示函数的所属对象
		var user = {
			name : "jack",
			age : 22,
			//this 在箭头函数 指向全局对象
			show : ()=>{return this;}, 
			say : function(){
				return this;
			}
		}
		var j = user.say();
		console.log(j);
		var k = user.show();
		console.log(k);

JS函数返回对象

	
		//js中函数返回数组
		function fun1(a,b){
			array = [];
			array.push(a*10);
			array.push(b*10);
			return array;
		}
		var array = fun1(2,3);
		console.log(array);
		
		//函数返回对象
		function fun2(name,age){
			user = {};
			user.name = name;
			user.age = age;
			return user;
		}
		var user = fun2("bob",23);
		console.log(user);

JS函数参数的传值方法

<script>
		//传值调用
		function fun1(s){
			s = "hello";
		}
		var s1 = "你好";
		fun1(s1);
		console.log(s1);
		
		//传地址调用
		function fun2(user){
			user.name = "李四";
		}
		var stu = {name:"张三"};
		fun2(stu);
		console.log(stu.name);
		
		//传函数调用
		function add(a,b){
			return a+b;
		}
		function sub(a,b){
			return a-b;
		}
		function opertor(a,b,fun){
			return fun(a,b);
		}
		var n = opertor(1,2,sub)
		console.log(n);
	</script>

JS中的内置函数（对象）

数学对象（Math）

方法	描述
abs(x)	返回 x 的绝对值
acos(x)	返回 x 的反余弦值，以弧度计
asin(x)	返回 x 的反正弦值，以弧度计
atan(x)	以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x)	返回从 x 轴到点 (x,y) 的角度
ceil(x)	对 x 进行上舍入
cos(x)	返回 x 的余弦
exp(x)	返回 Ex 的值
floor(x)	对 x 进行下舍入
log(x)	返回 x 的自然对数（底为e）
max(x,y,z,...,n)	返回最高值
min(x,y,z,...,n)	返回最低值
pow(x,y)	返回 x 的 y 次幂
random()	返回 0 ~ 1 之间的随机数
round(x)	把 x 四舍五入为最接近的整数
sin(x)	返回 x（x 以角度计）的正弦
sqrt(x)	返回 x 的平方根
tan(x)	返回角的正切

日期对象Date

方法	描述
getDate()	以数值返回天（1-31）
getDay()	以数值获取周名（0-6）
getFullYear()	获取四位的年（yyyy）
getHours()	获取小时（0-23）
getMilliseconds()	获取毫秒（0-999）
getMinutes()	获取分（0-59）
getMonth()	获取月（0-11）
getSeconds()	获取秒（0-59）
getTime()	获取时间（从 1970 年 1 月 1 日至今

<script>
var date = new Date();
console.log(date.getFullYear());
console.log(date.getMonth()+1);
console.log(date.getDate());
console.log(date.getDay());
console.log(date.getHours());
console.log(date.getMinutes());
console.log(date.getSeconds());
console.log(date.getTime());
</script>

BOM、DOM 浏览器对象模型（Browser Object Model (BOM)）

Window 对象

所有浏览器都支持 window 对象。它代表浏览器的窗口。

所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至（HTML DOM 的）document 对象也是 window 对象属性

Window 对象属性

对象	描述
closed	返回窗口是否已被关闭。
console	返回窗口的 Console 对象。

document	返回窗口的 Document 对象。
frameElement	返回运行在窗口中的框架。
frames	返回窗口中运行的所有窗口对象。
history	返回窗口的 History 对象。
innerHeight	返回窗口的文档显示区的高度。
innerWidth	返回窗口的文档显示区的宽度。
length	返回当前窗口中 <iframe> 元素的数量。
localStorage	允许在 Web 浏览器中保存键/值对。存储没有过期日期的数据。
location	返回窗口的 Location 对象。
name	设置或返回窗口的名称。
navigator	返回窗口的 Navigator 对象。
opener	返回对创建窗口的窗口的引用。
outerHeight	返回浏览器窗口的高度，包括工具栏/滚动条。
outerWidth	返回浏览器窗口的宽度，包括工具栏/滚动条。
pageXOffset	返回当前文档从窗口左上角（水平）滚动的像素。
pageYOffset	返回当前文档从窗口左上角（垂直）滚动的像素。
parent	返回当前窗口的父窗口。
screen	返回窗口的 Screen 对象。
screenLeft	返回窗口相对于屏幕的水平坐标。
screenTop	返回窗口相对于屏幕的垂直坐标。
screenX	返回窗口相对于屏幕的水平坐标。
screenY	返回窗口相对于屏幕的垂直坐标。
sessionStorage	允许在 Web 浏览器中保存键/值对。存储会话的数据。
scrollX	pageXOffset 的别名。
scrollY	pageYOffset 的别名。
self	返回当前窗口。

top	返回最顶层的浏览器窗口。

Window 对象方法

方法	描述
alert()	显示带有消息和确定按钮的警报框（对话框）。
atob()	解码 base-64 编码的字符串。
blur()	从当前窗口移除焦点。
btoa()	以 base-64 编码字符串。
clearInterval()	清除使用 setInterval() 设置的计时器。
clearTimeout()	清除使用 setTimeout() 设置的计时器。
close()	关闭当前窗口。
confirm()	显示对话框，其中包含消息以及确定和取消按钮。
focus()	将焦点设置到当前窗口。
getComputedStyle()	确定应用到一个文档元素的 CSS 样式。
getSelection()	返回 Selection 对象，表示用户选择的文本范围。
matchMedia()	返回 MediaQueryList 对象，表示指定的 CSS 媒体查询字符串。
moveBy()	相对于其当前位置移动窗口。
moveTo()	将窗口移动到指定位置。
open()	打开新的浏览器窗口。
print()	打印当前窗口的内容。
prompt()	用对话框请求输入一条简单的字符串。
requestAnimationFrame()	请求浏览器在下一次重绘之前调用函数来更新动画。
resizeBy()	按指定像素调整窗口大小。
resizeTo()	将窗口大小调整为指定的宽度和高度。
scroll()	已弃用。此方法已被 scrollTo() 方法取代。
scrollBy()	按指定的像素数滚动文档。
scrollTo()	将文档滚动到指定坐标。
setInterval()	周期性执行指定的代码。
setTimeout()	在经过指定的时间之后执行代码。
stop()	停止加载窗口。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button onclick="open_win()">打开窗口</button>
		<button onclick="close_win()">关闭窗口</button>
		<button onclick="resize_win()">调整窗口</button>
		<button onclick="reload_win()">刷新窗口</button>
		
	</body>
	<script>
		//提示弹窗的用法
		//alert()、consfirm()、prompt()
		
		// if(confirm("你确定要删除所有信息吗？")){
		// 	console.log("你点击了确定按钮！");
		// }else{
		// 	console.log("你点击了取消按钮！");
		// }
		
		// var s = prompt();
		// console.log(s);
		
		//js系统生成一个随机数(1-100),用户猜大小,统计用户用了多少次才对,如果小于五次提示你很棒
		//大于五次，小于10次，提示 还行吧
		//大于10次，提示太笨啦
		/* var data= Math.floor(Math.random() * 100) + 1;
		var count = 0;
		function fun() {
		  var number = parseInt(prompt("请猜一个1到100之间的数字："));
		  if (number < 1 || number > 100) {
		    alert("请输入有效的数字！");
			return;
			}
			count++;
			if(number == data){
				alert("恭喜你，猜对了");
				if(count <= 5){
					alert("你很棒！");
				}else if(count > 5 && count <= 10){
					alert("还行吧！");
				}else{
					alert("你太笨啦！");
				}
			}
			else if(number < data){
				alert("猜小了，请重新猜！");
				fun();
			}else{
				alert("猜大了，请重新猜！");
				fun();
			}

		  }
		  
				fun(); */
				
				
		//window常用的属性
		console.log(window.innerHeight);
		console.log(window.innerWidth);
		console.log(window.outerHeight);
		console.log(window.outerWidth);
	
		//打开窗口
		// function open_win(){
		// 	window.open("https://www.baidu.com");
		// }
		
		// function close_win(){
		// 	window.close();
		// }
		
		//调整窗口 resizeTo()(宽，高)
		//先创建一个新窗口，再调整窗口
		var win;
		function open_win(){
			win = window.open("","",'width = 200,height = 200');
			win.focus();
		}
		

		function resize_win(){
			win.resizeTo(500,500);
			win.focus();
		}
		
		//location对象
		console.log(location.href);
		console.log(location.host);
		console.log(location.hostname);
		console.log(location.pathname);
		console.log(location.protocol);
		
		function reload_win(){
			// location.reload();
			location.assign("https://www.baidu.com");//跳转
		}
		
		
		  
		
		
		
		
	</script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>页面1</p>
		<a href="history2.html">跳转到页面2</a>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<p>页面2</p>
		<button onclick="history_win()">t退回</button>
	</body>
	<script>
		function history_win(){
			history.back();
			// history.go();
			// history.forward();
			// history.length();
		}
	</script>
</html>

文档对象模型（Document Object Model）

文档对象属性和方法

属性 / 方法	描述
all[]	返回对文档中所有 HTML 元素的引用。
activeElement	返回文档中当前获得焦点的元素。
addEventListener()	将事件处理程序附加到文档。
adoptNode()	采用来自另一个文档的节点。
anchors	已弃用。
applets	已弃用。
baseURI	返回文档的绝对基准 URI。
body	设置或返回文档的正文（<body> 元素）。
charset	已弃用。
characterSet	返回文档的字符编码。
close()	关闭之前用 document.open() 打开的输出流。
cookie	返回文档中所有 cookie 的名称/值对。
createAttribute()	创建属性节点。
createComment()	创建带有指定文本的 Comment 节点。
createDocumentFragment()	创建空 DocumentFragment 节点。
createElement()	创建元素节点。
createEvent()	创建新事件。
createTextNode()	创建文本节点。
defaultView	返回与文档关联的窗口对象，若无可用，则返回 null。
designMode	控制整个文档是否应可编辑。
doctype	返回与文档关联的文档类型声明。
documentElement	返回文档的 Document 元素（<html> 元素）。
documentMode	已弃用。
documentURI	设置或返回文档的位置。
domain	返回加载文档的服务器的域名。
domConfig	已弃用。
embeds	返回文档中所有 <embed> 元素的集合。
execCommand()	已弃用。
forms	返回文档中所有 <form> 元素的集合。
getElementById()	返回拥有指定值的 ID 属性的元素。
getElementsByClassName()	返回包含拥有指定类名的所有元素的 HTMLCollection。
getElementsByName()	返回包含拥有指定名称的所有元素的活动 NodeList。
getElementsByTagName()	返回包含拥有指定标签名称的所有元素的 HTMLCollection。
hasFocus()	返回布尔值，指示文档是否获得焦点。
head	返回文档的 <head> 元素。
images	返回文档中所有 <img> 元素的集合。
implementation	返回处理此文档的 DOMImplementation 对象。
importNode()	从另一个文档导入节点。
inputEncoding	已弃用。
lastModified	返回文档最后一次修改的日期和时间。
links	返回文档中所有拥有 href 属性的 <a> 和 <area> 元素的集合。
normalize()	删除空文本节点，并连接相邻节点。
normalizeDocument()	已弃用。
open()	打开 HTML 输出流以收集来自 document.write() 的输出。
querySelector()	返回与文档中指定的 CSS 选择器匹配的第一个元素。
querySelectorAll()	返回包含与文档中指定的 CSS 选择器匹配的所有元素的静态 NodeList。
readyState	返回文档的（加载）状态。
referrer	返回加载当前文档的文档的 URL。
removeEventListener()	从文档中删除事件处理程序（已使用 addEventListener() 方法附加的）。
renameNode()	已弃用。
scripts	返回文档中 <script> 元素的集合。
title	设置或返回文档的标题。
URL	返回 HTML 文档的完整 URL。
write()	将 HTML 表达式或 JavaScript 代码写入文档。
writeln()	与 write() 相同，但在每条语句后添加换行符。

document 文档对象

element 标签对象

attribute 属性对象，操作属性的

event 事件对象

以下属性和方法可用于 HTML 文档：

属性 / 方法描述

write() 将 HTML 表达式或 JavaScript 代码写入文档。

writeln() 与 write() 相同，但在每条语句后添加换行符。

querySelector() 返回与文档中指定的 CSS 选择器匹配的第一个元素。 querySelectorAll() 返回包含与文档中指定的 CSS 选择器匹配的所有元素的静态 NodeList。

getElementById() 返回拥有指定值的 ID 属性的元素。

getElementsByClassName() 返回包含拥有指定类名的所有元素的 HTMLCollection。 getElementsByName() 返回包含拥有指定名称的所有元素的活动 NodeList。 getElementsByTagName() 返回包含拥有指定标签名称的所有元素的 HTMLCollection。 createAttribute() 创建属性节点。

!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="mydiv">
</div>
<div>
</div>
<button onclick="addText()">点击给div添加内容</button>
</body>
<script>
function addText(){
//获取div标签，获取节点的方法
// var divElement = document.querySelector("#mydiv");
// var divElement = document.getElementById("mydiv");
var divElements = document.getElementsByTagName("div");
divElements[0].innerHTML = "给div标签通过js添加内容";
//divElement.innerHTML = "给div标签通过js添加内容";
}
</script>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<span id="fyear"></span>年
<span id="fmonth"></span>月
<span id="fdate"></span>日
<span id="ftime"></span>
</body>
<script>
//获取节点
var fyear = document.querySelector("#fyear");
var fmonth = document.querySelector("#fmonth");
var fdate = document.querySelector("#fdate");
var ftime = document.querySelector("#ftime");
//编写函数
function getTime(){
var date = new Date();
//给节点添加内容
fyear.innerHTML = date.getFullYear();
fmonth.innerHTML = date.getMonth()+1;
fdate.innerHTML = date.getDate();
var second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date
ftime.innerHTML = date.getHours() + ":" + date.getMinutes()
+ ":" + second ;
//重复调用自身，定义固定周期时间
setInterval(getTime,1000);
}
// 调用函数
getTime();
</script>
</html>

setTimeout() 调用指定函数一次

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#mydiv{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
}
</style>
</head>
<script>
var mydiv;
window.onload = function(){
mydiv = document.querySelector("#mydiv");
}
//定义一个函数，可以控制div块的移动
function move(){
console.log(mydiv);
//通过函数控制块的样式(定位样式left、top值)，让块移动起来
mydiv.style.left = parseInt(mydiv.style.left) + 10 + "px";
mydiv.style.top = parseInt(mydiv.style.top) + 10 + "px";
setTimeout(move,100);
}
</script>
<body>
<button onclick="move()">移动方块</button>
<div id="mydiv" style="top: 50px;left: 50px;">
</div>
</body>
</html>

创建节点，是document的方法

createElement() 创建元素节点。

createTextNode() 创建文本节点。

添加、删除是Element元素的方法

appendChild() 向元素添加（附加）新的子节点。

insertBefore(已有节点，新节点) 在现有子节点之前插入新子节点。

replaceChild() 替换元素中的子节点。

removeChild() 从元素中移除子节点。 remove 移除自身节点

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="mydiv">
<span></span>
</div>
</body>
<script>
//通过创建节点，给div标签中加入一个新内容
var pEle = document.createElement("p");
var textEle = document.createTextNode("创建的文本内容");
//通过节点，调用方法，完成添加
pEle.appendChild(textEle);
pEle.style.color = "red";
//获取div
var divEle = document.querySelector("#mydiv");
// divEle.appendChild(pEle);
var spanEle = document.querySelector("span");
divEle.insertBefore(pEle,spanEle);
// divEle.removeChild(spanEle);
divEle.remove();
</script>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
td{
border: 1px solid #000;
padding: 5px;
}
table{
border: 1px solid #000;
border-collapse: collapse;
}
</style>
</head>
<body>
<table id="mytable"></table>
</body>
<script>
//通过创建添加节点，给表格加上行和列。3行4列
//获取table 
var tableEle = document.querySelector("#mytable");
for (var i = 0; i < 5; i++) {
var trEle = document.createElement("tr");
for (var j = 0; j < 4; j++) {
var tdEle = document.createElement("td");
var text = document.createTextNode("123");
tdEle.appendChild(text);
trEle.appendChild(tdEle);
}
tableEle.appendChild(trEle);
if(i % 2 == 0){
trEle.setAttribute("bgcolor","#bad1ec")
}
}
</script>

Element(节点)对象相关

offsetHeight 返回元素的高度，包括内边距、边框和滚动条。

offsetWidth 返回元素的宽度，包括内边距、边框和滚动条。

给节点添加内容

innerHTML 设置或返回元素的内容。能识别标签

innerText 设置或返回节点及其后代的文本内容。

修改节点属性值

节点.属性名 = 新值直接修改节点的属性

style 设置或返回元素 style 属性的值。

className 设置或返回元素的 class 属性值。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button onclick="changeImg()">点击换图</button>
<img src="img/1.jpg" width="200px" alt="">
</body>
<script>
function changeImg(){
document.querySelector("img").src = "img/2.jpg";
}
</script>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="mydiv">文本内容</div>
<button onclick="hidediv()">点击隐藏</button>
<button onclick="showdiv()">点击显示</button>
</body>
<script>
function hidediv(){
document.querySelector("#mydiv").style.display = "none";
}
function showdiv(){
document.querySelector("#mydiv").style.display = "block";
document.querySelector("#mydiv").style.color = "red";
document.querySelector("#mydiv").style.background = "orange";
}
</script>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background-color: blue;
}
.myclass{
background-color: orange;
color:#fff;
}
</style>
</head>
<body>
<div>文本内容</div>
<button onclick="changeClass()">改变样式</button>
</body>
<script>
function changeClass(){
document.querySelector("div").className = "myclass";
}
</script>
</html>

getAttribute() 返回元素属性的值。

setAttribute() 设置或更改属性的值。

hasAttribute() 如果元素拥有给定属性，则返回 true。

removeAttribute() 从元素中移除属性。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="img/1.jpg" width="100px" alt="">
<button onclick="updateImg()">点击更改</button>
</body>
<script>
// var s = document.querySelector("img").getAttribute("src");
// console.log(s);
function updateImg(){
document.querySelector("img").setAttribute("src","img/2.jpg");
}
</script>
</html>

children 返回元素的子元素的 HTMLCollection。

childNodes 返回元素子节点的 NodeList。

nextSibling 返回位于相同节点树层级的下一个节点。

nextElementSibling 返回位于相同节点树层级的下一个元素。

previousSibling 返回位于相同节点树层级的上一个节点。

previousElementSibling 返回位于相同节点树层级的上一个元素。

parentNode 返回元素的父节点。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="mdiv">
<span>span标签</span>
<p>p标签</p>
<a href="">a标签</a>
</div>
</body>
<script>
var mdiv = document.querySelector("#mdiv");
var childEle = mdiv.childNodes;
console.log(childEle);
var childrenEle = mdiv.children;
console.log(childrenEle[0]);
var pEle = document.querySelector("p");
var ele = pEle.nextElementSibling;
console.log(ele);
var ele1 = pEle.previousElementSibling;
console.log(ele1);
var ele2 = pEle.parentNode;
console.log(ele2);
</script>
</html>

删除一行

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1px" width = "80%" align = "center">
<tr>
<td>1</td>
<td>2</td>
<td><button onclick="del(this)">删除</button></td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td><button onclick="del(this)">删除</button></td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td><button onclick="del(this)">删除</button></td>
</tr>
</table>
</body>
<script>
function del(thisbutton){
var trele = thisbutton.parentNode.parentNode;
// trele.remove();
var tableEle = trele.parentNode;
tableEle.removeChild(trele);
}
</script>
</html>

事件

blur 当元素失去焦点时发生此事件。

focus 在元素获得焦点时发生此事件。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.text{
color: green;
}
</style>
</head>
<body>
密码:<input id="pwd" onblur="checkpwd()" onfocus="focusTest()" type=
<span class="text"></span>
<br>
重复密码:<input id="repwd" onblur="blurTest()" type="text">
<span id="info" style="color: black;"></span>
</body>
<script>
//失去焦点
function blurTest(){
var pwdValue = document.querySelector("#pwd").value;
var repwdValue = document.querySelector("#repwd").value;
var info = document.querySelector("#info");
if(pwdValue === repwdValue){
info.innerHTML = "两次密码相同";
info.style.color = "green";
}else{
info.innerHTML = "两次密码输入不一致";
info.style.color = "red";
}
}
function checkpwd(){
var pwdValue = document.querySelector("#pwd").value;
var reg = /^[A-Z]\w{5,17}/
var spanEle = document.querySelector(".text");
if(reg.test(pwdValue)){
spanEle.innerHTML = "密码符合规范";
spanEle.style.color = "green";
}else{
spanEle.innerHTML = "密码不符合规范";
spanEle.style.color = "red";
}
}
//获得焦点
function focusTest()(
var spanEle = document.querySelector(".text");
spanEle.innerHTML = "请输入6-18位的密码";
}
</script>

窗口事件

load、resize、scroll

窗口加载就执行函数中的内容，如果某些函数不被直接调用，又想这个函数执行，可以放到这里

window.onload = function(){

}

risize ：窗口变化触发的事件

scroll ：窗口滚动触发的事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html,body{
width: 100%;
height: 100%;
}
</style>
</head>
<body onresize="winResize()">
</body>
<script>
function winResize(){
winWidth = document.body.clientWidth;
winHeight = document.body.clientHeight;
alert(winWidth + "-----" + winHeight )
}
</script>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html,body{
height: 100%;
}
</style>
</head>
<body onscroll="scrollHtml()">
<div style="height: 300%;">
<span id="test" style="position: relative;top: 0px;">
滚动了0px
</span>
</div>
</body>
<script>
function scrollHtml(){
var scrollheight = document.documentElement.scrollTop; //滚动的距离
var test = document.querySelector("#test"); //获取span节点
test.innerHTML = "滚动了"+ scrollheight +"px"
test.style.top = scrollheight + "px";
}
</script>
</html>

click 当用户单击元素时发生此事件。

dblclick 当用户双击元素时发生此事件。

mousedown 当用户在元素上按下鼠标按钮时，发生此事件。

mouseenter 当指针移动到元素上时，发生此事件。

mouseleave 当指针从元素上移出时，发生此事件。

mousemove 当指针在元素上方移动时，发生此事件。

mouseout 当用户将鼠标指针移出元素或其中的子元素时，发生此事件。

mouseover 当指针移动到元素或其中的子元素上时，发生此事件。

mouseup 当用户在元素上释放鼠标按钮时，发生此事件。

clientX 返回触发鼠标事件时，鼠标指针相对于当前窗口的水平坐标。

clientY 返回触发鼠标事件时，鼠标指针相对于当前窗口的垂直坐标。

点击获取鼠标位置

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html,body{
width: 100%;
height: 100%;
}
</style>
</head>
<body onclick="dianji(event)">
</body>
<script>
function dianji(e){
dianX = e.clientX;
dianY = e.clientY;
alert(dianX + "---" + dianY);
}
</script>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html,body{
width:100%;
height: 100%;
}
#mdiv{
width: 100px;
height: 100px;
background-color: aqua;
position: absolute;
}
</style>
</head>
<body onmousemove="move(event)">
<div id="mdiv" onmousedown="down()" onmouseup="up()"
style="top: 100px; left: 100px;">
</div>
</body>
<script>
var mdiv;
var flag = false;
function down(){
mdiv = document.querySelector("#mdiv");
flag = true; //标记鼠标已经按下了
}
//移动函数
function move(e){
//如果鼠标按下了，就可以移动方块了

keydown 当用户正在按下键时，发生此事件。不松开按键触发

keypress 当用户按下键时，发生此事件。

keyup 当用户松开键时，发生此事件。

使用上下左右，移动方块

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="divbox"></div>
</body>
<script>
var divbox = document.querySelector("#divbox");
//给节点添加样式
divbox.style.position = "absolute";
divbox.style.width = "100px";
divbox.style.height = "100px";
divbox.style.backgroundColor = "blue";
document.onkeydown = keyDown; //添加事件
function keyDown(event){
var event = event||window.event; //标准化事件对象
switch(event.keyCode){
case 37: // 左移
divbox.style.left = divbox.offsetLeft - 10 + "px";
break;
case 38: //上移
divbox.style.top = divbox.offsetTop - 10 + "px";
break;
case 39: //右移
divbox.style.left = divbox.offsetLeft + 10 + "px";
break;
case 40: //下移
divbox.style.top = divbox.offsetTop + 10 + "px";
break;
}
return false;
}

放大镜效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>放大镜示例</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			img{
				display: block;
			}
			.header{
				height: 100px;
			}
			.center{
				width: 800px;
				margin: 0 auto;
			}
			.box{
				position: relative;
				width: 400px;
			}
			.thumb{
				position: relative;
				width: 400px;
				height: 400px;
			}
			.thumb img{
				width: 100%;
				width: 100%;
			}
			.thumb .move{
				position: absolute;
				top: 0px;
				left: 0px;
				display: none;
				width: 200px;
				height: 200px;
				background-color: rgba(0, 0, 0, 0.2);
			}
			/* 放大区域样式 */
			.scale{
				display: none;
				position: absolute;
				left: 420px;
				top: 0px;
				width: 400px;
				height: 400px;
				overflow: hidden;
			}
			.scale img{
				position: absolute;
				top: 0px;
				left: 0px;
			}
			.thumb:hover .move{
				display: block;
			}
			.thumb:hover+.scale{
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="header"></div>
			<div class="center">
				<div class="box">
					<div class="thumb">
						<img src="img/lianyiqunSmall1.jpg" alt="">
						<div class="move"></div>
					</div>
				<div class="scale">
				<img src="img/lianyiqunBig1.jpg" alt="">
				</div>
			</div>
		</div>
	</body>
	<script>
		var fangdajing = function(){
		//1,获取小图片的节点
		var thumbElem = document.querySelector(".thumb");
		//获取图片距离左边和顶部的距离
		var thumbPosX = Math.round(thumbElem.getBoundingClientRect().left);
		var thumbPosY = Math.round(thumbElem.getBoundingClientRect().top);
		//获取移动的小块元素信息
		var moveElem = document.querySelector(".move");
		//给小图上的移动小块绑定一个移动事件
		thumbElem.onmousemove = function(e){
		//获取鼠标移动时候的宽和高
		var moveElemWidth = moveElem.offsetWidth;
		var moveEleHeight = moveElem.offsetHeight;
		//计算移动元素，距离图片左边和顶部的距离
		//鼠标中心距离小图左边的值
		var x = e.pageX - thumbPosX;
		var y = e.pageY - thumbPosY;
		moveElem.style.left = x - moveElemWidth/2 + "px";
		moveElem.style.top = y - moveEleHeight/2 + "px";
		//移动区域超过小图区域的处理
		//左右超过
		if( parseInt(moveElem.style.left )< 0){
		moveElem.style.left = 0;
		}else if(parseInt(moveElem.style.left) >
		(thumbElem.offsetWidth -moveElemWidth)){
		moveElem.style.left = thumbElem.offsetWidth -moveElemWidth + "px";
		}
		//上下超过
		if( parseInt(moveElem.style.top )< 0){
		moveElem.style.top = 0;
		}else if(parseInt(moveElem.style.top) >
		(thumbElem.offsetHeight -moveEleHeight)){
		moveElem.style.top = thumbElem.offsetHeight -moveEleHeight + "px";
		}
		//放大的处理
		//计算倍数
		var sca = thumbElem.offsetWidth / moveElemWidth;
		var scaleElem = document.querySelector(".scale");
		var img = scaleElem.querySelector("img");
		console.log(img);
		img.style.left = -(sca * parseInt(moveElem.style.left)) + "px"
		img.style.top = -(sca * parseInt(moveElem.style.top)) + "px";
		}
	}
		fangdajing();
	</script>
</html>

落日与晚风，

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript (Web)

JavaScript是一种高级编程语言，主要用于前端开发，为网页和Web应用程序增加交互性和动态效果。它支持面向对象编程和函数式编程，能够处理事件、操作DOM元素、发送网络请求等任务。JavaScript拥有丰富的内置对象和方法，用于处理日期、字符串、数组等数据类型。它与HTML和CSS紧密结合，可以通过修改DOM元素的属性和样式来实现网页的动态效果。此外，JavaScript还可在服务器端运行，使用Node.js框架构建高性能的网络应用和服务器。广泛的开源库和框架，如React、Angular和Vue等，
复制链接

扫一扫