一、什么是 JavaScritp

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

JavaScript 控制了网页的行为

二、快速入门

1.内部标签引入

内部标签引入e

2.外部文件引入

外部文件引入

js/qj.js

alert("hello，world！！！");

3.基本语法入门

Title

4.数据类型

数值，文本，图形，音频·，视频。。。

变量

var $a

var _q

var qqq

Number

js不区分小数和整数

123 //整数123

132.1 //浮点数123.1

1.123e3 //科学计数法

-99 //负数

NaN //not a number

Infinity //表示无限大

字符串

‘abc’ ，"abc"

布尔值

true，false

逻辑运算

&&与

||或

！非

比较运算符

= 赋值

==等于（类型不一样，值一样，也会判断为true） //有缺陷，最好不要用

===绝对等于（类型一样，值一样，结果为true）

须知：

NaN与所有的数值都不相等，包括自己 只能通过 isNaN(NaN)来判断这个数是否是NaN

null和undefined

null空

undefined未定义

数组

数组中的类型可以不相同

var arr = [1,2,3,4,5,"abc",'bcd']

对象

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

var person = {

name:"lfq",

age:3,

tags:['js','java','css']

}

alert(person.age)

5. JavaScript的输出

5.1 页面输出

5.2 控制台输出

5.3 弹出窗口输出

三、数据类型

1.字符串

1.正规字符串我们使用单引号或者双引号包裹

2.注意转义字符\

\'

\n

\t

\u4e2d \u#### Unicode字符

\x41 Asclll字符

3.多行字符串编写

var msg = `

hello

worle

你好

呀

`

4.模板字符串

let name = 'lfq';

let msg = `你好呀，${name}`

console.log(msg)

5.字符串长度

str.length

6.字符串的是不可变的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9z27RiHJ-1680686395089)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230404181710291.png)]

7.大小写转换

student.toUpperCase()

student.toLowerCase()

2.数组

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

var arr = [1,2,3,4,5,"abc",'bcd']

1.长度

arr.length

3.对象

var person = {

属性名:属性值,

属性名:属性值,

属性名:属性值

}

1.赋值

person.name = "lfq"

person.age = "123"

2.使用一个不存在的对象属性,不会报错!

person.halha

undefined

3.动态的删减属性

delete person.name //删除了person对象的name属性

4.动态的添加属性,直接给新的属性添加值即可

person.halha = "haha"

"haha"

person

5.判断属性值是否在这个对象中

'age' in person

true

4.流程控制

if判断

if (2>1) {

if (3 > 2) {

alert("true");

} else {

alert("false");

}

}

if-else if

var age = 18;

if (age < 18) {

console.log("小于18岁了");

} else if (age == 18) {

console.log("已经18岁了");

} else {

console.log("大于18岁了")

}

while循环

var i = 1;

while (i <= 10) {

console.log(i);

i++;

}

do while循环

var i = 1;

do {

console.log(i);

i++;

} while (i <= 10);

for循环

for (var i = 1; i <= 10; i++) {

console.log(i);

}

5. Map和Set

Map：键值对集合，Key-Value形式。Map中不能包含重复的键。

var map = new Map([['tom',100],['jock',99],['haha',88]]);

console.log(map.get('tom'))

Set：无序不重复的集合

var set = new Set([3,1,1,1,1]);

console.log(set.add(2));

6. Iterable

使用迭代器可以输出数组，集合

var arr = [3,4,5]

for(var x in arr){

console.log(x)

}

四、函数及面向对象

1.函数定义

定义方式一

function abs(x){

if(x>=0){

return x;

}else{

return -x;

}

}

一旦执行到return代表函数结束，返回结果！

如果没有执行return，函数执行完也会返回结果，结果就是undefined

定义方式二

var abs = function(x){

if(x>=0){

return x;

}else{

return -x;

}

}

function(x){…}这是一个匿名函数，但是可以把结果赋值给abs，通过abs就可以调用函数！

调用函数

abs(10)//10

abs(-10)//-10

参数问题：JavaScript可以传任意个参数，也可以不传参数

假如不存在参数，如何避免？

function abs(x){

//手动抛出异常来判断

if(typeof x != 'number'){

throw 'Not a Number';

}

if(x>=0){

return x;

}else{

return -x;

}

}

2.变量作用域

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

function qj(){

var x = 1;

x = x + 1;

}

x = x + 2;//Uncaugh ReferenceError: x is not defined

3.方法

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

var lfq = {

name: 'lfq',

bith: 2001,

age: function () {

var now = new Date().getFullYear();

return now-this.bith;

}

}

//属性

lfq.name

//方法，一定要带()

lfq.age()

this代表了什么？拆开上面的代码试试~

function getAge () {

var now = new Date().getFullYear();

return now-this.bith;

}

var lfq = {

name: 'lfq',

bith: 2001,

age: getAge()

}

五、内部对象

标准对象

number，string，boolean，object，‘function’，undefined

1. Date

var date = new Date();

date.getFullYear();//年

date.getMonth();//月

date.getDate();//日

date.getDay();//星期几

date.getHours();//时

date.getMinutes();//分

date.getSeconds();//秒

date.getTime();//时间戳 全世界统一

console.log(new Date(1578106175991));//时间戳转换为时间

2. JSON

JSON是什么

早期，所有数据传输习惯地使用XML文件

JSON是一种轻量级的数据交换格式简洁和清晰的层次结构是的JSON成为理想的数据交换格式易于人阅读和编写，同时也易于机器解析和生成，并有效的提升网络传输效率

在JavaScript一切皆为对象，任何js支持的类型都可以通过JSON来表示

格式

对象都用{}数组都用[]所有的键值对 都使用 key:value

JSON字符串和js对象的转换

//对象转换为JSON字符串

var jsonUser = Json.stringify(user);

//json字符串转换为对象

var obj = JSON.parse('{"name":"lfq","age":3,"sex":"男"}')

六、面向对象编程

原型对象

​ 我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype，这个属性对应着一个对象，这个对象就是我们所谓的原型对象，即显式原型，原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，我们可以将对象中共有的内容，统一设置到原型对象中。

​ 如果函数作为普通函数调用prototype没有任何作用，当函数以构造函数的形式调用时，它所创建的对象中都会有一个隐含的属性，指向该构造函数的原型对象，我们可以通过_proto__（隐式原型）来访问该属性。当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用，如果没有则会去原型对象中寻找，如果找到则直接使用。

class继承

1.定义一个类，属性，方法

class Student{

constructor(name) {

this.name = name;

}

hello(){

alert('hello')

}

}

var student1 = new Student();

console.log(student1.hello())

2.继承

class xiaoStudent extends Student{

constructor(name,grade) {

super();

}

}

七、操作BOM对象

1.概述

浏览器对象模型（BOM）使 JavaScript 有能力与浏览器"对话"。

浏览器对象模型（BOM）可以使我们通过JS来操作浏览器，在BOM中为我们提供了一组对象，用来完成对浏览器的操作，常见的BOM对象如下：

Window：代表的是整个浏览器的窗口，同时window也是网页中的全局对象 Navigator：代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器 Screen：代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息 Location：代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面 Document：代表当前页面 History：代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录，由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，而且该操作只在当次访问时有效 这些BOM对象在浏览器中都是作为window对象的属性保存的，可以通过window对象来使用，也可以直接使用。

2.window

window代表 浏览器窗口

window.alert(1)

window.innerHeight

window.innerWidth

window.outerHeight

window.outerWidth

//获取浏览器窗口高度宽度

3.Navigator

Navigator，封装了浏览器的信息

navigator.appName

'Netscape'

navigator.appVersion

'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36 Edg/111.0.1661.62'

navigator.userAgent

'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36 Edg/111.0.1661.62'

navigator.platform

'Win32'

大多数时候，我们不会使用navigator对象，因为会被人修改

不建议使用这些属性来判断和编写代码

4.screen

screen代表屏幕尺寸

screen.width

2048

screen.heigth

1152

5.location

location代表当前页面的URL信息

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XpbKbtQR-1680686395090)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230405141727820.png)]

location.assign('http://baidu.com/') //设置一个新的地址

reload:f reload() //刷新网页

6.document

document代表当前页面,HTML,DOM文档树

document.title

'百度一下，你就知道'

获取具体的文档树节点

Title

Java

JavaSE

JavaEE

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-umHeVTKo-1680686395090)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230405142756810.png)]

获取cookie

document.cookie

7.history

history代表浏览器的历史记录

history.back() //后退

history.forward() //前进

八、操作DOM对象

DOM：文档对象模型

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

更新：更新Dom节点遍历dom节点：得到Dom节点删除：删除一个Dom节点添加：添加一个Dom节点

要操作一个Dom节点，就必须要先获得这个Dom节点

1.获取dom节点：

Title

标题一

p1

p2

2.更新Dom节点：

操作文本：

p1

操作JS：

p1.style.color = 'yellow'

p1.style.fontSize = '20px'

p1.style.padding = '2em'

3.删除节点

删除节点的步骤，先获取父节点，再通过父节点删除子节点

p1

father.removeChild(p1)

father.removeChile(father.child[0])

4.插入节点

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

追加：

JavaScript

JavaSE

JavaEE

JavaME

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wCffyKlw-1680686395090)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230405151104350.png)]

创建一个新的标签：

九、操作表单(验证)

表单：form

文本框 text下拉框 单选框 radio多选框 checkbox隐藏域 hidden密码框 password

操作表单：

用户名：

提交表单：

用户名：

密码：

十、jQuery

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

1.引入

本地引入：

Title

CDN引入：

2.快速使用

jQuery

3.选择器

标签选择器：

$('div')

id选择器：

$('#btn')

class选择器:

$('.red')

4.方法

attr()

方法描述：专门操作属性值为非布尔值的属性，该方法读写一体。

我是段落

$('#content').attr('title', '我是attr修改后的段落标题');

prop()

方法描述：专门操作属性值为布尔值的属性，该方法读写一体。

复选框

$(':checkbox').prop('checked', 'true');

val()

方法描述：该方法主要用于获取表单元素的值和设置表单元素的值，该方法读写一体。

$(':text').val('123456');

css()

方法描述：获取匹配元素集合中的第一个元素的样式属性的计算值或设置每个匹配元素的一个或多个CSS属性。

我是div

$('div').css({

'background': 'red',

'color': 'white'

});

精彩链接

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：