第十一周学习笔记总结
总结
前端简介
前端与后端
前端:任何与用户直接打交道的操作界面都可以称之为是前端。eg:淘宝页面,游戏界面,操作页面。
后端:不直接与用户打交道的内部真正执行核心业务逻辑的代码程序。eg:python代码,java代码,c++代码。
前端核心基础
知识点:HTML CSS JavaScript jQuery(框架) Bootstrap(框架)
主要学习:HTML CSS JavaScript
HTML:网页的骨架
CSS:网页的样式
JS:网页的动态效果
HTTP超文本传输协议
我们自己写的TCP服务端与浏览器之间通信,但是浏览器不识别服务端数据。不同的服务端数据的组织策略千差万别,但是浏览器却需要做到能够统一处理,最佳的解决措施是统一规定一个标准"HTTP协议"。
HTTP协议规定了服务端与浏览器之间的数据交互格式及其他事项。
四大特性
特性 | 说明 |
---|---|
基于请求响应 | 服务端永远不会给客户端发消息,必须是客户端先请求服务端被动响应 |
基于TCP/IP之上作用于应用层的协议 | 应用层协议:HTTP,HTTPS,FTP... |
无状态 | 服务端不保存客户端状态 |
无/短连接 | 不保持客户端与服务端之间的连接通道。补充:websocket(长连接):主要用于加好友聊天等业务 |
数据格式
请求数据格式
1.请求首行(请求方式:有很多种,协议名称及版本)
2.请求头(一大堆k:v键值对)
3.换行(不能省略)
4.请求体(携带一些敏感的数据,不是所有的请求都有请求体)
响应数据格式
1.响应首行(响应状态码)
2.响应头(一大堆K:V键值对)
3.换行(不能省略)
4.响应体(一般情况下就是浏览器要展示给用户看的数据)
响应状态码
利用数字来表示一些复杂的情况说明(类似于暗号)
状态码 | 说明 |
---|---|
1xx | 服务端已经接收到你的请求正在处理,你可以继续提交或者等待 |
2xx | 200 OK服务端给出了相应响应,表示访问成功 |
3xx | 301,302重定向,用于实现登录成功后自动跳转到主页 |
4xx | 403 请求不符合条件,404 请求资源不存在 |
5xx | 服务端内部错误 |
我们在工作中还会自定义状态码(因为默认的不够),自定义状态码一般都是从10000开始
HTML简介
HTML:超文本标记语言是一种创建网页的标记语言,不是一种编程语言,HTML使用标签来描述网页。
本质上是浏览器可识别的规则,我们按照规则写网页,浏览器根据规则渲染我们的网页。对于不同的浏览器,对同一个标签可能会有不同的解释。(兼容性问题)
浏览器展示的界面我们也称之为HTML页面,存储HTML语言的文件后缀一般是.html
HTML注释语法
<!--单行注释-->
<!--
多行注释
-->
'''html由于标签非常的多 所以可以通过注释区分页面区域'''
HTML文件结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
声明为HTML文档。<html>、</html>
是文档的开始标记和结束的标记,所有的代码都必须写在html标签内部。是HTML页面的根元素,在它们之间是文档的头部(head)和主体(body)<head>、</head>
定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示,一般都不是给用户看的。包含了文档的元(meta)数据,给浏览器看的数据<title>、</title>
定义了网页标题,在浏览器标题栏显示<body>、</body>
之间的文本是可见的网页主体内容,是浏览器展示给用户看的
HTML标签的分类
1.双标签:有头有尾,内容写在中间
2.自闭和标签:单标签
标签两大重要属性
下面的两个属性都是用来快速定位需要操作的标签
属性 | 说明 |
---|---|
id属性(一对一管理) | 类似于身份证号,在同一个html页面上id值不能重复,用于精确查找某个标签 |
class属性(批量管理) | 类似于分组,多个标签可以拥有相同的class值,用于范围查找一次性多个标签 |
head内常见标签
head标签内编写的标签一般都是给浏览器看的,用户看不到。
标签 | 说明 |
---|---|
title | 控制标签页小标题 |
style | 内部支持编写css |
link | 引入外部css文件 |
script | 内部支持编写JS代码,还可以通过src属性引入外部JS文件 |
meta | 通过内部属性的不同可以有很多功能<meta name="keywords" content="填写一些关键字 提升网页被搜索的概率"> <meta name="description" content="填写一些网页的简介"> |
body内标签
body内基本标签
标签 | 说明 |
---|---|
h1~h6 | 标题标签 |
<p></p> |
段落标签 |
hr | 水平分割线 |
br | 换行符 |
<u></u> |
下划线 |
<i></i> |
斜体 |
<s></s> |
删除线 |
<b></b> |
加粗 |
body内基本符号
代码 | 对应符号 |
---|---|
|
空格 |
> |
大于号 |
< |
小于号 |
& |
& |
¥ |
¥ |
® |
注册 |
© |
版权 |
标签的类别
块儿级标签,行内标签。
块儿级标签:h1~h6 p hr br div
一个标签默认独占浏览器一行
行内标签:s i u b span
内部文本多大自身就占多大
标签之间支持嵌套(最好是布局类相关标签参与),块儿级标签可以嵌套任意标签,行内标签只能嵌套行内标签(<p>标签虽然是块儿级标签但是它不能嵌套块儿级标签).
body内布局标签
div:块儿级标签,用来定义一个块级元素,并无实际意义
span:行内标签,用来定义行内元素,并无实际意义
1.块儿级标签是可以通过CSS调整为不独占一行
2.页面的编写首先就是先用布局标签占位,之后填充内容即可.
body内链接标签
属性 | 说明 |
---|---|
a | 链接标签 |
href | 可以填写网址,点击自动跳转,也可以写标签的id值,实现锚点功能 |
target | 可以控制是否新建页面跳转,默认_self 当前页,设置_blank 新建页 |
body内图片标签
属性 | 说明 |
---|---|
img | 图片标签 |
src | 填写图片地址(网络地址 本地地址) |
title | 鼠标悬浮在图片上自动展示提示信息 |
alt | 图片加载失败提示的信息 |
height | 自定义图片高度 |
width | 自定义图片宽度 |
ps: height和width调整一个另外一个等比例缩放,单位是px(像素).
列表标签
无序列表
无序列表是使用频率最高的列表标签,页面上有规则排列的横向或者竖向的多个元素几乎使用的都是无序列表
有序列表
<ol type="I" start="10">
<li>第一项</li>
<li>第二项</li>
<li>第二项</li>
</ol>
type可以是数字,罗马数字,大小写字母
start控制从第几个开始
标题列表
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
<!--
<dt>中间写标题</dt>
<dd>中间写内容</dd>
-->
表格标签
表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式(即按行和列组织)的数据。
表格的基本结构:
<table>
<thead>
<tr> <!--tr表示一行-->
<th>序号</th> <!--th加粗文本-->
<th>用户名</th>
<th>密码</th>
</tr>
</thead> <!--表头字段-->
<tbody>
<tr>
<td>1</td> <!--td普通文本-->
<td>jason</td>
<td>123</td>
</tr>
</tbody> <!--表单数据-->
</table>
属性:
属性 | 说明 |
---|---|
border | 表格边框 |
cellpadding | 内边距 |
cellspacing | 外边距 |
width | 像素 百分比.(最好通过css来设置长宽) |
rowspan | 单元格竖跨多少行 |
colspan | 单元格横跨多少列(即合并单元格) |
表单标签
form表单
form作用:获取前端用户输入(输入、选择、上传)的数据并发送给后端服务器。
<form action="" method=""></form> <!--需要在form标签内部编写获取用户数据标签-->
属性 | 说明 |
---|---|
action | 用于控制数据的提交地址,不写的话就是朝当前页面所在的地址提交 |
method | 用于控制请求的方式(get\post) |
input标签
作用:获取用户各中类型数据的标签
type属性 | 说明 |
---|---|
text | 正常展示的普通文本框 |
password | 密文展示框 |
date | 日历展示框 |
radio | 单选框 |
checkbox | 多选框 |
邮箱格式数据 | |
file | 文件数据。可以通过添加multiple属性控制获取单个还是多个文件 |
submit | 提交按钮,触发form表单提交数据的动作 |
reset | 重置按钮,重置页面填写的数据 |
button | 普通按钮,普通按钮默认没有任何的功能,意味着以后可以给它添加任意的功能 |
select标签
作用:网页中下拉框。
<select name="province" id="">
<option value="BJ">北京</option>
<option value="SH">上海</option>
<option value="SZ">深圳</option>
</select>
一个个的下拉选项是一个个option标签。
默认是单选,也可以添加multiple变成多选。
textarea标签
作用:获取大段文本内容,可以用于发表见解评论啥的。
<textarea name="desc" id="" cols="30" rows="10"></textarea>
cols属性控制文本域的列数,rows属性控制文本域的行数
补充:
1.获取用户输入的标签两大重要属性
name属性:类似于字典的key(前端程序员写)
value属性:类似于字典的value(用户自己传)
2.lable标签:专门给input标签配文字说明
获取用户输入的input标签理论上需要有label配合使用
3.获取用户输入的input标签也可以添加背景提示
4.获取用户输入的标签如果不是让用户自己写而是选择,那么标签需要自己写value
5.针对radio和checkbox可以默认选中
checked="checked" 如果属性名和属性值相等,那么可以简写为 checked
6.针对option标签也可以默认选中
selected="selected" 简写为 selected
网络请求方式
最常见的网络请求方式有两种:get请求(朝服务端索要数据);post请求(朝服务端提交数据)。
两种请求都可以携带数据。
get请求是在url后面通过?组织数据
url?name=jason&pwd=123&email=123@qq.com
post请求是在请求体中组织数据
HTTP协议请求数据格式
get请求虽然可以携带数据,但是一般只用于不重要的数据携带。并且get请求携带数据的大小有限制,最多只能携带2KB左右。
form表单中有一个method属性,用于控制提交的方式,有两个选项,默认是get请求。
CSS层叠样式表
CSS定义如何显示HTML元素。当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染)。是用来调整标签样式。
1.语法结构
每个CSS样式由两个组成部分:选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。
选择器 {属性名1:属性值1; 属性名2:属性值2}
#d1{color:red; font-size:18px}
2.语法注释
/*注释内容*/
3.三种编写CSS的方式
1.head中style标签内部直接编写(学习阶段使用方便)
2.head中link标签引入外部css文件(最正规)
3.直接在标签内部通过style属性编写(不推荐)
CSS基本选择器
1.标签选择器(范围查找):直接编写标签名来查找标签
2.类选择器(范围查找):通过编写class的值来查找标签(关键性符号句点符,不能省略)
3.id选择器(精确查找):通过编写id值来精确查找标签
4.通用选择器:查找所有的标签
CSS组合选择器
1.后代选择器(关键符号是空格):两个选择器之间空格隔开,查找空格前面选择器获取到的标签内部所有符合空格后面选择器要求的标签
2.儿子选择器(关键符号是大于号):两个选择器之间大于号隔开,查找大于号前面选择器获取到的标签内部第一层级符合大于号后面选择器要求的标签
3.毗邻选择器(关键符号是加号):两个选择器之间大于号隔开,查找加号前面选择器同级别下面紧挨着的符合加号后面选择器要求的标签
4.弟弟选择器(关键符号是小波浪号):两个选择器之间大于号隔开,查找波浪号前面选择器同级别下面所有的符合波浪号后面选择器要求的标签
CSS属性选择器
根据标签内部的属性名和属性值查找标签(关键符号是中括号)
CSS选择器之分组与嵌套
分组:多个选择器查找到的标签需要调整相同的样式那么可以合并
嵌套:合并的选择器彼此不干扰也没有类型的限制
CSS伪类选择器
补充知识
a标签默认的颜色有两种 紫色跟蓝色
紫色:链接地址已经被点击过了
蓝色:链接地址从来没有点击过
/*鼠标移动到a标签上方 字体颜色动态修改为蓝色*/
a:hover {
color: blue;
}
/*鼠标悬浮上去之后样式改变 适用于所有含有文本的标签*/
CSS伪元素选择器
伪元素选择器通过css操作文本内容
1.修改首个字体样式-first-letter
2.在文本开头添加内容-before
3.在文本结尾添加内容-after
伪元素选择器可以用在解决标签浮动所带来的的负面影响也可以用来做数据的防爬
CSS选择器优先级
"""
当多个选择器查找到相同的标签修改不同的样式 那么标签该听谁的
"""
1.选择器相同 引入位置不同
就近原则
2.选择器不同的情况
行内 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
强制修改标签样式的操作
!important
· 增加指定样式规则的应用优先权,让浏览器首选执行此条语句
· 使用方法:选择器{样式:值 !important}
字体样式
width属性可以为元素设置宽度。
height属性可以为元素设置高度。
只有块级标签才能设置宽度,行内标签的宽度由内容来决定
文字字体
p { font-family: "微软雅黑";}
字体大小
p {font-size: 16px;}
字体粗细
p {font-weight: lighter\bolder;}
字体颜色
p {color: red;}
p {color: rgb(128, 128, 128);}
p {color:#3e3e3e;}
p {color:rgba(1,1,1,0.5)} /*a是透明度*/
获取颜色的方式:截图软件自带取色功能,pycharm提供的取色器。
文字属性
文字对齐
p {text-align:left} 左边
p {text-align:center} 中间
p {text-align:right} 右边
文字装饰
a {text-decoration: none;} 主要就是用于去除a标签的下划线
a {text-decoration: line-through;} 删除线
a {text-decoration: overline;} 上边线
a {text-decoration: underline;} 下划线
首行缩进
p {text-indent: 32px;} 首行缩进32px
补充:可以使用浏览器做样式的动态调整,查找到标签的css,然后左键选中,通过方向键上下动态修改数值,找到适合的数值填写到css样式里。
背景属性
背景颜色
p {background-color: red;}
背景图片
img {background-image:url("111.png");} 背景图片如果没有设置的区域大,
那么默认自动填充满
img {background-repeat:no-repeat\repeat-x\repeat-y;} 是否平铺
img {background-position:left top;} 图片位置
img {background-attachment: fixed;} 背景附着
如果多个属性名具有相同的前缀,那么可以整合到一起编写(前缀名即可)。
img {background:#336699 url('1.png') no-repeat left top;}
边框属性
自定义调整每个边的边框
p {border-left/top/right/bottom-color: black;} 给边框修改颜色
p {border-left/top/right/bottom-width: 5px;} 修改边框的粗细
p {border-left/top/right/bottom-style: solid;} 修改边框的类型
dotted点状虚线边框,dashed矩形虚线边框,solid实线边框
统一调整每个边的边框
p {border: 5px solid black;} 顺序无所谓,只要给了三个就行
画圆
p {border-radius: 50%} 如果长宽一样那么就是圆,不一样就是椭圆
display属性
display:inline 让标签具备行内标签的特性(不能设置长宽)
display:block 让标签具备块儿级标签的特性(可以设置长宽)
display:inline-block 使元素同时具有行内元素和块级元素的特点
display:none 隐藏标签(重点) 页面上不会保留位置也不显示
visibility:hidde 也是隐藏标签 但是位置会保留
盒子模型
盒子模型 | 标签 | 快递盒 |
---|---|---|
外边距(margin) | 标签之间的距离 | 两个快递盒之间的距离 |
边框(border) | 标签的边框 | 快递盒的厚度 |
内边距,内填充(padding) | 内部文本与边框的距离 | 内部物品与盒子内壁的距离 |
内容(content) | 标签内部的内容 | 内部物品自身的大小 |
ps:两个标签之间的距离,有时候可以用margin也可以用padding。
body标签默认自带8px的margin值 我们在编写页面之前应该去掉。
margin不同个数的参数对应修改的位置
参数个数 | 对应位置 |
---|---|
margin: 0; | 简写形式,作用于上下左右 |
margin: 10px 10px; | (上下) (左右) |
margin: 10px 20px 30px; | 上 (左右) 下 |
margin: 10px 20px 30px 40px; | 上 右 下 左 |
盒子模型页面布局,想要内部标签居中展示,可以使用固定搭配。
body {margin: 0 auto;} 仅限于水平方向
ps:padding使用方式与margin一致
浮动布局
浮动的作用
div {float: left/right;}
浮动是所有网站页面布局必备的,可以将块儿级标签浮动起来脱离正常的文档流。使多个块儿级标签可以在一行显示(全部飘在了空中)。
浮动的影响
1.浮动会造成父标签塌陷(类似于将口袋里面的东西拿到了口袋的外面)
2.浮动的元素有时候也会遮挡住底下的区域,如果区域内有文本内容,那么浏览器会遵循文本内容优先展示的原则,会想法设法让文本展示出来。
解决浮动造成的影响
方法1:直接写div然后写对应的长宽。
方法2:写div然后添加clear属性,避免去查找长宽。
div {clear: left;} 原理就是在左侧不允许浮动元素,然后元素就会水平向下避开上方的浮动元素变相的撑起了塌陷
方法3:万能公式(固定搭配 记住就可以)
.clearfix:after {
content: '';
clear: both;
display: block;
}
以后写网页,提前写好上面的代码,然后哪个标签塌陷了就给谁添加上clearfix类名即可。
溢出属性
值 | 描述 |
---|---|
visible | 默认值。内容不会被修剪,会呈现在元素框之外。 |
hidden | 内容会被修剪,并且其余内容是不可见的。 |
scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |
inherit | 规定应该从父元素继承 overflow 属性的值。 |
解决方法1:{overflow: hidden;},直接隐藏超出的文本内容。
解决方法2:{overflow: auto\scroll;} 提供滚动条查看
定位属性
定位状态 | 属性 | 说明 |
---|---|---|
静态定位 | static | 所有的标签默认都是静态定位不能直接通过定位修改位置,如若想修改必须要切换下面三种之一 |
相对定位 | relative | 相对于标签原来的位置做定位 |
绝对定位 | absolute | 相对于已经定位过的父标签做定位(如若没父标签则以body为参照) |
固定定位 | fixed | 相对于浏览器窗口做定位 |
z-index
前端界面其实是一个三维坐标系,z轴指向用户。
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
模态框:模态对话框(Modal Dialogue Box,又叫做模式对话框),是指在用户想要对对话框以外的应用程序进行操作时,必须首先对该对话框进行响应。
opacity
用来定义透明效果。取值范围是0~1,0是完全透明,1是完全不透明。
调整颜色的rgba里面的a只能调整颜色的透明度。
opacity可以调整文本和颜色的透明度。
JavaScript简介
JavaScript是一种专为与网页交互而设计的脚本语言,简称JS。是一门前端的编程语言。
JavaScript是可插入HTML页面的编程代码。
JavaScript插入HTML页面后,可由所有的现代浏览器执行。
在哪里编写js?可以在pycharm提供的js文件或者在浏览器提供的js环境(学习阶段推荐)。
在html标签中可以直接在head里的script标签里编写js,或者通过引入外部的js文件。
Script标签内写代码
<script>
/*在这里写你的JS代码*/
</script>
引入额外的JS文件
<script src="myscript.js"></script>
变量与注释
注释语法
// 单行注释
/*多行注释*/
结束符号:分号结束
console.log('hello world');
变量声明:在js中定义变量需要使用关键字声明
var name = 'jason' var声明都是全局变量
let name = 'jason' let可以声明局部变量
const pi = 3.14 常量声明
JS数据类型
在JS中查看数据类型的方式是typeof。
JavaScript拥有动态类型
var x; // 此时x是undefined
var x = 1; // 此时x是数字
var x = "Alex" // 此时x是字符串
数值类型
js中的数值类型相当于python里面的整型int和浮点型float。
var a=123
var b=123.1
typeof a // 'number'
typeof b // 'number'
parseInt(a) // 123
parseInt(b) // 123 取整数部分
parseFloat(b) // 123.1 取浮点数
parseInt('abc') // NaN NaN(not a number)当前数据不是数字
字符类型
js中的字符串类型相当于python里面的字符串str。
js中的字符串类型默认只能是单引号和双引号,格式化字符串小顿号。
功能 | 方法 |
---|---|
字符的拼接 | + |
统计长度 | .length |
移除空白(不能指定) | .trim()、.trimLeft()、.trimRight() |
切片操作 | .substring(start,end),.slice(start,end)前者不支持负数索引后者支持 |
大小写转换 | .toLowerCase()、.toUpperCase() |
切割字符串 | .split() |
返回第n个字符 | .charAt(n) |
布尔值
python中布尔值是bool,第一个字母要大写True,False。代表False的有0,None,'',[],{}....
JS中布尔值是boolean,全部是小写true,false。代表false的有:''(空字符串),0,null,undefined,NaN。
null与undefined的区别:
null可以理解为曾经拥有过,现在暂时空了
undefined可以理解为从来没拥有过
对象之数组
JS中的所有事物都是对象:字符串,数值,数组,函数...此外,JS允许自定义对象。
JS提供多个内建对象,比如String,Date,Array等等。对象只是带有属性和方法的特殊数据类型。
数组对象的作用是:使用单独的变量名来存储一系列的值。类似于python中的列表。
方法 | 说明 |
---|---|
.length | 数组的长度 |
.push(ele) | 尾部追加元素 |
.pop() | 获取尾部的元素 |
.unshift(ele) | 头部插入元素 |
.shift() | 头部移除元素 |
.slice(start,end) | 切片,取不到end |
.reverse() | 反转 |
.join(seq) | 将数组元素连接成字符串,默认是使用','隔开元素 |
.concat(val,...) | 连接数组 |
.sort() | 排序 |
.forEach() | 将数组的每个元素传递给回调函数 |
.splice() | 删除元素,并向数组添加新元素 |
.map() | 返回一个数组元素调用函数处理后的值的新数组 |
自定义对象
自定义对象相当于python中的字典。
定义方式:
// Object创建对象
let man = new Object(); //相当于生成了空字典
man.name = 'jason'; //相当于给字典添加键值对
man.age = 18;
// 字面量创建对象
let man = {
name : 'jason',
age:18
};
// 取值操作:直接通过句点符
d1.name // jason
d1.age //18
运算符
算术运算符
符号:+ - * / % ++ --
var x=10;
var res1=x++; '先赋值后自增1'
var res2=++x; '先自增1后赋值'
res1;
10
res2;
12
比较运算符
符号:> >= < <= != == === !==
1 == "1" // true 弱等于:自动转换成相同的类型
1 === "1" // false 强等于:不转换类型
'弱等于,js会自动转换成相同数据类型比较值是否一样'
逻辑运算符
符号: && || !
a = true && false // false
b = true || false // true
c = 1 != 2 // true
&& 等价于python中的and
|| 等价于python中的or
! 等价于python中的not
赋值运算符
符号:= += -= *= /=
流程控制
if判断
1.单if分支
if(条件){
条件成立执行的分支代码块
}
2.if...else分支
if(条件){
条件成立执行的分支代码块
}else{
条件不成立执行的分支代码块
}
3.if...else if...else分支
if(条件1){
条件1成立执行的分支代码块
}else if(条件2){
条件1不成立条件2成立执行的分支代码块
}else{
条件1和2都不成立执行的分支代码块
}
switch语法
var n1 = 1;
switch (n1) {
case 0:
console.log("干饭");
break; //如果不加break会基于当前位置一直往下运行
case 1:
console.log("睡觉");
break;
case 2:
console.log("玩耍")
default: //没有对应条件统一执行default子代码
console.log("无所事事!!!")
}
while循环
while(循环条件){
循环体代码
}
for循环
for(初始值;循环条件;每次循环之后的操作){
循环体代码
}
三元运算符
var c = a > b ? a : b
// 这里的三元运算顺序是先写判断条件a>b再写条件成立返回的值为a,条件不成立返回的值为b;三元运算可以嵌套使用;
函数
函数的定义
function 函数名(形参){
函数体代码
return 返回值
}
1.function定义函数的关键字,相当于python中的def
2.函数名的命名参考变量名并且JS推荐使用驼峰体命名
3.参数可写可不写
4.return返回值
函数调用:函数名加括号,有参则传参即可。
无参函数
function f1(){console.log(111)}
f1()
有参函数
//参数的个数不需要一一对应
function f2(a, b){console.log(a,b)}
f2() // 可以调用 相当于传了两个undefined
f2(1) // 可以调用 传了给了a
f2(1,2) // 可以调用 传给了a和b
f2(1,2,3,4,5) // 可以调用 传给了a和b
JS中的函数提供了有个内置关键字arguments:接收所有参数。
function func(a, b){
if(arguments.length===2){ //这里arguments作用限制了参数个数
console.log(a, b)
}else{
console.log('去你妹的 参数都没给我!!!')
}
}
返回值参数
return不支持返回多个数据。
function a(){
return 1,2,5
}
a() // 5 返回多个数据的时候只会返回最后一个数据
function c(){
return [11,22,33,44]
}
c() // [11,22,33,44] 一个存储多个数据的列表之类的数据集是可以的
匿名函数
var ff = function (){
console.log(123)
}
箭头函数(drf中vue框架会再次接触)
var f = v => v;
// 等同于(箭头左边是形参右边是返回值)
var f = function(v){
return v;
}
var f = () => 5;
// 等同于
var f = function(){return 5};
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2){
return num1 + num2; //这里的return只能返回一个值,如果想返回多个值需要自己手动给他们包一个数组或对象中
}
闭包函数
var city = "BeiJing";
function f(){
var city = "ShangHai";
function inner(){
console.log(city);
}
return inner;
}
var ret = f();
ret();
函数的全局变量和局部变量
局部变量:
在JavaScript函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它(该变量的作用域是函数内部)。只要函数运行完毕,本地变量就会被删除。
全局变量:
在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。
变量生存周期:
JavaScript变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
作用域
首先在函数内部查找变量,找不到则到外层函数查找,逐步找到最外层。与python作用域关系查找一模一样!
JS内置对象
内置对象可以看成是python中的内置方法,内置模块等提前写好直接调用。
Date日期对象
var d1 = new Date() // 创建一个Date对象
d1.toLocaleString() //'2022/8/25 21:16:38'
d1.toLocaleDateString() //'2022/8/25'
d1.toLocaleTimeString() //'21:16:38'
Date对象的方法
方法 | 说明 |
---|---|
getDate() | 获取日 |
getDay () | 获取星期 |
getMonth () | 获取月(0-11) |
getFullYear () | 获取完整年份 |
getYear () | 获取年 |
getHours () | 获取小时 |
getMinutes () | 获取分钟 |
getSeconds () | 获取秒 |
getMilliseconds () | 获取毫秒 |
getTime () | 返回累计毫秒数(从1970/1/1午夜) |
JSON序列化对象
var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串转换成对象---反序列化
var obj = JSON.parse(str1);
// 对象转换成JSON字符串---序列化
var str = JSON.stringify(obj1);
RegExp正则对象
创建正则表达式的两种方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}"); // 使用RegEcp对象
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/; // 推荐使用(简化)
全局匹配
在正则表达式的最后加一个字母g(global)。在设置了参数global的情况下,每次执行test()方法之后,lastIndex值将会改变,下一次执行test()时,将会从lastIndex指定的索引处开始匹配。只有匹配失败时,lastIndex会重新设为0。当然,可以手动设置lastIndex的值。
Math对象
abs(x) 返回数的绝对值。
exp(x) 返回 e 的指数。
floor(x) 对数进行下舍入。
log(x) 返回数的自然对数(底为e)。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
pow(x,y) 返回 x 的 y 次幂。
random() 返回 0 ~ 1 之间的随机数。
round(x) 把数四舍五入为最接近的整数。
sin(x) 返回数的正弦。
sqrt(x) 返回数的平方根。
tan(x) 返回角的正切。
JS的BOM操作
BOM:浏览器对象模型,通过js代码可以跟浏览器交互
打开子页面
window.open('https://www.baidu.com','','width=200,height=200')
关闭页面
window.close()
navigator对象
window.navigator.appName // Web浏览器全称
window.navigator.appVersion // Web浏览器厂商和版本的详细字符串
window.navigator.userAgent // 客户端绝大部分信息
window.navigator.platform // 浏览器运行所在的操作系统
history对象
window.history 对象包含浏览器的历史。浏览历史对象,包含了用户对当前页面的浏览历史,但我们无法查看具体的地址,可以简单的用来前进或后退一个页面。
window.history.forward() // 前进一页
window.history.back() // 后退一页
location对象
window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。
window.location.href // 获取页面的url地址
window.location.reload() // 刷新页面
window.location.href = url // 跳转到指定页面
"""window可以省略不写"""
弹框系列
可以在 JavaScript 中创建三种消息框:警告框、确认框、提示框。
警告框---alert
警告框经常用于确保用户可以得到某些信息。
当警告框出现后,用户需要点击确定按钮才能继续进行操作。
alert("你看到了吗?")
确认框---confirm
确认框用于使用户可以验证或者接受某些信息。
当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。
如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。
confirm("你确定吗?")
提示框---prompt
提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。
如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。
prompt('你还有什么要交代的吗')
计时器
通过使用 JavaScript,我们可以在一定时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。
计时器的使用
// 单次定时
let t = setTimeout(showMsg,9000) // 9秒钟之后自动执行showMsg
clearTimeout(t) // 取消定时器
// 循环定时
let s = setInterval(showMsg,3000) // 每隔3秒执行一次
clearInterval(showMsg,9000) // 9秒后循环了3次结束计时器
JS的DOM操作
DOM:文档对象模型,通过js代码可以跟html交互
HTML页面上有很多相同的标签,所以我们在操作HTML标签之前还要先学会如何查找标签(js查找标签)。
直接查找
通过标签名查找标签
document.getElementsByTagName('div') // 结果是数组类型
通过class值查找标签
document.getElementsByClassName('c1') // 结果是数组类型
通过id值查找标签
document.getElementById('d1') // 结果直接是标签对象本身
间接查找
间接查找需要先定位一个元素,如何在这个元素的基础上进行查找。
方法 | 说明 |
---|---|
parentElement | 父节点标签元素 |
children | 所有子标签 |
firstElementChild | 第一个子标签元素 |
lastElementChild | 最后一个子标签元素 |
nextElementSibling | 下一个兄弟标签元素 |
previousElementSibling | 上一个兄弟标签元素 |
PS:由于DOM是操作页面上的HTML代码,但是HTML页面加载顺序是从上往下,所以如果想要我们的代码能够正常执行,必须要先等待html页面加载完毕。
措施:将script标签写在body内最下方
节点操作
我们在DOM操作标签的时候在起变量名的时候如果该变量指向的是一个标签,那么建议使用xxxEle,eg:aEle\pEle\divEle\spanEle。
动态创建一个标签并添加到页面指定位置
let xxxEle = document.createElement('标签名') //创建一个标签
xxxEle.id = 'id值' //给标签添加id值
xxxEle.innerText = '内部文本' //设置文本内容
divEle.append(xxxEle) //div标签内部追加标签
ps:动态创建 临时有效 非永久
标签属性
1.默认属性
比如id,class等,设置的时候可以直接通过点的方式
2.自定义属性
比如username,password等,设置的时候需要使用setAttribute,它也包括默认属性
3.其他
divEle.getAttribute("age") //获取指定属性
divEle.removeAttribute("age") //移除指定属性
innerText与innerHTML
方法 | 取值的时候 | 设置值的时候 |
---|---|---|
innerText | 只会获取文本内容 | 不识别标签语法 |
innerHTML | 获取文本内容和标签 | 识别标签语法 |
获取用户输入
直接通过标签对象.value获取
获取文件数据的时候:标签对象.value只能获取到文件路径,而标签对象.files结果是一个数组,可以通过索引获取具体文件对象。
类属性操作
标签对象.classList //查看所有的类属性
标签对象.classList.remove(cls) //删除指定类
标签对象.classList.add(cls) //添加类
标签对象.classList.contains(cls) //存在返回true,否则返回false
标签对象.classList.toggle(cls) //存在就删除,否则就添加
样式操作
语法:标签对象.style.标签样式属性名
divEle.style.backgroundColor="red"
divEle.style.height = '800px'
divEle.style.backgroundImage
JS事件绑定
事件就是给html标签绑定了一些额外的功能,用户在html页面操作达到某个条件会自动触发功能。eg:用户点击某个标签弹出警告框,双击某个标签提示信息。
方法 | 说明 |
---|---|
onclick | 当用户点击某个对象时调用的事件句柄 |
ondblclick | 当用户双击某个对象时调用的事件句柄 |
onfocus | 元素获得焦点。应用:输入框 |
onblur | 元素失去焦点。应用:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证. |
onchange | 域的内容被改变。应用:通常用于表单元素,当元素内容被改变时触发.(select联动) |
onkeydown | 某个键盘按键被按下。 应用: 当用户在最后一个输入框按下回车按键时,表单提交. |
onkeypress | 某个键盘按键被按下并松开 |
onkeyup | 某个键盘按键被松开 |
onload | 一张页面或一幅图像完成加载 |
onmousedown | 鼠标按钮被按下 |
onmousemove | 鼠标被移动 |
onmouseout | 鼠标从某元素移开 |
onmouseover | 鼠标移到某元素之上 |
onselect | 在文本框中的文本被选中时发生 |
onsubmit | 确认按钮被点击,使用的对象是form |
给标签绑定事件
<input type="button" value="点我" ondblclick="func1()">
<button id="d1">按我</button>
<script>
// 绑定事件的方式1:提前写好函数 标签内部指定
function func1(){
alert(123)
}
// 绑定事件的方式2:先查找标签 然后批量绑定
let btnEle = document.getElementById('d1')
btnEle.onclick = function (){
alert(321)
}
</script>
事件中的关键字this:this指代的是当前被操作的标签对象
window.onload:等待文档加载完毕之后再执行一些代码
jQuery类库
jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程。它的宗旨就是:“Write less, do more.“
jQuery必须先导入才可以使用(html页面上得写导入语句>>>:容易忘)
jQuery本身就是一个js文件,里面写了一些js代码而已。
导入方式:
1.本地jQuery文件
不会受到网络影响:直接在本地导入,在html页面上得写导入语句。
2.CDN加速服务
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
需要确保有互联网:min.js压缩之后的文件,容量更小;.js没有压缩的文件,容量稍大。
jQuery查找标签
基本选择器
基本选择器 | 说明 |
---|---|
$('#d1') | id选择器 |
$('.c1') | class选择器 |
$('p') | 标签选择器 |
层级选择器
x和y可以为任意选择器
层级选择器 | 说明 |
---|---|
$("x y") | x的所有后代y |
$("x > y") | x的所有儿子y |
$("x + y") | 找到所有紧挨在x后面的y |
$("x ~ y") | x之后所有的兄弟y |
jQuery选择器查找标签之后的结果与js有何区别
结果都是数组但是功能有区别
1.如果使用索引取值,那么都是标签对象
标签对象是无法调用jQuery提供的方法的
2.标签对象如果想转换成jQuery对象需要使用$()
转换成jQuery对象的目的是为了使用jQuery提供的更多方法
基本筛选器
基本筛选器 | 说明 |
---|---|
:first | 第一个 |
:last | 最后一个 |
:eq(index) | 索引index位置的那个元素 |
:even | 匹配所有索引值为偶数的元素,从0开始计数 |
:odd | 匹配所有索引值为奇数的元素,从0开始计数 |
:gt(index) | 匹配所有大于给定索引值的元素 |
:lt(index) | 匹配所有小于给定索引值的元素 |
:not(元素选择器) | 移除所有满足not条件的标签 |
:has(元素选择器) | 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找) |
属性选择器
属性选择器 | 说明 |
---|---|
$('[name]') | 查找有name属性的标签 |
$('[name="jason"]') | 查找name属性为jason的标签 |
$('div[name="jason"]') | 查找name属性为jason的div标签 |
表单筛选器
专门针对form表单内的标签,可以看成是属性选择器优化而来
表单筛选器 | 说明 |
---|---|
:text | 匹配所有普通文本框 |
:password | 匹配所有密文展示框 |
:file | 匹配所有文件域 |
:radio | 匹配所有单选框 |
:checkbox | 匹配所有多选框 |
:submit | 匹配所有提交按钮,匹配 type="submit" 的input或者button |
:reset | 匹配所有重置按钮 |
:button | 匹配所有按钮 |
:enabled | 匹配所有可用元素 |
:disabled | 匹配所有不可用元素 |
:checked | 匹配所有选中的被选中元素(复选框、单选框等,select中的option) |
:selected | 匹配select中的option |
筛选器方法
链式操作的底层原理:
对象调用方法之后还会返回一个对象,这个对象继续调用方法从而实现链式操作的效果
方法 | 说明 |
---|---|
$().next() | 同级别往下查找一个 |
$().nextAll() | 同级别往下查找所有 |
$().nextUntil("选择器") | 同级别往下查找所有,直到满足选择器条件 |
$().prev() | 同级别往上查找一个 |
$().prevAll() | 同级别往上查找所有 |
$().prevUntil("选择器") | 同级别往上查找所有,直到满足选择器条件 |
$().parent() | 查找一个父标签 |
$().parents() | 查找所有父标签(一直向上一个级别查找) |
$().parentsUntil("选择器") | 查找所有父标签,直到满足选择器条件 |
$().children() | 查找儿子标签 |
$().siblings() | 同级别上下所有标签(兄弟标签) |
操作标签
class操作
jQuery操作 | 说明 | JS操作 |
---|---|---|
addClass() | 添加指定的css类名 | classList.add() |
removeClass() | 移除指定的css类名 | classList.remove() |
hasClass() | 判断样式存不存在 | classList.contains() |
toggleClass() | 切换css类名,如果有就移除,没有就添加 | classList.toggle() |
样式操作
jQuery操作 | 说明 | JS操作 |
---|---|---|
.css('样式名','样式值') | 设置样式的格式 | style.样式名 = '样式值' |
位置操作
jQuery操作 | 说明 |
---|---|
offset() | 获取匹配元素在当前窗口的相对偏移或设置元素位置 |
position() | 获取匹配元素相对父元素的偏移 |
scrollTop() | 获取匹配元素相对滚动条顶部的偏移 |
scrollLeft() | 获取匹配元素相对滚动条左侧的偏移 |
.offset()
方法允许我们检索一个元素相对于文档(document)的当前位置。
和 .position()
的差别在于: .position()
是相对于相对于父级元素的位移。
文本操作
jQuery操作 | 说明 |
---|---|
html() | 取得第一个匹配元素的html内容 |
html(val) | 设置所有匹配元素的html内容 |
text() | 取得所有匹配元素的内容 |
text(val) | 设置所有匹配元素的内容 |
val() | 取得第一个匹配元素的当前值 |
val(val) | 设置所有匹配元素的值 |
val([val1,val2]) | 设置多选的checkbox,多选select的值 |
属性操作
jQuery操作 | 说明 |
---|---|
attr(attrName) | 返回第一个匹配元素的属性值 |
attr(attrName,attrValue) | 为所有匹配元素设置一个属性值 |
attr({k1:v1,k2,v2}) | 为所有匹配元素设置多个属性值 |
removeAttr() | 从每一个匹配的元素中删除一个属性 |
获取标签属性的时候,针对动态属性,尤其是复选框,不建议使用attr(),而是用prop。
prop和attr的区别:
attr():静态属性,指的属性是HTML标签属性
prop():动态变换,指的是DOM对象属性
总结:
1.对于标签上有的能看到的属性和自定义属性都用attr
2.对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。
文档处理
// 内部添加
$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B
// 外部添加
$(A).after(B)// 把B放到A的后面
$(A).before(B)// 把B放到A的前面
// 清空内容
remove()// 从DOM中删除所有匹配的元素。移除标签
empty()// 删除匹配的元素集合中所有的子节点。
jQuery绑定事件
JS绑定事件
标签对象.on事件名 = function(){事件代码}
btnEle.onclick = function(){alert(123)}
jQuery绑定事件
方式1
jQuery对象.事件名(function(){事件代码})
$btnEle.click(function(){alter(123)})
方式2
jQuery对象.on('事件名',function(){事件代码})
$btnEle.on('click',function(){alter(123)})
// 有时候使用jQuery的方式1绑定事件如果无法触发 可以切换为方式2
克隆操作
<button id="d1">是兄弟就来砍我!!!</button>
<script>
$('#d1').click(function () {
// $('body').append($(this).clone()) // 不克隆事件,复制标签本身
$('body').append($(this).clone(true)) // 克隆事件,会讲标签绑定的事件一起复制
})
</script>
悬浮事件
// 鼠标悬浮上去和移开各自触发一次
$('#d1').hover(function () {alert(123)})
// 如果想要将悬浮和移开分开执行不同的操作 需要写两个函数
$('#d1').hover(
function () {alert(123)}, # 悬浮触发
function () {alert(123)} # 移走触发
)
值监听事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>实时监听input输入值变化</title>
</head>
<body>
<input type="text" id="i1">
<script src="jquery-3.2.1.min.js"></script>
<script>
/*
* oninput是HTML5的标准事件
* 能够检测textarea,input:text,input:password和input:search这几个元素的内容变化,
* 在内容修改后立即被触发,不像onchange事件需要失去焦点才触发
* oninput事件在IE9以下版本不支持,需要使用IE特有的onpropertychange事件替代
* 使用jQuery库的话直接使用on同时绑定这两个事件即可。
* */
$("#i1").on("input propertychange", function () {
alert($(this).val());
})
</script>
</body>
</html>
阻止后续事件
如果给已经有事件的标签绑定事件,会先执行绑定的再去执行默认的
如果想要取消后续时间的执行,可以使用两种方式阻止
能够触发form表单提交数据动作的标签有两个
<input type="submit">
<button></button>
1.方式1(推荐使用)
$(':submit').click(function () {
alert(123)
return false // 取消当前标签对象后续事件的执行
})
2.方式2(自带关键字)
$(':submit').click(function (e) {
alert(123)
e.preventDefault()
})
事件冒泡
涉及到标签嵌套并且有相同事件的时候,那么会逐级往上反馈并执行
$("span").click(function (e) {
alert("span");
return false; //方式1
e.stopPropagation(); //方式2
});
事件委托
事件委托是通过事件冒泡的原理,利用父标签去捕获子标签的事件。
$('body').on('事件类型','选择器',function(){})
事件绑定默认情况下是不会对动态创建的标签生效的,如果想生效需要事件委托。
$('div').on('click','button',function () {
alert('你犯困的样子萌萌哒')
})
上述方式就可以解决动态标签事件的执行问题(注意委托指得是标签内部的标签)
动画效果
// 基本
show() // 展示
hide() // 隐藏
toggle() // 如果在展示中就隐藏起来,如果是隐藏状态就展示出来
// 滑动
slideDown() // 向下滑动
slideUp() // 向上
slideToggle() // 判断状态如何取反
// 淡入淡出
fadeIn() // 淡入
fadeOut() // 淡出
fadeToggle() // 判断状态如何取反
// 自定义(了解即可)
animate(p,[s],[e],[fn])
bootstrap框架
bootstrap框架内部提供了很多漂亮的标签样式和功能,我们只需要CV使用即可.
bootstrap版本推荐使用v3版本.它是一个是css文件和一个js文件组成.bootstrap需要使用jQuery来实现动态效果,一般都是直接导入jQuery和bootstrap的.
基本使用:
必须先导入后使用,bootstrap涉及到js的部分需要使用jQuery
1.本地导入
2.cdn导入
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
布局容器
class = 'container' 两边有留白
class = 'container-fluid' 没有留白
栅格系统
class = 'row' 默认开设一行均分12份
class = 'col-md-n' 指定需要几份(电脑屏幕)
col-md-offset-n 调整位置
栅格参数可以做到响应式布局xs sm md lg...
lg对应屏幕>=1200px, 小于 1920px 台式1920*1080显示器
md对应屏幕>=992px, 小于1200px 适合笔记本
sm对应屏幕>=768px, 小于992px 适合平板
xs对应屏幕<=768px, 手机端屏幕
表格样式
参考官网即可 有样式有源码 拷贝使用即可
表格样式
class="table table-hover table-striped table-bordered"
单元格颜色
class="active"
class="success"
class="warning"
class="danger"
class="info"
表单样式
.pull-left 左浮
.pull-right 右浮
class='form-control'
针对radio和checkbox不能加!!!
按钮与图标样式
按钮样式
class = 'btn'
按钮颜色
<a href="" class="btn btn-info">言多必失</a>
<a href="" class="btn btn-danger">言多必失</a>
<a href="" class="btn btn-warning">言多必失</a>
<a href="" class="btn btn-primary">言多必失</a>
<a href="" class="btn btn-success">言多必失</a>
按钮尺寸
<a href="" class="btn btn-success btn-sm">言多必失</a>
<a href="" class="btn btn-success btn-lg">言多必失</a>
<a href="" class="btn btn-success btn-block">言多必失</a>
图标样式
<span class="glyphicon glyphicon-user"></span>
更多图标
http://www.fontawesome.com.cn/
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库