第三阶段——jS——webApi编程——移动端事件+JQuery+js面向对象

移动端事件

基本内容：
https://www.cnblogs.com/AFBF/p/14289898.html

DOM:
https://www.cnblogs.com/AFBF/p/14289936.html

BOM
https://www.cnblogs.com/AFBF/p/14289964.html

移动端+JQuery+js面向对象
https://www.cnblogs.com/AFBF/p/14289973.html

触屏事件touch

image-20210105201746856

触摸事件对象

image-20210106101041226

image-20210106101115489

image-20210106101242568

移动端遇见的问题：

image-20210106101920082

image-20210106101930283

利用fastclick插件解决300ms延迟

image-20210106102155173

swiper插件使用

首先在swiper官网上下载swiper

打开dist文件夹，把CSS JS文件放在自己项目中

打开需要的demo网页查看源码，

把想要的demo的CSS样式，复制在自己写的页面上，只要banner的那一部分

然后demo下面有js代码，在把js代码一同复制到自己写的js文件中

即可，多多阅读swiper官网api

image-20210106105943674

移动端常见插件

image-20210106111439559

移动端常见的框架

image-20210106111811642

本地储存

image-20210106112421024

image-20210106112838086

localStorage

本地存储只能存储字符串的数据格式

数组对象转换为字符串格式：Json.stringify()

取出来的时候需要把字符串格式转换成数组的格式

json.parse()

image-20210106112952091

记住用户名案列

image-20210106113414493

JQuery

里面的this不能直接写，要写成这样image-20210106165127729

image-20210106161952272

image-20210106162132356

jquery基本使用

image-20210106162842871

image-20210106163140285

image-20210106163600464

image-20210106163627856

jquery选择器

image-20210106163848950

image-20210106164011978

jquery筛选器

image-20210106164405112

image-20210106164505557

image-20210106164604095

image-20210106165411631image-20210106165636656

找到众多上一辈中的某一辈可以使用parents("") image-20210107112932452

jquery的排他思想

image-20210106165957843

image-20210106170158566

jquery的链式编程

image-20210106172709972

jquery的样式操作

image-20210106173135784

image-20210106173257879

image-20210106173455755

image-20210106173539182

image-20210106174147673

jquery效果

image-20210106174820391

切换事件

image-20210107091753339

image-20210107091946534

image-20210107092059522

动画队列以及停止排队方法

image-20210107092219903

image-20210107092306185

淡入淡出效果

image-20210107092523027

动画效果

image-20210107093816724

image-20210107093932391

jquery获取元素的属性

image-20210107110400950

image-20210107110348694

image-20210107110554537

image-20210107110606537

image-20210107110758801

查看复选框被选择的个数用：

:checked

image-20210107111727681

jquery内容文本值

image-20210107111912487

image-20210107112203872

给值：image-20210107112633324

jQuery的元素操作

遍历元素

image-20210107113649492

image-20210107113853073

image-20210107114147264

image-20210107114313596

保留两位小数：image-20210107115349177

jquery创建元素

image-20210107164810212

image-20210107164830657

image-20210107164902552

jquery的尺寸

image-20210107165859041

jquery的位置

image-20210107170141002

image-20210107170244281

image-20210107170603921

跳回顶部案列

image-20210107170745282

image-20210107170852527

电梯导航案列

image-20210107181704338

image-20210107181715545

image-20210107182235016

jquery事件

jquery on 事件注册

image-20210107193000536

image-20210107193122470

image-20210107193203519

image-20210107193316469

on的事件委派

image-20210107193612361

image-20210107193558218

案例：微博发布（类似于论坛留言、评论）

在视屏里，需要自己看

off（）实现解绑操作

image-20210107200436612

自动出发时间 trigger()

image-20210107202043000

image-20210107202125605

jquery事件对象

image-20210107202930346

image-20210107202945571

jquery事件拷贝

image-20210108092148357

image-20210108092354820

image-20210108092635981

jquery实现多库共存

image-20210108093320812

jquery插件

image-20210108094402454

图片懒加载

在jquery插件库里面搜素懒加载下载

ctrl+h就是替换，可以把标签替换成想要的标签

全屏滚动

image-20210108100014791

JS的面向对象

基础知识

image-20210108163414583

在类里面添加方法

image-20210108163545253

image-20210108163556308

类的继承和关键字super

image-20210108182421948

image-20210108182827994

image-20210108185139168

super.方法：可以调用父类里面的方法

image-20210108190018448

image-20210108185943179

image-20210108192448070

image-20210108192820053

利用构造函数创建对象

image-20210108200343658

. image-20210108200232417

构造函数、实列、原型对象三者之间的关系

image-20210109094548275

原型链

image-20210109094843410

不管是构造函数的this还是原型里面的this，他指向的都是实列中

image-20210109101150067

ES5新增的方法

image-20210109101634231

image-20210109101721359

image-20210109101829322

筛选数组的方法

image-20210109101925361

查找特定的数组元素

image-20210109102218001

image-20210109105825340

image-20210109110252481

新增原来属性或者修改原有属性

image-20210109110552823

image-20210109110756881

函数的高阶用法

函数的定义方式

image-20210109111604681

函数的调用方式

image-20210109112102110

image-20210109112348013

image-20210109112418602

image-20210109112635121

image-20210109112649403

image-20210109112659208

image-20210109112710500

函数里this的指向问题

image-20210109155635921

call（）方法：改变函数的this指向

image-20210109155952811

image-20210109160152846

apply()改变函数内部指向

image-20210109160305010

bind改变函数内部指向

image-20210109160507452

image-20210109160710100

闭包

image-20210109165617598

闭包衍生了函数变量的作用于的范围

立即执行函数也称为小闭包。

image-20210109163711690

image-20210109164434169

递归

image-20210109170158830

image-20210109170215716

正则表达式

需要正则表达式的时候，可以直接百度，正则表达式在线测试,可以直接复制

image-20210111204112524

image-20210111204147318

image-20210111201100985

image-20210111201131442

image-20210111201150048

正则表达式的特殊字符

边界符

image-20210111201317487

image-20210111201438013

image-20210111201522540

精确匹配的意思是只有abc才正确

字符类

image-20210111201958837

image-20210111201910466

image-20210111201943848

image-20210111202133378

正则表达式中的取反意思

中括号里面有image-20210111202340608

image-20210111202319285

量词符

image-20210111202430159

image-20210111202708637

案列：验证输入用户名是否正确

image-20210111203047881

image-20210111203026276

括号意义

大括号{}：表示值出现的次数

中括号【】：表示字符合集，匹配中括号的任意字符，如果没有大括号，只能选择一个

小括号 （）：表示优先级image-20210111203347065

预定义类

image-20210111203619340

image-20210111203913770

文本域里面的敏感词替换

replace只能替换一次，需要在/？/的后面加上g才可以全部替换掉

image-20210111205410132

image-20210111205305622

image-20210111205547488

ES6

let

image-20210111212259179

image-20210111210339212

image-20210111210705496

这里面用let定义的变量是个块级作用域，作用范围只在所处的{}大括号内有效果

const

image-20210111212558658

image-20210111212641378

image-20210111212735120

let、const、var的区别

image-20210111212851556

箭头函数

image-20210111213721504

image-20210111213807186

image-20210111213658998

​

Array的扩展方法

find方法

image-20210111215427479

findindex（）

查找数组的值，返回的是数组的索引

image-20210111215703233

includes（）

image-20210111215813999

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/AFBF/p/14289973.html