资讯详情

JavaScript

JavaScript笔记

  • JavaScript
  • 一、输入输出
  • 二、变量
    • 2.1 let与var的区别
  • 三、数据类型
    • 3.1 number数字
      • 3.1.1 常用方法
      • 3.1.2 数字字符串
    • 3.2 string字符串
      • 3.2.1 常用方法
      • 3.2.2 字符串转数字
    • 3.3 boolean布尔
    • 3.4 arr数组
      • 3.4.1 常用方法
    • 3.5 object对象
      • 3.5.1 类
      • 3.5.2 遍历对象
  • 四、运算符
    • 4.1 前置递增
    • 4.2 后置递增
    • 4.3 比较运算符
    • 4.4 逻辑运算符
  • 四、流程控制
    • 4.1 if判断
    • 4.2 三元运算
    • 4.3 switch语句
    • 4.4 for循环
      • 4.4.1 for循环案例
    • 4.5 while循环
    • 4.6 do...while
    • 4.7 其他
  • 四、函数
    • 4.1 全局、局部变量
    • 4.2 预解析
    • 4.3 箭头函数
    • 4.4 立即执行函数
  • 五、内置对象
    • 5.1 Math对象
    • 5.2 Date对象
      • 5.2.1 返回当前总毫秒
    • 5.3 JSON对象
    • 5.4 RegExp对象
  • 六、DOM -1
    • 6.1 查找标签
      • 6.1.1 querySelector
      • 6.1.2 获取body与html元素
  • 七、事件 -1
    • 7.1 常用事件
      • 7.1.1 事件自动触发
  • 八、DOM -2
    • 8.1 表单操作
    • 8.2 获取上传文件
    • 8.3 CSS类操作
    • 8.4 CSS样式操作
    • 8.5 修改元素文本内容
    • 8.6 常用元素的属性操作
    • 8.7 属性值操作
      • 8.7.1 获取属性值
      • 8.7.2 操作属性和值
    • 8.8 节点操作
    • 8.9 动态创建标签
      • 8.9.1 删除节点
      • 8.9.2 复制/克隆节点
  • 九、DOM -3 案例
    • 9.1 商品全选
    • 9.2 商品详情页
  • 十、事件 -2
    • 10.1 解绑事件
    • 10.2 DOM事件流
      • 10.2.1 防止事件冒泡
      • 10.2.2 mouseenter
    • 10.3 事件对象
      • 10.3.1 常见的属性和方法
      • 10.3.2 事件委托
    • 10.4 鼠标事件
      • 10.4.1 **获取鼠标xy轴坐标**
      • **10.4.2 禁止鼠标右键**
      • 10.4.3 禁止复制鼠标
    • 10.5 键盘事件
      • 10.5.1 按下并松开按钮
      • 10.5.1 获取按下的
  • 十一、BOM
    • 11.1 BOM常用事件
      • 11.1.1 加载后执行
      • 11.1.2 缩放标签页
      • 11.1.3 定时器
        • 11.1.3.1 手机发送验证码
        • 11.1.3.2 实时显示当前时间
        • 11.1.3.3 省市联动
    • 11.2 location对象
    • 11.3 navigator对象
    • 11.4 history对象
  • 十二、JS同步异步
  • 十三、PC端网页特效
    • 13.1 元素偏移量offset
      • 13.1.1 offset与style的区别
    • 13.2 scroll系列
      • 13.2.1 scrollY
      • 13.2.2 以上总结
    • 13.3 案例
      • 13.3.1 缓动动画
  • 十四、移动网页特效
    • 14.1 触屏事件
      • 14.1.1 触摸事件对象
      • 14.1.2 案例
    • 14.2 FastClick插件
    • 14.3 Swiper轮播图插件
      • 14.3.1 superslide插件
      • 14.3.2 iscroll插件
    • 14.4 zymedia.js插件
  • 十五、本地储存
    • 15.1 sessionStorage
    • 15.2 localStorage

JavaScript

一、输入与输出

输入输出语句:

  • 浏览器弹出信息框

    //格式:alert(输出信息)
    alert('你冲QB吗')
    

image-20220522192753702

  • 浏览器弹出输入框

    //格式:prompt(输出信息,默认提示信息) 可只写一个参数
    prompt('你特么想色色!','不去不去怕了怕了')
    

  • 浏览器控制台打印输出信息(面向开发者)

    //格式:console.log(输出信息)
    console.log('张三已转账5000');
    

二、变量

变量在使用时分为两步:

  • 声明变量
  • 赋值

var是一个js关键字,用来声明变量(注:var全称variable变量的意思),使用该关键字声明变量后,计算机会自动为变量分配内存空间。

/*声明变量*/
var name;
/*赋值*/
name = 'liuyu'
/*查看控制台是否有打印输出*/
console.log(name);

声明变量与赋值,可以在一起书写,如下:

var name = 'liuyu'

var name = 'liuyu',age = 21,addr = 'shanghai';是、
console.log(name,age,addr);
/* 逗号隔开即可,不需要再重复写很多var,但其实声明变量是,不加var也可以的。 */

  • 数字字母下划线组成。
  • 区分大小写,不能以数字开头,不能是关键字,如var、for
  • 变量名必须具有一定的意义。
  • 驼峰命名法,首字母小写,后面单词首字母大写,如:searchVideoList

2.1 let与var的区别

  • var声明可是先使用再声明(不合理)
  • var声明过的变量可以重复声明(不合理)
  • 变量提升、全局变量、没有块级作用域等

所以在以后声明变量,尽量使用let

三、数据类型

Js数据类型整体分为两大类:

  • 基本数据类型

    基本数据类型
    number 数字型
    string 字符串型
    boolean 布尔型
    undefined 未定义型
    null 空类型
  • 引用数据类型

    引用数据类型
    object 对象
    function 函数
    array 数组

js与python一样,都是弱数据类型,变量到底属于那种类型,只有赋值之后,我们才可以确认。

而像Java这种强数据类型的,就需要在声明变量的时候就指定数据类型,如:

int age = 21

3.1 number数字

数字类型number,可以是整数、小数、正数、负数。

let age = 21;  //正整数
let weight = 65.3;  //小数
let temperature = -10 //负数

在js中,这些数据类型统称为数字类型number。

// 如何查看当前数据类型
typeof '变量名';

//声明变量age,并赋值18
let age = 18
//查看当前数据类型,并输出在控制台
console.log(typeof age);
	//控制台输出数据类型为number数字类型
	"number"  

3.1.1 常用方法

汇总一览:

(带括号的表示需要将数据作为参数传入,而非“.”调用)

函数名 实现效果
isNaN 判断是不是数字

数字转字符串

函数名
toString 数字转字符串
String() 强制转换为字符串
利用拼接空字符串

利用拼接空字符串

函数名:isNaN

用法:

let test = 123
console.log(isNaN(test));
	//控制台输出:“false”
	"false"

如果是数字为假,如果不是数字为真,注意这是反过来的。

3.1.2 数字转字符串

方法1:

函数名:toString

用法:

let num = 123;
console.log(typeof num.toString())
	//控制台输出:"string"
	"string"

数字类型的变量.toString()

方法2:

函数名:String() 强制转换

用法:

let num = 123;
console.log(typeof String(num))
	//控制台输出:"string"
	"string"

String( 变量 )

方法3:

利用拼接空字符串

用法:

let num = 123;
let num1 = num + ''
console.log(typeof num1)

原理:由于JS是弱数据类型,所以当两个不同数据类型相加时,会当做字符串相加。

''' 需要注意的是,利用拼接的方式实现Int转str,比如是使用的+加号,减乘除都不行。 +加号默认为字符串拼接 -减号 *乘号 / 除号 都是数字运算 '''

3.2 string字符串

只要是用引号引起来的都叫字符串,引号包括单引号( ‘’) 、双引号( “”)或反引号( ` )

Js中推荐使用

//声明字符串变量uname
let uname = 'liuyu'
//控制台打印变量的数据类型
console.log(typeof uname);
	//控制台输出数据类型
	"string"

js中不支持像python一样,可以使用三引号赋值一大段内容。

想要实现相同的效果需要使用“ ` ”反引号。

` 反引号,一般在键盘的左上角,ESC键的附近。

`` 又叫做模板字符串

let uname = ` 不可以瑟瑟,哥哥。 不可以呦,不可以。`
console.log(uname,typeof uname);

控制台输出:

不可以瑟瑟,哥哥。 不可以呦,不可以。 string

可以看到,打印完整的内容没有问题,打印数据类型结果是string。

let a = '1';
let b = '2';
let c = a + b;
console.log(c,typeof c);
	//控制台输出
	"12 string"

let a = '大家好,';
let b = '我是练习时长两年半';
let c = '我叫CXK。'
console.log(a + b + '的个人练习生,' + c);
	//控制台输出
	"大家好,我是练习时长两年半的个人练习生我叫CXK。"

模版字符串除了可以定义多行文本之外还可以实现格式化字符串操作

格式:

`${ 
           变量}内容${ 
           变量}.....`

let a = '大家好,';
let b = '我是练习时长两年半';
let c = '我叫CXK。'
console.log(`${ 
           a}${ 
           b}的个人练习生${ 
           c}`);

书写${} 会自动去前面找大括号里面的变量名对应的值 如果没有定义直接报错

如:

var s4 = `my name is ${ 
           namemmmmm}`
VM1140:1 Uncaught ReferenceError: namemmmmm is not defined
at <anonymous>:1:24

关于字符串的拼接,在python中不推荐你使用+做拼接,推荐使用join。

而在js中推荐你直接使用+做拼接,如 let c = name + age

要求: 实现浏览器输入"XXX",弹窗信息为"AAAXXX"。

在章节1中,我们知道了输入是用的prompt(‘msg’)

那么就有了下列代码

prompt('请输入要表白的人')

此时浏览器有了输入框,那么输入信息点击确定,数据如何展示呢?

console.log(prompt('请输入要表白的人'));

通过控制台打印可得,prompt会接收来自浏览器输入的数据,那么就有了系列代码

let uMsg = prompt('请输入要表白的人')
alert(`我爱你,${ 
           uMsg}`)

    1. ​ 方法名: charAt(索引) 返回指定位置上字符的索引号。

    1. ​ 方法名: charCodeAt(索引) 回去指定位置上字符的ASCII码。

    1. H5新增的方式, 字符串[索引]

3.2.1 常用方法

汇总一览:

函数名 实现效果
length 返回字符串元素个数
trim 返回去掉首尾空格之后的字符串
charAt 通过索引得元素
indexOf 通过元素的索引
concat 字符串拼接
slice 字符串切片
split 字符串分割
replace 字符串替换
toUpperCase 字符串大写
toLowerCase 字符串小写
match 提取字符串中值为某某的元素

字符串转数字类型:

函数名/其他 实现效果
parseInt 数字转字符串,取整数,不保留小数
parseFloat 数字转字符串,保留小数
Number 字符串强制转换成数字
利用字符串运算

1.计算长度

函数名: length

用法:

let uname = 'liuyu'
alert(uname.length)
	//最终效果为:浏览器弹出窗口,展示数据为5
	"5"

注意:length不加括号

空格也算长度。

2.去除空格

函数名:trim

用法:

let uname = ' liu yu '
console.log(uname.trim());
	//最终效果为:控制台打印数据为liu yu
	"liu yu"

注意:trim() 需要加空格

trim只能去掉左右两侧的空格

//移除左边的空白:'liu yu '
uname.trimLeft()	

//移除右边的空白:' liu yu'
uname.trimRight()	

3.按索引取值

函数名: charAt

用法:

let uName = 'liu yu'
console.log(uName.charAt(2));
	//控制台输出:u
	"u"

索引从0开始,按照下列对照。

l i u y u

0 1 2 3 4 5

4.字符串拼接

函数名: concat

用法:

​ 格式: 变量1.concat(变量2,变量3,…)

​ 表示字符串变量1与2、3进行拼接。

let uName = 'liuyu';
let uAge = '21';
let uAddr = 'shanghai'
// 变量uMsg,赋的值为UName+UAge+UAddr拼接而成的
let uMsg = uName.concat(uAge,uAddr);
console.log(uMsg);
	//控制台输出:liuyu21shanghai
	"liuyu21shanghai"

不通数据类型之间可以进行拼接吗?

let uName = 'liu'
let uAge = 719
let uMsg = uName.concat(uAge)
console.log(uMsg,typeof uMsg)
	//控制台输出:liu719 string
	"liu719 string"

答案是可以的,因为Js是弱类型,内部会自动转换成相同的数据类型做操作。

5.字符串切片

函数名: slice

作用:按照索引对字符串取某一段的数据

用法:

​ 格式: 字符串1.slice(起始索引,结束索引)

​ 索引从0开始,特点:顾头不顾腚,结束索引需要+1

let msg = '不可以瑟瑟呦哥哥'
console.log(msg.slice(1,6));
	//控制台输出:可以瑟瑟呦
	"可以瑟瑟呦"

slice(1,6),表示从第二个数字开始,到第六个数字之前结束,不包含第6个数字。

还以上面案例为主,如果要从第二位开始,结束索引为字符串的末尾,那么就应该是7+1=8

如果字符串很长,数不到结尾怎么办?

  • 1.使用length方法查询长度
  • 2.结束索引直接为空
let msg = '不可以瑟瑟呦哥哥'
console.log(msg.slice(1));
	//控制台输出:可以瑟瑟呦哥哥

那如果需要取这段字符串的第二位开始,到末尾的倒数第二位怎么办呢。

  • 1.还是使用length方法查询长度,然后修改下就好。
  • 2.结束索引为负数
let msg = '不可以瑟瑟呦哥哥'
console.log(msg.slice(1,-2));
	//控制台输出:可以瑟瑟呦
	"可以瑟瑟呦"

需要取到倒数第几位,就直接写负几就好。

6.字符串大写

函数名: toUpperCase

用法:

let msg = 'liuyu'
let bigMsg = msg.toUpperCase()
console.log(bigMsg);
	//控制台输出:LIUYU
	"LIUYU"

7.小写

函数名:toLowerCase

用法:

let msg = 'LIUyu'
console.log(msg.toLowerCase());
	//控制台输出:liuyu
	"liuyu"

8.分割

函数名:split

用法:

​ 格式 :split(以什么分割, 展示几位)

​ 默认分割完全部展示

let msg = '哥们哥们,上大学吗哥们,中国地质大学,国字头顶端211,人送外号五道口和尚庙,各式各样的猛男看个够。'
console.log(msg.split(',',2));
	//控制台输出:
	['哥们哥们', '上大学吗哥们']
	0: "哥们哥们"
	1: "上大学吗哥们"
	length: 2

分割完之后,会返回一个数组对象,数据类型就不再是string了。

let test = msg.split(',',2)
console.log(typeof test)
	//控制台输出:object
	"object"

9.通过元素找索引

函数名:indexOf

格式: indexOf( 要查找索引的元素 , 从那个索引处开始 )

用法:

let str = '我要当太空人,我爷爷奶奶可高兴了。'
console.log(str.indexOf('我',2));
	//控制台输出:
	"7"

因为指定了从索引从2开始,所以最终查询到该元素的索引为7.

10.替换字符串

函数名:replace

用法:

let str = 'abca';
console.log(str.replace('a','L'))
	//控制台输出:
	"Lbca"

replace只能替换第一个字符。

案例:将字符串"abandon"中的字符a去掉

let str = 'abandon';
while (str.indexOf('a') !== -1) { 
        
    str = str.replace('a','')
}
console.log(str)
	//控制台输出:
	"bndon"

代码流程:

  • 判断字符串内部没有没有元素值是a的。
  • 然后如果有,那么就进行替换,此时开头的a已经被替换了。
  • 替换过后的数据再次赋值给str,此时abandon已变成了bandon。
  • 循环体代码走完,继续返回上面的判断,如果还有a就接着替换。

函数名: match

// 提取变量str1中值为a的元素
let str1 = 'abandon'
console.log(str1.match(/a/))
	//控制台输出:
	"['a', index: 0, input: 'abandon', groups: undefined]"
	
console.log(str1.match(/a/g))
	//控制台输出:
	"['a', 'a']"
  • 前者表示,拿到一个就停止了。
  • 后者为全局匹配,g表示全局模式

3.2.2 字符串转数字

如何将字符串类型转换成数字类型呢

1.parseInt与parseFloat

字符串转数字

//函数名,两个都可以
parseInt()
parseFloat()

//测试
let age = '18.8'
console.log(typeof parseInt(age));
	//控制台输出数据类型为number数字类型
	"number"  

parseInt() 取整数,不保留小数。

parseFloat() 保留小数

注:

  • 只要字符串的开头有数字,那么就可以转,如下:

    let age = '123abc'
    console.log(parseFloat(age));
    	//控制台输出:“123”
    
  • 开头只要不是数字,则输出NaN,表示不是一个数字NOT A NUMBER,如:

    let age = 'abc123'
    console.log(parseFloat(age));
    	//控制台输出:"NaN"
    

函数名:Number

用法:

let str = '110'
console.log(typeof Number(str))
	//控制台输出:"number"

Number( 变量 )

用法:

let str = '110'
let str1 = str * 1
console.log(typeof str1)

原理:由于JS是弱数据类型,所以当两个不同数据类型相减、乘、除时,会当做数字运算

''' 需要注意的是,利用拼接的方式实现str转int,比如是使用的减乘除,+加号不行。 +加号默认为字符串拼接 -减号 *乘号 / 除号 都是数字运算 '''

3.3 boolean布尔

1.在python中布尔值是首字母大写的
	True
	False
2.但是在js中布尔值是全小写的
	true
	false
    
3.布尔值是false的有:
	空字符串、0、null、undefined、NaN

null与undefined

""" null 表示值为空 一般都是指定或者清空一个变量时使用 name = 'liuyu' name = null undefined 表示声明了一个变量 但是没有做初始化操作(没有给值) 函数没有指定返回值的时候 返回的也是undefined """

3.4 arr数组

数组(类似于python里面的列表)

定义数组

var lis = [11,22,33,44,55]
typeof lis  
	//查看类型
	"object"

数组中逗号隔开的数据叫做元素

如何取数组中的元素呢?

var lis = [11,'ABC',11.11,true]
lis[1]
	//控制台输出
	"ABC"
lis[-1]  # 不支持负数索引

索引与字符串一样,都是从0开始。

思路:

  • 设置一个初始值,如索引为0的元素。
  • 随后拿这个元素与其他元素进行比较。
  • 如果大于初始值,则重新赋值,直到再次遇到更大的值。
  • 或者没遇到更大的,那边代表当前就已经是最大值了。
let lis = [1,3,4,5,1,2,5,1,10,5,7,8,12,]
let maxNum = lis[0]
for (let i = 1; i < lis.length; i++) { 
        
    if (maxNum < lis[i]) { 
        
        maxNum = lis[i]
    }
}

console.log(maxNum)

利用索引来新增数组

let lis = [111,222];
lis[0] = 333;
console.log(lis);
	//控制台输出
	"[333, 222]"

lis[2] = 666;
console.log(lis);
	//控制台输出
	"[333, 222, 666]"

lis[6] = 888;
console.log(lis);
	//控制台输出
	"[333, 222, 666, 空 ã3, 888]"

根据以上代码可得:

  • 当索引已被占用时,会覆盖掉原来的数据。
  • 当索引没有被占用时,会新增数据。
  • 当索引不是连着号时,中间会保留空索引。

3.4.1 常用方法

汇总一览:

标签: 切片机电容器电容a3dd电容222

锐单商城拥有海量元器件数据手册IC替代型号,打造 电子元器件IC百科大全!

锐单商城 - 一站式电子元器件采购平台

函数名 实现效果
length