JavaScript

JavaScript
// 弱类型语言
//严格区分大小写
var num =1;
alert(num);
// 123//整数123
// 123.1//浮点数123.1
// 1.123e3//科学计数法
// -99//负数
// NaN //not a number
// Infinity // 表示无限大

= 1，“1”
== 等于（类型不一样，值一样，也会判断为true）
=== 绝对等于（类型一样，值一样，结果为true）

这是一个JS的缺陷，坚持不要使用 == 比较
须知：

NaN === NaN，这个与所有的数值都不相等，包括自己
只能通过isNaN（NaN）来判断这个数是否是NaN
浮点数问题

console.log((1/3) === (1-2/3))
1
1
2
尽量避免使用浮点数进行运算，存在精度问题！

Math.abs(1/3-(1-2/3))<0.00000001
1
null 和 undefined

null 空
undefined 未定义
数组
Java的数组必须是相同类型的对象~，JS中不需要这样
数组
Java的数组必须是相同类型的对象~，JS中不需要这样

//保证代码的可读性，尽量使用[]
var arr = [1,2,3,4,5,'hello',null,true];
//第二种定义方法
new Array(1,2,3,4,5,'hello');
1
2
3
4
取数字下标：如果越界了，就会报undefined

undefined

对象
对象是大括号，数组是中括号

每个属性之间使用逗号隔开，最后一个属性不需要逗号

// Person person = new Person(1,2,3,4,5);

var person = {
name:‘Tom’,
age:3,
tags:[‘js’,‘java’,‘web’,’…’]
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

<script>
'use strict';
//全局变量
let i=1
//ES6 let
</script>
</head>
<body>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
3、数据类型
3.1、字符串
1、正常字符串我们使用单引号，或者双引号包裹
2、注意转义字符 \

\'
\n
\t
\u4e2d \u##### Unicode字符
\x41 Ascall字符
1
2
3
4
5
5、字符串长度
str.length
6、字符串的可变性，不可变
7、大小写转换

//注意，这里是方法，不是属性了
student.toUpperCase();
student.toLowerCase();

8、student.indexof(‘t’)
9、substring，从0开始

[)
student.substring(1)//从第一个字符串截取到最后一个字符串
student.substring(1,3)//[1,3)

3.2、数组
Array可以包含任意的数据类型

var arr = [1,2,3,4,5,6];//通过下标取值和赋值

1、长度

arr.length
2、indexOf，通过元素获得下标索引

arr.indexOf(2)
1
1
2
字符串的"1"和数字 1 是不同的

** 3、slice（）**截取Array的一部分，返回的一个新数组，类似于String中substring
4、push()，pop()尾部

push：压入到尾部
pop：弹出尾部的一个元素
1
2
5、unshift(),shift() 头部

unshift：压入到头部
shift：弹出头部的一个元素
1
2
6、排序sort()

(3)["B","C","A"]
arr.sort()
(3)["A","B","C"]
1
2
3
7、元素反转reverse()

(3)["A","B","C"]
arr.reverse()
(3)["C","B","A"]
1
2
3
8、concat()

9、连接符join
打印拼接数组，使用特定的字符串连接

10、多维数组

数组：存储数据（如何存，如何取，方法都可以自己实现！）

3.3、对象
若干个键值对

var 对象名 = {
属性名：属性值，
属性名：属性值，
属性名：属性值
}
//定义了一个person对象，它有四个属性
var person = {
name:"Tom",
age:3,
email:"123456798@QQ.com",
score:66
}
1
2
3
4
5
6
7
8
9
10
11
12
Js中对象，{…}表示一个对象，建制对描述属性xxx：xxx，多个属性之间用逗号隔开，最后一个属性不加逗号！
JavaScript中的所有的键都是字符串，值是任意对象！
1、对象赋值

2、使用一个不存在的对象属性，不会报错！undefined

3、动态的删减属性，通过delete删除对象的属性

4、动态的添加，直接给新的属性添加值即可

5、判断属性值是否在这个对象中！xxx in xxx
在这里插入图片描述

6、判断一个属性是否是这个对象自身拥有的 hasOwnProperty()

forEach循环

ES5.1特性

for …in-------下标

var age =[1,2,3,4,56,67,8,8,9,9];
age.forEach(function (value) {
console.log(value)
})
num是索引
for (var num in age ){
if(num.hasOwnProperty(num)){
console.log(age[num])
}
}

3.5、Map和Set
// var map = new Map([['tom,100'],['jack',90],['haha',30]]);
// var name=map.get('tom');
// console.log(name);
//map.add(2);
//map.add(2);
1
2
3
4
5
set.delete(2)
var set =new Set([1,2,3,1,1,1]); //set可以去重
set.add(2);
set.delete(2)

3.6、iterator
es6新特性

作业：使用iterator来遍历迭代我们Map，Set！
遍历数组

arr.name="1231";//早期漏洞
//for in 增加属性length不变

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
4、函数
4.1、定义函数

定义方式一

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

1
2
3
4
5
6
7
8
9
一旦执行到return代表函数结束，返回结果！
如果没有执行return，函数执行完也会返回结果，结果就是undefined

定义方式二

var abs =function (x) {
if(x>=0){
return x;
}
else{
return -x;
}
}
1
2
3
4
5
6
7
8
function(x){…}这是一个匿名函数。但是可以吧结果赋值给abs，通过abs就可以调用函数！
方式一和方式二等价！

调用函数

abs(10)//10
abs(-10) //10
1
2
参数问题：javaScript可以传任意个参数，也可以不传递参数~
参数进来是否存在问题？
假设不存在参数，如何规避？

arguments

arguments 是一个JS免费赠送的关键字；
代表，传递进来的所有参数，是一个数组！

问题：arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作。需要排除已有参数~

rest
以前：

ES6引入的新特性，获取除了已经定义的参数之外的所有参数~…

rest参数只能写在最后面，必须用…标识。

3、变量的作用域
变量的作用域

function a(){
var x = 1;
//内部函数可以访问外部函数的成员，反之不行
function a1(){
var y = x +1; //2
}
//外部访问了内部函数的变量，会不行
var z = y+1; //报错
}
1
2
3
4
5
6
7
8
9
假设在JavaScript中，函数查找变量从自身函数开始~，由“内”向“外”查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。

变量的一般使用
一般都先定义，后调用

提升变量的作用域

结果：x undefined

这个是在javascript建立之初就存在的特性。养成规范：所有的变量定义都放在函数的头部，不要乱放，便于代码维护；

说明：js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值；
function zhang(){
var x,y,z;

//之后再赋值调用
}
1
2
3
4
5
6
7
全局对象window
// 默认所有全局变量都绑定在window下
alert() 这个函数本身也是一个window的变量；

var x ='xxx';
window. alert(x);
var o1d_ _alert = window. alert;
//o1d_ alert(x);
window.alert = function () {};
//发现alertO 失效了
window. alert(123);
//恢复
window.alert = o1d_ _alert;
window. alert(456);
1
2
3
4
5
6
7
8
9
10
javascript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，就会报错 Refrence

局部作用域let
ES6let关键字，解决局部作用域冲突问题，现建议大家都用let去定义局部变量

function aaa() {
for(vari=0;i<100;i++){
console.log(i)
}
console.log(i+1); //问题? i 出了这个作用域还可以使用
}

//使用let后
function aaa() {
for(leti=0;i<100;i++){
console.log(i)
}
console.log(i+1); //Uncaught ReferenceError: i is not defined
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
常量const
在ES6之前，定义常量使用全部大写字母命名的变量就是常量

var PI = '3.14' ;
console.' 1og(PI);
PI = '213'; //可以改变这个值
console.1og(PI);
1
2
3
4
在ES6之后，用const定义常量

const PI = '3.14';
console.log(PI);
PI = '123'; //报错，常量不允许修改
1
2
3
由于我们的所有变量都会绑定到window上，。如果不同的js文件，使用了相同的全局变量，就会产生冲突—>如何减少这样的冲突？

把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突问题~
jQuery中就是使用的该方法：jQuery.name，简便写法：$()

5.1Date
var now = new Date(); //sat Jan 04 2020 10:47:06 GMT+0800 (中国标准时间)
now. getFu11YearO); //年
now. getMonth(); //月0~11 代表月
now. getDate(); //日
now. getDay(); //星期几
now. getHours(); //时
now. getMinutes(); //分
now. getseconds(); //秒
now. getTimeO); //时间戳全世界统一1970 1.1 0:00:00 毫秒数
console. log(new Date(1578106175991)) //时间戳转为时间

1
2
3
4
5
6
7
8
9
10
11
now = new Date (1578106175991)
sat Jan 04 2020 10:49:35 GMT+0800 (中国标准时间)
now. toLocalestring //注意，调用是一个方式，不是一一个属性!
f toLocalestring() { [native code] }
now. toLocalestring()
"2020/1/4上午10:49:35"
now. toGMTString()
'Sat, 04 Jan 2020 02:49:35 GMT"

1
2
3
4
5
6
7
8
9
5.2、json对象
早期，所有数据传输习惯使用XML文件!

JSONlavaScript Object Notation, JS对象简谱)是- -种轻量级的数据交换格式。
简洁和清晰的层次结构使得JSON成为理想的数据交换语言。
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
在JavaScript -切皆为对象、任何js支持的类型都可以用JSON来表示; number, string…
格式:
对象都用{}
数组都用[]
所有的键值对都是用key:value
json字符串和js对象的转换

var user = {
name :
"qinjiang",
age: 3,
sex: '男'
}

//对象转化为json字符串(json字符串每个键都用""或'包围)
var jsonuser = JSON. stringify(user);
//输出为{"name" : "qinjiang"，"age":3,"sex" :"男"}

//json字符串转化为对象参数为json 字符串
var obj = JSON. parse(' {"name":"qinjiang" , "age" :3,"sex":"男"}');
//输出为{name:"qingjiang",age:3,sex:"男"}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
json和js对象的区别：

var obj = {a: 'he11o' ,b: 'he11ob'};
var json = '{"a": "he11o" , "b":"he1lob"}'
1
2
5.3、AJAX
原生的js写法 xhr异步请求
jQuery封装好的方法$(#name).ajax("")
axios请求

//①默认情况下，构造函数是空的

function Person（）{//构造函数首字母大写

}

//②添加属性和方法

Person.prototype.name="dp";
Person.prototype.doSomething=function(）{
alert(this.name);
};

//③定义好构造函数和其他属性方法之后，就可以创建实例了

var person1=new Person();
var person2=new Person();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
面向对象
var Student = {
name:"qinjiang",
age:3,
run: function () {
console.log(this.name+"run..");
}
};
var xiaoming={
name:"xiaoming"
};
小明的原型是Student
xiaoming.__proto__=Student;
1
2
3
4
5
6
7
8
9
10
11
12
var Student = {
name:"qinjiang",
age:3,
run: function () {
console.log(this.name+"run..");
}
};

function Student(name) {
this.name = name;
}

//给student新增一个方法就是给原型增加方法
Student.prototype.hello = function () {
alert('hello')
}
// ES6
//给student添加一个方法
//1、先定义一个类、属性、方法
class student{
constructor(name){
this.name = name;
}

hello(){
alert('hello');
}
}
//使用方法
var person = new student('小明');
person.hello();
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
class student{
constructor(name){
this.name = name;
}

hello(){
alert('hello');
}
}
class xiaoStudent extends student{
constructor(name,grade){
super(name);
this.grade = grade;
}
mygrade(){
alert('我是一个小学生')
}
}
//使用
var xiaoStudent = new xiaoStudent("xiaohong",1);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
本质：查看对象原型
原型链

6、操作BOM对象（重点）
浏览器介绍
javascript和浏览器关系？
BOM：浏览器对象模型

IE6~11

Chrome

Safari

FireFox

Opera
三方

QQ浏览器

360浏览器

window
window代表浏览器窗口

window.alert(1)
undefined
window.innerHeight
258
window.innerwidth
919
window.outerHeight
994
window.outerwidth
919
//大家可以调整浏览器窗口试试
1
2
3
4
5
6
7
8
9
10
11
Navigator
Navigator，封装了浏览器的信息

navigator . appName
"Netscape"
navigator . appVersion
"5.0 (windows NT 10.0; WOw64) Applewebkit/537.36 (KHTML， like Gecko)
Chrome/63.0.3239.132 Safari/537.36"
navigator . userAgent
"Mozi11a/5.0 (Windows NT 10. 0; WOw64) ApplewebKit/537.36 (KHTML， like :
Gecko) Chrome/63.0. 3239.132 Safari/537.36"
navigator. platform
"Win32"
1
2
3
4
5
6
7
8
9
10
大对数我们不会使用navigator对象，因为会被认为修改
不建议使用这些属性来判断和编写代码

screen
代表屏幕尺寸

screen.width
1920
screen.Height
1080
1
2
3
4
lacation
代表当前页面的URL信息

location属性：

主机：host
当前指向的位置：href
协议:protocol
重新加载的方法：f reload() //location.reload()刷新网页(设置新的地址:location.assign(‘想要跳转的地址’))
document
document代表当前的页面，HTML DOM文档树

//获取具体的文档树节点：
<d1 id="app">
<dt> Java</dt>
<dd> JavaSE</dd>
<dd> JavaEE</dd>
</d1>
<script>
var dl = document. getElementById(' app ');
</script>

//获取cookie
document.cookie

//劫持cookie原理：把一段能劫持cookie的js代码放在网站上一点开就能把你的cookie拿了
<script src='劫持cookie'></script>

//服务器端可以设置cookie为httpOnly
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
history
history代表浏览器的历史记录

history.back() //后退
history.forward() //前进
1
2
8、操作DOM对象（重点）
DOM：文档对象模型

核心

浏览器网页就是一个Dom树形结构！

更新：更新Dom节点
遍历Dom节点：得到Dom节点
删除：删除一个Dom节点
添加：添加一个新的节点
要操作一个Dom节点，就必须要先获得这个Dom节点
获得Dom节点

8.1、获得dom节点
<div>
<h1>标题一</h1>
<p id='p1'>p1</p>
<p class='p2'>p2</p>
</div>
<script>
//对应css选择器
var h1 = document.getElementByTagName('h1'); //这里就是获取到了这个dom节点
var p1 = document.getElementByID('p1');
var p2 = document.getElementByclassName('p1');
var father = document.getElementByID('father');

var childrens = father.children;// 获取父节点下的所有子节点
var childrens = father.children[index]; //获取其中一个节点
//father.firstchild 获取父节点的第一个子节点
//father.lostchild 获取父节点的最后一个子节点
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
这是原生代码，之后都用jQuery

8.2更新结点
更新结点

id1.innerText = '123' //innerText方法修改文本内容
id1.innerHTML = '<strong>123</strong>' //innerHTML解析HTML超文本的可以修改id的样式
id1.style.color = 'red' //style.什么：style方法修改css样式。即可以在js里操作修改样式
id1.style.padding = '2em' //属性使用字符串包裹
1
2
3
4
5
6
7
8
9
10
11
12
8.3、删除节点
删除节点的步骤：先获取父节点，通过父节点删除自己

<div>
<h1>标题一</h1>
<p id='p1'>p1</p>
<p class='p2'>p2</p>
</div>
<script>
var self = document.getElementById('p1');
var father = p1.parentElement; //找到p1的父节点
father.removeChild(self) /C/通过父节点使用 removechild删掉自己（只有标记为id选择器的节点才可以删除
father.removeChild(father.dchildren[0])
father.removeChild(father.children[1])
father.removeChild(father.children[2])
//删除多个结点要注意children是时刻在变化的
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
插入节点

我们获得了某个Dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个Dom节点已经存在元素了，我们就不能这么干了！会产生覆盖

追加

<p id="js">JavaScript</p>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
</div>

var newP = document.createElement('p');//创建一个新标签
newP.id = 'newP';
newP.innerText = 'hello,baba';

list.appendChild(newP);
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
创建一个新的标签

var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
//要包含的节点.insertBefore(newNode,targetNode)
list.insertBefore(js,ee);
1
2
3
4
5
9、操作表单
表单是什么？form-----DOM树

文本框----text
下拉框----select
单选框----radio
多选框----checkbox
隐藏域----hidden
密码框----password
…
表单的目的提交信息

获得要提交的信息

//单选框
<p>
<span>性别</span>
<input type="radio" name="sex" value="man" id="boy">男
<input type="radio" name="sex" value="women" id="girl">女

</p>
</form>
</body>

var boy_radio = document.getElementById('boy';)
var girl_radio = document.getElementById('girl')
//对于单选框、多选课等固定的value，boy_radio.value只能去到当前的值
boy_radio.checked; //看返回的结果，是否为true，如果为true则被选中
boy_radio.checked=true; //赋值

</script>

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
8.2、提交表单，MD5加密
文本框的密码在控制台上加密，即后台的密码是如何加密的？

<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>

<script src = "https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js">

</script>
</head>
<body>

<form action = "https://www.baidu.com" method = "post" onsubmit = "return aaa()">
<p>
<span>用户名：</span><input type="text" id = "username" name = "username"/>
</p>
<p>
<span>密码：</span><input type="password" id = "password" />
</p>
<input type = "hidden" id = "md5-password" name = "password">


<button type = "submit">提交</button>

</form>

<script>
function aaa(){
alert(1);
var username = document.getElementById("username");
var pwd = document.getElementById("password");
var md5pwd = document.getElementById("md5-password");
//pwd.value = md5(pwd,value);
md5pwd.value = mad5(pwd.value);
//可以校验判断表单内容，true就是通过提交，false就是阻止提交
return false;

}
</script>

</body>
</html>

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
表单提交，md5加密优化版：

<form action="https ://www. baidu. com/" method="post" onsubmit="return aaa()">
<P>
<span>用户名: </span> <input type="text" id="username" name="username">
</p>
<p>
<span>密码: </span> <input type="password" id=" input - password" >
</p>
<input type= "hidden" id="md5-password">
</form>
<script>
function aaa() {
alert(1);
var uname = document.getElementById( 'username' );
var pwd = document.getElementById(" input-password" );
//通过隐藏去提交
var md5pwd = document.getElementById('md5-password' );
md5pwd.value = md5(pwd.value);
//可以校验判断表中内容，true就是通过提交，false, 阻止提交
return true;
}
</script>

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
10、jQuery
学习文档

https://jquery.cuishifeng.cn/index.html

javaScript和jQuery的关系？

jQuery库，里面存在大量的JavaScript函数

获取jQuery
在线引入https://www.bootcdn.cn/jquery/

9.1、选择器
原生的js选择器的种类有：

标签选择器：document.getElementByTagName()

id选择器： document.getElementByID()

类选择器： document.getElementByClassName()
jq选择器有（css中的选择器他全部都能用）：

标签选择器：$(‘p’).click();

id选择器：$(’#id名’).click();

class选择器：$(’.class名’).click();

…查看文档看更多

<a href="" id="test_jquery">点我</a>
<script>

// 使用js语法
var id = document.getElementById('test_jquery')
id.click(function(){
alert('jQuery');
})
// 使用jq语法
$('#test_jquery').click(function(){
alert('jQuery');
})
</script>

————————————————
版权声明：本文为CSDN博主「Wh1te996」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_45881243/article/details/107806003

posted @ 2021-02-13 16:36 mybatis-zz 阅读(169) 评论(0) 收藏举报

刷新页面返回顶部

mybatis-zz

JavaScript

公告