JavaScript基础

最新推荐文章于 2025-12-21 13:28:14 发布

原创最新推荐文章于 2025-12-21 13:28:14 发布 · 121 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

JavaScript

基础

1.构造

<script>````</script>

2.定义变量

定义变量   变量类型  变量名 = 变量值

3.数据类型

number js不区分小数和整数

字符串 ‘abc’

布尔值 true false

逻辑运算 && || !(真即假，假即真)

比较运算符 ==等于(类型不一样，值一样为true)

===绝对等于(类型一样，值一样为true)

4.对象

对象是大括号，数组是中括号，每个属性之间使用逗号隔开，最后一个不需要添加

var person={
    name:"hello",
    age:6,
    arrays:[1,3,5,'hello']
}

严格检查模式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-My3Vk1t0-1669115104310)(C:\Users\MU\Desktop\笔记\Javascript严格检查模式.jpg)]

数据类型

1.字符串

使用单双引号包裹着的字符串
转义字符 \ ` \n \t
多行字符串编写

使用 `hello
      ok
      wd
      ms
      `    这个符号包裹着

模板字符串

let name="hello";
let hebing='world,${name}'
out world,hello

字符串长度 str.length
字符串不可变
大小写转换使用 str.toUpperCase() str.toLowerCase()

2.数组类型

定义 var a=[1,2,3,4,3,5,]
长度 a.length
slice() 截取Array的一部分，返回一个新数组
push()：将元素添加进数组尾部
pop()：提取尾部的一个元素
unshift()；添加元素进头部
shift():弹出头部一个元素
排序 sort()
元素反转 reverse()
添加数组连接两个数组 concat([1,2,3])

3.对象类型

定义对象

var  对象名 = {
    属性名：属性值，
    属性名：属性值，
    属性名：属性值
}

能动态的删减添加属性

delete person.name

person.name=“heheh”

4.流程控制

if，for， while ，do···while
遍历数组

for(let i=0;i<10;i++){
    console.log(i)
}
或者   a.forEach(function(e){
    console.log(e)
})

Map和Set集合

1.定义

var map=new Map() var set =new Set()

2.使用iterator来遍历Map,Set

for(var x of map){
    console.log(x)
}

函数

1.定义函数

function abc(x)P{
    函数体；
}
或者  var  abc =function(x){
    函数体；
}
调用函数 ： 方法名(参数)

arguments关键字，可以获取函数传入的所有参数。

全局对象 window

1.设置唯一全局变量

var  quanju = {}；
//定义全局变量
quanju.name='hello';

局部作用域 let

let关键字，解决局部作用域的冲突问题

常量 const

1.定义 const PI =‘3.14’；

Date日期对象

var now = new Date()；

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G3gLv6zb-1669115104311)(C:\Users\MU\Desktop\笔记\Date对象基本函数.jpg)]

JSON对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cwg7f6Ym-1669115104312)(C:\Users\MU\Desktop\笔记\js与json的关系转化.jpg)]

面向对象编程

继承关系，原型，把所需要的对象继承父类

如：xiaoming. _proto _ =student;
class 类

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wRYJIuGJ-1669115104313)(C:\Users\MU\Desktop\笔记\js中class关键字.jpg)]

class继承 extend关键字

操作BOM对象

bom：浏览器对象模型

window 代表浏览器窗口（可以获取窗口属性）
screen 代表屏幕尺寸
location 代表当前页面的URL 信息
document 代表当前页面，获取cookie
history 代表浏览器的历史记录

操作DOM对象

DOM：文档对象模型

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

1.获得Dom节点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yLDWMDiw-1669115104314)(C:\Users\MU\Desktop\笔记\获得DOM节点.jpg)]

2.更新DOM节点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aLxV7Atk-1669115104314)(C:\Users\MU\Desktop\笔记\更新DOM节点.jpg)]

3.删除节点

先获取父节点，再通过父节点删除该节点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o4hkOoRi-1669115104315)(C:\Users\MU\Desktop\笔记\删除DOM节点.jpg)]

4.插入DOM节点

追加DOM节点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o07mZ1BC-1669115104315)(C:\Users\MU\Desktop\笔记\追加DOM节点.jpg)]
创建新标签，插入节点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AHAeLNt0-1669115104316)(C:\Users\MU\Desktop\笔记\创建DOM节点.jpg)]

JQuery

1.使用jQuery

<script src='网站上的jquery'></script>
使用
$(selector).action()
例如：$(#name).text()

api文档：https://jquery.cuishifeng.cn/