HTML、CSS、JavaScript
# 本阶段课程内容安排 * 前端 * django框架 * bbs项目 # 今日内容概要 * 前端简介 * 手撸一个简易的web服务端 * HTTP协议 * HTML超文本标记语言 没有任何的逻辑，单纯的就是记忆什么是什么的过程 注释 语法结构 head内常用标签 body内常用标签 列表标签 表格标签 表单标签 ... * CSS层叠样式表 就是给HTML标签设置样式的 如何查找标签 如何给标签设置样式 # 今日内容详细 ### 前端简介 ```python 前端你可以理解为是跟用户直接打交道的交互界面 后端你可以理解为是幕后操作者不直接跟用户打交道 学习前端的流程 前端基础之三剑客(必学) HTML CSS JavaScript 前端框架 jQuery Bootstrap fontawesome sweetalter 三剑客详解 HTML(网页的骨架) CSS(网页的样式) JavaScript(网页的动态效果) # eg:蜡笔小新一丝不挂的站在你的面前(HTML) # 给他穿上裙子，涂上口红，穿上高跟鞋(CSS) # 给他一根钢管，让他跳起来(JS) ``` ### web服务端 ```python 软件开发架构 cs架构 bs架构 bs架构本质也是cs架构 # 建议:养成看源码的习惯 ``` ### HTTP协议 ```python 规定了服务端与浏览器之间数据传输的格式 1.四大特性 1.基于TCP/IP作用于应用层之上的协议 2.基于请求响应 3.无状态 cookie session token 4.无连接(短连接) 长连接(websocket:服务端主动给客户端发送消息) 2.数据格式 请求格式 请求首行(请求方式) 请求头(一大堆K:V键值对) (这里必须要有一个换行符) 请求体(携带的数据) eg:post请求提交数据 响应格式 响应首行(协议版本 响应状态码) 响应头(一大堆K:V键值对) (这里必须要有一个换行符) 响应体(携带的数据) 案例1:浏览器要展示给用户看的数据 3.响应状态码 用一串简单的数字来表示一串中文意思 1XX:服务端已经接受到你的数据正在处理你可以继续提交 2XX:服务端成功返回响应数据 3XX:重定向 4XX:403请求无权限、404请求资源不存在 5XX:500服务器内部错误 不同的公司还会自己定制自己的响应状态码 """ 请求方法 1.get请求 朝别人要数据(也可以携带额外的数据条件) 数据是直接放在url后面携带的 url?username=jason&password=123 get请求携带的数据大小是有限制的，其次get请求只能携带一些不敏感的信息，因为一眼就能看到 eg:浏览器地址栏属于网址朝服务端所要对应的数据 2.post请求 朝别人提交数据 eg:用户名登录 数据是放在请求体里面的，并且数据大小理论上是没有限制的 """ ``` ### HTML简介 ```python 超文本标记语言 用来构建网页的骨架，可以毫不夸张的说，如果你想让浏览器展示你的页面，那么你就必须书写HTML(所有浏览器能够展示出来的页面内部其实都由HTML构成的) 注意HTML的学习是非常简单的，它没有任何的逻辑，我们只需要知道每一个标签表示的意思即可 h1 标题标签 a 链接标签 img 图片标签 ``` ### web服务的本质 ```python 1.浏览器地址栏输入网址 2.朝服务端发送请求 3.服务端发送响应 4.浏览器接收响应展示结果(文件) 文件 前端HTML文件的后缀名是.html ``` ### HTML语法结构 ```python 书写前端页面，我们一般会创建.html结尾的文件 <html> <head></head> <body></body> </html> head内书写的内容一般都不是给人看的 body内书写的内容是浏览器直接展示给人看的 ``` ### HTML注释 ```python 单行 <!--单行注释--> 多行 <!-- 多行注释 多行注释 多行注释 --> 由于html没有逻辑并且标签就那么多，而一个html文件内html标签非常的多并且重复，我们在维护修改的时候回非常的难找 <!--导航条开始--> <!--导航条结束--> <!--左侧菜单开始--> <!--左侧菜单结束--> ``` ### 标签的分类01 ```python 1.单标签(自闭和标签) <img/> 2.双标签 <a></a> # 在HTML中标签之间是可以相互嵌套的(但是需要遵循一些规范) 类似于俄罗斯套娃 ``` ### head内常用标签 ```python title 控制网页标题 style 内部支持直接书写css代码 link 可以引入外部css文件 script 内部可以直接书写js代码也可以导入外部js文件 <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> <meta name="description" content="老男孩教育Python学院"> ``` ### body内基本标签 ```python h1~h6 多级标题标签 s 删除线 b 加粗 i 斜体 u 下划线 p 段落标签 br 换行 hr 分割线 ``` ### 标签的分类02 ```python 1.块儿级标签 h1~h6 p 独占一行 2.行内标签 u i s b 自身文本多大就占多大 块儿级标签内部可以嵌套其他任意的标签(p标签除外) p标签只能嵌套行内标签 行内标签只能嵌套行内 """ 前端不像后端逻辑那么严谨 有时候你不按照规范写也不会有问题 """ ``` ### body内常用标签 ```python 链接标签a(行内标签) 默认颜色的变化 蓝色:之前没有访问过 紫色:之前访问过 默认是在当前页面跳转，我们可以修改 target="_self" 当前页面 target="_blank" 新建页面 a标签除了可以有链接功能之外还具有锚点功能 href里面放其他标签的# + id值 图片标签img(行内标签) <img src="111.jpg" alt="这是个美女" title="很有气质" height="200" width='200'> src 图片地址 alt 图片加载不出来 提示的信息 title 鼠标悬浮上去之后提示的信息 height/width 用于调节图片的大小，修改一个另外一个自动等比例缩放 div 块儿级标签 主要用于前期页面的布局 span 行内标签 主要应用文本占位 ``` ### HTML标签重要参数 ```python id 由于同一个前端页面文件内相同的标签太多了 为了作区分，可以给标签设置id，类似于是标签的身份证号 即在同一个页面内标签的id不能重复 class 你可以看成是python里面的面向对象的继承 一个标签可以有多个类属性值，相当于继承了多个类属性特点 ``` ### 特殊符号 ```python 内容 对应代码 空格 > > < < & & ¥ ¥ 版权 © 注册 ® ``` ### 列表标签 ```python 1.无序列表(知道) ul li <ul> <li>111</li> <li>222</li> <li>333</li> </ul> 只要是有顺序排列的基本上使用的都是无序列表 2.有序列表(了解) ol li 3.标题列表(了解) dl dt dd ``` ### 表格标签 ```python table thead 表头 tr 一个tr就表示一行内容 th/td 单元格的数据 tbody 表单 tr td border: 表格边框. cellpadding: 内边距 cellspacing: 外边距. width: 像素 百分比.（最好通过css来设置长宽） rowspan: 单元格竖跨多少行 colspan: 单元格横跨多少列（即合并单元格） ``` ### 表单标签 ```python 能够将前端获取到的用户数据发送给后端 主要用于注册登录功能界面 <form action=""></form> label标签的作用 <!--label与input结合使用方式1--> <label for="d1">username: <input type="text" id="d1"> </label> <!--label与input结合使用方式2--> <label for="d2">password:</label> <input type="text" id="d2"> input标签 input标签可以说是前端的变形金刚 type属性 text 普通文本 password 加密展示 email 邮箱格式 date 日期格式 radio 单选 checkbox 多选 submit 提交按钮 button 普通按钮 reset 重置按钮 select标签 下拉框，默认是单选可以改为多选 一个个选项就是一个个option标签 textarea标签 获取大段文本内容 ``` ### 表单重点知识 ```python 1.form表单中的参数 action 控制数据的提交路径 method 控制数据的提交方式get/post # 注意form表单默认是get请求 enctype 控制数据的编码格式urlencoded/formdata 2.用户获取用户数据的标签都应该有name属性 其实我们可以将获取用户数据的标签看成是一个构造字典的工厂 用户的数据就类似于是字典的value而name参数指定的数据就类似于字典的key 3.默认值 radio和checkbox统一使用 checked="checked" option使用 selected="selected" 如果参数名和参数值相同，则可以直接简写 checked="checked" 简写 checked selected="selected" 简写 selected 4.能够触发form表单提交数据的标签有两个 <input type="submit" value="注册"> <button>我行!</button> ``` ### CSS层叠样式表 ```css 给HTML标签设置样式的 css语法结构 选择器 {属性名1:属性值1;属性名2:属性值2} 注释 /*注释*/ 具体使用 /*这是小米官网首页的css样式表*/ /*导航条样式开始*/ 控制导航条样式的css代码 /*导航条样式结束*/ 引入方式 1.直接在style标签内部书写 <style> h1 { color: red; } </style> 2.利用link标签导入外部css文件 <link rel="stylesheet" href="mycss.css"> 3.行内式(使用频率较低) <h1 style="color: yellow">今天有点困!</h1> 最正规的写法就是单独开设一个css文件，但是我们为了教学方便就直接在style标签内书写 ``` ### CSS学习流程 ```python 虽然css是用来给html标签设置样式的，但是一个html文件内相同的标签非常的多，如何做到给相同的标签设置不同的样式？？？ eg:第一个p设置为红色，第二个p标签设置为蓝色 在学习如何给标签设置样式之前我们应该先学会"如何查找标签" ``` ### CSS选择器 ```python # 基本选择器 id选择器 #d1 {} class选择器 .c1 {} 标签选择器 p {} 通用选择器(了解) * {} # 组合选择器 后代选择器 div p {} 儿子选择器 div>p {} 毗邻选择器 div+p {} 弟弟选择器 div~p {} # 属性选择器 /*1.将所有含有name属性的标签文本颜色设置为红色*/ /*属性选择器*/ /*[name] {*/ /* color: red;*/ /*}*/ /*2.将所有含有name属性并值为jason的标签文本颜色设置为蓝色*/ /*[name='jason'] {*/ /* color: blue;*/ /*}*/ /*3.将所有含有name属性并值为jason的p标签文本颜色设置为蓝色*/ /*p[name='jason'] {*/ /* color: yellowgreen;*/ /*}*/ ``` ### 分组与嵌套 ```python 多种选择器之间可以相互混用 /* 分组*/ /* div,p,span {*/ /* color: yellow;*/ /* }*/ /* 嵌套*/ .c1,#d1,span { color: yellowgreen; } ``` ### 伪类选择器 ```python 以a标签为例 /*鼠标悬浮上去之后颜色改变*/ a:hover { color: yellowgreen; } ``` ### 伪元素选择器 ```python p:first-letter { font-size: 48px; color: red; } p:before { content:"*"; color:red; } p:after { content:"*"; color:red; } before和after多用于清除浮动 ``` ### 选择器优先级 ```python 1.当选择器相同的情况下我们采用的是就近原则 谁离标签越近听谁的 2.选择器不同的情况下 是有优先级之分 行内选择器 > id选择器 > 类选择器 > 标签选择器 ``` ### 给标签设置样式 ```python 宽和高 width属性可以为元素设置宽度。 height属性可以为元素设置高度。 块级标签才能设置宽度，内联标签的宽度由内容来决定。 字体大小 font-size 文本颜色 方式1 color:red 方式2 color:rgb(126,111,234) 方式3 color:#4d4d4d 方式4 color:rgba(126,111,234,0.4) """ 颜色的获取方式 1.pycharm提供的取色器 2.微信或者qq提供的截图功能 """ ``` ### 文字属性 ```python text-align:center 居中对齐 a { text-decoration: none; } ul { list-style-type: none; list-style: none; } ``` ### 背景属性 ```python backgroud作为前缀 规律: 如果多个参数的前缀都是一样的，那么一般情况下都可以有简写的形式，就是以该前缀为参数 div { background-image: url("111.jpg"); height: 800px; width: 800px; background-repeat: no-repeat; /*background-repeat: repeat-x;*/ /*background-repeat: repeat-y;*/ background-color: gray; /*background-position: center center;*/ background-position: 100px 100px; } div { height: 800px; width: 800px; background: url("111.jpg") gray no-repeat center center; } 利用背景图片布局 background-attachment: fixed; ``` ### 边框 ```python div { border-style: solid; border-color: red; border-width: 5px } div { border:dashed 5px blue } 画圆 ``` ### display展示 ```python 用于控制HTML元素的显示效果。 值 意义 display:"none" HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。 display:"block" 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。 display:"inline" 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。 display:"inline-block" 使元素同时具有行内元素和块级元素的特点。 ``` ### 补充 ```python HTML标签即可以设置自带的属性也可以设置自定义的属性(大白话就是啥都可以写) <p name='jason' password=123>111</p> ``` ### 参考文章 ```python https://www.cnblogs.com/Dominic-Ji/p/10864457.html ```
[TOC] # 上周内容回顾 * HTTP协议 * HTML简介 * HTML注释 * HTML的语法结构 * head内常用标签 * body内常用标签 * 标签的分类 * 特殊符号 * 常用标签 * 列表标签 * 表格标签 * 表单标签 ```python form标签 action method enctype input标签的type属性 text password email date radio checkbox file reset submit(能够触发form表单的提交动作) button hidden(隐藏) select标签 option textarea标签 获取大段文本 button标签 能够触发form表单的提交动作 补充 获取用户数据的标签都应该有name属性相当于字典的key 用户的数据会自动放入标签的value属性中相当于字典的value ``` * css简介 * css的注释 * css的语法结构 * css的三种引入方式 ```python 最正规的写法应该做到代码的解耦合 HTML与CSS分开 我们为了便于学习，直接写在了同一个文件内 ``` * css选择器 * css基本选择器 ```python # id选择器 #d1 {color:red} # class选择器 .c1 {color:red} # tag选择器 p {color:red} # 通用选择器 * {color:red} ``` * css组合选择器 ```python 1.后代选择器 2.儿子选择器 3.毗邻选择器 4.弟弟选择器 ``` * css分组与嵌套 * css伪类与伪元素选择器 ```python a:hover {color:red} ``` * 选择器的优先级 ```python 1.选择器相同的时候采用就近原则 2.选择器不同的情况下 行内选择器 > id选择器 > 类选择器 > 标签选择器 ``` * 字体属性 * 文本属性 * 背景属性 * 边框属性 # 本周内容概要 * 盒子模型 * 浮动 * 清除浮动带来的影响 * 溢出属性与透明度 * 利用HTML和CSS搭建一个简易版本的博客界面 * JavaScript简介 * JS数据类型 * DOM操作 * BOM操作 * jQuery简介 * 标签查找 * 事件绑定 # 本周内容详细 ### 盒子模型 ```python 任何的标签都有盒子模型 比喻: 盒子模型类似于快递盒 1.快递盒与快递盒之间的距离(外边距 margin) 2.快递盒盒子的厚度(边框 border) 3.盒子内部物体距离盒子内部外壳的距离(内边距/内填充 padding) 4.内部物体的大小(content 文本内容) 实际: 1.外边距其实就是标签与标签之间的距离 2.标签的边框厚度 3.标签内文本与标签边框之间的距离 4.标签内填写的内容 注意: body标签默认有8px的外边距，我们在构建网页的时候基本上都会将改外边距去除 body { margin-top: 0; margin-left: 0; margin-right: 0; margin-bottom: 0; } 可以简写 body { margin:0 0 0 0; } 顺序 /*1.上右下左 顺时针*/ /*margin: 1px 2px 3px 4px;*/ /*2.上 左右 下*/ /*margin: 1px 2px 3px;*/ /*3.上下 左右*/ /*margin: 1px 2px;*/ /*4.影响四边*/ margin: 10px; /*padding规律跟marigin一致 也有四种写法 也是以用的顺序影响*/ padding: 10px; ``` ### 浮动 ```python 主要用于前期的页面布局 #d1 { /*使用频率不高*/ /*display: inline-block;*/ float: left; } ``` ### 浮动的影响 ```python 浮动的元素是脱离正常文档流，会造成父标签塌陷的问题 1.方式1(推导) 再加一个专门用来撑的div #d3 { height: 100px; } <div id="d4"> <div id="d1"></div> <div id="d2"></div> <div id="d3"></div> </div> 2.方式2(推导) 利用clear参数 #d3 { clear: both; } 3.方式3(结论) 无论你是业余前端还是专业前端基本上都是用方式3 你只需要提前写好固定的解决浮动带来的负面影响的效果，之后 """谁塌陷了就给谁加上clearfix类属性即可""" .clearfix:after { content: ''; display: block; clear: both; } <div id="d4" class="clearfix"> <div id="d1"></div> <div id="d2"></div> </div> ``` ### 溢出属性 ```python p { /*overflow: hidden;*/ /*overflow: scroll;*/ overflow: auto; } 利用溢出属性制作圆形头像 #d1 { height: 200px; width: 200px; border: 5px solid white; border-radius: 50%; overflow: hidden; box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4); } img { /*max-width: 100%;*/ width: 100%; } <div id="d1"> <img src="111.jpg" alt=""> </div> ``` ### 定位 ```python 1.static静态定位 所有的标签默认都是静态定位，意思就是无法移动位置 如果你想要通过得的方式移动某个标签，就必须先将改标签设置成不是static定位 2.relative相对定位 相对于标签原来的位置 3.absolute绝对定位 相对于已经定位过的父标签(不需要考虑其他标签) eg:小米网购物车 4.fixed固定定位 固定在浏览器窗口某个位置不动 eg:小米网右下方多个小图标 position: relative; position: relative; position: absolute; position: fixed; ``` ### 是否脱离文档流 ```python 位置改变之后，原来的位置还在不在(占不占用) 脱离文档流 1.浮动 2.绝对定位 3.固定定位 不脱离文档流 1.相对移动 补充: 浏览器默认是文本优先展示的，即使你将标签挡住了 如果被挡住的标签内部有文本，浏览器会想方设法的将文本展示出来 ``` ### z-index ```python <style> .cover { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(128,128,128,0.4); z-index: 999; } .modal { height: 200px; width: 400px; background-color: white; position: fixed; top: 50%; left: 50%; z-index: 1000; margin-top: -100px; margin-left: -200px; } </style> <div class="cover"></div> <div class="modal"> <p>username:<input type="text"></p> <p>password:<input type="text"></p> <button>提交</button> </div> ``` ### opacity ```python opacity既可以改变颜色也可以改变文本 而rgba只针对颜色 ``` ### 小练习 ```python 1.手撸前端页面不要上来就开始写，先用div画出页面结构 2.先写出原生的HTML骨架 3.书写对应的css样式 ``` ### JavaScript ```python 也是一门编程语言 JavaScript之所以有Java的前缀，主要就是为了蹭Java的热度 ECMAScript跟JavaScript JavaScript 是脚本语言 JavaScript 是一种轻量级的编程语言。 JavaScript 是可插入 HTML 页面的编程代码。 JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。 JavaScript 很容易学习。 ``` ### 注释 ```python 1.单行注释 // 2.多行注释 /**/ ``` ### 引入方式 ```python 1.script标签内部直接书写js代码 2.引入外部js文件 ``` ### 结束符 ```python js语言的结束符号是分号 但是你在编写js代码的时候如果不加分号，也不会报错 alert(123); ``` ### 了解 ```python 搞前端的人想着一统天下，前端后端全部自己用js写 基于上述思想搞出了个node.js 支持js代码跑在后端服务器上，但是使用缺陷很多使用频率低 ``` ### js编写平台 ```python 1.支持代码编写的软件 2.浏览器直接充当编辑器使用 ``` ### 变量的声明 ```python 在js中定义变量需要使用关键字 # 在python中 username = 'jason' # 在js中需要使用关键字(var let) var username = 'jason' let username = 'egon' 定义常量 const pi = 3.14 """ let是ecs6新语法，使用它可以区分全局变量和局部变量的问题 """ var i = 10; for (var i=0;i<5;i++){ console.log(i) } i 5 var j = 10; for(let j=0;j<5;j++){ console.log(i) } j 10 ``` JS中的数据类型 ```python 数值类型(包含了我们之前在python中学习的整型和浮点型) 字符类型 布尔值类型 null与undefined 自定义对象([]，{}) 内置对象 # 1.如何查看数据类型 typeof # 1.数值类型中的NaN 在数据类型转换的过程中，如果转换的对象无法变成数字就会返回NaN # 2.字符类型 三种定义字符串的方式 var name = 'jason' var name = "jason" var name = `jason666` """ 第三种也叫 模板字符串 var username = 'jason'; var age = 18; var res = ` my name is ${username} and my age is ${age} ` res " my name is jason and my age is 18 " """ # 在js中字符串的拼接推荐使用加号 # 3.布尔值 在js中布尔值全部都是小写而python中是首字母大写 true false # ""(空字符串)、0、null、undefined、NaN都是false。 # 4.null与undefined null表示值为空 undefined只定义了没有给过值 # 5.对象 # 5.1 数组 var l = [1,2,3,4,5] # js中的数组表现形式上跟python列表很像 var l1 = [111,222,333,444,555,666] l1.forEach(function(data,index){ console.log(data,index) }) # 第一个是元素本身 第二个是索引值 第三个是元素来自于谁 l1.forEach(function(data,index,arr){ console.log(data,index,arr) }) 1.splice(1,2) # 第一个起始位置 第二个是删除的元素个数 (2) [222, 333] l1 (4) [111, 444, 555, 666] l1.splice(0,3,666) # 第三个参数是要添加的元素 # 5.2自定义对象 # 第一种定义方式 var obj = {'username':'jason',"password":123} undefined typeof obj "object" obj['username'] "jason" obj.username "jason" # 第二种定义方式 var obj1 = new Object() undefined obj1 {} obj1.username = 'jason' "jason" obj1.password = 123 123 obj1 {username: "jason", password: 123} ``` ### 运算符 ```python var x=10; var res1=x++; var res2=++x; res1; 10 res2; 12 # 比较运算符 # 弱等于 5 == '5' # js会自动转换成相同的数据类型再做比较 # 强等于 5 === '5' # 不让js自动帮你转换 # 逻辑运算符 在python中 在js中 and && or || not ！ ``` ### 流程控制 ```python """ 固定句式 关键字(条件){子代码} """ var a = 10; if (a > 5){ console.log("yes"); }else { console.log("no"); } var a = 10; if (a > 5){ console.log("a > 5"); }else if (a < 5) { console.log("a < 5"); }else { console.log("a = 5"); } # 星期几是从0-6 0表示星期日 var day = new Date().getDay(); switch (day) { case 0: console.log("Sunday"); break; # 如果不写就会一致往后执行 case 1: console.log("Monday"); break; default: # 没有匹配项的时候走的 console.log("...") } b = 10 if b > 5: print('yes') else: print('no') ``` ### 循环结构 ```python """ for(条件){ 子代码 } """ var l = [111,222,333,444,555,666,777] for(let i=0;i<l.length;i++){ console.log(l[i]) } """ while(条件){ 子代码 } """ var i = 0; while (i < 10) { console.log(i); i++; } """ 三元运算 在python中 x = 10 res = '哈哈哈' if x > 20 else '嘿嘿嘿' print(res) 在js中 var a = 1; var b = 2; var c = a > b ? a : b //这里的三元运算顺序是先写判断条件a>b再写条件成立返回的值为a,条件不成立返回的值为b;三元运算可以嵌套使用； var a=10,b=20; var x=a>b ?a:(b=="20")?a:b; x 10 """ ``` ### 函数 ```python # 在python定义函数 def index(x,y): return x,y # 在js中 """ function(参数){函数体代码} """ function(x,y){ return x,y } # arguments关键字 可以获取到调用函数的时候所有的实际参数 是一个数组 # 箭头函数 箭头的左边是参数右边是返回值 var f = function(v){ return v; } // 等同于 var f = v => v; var sum = (num1, num2) => num1 + num2; // 等同于 var sum = function(num1, num2){ return num1 + num2; //这里的return只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中 } ``` ### 内置对象 ```python var d1 = new Date(); console.log(d1.toLocaleString()); var d = new Date(); //getDate() 获取日 //getDay () 获取星期 //getMonth () 获取月（0-11） //getFullYear () 获取完整年份 //getYear () 获取年 //getHours () 获取小时 //getMinutes () 获取分钟 //getSeconds () 获取秒 //getMilliseconds () 获取毫秒 //getTime () 返回累计毫秒数(从1970/1/1午夜) JSON对象 # 在python中 import json json.dumps() # 序列化 json.loads() # 反序列化 # 在js中 JSON.stringify() # 序列化 JSON.parse() # 反序列化 RegExp对象 # 在js中定义正则表达式有两种方式 // 定义正则表达式两种方式 var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}"); var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/; // 正则校验数据 reg1.test('jason666') reg2.test('jason666') // 全局模式下 var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g undefined var info = 'egondsb' undefined reg2.test(info) true reg2.test(info) false reg2.test() # 不给默认匹配的是undefined true var r = /undefined/ undefined r.test() true r.test('undefined') true typeof undefined "undefined" ``` BOM操作 ```python 浏览器对象模型 window.open('https://www.baidu.com','','height=400px,width=400px') window.open('https://www.baidu.com','','height=400px,width=400px,top=200px,left=200px') window.close() # 关闭当前界面 window.history.forward() // 前进一页 window.history.back() // 后退一页 window.location.href 获取URL window.location.href="URL" // 跳转到指定页面 alert(123) confirm('你确定吗') prompt('写点什么吧') 计时器相关 // 3秒之后再执行函数 // t = setTimeout(f1,3000); // 清除定时器 // clearTimeout(t) // 每个3秒触发一次 res = setInterval(f1,3000); // 清除定时器 res = clearInterval(res) ``` DOM操作 ```python # 查看标签 document.getElementById('d1') # 直接返回标签对象 document.getElementsByClassName('c1') # 返回的是数组 document.getElementsByTagName('p') # 返回的是数组 # 简介查找 parentElement 父节点标签元素 children 所有子标签 firstElementChild 第一个子标签元素 lastElementChild 最后一个子标签元素 nextElementSibling 下一个兄弟标签元素 previousElementSibling 上一个兄弟标签元素 var aEle = document.createElement('a'); aEle.href = 'https://www.baidu.com' aEle.setAttribute('username','jason') <a href="https://www.baidu.com" username="jason"></a> aEle.innerText = '百度' dEle = document.getElementById('d1') dEle.appendChild(aEle) """ 在给标签命名的时候我们习惯使用 xxxEle的方式 divEle pEle aEle """ divEle.innerHTML " <span class="c2">sss</span> <p class="c1">ppp</p> " divEle.innerHTML = 'hahahahahah' "hahahahahah" divEle.innerText = '<h1>111</h1>' # 无法识别HTML并自动转换 "<h1>111</h1>" divEle.innerHTML = '<h1>111</h1>' # 可以识别并转换 "<h1>111</h1>" # 获取input里面的用户数据 inputEle = document.getElementById('d1') inputEle.value "weeqewqewqewqewewqeqw" inputEle.value = 'jason' "jason" var input1Ele = document.getElementById('d2') undefined d2.value "C:\fakepath\readme.txt" d2.files FileList {0: File(69), length: 1} d2.files[0] # 文件对象 """ with open() as f: pass """ ``` ### 类属性操作 ```python divEle.classList DOMTokenList(3) ["c1", "bg-red", "bg-green", value: "c1 bg-red bg-green"] divEle.classList.add('ccc') undefined divEle.classList.remove('bg-green') undefined divEle.classList.contains('ccc') true divEle.classList.toggle('bg-green') # 有则删除无则添加 true divEle.classList.toggle('bg-green') false ``` ### CSS样式操作 ```python js操作css样式统一语法 """ 标签对象.style.属性 """ obj.style.backgroundColor="red" obj.style.margin obj.style.width obj.style.left obj.style.position ``` ### 事件 ```python 给不同的标签绑定不同的事件:点击不同的标签可以触发不同的动作 # js绑定事件的方式 """ 标签对象.事件名 = function(){ 事件对应的具体步骤 } """ # 两种方式 <button onclick="f1()">按钮1</button> <button id="d1">按钮2</button> <script> function f1() { alert('按钮一被点击了') } var bEle = document.getElementById('d1'); bEle.onclick = function () { alert('按钮2被点击了') } </script> ``` ### 事件案例 ```python 参考文件 ``` ### 补充 ```python """ 针对js代码，无论是引入外部js文件还是script标签内直接书写 我们都建议你放在body内的最下面 """ ```
[TOC] # 上周内容回顾 * 盒子模型 * 浮动 * 定位 * 透明度、z-index * 搭建了一个简易的博客园界面 * js简介 * 数据类型 * BOM与DOM操作 * 事件(自己动手写一下) # 本周内容概要 * jQuery框架 内部封装了js代码，并且提供了更多方法 * Bootstrap框架 如何复制粘贴加简单的修改 * Django框架 先自己手写一个简易版本的web框架 django简介 * 主要文件介绍 * django小白必会三板斧 # 本周内容详细 ### jQuery框架 ```python jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“ 使用JQuery需要注意的事项 ***************************** 一定要确保先导入JQuery之后才能使用 ***************************** 下载 https://jquery.com/ 使用 方式1:(不受网络限制) 新建一个js文件，将代码拷贝进去即可 方式2:(引入CDN) 必须要有网 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 语法结构 $(选择器).action() 等价于 jQuery(选择器).action() ``` ### 基本选择器 ```python $('#d1') $('.c1') $('p') 使用jQuery查找出来的结果都是一个数组对象(jQuery对象) $('p#d1') $('p.c1') ``` ### 组合选择器 ```python $("x y");// x的所有后代y（子子孙孙） $("x > y");// x的所有儿子y（儿子） $("x + y")// 找到所有紧挨在x后面的y $("x ~ y")// x之后所有的兄弟y ``` ### 基本筛选器 ```python :first // 第一个 :last // 最后一个 :eq(index)// 索引等于index的那个元素 :even // 匹配所有索引值为偶数的元素，从 0 开始计数 :odd // 匹配所有索引值为奇数的元素，从 0 开始计数 :gt(index)// 匹配所有大于给定索引值的元素 :lt(index)// 匹配所有小于给定索引值的元素 :not(元素选择器)// 移除所有满足not条件的标签 :has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找) $("div:has(h1)")// 找到所有后代中有h1标签的div标签 $("div:has(.c1)")// 找到所有后代中有c1样式类的div标签 $("li:not(.c1)")// 找到所有不包含c1样式类的li标签 $("li:not(:has(a))")// 找到所有后代中不含a标签的li标签 ``` ### 属性选择器 ```python $('[name]') $('[name="jason"]') $('p[name="jason"]') ``` ### 表单筛选器 ```python :text :password :file :radio :checkbox :submit :reset :button # 仅仅是给你提供了一种更加方便的查找form表单内标签的方法，你也可以不使用它 ``` ### 注意事项 ```python $(':checked') # 会将默认选中checkbox和option都找到 """ 最好加上标签限制 $('input:checked') """ ``` ### 筛选器方法(多了解一点) ```python $("#id").next() $("#id").nextAll() $("#id").nextUntil("#i2") $("#id").prev() $("#id").prevAll() $("#id").prevUntil("#i2") $("#id").parent() $("#id").parents() // 查找当前元素的所有的父辈元素 $("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。 $("#id").children();// 儿子们 $("#id").siblings();// 兄弟们(同级别上下所有) ``` ### 样式操作 ```python addClass();// 添加指定的CSS类名。 removeClass();// 移除指定的CSS类名。 hasClass();// 判断样式存不存在 toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。 css("color","red")//DOM操作：tag.style.color="red" $("p").css("color", "red"); //将所有p标签的字体设置为红色 ``` ### 文本操作 ```python $('#d1').text() " div>p div>span div>p " $('#d1').html() " <p>div>p</p> <span>div>span</span> <p>div>p</p> " $('#d1').text('<h1>111</h1>') # 不识别HTML k.fn.init [div#d1] $('#d1').html('<h1>111</h1>') # 识别HTML k.fn.init [div#d1] ``` ### 属性选择器 ```python attr(attrName)// 返回第一个匹配元素的属性值 attr(attrName, attrValue)// 为所有匹配元素设置一个属性值 attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值 removeAttr()// 从每一个匹配的元素中删除一个属性 在获取raido、checkbox、option简易使用prop不要用attr ``` ### 标签操作 ```python let aEle = document.createElement('a') let $aEle = $('<a>') ``` ### 事件操作 ```python 方式1： $(选择器).事件名(function(){事件代码}) $('#d1').click(function(){ alert(123) }) 方式2： $(选择器).on('事件名',function(){事件代码}) $('#d1').on('click',function(){ alert(123) }) ``` ### 事件案列 ```python 克隆事件 clone() 默认情况下只会克隆标签 加了参数true也会克隆事件 hover事件 $('p').hover( function () { alert('大爷 您来了啊') }, function () { alert('下次 还要来哦') } ) input事件 $('input').on('input',function () { console.log($(this).val()) }) ``` ### 事件冒泡 ```python 阻止事件冒泡的两种方式 方式1 return false 方式2 $('span').click(function (e) { e.stopPropagation() }) ``` ### 文档加载 ```python $(document).ready(function(){ // 在这里写你的JS代码... }) $(function(){ // 你在这里写你的代码 }) ``` ### 事件委托 ```python 将事件委托给标签内部的标签 // 事件委托 // 将body内点击事件委托给body内的button按钮执行 $('body').on('click','button',function () { alert(123) }) ``` ### 动画效果 ```python // 基本 show([s,[e],[fn]]) hide([s,[e],[fn]]) toggle([s],[e],[fn]) // 滑动 slideDown([s],[e],[fn]) slideUp([s,[e],[fn]]) slideToggle([s],[e],[fn]) // 淡入淡出 fadeIn([s],[e],[fn]) fadeOut([s],[e],[fn]) fadeTo([[s],o,[e],[fn]]) fadeToggle([s,[e],[fn]]) // 自定义（了解即可） animate(p,[s],[e],[fn]) ``` ### each循环 ```python $('ul li').each(function(a,b){ console.log(a,b) }) $.each([111,222,333,444],function(a,b){ console.log(a,b) }) ``` ### Boostarp框架 ```python 版本有2、3、4我们主要用3版本 下载 1.直接下载压缩包 2.也可以不下载而使用网络CDN的形式 简单使用 ************************* Bootstrap的js动态效果需要用到jQuery 也就意味着你在使用Bootstrap要先导入jQuery ************************* 导入 1.导入本地的 2.使用网络CDN ``` ### 布局容器 ```python <!-- 左右有留白的--> <!-- <div class="container"></div>--> <!-- 左右没有留白的--> <div class="container-fluid"></div> """ 在使用前端框架的时候我们很少需要自己书写css代码 我们只需要修改标签的class属性值即可 """ 起手先写一个容器，之后在里面书写页面内容 ``` ### 栅格系统 ```python 一个row默认会被均分为12份 使用col-md-n去划分对应的份数 一定要记住一行只有12份 针对不同的浏览器屏幕大小可以动态调节布局样式 col-md col-xs col-sm col-lg ``` ### 表格标签 ```python <table class="table table-hover table-striped"> ``` ### 表单标签 ```python class='form-control' ``` ### 按钮标签 ```python class='btn btn-danger' ``` ### 图标 ```python fontawesome http://www.fontawesome.com.cn/ ``` ### 弹出框 ```python sweetalert https://www.sweetalert.cn/guides.html#getting-started ```
bootstrap框架: https://v3.bootcss.com/components/#navbar
