HTML

1.1什么是HTML

  • 超文本：有视频，音频，图片等，超越文本

  • 超文本标记语言（Hyper Text Markup Language）

  • 标记语言：有一套标签

1.2标签

  • 是由<>包裹起来的两个对象

  • <div>aaa</div>

-<div>开始标签，代表着一个元素的开始

/div>是结束标签，代表着一个元素的结束

aaa元素的内容，可以是标签，也可以是文本

-整个称为元素，这里的是div元素

  • 单标签 -<br><br/>

  • 标签的属性：

-写在开始标签中，标签名之后，常以属性名="属性值"的形式出现

-作用是为标签增加附加信息

  • 注意

标签名和属性名之间要有空格，属性名和属性名之间也有空格

<div id"id01" class="div01">aaa</div>

特殊的属性 只有属性名

  • 标签的关系：

<html>

<head></head>

<body></body>

</html>

-包含关系 html和head的关系

-并列关系 head和body

1.2.1标题标签：

h标签

-语义：内容的标题

-特点：文字加粗，独占一行

-等级：h1~h6

1.2.2段落标签：

p标签

-语义：文章的段落

-特点：独占一行，段与段之间有间隔，一段里的文本会随着浏览器窗口变化，自动换行。

1.2.3换行标签：

br标签

-语义：换行

-特点：换行后，行与行之间没有间隔

1.2.4文本格式化标签：

b标签（bold)和strong标签

-语义：加粗

-区别：b标签只是样式上的加粗效果，strong标签在语义上有强调的含义

i标签（italic)和em标签(emphasized)

-语义：斜体

s标签（strikethrough)和del标签(delete)

-语义：删除

u标签(underline)和ins标签（insert text)

-语义：下划线

sup标签

-语义：上标

sub标签

-语义：下标

1.2.5标签的类型

块级元素

-特点：

每一个块级元素的独占一行

块级元素里可以包含其它块级元素和行内元素

注意：p元素不要嵌套块元素

-常见的块级元素

div h1 p.....

-常用于页面布局

行内元素

-特点：

不会独占一行，一行里可以有多个行内元素

行内元素可以包含行内元素，一般不会包含块元素

-常见的

b i u del span

-常用于包裹文字，方便设置样式

1.2.6图片标签

img 标签

-语义：图像

-属性

src 图片路径

alt 定义无法正常显示图片时的文字，通常就是图片内容的简要说明，比如，这是logo,头像

title 定义鼠标悬停在图片时显示的文字

height 定义图片的高

width 定义图片的宽度

路径：

-相当于电子路线，通过它可以找到计算机或网络中的资源

-相对路径

-以当前文件未基础，寻找其他文件的路线

-访问方式

./表示当前文件所在目录

../表示当前文件所在目录的上一级目录

/目录名/图片名 表示图片在当前目录的下一级目录中

-绝对路径

-资源在计算机中完整地址，通常本地以盘符开头

1.2.7iframe标签

iframe 标签

-设置内联框架，在一个页面中嵌入另外的页面

-src 默认显示的页面

frameborder 设置内联框架的边框

实现内联框架页面的切换

1.给iframe设置name属性

2.让a标签的target="iframe的name属性值"

注意：a标签的href写要显示的页面地址

1.2.8 input标签

input标签

-type 属性可以修改input的类型

text 文本框

password 密码框

submit提交按钮

radio 单选按钮 name值要一致

checkbox复选框

date日期选择器

datetime-local日期时间选择期

hidden隐藏框

-name属性

定义表单元素的名字，它的值匹配用户输入的值和value中设置的值

一组单选按钮的name属性应该设置为一样的值

一组复选框的name属性应该设置为一样的值

-value属性

设置表单元素的值

-label标签

用于为input设置标注

-其他属性

placeholder 设置输入的提示

required 设置标注

1.2.9input标签

select标签

-定义下拉列表

-option标签设置选项

在option设置属性：selected="selected",默认选择当前选项

-name属性和value属性

1.2.10 多行文本框

<!-- textarea-多行文本框--><label for="">留言板</label><textarea name="words" id="" cols="30" rows="10"></textarea>

1.2.11.select标签

 <!-- select标签-定义下拉列表-option标签设置选项在option设置属性：selected="selected",默认选择当前选项-name属性和value属性   --><label for="">你最喜欢的电影</label><select name="film" id=""><option value="1">楚门的世界</option><option value="2" selected="selected">霸王别姬</option><option value="3">功夫熊猫</option></select>

1.3转义字符

转义字符

-页面当中的特殊字符

-常见的

空格 &nbsp;

< &lt;

> &gt;

版权符号&copy;

1.4网页

<!-- 文档的声明 告诉浏览器用HTML5版本来显示网页位置在html标签前，它不是标签而是一个声明
-->
<!DOCTYPE html>
<!-- lang设置文档的语言 en 英文 -->
<!-- html 是根元素（根标签） 所有的标签都包含在里面 -->
<html lang="en"><!-- head 是html文档的头部 它的内容不会显示在网页，主要用来设置文档的信息，比如标题，编码格式等 -->
<head><!-- charset设置文档编码格式 UTF-8使用最广泛，它能更好兼容中文，避免中文乱码 --><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>
</head>
<body><!-- !+Tab键或Enter键  自动生成网页基本的结构 -->冬夜读书示子聿（yu`）宋-陆游古人学问无遗力，少壮工夫老始成。纸上得来终觉浅，绝知此事要躬行。
</body>
</html>

1.5列表

有序列表-<ol></ol> order list-列表项 <li></li>-通过ol的type属性可以修改序号样式1阿拉伯数字A/a 英文字母（大写/小写）I/i 罗马数字（大写/小写）-ol标签里只能放li标签无序列表-<ul></ul> unorder list-通过ul的type属性可以修饰项目符号样式disc实心圆square 实心方框circle 空心圆-ul 标签只能放li标签自定义列表-<dl></dl> definition list-列表项dt 术语/小标题dd 对术语的说明-dl 标签里只能放dt/dd标签   -->下面哪个选项是 图片在当前文件的下一级目录中、<ol type="A"><li>&nbsp;&nbsp; ./m.png</li><li>&nbsp;&nbsp; ../img/m.png</li><li>&nbsp;&nbsp; ./img/m.png</li><li>&nbsp;&nbsp;img/m.png</li><li>&nbsp;&nbsp; ./img/img/m.png</li></ol>
<ul type="circle"><li>苹果</li><li>车厘子</li><li>葡萄</li>
</ul>
<dl><dt>李白</dt><dd>诗仙，唐朝著名诗人</dd><dt>杜甫</dt><dd>诗圣，唐朝著名诗人</dd>
</dl>

1.6超链接

</head>
<p><!-- a-标签-href设置超链接的资源地址-target 设置跳转的方式-blank  在新窗口打开页面-self 在原窗口打开页面-parent在父窗口打开页面指定在那个iframe页面打开锚点-作用：定位 比如回到顶部/文章目录-设置方法a标签的href="#锚点的id"锚点元素设置id属性      --><a href="https://www.baidu.com/?tn=88093251_109_hao_pg">百度</a><a href="https://www.baidu.com/?tn=88093251_109_hao_pg" target="-blank">百度</a><a href="https://www.baidu.com/?tn=88093251_109_hao_pg" target="-self">百度</a><a href="https://www.baidu.com/?tn=88093251_109_hao_pg" target="-parent">百度</a><a href="#bottom">bottom</a><p><a href="#first">first</a></p><p><a href="#second">second</a></p><p><a href="#third">third</a></p><p id="top">顶部</p><h1 id="first">这是第一段</h1><p style="height: 600px;width: 200px;">段落1</p><h1 id="second">这是第二段</h1><p style="height: 600px;width: 200px;">段落2</p><h1 id="third">这是第三段</h1><p style="height: 600px;width: 200px;">段落3</p><p id="bottom">底部</p><a href="#top">top</a>
</body>
</html>

1.7表格

</head>
<body><!-- table标签-必要的标签table 定义一个表格tr(table row）表格的一行td(table data cell)表格一行中的一个单元格th（table head cell)表格标题行中的一格，加粗效果-属性border 设置边框线 值是数字，值越大，外边框越粗，设为0内外边框都会消失cellpadding 设置单元格的内边距 属性值：像素px,百分比cellspacing 设置单元格与单元格的距离align 设置整个表格在页面中的位置 center left right width 设置整个表格的宽度 合并单元格-属性rowspan="2" 合并两行colspan="2" 合并两列-步骤1.确定目标单元格——在那个td上写属性2.判断合并行，还是列——写rowspan or clospan3.计算合并的单元格数量——属性值4.删除被占用的单元格--><!-- <table border="1" cellpadding="10px" cellspacing="10px" align="center" width="600px"><tr><th>编号</th><th>姓名</th><th>性别</th><th>联系方式</th><th>居住地址</th><th>籍贯</th></tr><tr><td>1</td><td>小明</td><td>男</td><td>123456</td><td>成华大道</td><td>成都</td></tr><tr><td>2</td><td>小红</td><td>女</td><td>654321</td><td>沙坪坝</td><td>重庆</td></tr></table> --><table border="1" align="center" width="500px"><tr><td rowspan="2">1</td><td colspan="2">2</td><!-- <td>3</td> --></tr><tr><!-- <td>1</td> --><td>2</td><td>3</td></tr><tr><td>1</td><td colspan="2">3</td><!-- <td>3</td> --></tr></table>
</body>
</html>

1.8表单

 <style>form{background-color: aquamarine;width: 600px;height:200px;}</style>
</head>
<body><!-- 表单域 -form 标签-属性action 设置提交路径 用来指定接受处理表单数据的服务器url地址name  设置表单域的名字，用于区分同一页面的多个表单    method 设置提交方式get 表单的数据显示在地址栏中，有需要保密的数据不能用getpost  表单的数据不会显示在地址栏中，而是封装在表单数据里表单元素-输入框 input-按钮 button--><form action="" name="test1" method="get">用户名： <input type="text" name="" id="">密码：<input type="text" name="" id=""></form><form action="" name="test2">用户名： <input type="text" name="" id="">密码：<input type="text" name="" id=""></form>
</body>
</html>

CSS

1.1CSS简介

-层叠样式表 Cascading Style Sheets

-用来设置网页元素的外观样式，比如颜色，背景，间距等等

代码规范

-语法

选择器{

//样式声明，一个或多个属性

属性名：属性值；

属性名：属性值；

}

-代码风格

选择器，属性可以小写或者全部大写，推荐小写

选择器和括号之间有空格

冒号和属性值之间有个空格

1.2CSS的使用方法

1. 2.1内部样式

-位置

在页面head标签中的style标签里定义

-特点

可以同时为多个标签定义相同的样式，修改方便

只能对当前页面起作用，不能跨页面使用-->

1.2. 2.外部样式

<link rel="stylesheet" href="test.css">

-位置

定义一个独立的.css文件，通过link引入到需要设置样式的HTML文件

-特点

可以跨页面使用

1.2.3行内样式（内嵌、内联样式）

-位置

在元素标签定义一个style属性，属性值就是样式属性键值对

-特点

只能对当前的一个元素起作用，多个元素需要一个个设置，并且不方便修改

行内样式优先级最高，基本不能同通过其他两种方式修改

开发时尽量少用

1.3字体属性

1.3.1font-family

-设置字体族，字体列表中靠前的优先应用

如果计算机中没有前面的字体，才会应用靠后的

-计算机中的字体

win11 设置 》个性化》字体

-如果定义的字体族中，所有字体都没有，则显示默认字体

-通用字体

关键字，不加引号

sans-serif 无衬线 monospace等线 fangsong仿宋

1.3.2font-size

-设置字体的大小

-单位

像素px

em 字体大小的倍数

rem相当于html字体大小的倍数

1.3.3 font-weight

-定义字体的粗细

-属性

-关键字

normal默认粗细

bold加粗

bolder比父元素更粗点

-数字1~900

400 normal

1.3.4font-style

-设置字体样式

-属性值

italic倾斜

normal默认竖值

1.3.5font

-复合设置字体样式

-属性顺序

font-style font-weight font-size font-family

1.4文本属性

1.4.1 line-height

-设置行高

行高=上间距+文本高度（font-size)+下间距

-属性值

像素px

数字

em

..

1.4.2 text-indent

-设置文本缩进

-属性值

像素px,em

1.4.3 text-align

-设置文本在块级元素中的位置

也可以设置行内元素在块级元素中的位置

-属性值

center left right

1.4.4 color

-设置文本颜色

-属性值

-关键字

red blue green

-RGB

十进制表示

rgb(red,green,blue)

3个部分，取值范围：0~255

值越大，颜色越深，取0颜色消失

rgba(137, 43, 226, 0.618);

最后一个值是不透明度，取值范围0~1

十六进制

#rrggbb 比如

取值范围：0~ff

#fff 白色

1.4.5 text-transform

-设置文本大小写转换

-属性值

uppercase 全大写

lowercase 全小写

1.4.6 text-decoration-line

-设置装饰线的位置

overline在文本上方

underline在文本下方（默认）

none就是没有下划线

text-decoration-style

-设置装饰线的样式

solid实线（默认）dashed虚线 wavy波浪线

text-decoration

-复合写法

text-decoration: dashed orange underline;

-取消下划线样式

text-decoration:none;

1.5标签选择器

选择器的作用

1.用来匹配页面中符合条件的元素

2.为这些元素设置样式

标签选择器

-语法

标签{}标签名：h1,p,span...

-特点

找到body下所有同名的标签

当页面有多个同名标签时，没有办法为某个标签单独设置样式

1.6 id选择器

id选择器

-使用方法

1.为对应的标签设置id属性

2.在css中通过#id属性值匹配该标签

-一个页面中id属性的值不能重复

1.7.类选择器

类选择器

-使用方法

1.为对应的标签设置class属性，属性值成为类名

2.在css中通过.类名 匹配这些标签

-和id选择器的区别

-类名可以在一个页面中重复使用，只要需要设置得样式相同，就可以使用

-class属性可以有多个属性值，类名与类名之间用空格隔开即可

-开发时通常用类选择器

1.8 通配符选择器

通配符选择器

-语法

*{}

-特点

1.选中body中所有得元素

2.通常用于清楚默认样式

1.9 后代选择器

后代选择器

-语法：

祖先选择器 后代选择器{}

两个选择器之间有一个空格，这两个选择器可以是标签名、类名、id选择器

-特点：

会选中a下面的所有的b，b可以是a的儿子，孙子，曾孙

元素与元素之间得关系

父元素和子元素

兄弟元素

祖先和后代元素

1.10 子代选择器

子代选择器

-语法

父亲选择器a >儿子选择器b{}

-特点

b是a的儿子

1.11 并集选择器

并集选择器

-语法

选择器1，选择器2{}

-特点

同时选中1和2

1.12伪类选择器

1.12.1 伪类

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

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

-语法

标签名：伪类{}

p：first-child

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

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

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

p:first-of-type

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

-区分类型，相对第一

元素的父元素div

找到div下的p元素

并且p元素为div的第一个元素

样式才会生效

1.13超链接的伪类

a:link

设置超链接没有被点击时的样式

.link01:visited

设置带有.link01这个类名的链接，

a:hover

设置鼠标悬停在超链接上时的样式

注意：hover也可以用于设置其他元素，在鼠标悬停时的样式方大

a:active

设置鼠标点击超链接不放时的样式

同时定义顺序：LVHA

1.14属性选择器

 <style>/* 属性选择器[标签属性名]选中带有这个属性名的标签*/[class]{font-style: italic;}[href="###"]{color: rgb(20,129,93);}</style>
</head>
<body><a href="#" class="link01">超链接1</a><br><a href="#">超链接2</a><br><a href="###" class="link03">超链接3</a><br><a href="#">超链接4</a><br>
</body>
</html>

1.15 CSS的三大特性

三大特性

1.15.1继承

在祖先元素中设置的样式，同样应用到了它的后代元素中

并不是所有的样式都会被继承

常见可以继承的样式

color font- text- line-

常见的不可继承的样式

背景相关 background- 布局相关 width

1.15.2优先级（权重）

-样式的冲突需要用优先级来解决

-什么时候产生冲突

用不同的选择器选中了同一些元素，并且为相同属性设置不同的值

-当发生冲突时，优先级高的选择器设置的样式被应用

选择器 简单算法 规范算法

!improtant 无限大 无限大 慎用

行内样式style 1000 （1，0，0，0）

id选择器 100 (0，1，0，0)

类选择器 10 (0，0，1，0)

标签选择器 1 (0，0，0，1)

继承 0 （0，0，0，0）

比较优先级时，把所有的选择器权重相加，在同量级下，相加的和越大的优先级越高

算法案例：

1.选择器权重相加，值越大的优先级越高

div p {} 1+1=2

.three p {} 10+1=11 被应用

2.权重相加的和，不会越级进位

11个div{} 1+1+1+....=11

.three{} 10 不能越级，所以仍然是类选择器被应用

3.规范权重的比较

(4,3,2,1)

.three （0，0,1,0）类选择器，在第2挡加1

#three (0，1,0,0) id选择器，在第3挡加1

.three #test(0，1,1,0)

从左往右，第4挡有1的比没有1的优先级高

如果第4挡都为0，那么比较第三档，第三档有1的比没有1的优先级高

注意：不管祖先元素优先级多高，子代继承的样式的都没有优先级

1.15.3.层叠

选择器优先级相同时，靠下面的选择器中设置的样式被优先应用

-->

<!-- <p>这是一个段落

<span>这是p中的span

<em>这是span中的em</em>

</span>

</p> -->

<!-- <div class="first">

<div class="two">

</div>

</div> -->

1.16 文档流

-网页是一个层叠的结构

-最下面一层就是文档流（相当于word文档的空白页面）

我们创建的元素，默认是在文档流中排列

-元素在文档流中的特点（显示模式）

块元素

-独占一行，自上而下垂直排列

-默认高度是它内容的高度（子元素撑起的高度），默认宽度是父元素的宽度（沾满父元素）

-设置width和height有效

行内元素

-不独占一行，只占自身大小，在页面中水平排列，超出一行，自动换行

-默认高度和宽度都是内容本身的宽高

-设置width和height无效

行内块元素

-不独占一行，只占自身大小，在页面中水平排列，超出一行，自动换行

-默认高度和宽度都是内容本身的宽高

-设置width和height有效

1.17元素的显示模式转换

display设置元素的显示模式

block以块元素的特点显示

inline-block行内块元素

inline行内元素

none 让元素从文档流消失

1.18盒模式

盒模型

-元素都是一个个透明的盒子，可以用CSS来设置它的

组成部分

-内容区域 元素的内容部分，包括设置的宽高

-padding 内边距 内容区域和边框之间的距离

-border 元素的外边框

-margin 元素与元素之间的距离

内容区域、padding、border共同组成元素的可见区域

margin 是透明的不可见

1.19padding内边距

padding-top

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

padding-left 左内边距

padding-right 右内边距

padding-bottom 下内边距

复合写法

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

padding: a b c d;上右下左

padding:a b c;上 左右 下

padding:a b ;上下 左右

取正值

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

1.20 border边框

border:宽度 样式 颜色；全边框

样式：solid 实线

double 双实线

dashed 虚线

border-top:宽度 样式 颜色；上边框

border-bottom 下边框

border-left 左边框

border-right 右边框

border-style 设置边框样式，宽度颜色默认

border-color 设置边框颜色，样式和宽度默认

border-width 设置边框宽度，样式颜色默认

1.21 margin外边框

外边距

margin-top 上外边距 设置正值 会使元素本身向下移动（增加了和上边元素的距离）

margin-left 左外边距 设置正值 会使元素本身向右移动（增加了和左边元素的距离）

margin-bottom 下外边距 设置正值 会使它下边的元素向下移动（挤开了它下边的元素）

margin-right 右外边距 块元素默认情况下，设置它无效

行内元素和行内块元素，设置正值，会使它右边的元素，像右移动（挤开了右边的元素）

margin 复合写法 同padding一样

1.22 块元素的水平布局

块元素的水平布局

块元素在父元素中，水平布局要满足下面的等式

子元素的margin-left + margin-right + border-left +

border-right + padding-left + padding-right + width=它父元素的宽度

如果这个等式不成立，称为过度约束，浏览器自动调整这几个属性值，使等式成立

哪几个属性值：

width(默认值auto) margin-left（默认值0） margin-right(默认值0)

这几个值，谁是auto就调整谁，都不是atuo，就是调整margin-right

设置某元素在父元素中水平居中

1.设置一个宽度：width:XXpx

2.设置margin:任意值：atuo

1.23 块元素的垂直布局

块元素的垂直布局

-默认情况元素的高度由子元素撑起

-设置了height,上下边框，上下内边框，高度就是这几个组成

-如果子元素的高度大于父元素，则子元素溢出

处理溢出的方法 overflow

属性值：

visible 直接显示子元素溢出的部分（默认值）

auto 根据溢出情况自动判断是否添加滚动条

scroll 为元素添加水平和垂直滚动条

hidden 直接剪切掉子元素溢出的部分

1.24 外边距的折叠

外边距的折叠

1.没有间隔的祖先和后代元素之间

子元素和父元素的上外边距重合成了一个

设置其中一个的上外边距，会传递给另一个，导致布局会发生问题

选择值较大的一个来作为上外边距

解决问题：添加间隔

-为子元素或父元素添加border

border:1px solid transparent;

-父元素添加overflow

overflow:hidden;

1.25 行内元素的盒模型

 <style>/* 行内元素的盒模型margin-top,margin-bottom 无效上下边框和上下内边距不会挤开其他元素*/span{font-size: 22px;background-color: antiquewhite;margin:30px 30px;padding: 30px;border: 1px solid red;height: 500px;display:inline-block}</style>
</head>
<body><span>这是span1</span><span>这是span2</span><span>这是span3</span>
</body>
</html>

1.26盒子的尺寸计算

box-sizing 可以设置盒模型的计算方式

border-box

设置的width和height是指整个盒子的大小

会根据设置的margin padding border,自动调整内容区的宽高

content-box （默认）

设置的width和height是指内容区的宽度和高度

整个盒子的大小还要加上margin padding border设置的值

1.27 浮动

float 浮动

-作用：让元素在父元素中向左或者向右移动

-属性值

none 元素不浮动（默认）

left 左浮动

right 右浮动

-特点

1.设置了浮动的元素会脱离文档流，它后面没有设置浮动的元素会移上去占掉它的位置，表现为重叠

2.设置浮动的元素都在同一层级，仍然按HTML中的顺序排列，后面的不会超过前面的，现在是水平排列

3.如果浮动的元素前面的元素没有设置浮动，这个元素不会越过前面不浮动的元素，而是在原本位置左右移动

4.浮动元素不会盖住文字，文字会自动环绕浮动元素

脱离了文档流的元素的特点

1.默认的宽度是内容本身的宽度

2.元素会水平排列

3.设置width和height有效

总之，变成了行内块元素

1.28 浮动带来的问题

浮动带来的问题

没有给父元素单独设置高度时，默认父元素的高度由它的子元素撑起来

子元素设置浮动后，脱离了文档流，导致父元素的高度丢失，下面的元素会移上去，页面混乱

—— 高度塌陷问题

解决方法

1.给父元素设置高度——会限制子元素的空间

2.父元素设置overflow

1.29 伪元素选择器

伪元素

-开头有双冒号::的关键字，早期也用:

before 在元素内前面添加

after 在元素内后面添加

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

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

content设置添加的内容

content:"文本";

content:url(图片的地址);

1.30 清除浮动

clear 清除浮动

-left 清楚左侧浮动元素的影响（不会被浮动元素盖住）

-right 清楚右侧浮动元素的影响

注意：同时设置clear:left和clear:right时，谁在下面谁应用，而不是同时起作用

-both 清除左右两侧所浮动中，最大的一个影响

原理：

设置清楚浮动之后，会有透明盒子占居原来位置，使得下边的元素浮动

实际上是浏览器自动给当前元素设置的一个合适的上外边距

1.31 clearfix类

.out{background-color: blueviolet;border:1px solid sandybrown;}.in{width: 200px;height: 200px;background-color: rgb(43, 226, 141);float:left;}/* 这段代码可以解决高度坍塌问题和外边距折叠问题*/.clearfix::before,.clearfix::after{content: '';clear: both;display:table;}</style>
</head>
<body><div class="out clearfix"><div class="in"></div></div></body>
</html>

1.32 相对定位

定位 position

-作用：设置当前元素在页面中的位置

-属性值

absolute绝对定位

relative相对定位

fixed 固定定位

相对定位

-position 设置为relative就开启相对定位

-特点

1.设置相对定位的元素，会提升一个层级，可能覆盖其他的元素

2.设置相对定位的元素，并没有脱离文档流，它下边的元素不会移动上去站他的位置

这个元素的显示模式没有发生变化，没有变成行内块

3.开启的相对定位的元素是谁来定义位置的？

相对于当前元素原本在文档流中的位置来定位的

查看定位相对原点的方法：

position:relative;

top:0;

left:0;

-通过设置偏移量来控制当前元素的位置

top 设置元素和定位位置上边的距离 设置正值，元素向下移动，负值，元素向上移动

left 左边的距离，正值元素右移动，负值元素向左移动

right 右边的距离，正值元素左移动，负值元素向右移动

bottom 下边的距离，正值元素上移动，负值元素向下移动

一般使用时，top和bottom只选其一

left和right只选其一

1.33 绝对定位

绝对定位

-为元素设置position的值为absolute,就开启了绝对定位

-特点

1.设置了绝对定位的元素会脱离文档流，它的显示模式变成行内块元素

2.设置绝对定位会提升元素的的层级，会覆盖文档流的其他元素

3.绝对定位是参照什么定位呢？

相对于离他最近的开启了定位的祖先元素来定位

如果没有开启定位的祖先元素，则相对于html定位

1.34 固定定位

固定定位

-它是特殊的绝对定位，区别在于：

1.固定定位是相对于浏览器视窗定位

2.设置了固定定位的元素会固定在设置的位置上，页面滚动时，他也不移动

1.35 元素的层级

元素的层级z-index

属性值时一个整数，值越大层级越高，能够覆盖其他元素

注意：

1.设置了定位的元素层级比设置z-index最高级的还有

2.无论父元素的设置元素层级多高，都不会覆盖子元素。

JS

1.1JS的简介

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

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

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

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

脚本（Script）一系列的指令

JS的作用

HTML用于定义页面中的内容

CSS 用于设置内容的样式

JS用来控制HTML元素的行为

在页面中动态嵌入HTML元素

可操作浏览器

可以和用户数据交互

JS的组成

1.ECMAScript 语法

简称ES,是JS的语法规范

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

2.DOM（Document 文档 Object Model）文档对象模型

这里的文档指HTML页面

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

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

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

1.2 JS编写的位置

1.写在标签的事件中

比如鼠标点击事件onclick

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

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

也可以放在body标签里

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

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

1.3 JS的输入输出语句

<script>// 弹出警告框alert("hello JS")//在控制台打印输出console.log("hello JS")//在HTML页面中显示输出document.write("Hello JS")//弹出输入框prompt("请输入你的名字：")</script>

1.4 JS代码规范

/*

多行注释，不可以嵌套

*/

// 单行注释 ctrl+/

//JS中严格区分大小写

Document.write("111")//报错

//JS每条语句应该有分号结尾

//有时候，一行一条语句时，分号可以省略

1.5 JS的变量

变量

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

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

变量的声明和赋值

声明

var 变量名;

let 变量名;

赋值

变量名=值;

声明的同时赋值

var 变量名=值;

同时给多个变量声明赋值

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

修改变量值

变量名=值;

注意：

只声明不赋值，默认输出：undefined

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

1.6 常量

常量

-不可被改变的量

-声明常量 并赋值

const 变量名 = 值;

注意

常量智能赋值一次，重复赋值会报错

1.7 标识符的命名规则

标识符

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

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

命名规则

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

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

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

4.命名的规范

通常使用驼峰命名

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

minlength - > mingLength

类名使用大驼峰

-每个首字母都大写

minlength - >MinLength

常量名全大写

MIN_LENGTH

1.8 数据类型

数据类型

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

JS中数据类型分为原始值（基本类型）和对象（复杂类型）

原始值

1.Number 数值

2.BigInt 大整数

3.String 字符串

4.Boolean 布尔值

5.Null 空值

6.Undefined 未定义的

7.Symbol 符号

对象

Object

1.8.1 Number

Number 数值

-整数、小数

-特殊值

NaN （Not a Number）非法数

Infinity 无限大的数字 无穷

判断变量的数据类型

typeof 变量名

 var a= 123console.log(a);console.log(typeof a);//numbera = 32.1console.log(typeof a);a=123/0console.log(a);//infinityconsole.log(typeof a);//numbera="a"/2console.log(a);//NaNconsole.log(typeof a);//number

1.8.2 String

String 字符串

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

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

-转义字符\

\" 转移双引号

\\ 转义单斜杠

\n 换行符

模板字符串

-用 `` 表示

-特性

-支持换行

-支持嵌入变量

`${变量名}`

<script>let str="111"str='222'str = '这是一个双引号""。'str="这是一个双引号\"\"。"str="单斜杠\\"  //  单斜杠\str = "哈哈哈\n哈哈"console.log(str);console.log(typeof str);//Stringlet str2 = `这是模板字符串`str = 111;str2 = `模板字${str}符串`console.log(str2);console.log("str2:"+str2);console.log(typeof str2);console.log("str2:" + str2);console.log(`str2:${str2}`);console.log(typeof str2);</script>

1.8.3 Boolean

<script>/*Boolean 布尔值-true false*/let bool = trueconsole.log(bool);console.log(typeof bool);</script>

1.8.4 Null和Undefined

  <script>/*Null 空类型 空值含义：对象类型的空引用（空指针）Undefined 未定义类型变量声明但未赋值，则这个变量的值就是undefined*/let a= nullconsole.log(a);console.log(typeof a);//objectlet b;console.log(b);console.log(typeof b);//undefined</script>

1.9 类型转换

1.9.1 boolean 转换为其他类型

-转换未数值

Number() true转换为1 false 转换为0

-转换为字符串

String()

非字符串+'' 可以隐式转换为字符串

1.9.2.Number转换为其他类型

-转换为布尔

Boolean(变量）

0-》false 非0数值-》 true

-转换为字符串

String()

1.9.3 String 转换为其他类型

-转换为布尔

Boolean()

空字符串'' ->false 其他的为true

-转换为数值

Number()

"111" -> 111

不是数值类型 -》 NaN

在数字类型的字符串前面添加正号（+），可以隐式地将这个字符串转换为数字 结果是数字

1.10 算术运算符

算术运算符（双目）

+ - * /

+

1.加法运算

2.字符串拼接

当+两侧，至少一个为字符串时，做字符串拼接

- 减法运算

/ 除法运算

正常显示结果，可以显示小数

* 乘法运算

%取余运算

注意：

字符串参与算术运算时，如果是数字类型的，会当作数值参与计算

先将字符串隐式转换为数值再参与运算

1.11 关系运算

> 大于

< 小于

>= 大于等于

<= 小于等于

== 相等

只是判断值是否相等 不会检查类型

=== 全等

判断值以及它的数据类型是否完全相等

！= 不等

只是判断值是否相等 不会检查类型

!== 全不等

判断值以及它的数据类型是否完全不相等

1.12 逻辑运算

逻辑运算符

1.&& 与

-表达式1 && 表达式2

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

只要有一个为false,结果就为false

-短路与

只要前面这个表达式1为false,后面的表达式2将不会执行，

直接判定结果为false

2.|| 或

-表达式1 || 表达式2

-两个表达式都为false ,或的结果才为false

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

-短路或

只要前面这个表达式1为true后面的表达式2将不会被执行

直接判定结果为true

3.！ 非

- !表达式

-取反

1.13 赋值运算

赋值运算符

=

将等号右侧的值赋值给左侧的变量

运算顺序：从右向左

+=

-=

*=

/=

%=

1.14 自增自减运算符

a++

res = a++//res等于a

a=a+1

a =a+1

相当于a=a+1

先使用后加1：先让a的值作为a++这个表达式的返回值，然后a这个变量加1

a++这个表达式的返回值=a原本还没有加1的旧值

++a

相当于a=a+1

先加1后使用：先让a加1 然后让这个新的a的值作为++a的值作为++a的返回值

a--

先使用后减一

--a

先减1后使用

1.15 条件运算

条件运算符

-表达式1？表达式2 :表达式3

-如果表达式1为true,返回表达式2的值

如果表达式为false,返回表达式3的值

1.16 运算符的优先级

1.()

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

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

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

5.逻辑运算符 && ||

6.条件运算符

7.赋值运算符

1.17 条件语句

if语句

if(条件表达式){

//代码块

}

当条件表达式为true时，执行里面的代码块

如果代码块只有一句语句，可以省略{}

if-else语句

if(条件语句){

//代码块

}else{

//代码块

}

if else语句是二选一，一定有一个代码块被执行

if-else if语句

if(条件表达式1){

}else if(条件表达式2){

}else if(条件表达式3){

}else{

}

执行流程

自上向下依次对if后的条件表达式进行求值判断

如果某一个的结果为true，就执行它里面的代码块的语句，执行完毕就结束

如果结果为false，就继续向下判断，直到找到true为止

switch(b){

case 1:

break;

case 2:

alert("贰")

break;

case 3:

alert("叁")

default:

alert("肆")

}

执行流程

会依次将key和case后的value进行全等比较

如果比较结果为true就从当前

1.18 循环语句

循环语句

作用：通过循环语句可以使指定的代码有规律的重复执行

循环的三要素

1.循环变量的初始化表达式（定义循环变量,并且初始化）

2.循环条件表达式(设置循环条件，当条件不满足时循环结束)

3.变量更新表达式（修改循环变量，递增或递减，使得循环结束）

while

do-while

for

1.19 while 循环

 <script>/*while语句初始化表达式while(循环条件表达式){//循环体其他语句变量更新表达式}当循环条件表达式为true时，执行循环体，直到循环条件表达式为false,循环停止*/let i=0;while(i<3){console.log(i);i++;}let a=0;let s=0while(a<=100){a+=7;s++;}console.log(s);</script>

1.20 do...while

do while语句

初始化表达式

do{

//循环体

其他操作

更新表达式

}while (condition);

执行流程

先执行一次循环体，然后判断条件表达式是否为true

如果为true执行循环体，直到条件表达式为false停止循环

do while 和while的区别

do while能保证循环体至少循环一次

1.21 for循环

for循环

for(初始化表达式;循环条件表达式;变量更新表达式){

循环体

}

执行流程：

1.执行初始化表达式,初始化循环变量

2.执行循环条件表达式，判断循环是否执行（true)执行，（false）不执行

3.如果true,执行循环体

4.执行变量更新表达式，对循环变量进行更新

5.重复执行循环条件表达式，直接判断为false为止

注意：初始化表达式在整个循环周期中只执行一次

for循环中这三个表达式都可以省略

在for循环中用了let声明的变量，只能在for循环内部访问，在for循环外面访问未定义

在for循环中用了var声明的变量,在for循环内部和外部动能访问

1.22 循环的嵌套

1.22.1 九九乘法表

 <script>//打印九九乘法表/*循环的嵌套外层循环执行一次，内层循环执行一周外层循环控制图形的高，内层循环控制宽*///    for(let j=0;j<3;j++){//外层循环执行一次//     for(let j=0;j<3;j++){//内层循环执行一周//         console.log(i);//     }//    }for(var i=1;i<10;i++){for(var j=1;j<=i;j++){var a=j*i;document.write(i+"*"+j+"="+a+"&nbsp;&nbsp;&nbsp;")}document.write("<br>")}</script>

1.23 数组基础

数组

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

创建数组的方式

1.通过new关键字

var 数组名 =new Array(数组大小)

这里的数组大小作用不大，赋值时超出索引，会自动扩容

赋值：

数组名【索引】 =值；索引从0开始

注意：

数组中未赋值的元素是空的，默认输出是undefined

2.通过[]创建

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

注意：

赋值的时候，最好连续赋值，否则浪费空间

3.声明的同时赋值

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

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

4.获取数组的长度

数组名.length

注意：

这个属性是可以更改值的，如果我们

console.log("list3的长度：",list3.length);

5.判断是否为数组

是数组返回true

不是数组返回false

6.数组的遍历

for(let i=0;i<list3.length;i++){

console.log(list3[i]);

}

for-in语句

for(index in list){

//list[index]

}

1.24 Math

 <script>/*Math是JS的一个内置对象，它拥有一些数学中常数属性的数学函数方法，比如pai三角函数这些属性和方法可以直接通过Math这个对象调用适用于Number类型*/console.log(Math.PI);console.log(Math.E);console.log(Math.abs(-5));//求绝对值console.log(Math.pow(2,3));//2的  三次方，8console.log(Math.max(3,5));//求两个数之间的最大值console.log(Math.ceil(3.1));//4  向上取整console.log(Math.floor(3.1));//3 向下取整console.log(Math.round(3.6));//4 四舍五入console.log(Math.sqrt(4));//2 平方根console.log(Math.cbrt(64));// 4 立方根console.log(Math.random);//生成[0，1) 范围内的随机数console.log(Math.random()*100);//console.log(Math.random()*7+3);//[3,10)//生成[a,b)范围的随机数//Math.random()*Math.abs(b-a)+Math.min(a,b)</script>

1.25 对象及创建

对象

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

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

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

创建方式

1.使用{}直接创建

let 对象名 = {

属性名：属性值;

方法名（）{

//代码块

}

}

属性和方法的调用

对象名：属性名

对象名：方法名（）

在方法中可以通过this关键字访问当前对象的属性

this指的是调用当前方法的对象

2.使用Object创建

添加属性

对象名.属性名=属性值

属性的其他方法

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

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

1.26 函数及创建

函数是对一段程序的封装

作用

用于包装可以重复使用的代码（代码复用）

创建方式

1.函数声明方法

function 函数名（参数列表）{

//代码块

}

调用函数：函数名（实参列表）

返回值：

函数返回的结果成为返回值，函数默认返回值null

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

可以返回任何类型的数据：字符串，数字，函数，对象

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

2.函数的表达式

let 变量名=function(参数列表){}

调用函数：变量名（实参列表）

定义函数时，可以给形式参数设置默认值

如果调用函数时，没有提供实参，形式参数就会使用默认值

箭头函数

(形参列表)=>{

//代码块

}

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

1.27 参数的值传递

形式参数（形参）

就是定义在函数（方法）的小括号中的变量

实际参数（实参）

调用函数（方法）时，写在小括号中的变量/常量/值

形参和实参的关系

在调用函数时，会将实参传递给形参，即将实参赋值给形参使用

值类型传参

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

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

类比：把文档（实参）复制一份交给老师（形参），你的还是你的，老师没办法修改你电脑上的

number,boolean,string是值传递

引用类型的传参

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

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

类比：把你的公开的腾讯文档的链接（引用）发给老师（形参），老师对文档进行修改，我这里能看到老师修改

object function是引用传递

1.28 变量的作用域

1.28.1 变量的作用域

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

作用域

全局作用域 Global

块作用域 block

函数作用域 Function

1.28.2 全局作用域 Global

-在网页运行时创建，关闭网页时销毁

-直接在script标签中定义的变量都位于全局作用域中

-全局作用域中的变量就是全局变量，可以在任意位置访问

全局变量分为两种

1.（普通）全局变量

直接在函数外声明的变量

2.自动全局变量

不使用let/var 关键字声明，直接给变量名赋值，这个样的变量就会变成自动全局变量

他存到了window对象，成为了window属性

1.28.3 块作用域

代码块：{}里的内容

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

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

在块内部用let定义的变量，就具有了一个块作用域

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

-具有块作用域的变量，只能在块内部访问，不能再块外面访问

1.28.4函数作用域

在函数中，无论是用let/var 声明的变量都有函数作用域，

在函数内部可以访问，在函数外部无法访问

1.28.5作用域链

在使用一个变量时，JS解释器会先在当前作用域寻找变量

如果没找到就往上一层作用域寻找

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

简单点说：

就近原则，从里往外找变量

let var区别

let 有块作用域

var 没有

1.29 JSON字符串

对象序列化 将对象转化为一个字符串

这个字符串就称为JSON字符串

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

JSON.stringify(obj)将obj对象转换为json字符串

JSON.parse(json)将josn对象转换为obj字符串

DOM和BOM

1.1 DOM简介

DOM Document Object Model 文档对象模型

-Document 文档，这里指整个网页html

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

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

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

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

DOM树

1.2 获取节点对象的方法

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

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

querySelector（"选择器名称")

document.querySelector("选择器")

根据选择器去整个页面获取 第一个符合条件的元素节点对象

1.2.1获取和修改元素的文本

获取和修改元素中的文本

获取：元素对象.innerHTML

修改：元素对象.innerHTML='新文本内容'

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

（有xss注入风险，被篡改插入非法的HTML代码）

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

1.2.2 querySelectorAll('选择器名')

根据选择器去获取整个页面中符合条件的 所有 元素

返回一个符合条件的元素数组

可以通过索引访问每一个数组元素，对里面的节点对对象进行

数组名[索引]

1.3 事件绑定

1.3.1事件

用户和页面之间发生的交互行为

比如：当用户点击鼠标时，就修改背景颜色

当用户点击enter，就进入网站

总之：

当某种情况发生时，就执行了一段代码，完成了一些操作，这里的某种情况就是事件

当某个事件被触发时，就执行了一段代码（着段代码我们通常封装成一个事件处理函数）

如何为一个元素绑定事件

1.3.2用元素的addEventListener('事件名称'，事件处理函数名)方法绑定

特别注意：

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

所有的事件名称参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/mouseover_event

但是可以自定事件，然后使用自己定义的事件名称

https://developer.mozilla.org/zh-CN/docs/Web/Events/Creating_and_triggering_events

步骤：

1.获取元素对象

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

3.给元素对象添加事件添加器：也就是调用addEventListener

解绑事件

元素对象.removeEventListener('要解绑的事件'，事件处理函数名)

注意：addEventListener可以为一个元素邦多个事件，并且可以为一个事件绑定多个处理函数

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

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

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

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

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

解绑：

btnObj.οnmοuseοut=null

1.3.4 直接在标签中设置事件属性

<button οnclick="onClick()">点我</button>

注意函数名后有括号，因为是事件触发的时候调用函数

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

一个事件可以绑定多处理个函数，用分号隔开即可

1.4 常用的鼠标监听事件


<body><div>这是div</div><input type="text" value="1"><script>var inputObj =document.getElementsByTagName('input')[0]console.log(inputObj.value);var divObj = document.getElementsByTagName('div')[0]console.log(divObj);/*鼠标移入  mouseoveronmouseleave*/function fn1(){//this添加这个监听的dom对象this.style.width='200px';this.style.height = '200px';this.style.backgroundColor='red';}divObj.addEventListener('mouseover',fn1)function fn2() {//this添加这个监听的dom对象this.style.width = '100px';this.style.height = '100px';this.style.backgroundColor = 'blue';}divObj.addEventListener('mouseleave', fn2)</script>
</body>
</html>

1.5通过DOM树的关系获取节点

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

获取父元素的所有节点

元素对象.childNodes

获取父元素的所有子元素

元素对象.children

返回数组

想要获取某一个子元素，用索引访问

firstElementChild获取第一个子元素

firstChild获取第一个子节点

lastElementChild 获取最后一个子元素

lastChild获取最后一个子节点

子元素获取父元素

子元素对象.parentElement

获取父节点

获取兄弟元素

nextElementSibling 获取下一个兄弟元素

nextSibling 获取下一个兄弟节点

previousElementSibling获取伤一个兄弟元素

previousSibling获取上一个兄弟节点

1.6 增删改节点

创建元素并添加属性

document.createElement('属性名')

新添加的元素对象.属性名 = '属性值'

appendChild向父元素尾部添加子元素

1.获取父元素对象

body 直接用document.body

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

prepend 向父元素头部添加子节点

remove()删除当前元素

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

replaceWith 用一个节点替换另一个节点

要被替换的节点对象.replaceWith(newNote)

1.7 操作标签的属性

操作标签的属性

1.获取：通过元素对象.属性名

修改：元素对象.属性名=新的属性值

2.setAttribute（'属性名'，'属性值'） 为元素设置属性

getAttribute('属性名')获取元素的属性值

removeAttribute('属性名')删除元素的属性值

1.8 操作标签的样式

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

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

这种方式是修改的内联样式

注意：样式名如果是font-size,应该修改为小驼峰fontSize

2通过添加类名操作修改样式

元素对象.className += ' 类名'//注意类名前要加空格

3.通过classList属性操作类名

元素对象.classList.add('类名','类名2')

1.9定时器

定时器

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

1.setTimeout(要执行的函数，延迟的时长（单位：ms));

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

停止定时器

clearTimeOut(timerId)

1.10 文档的加载

js默认情况下是顺序执行，所以将script编写在body前面是，获取节点对象是未定义

控制文档加载

可以使js在DOM渲染完成后，再加载回调函数

jQuery

1.1 jQuery的引入和使用

在使用jquery前，必须先引入jquery的js文件

压缩版 min.js 通常在开发中使用

未压缩版 .js

引入的JS文件必须在自定义的脚本文件之前

引入jQuery库，就是向这个网页添加一个函数JQuery / $

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

通过$获取JQuery对象

$('选择器名称')

JQuery对象实际上是一个数组（类似数组），可以用访问里面的数组元素

这个数组元素就是DOM对象

访问的方式

1.索引

2.get放法

dom对象转换为JQuery对象

将dom对象作为参数传入$函数中

$(domObj)

1.2 设置样式

<script>// jQuery获取jQuery对象let $boxs = $('.box')// css函数读取样式 读取jQuery对象中第一个dom元素的属性值console.log($boxs.css('width'));console.log($boxs.css('height'));// 可以同时传入一个样式名数组console.log($boxs.css('height', 'width'));// css函数设置样式 为jQuery对象中的所有dom元素都设置上样式// $boxs.css('background-color', 'red')$boxs.css('background-color', function (index, value) {// index就是当前数组成员的索引console.log('index:' + index);// value就是当前数组成员对应background-color的属性值console.log('value:' + value);// 返回值： 新的属性值return index % 2 == 0 ? 'green' : 'red'})//参考文档：https://www.jquery123.com/</script>

1.3 操作类

<script>/*当我们修改jQuery对象时，它会自动修改jQuery对象中的所有元素这个称为jQuery的隐式迭代*/let $boxs =$('.box')//添加类$boxs.addClass('box2')//删除类$boxs.removeClass('active')//开关类  有就删除，没有就添加// $boxs.toggleClass('box3')//判断是否存在某个类console.log($boxs.hasClass('box3'));</script>

1.4设置属性

<script>let $boxs=$('.box')//读取属性 读取jquery中的第一个元素的属性值console.log($boxs.attr('class'));//读取自定义属性console.log($boxs.attr('my-box'));let $input =$('input')//设置属性$input.attr('value','222')//js设置属性// $input[0].disabled=true//当html中没有disabled时，设置为true禁用//  $input[0].disabled = false//设置false 可用// $input[0].setAttribute('disabled',false)//这种写法无论第二个参数写什么都是禁用// $input[0].removeAttribute('disabled')//可以删除disabled属性，使得input可以使用//jquery设置$input.attr('disabled',false)//设置可使用//删除属性$boxs.removeAttr('my-box')</script>

1.5 常用的set和get方法

 <script>/*html()获取标签中的文本html(str)设置文本内容，还可以用于插入标签*/console.log($('.box1').html());$('.box1').html('5555')        $('.box1').html('<p>我是p标签</p>')/*text(str)只能设置文本，不能插入标签*/$('.box2').text('<p>我是p标签</p>')console.log($('.box3').width());$('.box3').width('200')//设置高$('.box3').height('200')//设置宽/*val() 获取和设置value值*/console.log($('input').val());$('input').val('333')</script>

1.6事件绑定和解绑

<script>let $box=$('.box')/*jQuery对象绑定事件，直接调用事件名称对应的函数参数就是我们的事件处理函数*/$box.click(function(event){//event事件对象，他是在触发事件时，浏览器生成的事件对象console.log(event);console.log('click');})$box.mouseenter((event)=>{console.log(event);console.log('mouseenter');})$box.mouseleave((event)=>{console.log(event);console.log('mouseleave');})//手动触发事件 调用事件函数$box.click()/*使用on函数绑定事件on('事件名称'，事件处理函数)*///1.声明事件处理函数function click1 (event){//event事件对象，他是在触发事件时，浏览器生成的事件对象console.log(event);console.log('click1');}//2.给jquery对象绑定事件$box.on('click',click1)/*使用off函数解绑事件*/$box.off('click',click1)//不写第二个参数，会解绑事件对应的所有函数$box.off('click')/*使用one函数可以让绑定的事件只触发一次*/$box.one('click',function(){console.log('one click');})</script>

1.7 常用表单事件

 <script>//获取焦点（输入框有光标）$('input').focus(()=>{console.log('获取到焦点了');})//失去焦点$('input').blur(()=>{console.log('失去焦点了');})//监听输入内容的改变$('input').change(()=>{// let pwd=$('input').val()// console.log(pwd);console.log('内容改变了');})</script>

1.8each遍历

 <script>const $lis = $('ul>li')$lis.each(function(index,element){//第一参数index是指索引console.log(index);//第二个参数element 是指dom对象console.log(element);//$(element)将dom对象转换jquery// $(element).css('color','red')//索引为偶数的li颜色为红色，奇数的为绿色$(element).css('color', index%2===0? 'red':'green')})</script>

1.9 通过DOM树查找节点

<script>//parent()找到父节点$('.a').parent().css('background-color','red')//parents()找到所有的祖先节点console.log($('a').parents());//parents('选择名称')找到指定的祖先节点$('.a').parents('tr').css('background-color','')//find('选择器名称') 父元素查找指定的后代元素console.log($('.b').find('th'));console.log($('tr').children());</script>

1.10 增删节点

 <script>//创建元素jquery对象let $box = $(`<div class='box box1'></div>`)console.log($box);//获取body的jquery对象let $body = $(document.body)//向父元素内追加一个元素  谁要添加谁// $body.append($box)//末尾添加// $body.prepend($box)//头部添加let $box1 = $(`<div class='box box1'></div>`)//将子元素追到父元素末尾// $box.appendTo($body)//添加到末尾// $box1.prependTo($body)//添加到开头//body>.box:nth-child(2) 获取body下第二个div 并且这个div有box类let $box2 =$('.box:nth-child(2)')//after在一个元素的后面添加另一个元素// $box2.after($box1)//before在一个元素的前面添加$box2.before($box1)//删除当前元素  谁调用了remove(),谁就删除了$box2.remove()</script>

1.11 页面加载事件

<script>//ready()准备就绪//当整个网页文件加载完成时，ready（）这个函数才执行$(document).ready(function(){//这里写我们自己的脚本console.log("load end");})//可以简化为$(function(){//这里写我们自己的脚本console.log("load end");})</script>

1.12 过滤选择器

 <script>//------子元素过滤器------///*seletor:nth-child(n)1.找到当前元素的父元素下，第n个孩子、2.判断这个孩子是否匹配seletor选择器如果匹配就选择器它，应用样式如果不匹配就不选择它，这个伪类选择器失效（什么也没有选中）当前元素：所有匹配selector选择器的元素按照子元素在文档中出现的位置排序，从1开始（要同级）seletor:标签名、类名、id名、*:nth-child(n) 等同于 *：nth-child(n)*///选择所有h1所在父元素下，第5个孩子//    $('h1:nth-child(5)').css('color','red')//    $('.a:nth-child(3)').addClass('test')//    $('div:nth-child(2)').addClass('test')//body中所有的父元素下的第一个孩子$('body *:nth-child(1)').css('color', 'red')/*seletor:nth-of-type(n)1.找到当前元素的第n个同标签名的兄弟2.判断这个孩子是否匹配seletor选择器按照同名标签在文档中出现的位置排序，序号从1开始*///   $('.a:nth-of-type(3)').css('color','blue')//----索引过滤器----///* selector:seletor:eq(index)在匹配的集合中选择索引值为index的元素，索引从0开始匹配的集合：$('seletor')获取的dom元素集合这个jquery扩展出来的扩展器，性能没有原生的css选择器好推荐eq()方法同类的：even 偶数索引  ：odd  奇数索引：gt(index)  大于index的索引   ：lt(index)  小于index的索引*///   console.log($('.a:eq(2)')); 获取到的是$('.a')这个jquery对象中的第三个元素$('.a:eq(2)').addClass('test')//---表单过滤器---///*：checked匹配所有勾选的元素只适用于复选款和单选按钮   下拉菜单：select*/function count(){//打印有几个input被选中了console.log($('input:checked').length);}$('input[type=checkbox]').on('click',count)function fn1() {// console.log($('input:checked').length);const $input=$('input:checked')$input.each(function(index,Element){// console.log(index,Element);const $in=$(Element)console.log($in.val());})}$('input[type="radio"]').on('click', fn1)</script>

1.13 数组的常用方法

1.13.1 push

向数组的末尾添加一个或多个成员

参数：被添加的新数组成员

返回值：新的数组长度

操作会改变原数组

1.13.2 pop

删除并返回数组的最后一个成员

返回值是被删除的这个成员

操作会改变原数组

1.13.3 unshift

向数组的开头添加一个或多个成员

参数：被添加的新数组成员

返回值：新的数组长度

操作会改变原数组

1.13.4 shift

删除并返回数组的第一个成员

返回值是被删除的这个成员

操作会改变原数组

1.13.5 splice

删除指定位置的成员，并用新成员替换，或插入新成员到指定成员的前面

第一个参数：删除成员的起始位置

第二个参数：删除成员的个数

第三个参数：用于替换被删除成员的新数据，该参数可以省略

返回值： 被删除的成员数组

会改变原数组

1.13.6 concat

连接数组

参数：多个被追加进数组的成员，若成员是数组，该数组中每个成员都被加入原数组

返回值：一个新数组

不改变原数组

1.13.7 join

使数组成员用一个字符连接起来，返回字符串

参数：连接数组成员时使用的字符

返回值：数组成员被连接起来的字符串

1.13.8 includes

判断是否包含某成员

参数：需要判断的值

返回值：布尔值

1.13.9 indexOf

得到某个元素第一次出现的位置，没有返回-1

1.13.10 lastIndexOf

得到某个元素最后一次出现的位置，没有返回-1

1.13.11 slice

数组切片 获取子数组

第一个参数：起始位置(包含这个成员)

第二个参数：结束位置(不含这个成员)

第二个参数可省略，代表从第一个参数开始截取到最后

返回值：截取的子数组

不改变原数组

1.13.12 sort 数组排序

将元素视为string，默认按第一个字符的ascii码升序排序

参数：可以传递一个回调函数作为参数，通过回调函数来指定排序规则

(a, b) => a - b 升序排列

(a, b) => b - a 降序排列

会改变原数组

1.13.13 reverse 将数组中的元素倒序

返回值：倒叙后的数组

会改变原数组

1.14 字符串的常用方法

<script>let str = 'hello world !!!'// 字符串可以被视为字符数组// 查看字符串长度console.log(str.length);// 通过索引访问字符串中的字符console.log(str[4]);//$('.a')[0]// charAt 函数可以获取指定索引处的字符// 等价于 str[4]console.log(str.charAt(4));//$('.a').get(0)// split: 分割字符串// 参数：用于分割字符串的字符// 返回值：字符串数组let r = str.split(' ')console.log(r);// split + join 替换字符// 例如：替换字符 *|& 为 _str = 'hello*|&world*|&!!!'r = str.split('*|&')r = r.join('_')console.log(r);// trim: 去掉字符串首尾空格str = '          hello world !!!          'console.log(str);r = str.trim()console.log(r);// substring: 截取子字符串// 第一个参数：截取字符串的起始索引位置// 第二个参数：截取字符串的结束索引位置// 口诀：前截后不截// 返回值：截取出来的子字符串str = 'hello world !!!'r = str.substring(4, 9)console.log(r);// 第二个参数可以省略，如果只写一个参数，substring将从该参数位置一直截取到字符串末尾r = str.substring(6)console.log(r)// indexOf: 查询字符串中指定字符在字符串中的索引位置// 参数：要查询的字符串// 返回值：被查询字符串的索引console.log(str.indexOf('o'));// lastIndexOfconsole.log(str.lastIndexOf('o'))// 举例: 截取字符串从 o ~ rconsole.log(str.substring(str.indexOf('o'), str.lastIndexOf('r') + 1));// startsWith: 用于判断字符串是否以指定字符串开头// 参数：指定开头的字符串// 返回值：bool值，true代表是以指定字符串开头的，false代表不是console.log(str.startsWith('hello'));// endsWith: 用于判断字符串是否以指定字符串结尾console.log(str.endsWith('!!!!'));// toUpperCase toLowerCase 将字符串中的英文转成全为大写或小写str = str.toUpperCase()console.log(str);str = str.toLowerCase()console.log(str);// 例如: 统计一个字符串中出现了多少个a字符，忽略大小写str = 'alhdAkdjfalKHgladhfdjAhg'str = str.toLowerCase()let count = 0for (let i = 0; i < str.length; i++) {const char = str[i];if (char === 'a') count++}console.log(count);// 补充：// 数字操作：// toFixed 保留小数点后多少位的函数// 参数：指定小数点后保留几位// 返回值：是一个保留了指定小数点位数的字符串let num = 3.1415926r = num.toFixed(3)console.log(r);
</script>

1.15 正则表达式

<script>// 正则表达式：用于匹配字符串的表达式// 例如：可以写一个正则表达式，用于鉴定一个字符串是否是邮箱格式的字符串// 声明一个正则表达式// 方法一:let regex = new RegExp('^[0-9a-zA-Z]+@[0-9a-zA-Z]+\.(com|cn)$')// 方法二:// 使用两根 / 斜线代表正则表达式的边界regex = /^[0-9a-zA-Z]+@[0-9a-zA-Z]+\.(com|cn)$/// 调用正则表达式的test方法 用于检测字符串是否符合正则表达式的描述// test 返回 true 代表 受测字符串符合正则表达式描述的特征console.log(regex.test('xyz@gmail.com'));/*语法可以在mdn上查询:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions1.在正则表达式中大部分字符都可以直接写2.| 在正则表达式中表示或3.[] 表示或（字符集）[a-z] 任意的小写字母[A-Z] 任意的大写字母[a-zA-Z] 任意的字母[0-9]任意数字4.[^] 表示除了[^x] 除了x5. . 表示除了换行外的任意字符6. 在正则表达式中使用\作为转义字符7. 其他的字符集\w 任意的单词字符 [A-Za-z0-9_]\W 除了单词字符 [^A-Za-z0-9_]\d 任意数字 [0-9]\D 除了数字 [^0-9]\s 空格\S 除了空格\b 单词边界\B 除了单词边界8. 开头和结尾^ 表示字符串的开头$ 表示字符串的结尾/^a$/ 表示完全匹配*//*量词匹配前面一个字符，若有多个字符用(){m} 有连续m个{m,} 至少m个{m,n} 有连续m-n个+ 一个以上，相当于{1,}* 任意数量的a? 0-1次 {0,1}*/
</script>

个人总结：

通过这次考试测试，清楚了自己的弱点在哪里，确实没有好好的为考试做准备，平时老师布置的作业，我能够完成是因为，我查阅了资料还有看了笔记，并没有再次背着代码敲出来，也就是没有完全掌握到知识点，在最开的前端知识还是有所掌握，从JS开始知识点就开始有点不太顺畅，自己也没并没有整理到位，所以后没有空余的时间还是需要自己多敲代码，背着也要敲一遍，必须把知识学习到位，才能说完全的掌握到了知识。

面试题

1、javascript基本数据类型？

number string boolean null object undefined

2、浅谈javascript中变量和函数声明的提升？

变量声明：

1.只有使用var声明的变量才会发生提升

2.使用let ,const创建的变量不会发生提升

3.变量的赋值也不会发生提升

4.没有使用var声明直接使用的伪全局对象，由于声明过程所以也不能提升

函数声明：

  1. 只用使用函数声明的方式声明的函数才会提升

  1. 使用函数表达式的匿名函数不存在提升，因为函数名是变量形式，所以只存在变量提升

3.JS数组和对象的遍历方式，以及几种方式的比较？

each遍历

4.javascript实现继承的三种方法？

原型继承 冒充继承 组合继承

5.说说对JSON的理解？

将对象转化为一个字符串，这个字符串就称为JSON字符串

6.你知道jQuery中的事件冒泡吗，它是怎么执行的，何如来停止冒泡事件？

事件冒泡是从里面的往外面开始触发的，就是点击子节点，会向上触发父节点，祖先节点的点击事件

停止冒泡：

  1. 使用stopstopPropagation；

  1. 使用retrun false;

  1. 使用阻止默认行为preventDefault

华清远见-重庆中心-前端技术总结/知识点梳理/个人总结/面试题解析相关推荐

  1. 华清远见—重庆中心——JAVA高级阶段知识点梳理

    华清远见-重庆中心--JAVA高级阶段知识点梳理 String字符串 String是一个类,属于数据类型中的引用类型.Java中所有使用""引起来的内容都是属于这个类的实例,称为字 ...

  2. 华清远见-重庆中心-前端技术阶段

    花了两周多的时间对HTML.CSS.JavaScript和jQuery进行系统性的学习,学习完了后打算花一点时间对之前学习的内容进行复习巩固与总结,划分熟悉程度进行不同程度的梳理,顺便记录. 复习 H ...

  3. 华清远见-重庆中心-javaweb后端阶段知识点梳理

    JavaWeb 使用Java开发Web服务的技术,统称为JavaWeb. B/S与C/S模式 B/S:Browser/Server 浏览器/服务器模式 用户只需要一个浏览器即可访问服务器 C/S:Cl ...

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

    华清远见-重庆中心-前端阶段技术总结 HTML Hyper Text Markup Language 超文本标记语言 超文本:超级文本/超链接文本,超越了文本的限制,如多媒体文件.超链接等. 标记:也 ...

  5. 华清远见-重庆中心-前端阶段技术总结/个人总结

    目录 认识前端 客户端/服务器 模式 使用方法 特点 浏览器/服务器 模式 使用方法 特点 学习前端的重要性 浏览器 作用 主流/推荐的浏览器 前端学习网站 推荐编写软件 HTML部分 定义 标签 标 ...

  6. 华清远见重庆中心—JavaWeb技术总结/个人总结

    JavaWeb 网站 用户通过浏览器访问某个域名或ip后,浏览到的综合性页面. 实际是发布在服务器上的一个应用程序,通过浏览器访问. 网页 网站中的某张页面 静态页面:所有人看到的内容都一样 动态页面 ...

  7. 华清远见重庆中心-面向对象技术总结/个人总结

    Java中标识符的命名规则 标识符 类名.方法名.变量名统称为标识符 标识符命名规范 帕斯卡命名法 所有单词首字母大写 如Employee.ClassName.StudentInfomation 驼峰 ...

  8. 华清远见-重庆中心-JavaWeb技术总结

    JavaWeb 使用Java开发Web服务的技术,统称为JavaWeb. B/S与C/S模式 B/S:Browser/Server 浏览器/服务器模式 用户只需要一个浏览器即可访问服务器 C/S:Cl ...

  9. 华清远见-重庆中心-前端阶段总结

    HTML Hyper Text Markup Language 超文本标记语言 超文本:超级文本/超链接文本,超越了文本的限制,如多媒体文件.超链接等 标记:也可以称为标签,用<>括起来的 ...

最新文章

  1. ct检查床的移动精度是指_炮塔铣床、数控铣床导轨平行度（扭曲）的检验
  2. mysql网页后台_MySQL(PHP网站后台数据库)
  3. mysql行级锁作用_Mysql事务及行级锁的理解
  4. 现代浏览器工作原理（一）
  5. 1.2 边缘检测示例
  6. Filecoin官方提案FIP0013 添加批量提交ProveCommitSector以减少拥塞
  7. linux显示指定目录容量,linux 查看指定目录的容量大小，系统目录容量大小
  8. 电赛练习之旋转倒立摆
  9. Vue中用到jeDate日期控件,Vue对象中的值滞后，总是滞后当前选择的值
  10. 微信小程序 - WXML语法与HTML比较
  11. React小书中得CommentList的需求实现
  12. vs中opencv配置
  13. 轻松斩断信息安全黑手！就这？
  14. chrome新版安装flash控件失败解决方法
  15. 【论文笔记】Adversarial Multi-task Learning for Text Classification
  16. html复习第七天 京东首页布局完成
  17. 【测试开发】一个5年测试开发的成长经验，大学毕业就开启他的职业生涯......
  18. 网易2017春招 魔力手环 矩阵快速幂
  19. 十三、JavaScript ajax请求
  20. AndroidX TabLayout使用、扩展及解析All In One，跪了

热门文章

  1. html无序列表斜体,CSS 有序或者无序列表的前面的标记 list-style-type 属性
  2. IOS之如何把自己开发的App安装到越狱的手机
  3. 如何用Python绘制圣诞树（极其鬼畜视频） - B站小视频
  4. AntV G6自定义树状图TreeGraph
  5. QT Creater 使用
  6. 【权益接口】各大平台卡卷直充接口
  7. “金“ “⾦“ 这两个竟然不是同一个字！！！！
  8. html怎么插动态图片不显示不出来,layer插件layer.photos()动态插入的图片无法正常显示...
  9. excel组合汇总_Excel汇总20131125
  10. 【分布式应用】ELFK集群部署（Filebeat+ELK）Logstash的过滤模块