• 第三阶段——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
  • 相关阅读:
    常用CDN
    SQL语句小结
    jQuery源码解析----domManip
    服务治理 SpringCloud Eureka
    docker容器操作
    docker镜像操作常用命令
    Maven
    Centos6解决网络不可达
    MyBatis
    SpringMVC
  • 原文地址：https://www.cnblogs.com/AFBF/p/14289973.html
Copyright © 2020-2023  润新知