前端基础HTML5+CSS3+JavaScript+jQuery学习笔记

前端基础HTML5+CSS3+JavaScript+jQuery学习笔记

  • HTML5
  • CSS3
    • 1.CSS的三种导入方式
    • 2.选择器 【选择页面上的某一个或某一类元素】
    • 3.美化网页元素
    • 4.盒子模型
    • 5.浮动
    • 6.定位
  • JavaScript
    • 1.快速入门和数据类型
      • ①快速入门
      • ②数据类型
      • ③严格检查模式
      • ④数据类型详解
        • ④.1 字符串
        • ④.2 数组
        • ④.3 对象
        • ④.4 流程控制
        • ④.5 Map和Set
        • ④.6 iterator 遍历
    • 2.函数
      • ①定义函数
      • ②变量的作用域
        • ②.1 注意点
        • ②.2 全局变量
        • ②.3 局域作用域let和常驻const
      • ③方法
      • ④上面的代码
    • 3.内部对象
      • ①标准对象+Date
      • ②JSON
      • ③Ajax
    • 4.面向对象编程
      • ①什么是面向对象【关于原型对象】
      • ②Class
    • 5.操作BOM对象
    • 6.操作DOM对象
    • 7.操作表单【验证】
      • 提交前
      • 提交后
      • 点确定后
    • 8.jQuery

HTML5

前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第1张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第2张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第3张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第4张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第5张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第6张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第7张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第8张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第9张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第10张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第11张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第12张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第13张图片

CSS3

1.CSS的三种导入方式

前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第14张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第15张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第16张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第17张图片

2.选择器 【选择页面上的某一个或某一类元素】

前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第18张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第19张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第20张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第21张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第22张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第23张图片

3.美化网页元素

前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第24张图片

4.盒子模型

前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第25张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第26张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第27张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第28张图片

5.浮动

前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第29张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第30张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第31张图片

6.定位

前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第32张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第33张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第34张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第35张图片

JavaScript

1.快速入门和数据类型

①快速入门

前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第36张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第37张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第38张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第39张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第40张图片

②数据类型

前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第41张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第42张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第43张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第44张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第45张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第46张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第47张图片

③严格检查模式

前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第48张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第49张图片

④数据类型详解

④.1 字符串

前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第50张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第51张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第52张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第53张图片

④.2 数组

前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第54张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第55张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第56张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第57张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第58张图片

④.3 对象

前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第59张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第60张图片

④.4 流程控制

前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第61张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第62张图片

④.5 Map和Set

前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第63张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第64张图片

④.6 iterator 遍历

前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第65张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第66张图片

2.函数

①定义函数

前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第67张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第68张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第69张图片

②变量的作用域

②.1 注意点

①函数体中声明,则函数体外无效
②两个函数体中各自声明变量,就算相同名,也不会有冲突
③函数体内部的函数可以访问外部,而且若内外部的变量同名时,使用该函数体是优先使用内部
④提升作用域:!!所以建议养成规范习惯 吧所有的变量定义都写在函数头部,不要乱放,便于维护
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第70张图片

②.2 全局变量

前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第71张图片

②.3 局域作用域let和常驻const

前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第72张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第73张图片

③方法

前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第74张图片
在这里插入图片描述
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第75张图片

④上面的代码

前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第76张图片

3.内部对象

①标准对象+Date

前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第77张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第78张图片

②JSON

前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第79张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第80张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第81张图片

③Ajax

前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第82张图片

4.面向对象编程

①什么是面向对象【关于原型对象】

前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第83张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第84张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第85张图片

②Class

前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第86张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第87张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第88张图片

5.操作BOM对象

【window对象+screen+document[dom节点]+location】+【不推荐的两种】
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第89张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第90张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第91张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第92张图片

6.操作DOM对象

前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第93张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第94张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第95张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第96张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第97张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第98张图片

7.操作表单【验证】

前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第99张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第100张图片
在这里插入图片描述
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第101张图片

提交前

前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第102张图片

提交后

发现确定有触发函数 也就是onsubmit【等同onclike】
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第103张图片

点确定后

确实发生了action
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第104张图片

8.jQuery

前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第105张图片
在这里插入图片描述
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第106张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第107张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第108张图片
前端基础HTML5+CSS3+JavaScript+jQuery学习笔记_第109张图片

你可能感兴趣的:(前端基础HTML5+CSS3+JavaScript+jQuery学习笔记)