学一点点web基础
文章目录
01、Web前端介绍
1. 什么是网页
网页是基于浏览器的应用程序，是数据展示的载体.
2. 网页的组成
3. 网页的优势
4. 开发前的准备
- 运行环境：浏览器，设置chrome为默认浏览器，作为网页文件的运行环境。
- 开发工具：不限，选用个人习惯的即可。（Sublime、VSCode、EditPlus、Webstrom等）
02、HTML语法介绍
1. HTML 介绍
超文本标记语言浏览器能够识别和解析的语言，通过元素的形式构建页面结构和填充内容。
2. 构建 HTML 页
-
创建网页文件，可以使用.html或.htm作为文件后缀。
-
添加网页的基本结构：
<!--告知浏览器文档所使用的 HTML 规范--> wml/NITF 无线标记语言/音乐标记语言 <!doctype html> <html> <head> <title>网页标题</title> <!--规定 HTML 文档的字符编码--> <meta charset="utf-8"> <!--设置移动端页面宽度和初始的缩放比例 页面的宽度为设备宽度，初始比例为1--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--定义浏览器渲染时的兼容方式，使用ie内核浏览器访问，使用它的最高版本--> <meta http-equiv="X-UA-Compatible" content="ie=edge"> </head> <body> 网页主体内容 </body> </html> -
HTML语法规范
-
标签名不区分大小写，建议使用小写。
-
注释语法：
<!-- 此处为注释 -->
-
3. 页面核心
页面的核心是元素，元素也称为标记或标签，用于在网页中标记内容
-
语法：标签使用< >为标志，标签名不区分大小写，推荐小写表示
-
分类：
-
双标签：成对出现，包含开始标签和结束标签。例：
<html></html> -
单标签：只有开始标签，没有结束标签，可以手动添加“/”表示闭合。例：
<br> <br/>
-
-
属性：
-
标签属性书写在开始标签中，使用空格与标签名隔开，用于设置当前标签的显示内容或者修饰显示效果。由属性名和属性值组成，属性值使用双引号表示。例：
<img src="imgs/img01.jpg"> -
同一个标签中可以添加若干组标签属性，使用空格间隔。例：
<img src="imgs/img01.jpg" width="200px" height="200px">
-
03、常用标签介绍
1. html根标签
2. body中常用标签
-
文本标签
-
标题标签：自带加粗效果，从h1到h6字体大小逐级递减
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> -
align 属性：设置文本的水平对齐方式，默认是居左对齐，取值如下：
<h3 align="left/center/right">标题内容</h3> -
段落标签：
<p>段落文本</p> -
普通文本标签：
<b>加粗标签</b> <strong>强调标签，效果同b标签</strong> <i>斜体标签</i> <del>删除标签</del> <span>行分区标签，用于对特殊文本特殊处理、内联标签</span> <label>普通文本标签，常与表单控件结合实现文本与控件的绑定</label> -
换行标签：
浏览器会忽略代码中的换行和空格，只显示为一个空格。想要实现页面中的换行，需要借助于换行标签。
<br>-
水平线标签，在页面中插入一条水平分割线
<hr> -
字符实体：
某些情况下，浏览器会将一些特殊字符按照 HTML 的方式解析，影响显示结果。此时需要将这类字符转换为其他的形式书写。
例：
使用 < 在页面中呈现 "<" 使用 > 在页面中呈现 ">" 使用 在页面中呈现一个空格 使用 © 在页面中呈现版权符号"©" 使用 ¥ 在页面中呈现人民币符号"￥" -
-
容器标签
常用于页面结构划分，结合CSS实现网页布局
<div id="top">页面顶部区域</div> <div id="main">页面主体区域</div> <div id="bottom">页面底部区域</div> -
图片与超链接标签(内联 / 块 标签)
-
图片标签
：用于在网页中插入一张图片。
-
属性 src 用于给出图片的URL，必填。
-
属性 width/height 用于设置图片尺寸，取像素值，默认按照图片的原始尺寸显示。
-
属性 title 用于设置图片标题，鼠标悬停在图片上时显示
-
属性 alt 用于设置图片加载失败后的提示文本
语法：
<img src="" width="" height="" title="" alt="">
-
-
超链接标签：用户可以点击超链接实现跳转至其他页面
-
属性 href 用于设置目标文件的URL，必填。
-
属性 target 用于设置目标文件的打开方式，默认在当前窗口打开。可以设置新建窗口打开目标文本(取"_blank")
<a href="http://www.taobao.com" target="_self">淘宝</a> <a href="http://www.baidu.com" target="_blank">百度</a>
-
-
3. 常用结构标签
-
列表标签
-
无序列表
默认用实心圆点标识列表项<ul> <li>list item 列表项</li> <li>list item 列表项</li> <li>list item 列表项</li> </ul> -
有序列表
默认使使用阿拉伯数字标识每条数据，可以使用start属性设置起始的值，默认为1<ol start=''> <li></li> <li></li> <li></li> </ol>- list item 列表项
- list item 列表项
- list item 列表项
-
列表嵌套
在已有列表中嵌套添加另一个列表，常见于下拉菜单- 西游记
- 孙悟空
- 孙悟空
- 孙悟空
- 西游记
-
-
表格标签
-
表格由行和单元格组成，常用于直接的数据展示或辅助排版，基本结构如下：
姓名 年龄 班级 张三 20 一(1)班 -
单元格合并：用于调整表格结构，分为跨行合并和跨列合并，合并之后需要删除被合并的单元格，保证表格结构完整。
单元格属性 作用 取值 colspan 跨列合并单元格 无单位数值 rowspan 跨行合并单元格 无单位数值 -
合并列的示例代码：
姓名 电话 李小明 010-1234567 13912321213 -
合并行的示例代码
姓名 李小明 电话 010-1234567 13912321213
-
-
表单标签
表单用于采集用户的信息并提交给服务器，由表单标签和表单控件组成。表单标签form负责提交数据给服务器，表单控件负责收集数据。
-
表单使用
<form action=""> <!--此处为表单控件--> </form> -
属性说明
属性名 取值 action 设置数据的提交地址 method 设置数据的提交方式，默认为get方式，可以设置为post -
表单控件使用
名称 文本域 密码域 复选框 单选按钮 下拉列表 文本 多行文本域 提交按钮 重置按钮 普通按钮 -
表单控件可设置以下标签属性
属性名 取值 type 设置控件类型 name 设置控件名称，最终与值一并发送给服务器 value 设置控件的值 placeholder 设置输入框中的提示文本 maxlength 设置输入框中可输入的最大字符数 checked 设置单选按钮或复选按钮的默认选中 selected 设置下拉菜单的默认选中
-
4. 标签分类
-
块标签
独占一行,不与标签共行;可以手动设置宽高,默认宽度与与父标签保持一致
例 : body div h1~h6 p ul ol li form table (默认尺寸由内容决定) -
行内标签
可以与其他标签共行显示;不能手动设置宽高,尺寸由内容决定
例 : span label b strong i s u sub sup a -
行内块标签
可以与其他标签共行显示,又能手动调整宽高
例 : img input button (表单控件)
5. 标签比较
- 行内标签的特征
- 块标签特征
6. 标签间的转换
-
background-color属性
该属性用于设置元素的背景颜色
名称 值 color_name 规定颜色值为颜色名称的背景颜色（如red） -
display 属性
该属性规定元素应该生成的框的类型，这个属性用于定义建立布局时元素生成的显示框类型
名称 值 none 此元素不会被显示 block 此元素将显示为块级元素，此元素前后会带有换行符 inline 默认。此元素会被显示为内联元素，元素前后没有换行符 inline-block 行内块元素 -
内联标签如何转成块元素
4. ##### 块标签如何转成内联元素
7.progress元素–进度条（H5）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery.min.js"></script>
</head>
<body>
<!-- 进度条元素 -->
<div id="stauts"></div>
<progress value="0"
id="pro"
max="100">
</progress>
<script>
$(function(){
//开启一个周期性的定时器
var taskId=setInterval(function(){
//在控制台输出进度条的值
console.log($("#pro").val());
//先获取进度条值
var _v=$("#pro").val();
//后将值加1
_v++;
//转成百分比的值
$("#stauts").text(_v+'%')
//再将值赋值给进度条元素
$("#pro").val(_v);
//如果值大于元素的最大值
if(_v>=$("#pro")[0].max){
clearInterval(taskId);
$("#stauts").text('下载完成')
}
},100)
})
</script>
</body>
</html>
8.range元素–拖动条(H5)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#box{
background-color:rgb(255,255,255);
width: 100px;
height: 100px;
}
.box{
display: flex;
flex-direction: column;
width: 200px;
}
#view{
display: flex;
}
#view #box{
margin-left: 200px;
}
</style>
<script src="js/jquery.min.js"></script>
</head>
<body>
<div id="view">
<div class="box">
<input type="range"
value="0"
min="0"
max="255"
id="s">
<input type="range"
value="0"
min="0"
max="255"
id="s2">
<input type="range"
value="0"
min="0"
max="255"
id="s3">
</div>
<div id="box">
</div>
</div>
<script>
$("#s").bind("change",function(){
//获取拖动时的滑块值
var s=$(this).val();
var s2=$("#s2").val();
var s3=$("#s3").val();
//将该值作为rgb中三个值的一部分
changeColor(s,s2,s3);
})
$("#s2").bind("change",function(){
//获取拖动时的滑块值
var s=$("#s").val();
var s2=$(this).val();
var s3=$("#s3").val();
//将该值作为rgb中三个值的一部分
changeColor(s,s2,s3);
})
$("#s3").bind("change",function(){
//获取拖动时的滑块值
var s=$("#s").val();
var s2=$("#s2").val();
var s3=$(this).val();
//将该值作为rgb中三个值的一部分
changeColor(s,s2,s3);
})
//编写一个函数，根据传入值改变的元素的背景色
function changeColor(a,b,c){
//将该值作为rgb中三个值的一部分
$("#box")[0].style.backgroundColor="rgb("+a+","+b+","+c+")"
}
</script>
</body>
</html>
04、css基础使用
一、CSS介绍
CSS全称为层叠样式表 ，与HTML相辅相成，实现网页的排版布局与样式美化
二、CSS使用方式
| 名称 | 用途 |
|---|---|
| 内联 | 某一个元素的一个特殊的属性样式 |
| 内嵌 | 某一个页面的样式 |
| 外链 | 多个页面，可能会使用的样式，全局性强的样式 |
1. 行内样式/内联样式（单一页面中使用）
借助于style标签属性，为当前的标签添加样式声明
<标签名 style="样式声明">
CSS样式声明 : 由CSS属性和值组成
例：
style="属性:值;属性:值;"
常用CSS属性 :
2. 内嵌样式（少量页面中使用、写在body前）
借助于style标签，在HTML文档中嵌入CSS样式代码，可以实现CSS样式与HTML标签之间的分离。同时需借助于CSS选择器到HTML 中匹配标签并应用样式
示例:
<style>
选择器{
属性:值;
属性:值;
}
</style>
选择器 : 通过标签名或者某些属性值到页面中选取相应的标签，为其应用样式
示例：
/*标签选择器 : 根据标签名匹配所有的该标签*/
p{
color:red;
}
3. 外链样式表（项目中使用）
- 创建外部样式表文件 后缀使用.css
- 在HTML文件中使用标签引入外部样式表
<!--rel 表示关系，stylesheet 表示样式表格 href属性连接一个样式表格文件-->
<link rel="stylesheet" href="URL" type="text/css">
4. 比较
优先级
样式表特征
-
层叠性
多组CSS样式共同作用于一个标签
-
继承性
后代标签可以继承祖先标签中的某些样式
例 : 大部分的文本属性都可以被继承 -
样式表的优先级
优先级用来解决样式冲突问题。同一个标签的同一个样式(例如文本色)，在不同地方多次进行设置，最终选用哪一种样式？此时哪一种样式表的优先级高选用哪一种。
-
离标签最近的样式优先级最高（就近原则）
- 文档内嵌与外链样式表，优先级一致，看代码书写顺序，后来者居上
- 浏览器默认样式和继承样式优先级较低
三、CSS选择器
1. 作用
匹配文档中的某些标签为其应用样式
2. 分类 :
1. 标签选择器
根据标签名匹配文档中所有该标签
语法 :
标签名{
属性:值;
}
2. id选择器
根据标签的 id 属性值匹配文档中惟一的标签，id具有唯一性，不能重复使用
语法 :
#id属性值{
}
注意 :id属性值自定义,可以由数字，字母，下划线，- 组成，不能以数字开头，尽量见名知意，多个单词组成时，可以使用连接符，下划线，小驼峰表示。
3. class选择器/类选择器
根据标签的class属性值匹配相应的标签，class属性值可以重复使用，实现样式的复用
语法 :
.class属性值 {
}
注意:标签与类选择器结合时，标签在前，类选择器在后 例 : a.c1{ }
4. 群组选择器
为一组标签统一设置样式
语法 :
selector1,selector2,selector3{
}
5. 后代选择器
匹配满足选择器的所有后代标签(包含直接子标签和间接子标签)
语法 :
selector1 selector2{
}
匹配selector1中所有满足selector2的后代标签
6. 子代选择器
匹配满足选择器的所有直接子标签
语法 :
selector1>selector2{
}
7. 伪类选择器
为标签的不同状态分别设置样式，必须与基础选择器结合使用
分类 :
:hover 鼠标滑过时的状态
:focus 焦点状态(文本框被编辑时就称为获取焦点)
使用 :
.c1:hover{ }
.txt:focus{}
8.过渡动画
/* 过渡动画的方法 */
transition: style属性 + 时间
transition: all 3s
9.元素旋转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
//z轴
img{
/* 顺时针旋转一个20度 */
transform:rotateZ(-20deg);
transition: all 3s;
}
img:hover{
transform:rotateZ(360deg)
}
//x轴
#a{
transform: rotateX(50deg)
}
//y轴
#b{
transform:rotateY(50deg)
}
//拉伸
#c{
transform:scale(1.5)
}
//倾斜
#d{
transform:skew(60deg)
}
</style>
</head>
<body>
<img src="../imgs/img02-3.png" alt="">
<img id="a" src="../imgs/img02-3.png" alt="">
<img id="b" src="../imgs/img02-3.png" alt="">
<img id="c" src="../imgs/img02-3.png" alt="">
<img id="d" src="../imgs/img02-3.png" alt="">
</body>
</html>
3. 选择器的优先级
选择器为标签设置样式，发生冲突时，主要看选择器的权重，权重越大，优先级越高，可用 !important 变更。
| 选择器 | 权重 |
|---|---|
| 标签选择器 | 1 |
| (伪)类选择器 | 10 |
| id选择器 | 100 |
| 行内样式 | 1000 |
复杂选择器(后代,子代，伪类)最终的权重为各个选择器权重值之和群组选择器权重以每个选择器单独的权重为准，不进行相加计算。
例 :
/*群组选择器之间互相独立，不影响优先级*/
body,h1,p{ /*标签选择器权重为 1 */
color:red;
}
.c1 a{ /*当前组合选择器权重为 10+1 */
color:green;
}
#d1>.c2{ /*当前组合选择器权重为 100+10 */
color:blue;
}
四、标签的尺寸和颜色
1. 标签的尺寸
- px 像素单位
- 百分比 % 相对父标签
- 相对单位 em 1em=16px 通常用于移动端的页面开发常用1.5em
- rpx = 小程序页面的单位
- 当页面标签的内容大小超出了标签的宽度，可以使用 overflow 属性 来解决超出部分的显示方式，建议使用auto;
2. 颜色
-
标签的字体，背景，边框
-
使用方式 color:red；
-
英文单词
-
rgb:
-
rgb(0~255)，rgb(2,3,5)
-
rgba(0~1)，rgba(2,3,5,0.5)
-
-
16进制
- 长的16进制 #ffffff；#000000
- 短的16进制 #fff；#000
-
五、盒模型
1. 基础概念
盒子模型分别由外边距、边框、内边距和标签内容组成。
2. 外边距
-
属性：margin
-
作用：调整标签与标签之间的距离
-
特殊：
1）margin:0; 取消默认外边距
2）margin:0 auto;左右自动外边距，实现标签在父标签范围内水平居中
3）margin:-10px;标签位置的微调 -
单方向外边距：只取一个值
margin-top margin-right margin-bottom margin-left -
外边距合并（满足条件：内容为空）：
1）垂直相遇
-
子标签的 margin-top 作用于父标签上
-
标签之间同时设置垂直方向的外边距，最终取较大的值
2）包含合并
- 当一个标签包含在另一个标签中时，它们的上面和包含上面的父标签
- 下面和包含下面的外标签的边距之间也会发生合并
3. 边框
1) 边框实现
语法：
border:width style color;
边框样式为必填项，分为：
| 样式取值 | 含义 |
|---|---|
| solid | 实线边框 |
| dotted | 点线边框 |
| dashed | 虚线边框 |
| double | 双线边框 |
2) 单边框设置
分别设置某一方向的边框，取值：width style color;
| 属性 | 作用 |
|---|---|
| border-top | 设置上边框 |
| border-bottom | 设置下边框 |
| border-left | 设置左边框 |
| border-right | 设置右边框 |
3) 网页三角标制作
- 标签设置宽高为0
- 统一设置四个方向透明边框
- 调整某个方向边框可见色
4) 圆角边框
- 属性：border-radius 指定圆角半径
- 取值：像素值或百分比
- 取值规律（对角线，左上角开始 ）：
一个值 表示统一设置上右下左
四个值 表示分别设置上右下左
两个值 表示分别设置上下 左右
三个值 表示分别设置上右下，左右保持一致
5) 轮廓线
- 属性：outline
- 取值：width style color
- 区别：边框实际占位，轮廓不占位
- 特殊：取none可以取消文本输入框默认轮廓线
2. 内边距
- 属性：padding
- 作用：调整标签内容框与边框之间的距离
- 取值：单位是 px 或百分比，但不允许使用负值
20px; 一个值表示统一设置上右下左
20px 30px; 两个值表示分别设置(上下) (左右)
20px 30px 40px; 三个值表示分别设置上右下，左右保持一致
20px 30px 40px 50px; 表示分别设置上右下左
- 单方向内边距，只能取一个值：
padding-top
padding-right
padding-bottom
padding-left
3. 盒阴影
- 属性：box-shadow
- 取值：h-shadow v-shadow blur spread color;
- 使用：不管是浏览器窗口还是标签自身都可以构建坐标系，统一以左上角为原点，向右向下为X轴和Y轴的正方向
h-shadow 取像素值，阴影的水平偏移距离
v-shadow 取像素值，阴影的垂直偏移距离
blur 取像素值，表示阴影的模糊程度，值越大越模糊
spread 选填，取像素值，阴影的尺寸
color 设置阴影颜色,默认为黑色
4. 盒模型概念
- 在模型中，它规定了标签处理内容、内边距、边框和外边距的方式
- 最内是内容，包围内容的是内边距，内边距的边缘是边框
- 边框以外是外边距，外边距默认是透明的
5. 标签最终尺寸的计算
- 盒模型相关的属性会影响标签在文档中的实际占位，进而影响布局
- 标签设置width/height指定的是内容框的大小
- 最终尺寸 = width/height+padding+border+margin
六、背景属性
1. 背景颜色
background-color: red;
opacity 属性设置元素的不透明级别，如果是图片，则是元素本身，如果是块元素，则是背景色。
2. 背景图片相关
1）设置背景图片
background-image : url("路径");
设置背景图片，指定图片路径，如果路径中出现中文或空格，需要加引号
2）设置背景图片的重复方式
默认背景图片从元素的左上角显示，如果图片尺寸与元素尺寸不匹配时，会出现以下情况：
- 如果元素尺寸大于图片尺寸，会自动重复平铺，直至铺满整个元素
- 如果元素尺寸小于图片尺寸，图片默认从元素左上角开始显示，超出部分不可见
background-repeat:repeat/repeat-x/repeat-y/no-repeat
取值 ：
repeat 默认值，沿水平和垂直方向重复平铺
repeat-x 沿X轴重复平铺
repeat-y 沿Y轴重复平铺
no-repeat 不重复平铺
3）设置背景图片的显示位置
默认显示在元素左上角
background-position:x y;
取值方式 ：
1. 像素值
设置背景图片的在元素坐标系中的起点坐标
2. 方位值
水平：left/center/right
垂直：top/center/bottom
注：如果只设置某一个方向的方位值，另外一个方向默认为center
精灵图技术 ：为了减少网络请求，可以将所有的小图标拼接在一张图片上，一次网络请求全部得到；借助于background-position 进行背景图片位置的调整，实现显示不同的图标
4）设置背景图片的尺寸
background-size:width height;
取值方式 ：
1. 像素值
1. 500px 500px; 同时指定宽高
2. 500px; 指定宽度，高度自适应
2. 百分比
百分比参照元素的尺寸进行计算
1. 50% 50%; 根据元素宽高,分别计算图片的宽高
2. 50%; 根据元素宽度计算图片宽高,图片高度等比例缩放
3. 背景属性简写
background:color url("") repeat position;
注意 ：
- 如果需要同时设置以上属性值，遵照相应顺序书写
- background-size 单独设置
05、布局方式
1、普通文档流
默认布局方式，按照代码书写顺序及标签类型从上到下，从左到右依次显示。
2、浮动布局
主要用于设置块元素的水平排列
1）属性
float
2）取值
可取 left 或 right，设置元素向左浮动或向右浮动
float:left/right;
clear:left/right/both
3）特点
- 元素设置浮动会从原始位置脱流，向左或向右依次停靠在其他元素边缘，在文档中不再占位
- 元素设置浮动，就具有块元素的特征，可以手动调整宽高
- “文字环绕”：浮动元素遮挡正常元素的位置，无法遮挡正常内容的显示，内容围绕在浮动元素周围显示
4）常见问题
子元素全部设置浮动，导致父元素高度为0，影响父元素背景色和背景图片展示,影响页面布局
5）解决
- 对于内容固定的元素，如果子元素都浮动，可以给父元素固定高度(例:导航栏)
- 在父元素的末尾添加空的块元素。设置 clear:both; 清除浮动
- 为父元素设置 overflow:hidden; 解决高度为0
6）示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#img{
overflow: hidden;
border:solid 1px red;
padding-top: 5px;
padding-left:5px;
width: 394px;
}
#img img{
float: left;
margin-right:5px;
margin-bottom:5px;
opacity: 0.1;
}
#img img:hover{
opacity: 1;
}
</style>
</head>
<body>
<div id="img">
<img src="../../imgs/img02-3.png" alt="">
<img src="../../imgs/img02-3.png" alt="">
<img src="../../imgs/img02-3.png" alt="">
<img src="../../imgs/img02-3.png" alt="">
</div>
</body>
</html>
3、定位布局
结合偏移属性调整元素的显示位置
1）属性
属性规定元素的定位类型，任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。
position
2）取值
可取relative（相对定位）/ absolute（绝对定位）/ fixed（固定定位）
postion:relative/absolute/fixed
3）偏移属性
设置定位的元素可以使用偏移属性调整距离参照物的位置
top 距参照物的顶部
right 距参照物的右侧
bottom 距参照物的底部
left 距参照物的左侧
4）分类
- relative 相对定位
元素设置相对定位,可参照元素在文档中的原始位置进行偏移,不会脱离文档流
- absolute 绝对定位
1. 绝对定位的元素参照离他最近的已经定位的祖先元素进行偏移,如果没有,则参照窗口进行偏移
2. 绝对定位的元素会脱流,在文档中不占位,可以手动设置宽高
使用绝对定位 : 父元素设置相对定位,子元素绝对定位，参照已定位的父元素偏移
- fixed 固定定位
1. 参照窗口进行定位,不跟随网页滚动而滚动
2. 脱离文档流
5）堆叠次序
元素发生堆叠时可以使用 z-index 属性调整已定位元素的显示位置，值越大元素越靠上：
- 属性 : z-index
- 取值 : 无单位的数值,数值越大，越靠上
- 堆叠：
- 定位元素与文档中正常元素发生堆叠，永远是已定位元素在上
- 同为已定位元素发生堆叠，按照 HTML 代码的书写顺序，后来者居上
4、文本属性
1. 字体相关
1）设置字体大小
font-size:20px;
2）设置字体粗细程度
font-weight:normal;
取值 ：
1. normal（默认值）等价于400
2. bold (加粗) 等价于700
3）设置斜体
font-style:italic;
4）设置字体名称
font-family:Arial,"黑体","宋体";
取值 :
-
1.可以指定多个字体名称作为备选字体，使用逗号隔开
-
如果字体名称为中文，或者名称中出现了空格，必须使用引号
例 :
font-family:Arial;
font-family:"黑体","Microsoft YaHei",Arial;
5）字体属性简写
font : style weight size family;
注意 :
1. 如果四个属性值都必须设置，严格按照顺序书
2. size family 是必填项
2. 文本样式
1）文本颜色
color:red;
2）文本装饰线
text-decoration:none;
取值 :
underline 下划线
overline 上划线
line-through 删除线
none 取消装饰线
3）文本内容的水平对齐方式
text-align:center;
取值 :
left(默认值) 左对齐
center 居中对齐
right 右对齐
4）行高
line-height:30px;
使用 :
文本在当前行中永远垂直居中，可以借助行高调整文本在元素中的垂直显示位置
1. line-height = height 设置一行文本在元素中垂直居中
2. line-height > height 文本下移显示
3. line-height < height 文本靠上显示
06、JS
一、 JavaScript 概述
1. 什么是JavaScript
1) JavaScript 介绍
简称JS，是一种浏览器解释型语言，嵌套在HTML文件中交给浏览器解释执行。主要用来实现网页的动态效果，用户交互及前后端的数据传输等（解释性脚本语言）。
2) JavaScript 组成
-
核心语法 - ECMAScript (ES5-ES6) 规范了JavaScript的基本语法
-
浏览器对象模型 -BOM
Browser Object Model，提供了一系列操作浏览器的方法 -
文档对象模型 -DOM
Document Object Model ，提供了一系列操作的文档的方法
2. 使用方式
-
元素绑定事件
- 事件 ：指用户的行为（单击，双击等）或元素的状态（输入框的焦点状态等）
- 事件处理：元素监听某种事件并在事件发生后自动执行事件处理函数
- 常用事件：onclick (单击事件)
- 语法 ：将事件名称以标签属性的方式绑定到元素上，自定义事件处理
<!--实现点击按钮在控制台输出--> <button onclick="console.log('Hello World');">点击</button> -
文档内嵌。使用既可以实现内嵌 JavaScript 代码，也可以实现引入外部的 JavaScript 文件，但是只能二选一。
-
JavaScript 输入和输出语句
- alert("")；普通的网页弹框
- console.log()；控制台输出，多用于代码调试
- document.write(“
Hello
”)；实现在动态在网页中写入内容- 可以识别HTML标签,脚本代码可以在文档任何地方书写，如果是普通写入（不涉及事件），区分代码的书写位置插入
- 文档渲染结束后，再次执行此方法，会重写网页内容
二、绑定元素的事件
事件：指用户的行为或元素的状态。由指定元素监听相关的事件，并且绑定事件处理函数。
事件处理函数：元素监听事件，并在事件发生时自动执行的操作。
1）事件函数分类
onclick //单击
ondblclick //双击
onmouseover //鼠标移入
onmouseout //鼠标移出
onmousemove //鼠标移动
2）获取元素节点
根据 id 属性值取元素节点
var elem = document.getElementById("");
/*
参数 : id属性值
返回值 : 元素节点
*/
3）事件绑定方式
- 内联方式
将事件名称作为标签属性绑定到元素上
例 :
<button onclick="alert()">点击</button>
- 动态绑定
获取元素节点，动态添加事件
例 :
btn.onclick = function (){
};
三、基础语法
1. 语法规范
- JavaScript是由语句组成,语句由关键字，变量，常量，运算符，方法组成。
- 分号可以作为语句结束的标志，也可以省略
- JavaScript严格区分大小写
- 注释语法
单行注释使用 //
多行注释使用 /* */
2. JavaScript的变量与常量
1) 变量
-
作用 : 用于存储程序运行过程中可动态修改的数据
-
语法 : 使用关键var声明,自定义变量名
var a; //变量声明 a = 100; //变量赋值 var b = 200; //声明并赋值 var m,n,k; //同时声明多个变量 var j = 10,c = 20; //同时声明并赋值多个变量 -
命名规范 :
- 变量名，常量名，函数名，方法名自定义，可以由数字，字母，下划线，$组成，禁止以数字开头
- 禁止与关键字冲突(var const function if else for while do break case switch return class)
- 变量名严格区分大小写
- 变量名尽量见名知意，多个单词组成采用小驼峰,例如：“userName”
-
使用注意 :
- 变量如果省略 var 关键字，并且未赋值，直接访问会报错
- 变量使用 var 关键字声明但未赋值，变量初始值为 undefined
- 变量省略 var 关键字声明，已被赋值，可正常使用，影响变量作用域
2) 常量
-
作用 : 存储一经定义就无法修改的数据
-
语法 : 必须声明的同时赋值
const PI = 3.14; -
注意 :
- 常量一经定义，不能修改，强制修改会报错
- 命名规范同变量，为了区分变量，常量名采用全大写字母
-
操作小数位
toFixed(n)； 保留小数点后 n 位，并且四舍五入。
使用 ：var num = 3.1415926; //保留当前变量小数点后两位 var res = num.toFixed(2);
3. 数据类型
1) 基本数据类型（简单数据类型）
-
number 数值类型
-
整数
- 十进制表示
var a = 100;2. 八进制表示 以0为前缀var b = 021; //结果为十进制的 17使用 : 整数可以采用不同进制表示，在控制台输出时一律会按照十进制输出 -
小数
- 小数点表示
var m = 1.2345;- 科学计数法
例 : 1.5e3
e 表示10为底，e 后面的数值表示10的次方数
1.5e3 等价于 1.5 * 10(3)
-
-
string 字符串类型
字符串：由一个或多个字符组成，使用""或’'表示，每一位字符都有对应的Unicode编码var s = "100"; var s1 = "张三"; -
boolean 布尔类型
只有真和假两个值，布尔值与number值可以互相转换。true 为 1，false 为 0var isSave = true; var isChecked = false; -
undefined
特殊值，变量声明未赋值时显示 undefinedvar a; console.log(a);//undefined -
null 空类型
定义对象引用时使用 null，表示对象为空
（1）引用数据类型
主要指对象，函数等
（2）检测数据类型
typeof 变量或表达式
typeof (变量或表达式)
var n = "asda";
console.log(typeof n);//string
console.log(typeof(n));//string
4. 数据类型转换
不同类型的数据参与运算时,需要转换类型
1) 强制类型转换
-
转换字符串类型
方法：toString()
返回转换后的字符串var a = 100; a = a.toString(); //"100" var b = true; b = b.toString(); //"true" -
转换number类型
- Number(param)
参数为要进行数据类型转换的变量或值，返回转换后的结果:
1. 如果转换成功，返回number值
2. 如果转换失败，返回NaN，(Not a Number)，是非number字符，一律转换失败，返回 NaN
- Number(param)
2) 隐式类型转换（自动转换）
-
当字符串与其他数据类型进行"+"运算时，表示字符串的拼接，不再是数学运算
转换规则 ：将非字符串类型的数据转换成字符串之后进行拼接，最终结果为字符串 -
其他情况下，一律将操作数转number进行数学运算
5. 运算符
1) 赋值运算符
= 将右边的值赋给左边变量
2) 算数运算符
+ - * / % 加 减 乘 除 取余
3) 符合运算符
+= -= *= /= %=
4) 自增或自减运算符
++ -- 变量的自增和自减指的是在自身基础上进行 +1或-1 的操作
注意：
- 自增或自减运算符在单独与变量结合时，放前和放后没有区别
- 如果自增或自减运算符与其他运算符结合使用，要区分前缀和后缀，做前缀，那就先++/–，再进行赋值或其他运算，如果做后缀，就先结合其他运算符，再进行++ / –
5) 关系运算符/比较运算符
> <
>= <=
==(相等) !=(相等)
===(全等) !==(不全等)
-
关系运算符用来判断表达式之间的关系，结果永远是布尔值 true/false
-
使用
-
字符串与字符串之间的比较
依次比较每位字符的Unicode码，只要某位字符比较出结果，就返回最终结果 -
str.charCodeAt(index)
方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数
index必需。表示字符串中某个位置的数字，即字符在字符串中的下标。
-
-
相等与全等
- 相等：不考虑数据类型，只做值的比较(包含自动类型转换)
- 全等：不会进行数据类型转换，要求数据类型一致并且值相等才判断全等
6) 逻辑运算符
- && 逻辑与
表达式同时成立，最终结果才为true；1则1 - || 逻辑或
表达式中只要有一个成立，最终结果即为true；有1则1 - ! 逻辑非
对已有表达式的结果取反
注意：除零值以外，所有值都为真
7) 三目运算符
语法 :
表达式1 ? 表达式2 : 表达式3;
过程 :
- 判断表达式1是否成立，返回布尔值；
- 如果表达式1成立，执行表达式2；
- 如果表达式1不成立，执行表达式3；
8)元素的显示和隐藏
语法：
元素.style.dispaly='none'
- 如果 display 值为 “none” 则表示隐藏。
- 如果 display 值为 ”block“ 表示显示。
四、流程控制
1. 作用
控制代码的执行顺序
2. 分类
1）顺序结构
从上到下依次执行代码语句
2）分支/选择结构
1. if语句
-
简单if结构
if(条件表达式){ 表达式成立时执行的代码段 }注意 : 除零值以外，其他值都为真，以下条件为假值false
if(0){} if(0.0){} if(""){} //空字符串 if(undefined){} if(NaN){} if(null){}特殊写法 :
{ }可以省略,一旦省略，if语句只控制其后的第一行代码 -
if - else结构
if(条件表达式){ //条件成立时执行 }else{ //条件不成立时选择执行 } -
多重分支结构
if(条件1){ //条件1成立时执行 }else if(条件2){ //条件2成立时执行 }else if(条件3){ //条件3成立时执行 }...else{ //条件不成立时执行 }
2. switch语句
- 语法 :
switch(value){
case 值1 :
//value与值1匹配全等时,执行的代码段
break; //结束匹配
case 值2 :
//value与值2匹配全等时,执行的代码段
break;
case 值3 :
//value与值3匹配全等时,执行的代码段
break;
default:
//所有case匹配失败后默认执行的语句
break;
}
- 使用 :
1. switch语句用于值的匹配，case用于列出所有可能的值；只有switch()表达式的值与case的值匹配全等时，才会执行case对应的代码段
2. break用于结束匹配，不再向后执行；可以省略，break一旦省略，会从当前匹配到的case开始，向后执行所有的代码语句，直至结束或碰到break跳出
3. default用来表示所有case都匹配失败的情况，一般写在末尾，做默认操作
4. 多个case共用代码段
case 值1:
case 值2:
case 值3:
//以上任意一个值匹配全等都会执行的代码段
3）循环结构
- 作用
根据条件，重复执行某段代码 - 分类
- while循环
定义循环变量;
while(循环条件){
条件满足时执行的代码段
更新循环变量;
}
- do-while循环
do{
循环体;
更新循环变量
}while(循环条件);
与 while 循环的区别 :
- while 循环先判断循环条件，条件成立才执行循环体
- do-while 循环不管条件是否成立，先执行一次循环体
- for 循环
for(定义循环变量;循环条件;更新循环变量){
循环体;
}
循环控制 :
- break 强制结束循环
- continue 结束当次循环，开始下一次循环
循环嵌套 :
在循环中嵌套添加其他循环
五、函数
1. 作用
封装一段待执行的代码
2. 语法
//函数声明
function 函数名(参数列表){
函数体
return 返回值;
}
//函数调用
函数名(参数列表);
3. 使用
函数名自定义，见名知意，命名规范参照变量的命名规范。普通函数以小写字母开头，用于区分构造函数(构造函数使用大写字母开头，定义类)
4. 匿名函数（立即执行函数）
匿名函数：省略函数名的函数。语法为：
- 匿名函数自执行
(function (形参){
})(实参);
- 定义变量接收匿名函数
var fn = function (){};
fn(); //函数调用
5. 作用域
JavaScript 中作用域分为全局作用域和函数作用域，以函数的{ }作为划分作用域的依据
- 全局变量和全局函数
- 只要在函数外部使用 var 关键字定义的变量，或函数都是全局变量和全局函数，在任何地方都可以访问
- 所有省略 var 关键字定义的变量，一律是全局变量
- 局部变量/局部函数
- 在函数内部使用 var 关键字定义的变量为局部变量，函数内部定义的函数也为局部函数，只能在当前作用域中使用，外界无法访问
- 作用域链
局部作用域中访问变量或函数，首先从当前作用域中查找，当前作用域中没有的话，向上级作用域中查找，直至全局作用域
6. 获取多个DOM元素和控制属性
- 根据标签名获取元素节点列表
var elems = document.getElementsByTagName("");
/*
参数 : 标签名
返回值 : 节点列表,需要从节点列表中获取具体的元素节点对象,添加相应下标。
*/
- 根据 class 属性值获取元素节点列表
var elems = document.getElementsByClassName("");
/*
参数 : 类名(class属性值)
返回值 : 节点列表
*/
- 元素节点对象提供了以下属性来操作元素内容
innerHTML : 读取或设置元素文本内容,可识别标签语法
innerText : 设置元素文本内容,不能识别标签语法
value : 读取或设置表单控件的值
- 获取 DOM 树中的属性值
- 设置 DOM 树中的属性值：
elem.getAttribute("attrname");//根据指定的属性名返回对应属性值
elem.setAttribute("attrname","value");//为元素添加属性,参数为属性名和属性值
elem.removeAttribute("attrname");//移除指定属性
7.代码示例
轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#box{
width: 738px;
height: 418px;
border: solid 1px red;
position: relative;
}
#box #img{
width: 100%;
height: 100%;
}
#box #ll,#box #rr{
position: absolute;
top:50%;
margin-top: -20px;
}
#box #ll{
left: 0;
}
#box #rr{
right:0;
}
</style>
</head>
<body>
<div id="box">
<img id="ll" src="../../imgs/l1-6.png" alt="">
<img id="img" src="../../imgs/gm1-6.jpg" alt="">
<img id="rr" src="../../imgs/r1-6.png" alt="">
</div>
<script>
var i=1;
var ll=document.getElementById("ll");
var rr=document.getElementById("rr");
var img=document.getElementById("img")
ll.onclick=function(){
i--;
if(i==0) i=5;
console.log(i);
showimg(i);
}
rr.onclick=function(){
i++;
if(i==6) i=1
console.log(i);
showimg(i);
}
function showimg(i){
var url="";
switch(i){
case 1:
url='../../imgs/gm1-6.jpg'
break;
case 2:
url='../../imgs/gm2-6.jpg'
break;
case 3:
url='../../imgs/gm3-6.jpg'
break;
case 4:
url='../../imgs/gm4-6.jpg'
break;
case 5:
url='../../imgs/gm5-6.jpg'
break;
}
img.setAttribute("src",url)
}
</script>
</body>
</html>
导航块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
ul,p{
padding: 0;
margin: 0;
list-style-type: none;
}
a{
text-decoration: none;
}
#box{
width: 412px;
border:solid 0px red;
}
#box .nav{
overflow: hidden;
}
#box .nav li{
float: left;
width: 103px;
text-align: center;
background-color: #fdfdfd;
padding: 8px 0;
cursor: pointer;
}
#box .nav .ff{
background-color: #3c93cf;
color:#fff;
}
#box .con{
display: none;
}
#box .con li{
font-size: 14px;
overflow: hidden;
padding: 12px 8px;
border-bottom: dashed 1px #ccc;
}
#box .con li p{
float: left;
}
#box .con li span{
float: right;
}
</style>
</head>
<body>
<div id="box">
<ul class="nav">
<li class="bar">热点新闻</li>
<li class="bar">合作播报</li>
<li class="bar">行业资讯</li>
<li class="bar ff">运营攻略</li>
</ul>
<ul class="con">
<li><p><a href="">[热点新闻]</a> 加盟网络棋牌游戏的注意事项</p> <span>2019-09-10</span></li>
<li><p><a href="">[热点新闻]</a> 可以勾选你需要的出现在图项</p> <span>2019-09-10</span></li>
<li><p><a href="">[热点新闻]</a> 菜单栏上的Mac测色计应用工具</p> <span>2019-09-10</span></li>
<li><p><a href="">[热点新闻]</a> 获得屏幕当前位置的颜色值</p> <span>2019-09-10</span></li>
</ul>
<ul class="con">
<li><p><a href="">[合作播报]</a> 色软件可以快速准确的获取到</p> <span>2019-09-10</span></li>
<li><p><a href="">[合作播报]</a> 可以勾选你需要的出现在图项</p> <span>2019-09-10</span></li>
<li><p><a href="">[合作播报]</a> 菜单栏上的Mac测色计应用工具</p> <span>2019-09-10</span></li>
<li><p><a href="">[合作播报]</a> 获得屏幕当前位置的颜色值</p> <span>2019-09-10</span></li>
</ul>
<ul class="con">
<li><p><a href="">[行业资讯]</a> 屏幕取色软件操作非常简单</p> <span>2019-09-10</span></li>
<li><p><a href="">[行业资讯]</a> 可以勾选你需要的出现在图项</p> <span>2019-09-10</span></li>
<li><p><a href="">[行业资讯]</a> 菜单栏上的Mac测色计应用工具</p> <span>2019-09-10</span></li>
<li><p><a href="">[行业资讯]</a> 获得屏幕当前位置的颜色值</p> <span>2019-09-10</span></li>
</ul>
<ul class="con">
<li><p><a href="">[运营攻略]</a> 给大家搜集了多款Mac平台上的屏幕取</p> <span>2019-09-10</span></li>
<li><p><a href="">[运营攻略]</a> 可以勾选你需要的出现在图项</p> <span>2019-09-10</span></li>
<li><p><a href="">[运营攻略]</a> 菜单栏上的Mac测色计应用工具</p> <span>2019-09-10</span></li>
<li><p><a href="">[运营攻略]</a> 获得屏幕当前位置的颜色值</p> <span>2019-09-10</span></li>
</ul>
</div>
<script>
var cons=document.getElementsByClassName("con");
var bars=document.getElementsByClassName("bar")
//显示最后一项列表内容
cons[3].style.display="block";
bars[0].onclick=function(){
hidcon();
this.setAttribute("class","bar ff")
cons[0].style.display="block";
}
bars[1].onclick=function(){
hidcon();
this.setAttribute("class","bar ff")
cons[1].style.display="block";
}
bars[2].onclick=function(){
hidcon();
this.setAttribute("class","bar ff")
cons[2].style.display="block";
}
bars[3].onclick=function(){
hidcon();
this.setAttribute("class","bar ff")
cons[3].style.display="block";
}
function hidcon(){
for(var i=0;i<cons.length;i++){
cons[i].style.display="none"
bars[i].setAttribute("class","bar");
}
}
</script>
</body>
</html>
六、内置对象
1） 对象
对象是由属性和方法组成的,使用点语法访问
2） Array 数组
1. 创建
let arr1 = [1,2,3]
let arr2 = new Array(1,2,3)
2. 特点
- 数组用于存储若干数据,自动为每位数据分配下标,从0开始
- 数组中的元素不限数据类型,长度可以动态调整
- 动态操作数组元素 ：根据元素下标读取或修改数组元素，arr[index]
3. 属性和方法
-
属性 : length 表示数组长度,可读可写
-
方法 :
-
push(data)
在数组的末尾添加一个或多个元素,多个元素之间使用逗号隔开
返回添加之后的数组长度 -
pop()
移除末尾元素
返回被移除的元素 -
unshift(data)
在数组的头部添加一个或多个元素
返回添加之后的数组长度 -
shift()
移除数组的第一个元素
返回被移除的元素 -
splice(index,num)
从数组中添加/删除项目
返回被删除的项目
-
toString()
将数组转换成字符串类型
返回字符串结果 -
join(param)
将数组转换成字符串,可以指定元素之间的连接符,如果参数省略,默认按照逗号连接
返回字符串 -
reverse()
反转数组,倒序重排
返回重排的数组,注意该方法直接修改原数组的结构 -
sort()
对数组中元素排序,默认按照Unicode编码升序排列
返回重排后的数组,直接修改原有数组
参数 : 可选,自定义排序算法
例：//自定义升序 function sortASC(a,b){ return a-b; } arr1 = [10,5,3,1,4,2] arr1.sort(function(a,b){retrun a-b;})作用：作为参数传递到sort()中,会自动传入两个元素进行比较,如果a-b>0,交换元素的值,自定义升序排列
//自定义降序 function sortDESC(a,b){ return b-a; } //如果返回值>0,交换元素的值,b-a表示降序排列 arr1 = [10,5,3,1,4,2] arr1.sort(function(a,b){retrun b-a;})
-
4. 二维数组
数组中的每个元素又是数组
var arr1 = [1,2,3];
var arr2 = [[1,2],[3,4],[5,6,7]];
//操作数组元素
var r1 = arr2[0] //内层数组
var num = r1[0]; //值 1
//简写
var num2 = arr2[1][0];
3）String 对象
1. 创建
var str = "100";
var str2 = new String("hello");
2. 特点
字符串采用数组结构存储每位字符,自动为字符分配下标,从0开始
3. 属性
length ：获取字符串长度
4. 方法
-
转换字母大小写
toUpperCase() 转大写字母
toLowerCase() 转小写字母
返回转换后的字符串,不影响原始字符串 -
获取字符或字符编码
charAt(index) 获取指定下标的字符
charCodeAt(index) 获取指定下标的字符编码
参数为指定的下标,可以省略,默认为0 -
获取指定字符的下标
- indexOf(str,fromIndex)
作用 : 获取指定字符的下标,从前向后查询,找到即返回
参数 :
str 表示要查找的字符串,必填
fromIndex 表示起始下标,默认为0
返回 :
返回指定字符的下标,查找失败返回-1
- indexOf(str,fromIndex)
-
截取字符串
substring(startIndex,endIndex)
作用 : 根据指定的下标范围截取字符串,startIndex ~ endIndex-1
参数 :
startIndex 表示起始下标
endIndex 表示结束下标,可以省略,省略表示截止末尾 -
substr(startIndex,len)
作用：根据下标截取指定的字符串
-
分割字符串
split(param)
作用 : 将字符串按照指定的字符进行分割,以数组形式返回分割结果
参数 : 指定分隔符,必须是字符串中存在的字符,如果字符串中不存在,分割失败,仍然返回数组 -
模式匹配
-
正则表达式对象 RegExp
RegExp : Regualr Expression
-
语法 ：
var reg1 = /微软/ig;
var reg2 = new RegExp(‘匹配模式’,‘修饰符’);
正则表达式对象可以接收一个变量。 -
属性 ：
lastIndex : 可读可写，表示下一次匹配的起始索引
注意 ：- 默认情况下，正则表达式对象不能重复调用方法，
如果重复调用，结果会出错：
由于 lastIndex 保存再一次匹配的起始下标，
重复调用时，不能保证每次都从下标0开始
验证，可以手动调整 lastIndex 为 0。 - 只有正则对象设置全局匹配 g ，该属性才起作用。
- 默认情况下，正则表达式对象不能重复调用方法，
-
方法 ：
test(str) :验证字符串中是否存在满足正则匹配模式的内容，存在则返回true，
不存在返回false参数为要验证的字符串。
-
-
作用 : 借助正则表达式实现字符串中固定格式内容的查找和替换
正则表达式 :
var reg1 = /字符模式/修饰符;
修饰符 :
i : ignorecase 忽略大小写
g : global 全局范围
字符串方法 :-
match(regExp/subStr)
作用 : 查找字符串中满足正则格式或满足指定字符串的内容
返回 : 数组,存放查找结果 -
replace(regExp/subStr,newStr)
作用 : 根据正则表达式或字符串查找相关内容并进行替换
返回 : 替换后的字符串,不影响原始字符串。 -
<script> var str="abHehdf"; var reg=/h/ig; //var reg=new RegExp('h','i'); //test正则对象的一个方法 //console.log(reg.test(str)); //match是字符串的方法 console.log(str.match(reg)); //$ var newstr=str.replace(reg,'$'); console.log(str); //输出替换后的 console.log(newstr); </script>
-
4) Math 对象
1. 定义
Math对象主要提供一些列数学运算的方法
2. 属性
- 圆周率 : Math.PI
- 自然对数 : Math.E
3. 方法
- Math.random(); 生成0-1之间的随机数
- Math.ceil(x); 对x向上取整,忽略小数位,整数位+1
- Math.floor(x); 对x向下取整,舍弃小数位,保留整数位
- Math.round(x); 对x四舍五入取整数
5）日期对象
1. 创建日期对象
1. var date2 = new Date("2011/11/11");
2. var date3 = new Date("2011/11/11 11:11:11");
2. 日期对象方法
- 读取或设置当前时间的毫秒数：getTime()
- 获取时间分量
- getFullYear()
- getMonth()
- getDate()
07、BOM和DOM
一、BOM 对象
1. BOM 介绍
BOM全称为“Browser Object Model”，浏览器对象模型。提供一系列操作浏览器的属性和方法。核心对象为window对象，不需要手动创建，跟随网页运行自动产生，直接使用，在使用时可以省略书写。
2. 对象方法
周期性定时器
作用：每隔一段时间就执行一次代码
//开启定时器:
var timerID = setInterval(function,interval);
/*
参数 :
function : 需要执行的代码,可以传入函数名;或匿名函数
interval : 时间间隔,默认以毫秒为单位 1s = 1000ms
返回值 : 返回定时器的ID,用于关闭定时器
*/
关闭定时器 :
//关闭指定id对应的定时器
clearInterval(timerID);
一次性定时器
作用：等待多久之后执行一次代码
//开启超时调用:
var timerId = setTimeout(function,timeout);
//关闭超时调用:
clearTimeout(timerId);
3. 对象属性
window的大部分属性又是对象类型
-
history
作用：保存当前窗口所访问过的URL
属性 : length 表示当前窗口访问过的URL数量
方法 :back() 对应浏览器窗口的后退按钮，访问前一个记录 forward() 对应前进按钮，访问记录中的下一个URL -
location
作用：保存当前窗口的地址栏信息(URL)
属性 : href 设置或读取当前窗口的地址栏信息
方法 :reload(param) 重载页面(刷新) 参数为布尔值，默认为 false，表示从缓存中加载，设置为true,强制从服务器根目录加载
二、DOM节点操作
DOM全称为 “Document Object Model”，文档对象模型，提供操作HTML文档的方法。（注：每个html文件在浏览器中都视为一篇文档,操作文档实际就是操作页面元素。）
1. 节点对象
JavaScript 会对 html 文档中的元素、属性、文本甚至注释进行封装，称为节点对象，提供相关的属性和方法。
2. 访问节点
- 元素节点 ( 操作标签）
- 属性节点（操作标签属性）
- 文本节点（操作标签的文本内容）
标签属性都是元素节点对象的属性,可以使用点语法访问，例如：
h1.id = "d1"; //set 方法
console.log(h1.id); //get 方法
h1.id = null; //remove 方法
注意 :
- 属性值以字符串表示
- class属性需要更名为 className，避免与关键字冲突，例如：
h1.className = “c1 c2 c3”；
3. 操作元素样式
- 为元素添加 id、class属性，对应选择器样式
- 操作元素的行内样式，访问元素节点的style属性，获取样式对象；样式对象中包含CSS属性，使用点语法操作。
p.style.color = "white";
p.style.width = "300px";
p.style.fontSize = "20px";
注意 :
- 属性值以字符串形式给出，单位不能省略
- 如果css属性名包含连接符，使用JS访问时，一律去掉连接符,改为驼峰， font-size -> fontSize
4. 模拟点击
-
click() 方法可模拟在按钮上的一次鼠标单击。
-
语法：
buttonObject.click();参数 buttonObject 表示按钮元素对象。
三、实现除重的开奖码生成
1. 页面效果
2. 代码分析
2. ##### 元素样式
3. ##### 创建函数
4. ##### 点击事件
08、jQuery
jQuery简介
1. 介绍
jQuery是JavaScript的工具库，对原生JavaScript中的DOM操作、事件处理、包括数据处理和Ajax技术等进行封装,提供更完善，更便捷的方法。
2. 使用
1）引入
先引入jquery文件，才能使用jquery语法
- CDN 有网（备用）
- 本地文件（常用）
2）工厂函数 - $()
"$()"函数用于获取元素节点，创建元素节点或将原生JavaScript对象转换为jquery对象,返回 jQuery 对象。jQuery 对象实际是一个类数组对象，包含了一系列 jQuery 操作的方法。
例如 :
//$()获取元素节点,需传入字符串的选择器
$("h1")
$("#d1")
$(".c1")
$("body,h1,p")
//选择器的特点，与样式选择器一致
3）原生JavaScript对象与jQuery对象
原生JavaScript对象与jQuery对象的属性和方法不能混用。可以根据需要，互相转换 :
- 原生JavaScript转换jQuery对象
$(原生对象)，返回 jQuery 对象 - jQuery对象转换原生JavaScript对象
- 方法一 : 根据下标取元素,取出即为原生对象
var div = $(“div”)[0]; - 方法二 : 使用jQuery的get(index)取原生对象
var div2 = $(“div”).get(0);
- 方法一 : 根据下标取元素,取出即为原生对象
4）jQuery获取元素
jQuery通过选择器获取元素，$(“选择器”)
选择器分类 :
- 基础选择器
标签选择器：$("div")
ID 选择器：$("#d1")
类选择器：$(".c1")
群组选择器：$("body,p,h1")
- 层级选择器
后代选择器： $("div .c1")
子代选择器： $("div>span")
相邻兄弟选择器： $("h1+p") 匹配选择器1后的第一个兄弟元素,同时要求兄弟元素满足选择器2
通用兄弟选择器： $("h1~h2") 匹配选择器1后所有满足选择器2的兄弟元素
- 过滤选择器，需要结合其他选择器使用（css3）。
:first
匹配第一个元素 例:$("p:first")
:last
匹配最后一个元素 例:$("p:last")
:odd
匹配奇数下标对应的元素
:even
匹配偶数下标对应的元素
:eq(index)
匹配指定下标的元素
:lt(index)
匹配下标小于index的元素
:gt(index)
匹配下标大于index的元素
:not(选择器)
否定筛选,除()中选择器外,其他元素
5）操作元素内容
html() //设置或读取标签内容,等价于原生innerHTML,可识别标签语法
text() //设置或读取标签内容,等价于innerText,不能识别标签
val() //设置或读取表单元素的值,等价于原生value属性
6）操作标签属性
- attr(“attrName”,“value”)
设置或读取标签属性 - prop(“attrName”,“value”)
设置或读取标签属性
注意 :在设置或读取元素属性时,attr()和prop()基本没有区别;但是在读取或设置表单元素(按钮)的选中状态时,必须用prop()方法,attr()不会监听按钮选中状态的改变,只看标签属性checked是否书写 - removeAttr(“attrName”)
移除指定属性
7）操作标签样式
- 为元素添加id/class属性,对应选择器样式
- 针对类选择器,提供操作class属性值的方法
addClass("className") //添加指定的类名
removeClass("className")//移除指定的类型,如果参数省略,表示清空class属性值
toggleClass("className")//结合用户行为,实现动态切换类名.如果当前元素存在指定类名,则移除;不存在则添加
- 操作行内样式
css("属性名","属性值") //设置行内样式
css(JavaScriptON对象) //设置一组CSS样式
/*
JavaScriptON对象:常用数据传输格式
语法 :
{
"width":"200px",
"height":"200px",
"color":"red"
}
*/
8）元素的创建,添加,删除
- 创建：使用$(“标签语法”)，返回创建好的元素
var div = $("<div></div>"); //创建元素
div.html("动态创建").attr("id","d1").css("color","red"); //链式调用，设置内容和属性
var h1 = $("<h1 id='d1'>一级标题</h1>"); //创建的同时设置内容，属性和样式
- 作为子元素添加
$obj.append(newObj); //在$obj的末尾添加子元素newObj
$obj.prepend(newObj); //作为第一个子元素添加至$obj中
- 作为兄弟元素添加
$obj.after(newObj); //在$obj的后面添加兄弟元素
$obj.before(newObj); //在$obj的前面添加兄弟元素
- 移除元素
$obj.remove(); //移除$obj
9）动画效果
-
显示和隐藏
show(speed,callback)/hide(speed,callback)- speed 可选。规定元素从隐藏到完全可见的速度。默认为 “0”。
- callback 可选。show 函数执行完之后，要执行的函数
-
通过使用滑动下拉和上推效果，显示隐藏的被选元素（ 只针对块元素 ）
slideDown(speed,callback)/slideUp(speed,callback) -
通过使用淡隐淡现方式显示效果，显示隐藏的被选元素
fadeOut(speed,callback)/fadeIn(speed,callback) -
动画函数，可以实现自定义动画 animate 函数
animate(styles,speed,callback)- styles 必需。规定产生动画效果的 CSS 样式和值
- speed 可选。规定动画的速度。默认是 “normal”，3000ms
- callback 可选。show 函数执行完之后，要执行的函数
10）数据与对象遍历
-
$(selector).each() 方法规定为每个匹配元素规定运行的函数
$(selector).each(function(index,element){})必需。为每个匹配元素规定运行的函数。
- index - 选择器的 index 位置
- element - 当前的元素
-
$.each()函数是框架提供的一个工具类函数，通过它，你可以遍历对象、数组的属性值并进行处理
$.each(Object, function(index, data){});必需。为每个匹配元素规定运行的函数。
- index - 选择器的 index 位置
- data- 当前的数据
11）jQuery事件处理
文档加载完毕
原生JavaScript 方法：window.onload
jQuery:
//语法一
$(document).ready(function (){
//文档加载完毕后执行
})
//语法二
$().ready(function (){
//文档加载完毕后执行
})
//语法三
$(function(){
//文档加载完毕后执行
})
区别：
原生onload事件不能重复书写，会产生覆盖问题；jquery中对事件做了优化,可以重复书写ready方法,依次执行
事件绑定方式
事件名称省略 on 前缀
//on("事件名称"，function)
$("div").on("click",function(){});//新版本使用的多些
//bind("事件名称",function)
$("div").bind("click",function(){});//1.6-1.8间的版本
//事件名作为方法名
$("div").click(function(){});
- this表示事件的触发对象，在jquery中可以使用，注意转换类型。this为原生对象只能使用原生的属性和方法，可以使用$(this)转换为jquery对象，使用jquery方法。
3.实战
1. 页面效果
2. 代码分析
1. 页面元素
2. 初始代码
3. 绑定省份
4. 绑定城市
09、题外–个人博客
1. 什么是项目
2. 项目中的角色
2. ##### 开发时：
3. 项目上线流程
-
SVN/Git 版本管理工具（开发/代码管理）
SVN/Git都是一个开放源代码的版本控制系统，采用了分支管理系统进行代码管理。
-
FTP上传工具（ 发布/部署 ）
上传工具是专门用来上传网站文件到服务器上，并对网站文件进行修改的工具。
4.项目中的方法
1. jQuery hover() 方法
hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。
方法触发 mouseenter 和 mouseleave 事件。
$(selector).hover(handlerIn, handlerOut)
2. jQuery stop() 方法
stop() 方法为被选元素停止当前正在运行的动画。
$(selector).stop(stopAll,goToEnd)
stopAll 可选。布尔值，规定是否停止被选元素的所有加入队列的动画。默认是 false。
goToEnd 可选。布尔值，规定是否立即完成当前的动画。默认是 false。
3. 动画加载页面效果
-
html页面引入文件 scrollReveal.js
-
在需要加载动画效果的 div 或者其他标签中添加 data-scroll-reveal 属性
-
内容动画效果
-
然后在js区域加入以下代码：
window.scrollReveal = new scrollReveal({reset: true});
-
data-scroll-reveal 属性
-
enter
说明: 动画起始方向
值: top | right | bottom | left -
move
说明: 动画执行距离
值: 数字，以 px 为单位 -
over
说明: 动画持续时间
值: 数字，以秒为单位 -
after/wait
说明: 动画延迟时间
值: 数字，以秒为单位
-
4. 编辑器使用
-
引入wangEditor插件
<script src="js/wangEditor.js"></script> -
实例化插件
var E = window.wangEditor var editor = new E('#editor') editor.create(); -
获取富文本插件框的值
editor.txt.text()/editor.txt.html()
5. 本地存储对象
-
Web 存储 API 提供了 sessionStorage （会话存储） 和 localStorage（本地存储）两个存储对象来对网页的数据进行添加、删除、修改、查询操作。
-
localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
-
sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
-
对象属性
属性 说明 length 返回存储对象中包含多少条数据 -
对象方法
方法 说明 key(n) 返回存储对象中第 n 个键的名称 getItem(keyname) 返回指定键的值 setItem(keyname, value) 添加键和值，如果对应的值存在，则更新该键对应的值 removeItem(keyname) 移除键 clear() 清除存储对象中所有的键
6. 字符与对象的转换
-
JSON.stringify 方法
方法用于将 JavaScript 值转换为 JSON 字符串。
JSON.stringify(value)参数 value 为必需， 要转换的 JavaScript 值（通常为对象或数组）
-
JSON.parse 方法
方法用来解析JSON字符串，构造由字符串描述的JavaScript值或对象
JSON.parse(text)参数 text 为必要参数，表示要被解析成JavaScript值的字符串
7.简易个人博客
中…(img-TfbJILiG-1591753578346)]
2. 项目中的角色
3. 项目上线流程
-
SVN/Git 版本管理工具（开发/代码管理）
SVN/Git都是一个开放源代码的版本控制系统，采用了分支管理系统进行代码管理。
-
FTP上传工具（ 发布/部署 ）
上传工具是专门用来上传网站文件到服务器上，并对网站文件进行修改的工具。
4.项目中的方法
1. jQuery hover() 方法
hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。
方法触发 mouseenter 和 mouseleave 事件。
$(selector).hover(handlerIn, handlerOut)
2. jQuery stop() 方法
stop() 方法为被选元素停止当前正在运行的动画。
$(selector).stop(stopAll,goToEnd)
stopAll 可选。布尔值，规定是否停止被选元素的所有加入队列的动画。默认是 false。
goToEnd 可选。布尔值，规定是否立即完成当前的动画。默认是 false。
3. 动画加载页面效果
-
html页面引入文件 scrollReveal.js
-
在需要加载动画效果的 div 或者其他标签中添加 data-scroll-reveal 属性
-
内容动画效果
-
然后在js区域加入以下代码：
window.scrollReveal = new scrollReveal({reset: true});
-
data-scroll-reveal 属性
-
enter
说明: 动画起始方向
值: top | right | bottom | left -
move
说明: 动画执行距离
值: 数字，以 px 为单位 -
over
说明: 动画持续时间
值: 数字，以秒为单位 -
after/wait
说明: 动画延迟时间
值: 数字，以秒为单位
-
4. 编辑器使用
-
引入wangEditor插件
<script src="js/wangEditor.js"></script> -
实例化插件
var E = window.wangEditor var editor = new E('#editor') editor.create(); -
获取富文本插件框的值
editor.txt.text()/editor.txt.html()
5. 本地存储对象
-
Web 存储 API 提供了 sessionStorage （会话存储） 和 localStorage（本地存储）两个存储对象来对网页的数据进行添加、删除、修改、查询操作。
-
localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
-
sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
-
对象属性
属性 说明 length 返回存储对象中包含多少条数据 -
对象方法
方法 说明 key(n) 返回存储对象中第 n 个键的名称 getItem(keyname) 返回指定键的值 setItem(keyname, value) 添加键和值，如果对应的值存在，则更新该键对应的值 removeItem(keyname) 移除键 clear() 清除存储对象中所有的键
6. 字符与对象的转换
-
JSON.stringify 方法
方法用于将 JavaScript 值转换为 JSON 字符串。
JSON.stringify(value)参数 value 为必需， 要转换的 JavaScript 值（通常为对象或数组）
-
JSON.parse 方法
方法用来解析JSON字符串，构造由字符串描述的JavaScript值或对象
JSON.parse(text)参数 text 为必要参数，表示要被解析成JavaScript值的字符串
534
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
