Diary23-全网最全的Javascript合集

1.什么是Javascript

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

• 一个合格的后端人员，必须要精通Javascript

2.快速入门

2.1引入Javascript

2.1.1内部标签

<!--script标签内，写Javascript-->
 ?<script>
 ? ?alert('hello world');
 ?</script>

2.1.2外部引入

<!--外部引入-->
 ?<script src="HelloWorld.js"></script>

2.2基本语法

<script>
 ? ? ? ?var num=1;
 ? ? ? ?alert(num);
</script>

2.3数据类型

• 数值

• 字符串

• 布尔值

• 逻辑运算

• 比较运算符(这个和Java不太一样)

1.=
2.== ? 等于(类型不一样，值一样，也会判断为true)
3.===  绝对等于(类型一样，值一样，才会判断为true,Javascript中推荐使用这个)
?
注意：
1.NaN===NaN，这个与所有的数值都不相等，包括自己
2.只能通过isNaN(NaN)来判断这个数是否是NaN

• 浮点数问题

• null和undefined(这个和Java不太一样)

1.null  空
2.undefined  未定义

• 数组(Java的数组必须是相同类型的对象，Js中不需要这样，可以是不同类型的对象)

var arr=[1,2,3,'hello',null,true]
//取数组下标：如果越界了，就会报undefined

• 对象(对象是大括号，数组是中括号)

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

3.数据类型

3.1字符串

• 正常字符串使用单引号、双引号进行包裹

• 注意转义字符

1.\n
2.\t
3.\u4e2d ? \u#### ? Unicode字符
4.\x41 ? ? ? ? ? ?  Ascll字符

• 多行字符串编写

//tab上面，Esc的下面
 ? ? ?  var msg=`hello
 ? ? ?  world
 ? ? ?  你好`

• 模板字符串

let name="sxc";
let age=22;
let msg='${name}最帅'

• 字符串长度

str.length

• 字符串不可变

• 大小写转换

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

• 查找字符串中字母所在位置

student.indexOF('u')

• 字符串的截取

student.substring()

3.2数组

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

var arr=[1,2,3,'hello',null,true]

• 长度

arr.length
注意：加入给arr.length赋值，数组大小会发生变化，如果赋值过小，元素就会丢失

• 下标索引

arr.indexOf()

• slice():截取Array的一部分，返回一个新数组，类似于String中的substring

• push和pop/unshift和shift

1.push:加入到尾部
2.pop：弹出尾部的一个元素
3.unshift:加入到头部
4.shift：弹出头部的一个元素

• 排序sort()

• 元素反转reverse()

• concat()

注意：concat()并没有修改数组，只是会返回一个新的数组

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

• 多维数组

3.3对象

• 对象赋值

var person{
 ? ?name:sxc,
 ? ?age:22,
 ? ?score:100
}

• 使用一个不存在的对象不会报错(undefined)

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

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

• 判断属性是否在这个对象中

'age' in person

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

person.hasOwnProperty('age')
true

3.4流程控制

• if判断

if(){
    
}else if(){

}else{

}

• while循环/do while循环

while(){
 ? ?
}
?
do{
 ? ?
}while()

• for循环

for(let i=0;i<100;i++){
 ? ?
}

• forEach循环

age.forEach(function(value))

• for...in

//for(var index in object){
 ? ?for(var num in age){
        if(age.hasOwnProperty(num)){
 ? ? ? ? ? ?console.log("存在")
 ? ? ? ? ? ?console.log(age[num])
 ? ? ?  }
 ?  }
}

3.5 Map和Set

Map:

var map=new Map([['tom',100],['jack',90],['Rose',80]]);
var name=map.get('tom');
map.set('admin',123456);

Set:无序不重复的集合

set.add(2);
set.delete(1);
console.log(set.has(3));

3.6 Iterator

使用Iterator来遍历迭代Map，Set

• 遍历数组

//通过for of/for in 下标
var arr=[3,4,5]
for (var x of arr){
    console.log(x)
}

• 遍历map

var map=new Map([['tom',100],['jack',90],['Rose',80]]);
for (var x of map){
    console.log(x)
}

• 遍历set

var set=new set([5,6,7])
for (let x of set){
    console.log(x)
}

4.函数

4.1定义函数

定义方式一

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

定义方式二

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

arguments参数:可以拿到传递进来的所有参数

var abs = function(x){
    
 ? ?console.log("x=>"+x);
?
    for (var i = 0; i<arguments.length; i++){
        console.log(arguments[i]);
    }
?
 ? ?if(x>=0){
 ?      return x;
 ?  }else{
 ?      return -x;
    }
?
}

rest:获取除了已经定义的参数之外的所有参数，rest参数必须放在最后面，用...标识

function aaa(a,b, ... rest) {
 ? ?console.log("a=>"+a);
 ? ?console.log("b=>"+b);
 ? ?console.log(rest);
}

4.2变量的作用域

在JavaScript中，var定义变量实际是有作用域的

• 假设在函数体中声明，则在函数体外不可以使用

• 假设在JavaScript中函数查找变量从自身函数开始~,由“内”向“外”查找.假设外部存在这个同名的函数变量,则内部函数会屏蔽外部函数的变量。

• 养成规范：所有的变量定义都放在函数的头部，不要乱放，便于代码维护

局部作用域:用let去定义局部作用域的变量

function aaa(){
 ? ?for (let i=0;i<100;i++){
 ? ? ? ?comsole.log(i)
 ?  }
 ? ?comsole.log(i+1);
}

全局作用域:JavaScript实际只有一个全局作用域，任何变量(函数页可以视为变量)，假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，就会报错

var x = 'xxx';
?
window.alert(x);
?
var old_alert = window.alert;
?
//old_alert(x);
?
window.alert = function () {
?
};
// 发现 alert()失效了
window.alert(123);
?
//恢复
window.alert = old_alert;
window.alert(456);

常量const

const PI=3.14;
console.log(PI);

4.3方法

定义方法

方法就是把函数放在对象里面，对象只有两个东西：属性和方法

var sunshen = {
 ? ?name:'sxc’,
 ? ?bitrh: 2000,
 ? ?//方法
 ? ?age: function () {
 ? ?// 今年 - 出生的年
 ? ?var now = new Date().getFullYear();
 ? ?return now-this.bitrh;
 ?  }
}
?
//属性
sunshen.name
//方法,一定要带()
sunshen.age ()

apply:在JS中可以控制this指向

function getAge() {
// 今年 - 出生的年
var now = new Date().getFullYear();
return now-this.bitrh;
?
}
?
var sunshen = {
name:'sxc',
bitrh: 2000,
age: getAge
?
};
?
// sunshen. age() ok
?
getAge.apply(sunshen,[]);// this,指向了 sunshen,参数为空

5.内部对象

5.1 Date

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

转换

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"

5.2 JSON

在JavaScript一切皆为对象、任何js支持的类型都可以用JSON来表示;number,string ...

格式:

• 对象都用{}

• 数组都用[]

• 所有的键值对 都是用 key:value

JSON字符串和JS对象的转化

<!DOCTYPE html>
<html lang="en">
<head>
 ? ?<meta charset="UTF-8">
 ? ?<title>Title</title>
</head>
<body>
?
<script>
 ?var person={
 ? ?name:"sxc",
 ? ?age:"22",
 ? ?sex:"男"
  }
 ?//对象转化为json字符串  {"name":"sxc","age":"22","sex":"男"}
 ?var jsonperson=JSON.stringify(person);
?
 ?//json字符串转化为对象参数为json字符串
 ?var obj=JSON.parse('{"name":"sxc","age":"22","sex":"男"}');
</script>
?
</body>
</html>

JSON与JS对象的区别

var obj = {a: 'hello',b:'hellob'};
var json = '{"a": "hello","b":"hellob"}'

6.面向对象编程

class继承

<!DOCTYPE html>
<html lang="en">
<head>
 ? ?<meta charset="UTF-8">
 ? ?<title>Title</title>
</head>
<body>
?
<script>
 ? ?class Student{
 ? ? ? ?constructor(name) {
 ? ? ? ? ? ?this.name=name;
 ? ? ?  }
?
 ? ? ? ?hello(){
 ? ? ? ? ? ?alert('hello')
 ? ? ?  }
 ?  }
?
 ? ?var sxc=new Student("sxc");
</script>
?
?
</body>
</html>

7.操作BOM对象(重点)

window:代表浏览器窗口

window.alert(1)
undefined
window. innerHeight
258
window. innerwidth
919
window.outerHeight
994
window. outerwidth
919

screen:代表屏幕尺寸

screen.width
1920px
screen.height
1080px

location（重要）：代表当前页面的URL信息

host:"www.baidu.com"
href:"https://www.baidu.com/"
protocol:"https:"
reload:f reload() // 刷新网页
// 设置新的地址
location.assign('https://blog. kuangstudy.com/')

document:代表当前页面

document.title
“百度一下,你就知道”

获取具体的文档树节点

<d1 id="app">
<dt>Java</dt>
<dd>JavaSE</dd>
<dd>JavaEE</dd>
</d1>
?
<script>
var dl = document. getElementById('app');
</script>

获取cookie

document.cookie
'_xsrf=2|8c7b1902|458eb5a7fa1c45676be1cfe9e19cb67e|1700048275'

history

history.back() //后退
history.forward()//前进

8.操作DOM对象(重点)

核心

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

• 更新：更新DOM节点

• 遍历dom节点:得到DOM节点

• 删除:删除一个DOM节点

• 添加:添加一个新的节点

  要操作一个DOM节点,就必须要先获得这个DOM节点

获取DOM节点

//对应 css 选择器
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByclassName('p2');
var father = document.getElementById('father');
?
var childrens= father.children; //获取父节点下的所有子节点
// father.firstchild
// father. lastchild

这是原生代码，之后尽量用jQuery()

更新节点

<!DOCTYPE html>
<html lang="en">
<head>
 ? ?<meta charset="UTF-8">
 ? ?<title>Title</title>
</head>
<body>
?
<div id="id1">
?
</div>
?
<script>
 ? ?var id1=document.getElementById('id1')
</script>
?
</body>
</html>

操作文本

• id1. innerText='456' 修改文本的值

• id1.innerHTML='sxc'

操作JS

id1.style.color = 'yellow';
id1.style.fontsize='20px';
id1.style.padding = '2em'

删除节点

删除节点步骤：先获取父节点，在通过父节点删除自己

<div id="father">
 ? ?<h1>标题一</h1>
 ? ?<p id="p1">p1</p>
 ? ?<p class="p2">p2</p>
</div>
<script>
 ? ?var self = document.getElementById('p1');
 ? ?var father = p1.parentElement;
 ? ?father.removechild(self)
</script>

插入节点

<!DOCTYPE html>
<html lang="en">
<head>
 ? ?<meta charset="UTF-8">
 ? ?<title>Title</title>
</head>
<body>
?
<p id="js">JavaScript</p>
<div id="list">
 ? ?<p id="se">JavaSE</p>
 ? ?<p id="ee">JavaEE</p>
 ? ?<p id="me">JavaME</p>
</div>
?
<script>
 ? ?var js=document.getElementById('js');
 ? ?var list=document.getElementById('list');
 ? ?list.appendChild(js);//追加到后面
</script>
?
</body>
</html>

创建一个新的标签，实现插入

<script>
?
var js = document.getElementById('js');//已经存在的节点
var list = document.getElementById('list');
//通过JS 创建一个新的节点
var newP = document.createElement('p');// 创建一个p标签
newP.id = 'newP';
newP. innerText = 'Hello, Kuangshen';
// 创建一个标签节点
var myscript = document.createElement('script');
myscript.setAttribute('type','text/javascript');
?
//可以创建一个Style标签
var myStyle= document.createElement('style');//创建了一个空style标签
myStyle.setAttribute('type', 'text/css');
myStyle.innerHTML='body{background-color: chartreuse;}';//设置标签内容
?
document.getElementsByTagName('head')[0].appendchild(mystyle)
?
</script>

insert

var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
// 要包含的节点.insertBefore(newNode,targetNode)
list.insertBefore(js,ee);

9.操作表单(验证)

获取要提交的信息

<form action="post">
 ? ?<p>
?
 ? ?<span>用户名 :< /span> <input type="text" id="username">
?
 ? ?</p>
?
 ? ?<!-- 多选框的值,就是定义好的value -- >
 ? ?<p>
?
 ? ?<span>性别 :< /span>
 ? ?<input type="radio" name="sex" value="man" id="boy">男
 ? ?<input type="radio" name="sex" value="women" id="girl">女
?
 ? ?</p>
</form>
?
<script>
 ? ?var input_text = document.getElementById('username');
 ? ?var boy_radio = document.getElementById('boy');
 ? ?var girl_radio = document.getElementById('girl');
?
 ? ?// 得到输入框的值
 ? ?input_text.value
 ? ?// 修改输入框的值
 ? ?input_text. value = '123'
?
 ? ?// 对于单选框,多选框等等固定的值,boy_radio.value只能取到当前的值
 ? ?boy_radio.checked; //查看返回的结果,是否为true,如果为true,则被选中~
 ? ?girl_radio.checked = true; //赋值
?
</script>

提交表单

<!--
?
表单绑定提交事件
οnsubmit= 绑定一个提交检测的函数,true, false
将这个结果返回给表单,使用 onsubmit 接收!
οnsubmit="return aaa()"
-->
?
<form action="https://www.baidu.com/" method="post" οnsubmit="return I
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" name="password">
?
 ? ?<!-- 绑定事件 onclick 被点击 -- >
 ? ?<button type="submit">提交</button>
</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>

10.jQuery

<! DOCTYPE html>
<html lang="en">
<head>
<meta charset=['UTF-8">
<title>Title</title>
<!-- cdn引入 -- >
<script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>
</head>
<body>
?
</body>
</htm1>

<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--< script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script> -- >
<script src="lib/jquery-3.4.1.js"></script>
</head>
<body>
?
<a href="" id="test-jquery">点我</a>
?
script>
?
//选择器就是css的选贼器
$('#test-jquery'). click(function () {
alert('hello, jQuery');
})
</script>
?
</body>
</html>

选择器

//原生js,选择器少,麻烦不好记
//标签
document.getElementsByTagName ();
//id
document.getElementById();
//类
document.getElementsByclassName ();
?
//jQuery css 中的选择器它全部都能用!
$('p').click();//标签选择器
$('#id1').click();//id选择器
$('.class1').click() //class选择器

文档工具站：jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm

事件

<!-- 要求:获取鼠标当前的一个坐标 -- >
mouse : <span id="mouseMove"></span>
<div id="divMove">
在这里移动鼠标试试
<div>
?
script>
 ? ?//当网页元素加载完毕之后,响应事件
 ? ?$(function () {
 ? ? ? ?$('#divMove') .mousemove(function (e) {
 ? ? ? ?$('#mouseMove').text('x:'+e.pageX + 'y:'+e.pageY)
 ? ? ?  })
    });
?
</script>

操作DOM

节点文本操作

$('#test-ul li[name=python]').text();//获得值
$('#test-ul li[name=python]').text('设置值’);//设置值
$('#test-ul').html();//获得值
$('#test-ul').html('<strong>123</strong>');//设置值

css的操作

$ ('#test-ul li [name=python]'). css("color", "red")

元素的显示和隐藏

$('#test-ul li [name=python]').show()
$('#test-ul li [name=python]').hide()