视频来源（文章笔记根据如下视频学习整理）：【狂神说Java】JavaScript最新教程通俗易懂_哔哩哔哩_bilibili笔记资料交流都在我们的平台：www.kuangstudy.com秦疆老师的JavaScript课程，前端三大基石最后一个什么是JavaScript？基本语法是什么样？如何理解面向对象？ *** 作BOM， *** 作DOM，jQuery怎么快速上手？趣味加实战，新特性补充讲解，都在这里啦狂神说Java系列，努力打造通俗易懂的教程QQ交流群: 664386224https://www.bilibili.com/video/BV1JJ41177di?p=1
1 概述JavaScript是一门世界上最流行的脚本语言。
一个合格的后端人员，必须要精通JavaScript
2 入门 2.1 引入JavaScript（1）内部标签，在
（2）外部引入，一般新建一个js文件夹用来存放JS代码。
（3）不用显示定义type，默认是javascript
javaScript严格区分大小写。
调试错误时：在浏览器的source下面打断点，然后刷新界面即可。
定义变量格式：变量类型 变量名=变量名
条件控制：
（1）number：（js不区分小数和整数，统一用Number表示）
123//整数123
123.1//浮点数123.1
1.123e3//科学计数法
-99//负数
NaN //not a number
Infinity // 表示无限大（2）字符串：（'abc' "abc"）
（3）布尔值：（true，false）
（4）逻辑运算：
&& 两个都为真，结果为真
|| 一个为真，结果为真
! 真即假，假即真
（5）比较运算符【重要】
= 赋值
1，"1"
== 等于（类型不一样，值一样，也会判断为true）
=== 绝对等于（类型一样，值一样，结果为true）
这是一个JS的缺陷，在比时不要使用 == 进行比较，因为：
NaN===NaN,NaN与所有的数值都不相等，包括自己
只能通过isNaN(NaN),来判断这个数是不是NaN
（6）浮点数问题
console.log((1/3) === (1-2/3)); //false- 尽量避免使用浮点数进行运算，存在精度问题。一般用 |a-b| < 某个精确度，来表示 a=b
console.log(Math.abs(1/3-(1-2/3))<0.00000001) //true（7）null和undefined
- null 空
- undefined 未定义
（8）数组
- java的数组必须是相同类型的对象，js中不需要这样
// 保证代码的可读性，尽量使用[]
var arr = [1,2,3,4,5,'hello',null,true];
// 第二种定义方法
new Array(1,2,3,4,5,'hello');
- 取数组下标，如果越界了，就会undefined
（9）对象
- 对象是大括号，数组是中括号
- 每个属性之间使用逗号隔开，最后一个属性不需要逗号
- 取对象值
var Person = {
name :"Tom",
age:3,
tags:['js', 'web','java']
}
console.log(Person.name);
console.log(Person.age);
（1）一般时候用单引号或者双引号对字符串进行包裹，此外还要注意转义字符\
（2）多行字符串编写
var msg=
`hello
world
你好呀
JavaScript`;
运行结果：
（3）模板字符串
let name='zlk';
let age=20;
var msg=`你好呀，${name}`;
（4）字符串长度
str.length;
（5）字符串的可变性，不可变
（6）大小写转换
var str='Zlk';
// 注意，这里是方法，不是属性
str.toUpperCase();
str.toLowerCase();
（7）console.log(str.indexOf(‘b’)); //在字符串中第一次出现的坐标。
（8）substring，从数组下标为0开始截取字符串。
str.substring(1); // 从第一个字符串截取到最后一个字符串
str.substring(1,3); // [1,3)
Array可以包含任意的数据类型：
- 长度：arr.length；
- 注意：给arr.lennth赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失；
- indexOf，通过元素获得下标索引；
- 字符串的"1"和数字 1 是不同的；
- slice（）：截取Array的一部分，返回的一个新数组，类似于String中substring；
- push()，pop()尾部；
- unshift(),shift() 头部；
- 排序：sort()；
- 元素反转：reverse()；
- concat()；
- 注意：concat()并没有修改数组，只是会返回一个新的数组。
- 连接符：join()；打印拼接数组，使用特定的字符串连接。
- 多维数组。
var arr = [1,2,3,4,5,6]; // 通过下标取值和赋值
arr.length; // 长度
arr.indexOf(2); // 通过元素获得下标索引
arr.slice(2,5); //从数组下标为2开始截取到下标为4 [3,4,5]
arr.push(42); //在尾部添加一个元素，返回数组长度
arr;
arr.pop(); //默认从尾部删除一个，返回删除的元素
arr;
arr.unshift(92); //在头部添加一个元素，返回数组长度
arr;
arr.concat();//没有传递参数，此时它只是复制当前数组，并且返回一个副本
arr;
arr.shift();//从头部删除一个元素，返回删除元素的值
arr;
arr.sort(); //排序
arr.reverse(); //元素反转
arr.concat(["a","b","c"]);//先给当前数组创建一个副本，然后将接收到的参数添加到这个副本（数组）的末尾，最后返回一个新的数组。
arr;
arr.join('+');//打印拼接数组，使用特定的字符串连接
var arr2 = [[1,2],[3,6],[9,12]]; //多维数组
arr2[1][1];- JS中对象，大括号{…}表示一个对象，键值对用来描述属性xxx：xxx，多个属性之间用逗号隔开，最后一个属性不加逗号。
- JS中的所有的键都是字符串，值是任意对象。
// 定义了一个person对象，它有四个属性
var person = {
name:"zlk",
age:20,
email:"sada@qq.com",
score:100
};
person.name = "kk"; //给对象中的属性赋值：
person.name
delete person.name; //若存在该属性则返回true，删除对象的属性
person;
person.str = "num23"; //增加一个属性，直接给新的属性添加值即可。
person;
'score' in person; //对象中是否存在该属性
// 继承
'toString' in person; //true
person.hasOwnProperty('toString'); //false 判断一个属性是否是这个对象自身拥有的
person.hasOwnProperty('age'); //true //私有的if判断
while循环判断，注意避免死循环
for循环
for(let i=0;i<100;i++){
console.log(i);
}
for-each循环
var age = [1,,2,3,4,5,6];
// 函数
age.forEach(function (value){
console.log(value);
})
for……in——下标
Map
Set：无序不重复的集合
var set = new Set([1,2,3,4,5,6,7,8]);
set.add(2); // 添加
set.delete(1); // 删除
console.log(set.has(3)); // 是否包含某个元素
使用iterator来遍历迭代我们Map，Set！
- 遍历数组
var arr = [3,4,5,6,7,8,12];
for(var x of arr){
console.log(x);
}
- 遍历Map
var map = new Map([['Tone',92],['jay',84],['sony',96]]);
for (let x of map){
console.log(x);
}
以绝对值函数为例
执行到return代表函数结束，返回结果，如果没有执行return，函数执行完也会返回结果，结果就是undefined。
方式一：
方式二：
function(x){…}这是一个匿名函数。但是可以把结果赋值给abs，通过abs来调用函数！
var abs = function (x){
if(x>=0){
return x;
}else{
return -x;
}
}
调用函数：
abs(12); // 12
abs(-36); // 36
参数问题：javaScript可以传任意个参数，也可以不传递参数。那么传进来的参数是否存在问题？假设传入的参数类型不对，我们又当如何规避呢？
var abs = function(x){
// 手动抛出异常来判断
if(typeof x!= 'number'){
throw 'Not a Number';
}
if(x>=0){
return x;
}else{
return -x;
}
}
arguments是一个JS免费赠送的关键字；代表传递进来的所有参数是一个数组！
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;
}
}
问题：arguments包含所有的参数，我们有时候想使用多余的参数来进行附加 *** 作。需要排除已有参数时该怎么做呢？
以前：
var aaa = function(x,y){
console.log("x-->" + x);
console.log("y-->" + y);
//想获取x,y之外的参数
for (var i = 2; i < arguments.length; i++) {
console.log(arguments[i]);
}
}
现在：
...rest：ES6引入的新特性，获取除了已经定义的参数之外的所有参数。
rest参数只能写在最后面，必须用…标识。
function aaa(a,b,...rest){
console.log("a=>" + a);
console.log("b=>" + b);
console.log(rest);
}1、在 JS中，var 定义的变量是有作用域的。如果在函数体中声明，则在函数体外不可以使用
//函数体
function qj(){
var x = 1;
x = x + 1;
}
x = x + 2;//Uncaught ReferenceError: x is not defined
2、如果两个函数使用了相同的变量名，只要两个变量分别在两个函数内部就不会发生冲突。
function qj(){
var x = 1;
x = x + 1;
}
function qj2(){
var x = "a";
x = x + 1;
}
3、内部函数可以访问外部函数的成员，反之则不行
function qj(){
var x = 1;
function qj2(){
var y = x + 1;
}
var z = y + 1;//Uncaught ReferenceError: y is not defined
}
4、内部函数变量和外部函数变量重名：函数查找变量从自身函数开始， 由“内”向“外”查找，如果自身内部存在该变量，那么外部存在这个同名的函数变量将会被内部函数屏蔽掉。
JS实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找（自内向外），如果在全局作用域都没有找到，就会报错 Refrence。
function qj(){
var x = 1;
function qj2(){
var x = "A";
console.log("inner:" + x);//inner:A
}
console.log("outer:" + x);//outer:1
qj2();
}
qj();
5、JS会提升变量的作用域
function qj(){
var x = "x" + y;
console.log(x);
var y = "y";
}
运行结果：
JS执行引擎，自动提升了 y 的声明，但是不会提升变量 y 的赋值；同于下面的代码（常用）：
function qj() {
var y;
var x = "x" + y;
console.log(x);
y = 'y';
}所有的变量定义都放在函数的头部，这个是在JS 建立之初就存在的规范。 不要乱放，便于代码维护；
function qj(){
var x = 1,
y = 2,
z,i,a;
//变量全部在前面声明完
}
6、全局变量
7、全局对象 window，默认所有的全局变量都会自动绑定在window对象下
8、alert() 这个函数本身也是一个window的变量；
var x = 'xxx';
window.alert(x);
//方法也可以作为变量
var old_alert = window.alert;
old_alert(x);
window.alert = function (){
}
//alert()失效了，因为我们重写了 alert()
window.alert('123');
//恢复
window.alert = old_alert;
window.alert('123');
9、规范
所有变量都会绑定到 window上。如果不同的 js 文件，使用了相同的全局变量，就会产生冲突，如何减少这样的冲突呢？
我们可以把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突问题，
jQuery中就是使用的该方法：jQuery.name，简便写法：$()。
//唯一全局变量
var KuangApp = {};
//定义全局变量
KuangApp.name = '张三';
KuangApp.add = function (x, y) {
return x + y;
}
10、局部作用域（局部变量建议用 let 定义！）
使用var关键字除了局部作用域变量还可以继续使用！
function aaa() {
for (var i = 0; i < 10; i++) {
console.log(i);
}
console.log(i + 1);//有问题--->i出了这个作用域还可以使用
}
aaa();
ES6 的 let 关键字，解决了局部作用域冲突的问题！
function aaa() {
for (let i = 0; i < 10; i++) {
console.log(i);
}
console.log(i + 1);//Uncaught ReferenceError: i is not defined
}
aaa();
11、常量
在ES6之前，约定只要是用全部大写字母命名的变量就是常量；建议不要修改这样的值（变量值实际上是可以进行修改的）。
var PI = '3.14';
console.log(PI);
PI = '3.11';//如果有人不遵守约定，是可以随便改的
console.log(PI);
在ES6引入了常量关键字 const定义常量，此时常量一旦定义便不可以修改。
const PI = '3.14';
console.log(PI);
//下面报错了
PI = '3.11';//Attempt to assign to const or readonly variable(尝试赋值给const或只读变量)
定义方法：把函数放在对象的里面，对象只有两个东西：属性和方法
var kuangshen = {
//属性
name:'天降',
birth:2000,
//方法
age: function () {
//今年-出生的年
var now = new Date().getFullYear();
return now - this.birth;
}
}
//属性
console.log(kuangshen.name);
//方法，一定要带上()
console.log(kuangshen.age());
在 Java 中 this 默认指向当前方法所在的对象；在 js 中可以使用 apply 控制 this 指向。
function getAge() {
//今年-出生的年
var now = new Date().getFullYear();
return now - this.birth;
}
var kuangshen = {
name:'狂神',
birth:2000,
//方法
age: getAge
}
var xiaoming = {
name:'小明',
birth:2000,
//方法
age: getAge
}
getAge().apply(kuangshen, []);//指定该方法中的this，指向kuangshen，参数为空
标准对象
typeof 123
typeof '123'
typeof true
typeof NaN
typeof []
typeof {}
typeof Math.abs
typeof undefined输出结果：
5.1 Date基本使用
var now = new Date();
console.log(now);//打印此刻的中国标准时间
console.log(now.getFullYear());//年
console.log(now.getMonth());//月 (0~11),0代表1月
console.log(now.getDate());//日
console.log(now.getDay());//星期几
console.log(now.getHours());//时
console.log(now.getMinutes());//分
console.log(now.getSeconds());//秒
console.log(now.getTime());//时间戳 全世界统一 1970.1.1 0:00:00 到现在的总毫秒数
console.log(new Date(1543541513213));//将时间戳转为时间
console.log(now.toLocaleString());//转换为当地时间
查看JSON具体知识请移步此处：
Json交互处理_friggly的博客-CSDN博客_json 交互json简介：json是一种轻量级的数据交换格式，采用完全独立于编程语言的文本格式来存储和表示数据。它易于阅读和编写，同时也有利于及其解析和生成。在js中，一切皆对象，因此任何js支持的类型都可以通过json来表示，例如字符串、数字、对象、数组，对象等，json语法规则如下所示：数组（Array）用方括号(“[]”)表示。对象（0bject）用大括号(“{}”)表示。名称/值对(name/value）组合成数组和对象。名称(name）置于双引号中，值（...https://blog.csdn.net/friggly/article/details/124375771
查看AJAX具体知识请移步此处：
https://blog.csdn.net/friggly/article/details/124509554https://blog.csdn.net/friggly/article/details/124509554
6 面向对象编程面向对象是一种编程思想。谈到面向对象，我们需要先来说一下面向过程的编程方式，因为面向对象是从面向过程过渡而来的。
以实际生活的洗衣服进行说明：
（1）如果是面向过程，我们把洗衣服任务拆解成一系列的步骤，每一个步骤就是一个函数。
第一步，打开洗衣机；
第二步，放衣服和洗衣液；
第三步，选择洗衣模式，开始洗衣；
第四步，等待洗完，拿出衣服。
（2）如果是面向对象，我们拆分成人和洗衣机两个对象，再分析每一个对象需要做哪些事情。
人在其中需要做这三件事：
- 第一件打开洗衣机
- 第二件是放衣服和洗衣液
- 第三件事是洗完衣服后拿出衣服。
洗衣机在其中只需要做一件事情：
- 根据洗衣模式洗衣服。
我们能够看出来面向过程跟面向对象，是两种不同的思维方式，处理问题的思考的角度不一样。面相过程的思维方式，它更加注重这个事情的每一个步骤以及顺序。他比较直接高效，需要做什么可以直接开始干。面向对象的思维方式，它更加注重事情有哪些参与者，需求里面有哪些对象，这些对象各自需要做些什么事情。将其拆解成一个个模块和对象，这样会更易于维护和拓展。
其中面向对象的三大特点是封装、继承、多态。
javaScript、java、c#等都是面向对象编程；但是javaScript有些区别！
在Java中：类是模板，对象是具体实例；而在 JS 中，我们需要转换一下思维方式！
原型：
var Student = {
name:"张三",
age:3,
sex:"男",
run : function () {
console.log(this.name + " run...")
}
}
//小明也是学生，就没必要再重新写Student类中的某些属性和方法
var xiaoming = {
name:"小明"
}
//小明的原型指向Student ("原型"可以理解为"父类")
xiaoming.__proto__ = Student;
console.log(xiaoming.run());
var Bird = {
fly : function () {
console.log(this.name + " fly...")
}
}
//js的原型比较随意，也可以把小明指向鸟
xiaoming.__proto__ = Bird;
console.log(xiaoming.fly());
既然原型可以理解为父类，那干嘛不直接用父类呢? 所以 js 中就借鉴了 Java 的 class 继承
class集继承
class 关键字，是在 ES6 引入的
1、定义一个类、属性、方法
class Student {
constructor(name) {
this.name = name;
}
hello() {
alert('hello,' + this.name);
}
}
var jerry = new Student("jerry");
var jack = new Student("jack");
console.log(jerry.hello());
console.log(jack.hello());
2、继承
//ES6之后========================
//定义一个学生的类
class Student {
constructor(name) {
this.name = name;
}
hello() {
alert('hello,' + this.name);
}
}
//定义一个小学生类继承Student
class XiaoStudent extends Student{
constructor(name,grade){
super(name);
this.grade = grade;
}
myGrade(){
alert(this.name + '是一名小学生');
}
}
var jerry = new Student("jerry");
var jack = new Student("jack");
var tom = new XiaoStudent("tom");
console.log(jerry.hello());
console.log(jack.hello());
console.log(tom.myGrade());
继承的本质还是原型，只是换了一种更加友好的写法而已
原型链
__ proto __:
javascript 和浏览器关系?
- JavaScript 诞生就是为了能够让他在浏览器中运行
BOM：浏览器对象模型
拓展：浏览器内核有Edge、Chrome、Safari、FireFox、Opera
window对象(重要)，代表浏览器窗口
// window代表浏览器窗口
window.alert(1); //d窗
undefined
window.innerHeight;
699
window.innerWidth
158
window.outerHeight
818
window.outerWidth
1065screen对象，代表屏幕尺寸
location(重要)，代表当前页面的URL信息
location;
// 设置新的地址
location.assign('https://blog.csdn.net/m0_46153949');document（内容DOM）,代表当前的页面，HTML是怎么展示的？-->HTML DOM文档树
获取具体的文档树节点
DOM
- java
- javaSE
- javaWeb
- javaEE
获取 cookie
8 *** 作DOM对象（重点）DOM：文档对象模型
浏览器网页就是一个 Dom 树形结构！
- 更新：更新Dom节点
- 遍历Dom节点：得到Dom节点
- 删除：删除一个Dom节点
- 添加：添加一个新的节点
要 *** 作一个 Dom 节点，就必须要先获得这个 Dom 节点
下面的示例代码用的是原生JS代码，之后我们尽量都使用 jQuery() *** 作会更加方便;
（1）获取Dom节点：
标题一
p1
p2
（2）更新DOM节点
先拿到 id1
*** 作文本:
id1.innerText='456';修改文本的值。id1.innerHTML='123';可以解析HTML文本的标签。
*** 作CSS
id1.style.color = 'blue';修改文本颜色；id1.style.fontSize='22px';修改文字大小；id1.style.padding='2em';修改文本位置；
（3）删除DOM节点
步骤：
- 先获取父节点
- 再通过父节点删除自己
删掉节点 p1：
Title
标题一
p1
p2
注意：删除多个节点的时候，children 是在时刻变化的，删除节点的时候一定要注意。
（4）插入节点
获得了某个 Dom 节点之后，假设这个 Dom 节点是空的，我们可以通过 innerHTML 增加一个元素；反之，如果这个 Dom 节点已经存在元素了，通过innerHTML就会产生覆盖。
appendChild()，追加到后面：
JavaScript
JavaSE
JavaEE
JavaME
效果如下：
上面是将一个已经存在的节点添加到别处，现在我们新创建节点：
追加在前面 insertBefore()
JavaScript
JavaSE
JavaEE
JavaME
表单form----->DOM树:
- 文本框----text
- 下拉框----select
- 单选框----radio
- 多选框----checkbox
- 隐藏域----hidden
- 密码框----password
- …
提交表单。
md5加密密码，表单优化
Title
javaScript 和 jQuery的关系？
- jQuery库，里面存在大量的 JavaScript 函数
（1） 获取 jQuery
官网下载地址：jQuery CDNhttps://releases.jquery.com/
文档工具站：jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chmjQuery API 1.x - 3.x 中文在线版，jQuery API 中文最新版，jQuery 是一个兼容多浏览器的 JavasSript 框架，核心理念是 - write less, do more。jQuery API 中文文档(适用jQuery 1.0 - jQuery 3.x).https://jquery.cuishifeng.cn/
jQuery使用前提：从官网将下载的 js 文件放到项目中，新建HTML文件：
公式：$(selector).action()
Title
点我
选择器:
//原生js，选择器少，麻烦、不方便记忆
//标签
document.getElementByTagName();
//id
document.getElementById();
//class
document.getElementByClassName();
//jQuery css中的选择器它全部都能用！
$('p').click();//标签选择器
$('#id1').click();//id选择器
$('.class1').click;//class选择器
事件： 鼠标事件、键盘事件，其他事件....
Title
mouse：
在这里移动鼠标试试
*** 作DOM
节点文本 *** 作:
Title
- JavaScript
- Python
浏览器控制台测试：
$('#test-ul li[name=python]').text();
> "Python"
$('#test-ul li[name=python]').text('设置值');
$('#test-ul li[name=python]').text();
>"设置值"
CSS的 *** 作:
$('#test-ul li[name=python]').css({"color","red"},{"size",15px});
元素的显示和隐藏：本质 display:none
$('#test-ul li[name=python]').show();
$('#test-ul li[name=python]').hide();
娱乐测试:
$(window).width()
$(window).height()
$('#test-ul li[name=python]').toggle();//切换，显示变为隐藏，隐藏变为显示
- jQuery小游戏网站：网站①，网站②。可以利用小游戏对jQuery知识进行更深一步的学习。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）