华清远见-重庆中心——前端阶段技术总结

最新推荐文章于 2024-10-31 14:03:24 发布

若太阳升起

最新推荐文章于 2024-10-31 14:03:24 发布

阅读量242

点赞数

文章标签： css css3 html5

本文链接：https://blog.csdn.net/weixin_52590383/article/details/128211923

版权

本文详细介绍了前端开发的基础知识，包括HTML的标签类型、属性、常用标签及其应用，如文字、图片、列表、表格、多媒体等。接着深入探讨了CSS的语法、选择器、样式设置、定位、盒模型等重要概念，还讲解了CSS3的新特性如伪类、滤镜和动画。最后，简述了JavaScript的基本语法、数据类型、逻辑运算、DOM和BOM操作，以及jQuery的使用，包括事件处理、样式设置和节点操作。

摘要由CSDN通过智能技术生成

1.HTML

1.1标签简介

1.11标签的类型

1.块级元素，占页面中的一整行，block；

2.行内元素，占一行中的一部分，inline；

1.1.2标签的属性

标签第一个中括号中，使用 属性="值" ，让某个标签拥有特定属性。

<div id="xxx" class="xxx"></div>

其中的id="xxx" class="xxx"都是div标签中的属性，其中的id和class是div标签的属性名，"xxx"为属性值，如果有多个属性，要用空格隔开

1.2常用标签

1.2.1文字标签

以下标签都是双标签

标签名	作用
h1~h6	块级元素，标题，文字加粗，数字越大字体越小
p	块级元素，段落
span	行内元素
pre	块级元素，预处理标签
i	行内元素，倾斜
u	行内元素，下划线
b	行内元素，加粗
sub	行内元素，文字下标
sup	行内元素，文字上标

Emojo表情

网址：Emoji 参考手册 | 菜鸟教程

用法：复制表情对应的十进制或者十六进制的代码，最好放在span标签里面

1.2.2图片img

单标签，行内元素

<img src="图片路径" alt="图片无法显示时需要展示的文字" title="鼠标悬停时显示的文字" width="50px"  height="50px">

属性名	作用
src	存放图片路径，用于获取图片
alt	图片无法显示的时候显示的文字
title	鼠标悬停时提示的文字
width	设置图片宽度
height	设置图片高度

1.2.3列表ul、ol、li

双标签，块级元素，li是ul或ol的子标签

无序列表ul

默认每一项前用实心圆符号修饰，可以通过type属性修改符号

type值	修饰符号形状
disc	默认，实心圆
circle	空心圆
square	正方形
none	去掉修饰符号

<ul>
	<li>张三</li>
	<li>李四</li>
	<li>王麻子</li>
</ul>

有序列表ol

默认每一项前用自增数字修饰，可以通过type属性修改

type值	作用
a/A	英文字母
i/I	罗马符号
1	默认数字
none	去掉修饰符

1.2.4表格table

标签	作用
tr	表格中的行
td	每行中的单元格
th	特殊的单元格，表头，文字加粗居中

td可以通过colspan=" 几列"，来实现跨几列；rowspan=“几行”属性实现跨2行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1">
			<th colspan="6">课表</th>
			<tr>
				<td rowspan="3">上午</td>
				<td>星期一</td>
				<td>星期二</td>
				<td>星期三</td>
				<td>星期四</td>
				<td>星期五</td>
			</tr>
			<tr>
				<td>星期一</td>
				<td>星期二</td>
				<td>星期三</td>
				<td>星期四</td>
				<td>星期五</td>
			</tr>
			<tr>
				<td>星期一</td>
				<td>星期二</td>
				<td>星期三</td>
				<td>星期四</td>
				<td>星期五</td>
			</tr>
		</table>
	</body>
</html>

1.2.5多媒体

音频audio

<audio controls autoplay loop muted >
    <source src="xxx.mp3" type="audio/mpeg">
</audio>

视频video

<video width="320" height="240" controls autoplay loop muted >
    <source src="xxx.mp4" type="video/mp4">
</video>

controls开启控制器

autoplay自动播放

loop循环

muted静音

谷歌浏览器，默认不允许自动播放非静音视频

1.2.6水平线hr

<hr color="颜色" size="粗细" width="宽度">

1.2.7换行br

哪要换行就写哪

<br>

1.2.8a标签、超链接、锚点

a标签:行内元素，双标签。

超链接：可以通过a标签访问任何一个地址

<a href="资源路径" target="">点击跳转</a>

target可以控制要访问的资源在哪里打开

1、 _self 默认。在当前页面打开

2、 _blank 在新页面打开

3、 _parent 在父页面打开

4、指定的name名

如果是锚点的name，通过“#name“访问

如果是iframe的name，通过"name"访问

锚点：可以通过a标签定义锚点和访问锚点，实现当前页面的快速定位

1.设置锚点

<a name="锚点名"></a>

2.访问锚点

<a href="#指定的锚点名">点击访问锚点</a>

1.2.9浮动框架iframe

<a href="xx" target="main">xx</a>
<a href="yy" target="main">yy</a>

<iframe name="main" src="页面的路径" width="宽度" height="高度">

</iframe>

1.2.10marquee标签

<!-- 
direction="left/right/up/down"朝向。默认left
behavior=""行为。scroll默认重复  slide移动到底后停止  alternate往复
scrollamount=""移动速度。
-->
<marquee scrollamount="10" direction="right" >
   xxxx
</marquee>

1.2.11div标签

块级元素，双标签，没有任何特点，页面布局时采用div布局

1.3表单和表单元素

1.3.1表单form

双标签，用于接受用户输入的数据

<form action="表单提交的最终目的路径" method="表单提交方式">

</form>

action：设置提交路径，可以是页面，也可以是后台请求映射

method：设置提交方式

1.默认值为get，提交的数据会暴露在浏览器地址栏

2.post方式，提交的数据不会暴露在浏览器地址栏

1.3.2表单元素

常用表单元素	作用
input	单标签，行内元素，通过修改关键属性type，变化为不同的组件
select	双标签，行内元素，下拉菜单
textarea	双标签，行内元素，文本域

input标签type属性的值	作用
text	文本框
password	密码框
radio	单选按钮
checkbox	复选框
date	日历组件
number	数组组件
hidden	隐藏域
submit	提交按钮
reset	重置按钮
file	上传文件
image	图片提交按钮

表单元素中的属性	作用
name	用于提交数据时设置的参数名
value	用于设置组件的默认值
checked	用于设置单选按钮和复选框的默认选中
placeolder	用于设置输入框的提示文字
required	用于设置输入框为必填项
selected	用于设置下拉菜单默认选中
disabled	用于设置某个组件为不可用状态
readonly	用于设置某个组件为只读状态
max/min/step	number独有，用于设置最大值、最小值、步长
rows/cols	textarea独有，用于设置文本域的行数和列数

2.CSS

2.1CSS语法

样式名：样式值;

color:red;
font-size:20px;

2.2选择器

用于选择页面中元素（标签）的工具

2.2.1 id选择器

通常用于选择某一个元素

用法：

1.给标签添加id属性，对其命名

2.在style标签中通过#id名获取其中的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#test{
				width: 50px;
				height: 50px;
				background-color: aqua;
			}
		</style>
	</head>
	<body>
		<div id="test">
			
		</div>
	</body>
</html>

2.2.2 class选择器

通常用于选择一组元素

用法：

1.给标签添加class属性，对其命名

2.在style标签中通过 .class名获取

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#test{
				width: 50px;
				height: 50px;
				background-color: aqua;
			}
			.one{
				
			}
		</style>
	</head>
	<body>
		<div id="test">
			<div class="one"></div>
			<div class="one"></div>
		</div>
	</body>
</html>

2.2.3元素/html/标签选择器

直接通过标签名获取，通常用于选择一组元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				
			}
		</style>
	</head>
	<body>
		<div ></div>
		<div ></div>
		<div ></div>
	</body>
</html>

2.2.4层次选择器

通过空格或>获取某个元素的子元素

"元素A 元素B"表示获取元素A下的所有元素B

"元素A>元素B"表示获取元素A下的第一层元素B

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#father>div{
				/* 获取的是first1和first2 */
				height: 200px;
				width: 200px;
				background-color: red;
			}
			#tst li{
				/* 获取的是tst下的所有li标签 */
				list-style-type: none;
			}
		</style>
		
	</head>
	<body>
        <div id="father">
        	<div id="first1">
        		<div id="second">
        			<ul id="tst">
        				<li></li>
						<li></li>
        			</ul>
        		</div>
        	</div>
			<div id="first2">
				
			</div>
        </div>
	</body>
</html>

2.2.5 群组选择器

使用，隔开，可以同时选择多个元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#father #first1,#first2{
				/* 获取的是father下的first1和first2 */
				width: 250px;
				height: 250px;
				background-color: red;
			}
		</style>
		
	</head>
	<body>
        <div id="father">
        	<div id="first1">
				
        	</div>
			<div id="first2">
				
			</div>
        </div>
	</body>
</html>

2.2.6 伪类选择器

伪类：

用于处于特定状态的元素的类（伪的，不是真的写在class里的类）

特定状态：比如某个元素的第一个子元素，鼠标移上去时的元素

语法

标签名:伪类 {}

p:first-child

找到作为第一个子元素的p元素

这个元素必须是父元素的第一个元素样式才会生效

不区分子元素的类型，在所有子元素中绝对第一

p:first-of-type

找到同类子元素中的第一个

区分类型，在所有p中相对第一

2.2.7伪元素选择器

伪元素：

开头有::的关键字，早期也用:

before 在元素内前面添加

after 在元素内后面添加

相当于向HTML中添加一个新的元素，但是并没有真的改变HTML的结构

同样可以给伪元素添加样式

content 设置添加的内容

content: "文本";

content: url(图片的地址);

<!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.0">
    <title>Document</title>
    <style>
        /* 伪元素
                - 开头有::的关键字，早期也用:
                    before 在元素内前面添加
                    after 在元素内后面添加
                - 相当于向HTML中添加一个新的元素，但是并没有真的改变HTML的结构
                - 同样可以给伪元素添加样式
                    content 设置添加的内容
                        content: "文本";
                        content: url(图片的地址);
         */
        div::before {
            content: "《";
            color: red;
            font-size: 22px;
        }

        div::after {
            content: url(./作业/img/01.png);
            color: red;
            font-size: 22px;
        }
    </style>
</head>

<body>
    <div>这是一个本书</div>
</body>

</html>

2.2.7 CSS优先级

如果某个元素同时拥有 id 、 class 以及 style 属性时。

优先级从高到低

style 属性 ==>id 选择器 ==> 类选择器 ==> 元素选择器

2.3 CSS应该写在哪

2.3.1写在标签的style属性中

style="样式:值;样式:值;"

<body style="background-color:red;">
</body>

2.3.2写在style标签中，然后通过选择器获取标签样式

style标签通常放在head标签中

2.3.3新建一个CSS文件，将样式写在css文件里面

用法：

1.新建一个css文件，在里面写样式

2.在html的head标签里面写<link rel="stylesheet" href="css文件路径">

3.然后可以通过选择器来使用css文件里面存在的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="test2.css">
	</head>
	<body>
        <div >
        	<div class="ts"></div>
        </div>
	</body>
</html>

div{
	width: 3.125rem;
	height: 3.125rem;
}
.ts{
	width: 50px;
	height: 40px;
}

2.4常用样式

2.4.1尺寸

只能对块级元素设置尺寸，如果要设置行内元素的尺寸，需要先将它改为块级元素

样式名	作用	值
width	设置块级元素的宽度	px像素或百分比或vw
height	设置块级元素的高度	px像素或百分比或vh

如果元素需要根据实际窗口变化，宽度建议使用百分比，高度建议使用vh

2.4.2背景background

样式名	作用	值
background-color	背景色	颜色的单词、十进制或十六进制的RGB、RGBA
background-image	背景图	url（图片路径）
background-repeat	背景重复	默认重复 no-repeat不重复 repeat-x表示x轴重复 repeat-y表示y轴重复
background-size	背景尺寸	默认加载原图 100%表示显示完整图片 cover表示覆盖元素
background-position	背景位置	可以设置x轴和y轴的距离也可以通过right、left、top、bottom、center设置指定方向
background	背景属性简写	可以同时设置图片路径、是否重复和图片位置，无关顺序。如 background:url( 图片地址 ) no-repeat right top 表示图片不重复位于容器右上角
background	渐变函数	linear-gradient(to left, #7a28c1, #a17fe0, #59C173)
background-attachment	背景固定方式	fixed表示固定背景，scroll或默认表示跟随滚动条移动

2.4.3边框border

边框会 " 套 " 在元素外层，元素原本大小不变，但所占区域会变为原本大小 + 边框宽度

样式	作用	值
border-style	边框线型	solid单线、double双线、dotted点线、dashed虚线
border-width	边框宽度	像素
border-color	边框颜色	颜色的三种写法
border	同时设置边框宽度、线型、颜色	1px solid red
border-方向-样式	某个方向的style	border-bottom-color1：red;
border-方向	同时设置指定方向边框宽度、线型和颜色	border-right：1px solid red;
border-上下-左右-radius	设置某个方向为圆角
border-radius	同时设置四个角为圆角
outline	轮廓。input文本框获得焦点时，会自动显示一个轮廓，设置属性值为none去除轮廓
border-collapse	合并相邻边框	collapse

2.4.4padding内边距

padding-top

设置上内边距，内容区域和上边框之间的距离

padding-left 左内边距

padding-right 右内边距

padding-bottom 下内边距

符合写法：

padding: a; 同时设置上右下左的内边距为a

padding: a b c d; 上右下左

padding: a b c; 上左右下

padding: a b; 上下左右

设置的背景可以透过padding显示出来

2.4.5字体font

样式名	作用	值
font-size	字体大小	像素，默认16px，最小12px
font-family	字体字形	默认微软雅黑
font-weight	字体粗细	lighter细、bolder粗

2.4.6文本text

样式	作用	值
color	文本颜色	颜色的三种写法
text-align	文本对其方式	默认left，right右对齐，center居中
lien-height	行高	像素，如果文字要垂直居中，需设置行高为所在盒子的高度
text-decoration	文本修饰	under-line下划线，over-line上划线，line-through删除线，去掉下划线需设置属性值为none
letter-spacing	字符间距	像素
text-indent	首行缩进	像素，如果缩进两个字符，默认设置为32px
text-shadow	文本阴影	颜色水平位置垂直位置模糊程度；例：gray 4px 4px 3px表示右下移动px，模糊3px
word-break	英文换行方式	默认以单词为单位换行，不会拆分单词；break-all表示以字母为单位换行，会拆分单词

2.4.7列表list

样式名	作用	值
list-style-type	列表符号	通常用none去掉
list-style-image	使用图片替换列表符号	url（图片路径）

2.5伪类

表示某个元素的某种状态；用于对某些元素在不同情况下呈现不同的效果

a标签伪类	作用
a:link	未访问时
a:hover	鼠标悬停时
a:active	鼠标按住
a:visited	访问后

以上的：hover可以适用于很多标签，但是其他的伪类只适用于a标签

2.6鼠标样式cursor

值	效果
pointer	光标呈现为指示链接的指针（一只手）
crosshair	光标呈现为十字线
move	此光标指示某对象可以被移动
text	此光标指示文本
wait	此光标指示程序正忙（通常是一只表或沙漏）
help	此光标指示可用的帮助（通常是一个问号或一个气球）
progress	载入

2.7显示方式display

值	作用
block	将元素设置为块级元素，能设置尺寸，独占一行
inline	将元素设置为行内元素，不能设置尺寸，占一行中的一部分，尺寸由内容决定
inline-block	将元素设置为行内块，能设置尺寸，占一行中的一部分
none	不显示，不保留自身位置，后续元素会顶替其位置

2.8浮动float

让某个元素脱离原本的位置，朝某个方向对其

值	作用
left	向左浮动
right	向右浮动
none	清除浮动

2.9float:left和display:inline-block的区别

2.9.1相同点

都能让多个独占一行的块级元素位于同一行

2.9.2不同点

1.display：inline-block ；多个元素最终会位于同一行内，保留该行位置，元素以下线对其，保留元素间的缝隙，后续元素是新的一行

2.float：left；多个元素脱离自身的位置向指定方向贴合，不保留该行位置，元素向上线对其，不保留元素间的缝隙，后续元素会顶替之前元素的位置

2.10盒子模型

页面中的所有块级元素，都是一个盒子，每个盒子由元素自身、内边距padding、边框border、外边距margin组成

内边距padding：边框与自身元素之间的距离；

外边距margin：元素A的边框与元素B的边框之间的距离

盒子模型相关样式	作用
padding	内边距；一个参数表示同时设置四个方向；两个参数表示上下左右；三个参数表示上左右下；四个参数表示上右下左
padding-方向	设置某个方向的内边距
margin	外边距。如果某个值设置为auto表示自动将所在容器剩余距离除于二
margin-方向	设置某个方向的外边距

一个元素的所占位置是外边距 + 边框 + 内边距 + 元素自身的大小。

2.11溢出overflow

当子元素超出父元素的范围是，成为溢出，可以通过overflow控制溢出部分的表现；默认显示溢出部分，溢出部分不会影响后续元素

值	作用
hidden	溢出部分隐藏
scroll	使用滚动条
visiable	默认，显示溢出部分
auto	根据溢出情况自动判断是否添加滚动条

2.12盒子模型阴影box-shadow

类似于 text-shadow ，通常设置 4 个值颜色左右位置上下位置模糊程度

box-shadow:gray 4px 5px 6px 灰色阴影向右 4px 向下 5px 模糊 6px

2.13定位position

将元素以像素为单位调整位置

值	作用
relative	相对定位
fixed	固定定位
absolute	绝对定位

配合定位使用样式

定位相关方向样式	作用	值
left	元素距离页面左边界的左右距离	正值向右，负值向左
top	元素距离页面左边界的上下距离	正值向右，负值向左
right	元素距离页面左边界的左右距离	正值向左，负值向右
bottom	元素距离页面左边界的上下距离	正值向上，负值向下

文档流

页面中每个元素默认都有自己的位置，这个位置称为文档流。

如果某个元素脱离文档流，就会失去原本所占位置，让后续元素顶替其位置。

可以通过浮动 float 、 固定定位 fixed 和 绝对定位 absolute 让元素脱离文档流。

脱离文档流后，通过改变元素的 left 、 top 、 bottom 、 right 移动其位置

2.14层叠z-index

某个已定位的元素，可以通过z-index控制其层叠顺序；z-index是一个数字，数字越大，距离视线越近；得配合position定位使用

2.15不透明度

取值范围[ 0 , 1 ]，值越大，越不透明

opacity：修改某个元素的透明度

rgba

0.5为透明度

background-color:rgba(255,255,0,0.5);

2.16转换transform

改变某个元素的状态，如旋转、移动、缩放等

值	作用
rotate（30deg）	顺时针旋转30度
translate（10px，20px）	向右平移10px，向下平移20px
translateX（10px）/translateY（10px）	向右/向下平移10px
scale（1.5）	放大1.5倍
rotateX（30deg）、rotateX（30deg）、rotateX（30deg）	沿着X/Y/Z轴3D旋转30度
rotate3d（30deg）	沿着X轴Y轴和Z轴3D旋转30度

以上效果可以通过“transform:效果1 效果2 ...”同时设置

transform:rotate(30deg) scale(1.5) translate(10px,20px);

2.17过渡transition

设置某个转换效果完成所需要的时间等

样式	作用
transition-duration：3s	所需时间为3秒
transition-delay：2s	延时2s生效
transition-timing-function:linear	时间函数
transition:5s 2s ease	2s后执行，所需时间为5s，慢-快-慢

2.18动画animation

2.18.1定义动画的关键帧

@keyframes 动画名{
   0%{
       /*该阶段的样式*/
       样式名:值;
   }
   25%{}
   50%{}
   75%{}
   100%{}
}

2.18.2给某个元素设置animation样式

#xxx{
     /*指定动画名*/
     animation-name:动画名;
     /*动画执行时间*/
     animation-duration:3s;
     /*延时*/
     animation-delay:3s;
     /*动画执行次数 infinite无限*/
     animation-iteration-count:4;
     /*动画时间函数 linear匀速 ease-in ease-out ease-in-out*/
     animation-timing-function:linear;
     /*简写 只写一个时间表示用时 写两个时间表示第一个是用时，第二个是延时*/
     animation:动画名 5s 2s infinite linear;
}

animation相关样式	作用
animation-name：动画名	执行指定动画
animation-duration：3s	动画执行时间
animation-delay：3s	动画延时时间
animation-iteration-count：3	动画执行次数，infinite表示无限
animation-timing-function：linear	动画执行时间函数，linear表示匀速
animation：动画名 5s 2s	简写。只写一个时间表示用时写两个时间表示第一个是用时，第二个是延时

2.19滤镜filter

滤镜函数	作用
grayscale（100%）	灰度
blur（4px）	模糊
brightness（150%）	亮度
contrast（150）	对比度
hue-rotate（45deg）	色调旋转
invert（100%）	颜色反转
opacity（50%）	不透明度
staurate（2）	饱和度
sepia（80%）	灰褐色（做旧）

可以同时给某个元素设置多个滤镜，用空格断开

3.JS

3.1JS基础

3.1.1JS简介

1.JavaScript简称为JS，是由网景(netScape)推出的脚本语言

是一门轻量级，弱类型，面向对象的解释型脚本语言

弱类型没有数据类型限制，声明变量时不需要指定数据类型

解释型不需要预先编译，边解释边运行，浏览器就是一个解释器

脚本（Script）一系列的指令

2.JS的作用

HTML用于定义页面中的内容

CSS用于设置内容的样式

JS用来控制HTML元素的行为

在页面中动态嵌入HTML元素

可操作浏览器

可以和用户数据交互

3.JS的组成

1.ECMAScript 语法

简称ES，是JS的语法规范

比如数据类型，流程控制语句等

2.DOM (Document Object Model) 文档对象模型

这里的文档指HTML页面

可以通过DOM控制页面中的元素

3.BOM (Browser Object Model) 浏览器对象模型

可以通过它控制浏览器的行为

3.1.2JS的编写位置

1.写在标签的事件中

比如鼠标点击事件onclick

2.写在<script></script>标签中

这个script标签可以放在head标签里，

也可以放在body标签前

3.写在独立的js文件中，然后通过script标签引入

src属性中设置js文件的地址

3.1.3JS的输入输出语句

alert()	弹出警告框
console.log()	在控制台打印输出
document.write	在HTML页面中显示输出
prompt()	弹出输入框

3.1.4JS的变量

1.变量

值可以发生改变的量，是一个存储数据的容器

里面存放的数据可以发生改变

2.变量的声明和赋值

声明

var 变量名;

let 变量名;

赋值

变量名 = 值;

声明的同时赋值

var 变量名 = 值;

同时给多个变量声明并赋值

var 变量名1 = 值, 变量名2 = 值;

3.修改变量的值

变量名 = 值;

注意：

只声明不赋值，默认输入变undefined

var 可以重复声明同一个变量，let 不可以

3.1.5标识符的命名规则

1.标识符

在JS中可以由我们自主命名的内容

比如变量名函数名类名 ...

2.命名规则

1.标识符只能包含字母、数字、下划线、$, 并且不能以数字开头

2.不能是JS中的关键字和保留字比如 var let

3.不建议使用内置函数或类名作为变量名，原有的函数会被我们自己定义的覆盖，导致失效

4.命名的规范

通常使用驼峰命名

首字母小写，之后的每个单词开头大写

minlength -》minLength

类名使用大驼峰

每个首字母都大写

minlength -》MinLength

常量名全大写

MIN_LENGTH

3.1.6 数据类型

1.数据类型

是计算机中数据的一种属性，这个属性定义了数据的含义，允许对数据执行的操作，该类型数据的存储方式和大小

2.JS中数据类型分为原始值(基本类型)和对象(复杂类型)

一、原始值

1.Number 数值

整数、小数

特殊值

NaN (Not a Number) 非法数

Infinity 无限大的数字无穷

判断变量的数据类型：typeof 变量名

2.BigInt 大整数

3.String 字符串

JS中用"" 或者'' 表示字符串

如果要嵌套使用引号，外双内单或者外单内双

转义字符 \

\" 转义双引号

\\ 转义单斜杠

\n 换行符

模板字符串：用``表示

支持换行

支持嵌入变量： ${变量名}

4.Boolean 布尔值

5.Null 空值

NUll 空类型空值：对象类型的空引用（空指针）

6.Undefined 未定义

Undefined 未定义类型：变量声明但未赋值，则这个变量的值就是undefined

7.Symbol 符号

二、对象：Object

3.1.7逻辑运算符

1.&& 与

表达式1 && 表达式2

两个表达式都为true，与的结果为true

只要有1个为false，结果为false

短路与

只要前面这个表达式1为false，后面的表达式2将不会执行，直接判定结果为false

2.|| 或

表达式1 || 表达式2

两个表达式都为false，或的结果为false

只要有1个为true，结果为true

短路或

只要前面这个表达式1为true，后面的表达式2将不会执行，直接判断结果为true

3.！非

!表达式取反

3.1.8运算符的优先级

1.()

2.单目运算符！++ --

3.算术运算符 * / % + -

4.关系运算符 > < >= <= == !== === !==

5.逻辑运算符 && ||

6.条件运算符

7.赋值运算符

3.1.9数组基础

1.数组：是一种复合数据类型，在数组中可以存储多个不同类型的数据

2.创建数组的方式

1.通过new关键字

var 数组名 =new Array(数组大小) 赋值时超出索引会自动扩容

赋值：数组名[索引]=数据;

注意：数组中没有赋值的元素，默认输出undefined

2.通过[]创建

var 数组名=[] //创建空数组

3.声明的时候赋值

var 数组名=new Array(元素1，元素2，....)

var 数组名=[元素1，元素2，....]

3.获取数组的长度：数组名.length

4.判断是否是数组： Array.isArray(要判断的数据)

5.数组的遍历：

1.for循环

2.for-in语句

for(index in list){

list[index] //访问元素

}

3.1.10对象及创建

1.对象

-js用属性和行为来描述某个物体而产生的一种数据类型

-它相当于一个容器，在对象中可以存储各种不同的数据类型

-数组、函数也是一种特殊的对象

2.创建数组的方式

1.使用{}直接创建

let 对象名={

属性名:属性值;

方法名(){

代码块

}

2.使用new Object创建

添加属性：

对象名.属性名=属性值

3.属性和方法的调用

对象名.属性名

对象名.方法名()

在方法中可以通过this关键字访问当前对象的属性；this指向的是调用当前方法的对象

4.属性的其他写法

1.带有特殊字符或空格的属性名，要用["属性名"]设置和读取

2.属性可以是任何类型的数据，比如数组、对象

3.1.11函数及创建

1.函数：函数是一段程序的封装

2.作用：用于包装可以重复使用的代码

3.创建方式

1.函数声明方法

function 函数名(形式参数){代码块}

调用：函数名(实际参数);

2.函数的表达式

let 变量名=function(形式参数){代码块}

形式参数可以设置初始值，在调用函数是没有提供实际参数，形式参数就会使用默认值

调用：sub(实际参数)

3.箭头函数

let 变量名=(形式参数)=>{代码块}

只有一个形参可以省略参数的小括号

4.自调用函数

定义之后立即执行的函数

((形式参数)=>代码)(实际参数)

4.返回值：

函数返回的结果为返回值，默认是undefined

可以return自己定义函数的返回值

return还会终止函数后续代码的执行

3.1.12 参数的值传递和引用传递

1.值类型传参

将x变量中的值，直接赋值给函数的形参

所以函数执行完成之后，x本身的值不变

number、boolean、string是值传递

2.引用类型传参

将y中的引用地址赋值给函数内的形参

所以通过函数内形参对y中的对象所做的操作，对y来说也有影响

Object、function是引用传递

3.1.13变量的作用域

1.变量的作用域

作用域：作用范围，范围内可以访问变量，超出这个范围就无法访问了

作用域分类：

1.全局作用域 global

在网页运行时创建，关闭时销毁，在script标签中编写的代码都位于全局作用域中，在全局变量中的变量的就是全局变量

全局变量分类：

1.(普通)全局变量：直接在函数外声明的变量

2.自动全局变量：不使用let/var关键字声明，直接给变量赋值，这样的变量就会变成自动全局变量，它存到了window对象，成为了window的属性

2.块作用域 block

代码块：{}里面的内容

块作用域就是在一个代码块中有效的作用域

块作用域在代码块执行时创建，执行完毕时销毁

在块内部用let定义的变量，就具有了一个块作用域。只能在块内部访问，不能在外部访问

var声明的变量不具有块作用域

3.函数作用域 function

在函数内用let/var关键字定义的变量在函数外都无法访问

2.作用域链

在使用一个变量时，js解释器会先在当前作用域寻找变量，如果没找到就往上一层作用域寻找

如果一直到全局都没找到，就会报错：xx没有被定义

3.1.14 JSON字符串

对象序列化：将对象转换为一个字符串这个字符串就称为JSON字符串

1.将obj对象转为json字符串

JSON.stringify(obj)

2.将JSON字符串转为对象

JSON.parse(json)

注意：JSON字符串的属性名必须用双引号引起来

        let obj={
            name:'孙悟空',
            age:18,
        }
        console.log(obj);

        //json字符串
        let jsonStr={" name":"猪八戒","age":18}
        let json=JSON.stringify(obj)
        console.log(json);
        obj=JSON.parse(json)

3.1.15数组的常用方法

方法	作用	返回值
push(成员1，成员2，.....)	向数组的末尾添加一个或多个成员，会改变原数组	新的数组长度
pop(数组)	删除并返回数组的最后一个成员，会改变原数组	删除并返回数组的最后一个成员
unshift(数组)	向数组的开头添加一个或多个成员，会改变原数组	新的数组长度
shift(数组)	删除并返回数组的第一个成员	被删除的这个成员
splice(起始位置，个数，替换被删除成员的新数据)	删除指定位置的成员，并用新成员替换，或插入新成员到指定成员的前面，会改变原数组	被删除的成员数组
concat(数组1，数组2，.....)	连接数组，不改变原数组	一个新数组
join(字符)	将数组成员用一个字符连接起来，返回字符串	数组成员被字符连接起来的字符串
includes(成员)	判断是否包含某成员	布尔值
indexOf(元素)	得到某个元素第一次出现的位置，没有返回-1	索引
slice(起始位置，结束位置)	数组切片，不改变原数组	截取的子数组
sort(a，b)	数组排序，会改变原数组	(a, b) => a - b 升序排列 (a, b) => b - a 降序排列
reverse()	将数组的元素倒序，会改变原数组	倒叙后的数组

3.1.16字符串的常用方法

方法	作用
str.length	查看字符串长度
str.charAt(index)	获取指定索引处的字符
str.split('分割条件')	用于分割字符串的字符，返回字符串数组
str.trim()	去掉字符串首尾空格
str.substring(a, b)	截取[a,b)的子字符串，只写一个参数，就会截取到末尾
str.indexOf('o')	查询字符串中指定字符在字符串中的索引位置
str.lastIndexOf('o')	查询字符串中指定字符在字符串中最后一次出现的索引位置
str.startsWith('字符')	用于判断字符串是否以指定字符串开头
str.endsWith('字符')	用于判断字符串是否以指定字符串结尾
str.toUpperCase() toLowerCase	将字符串中的英文转成全为大写小写

3.2DOM和BOM

3.2.1DOM简介

DOM Document Object Model 文档对象模型

Document 文档，这里指整个网页HTML

Object DOM将整个网页都抽象转换为了对象

div有div对象，input有input对象，属性、文本都有对应的对象

对他们进行操作的时候，都是通过他们的对象来完成的

Model 模型是指文档中对象之间的关系；比如父子关系，兄弟关系

DOM树

3.2.2获取节点对象

注意：文档默认顺序加载，所以获取文档节点的js应该放在这些标签的后面

常用document对象调用各种方法来获取页面中的节点对象

1.document.querySelector("选择器名称") 获取的是第一个符合条件的元素节点对象

2.document.querySelectorAll("选择器名称") 获取的所有符合条件的元素节点对象

3.document.getElementsByTagName("标签名") 获取的所有符合条件的元素节点对象

4.document.getElementById("id名") 获取满足条件的一个元素节点对象

5. document.getElementsByClassName("类名") 获取的所有符合条件的元素节点对象

获取和修改元素中的文本

1.innerHTML

获取：元素对象.innerHTML

修改：元素对象.innerHTML="新的文本内容"；

innerHTML允许直接插入HTML标签，可用于添加新的标签

(有xss注入风险，被篡改插入非法的html代码)

2.textContent

textContent也可以获取和修改文本，但是对于有标签的，会把标签

3.2.3事件绑定

事件：页面和用户之间的交互行为，比如：当用户点击鼠标时，就修改背景颜色

如何为一个元素绑定事件

1. 元素对象.addEventListener("事件名称",事件处理函数)

特别注意：

这里的事件名称不能有on前缀，并且这个事件的名称是规定好的，不能自己修改

所有时间的参考网址：https://developer.mozilla.org/zhCN/docs/Web/API/Element/mouseover_event

可以自己定义事件：https://developer.mozilla.org/zhCN/docs/Web/Events/Creating_and_triggering_events

绑定事件步骤：

1.获取元素对象

2.声明一个事件处理函数

3.给元素对象添加事件监听器

解绑事件：元素对象.removeEventListener("要解绑的事件名称",事件处理函数)

2.为元素的特定属性设事件处理函数

特定属性：带有on开头的属性

元素对象.事件属性名=function(){//代码}

注意：这个方法可以为一个元素绑定多个事件

但是一个事件只能绑定一个处理函数

3.直接在标签中绑定

事件名="函数名()"

注意：这个方法可以为一个元素绑定多个事件

但是一个事件可以绑定多个处理函数

4.解绑

元素对象.事件=null

3.2.4 通过DOM树来获取节点

Node节点：文本、元素、属性、换行、空格

父获取子

1.元素对象.childNodes

获取元素对象下的所有节点

2.元素对象.children

获取元素对象下的所有子元素

3.元素对象.first/lastChild 获取第一个子节点

4.元素对象.first/lastElementChild 获取第一个子元素

子获取父

1.子元素对象.parentElement 获取父元素

2.子节点对象.parentNode 获取父节点

兄弟互相获取

1.元素对象.nextElementSibling 获取下一个兄弟元素

2.元素对象.nextSibling 获取下一个兄弟节点

3.元素对象.previousElementSibling 获取上一个兄弟元素

4.元素对象.previousSibling 获取上一个兄弟节点

3.2.5增删改节点

创建元素并添加属性

1. document.createElement('标签名') 创建元素

2.元素对象.className='class名' 添加class属性

添加子元素到末尾

1.获取父元素对象

body直接用document.body.appendChild(子元素对象)

2.父元素对象.append(子元素对象)

添加子元素到头部

父元素对象.prepend(newElement)

删除元素

要删除的元素对象.remove()

替换元素

被替换的元素对象.replaceWith(替换的元素对象)

3.2.6操作标签的属性

1.元素对象.属性名=属性值

2.元素对象.setAttribute('属性名','属性值')

3.2.7操作标签的样式

1.通过style属性来修改标签的样式

元素对象.style.样式名='样式值'

注意：

修改的是内联样式

样式名入font-size，修改为小驼峰 fontSize

2.通过类名修改样式

元素对象.className +='空格类名'

3.通过classList属性操作类名

添加：元素对象.classList.add('类名1','类名2')

删除：元素对象.classList.remove('类名1','类名2')

3.2.8定时器

定时器：

在js中定时器是一种函数，这种函数可以设置在指定时间后触发一段代码

分类：

1.setTimeout(要执行的函数,多少毫秒后执行)

返回值：计时器对应的编号id

停止计时器：clearTimeout(id)

2.循环计时器

setInterval(要执行的函数,间隔多少毫秒执行)

停止计时器：clearTimeout(id)

3.2.9 BOM

BOM 浏览器对象模型

BOM为我们提供了一组对象，通过这组对象可以完成对浏览器的各种操作

常见的BOM对象

window 代表浏览器窗口，是全局对象

navigator 代表浏览器对象，可用于识别浏览器

Location 浏览器的地址栏信息

History 浏览器的历史纪录（控制浏览器的前进和后退）

screen 屏幕的信息

BOM对象对象都是作为window对象的属性保存的，可以直接在js中访问

window的相关属性和方法，调用时可以省略window这个词

3.3 jquery

3.3.1jquery的引入和使用

1.引入：在使用jquery前，必须先引入jquery文件，引入的js文件必须在自定义的脚本文件之前

2.使用：

$是jquery的核心函数，jquery的所有功能都是通过这个函数进行的

1.获取jquery对象 (类似数组，可以用索引访问里面的数组元素，这个数组元素就是DOM对象) $('选择器名称') 返回数组

2.juqery对象获取dom对象

1.jquery对象[索引]

2.jquery对象.get(索引)

3.dom对象转换为jquery对象

1.获取dom对象

2.$(dom对象)

3.3.2 设置样式

1.css函数读取样式 jquery对象.css('样式名')

读取jquery对象中的第一个dom元素值

可以传入一个样式名数组 jquery对象.css(['样式名','样式名'])

2.css函数设置样式为jquery对象中所有的dom元素都设置样式

jquery对象.css('样式名','样式值')

jquery对象.css('样式名',function(index,value){

})

3.3.3操作类

当我们修改jquery对象时，它会自动修改jquery对象中的所有元素

这个称为jquery的隐式迭代

添加类：jquery对象.addClass('类名')

删除类：jquery对象.removeClass('类名')

开关类：有就删除，没有就添加 jquery对象.toggleClass('类名')

判断是否存在某个类,只要有就返回true jquery对象.hasClass('类名')

3.3.4设置属性

1.读取属性：jquery对象.attr('属性名')

读取jquery对象中的第一个元素的属性值

2.设置属性：jquery对象.attr('属性名','属性值')

删除属性：jquery对象.removeAttr('属性名')

3.3.5常用的set和get方法

1.获取标签中的文本：jquery对象.html(修改后的文本值或插入的标签)

2.jquery对象.html(修改后的文本值) 不能插入标签

3.设置宽高 jquery对象.width('值')

4.获取value值 jquery对象.val()

修改value值 jquery对象.val('值')

3.3.6事件的绑定和解绑

绑定事件：jquery对象.事件(事件处理函数) 里面所有的元素都会被绑定上一个事件

1.手动触发事件：调用事件函数 jquery对象.事件()

2.绑定多个事件：

1.声明事件处理函数

2.给jquery对象绑定事件 jquery对象.on('事件名称',事件处理函数,'事件名称'，事件处理函数)

3.解绑：使用off函数解绑

jquery对象.off('事件名称',事件处理函数)

不写事件处理函数会解绑事件对应的所有事件处理函数

4.让绑定事件只触发一次：使用one函数

3.3.7常用的表单事件

1.获取焦点(输入框有光标) .focus(触发函数)

2.失去焦点 .blur(触发函数)

3.监听输入的内容的改变 .change(触发函数)

3.3.8each遍历

jquery对象.each(function(index,element){

//index:索引 element是指dom对象

//$(element)将dom对象转为jquery对象

//索引为偶数的li颜色为红色，奇数的为绿色

})

3.3.9通过DOM树来查找节点

1.找父节点

jquery对象.parent() 找到父节点

jquery对象.parents() 找到所有的祖先节点

jquery对象.parents('选择器名称') 找到指定的祖先节点

2.找后代

jquery对象.find('选择器名称') 查找符合条件的所有后代

3.3.10增删改节点

1.创建元素jquery对象 $('元素')或&(`元素`)

2.添加元素

父添加子

末尾添加：jquery对象.append(jquery元素对象)

头部添加：prepend

子添加父：appendTo 添加到末尾

after 在一个元素的后面添加

before 在一个元素的前面添加

3.删除当前元素元素.remove

3.3.11页面加载事件

ready()准备就绪当整个网页文件加载完成，ready这个函数猜执行

$(document).ready(function(){

//自己的脚本

})

可以简化为$(function(){

//自己的脚本

})

3.3.12过滤选择器

1.子元素过滤器

1.选择器:nth-child(n)

找到当前元素的父元素下的第n个儿子，n从1开始

判断这个孩子是否匹配选择器

2.选择器:nth-of-type(n)

按照同名标签在文档中的位置进行排序，n从1开始

找到当前元素的第n个同标签名的兄弟

判断这个孩子是否匹配选择器

选择器：标签名、类名、id名、*

2.索引过滤器

1.选择器:eq(index)

匹配的集合{$('选择器')}中选择索引值为index的元素，index从0开始

是jquery扩展出来的，性能没有元素的css选择器好

3.3.13层次选择器

$("#test空格*")	得到id为test节点中的所有子节点。
$("#test空格div")	得到id为test节点中的所有div子节点。
$("#test>*")	得到id为test节点中的第一层所有子节点。
$("#test>.test")	得到id为test节点中的第一层class为test的子节点
$("#test+p")	得到id为test节点后紧邻的第一个p节点
$("#test~p")	得到id为test节点后同级的p节点

3.3.14属性过滤器

$("a[href]")	得到所有包含href属性的a标签
$("a:not([href])")	得到所有不包含href属性的a标签
$("div[属性=值]")	得到指定属性和值的div
$("div[属性^=值]")	得到以指定值开头的指定属性的div
$("div[属性$=值]")	得到以指定值结尾的指定属性的div
$("div[属性*=值]")	得到指定属性包含值的div
$("div[属性1=值][属性2=值]")	得到既包含指定值的属性1且包含指定值的属性2的div
$("div[属性!=值]")	得到指定属性不等于指定值的div

3.3.15文本过滤

$("p:contains(文字)")	得到带有指定文字的p标签
$("p:not(:contains(文字))")	得到不带有指定文字的p标签
$("p:empty")	得到没有任何文本的p标签

4.总结

前端分三大板块：HTML、CSS、JS

个人理解：html就是用来写页面页面布局的，记住一些常用的标签基本就够用了；二css是用来美化我们的页面布局的，比如哪个元素应该放在哪更好看；js是用来规定页面中的元素的行为，比如你点击页面中的一个按钮，它会出现些操作。我觉着学js最重要的是怎么去获取元素对象，只有你获取到了正确的元素对象，你才能继续后面的操作。