前端-javaScript

发表于 阅读次数：
本文字数： 12k 阅读时长 ≈ 11 分钟

微信截图_20211111222958

javaScript

一门世界上最流行的脚本语言

js简单使用

内部标签

1
2
3
<script>
			alert("Hello javaScript");
</script>

外部引入

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

浏览器调试

浏览器F12简介

Elements 页面元素

Console 控制台、调js的

Sources 代码结构、调试Debug用的

Network 抓包用的、一些请求

Application 里面存有Cookie

js基本语法

数值类型（Number）

整数 123

浮点数 123.1

科学计数法 1.23e3

not a Number 不是个数 NaN

无限大 Infinity

布尔值 true flase

逻辑与 &&

逻辑或 ||

逻辑非 !

赋值符号 =

等于符号 == 类型不一样 值一样 也会判断为true

绝对等于符号 ===

判断NaN的方法 isNaN(NaN)

空类型 null

未定义 undefined

1
new Array(1,2,3,4,'wangyibo',"xiaobo",true,null);

全局变量 i = 1

局部变量 let i = 1

字符串

双引号字符串 var name = “小博”;

单引号字符串 var sex = ‘男’;

漂浮（``）定义字符串 

1
2
3
4
5
6
7
var name = 'xiaobo';

var age = 21;
// 模板字符串
var msg = `${name}今年${age}了`;

console.log(msg);

字符串大写转换 console.log(name.toUpperCase());

字符串小写转换 console.log(name.toLocaleLowerCase());

字符串长度 console.log(name.length);

字符串索引 console.log(name.indexOf(‘o’));

字符串截取 console.log(name.substring(1,3));

注意

NaN与所有数值都不相等、包括它自己本身

只能通过isNaN(Nan)来判断这个数值是否是NaN

尽量避免浮点数进行运算、容易精度损失

NaN数据类型为 number

null 的数据类型为 object

检查是否是此类型的对象、constructor获取到构造函数,toString() 将类型转换为字符串 indexOf检索参数中的字符串,如果有信息 大于 -1 返回true 反之 flase

1
console.log(arr.constructor.toString().indexOf("Array") > -1) ;

数组

数组

1
var arr = [1,2,3,4,'wangyibo',"xiaobo",true,null];

length 数组的长度

indexOf 通过元素获得索引

slice() 截取Array的一部分 返回一个新数组

push() 添加一个元素、放入数组尾部

pop() 从尾部弹出一个元素

unshift() 添加一个元素、放在数组头部

shift() 弹出头部的一个元素

sort() 排序

reverse() 元素反转

concat() 添加元素、返回一个新的数组、原数组并没有改变

join() 使用特点的符号将字符串拼接

对象

对象

1
2
3
4
5
6
7
var person = {
	id: 1,
	name: "xiaobo",
	age: 21,
	sex: "男",
	student: [2,"wangyibo",21,"男"]
}

属性赋值 person.name = “wangyibo”;

动态的直接删除属性 delete person.name;

动态的直接添加属性 

1
person.sex = "男"

判断属性值是否在这个对象中 ‘属性’ in person

1
name in person

判断一个属性是否是这个对象自身拥有的 person.hasOwnProperty(“属性”)

数据类型总结

基本数据类型

  • string

  • number

  • boolean

  • object

  • function

  • symbol

对象类型

  • Object

  • Data

  • Array

两种特殊类型

  • undefined
  • null

集合

map集合

1
2
3
4
5
6
7
8
9
10
11
12
13
var map = new Map([[1,"xiaobo"],[2,"wangyibo"],[3,"wangyangnan"]]);
			
			//查看全部
			console.log(map);
			
			//查看map中一个元素
			console.log(map.get(1));
			
			// 删除map中一个元素
			console.log(map.delete(2));
			
			// 添加或修改一个元素
			console.log(map.set(3,"xiaobo"));

set集合

1
2
3
4
5
6
7
8
9
10
11
// 创建一个set集合 set集合无序且不重复
			var set = new Set([1,2,3,4,5]);
			
			// 向set集合中添加一个元素
			set.add(6);
			
			// 删除set集合中的一个元素
			set.delete(6);
			
			// 查看set集合中是否包含当前元素
			set.has(1);

for of 循环遍历

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//定义数组
			var arr = [1,2,3,4];
			
			// for of循环遍历打印数组信息
			for (var arrays of arr){
				console.log(arrays);
			}
			
			// 定义一个map集合
			var map = new Map([[1,"xiaobo"],[2,"wangyibo"],[3,"wangyangnan"]]);
			
			// for of循环遍历打印数组信息
			for(var maps of map){
				console.log(maps);
			}
			
			// 定义一个set集合
			var set = new Set([1,2,3,4,5]);
			
			// for of循环遍历打印数组信息 
			for(var sets of set){
				console.log(sets);
			}

函数

函数定义形式

1
2
3
4
5
6
7
8
9
function abs(x){
	
	if(x > 0){
		return x;
	}else{
		return -x;
	}
	
}
1
2
3
4
5
6
7
8
9
var abs = function(x){

	if(x > 0){
		return x;
	}else{
		return -x;
	}
	
}

注意

函数参数随便传、但只根据实际参数个数进行自动校验

一旦执行到return 函数结束

如果没有return 结果 返回undefined

异常处理

1
2
3
4
// 异常
	if(typeof x !== "number" ){
		throw "not a number";
	}

arguments

代表传进来的所有参数

1
2
3
for(var i = 0; i < arguments.length; i++){
		console.log(arguments[i]);
	}

rest

除了参数之外的可变形参

1
2
3
4
5
6
7
8
9
10
// rest可变形参
function rests(a,b,...rest){
	
	console.log("a>>" + a);
	
	console.log("b>>" + b);
	
	console.log(rest);
	
}

函数作用域

函数体中声明、则函数体外不可以使用 （闭包可以使用）

不同函数中、变量不冲突

内部函数可以访问外部函数的成员、反之外部函数不能访问内部函数的成员

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 内部函数和内部函数变量范围问题
function xiaobo(){
	var x = 1;
	
	function wangyibo(){
		var y = x + 1;
		console.log(y);
	}
	
	wangyibo();
	
	var z = y + 1;
	
	console.log(z);
	
}

变量自动提前定义、但不会赋值、所以书写规范最好在函数初把用到的所有变量都定义咯

1
2
3
4
5
6
7
8
9
10
11
function q(){
	
	var x = '1';
	
	var z = x + y;
	
	console.log(z);
	
	var y = 1;
	
}

全局作用域

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function w(){
	
	// 唯一全局变量
	var xiaobo = {};
	
	//全局变量定义
	xiaobo.name = "wangyibo";
	
	xiaobo.birth = "2001";
	
	xiaobo.sex = "男";
	
	console.log(xiaobo.name + xiaobo.birth +xiaobo.sex);
	
	xiaobo.add = function(a, b){
		return a + b;
	}
	
	console.log(xiaobo.add());
}

局部作用域

let ES6 新特性

1
2
3
4
5
6
7
8
9
10
function e(){
	
	for (var i = 0; i < 100; i++) {
		
		console.log(i);
	}
	
	console.log(i + 1); //101
	
}

console.log(i + 1); 101

1
2
3
4
5
6
7
8
9
function ee(){
	
	for(let i = 0; i < 100; i++){
		console.log(i);
	}
	
	console.log(i + 1);// i is not defined
	
}

console.log(i + 1); i is not defined

常量 const

1
const PI = "3.1415926";

apply

js中控制this的指向对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
getAge().apply(xiaobo,[]);

function rr(){
	
	function getAge(){
		var now = new Date().getFullYear();
		return now - this.birth;
	}
	
	var xiaobo = {
		name: "wangyibo",
		birth: 2001,
		age: getAge
	}
	console.log(xiaobo.age());
}

Date

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function s(){
	
	var now = new Date();
	
	// 年
	console.log(now.getFullYear() + "年");
	
	// 月
	console.log(now.getMonth() + "月");
	
	// 日
	console.log(now.getDate() + "日");
	
	// 星期几
	console.log("星期" + now.getDay());
	
	// 时
	console.log(now.getHours() + "时");
	
	// 分
	console.log(now.getMinutes() + "分");
	
	// 秒
	console.log(now.getSeconds() + "秒");
	
	// 时间戳 全世界统一
	console.log("时间戳" + now.getTime());
}

JSON

1
2
3
4
5
6
// js的JSON
	var person = {
		"name":"xiaobo",
		"birth":2001,
		"sex":"男",
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function jsons(){
	
	// js的对象
	var user = {
		name: "xiaobo",
		birth: 2001,
		sex: "男"
	}
	
	// js的JSON
	var person = {
		"name":"xiaobo",
		"birth":2001,
		"sex":"男",
	}
	
	
	// 对象转成JSON
	var jsonUser = JSON.stringify(user);
	
	console.log(jsonUser);
	
	// JSON 转成对象
	var USER = JSON.parse(jsonUser);
	
	console.log(USER);
	
}

JSON.stringify 对象转成JSON

JSON.parse JSON 转成对象

proto

指定一个原型指向、类似java中的继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var student = {
		name: "wangyibo",
		sex: "男",
		play: function(){
			console.log(this.name + this.sex + "玩");
		}
	}
	
	var xiaobo = {
		name: "xiaobo"
	}
	
	// 设置原型、指定一个原型
	xiaobo.__proto__ = student;
	
	var person = {
		name: "xiaobo",
		sex: "男",
		e: function(){
			console.log(this.name + "这个人怕不是有什么大病");
		}
	}
	
	// 设置原型、指定一个原型
	xiaobo.__proto__ = person;

class 原型链

1
2
3
4
5
6
7
8
9
10
11
12
class Student{
	
	constructor(name) {
	    this.name = name;
	}
	
	hello(){
		console.log("hello  " + this.name);
	}
}

	var wang = new Student("xiaobo");

操作BOM对象

window

window 代表浏览器窗口

1
2
3
4
5
//window父对象 浏览器窗口相关信息
console.log(window.innerHeight);
console.log(window.innerWidth);
console.log(window.outerHeight);
console.log(window.outerWidth);

navigator 封装了浏览器信息

screen

screen 代表全屏幕属性

location

location 当前页面的URL信息

document

document 代表当前的页面文档树

docoument.title 获取标题

document.getElementById("demo1") 获取到id标记的元素

document.getElementsByTagName("div") 获取到标签元素

document.getElementsByClassName("demo2") 获取到class标记的标签元素

document.cookie 获取到当前的cookie

history（不建议使用）

历史记录

history.back() 后退

history.forward() 前进

操作DOM对象

DOM：文档对象模型

浏览器网页是一个DOM 树形结构

要操作一个DOM节点、 要先获取这个DOM节点

更新：更新DOM节点

删除：删除一个DOM节点

添加：添加一个节点

遍历DOM节点：得到DOM节点

获得DMO节点

1
2
3
4
5
document.getElementsByTagName("div");
			
			document.getElementById("demo1");
		
			document.getElementsByClassName("demo2");

更新DOM节点

document.getElementById("id").innerHTML = ""; 解析超文本标签

document.getElementById("id").innerText = ""; 修改文本的值

1
2
3
4
var d = document.getElementById("demo1");
		
			d.style.color = "red"
			d.style.lineHeight = "100px";

删除节点

现获取父节点、在通过父节点删除自己
id名.parentElement 获取到父类

父类对象.removeChild(要删除的对象) 删除节点

父类对象.removeChild(父类对象.children[要删除的下标]) 删除多个节点

删除多个节点时、要注意children是变化的

插入节点

appendChild 后面追加节点

1
2
3
4
5
var js = document.getElementById("js");

var demo = document.getElementsByClassName("demo2");

demo.appendChild(js);

document.createElement("标签名"); 创建一个标签

1
2
3
4
5
var newp = document.createElement("p");
		
		newp.id = "newP";
		
		newp.innerText = "xiaobo";
1
2
3
var news = document.createElement("script");
		
		news.setAttribute("type","application/javascript");

表单操作（验证）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<form action="#" method="post">
			
			<p>
				用户名：
				<span><input type="text" id="username" placeholder="请输入账号"></span>
			</p>
			
			<p>
				密码：
				<span><input type="password" id="password" placeholder="请输入密码"></span>
			</p>

			<p>
				<span>性别：</span>
				<input type="radio" name="sex" id="boy" value="nan"><label for="boy">男</label>
				<input type="radio" name="sex" id="giri" value="nv"><label for="giri">女</label>
			</p>
			
		</form>
		<script>
			var boy = document.getElementById("boy");
				giri = document.getElementById("giri");
		</script>

document.getElementById("boy").value 拿到值

document.getElementById("boy").checked 判断是拿到值

javaScript写在html中要先加载页面信息、在加载javaScript、否则拿不到数据、就是先些信息、才能拿到信息

表单提交

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单校验</title>
	<script src="js/md5.js"></script>	
	</head>
	<body>
		
		<form action="#" onsubmit="return s()">
			
			<p>
				用户名：
				<span><input type="text" id="username" placeholder="请输入账号"></span>
			</p>
			
			<p>
				密码：
				<span>
					<input type="password" id="password" placeholder="请输入密码">
					<input type="hidden" id="md5_password" name="password" />
				</span>
			</p>

			<p>
				<span>性别：</span>
				<input type="radio" name="sex" id="boy" value="nan"><label for="boy">男</label>
				<input type="radio" name="sex" id="giri" value="nv"><label for="giri">女</label>
			</p>
			<p>
				<input type="submit" value="登录" />&nbsp;&nbsp;
				<input type="reset" value="重置" />
			</p>
		</form>
		<script>
			function s(){
				
				var boy = document.getElementById("boy");
				var	giri = document.getElementById("giri");
				var	username = document.getElementById("username");
			
				var password = document.getElementById("md5_password");
			
				console.log(password.value);
				password.value = md5(password.value);
				console.log(password.value);
				
				return true;
			}
		</script>
	</body>
</html>

<form action="#" onsubmit="return s()"></form> 表单绑定提交事件

jquery

js的第三方库

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<head>
		<meta charset="utf-8">
		<title>jquery</title>
		<script src="lib/jquery-3.6.0.js" type="text/javascript"></script>
	</head>
	<body>
		
		<a href="" id="a1">点我</a>
		
		<script>
			$("#a1").click(function(){
				alert("点我了");
			});
			
		</script>
	</body>

jquery选择器

css里面的选择器都可以用

语法

1
2
3
 $(选择器).函数(function(){
  
});

常用的

id选择器

1
2
3
$("#a1").click(function(){
				alert("点我了");
			});

class选择器

1
2
3
$(".a1").click(function(){
				alert("点我了");
			});

标签选择器

1
2
3
$("a").click(function(){
				alert("点我了");
			});

jquery文档

https://jquery.cuishifeng.cn/

jquery事件

鼠标事件

mouse***()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<head>
		<meta charset="utf-8">
		<title>jquery</title>
		<style>
			#divMouse{
				width: 500px;
				height: 500px;
				border: 1px solid red;
			}
		</style>
		<script src="lib/jquery-3.6.0.js" type="text/javascript"></script>
	</head>
	<body>
		鼠标：<span id="mouseMove"></span>
		
		<div id="divMouse">
			
		</div>
		
		<script>
			$(function(){
				$("#divMouse").mousemove(function(e){
					$("#mouseMove").text("x:" + e.pageX + "y:" + e.pageY);
				});
			});
			
		</script>
	</body>

jquery操作DOM

节点文本操作

$("选择器").text() 获取值

$("选择器").text(设置值) 设置值

$("选择器").html() 获得值

$("选择器").html(<h1>小博</h1>) 设置值

css操作

$("选择器").css({"color","red"}) 设置css样式

正确的开始、微小的长进、然后持续、嘿、我是小博、带你一起看我目之所及的世界……

-------------本文结束 感谢您的阅读-------------

本文标题:前端-javaScript

文章作者:小博

发布时间:2021年11月11日 - 22:33

最后更新:2021年11月11日 - 22:35

原始链接:https://codexiaobo.github.io/posts/2118119182/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。