JavaScript的不完全笔记

最新推荐文章于 2021-11-26 12:01:59 发布

Seul落花

最新推荐文章于 2021-11-26 12:01:59 发布

阅读量344

点赞数

分类专栏： java JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_46315535/article/details/121066472

版权

java 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

JavaScript

1 篇文章 0 订阅

订阅专栏

JavaScript（脚本语言）

1.在网页中引入javaScript语言

方式一：

内部标签

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

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

</head>
<body>

</body>
</html>

方式二:

外部引入

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

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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就会报错)

4.字符串

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

\是转义字符
\n换行
\t制表符
\r回车
\u#### 转unicode编码
\x##   转Ascll字符

多行字符串

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

字符串模板

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

字符串的方法

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份

字符串不可变

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('符号')	打印数组使用特定的符号连起来

多维数组

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

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)
})

8.Map\Set集合

js中没有list集合

Map的定义方式:

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

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

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

9.Iterator迭代器

遍历元素

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

遍历下标

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

10.函数(function)

定义在对象里面叫方法

定义在对象外面叫函数

绝对值函数:

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

return执行函数结束返回结果

另一种定义方式:

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

匿名函数:

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

或者赋值给对象
var fan = new fan;
	fan = function(x){
    里面写方法体
}

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

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

11.变量的作用域

变量一般先定义在function开头

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

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

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

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

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

全局变量

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

window.alert()
window.pageXOffset

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

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

常量(const):

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

12.一些方法

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

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

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)

13.面向对象编程

原型

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

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

console.log(xiaoming)(小明就会拥有学生对象里面的方法)

Class继承(ES6)

14.操作BOM对象

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

浏览器内核:

chrome(谷歌)

Safari(苹果)

Firefox(火狐)

三方浏览器:

qq\360\uc…

screen(获取电脑屏幕属性)

screen.height
1080
screen.width
1920

location(包含当前网页信息)

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

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

document.getElementById()
document.getElementsByName()
document.getElementsByTagName()获得各种标签
document.getCookie()		获得cookie

history(浏览器历史记录)

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

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//获取该父节点下所有子节点

获取节点之后操作节点

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

操作css

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

删除节点

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

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

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

通过js创建一个节点

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

插入节点

list.append(newp)

16.操作表单

表单包括什么:

文本框 text

下拉框 select

单选框 radio

多选框 checkBox

密码框 hidden

隐藏域 password

17.jQuery

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

下载引入到lib文件中

在html头位置添加

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

jQuery的格式:

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

jQuery的选择器(同css)

id选择器:
$('#id')
标签选择器:
$('标签')
类选择器:
$(.类名)

事件

Seul落花

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaScript的不完全笔记

JavaScript（脚本语言）1.在网页中引入javaScript语言方式一：内部标签<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script> 这里面写script代码 </script></head><
复制链接

扫一扫