Gausst松鼠会

这个屌丝很懒，什么也没留下！

热门标签

JavaScript的不完全笔记_docuemnt.body remove

作者：Gausst松鼠会 | 2024-03-05 11:50:22

踩

docuemnt.body remove

JavaScript（脚本语言）

1.在网页中引入javaScript语言

方式一：

内部标签

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

    <script>
        这里面写script代码
    </script>

</head>
<body>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

方式二:

外部引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/yr.js"></script>
</head>
<body>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11

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

2.基本语法

定义变量不需要写变量类型

直接用这个格式

var 变量名 = 值;

let 变量名 = 值;(只能在当前代码块中起作用;即{}括号内)

两种调试方式:

console.log(需要输出的值) 输出在浏览器控制台

alert(需要输出的值) 浏览器弹窗

数据类型:

数据类型	解释
number	包含整数和浮点数,浮点数最高精度小数点后17位
NaN	非数字类型,涉及这个类型的操作返回值都是NaN,且NaN!=NaN(自己与以及不相等)通过isNaN(NaN)判断
String	与java的区别, " " ’ '单引号双引号都可以表示字符串
boolean	就是布尔,true和false
null	null空指针
undefined	声明变量但是未初始化(赋值)他的值就是undefined
infinity	表示无限大但是不影响运算
数组	var arr = [1,2,3,4,‘hello’,NaN]数组元素数据类型不用保持一致下标越界会报undefined

注意:尽量不用无限循环浮点数做运算,会丢失精度

运算符:

= 赋值符号

== 比较值是否相等

===比较值.数据类型是否完全相等(一般用这个做比较)

&& 两个都为真就是真

|| 一个为真就是真

! 真的变假,假的变真

定义一个对象,使用大括号,每个属性之间用逗号隔开,最后一个属性不用加逗号

var person = {

name: ‘落花’,

age:3,

arr:[12,55,66,987,55]

}

取出对象的值用类名点对象属性名

person.name

person.age

person.arr[下标]

3.严格检查模式

在script代码第一行添加"use strict",如果这行代码报错检查idea是否设置为ES6语法

'use strict'
i = 10;(这个i就会报错)
1
2

4.字符串

以下转义符在引号包裹下才生效

\是转义字符
\n换行
\t制表符
\r回车
\u#### 转unicode编码
\x##   转Ascll字符
1
2
3
4
5
6

多行字符串

用反引号引起来的内容可以实现多行字符串在输出时也是这样
let a = `103
        125
        333
        985952
        666`;
1
2
3
4
5
6

字符串模板

在字符串中使用${变量名}
let age = 20;
let name = `老刘他${age}岁了`;注意这边也是反引号,引号不好使
1
2
3

字符串的方法

str.lenth  这...没啥好说的
var str = 'student';
str[下标]可以取出字符串的元素
需要调方法记得带小括号
str.toUpperCase()转大写
str.toLowerCase()转小写
str.indexof('t')获取指定元素的下标
str.substring(3,5)截取第3到第5的字符串包含3不包含5[3,5)
str.split('t',num)从字符串中以t为分割符号,分割并显示成num份
1
2
3
4
5
6
7
8
9

字符串不可变

5.数组

数组的长度是可以变化的

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

对数组长度可以直接赋值,即

arr.length=6 即可动态调整数组的长度,也可以直接赋值给下标进行元素的添加

数组中的方法

arr.length		 数组长度
arr.indexof(2)	 通过元素获得元素的索引位置 字符串和数字会区分开来
arr.slice(3,5)   截取数组的一部分返回新的数组同上文的substring
arr.push()		 在数组结尾添加元素
arr.pop()		 将数组最后一个元素弹出(删除并返回该值)
arr.unshift()	 在数组头部添加元素
arr.shift()		 删除数组头部的元素
arr.sort()		 给数组从新排序
arr.reverse()	 颠倒数组顺序
arr.concat([数组])拼接数组后返回一个新数组(原数组不变)
arr.join('符号')	打印数组使用特定的符号连起来
1
2
3
4
5
6
7
8
9
10
11

多维数组

let arr = [[123,123,123,1][456,45689,456231][446,887,413]]
取多维数组下标
arr[元素数组下标][元素下标]
1
2
3

6.对象(代码写太多了写点文字缓缓)

①打印对象中不存在的属性会报undefined

②可以动态删减属性delete.对象名.属性名

③可以动态添加对象的属性,直接给不存在的属性赋值就可以添加

④判断某属性是否属于该对象属性 in 对象名返回值是布尔类型

⑤判断该对象中是否有这个属性或者字段对象名.hasOwnProperty(‘属性名’)

7.流程控制

if-else 同java

for循环同java

while循环同java

switch case 同java

foreach: 不!!!

let arr = [1,2,3,4,5,6];
	arr.forEach(function (e){
    console.log(e)
})
1
2
3
4

8.Map\Set集合

js中没有list集合

Map的定义方式:

let MyMap = new Map([[key,"Value"],[2,"fafa"],[3,"啦啦啦"]]);
通过Key取出Value
通过MyMap.get/set取出存储数据
1
2
3

Set(无序不重复集合)的定义方式:

let set = new Set([1,2,3,4,5,63,7,69])
set.has(元素)判断集合中是否有该元素
set.add()	向集合中添加元素
set.delete()删除集合中的元素
1
2
3
4

9.Iterator迭代器

遍历元素

let set1 = new Set([1,2,3,45,857,6,87,456,5]);
for (let num of set1) {
	console.log(num)
}
1
2
3
4

遍历下标

for (let numbersKey in set1) {
    console.log(numbersKey)
}
1
2
3

10.函数(function)

定义在对象里面叫方法

定义在对象外面叫函数

绝对值函数:

function abs(x){
    if(x>0){
        return x;
    }else {
        x=-x;
        return x
    }
}
1
2
3
4
5
6
7
8

return执行函数结束返回结果

另一种定义方式:

var abs = function(x){
        if(x>0){
        return x;
    }else {
        x=-x;
        return x
    }
}
1
2
3
4
5
6
7
8

匿名函数:

独立存在时
(function(x){
    里面写方法体
})()

或者赋值给对象
var fan = new fan;
	fan = function(x){
    里面写方法体
}
1
2
3
4
5
6
7
8
9
10

arguments关键字:把方法接收的参数当做数组接收,如果有多个参数可以通过该关键字获取

rest关键字:把除了方法里面定义的参数当做数组来接收

11.变量的作用域

变量一般先定义在function开头

function f(){
    var a,b,c,d,e....
}
1
2
3

存在内部函数(类似于java的内部类),内部函数可以访问外部函数的成员,外部函数不能访问内部函数的成员.

当内部外部变量名重复时,内外互不影响

当有变量在后面定义时,js会自动提升该变量的作用域,可以理解为:

function f(){
    var y 
    其他代码
    var y = 10; 在这一行定义变量时其实相当于在第一行声明变量未赋值
}
1
2
3
4
5

全局变量

所有系统的函数和变量都绑定在window下

window.alert()
window.pageXOffset
1
2

自己私有的函数和变量为了减少冲突,最好绑定在自己的空间里

var MyFunction = {};			//定义自己的空间
MyFunction.name = 'Seul落花'		//绑定属性
MyFunction.add = function (a,b){	//绑定方法
    return a+b;
alert(MyFunction.add(10,20))//调用方法
}
1
2
3
4
5
6

常量(const):

用这个来定义常量.常量不可修改,常量名用大写命名

12.一些方法

Date包含的一些关于时间的方法

MyDate.getFullYear()//获得年
MyDate.getHours()   //获得月
MyDate.getDate()    //获得时
MyDate.getMinutes() //获得分
MyDate.getSeconds() //获得秒
MyDate.getDay()     //获得星期几
MyDate.getTime()    //获得时间戳()1970.1.1 00:00至今的毫秒数
new Date(时间戳)     //时间戳转时间
1
2
3
4
5
6
7
8

JSON是什么

是一个数据交换语言,用完全独立于编程语言的格式存储和表示数据,通过简单的符号来区别对象,数组和map

{}表示是一个对象
[]表示是一个数组
key:value表示键值对

let MyDate = new Date();
let myJson = JSON.stringify(MyDate)将一个对象转换成json字符串
console.log(myJson)

let myClass = JSON.parse(myJson)   将一个json转换成一个对象
console.log(myClass)
1
2
3
4
5
6
7
8
9
10

13.面向对象编程

原型

let Student = { 定义一个学生对象
    name:'落花',
    age:10,
    sex:'N'
}
let xiaoming = {定义一个小明对象

};
xiaoming._proto_ = Student;(把小明指向学生对象,类似于java的继承)

console.log(xiaoming)(小明就会拥有学生对象里面的方法)
1
2
3
4
5
6
7
8
9
10
11

Class继承(ES6)

14.操作BOM对象

javascript是用来操作浏览器对象的语言;

浏览器内核:

chrome(谷歌)

Safari(苹果)

Firefox(火狐)

三方浏览器:

qq\360\uc…

screen(获取电脑屏幕属性)

screen.height
1080
screen.width
1920
1
2
3
4

location(包含当前网页信息)

host: 	当前url所处的主机
href:	当前网页的位置
protocol: 协议
reload()刷新网页
assign()重定向网页
1
2
3
4
5

document(当前页面HTML DOM文档树)

document.getElementById()
document.getElementsByName()
document.getElementsByTagName()获得各种标签
document.getCookie()		获得cookie
1
2
3
4

history(浏览器历史记录)

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

15.操作DOM树对象

浏览器是一个树形结构,操作DOM对象就是改变这些节点

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

更新:更新DOM节点

遍历:遍历DOM节点

删除:删除节点

添加:增加新的DOM节点

要操作更新就要先获得节点再操作;

获得节点的方式

document.getElementById()
document.getElementsByName()
document.getElementsByTagName()同过各种方法获得节点
也可以通过父节点获取子节点
var childremns = father.children//获取该父节点下所有子节点
1
2
3
4
5

获取节点之后操作节点

节点变量.innerText='需要修改的值'//修改值
节点变量.innerHtml='需要修改的值'//可以写Html标签
1
2

操作css

变量.style.color//颜色
变量.style.fontsize//字体大小
变量.style.padding//边距
注:有的在css里用-连词符连接的需要改成驼峰命名
1
2
3
4

删除节点

步骤:获取父节点–通过父节点删除自己

父节点直接调用remove()方法即可删除自己

父节点.removeChil(id)					//通过id删除节点
父节点.removeChil(父节点.children[下标])//通过下标删除节点[没次删除下标数组下标都会向前移动一位]
1
2

通过js创建一个节点

var newp = document.createElement('a')
newp.id = 'newp'
newp.innerHTML = 'www.baidu.com'
1
2
3

插入节点

list.append(newp)
1

16.操作表单

表单包括什么:

文本框 text

下拉框 select

单选框 radio

多选框 checkBox

密码框 hidden

隐藏域 password

17.jQuery

安装:https://jquery.com/download/

下载引入到lib文件中

在html头位置添加

<script src="jQuery的路径"> </script>
1

jQuery的格式:

$(选择器).动作(函数方法体)
1

jQuery的选择器(同css)

id选择器:
$('#id')
标签选择器:
$('标签')
类选择器:
$(.类名)
1
2
3
4
5
6

事件

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】