华清远见-重庆中心-前端技术总结/知识点梳理/个人总结

最新推荐文章于 2024-07-16 20:50:21 发布

zouzoulin

最新推荐文章于 2024-07-16 20:50:21 发布

阅读量166

点赞数

文章标签： html 前端 html5

本文链接：https://blog.csdn.net/zouzoulin/article/details/128855798

版权

2. CSS（层叠样式表 Cascading Style Sheets）

1.HTML（超文本标记语言）

Herper Text Markup Language
超文本：有视频，音频，图片等，超越文本
标记语言：有一套标签

1.1 标签的介绍

标签是由<>包裹起来的对象
标签分为单标签和双标签
标签的属性：

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

作用：是为标签增加一些附加的信息

-注意：

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

特殊的属性只有属性名

标签的关系：

        <html>
            <head></head>
            <body></body>
        </html>

包含关系：html包含head和body

并列关系：head和body的关系

1.1.1 标题标签

h标签
语义：内容的标题
特点：文字加粗，独占一行
等级：h1~h6

    <h1>冬夜读书示子聿（yu`）</h1>
    <h3>宋-陆游</h3>
    古人学问无遗力，少壮工夫老始成。
    纸上得来终觉浅，绝知此事要躬行。

1.1.2 段落标签

p标签
语义：段落标签
特点：独占一行,段与段之间有间隔，文本一段里的文本会随着浏览器窗口变化，自动换行

1.1.3 换行标签

<br>标签
语义：换行
特点：换行后，行与行之间没有间隔

1.1.4 转义字符

页面常见的字符
常见的：
空格：  小于符号：< 大于符号：> 版权符号：©

1.1.5文本格式化标签

b标签（blod）和strong标签

- 语义：加粗

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

i标签（italic）和em标签（emphasized）

- 语义：斜体

s标签（strikethrough）和del标签（delete）

- 语义：删除

u标签（underline）和ins标签（insert text）

- 语义：下划线

sup标签

- 语义：上标

sub标签

- 语义：下标

<body>
    <b>我是粗体</b>
    <strong>我也是粗体</strong>
    <br>
    <br>
    <i>我是斜体</i>
    <em>我也是斜体</em>
    <br>
    <br>
    <s>我被删除了</s>
    <del>我也被删除了</del>
    <br>
    <br>
    <u>我是下划线</u>
    <ins>我也是下划线</ins>
    <br>
    <br>
    x<sup>2</sup>
    <br>
    <br>
    H<sub>2</sub>O

</body>

1.1.6 标签的类型

块级标签（元素）

特点：每一个块级元素都独占一行

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

注意： p元素里不可以有嵌套块元素

常见的块级元素：

div h1 p ...

常用于页面布局

行内块元素

特点：不会独占一行。一行里面可以有多个元素

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

常见的：

< b> < i > < u > < del > < span >

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

1.1.7 图片标签

img标签
语义：图像
属性：
- src图片路径
- alt 定义无法正常显示图片的文字时，通常就是图片内容的简要说明，比如这个loge，图片
- title 定义鼠标悬停在图片时显示的文字
- height 定义图片的高度
- width 定义图片的宽度
路径：
- 相当于电子路线，通过它可以找到计算机或网络中的资源
- 相对路径

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

访问的方式

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

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

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

绝对路径

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

1.1.8 列表

有序列表

- <ol></ol> order list

- 类表项 <li></li>

- 通过ol 的 type 属性修改序列号样式

1 阿拉伯数字

A/a 英文字母（大写/小写）

I/i 罗马数字（大写/小写）

- ol 标签里只能放li标签

无序列表

- <ul></ul> unorder list

- 类表项 <li></li>

- 通过 ul 的 type 属性修改序列号样式

disc 实心圆（默认）

square 实心方块

circle 空心圆

- ul 标签里只能放li标签

自定义列表

- <dl></dl> defintion list

- 列表项

dt 术语/小标题

dd 对术语的说明

- dl 标签里只能放dt和dd标签

1.1.9 超链接

a标签

- href 设置超链接的资源地址

- target 目标设置跳转的方式

_blank 在新窗口打开页面

_self 默认在原窗口打开页面，将自己覆盖掉

_parent 在父页面打开

指定在哪个iframe页面打开

_top

锚点

-设置方法

a标签的href= "#锚点的id属性值"

锚点元素设置id属性

1.1.10 表格

table标签

- 必要的标签

<table> 定义一个表格

<tr> table row 表格的一行

<td> table data cell 表格一行中的一个单元格列

<th> table head cell 表格标题行的一格加粗效果

- 属性

border 设置边框线值是数字控制的是线的粗细值越大外边框越粗如果border为0 内外边框都会消失

cellpadding 设置单元格的内边距属性值：像素百分比

cellspacing 设置单元格与单元格之间的距离属性值：像素百分比

align 设置整个表格在页面中的位置 center left right

width 设置整个表格的宽度

heigh 设置整个表格的高度

- 合并单元格

-属性-

rowspan="2" 合并两行

colspan="2" 合并两列

-步骤-

1.确定目标单元格——在哪个td上写属性

2.判断合并列，还是行——写rowspan or colspan

3.计算合并单元格数量——属性值

4.删除被占用的单元格

1.1.11 表单

表单域 form标签

- 属性

action 设置提交路径

用来指定接收处理表单数据的服务器url地址

name 设置表单域的名字，用于区分同一页面多个表单。

method 设置提交方式

get

表单的数据会显示在地址栏中，有需要保密的数据不能用get

post

表单的数据不会显示在地址栏中，而是封装在表单体里

表单元素

- 输入框 input

- 按钮 button

- 复选框 checkbox

1.1.12 input标签

input 标签

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

text 文本框

password 密码框

submit 提交按钮把表单的数据提交到服务器

radio 单选按钮

checkbox 复选框

reset 重置按钮

date 日期选择器

datetime-local 日期时间选择器

file 选择文件

hidden 隐藏框

- name 属性

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

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

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

- value 属性

设置表单元素的值

- 其他属性

placeholder 设置输入框的提示信息

require 设置必填项

readonly 设置只读

label标签：

- 用于为input设置标注

1.1.13 select标签

select标签

- 定义下拉列表

- option 标签设置选项

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

-name 属性和 value属性

1.1.14 textarea 标签

teatarea

- 多行文本框

1.1.15 inframe标签

iframe 标签

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

- src 默认显示的页面

frameborder 设置内联框架的边框

实现内联框架页面的切换

1.给iframe设置name属性

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

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

2. CSS（层叠样式表 Cascading Style Sheets）

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

代码规范

- 语法

选择器 {

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

属性名: 属性值;

}

代码风格

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

选择器和括号之间有空格

冒号和属性值之间有空格

2.1 CSS 的引用方式

1.行内样式（内联，内联样式）

- 位置

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

- 特点

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

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

开发时尽量少用

2.内部样式

- 位置

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

- 特点

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

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

3.外部样式

- 位置

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

- 特点

可以跨页面使用

内部样式和外部样式的优先级由位置决定（使用前面的样式）

2.2 属性

2.2.1 字体属性

fount-family

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

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

- 计算机中的字体

桌面右键->个性化-> 字体

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

- 通用字体

关键字，不加引号

sans-serif 无衬线字体，平滑

monospace 等线

fangsong 仿宋

font-size

- 设置字体的大小

- 单位

像素 px

em 字体大小的倍数

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

font-weight

- 定义字体的粗细

- 属性值

-关键字

normal 默认粗细

bold 加粗

bolder 比父元素更粗一些

- 数值 1~900

400 normal

font-style

- 设置字体样式

- 属性值

italic 倾斜

normal 默认竖直

font

- 复合设置字体样式

- 属性顺序

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

2.2.2 文本属性

line-height

- 设置行高

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

- 属性值

像素px

数字

text-indent

- 设置文本缩进

- 属性值

像素px，em

text-align

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

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

- 属性值

center 居中

left 靠左

right 靠右

color

- 设置文本颜色

- 属性值

- 关键字

red blue green

- RGB

十进制表示

rgb(red, green, blue)

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

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

rgba(148, 58, 58, 0.384);

最后一个值是不透明度，取值0-1

十六进制表示

#rrggbb

取值范围：0-ff

#fff 白色

text-transform

- 设置文本大小写转换

- 属性值

uppercase 全大写

lowercase 全小写

capitalize 首字母大写

text-decoration-line

- 设置装饰线的位置

overline 在文本上方

underline 在文本下方

none 没有装饰线

text-decoration-style

- 设置装饰线的样式

solid 默认的样式

dashed 虚线

wavy 波浪线

text-decoration-color

- 设置装饰线的颜色

text-decoration

- 复合写法

text-decoration: wavy orange overline;

- 取消下划线样式

text-decoration: none;

2.3 选择器

2.3.1 标签选择器

选择器的作用

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

2.为这些元素设置样式

标签选择器

- 语法

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

- 特点

会找到body下所有同名的标签

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

2.3.2 id选择器

id选择器

- 使用方法

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

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

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

2.3.3 类选择器

class 类选择器

-使用方法

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

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

- 和id选择器的区别

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

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

- 开发时通常用类选择器

2.3.4 通配符选择器

通配符选择器

- 语法

*{}

- 特点

1.选中body中所有的元素

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

2.3.5 后代选择器

后代选择器

- 语法

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

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

- 特点

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

2.3.6 子代选择器

子代选择器

- 语法

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

- 特点

b是a的儿子

2.3.7 并级选择器

- 语法

选择器1，选择器2 {}

- 特点

同时选中1和2

2.3.8 伪类选择器

伪类

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

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

- 语法

标签名：伪类 {}

p:first-child

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

- 选中p的父元素下，为第一个子元素的p标签

不区分类型必须是父元素中的第一个元素，如果第一个元素不是p，那么也不会生效

p:first-of-type

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

- 区分类型，所有p元素中相对第一

2.3.9 属性选择器

[标签的属性名] 选中带有这个属性名的标签

[属性名='属性值']选中带有这个属性名且属性值相同

2.3.10 伪元素选择器

- 开头有::的关键字,早期也用：

before 在元素内前面添加

after 在元素内后面添加

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

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

content :"文本"

content: url(图片地址);

2.4 CSS的三大特性

1.继承

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

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

常见可以继承的样式

color , font- , text- , line- , height ...

常见不可继承的样式

background-color- ，布局相关的width，height

2.优先级（权重）

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

- 什么时候产生冲突

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

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

选择器优先级（简单权重）规范权重

!important 无限大无限大慎用！！！

行内样式style 1000 (1,0,0,0)

id选择器 100 (0 1 0 0)

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

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

继承 0 （随便一个选择器选择就会被改变）

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

算法案例：

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

div p {} 1+1=2

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

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

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

.three {} 10 被应用

3.规范权重比较

(4,3,2,1) 从左往右分为四档

.three (0,0,1,0) 类选择器,在第二档加1

#three (0,1,0,0) id选择器,在第三档加1

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

从左往右，第四档有1的比较没1的优先级高

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

(1,0,0)

(1,1,0)

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

3.层叠

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

2.5 文档流

-网页是一个层叠的结构

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

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

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

块元素

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

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

-设置width和height有效

行内元素

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

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

-设置width和height无效

行内块元素

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

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

-设置width和height有效

2.6 元素的显示模式

display设置元素的显示模式

block 以块元素的特点显示

inline-block 行内块元素（横着显示）

inline 行内元素

none 让文件从文档流中消失

2.7 盒模型

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

组成部分

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

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

- border 元素的外边框

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

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

margin 是透明的不可见

2.7.1 padding 内边距

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.7.2 border 边框

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

样式： solid 实线

double 双实线

dashed 虚线

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

border-bottom 下边框

border-left 左边框

border-right 右边框

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

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

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

2..7.3 margin外边框

外边距

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

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

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

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

行内元素和行内块元素，设置他为正值，会是他右边的元素向右移动

margin 符合写法和padding一样

2.8 块元素

2.8.1块元素的水平布局

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

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

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

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

哪个几个属性值：

width (默认值auto) margin-left margin-right

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

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

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

2.设置margin: 任意值 auto;

2.8.2 块元素的垂直问题

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

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

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

处理溢出的方法：overflow

属性值：

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

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

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

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

2.8.3 外边距的折叠

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

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

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

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

解决问题：添加间隔

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

border: 2px solid red;

- 父元素添加 overflow

overflow: hidden;

2.9 行内元素的盒模型

margin-top和margin-bottom无效

上下边框和上下内边距不会挤开其他元素

2.9.1 盒子的尺寸计算

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

border-box

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

会根据设置的margin，padding，border，自动调整内容，整个盒子200px

content-box

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

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

2.10 浮动

float 浮动

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

- 属性值

none 元素不浮动（默认）

left 左浮动

right 右浮动

特点：

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

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

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

浮动元素不会盖住文字，而是文字会自动环绕浮动元素

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

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

2.元素会水平排列

3.设置宽高weith和height有效

总之，变成了行内块元素！！

2.10.1浮动带来的问题

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

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

——高度塌陷问题

解决方法

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

2.父元素设置overflow

2.10.2 清除浮动

clear 清除浮动

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

- right 清除右侧浮动元素的影响（）

注意：同时设置clear：left和right时，谁在下面谁应用

- both 清除左右两侧所有浮动中，较大的那一侧的影响

原理：

设置清除浮动之后会有透明盒子占据原来的位置，使得下面元素不会移上来

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

2.11 定位

定位 position

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

- 属性值

absolute 绝对定位

relative 相对定位

fixed 固定定位

2.11.1 相对定位

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

-特点

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

2.开启相对定位的元素并没有脱离文档流，他下面的元素不会移上去占他的位置

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

3.开启相对定位的元素是相对谁定位呢？

相当于当前元素原本在文档流中的的位置来进行移动（定位）

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

position: relative;

top: 0px;

left: 0px;

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

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

left 设置元素和定位位置左边的距离设置正值，元素右移动；负值，元素向左移动

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

bottom 设置下面的距离正值元素向上移动；负值，元素向下移动

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

left和right只选其一

2.11.2 绝对定位

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

- 特点

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

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

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

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

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

2.11.3 固定定位

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

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

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

3. JS

3.1 JS 的简介

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 Mode）浏览器对象模型

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

3.2 JS 的编写位置

1.写在标签的事件中

比如鼠标点击事件 onclick

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

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

也可以放在body标签前

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

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

3.3 JS的输入输出语句和代码规范

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

        /*
            多行注释，不可以嵌套
        */
        //    单行注释 ctrl+/
        // JS中严格区分大小写
        Document.write("111") //报错
        //JS每条语句应该有分号结尾
        //有时候，一行有一条语句时，分号可以省略
    </script>

3.4 JS 的变量和常量

变量：

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

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

变量的声明和赋值

声明

var 变量名;

let 变量名;

赋值

变量名 = 值;

声明的同时赋值

var 变量名 = 值;

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

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

修改变量的值

变量名 = 值;

注意：

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

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

var a;
        let b;
        // a = 100;
        b = 200;
        alert(a);
        // alert(b);
        var c = 300;
        // alert(c);
        var d = 400, e = 400;
        // alert(d);
        // alert(e);
        d = 600;
        alert(d);
        var a; //允许重复声明a
        // let b;

常量：

- 不可以被改变的量

- 声明常量并赋值

const 变量名 = 值;

注意

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

 const PI = 3.14;
        // 快捷方式 直接打log弹出方法
        console.log(PI);
        PI = 3.1415;
        console.log(PI);

3.5 标识符的命名规则

标识符

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

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

命名规则

1.标识符只能包含字母，数字，下划线，$ ,并且不能用数字开头，不建议使用中文

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

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

例如：alert ，document

4. 命名规范

通常使用驼峰命名

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

minlength - > minLength

类名使用大驼峰

- 每个首字母大写

minlength - >MinLength

常量名全大写

MIN_LENGTH

3.6 数据类型

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

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

原始值

1. Number 数值

2. BingInt 大整数

3. String 字符串

4. Boolean 布尔值

5. Null 空值

6. Undefined 未定义

7. Symbol 符号

对象

Object

3.6.1 number

Number 数值

- 整数,小数

- 特殊值

Infinity 无限大的数字无穷

NaN （Not a Number）非法数

判断变量的数据类型

typeof 变量名

 var a = 123;
        console.log(a);
        console.log(typeof a); //number

        a = 32.1;
        console.log(typeof a);

        a = 123 / 0;
        console.log(a);
        console.log(typeof a);//number

        a = "a" / 2;
        console.log(a);
        console.log(typeof a);//number

3.6.2 String

String 字符串

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

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

- 转义字符 \

\"" 转义双引号

\\ 转义斜杠

\n 换行符

模板字符串

- 用``表示

- 特性

- 支持换行

- 支持嵌入变量

`${变量名}`

        let str = '111';
        str = '这是一个双引号""';
        console.log(str);
        console.log(typeof str); //string
        let str1 = "222";
        str1 = "这是一个单引号''";
        console.log(str1);
        console.log(typeof str1); //string
        str1 = "这是一个双引号\"\""
        console.log(str1);
        console.log(typeof str1); //string
        str1 = "单斜杠\\"
        console.log(str1);

        let str2 = `模板字符串`;
        str = 111;
        str2 = `模板字${str}符串`
        // console.log(str2);
        console.log("str2:" + str2);
        console.log(`str2:${str2}`);

        console.log(typeof str2);//string

3.6.3 Boolean

Boolean 布尔值

- true false

        let bool = true;
        console.log(bool);
        console.log(typeof bool);

3.6.4 null和undefined

Null 空类型空值

含义：对象类型的空引用（控指针）

没有办法使用typeof判断类型

Undefined 未定义类型

变量声明但未赋值，则这个变量的值就是Undefined

         let a = null;
        console.log(a);
        console.log(typeof a);//object

        let b;
        console.log(b);//Undefined

3.6.5类型的转换

1.boolean转换为其他类型

- 转换为数值

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

- 转换为字符串

String()

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

2.Number 转换为其他类型

- 转换为布尔

Boolean(变量)

0 - > false

非0 - > true

- 转换为字符串

String()

3.String 转换为其他类型

- 转换为布尔

Boolean()

空字符串"" ->false 其他值为true

- 转换为数值

Number()

"111" -> 111

不是一个数字的 -> NaN

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

+"数字"

<script>
        /*
            1.boolean转换为其他类型
                - 转换为数值
                    Number() true转换为1  false转换为0
                - 转换为字符串
                    String()
                    非字符+'' 可以隐式转换为字符串
        */
        //转换为数值
        //true
        let bool = true;
        console.log(bool);
        console.log(typeof bool);
        bool = Number(bool);
        console.log(bool);//1
        console.log(typeof bool);//number
        //false
        bool = false;
        console.log(bool);
        console.log(typeof bool);
        bool = Number(bool);
        console.log(bool);//1
        console.log(typeof bool);//number
        //转换为字符串
        let bool2 = true;
        bool2 = String(bool2);
        console.log(bool2);  //true 字符串
        console.log(typeof bool2); //string
        //隐式转换字符串
        bool2 = bool2 + '';
        console.log(bool2);  //true 字符串
        console.log(typeof bool2); //string

        /*
            2.Number 转换为其他类型
                    - 转换为布尔
                        Boolean(变量)
                        0    - > false
                        非0  - > true
                    - 转换为字符串
                        String()
        */
        let a = 1;
        a = Boolean(a);
        console.log(a); //true
        console.log(typeof a);
        a = -2;
        a = Boolean(a);
        console.log(a);
        console.log(typeof a);//true
        a = 0
        a = Boolean(a);
        console.log(a);
        console.log(typeof a); //false
        /*
            3.String 转换为其他类型
                - 转换为布尔
                    Boolean()
                    空字符串"" ->false   其他值为true
                - 转换为数值
                    Number()
                    "111"  -> 111
                    不是一个数字的 -> NaN

                    在数字类型的字符串前面添加正好（+），可以隐式的将这个字符串转换为数字
                        +"数字"

        */
        let str = "hhh";
        // str = Boolean(str);
        // console.log(str); //true
        // console.log(typeof str);

        // str = "";
        // str = Boolean(str);
        // console.log(str); //false
        // console.log(typeof str);

        str = "hhh";
        str = Number(str);
        console.log(str);
        str = "111";
        str = Number(str);
        console.log(str);

        str = +"6e+2";
        console.log(str);

    </script>

3.7 运算符

3.7.1 算数运算符

算数运算符(双目)

+ 1.加法运算

2.字符串拼接

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

- 减法运算

/ 除法运算

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

* 乘法运算

% 取余运算

求余数

注意：

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

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

        let a = 1.2, b = 2.3;
        console.log(a + b); //3.5
        a = "111"
        console.log(a + b);//jjj2.3

        a = "2";
        b = 1;
        let c = a - b;
        console.log(c);

        a = "hhh";
        b = 1;
        c = a - b;
        console.log(c);

        a = 10
        b = 3
        console.log(a / b);
        console.log(a % b);

3.7.2 关系运算符

关系运算符：

> 大于

< 小于

>= 大于等于

<= 小于等于

== 相等 (只是判断值是否相等，不会检查类型)

=== 全等 (判断值以及他的数据类型是否完全相等)

!= 不等 (只是判断值是否不相等，不会检查类型)

!== 全不等 (判断值以及他的数据类型是否完全不相等)

3.7.3 逻辑运算符

1. && 与

- 表达式1 && 表达式2

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

只要有一个为false ，结果为fales

短路与

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

2. || 或

- 表达式1 || 表达式2

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

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

短路或

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

3. ! 非

- !表达式

- 取反

3.7.4 赋值运算符

赋值运算符：=

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

运算顺序：从右向左

        let a = 5;
        // 2 = 1; //错误 Invalid left-hand side in assignment 非法左值
        let b = a; //将a的值赋值给b
        console.log(b);

        a += b;  //a=a+b
        console.log(a);

        a = b = 2 + 3;

3.7.5 自增自减运算符

a++

res = a++ // res = a原本的值

a = a + 1

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

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

++a

res = ++a // res = a+1

a = a + 1

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

++a 这个表达式的返回值=a已经+1后的新值

a-- 先使用后减1

--a 先减1后使用

        let a = 1;
        console.log("a原本的值：" + a);
        let result = a++;
        console.log("执行了a++后a的值：" + a + " " + "a++的返回值:" + result);

        let c = 1;
        console.log("c原本的值：" + c);
        let res = ++c;
        console.log("执行了++c后c的值：" + c + " " + "++c的返回值:" + res);
        // let b = 3
        // //7=3   + 4
        // b = b++ + b;
        // console.log(b);

        // b = 3
        // //8= 4  + 4
        // b = ++b + b;
        // console.log(b);

3.7.6 条件运算符

条件运算符（三目运算符：？）

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

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

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

console.log(3 > 2 ? "ok" : "no");

3.7.7 运算符的优先级

1.()

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

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

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

5.逻辑运算符 && ||

6.条件运算符

7.赋值运算符

3.8 条件语句

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语句

switch (key) {

case value:

//代码块

break ;

case value:

//代码块

break;

default:

//代码块

break;

3.9 循环语句

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

循环的三要素

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

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

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

while

do-while

for

3.9.1 while循环

while 语句

初始化表达式

while(循环条件表达式){

//循环体

其他语句

变量更新表达式

}

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

        let i = 0;
        while (i < 3) {
            console.log(i); //0 1 2
            i++; // 1 2 3
        }

3.9.2 do-while循环

do while 语句

初始化表达式：

do {

//循环体

其他操作

更新表示式

} while (condition);

执行流程：

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

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

do while 和while的区别：

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

        let a = 0;
        do {
            console.log(a);
            a++;
        } while (a < 3);

3.9.3 for循环

for循环

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

4.循环体

}

执行流程：

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

2.执行循环条件表达式，判断循环是否执行

3.如果为true ，执行循环体

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

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

注意：

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

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

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

在for循环中用var声明的变量，在for循环内部和外部都能进行访问

        for (let i = 0; i < 3; i++) {
            console.log(i);
        }
        // console.log("在for循环中用var声明的i：" + i);// i is not defined ：i未定义

        for (var j = 0; j < 3; j++) {
            console.log(j);
        }
        console.log("在for循环中用var声明的j：" + j);

3.9.4 循环的嵌套

外层循环执行一次，内层循环执行一周

外层循环控制图形的高，内层循环控制宽度

          for (var i = 1; i <= 9; i++) {
            for (var j = 1; j <= i; j++) {
                document.write(j + '*' + i + '=' + j * i + "&nbsp;&nbsp;");
            }
            document.write("<br>");

        }

3.10 数组

数组

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

创建数组的方式

1.通过new关键字

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

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

赋值：

数组名[索引] = 值; 索引从0开始

注意：

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

2.通过[]创建

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

注意：

赋值的时候，最好连续赋值，否则浪费空间，并且不方便遍历元素

3.声明的同时赋值

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

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

获取数组的长度

数组名.length

注意：

这个属性是可以更改值的，如果我们给它赋值，数组的长度会发生改变

判断是否是数组

Array.isArray(a),是返回true，不是返回false

数组的遍历

for循环

for (let i = 0; i < 数组名.length; i++) {

console.log(数组名[i]);

}

for-in语句

for(index in list){

//list[index]

}

        var list = new Array(5)
        list[0] = 12;
        list[2] = "hello";
        list[3] = true;
        list[4] = undefined;
        console.log(list);//[12, 空, 'hello', true, undefined]
        list[6] = 111;
        console.log(list[6]);//如果赋值时超出索引，会自动扩容
        console.log(list[4]);
        console.log(list[1]);

        var list1 = []
        list1[2] = 5555;
        console.log(list1);

        var list2 = new Array("hello", 111, 222);
        var list3 = ["hello", 222, 333]
        console.log(list2);
        console.log(list3);

        list3.length = 2//改变了数组的长度
        console.log(list3);
        console.log("list3的长度：", list3.length);

        let a = 222;
        console.log("是数组吗：", Array.isArray(a));//false

        for (let i = 0; i < list3.length; i++) {
            console.log(list3[i]);
        }
        for (i in list2) {
            console.log(list2[i]);
        }

3.11 Math

Math 是JS的一个内置对象，它拥有一些数学中的常数属性和数学函数方法，比如pai三角函数.

这些属性和方法可以直接通过Math这个对象调用

适用于Number类型

        console.log(Math.PI) //3.141592653589793
        console.log(Math.E); //2.718281828459045
        //求绝对值
        console.log(Math.abs(-5)); //5
        //求x的y次幂Math.pow(x, y)
        console.log(Math.pow(2, 3)); //2的三次方 ， 8
        //求两个数之间的最大值
        console.log(Math.max(3, 5)); //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)); //4的平方根
        //立方根
        console.log(Math.cbrt(64));
        //生成随机数[0,1)
        console.log(Math.random());
        console.log(Math.random() * 100);
        //随机生成[3,10)
        console.log(Math.random() * 7 + 3);
        //生成[a,b)范围内的随机数
        // Math.random() * Math.abs(b - a) + Math.min(a, b)

3.12 对象及创建

对象

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

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

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

创建方式

1.使用大括号{}直接创建

let 对象名 = {

属性名：属性值,

方法名(){

//代码块

}

属性和方法的调用

对象名.属性名

对象名.方法()

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

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

2.使用new object创建

添加属性

对象名.属性值 = 属性值

master.name = "小妖怪"

属性的其他写法

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

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

            let nobody = {
            name: "小妖怪",
            age: 24,
            ["***@***"]: "加密属性",
            family: {
                a: "妈妈",
                b: "妹妹",
                c: "弟弟"
            },
            brush() {
                console.log(`${this.name}在刷锅`);
            },
            shout() {
                console.log("不要过来，这里有危险");
            },
            dream() {
                console.log("走出浪浪山");
            }

        }
        console.log(nobody["***@***"]);
        console.log(nobody.name);
        nobody.dream();
        nobody.brush()
        console.log(nobody);

        let master = new Object();
        master.name = "小妖怪"
        master.age = 18
        console.log(master);

3.13 函数及创建

函数：是对一段程序的封装

作用

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

创建方式

1.函数声明方法

function 函数名(参数列表){

//代码块

}

调用函数：函数名(实参列表)

返回值：

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

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

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

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

2.函数的表达式

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

调用函数：变量名(实参列表)

3.自调用函数

定义之后立即执行的函数

定义步骤：

1.先打上两个小括号

2.在第一个小括号里声明函数

3.第二个小括号代表调用函数，因该在里面填入实参

       function sayHello() {
            console.log("hello");

        }
        sayHello();

        /*
            有参函数
        */
        function add(x, y) {
            let result = x + y;
            return result;
            console.log("我在return后面");//不会执行
        }
        console.log(add(1, 2));

        //sub变量 ，用于存放减法函数
        let sub = function (x, y) {
            return x - y;
        }
        console.log(sub(3, 1));  //调用函数

        /*
            定义函数时，可以给形式参数设置默认值
            如果调用函数时，没有提供参数，形式参数就会使用默认值
        */

        let sub1 = function (x = 1, y = 1) {
            return x - y;
        }
        console.log(sub1());  //调用函数

        /*
            箭头函数
            (形参列表)=>{
                //代码块
            }
            只有一个形参的时候可以神略小括号
        */
        let multiply = (x, y) => {
            return x * y;
        }
        console.log(multiply(2, 3));
        let say = str => {
            return str;
        }
        console.log(say("哈哈哈"));
        //只有一个参数，只有一个代码
        let say2 = str => str;
        console.log(say("嘻嘻嘻"));
 /*
            自调用函数
                定义之后立即执行的函数
            定义步骤
                1.先打上两个小括号
                2.在第一个小括号里声明函数
                3.第二个小括号代表调用函数，因该在里面填入实参

        */

        //add(2,3) , 相当于之间将整个函数作为变量名来调用函数
        let res = ((x, y) => x + y)(2, 3)//调用函数了
        res = (
            function (x, y) {
                return x + y;

            }
        )(3, 5)
        console.log(res); //函数返回的结果：5

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

形式参数（形参）

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

实际参数（实参）

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

形参和实参的关系：

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

x是值传参类型，y是引用传参类型

值传参类型

将x变量中的值，直接赋值给函数内的形参，所以函数执行完成之后，x本身不变

类比：相当于把自己的文档（实参）复制一份交给老师（形参），老师所作出的修改没办法修改自己电脑上的那份文件。

number ,boolean, string是值传递

引用传参类型

将y中的引用地址赋值给函数类的形参，所以通过函数内形参对y中的对象所作的操作，对于y来说也有影响

类比：把你的公开的腾讯文档的链接（引用）发给老师（形参），老师对文档的修改，自己的文档会受到影响

object ，function是引用传递

            function modify(a, b) {
            //a = "hhh"  // 调用函数时第一个实参传给a得值，值是hhh
            //b = y 这个变量中存放的对象的地址
            a = 'xxx';
            b.name = 'zbj';
            b.age = '20';
            console.log("这是函数内修改后的值：");
            console.log(a);
            console.log(b);
        }
        //x是值类型传参，y是引用类型传参
        let x = 'hhh';
        let y = { name: 'swk', age: '18' };

        modify(x, y)

        console.log("这是函数调用之后的值：");
        console.log(x);
        console.log(y);

3.15 变量的作用域

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

作用域：

全局作用域 Global

块作用域 block

函数作用域 Function

3.15.1全局作用域

全局作用域 Global

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

- 直接在script标签中编写的代码都位于全局作用域中

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

全局变量分为两种

1.(普通)全局变量

直接在函数外声明的变量

2.(自动)全局变量

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

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

        let a = 5
        console.log(a);
        if (a > 4) {
            console.log(a);
        }
        b = 6
        console.log(b);
        console.log("window.b:", window.b);
        window.b

3.15.2 块作用域

- 代码块：{}里面的内容

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

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

- 在块内部用let定义的变量，只能在块内部使用

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

-具有块作用域只能在块内部方位

        {
            // 一个代码块
            let c = 555;
            var c2 = 666;
            {
                console.log("这是一个块里的c:", c);
                console.log("这是一个块里的c2:", c2);
                let inner = 777;
            }
            // console.log("inner", inner);

        }
        // console.log("这是一个块外的c:",c);  //报错，c没有被定义
        console.log("这是一个块外的c2:", c2);

3.15.3 函数作用域

函数作用域

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

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

        function fn1() {
            let d = 5;
            var d1 = 6;
            console.log(d);
            console.log(d1);
            d2 = 7;
        }
        fn1();
        // console.log(d); //d is not defined
        // console.log(d1); //d1 is not defined
        console.log(d2); //d2 is not defined

3.15.4 作用域链

作用域链

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

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

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

简单来说：

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

        {
            let a = 5;
            let b = 8;
            {
                let b = 6;
                console.log(a + b);
            }
        }

3.16 JSON字符串

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

注意：JSON的属性名必须由双引号引起来

JSON.stringify（obj）将obj转换成json字符串

JSON.parse（json）将json字符串转换为对象

         // json字符串
        let jsonstr = `{"name": "swk","age": 18}`
        console.log("jsonstr:", jsonstr);

        // 将obj转换为json字符串的方法
        let json = JSON.stringify(obj)
        console.log(json);
        // 将json字符串转换为对象
        obj = JSON.parse(json)
        console.log(obj);

4. DOM和BOM

4.1 DOM 简介

DOM Document Object Model 文档对象模型

Document 文档这里指整个网页html

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

div有div的对象，input有input对象，属性，文本都有对应的对象，对他们进行操作时，都是通过他们的对象来完成的

Model 模型模型是指文档中各个对象之间的关系，比如父子关系，兄弟关系（DOM树）

4.2 获取节点对象

：nth-of-type(1)

找到父元素下，所有同类型标签中的第一个

同类型标签 p标签/div标签/en标签/ul标签他们之间分别是不同的类型。

排序：在同类标签中排序，他占第一位

先将父元素中的标签分类，再将每个类型的标签都排序，然后分别获取同类型标签中的第一个

:nth-child(1)

找到父元素下, 所有子元素中的第一位(不分类)

排序: 将所有子元素都进行排序

.box:nth-of-type(1)

.box 和 :nth-of-type(1) 的交集

同时满足下列条件,才会选中元素

1.标签带有.box类名

2.这个标签必须是其父元素下,同类型标签中第一个元素

body div 中间有空格后代选择器

会选中 body下所有div 包括儿子,孙子...

一般用于缩小选择范围

body :nth-child(1)

会选中body下第一个子元素

div.box.test 中间没有空格交集选择器

必须同时满足几个选择器的条件

没有空格 =》交集同时满足下面3个条件

1.标签有.box这个类

2.标签有.test这个类

3.对应标签在它的同类标签中是第一个

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

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

querySelector（"选择器名称"）

document.querySelector（"选择器"）

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

注意：返回第一个元素

        var pObj = document.querySelector(".p1")//通过类名获取
        console.log("pObj", pObj);
        var divObj = document.querySelector("div")//通过标签名获取
        //注意:querySelector获取是第一个div
        console.log(divObj);
        var Obj = document.querySelector("#box1")//通过id选择器获取
        console.log("Obj", Obj);

获取和修改元素中的文本

获取：元素对象.innerHTML

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

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

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

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

        console.log(divObj.innerHTML);
        // divObj.innerHTML = "hei,我被innerHTML修改了"
        //后加入innerHTML会覆盖前面的内容
        // divObj.innerHTML = "<p>哈哈哈哈,我是加入的p标签</p>"
        divObj.textContent = "<p>哈哈哈哈,我是加入的p标签</p>"

querySelectorAll（'选择器名'）

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

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

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

数组名[索引]

        var boxArr = document.querySelectorAll('.box')
        console.log(boxArr);//NodeList(4)
        boxArr[0].innerHTML = "我被改变了"
        boxArr[3].innerHTML = "我也被改变了"

        /*
            通过标签名获取元素，返回数组
        */
        let a = document.getElementsByTagName('div')
        console.log(a);

        /*注意：getElementById通过id名来获取元素，不需要加#
        */
        console.log(document.getElementById('box1'));

        /*
            getElementsByClassName是通过class属性中的类名获取元素，返回数组
            只填类的名字，不要加.
        */
        console.log(document.getElementsByClassName('test'));

4.3 事件绑定

事件

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

比如：当用户点点击鼠标是，就修改背景颜色。当用户点击enter是就进入网站

总之：

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

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

如何为一个元素绑定事件

1.用元素的addEventListener（'事件名称'，事件处理函数）方法绑定

特别注意：

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

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

步骤：

1.获取元素对象

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

3.给元素对象添加事件监听，也就是调用addEventListener方法

解绑事件：

元素对象.removeEventListener('要解绑的事件','这个事件对应的要解绑的处理函数')

注意：

addEventListener可以为一个元素绑定多个事件，

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

   <body>
    <button class="btn1">打印触发的事件对象</button>
    <button class="btn2">解绑事件</button>
    <button onclick="onClick();fn2()">点我</button>
     
<script>
 var btnObj = document.getElementsByClassName('btn1')[0]
        console.log(btnObj);//getElementsByClassName返回元素集合，所以要用索引来获取其中的某一个元素
        //声明一个事件处理函数
        function btn1Checked(event) {
            // event 是触发的事件对象
            console.log(event);
            // this 关键字代表被添加该事件处理函数的dom对象
            console.log(this);
            alert("btn1被点击啦")

        }
        function btn1Checked2(event) {
            console.log(event);
            alert("btn1再次被点击啦")
        }
        //给btn1添加事件监听器
        btnObj.addEventListener('click', btn1Checked)
        //为click事件绑定第二个函数
        btnObj.addEventListener('click', btn1Checked2)

        //解绑事件
        //点击btn2这个按钮，就执行为btn1解绑这个功能
        //1.btn2 绑定一个点击事件 
        //2.这个点击事件对应的事件处理函数的功能：为btn1解绑
        var btn2Obj = document.getElementsByClassName('btn2')[0]
        function btn2Checked() {
            alert("btn2被点击了")
            //为btn1解绑
            btnObj.removeEventListener('click', btn1Checked)
        }
        btn2Obj.addEventListener('mouseover', btn2Checked);
</script>
</body>

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

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

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

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

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

解绑：

btnObj.onmouseout = null

        btnObj.onmouseout = function () {
            alert("鼠标移开btn1了")
        }

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

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

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

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

         function onClick() {
            alert("你点我了")
        }
        function fn2() {
            alert("你点我了222")
        }

4.4 常用的鼠标监听

<body>
    <div>这是div</div>
    <input type="text" value="1">
    <script>
        var inputObj = document.getElementsByTagName('input')[0]
        console.log(inputObj.value);
        console.log(inputObj.type);


        var divObj = document.getElementsByTagName('div')[0]
        console.log(divObj);//返回元素集合
        /*
            鼠标移入  mouseover
                    onmouseover
        */
        function fn1() {
            //this添加这个监听的dom对象
            this.style.width = '200px';
            this.style.height = '200px';
            this.style.backgroundColor = 'red';
        }
        divObj.addEventListener('mouseover', fn1)

        /*
            鼠标移出 mouseleave
                    onmouseleave
        */
        function fn2() {
            //this添加这个监听的dom对象
            this.style.width = 100 + 'px';
            this.style.height = '100px';
            this.style.backgroundColor = 'blue';
        }
        divObj.addEventListener('mouseleave', fn2)
    </script>
</body>

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

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

获取父元素的所有节点

元素对象.childNodes

获取父元素的所有子元素

元素对象.children

返回都是数组：想要获取某一个子元素，用索引访问

firstElementChild 获取第一个子元素

firstChild 获取第一个子节点

lastElementChild 最后一个子元素

lastChild 最后一个节点

子元素获取父元素

子元素对象.parentElement

获取父节点 parentNode

获取兄弟元素

nextElementSibling 获取下一个兄弟元素

nextSibling 下一个兄弟节点

previousElementSibling 上一个兄弟元素

previousSibling 上一个兄弟节点

<body>
    <ul class="list">
        <li>
            选项1
        </li>
        <li>
            选项2
        </li>
        <li>
            <em>我是em</em>
            选项3
            <input type="button" value="按钮">
            按钮后的数据
            <br>
        </li>
        <li>
            选项4
        </li>
    </ul>

    <script>
        let list = document.querySelector('.list')
        /*
            Node节点：文本、元素、属性、换行、空格
            获取父元素的所有节点
                元素对象.childNodes
            获取父元素的所有子元素
                元素对象.children
            返回都数组
            想要获取某一个子元素，用索引访问
        */
        console.log(list.childNodes);//NodeList(9) [text, li, text, li, text, li, text, li, text]
        console.log(list.children[2]);//HTMLCollection(4) [li, li, li, li]
        /*
            firstElementChild 获取第一个子元素
            firstChild 获取第一个子节点
            lastElementChild 最后一个子元素
            lastChild 最后一个节点
        */
        console.log(list.firstElementChild);
        console.log(list.firstChild);

        /*
            子元素获取父元素
                子元素对象.parentElement
            获取父节点 parentNode

        */
        let inputObj = document.getElementsByTagName('input')[0]
        console.log(inputObj.parentElement);
        console.log(inputObj.parentNode);

        /*
            获取兄弟元素
                nextElementSibling 获取下一个兄弟元素
                nextSibling 下一个兄弟节点
                previousElementSibling 上一个兄弟元素
                previousSibling 上一个兄弟节点

        */
        console.log(inputObj.nextElementSibling);
        console.log(inputObj.nextSibling);
        console.log(inputObj.previousElementSibling);
        console.log(inputObj.previousSibling);
    </script>

</body>

4.6 增删改节点

创建元素并添加属性

document.createElement（'标签名'）

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

        let newElement = document.createElement('div')
        newElement.className = 'box2'

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

1.获取父元素对象： body 直接用document.body

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

        // document.body.appendChild(newElement)
        document.body.append(newElement)

insertBefore 向父元素下的指定节点前添加元素

父元素对象.insertBefore(插入的元素, 在谁之前插入)

remove() 删除当前元素

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

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

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

4.7 操作标签的属性

标签的属性：

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

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

2.setAttribute('属性名','属性值') 为元素设置属性

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

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

 //获取name=username的标签
        let inputObj = document.querySelector('[name=username]')
        // console.log(inputObj);
        // console.log(inputObj.name);
        inputObj.value = ''

        let btnObj = document.getElementsByTagName('button')[0]
        btnObj.addEventListener('click', () => {
            // console.log(btnObj.getAttribute('name'));
            btnObj.setAttribute('disabled', 'disabled');
            btnObj.textContent = '已发送验证码'
            //实现按钮上显示倒计时10S的效果，怎么办
            var count = 5;

            var timerId = setInterval(() => {
                btnObj.innerText = count + 'S';
                console.log(count)
                count--
                if (count <= -1) {
                    clearInterval(timerId)
                    btnObj.innerText = '点击发送验证码';
                    btnObj.removeAttribute('disabled');
                }
            }, 1000);


        })
        btnObj.removeAttribute('name')

4.8 操作标签的样式

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

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

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

注意：样式名如font-size，修改为小驼峰 fontSize

2.通过添加类名修改样式

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

3.通过classList属性操作类名

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

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

        /*
            1.通过style属性来修改标签的样式
                元素对象.style.样式名 = 样式值
                这种方式是修改的内联样式
                注意：样式名 如font-size，修改为小驼峰 fontSize

        */
        box1.style.color = 'white'
        box1.style.fontSize = '30px';

        /*
            2.通过添加类名修改样式
                元素对象.className += ' 类名' //注意类名前要加空格
        */
        box2.className += ' active'

        /*
            3.通过classList属性操作类名
                添加：元素对象.classList.add('类名1','类名2')
                删除：元素对象.classList.remove('类名1','类名2')
        */

        box1.classList.add('active', 'test')
        box1.classList.remove('test')

4.9 定时器

定时器

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

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

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

停止定时器：

clearTimeout(timerId)

        let timerId = setTimeout(() => {
            console.log('我在3s之后执行');
        }, 3000);
        console.log('我执行了');

        //清除定时器
        clearTimeout(timerId)

2.循环计时器

setInterval(要执行的函数,每次循环间隔的时间)

停止计时器

clearInterval(计时器编号)

        let timerId2 = setInterval(() => {
            console.log('我在1s之后执行');
        }, 1000);
        console.log('我也执行了');
        clearInterval(timerId2)

4.10 文档的加载

js默认情况下是顺序执行，所以将script编写在body前面时，获取节点对象是未定义控制文档的加载

<script>
        /*
            js默认情况下是顺序执行，所以将script编写在body前面时，获取节点对象是未定义
            控制文档的加载
            
        */
        //可以使js在DOM渲染完成后，再加载回调函数
        window.onload = function () {
            let btn = document.getElementsByTagName('button')[0]
            console.log(btn);
        }

        window.addEventListener('load', function () {
            let btn = document.getElementsByTagName('button')[0]
            console.log(btn);
        })
    </script>
</head>

<body>
    <button>点我</button>
</body>

4.11 BOM简介

BOM 浏览器对象模型

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

- 常见的BOM对象

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

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

Location 浏览器的地址栏信息

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

screen 屏幕的信息

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

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

4.12 location

<body>
    <button>点击跳转到百度</button>
    <script>
        let btn = document.querySelector('button')
        btn.onclick = ()=>{
            //跳转到百度
            //location代表浏览器地址，当给window.location.href赋值时，就跳转到赋值的地址
            window.location.href = "https://www.baidu.com/?tn=91038561_hao_pg"
        }
    </script>
</body>

4.13 history

<body>
    <script>
        //history代表浏览器的地址，通过它可以控制浏览器前进和后退
        window.history.go(1)
    </script>

5. jQuery

5.1 jQuery的引入

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

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

未压缩版 .js

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

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

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

通过$获取jQuery对象

$('选择器名称')

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

这个数组元素就是DOM对象

访问方式

1.索引

2.get方法

dom对象转换为jQuery对象

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

$(domObj)

 //js中获取dom对象
        let boxObj = document.getElementsByClassName('box')[0]
        

        //通过$获取jQuery对象
        let $boxs = $('.box')
        console.log($boxs);//jQuery对象   》 数组（类似数组，可以用索引访问里面的数组元素）
        
        //获取jQuery对象中的DOM对象
        console.log($boxs[0]);
        console.log($boxs[1]);
        //通过get获取DOM对象
        console.log($boxs.get(0));

        //dom对象转换为jQuery对象
        let $box = $(boxObj)
        console.log($box)

        //eq(index)函数  返回index索引对应dom元素的jquery对象
        console.log($boxs.eq(0));

5.2 设置样式

<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>
        .box {
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="box" style="height: 150px;background-color: aqua;"></div>
    <div class="box" style="width: 150px;"></div>

    <script src="./js/jquery-3.6.3.js"></script>
    <script>

        let $boxs = $('div')

        //css函数读取样式    读取jquery对象中的第一个dom元素的属性值
        console.log($boxs.css('width'));
        console.log($boxs.css('height'));
        console.log($boxs.css('border'));
        //可以传入一个样式名数组
        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/css/
        
    </script>
</body>
</html>

5.3 操作类

<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>
        .box {
            width: 200px;
            height: 200px;
        }
        .active {
            background-color: aquamarine;
        }
        .box2 {
            border: 2px solid brown;
        }
    </style>
</head>
<body>
    <div class="box active "></div>
    <div class="box active box3"></div>

    <script src="./js/jquery-3.6.3.js"></script>
    <script>
        /*
            当我们修改jQuery对象时，它会自动修改jQuery对象中的所有元素
            这个称为jQuery的隐式迭代
        */
        let $boxs = $('.box')

        //添加类
        $boxs.addClass('box2')

        //删除类
        $boxs.removeClass('active')

        //开关类  有就删除，没有就添加
        $boxs.toggleClass('box3')

        //判断是否存在某个类
        console.log($boxs.hasClass('box3'));
        
    </script>
</body>
</html>

5.4 设置属性

<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>
         .box {
            width: 200px;
            height: 200px;
        }
        .active {
            background-color: aquamarine;
        }
        .box2 {
            border: 2px solid brown;
        }
    </style>
</head>
<body>
    <div class="box active " my-box="hhhh"></div>
    <div class="box active box3" my-box="hhhh"></div>
    <input type="text" value="111" disabled>

    <script src="./js/jquery-3.6.3.js"></script>
    <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 //设置为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>
</body>
</html>

5.5 常用的set和get

<body>
    <div class="box1">123</div>
    <div class="box2">123</div>
    <div class="box3" style="background-color: antiquewhite;">123</div>
    <input type="text" value="123">

    <script src="./js/jquery-3.6.3.min.js"></script>
    <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($('.box').width());
        $('.box3').width('200')//设置宽
        $('.box3').height('200')//设置高
        
        /* val() 获取和设置value值
        */
        console.log($('input').val());
        $('input').val('333')
    </script>
</body>

5.6 事件绑定和解绑

jQuery对象绑定事件，直接调用事件名称对应的函数

参数就是事件处理函数

注意1.jquery对象是一个dom元素集合，为jquery对象绑定事件时，会自动给里面的所有dom对象绑定上事件

不需要用for循环再遍历它单独为每个dom添加事件，除非你只想给某一个添加事件

<body>
    <div class="box">123</div>
    <div class="box"></div>
    

    <script src="./js/jquery-3.6.3.js"></script>
    <script>
        let $box = $('.box')
        /*
            jQuery对象绑定事件，直接调用事件名称对应的函数
            参数就是事件处理函数

            注意1.jquery对象是一个dom元素集合，为jquery对象绑定事件时，会自动给里面的所有dom对象绑定上事件
            不需要用for循环再遍历它单独为每个dom添加事件，除非你只想给某一个添加事件
        */
        $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>
</body>

5.7 常用的表单事件

<body>
    <input type="text" name="" id="" placeholder="请输入">

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

5.8 each 遍历

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

    <script src="./js/jquery-3.6.3.js"></script>
    <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>
</body>

5.9 通过DOM树查找节点

<body>
    <table class="b">
        <tr>
            <th>姓名</th>
            <th class="a">地址</th>
            <th>电话</th>
        </tr>
        <tr>
            <td class="d">lusy</td>
            <td>冰岛</td>
            <td class="c">123</td>
        </tr>
    </table>

    <script src="./js/jquery-3.6.3.js"></script>
    <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($('.b').children());
        
        
    </script>

5.10 增删节点

<script src="./js/jquery-3.6.3.js"></script>
    <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 = $('body>.box:nth-child(2)')
        //在一个元素的后面添加另一个元素
        // $box2.after($box1)
        //在一个元素前面添加
        // $box2.before($box1)

        //删除当前元素   谁调用了remove()，谁就被删除了
        $box2.remove()

    </script>

5.11 页面加载事件

<body>
    <script src="./js/jquery-3.6.3.js"></script>
    <script>
        //ready() 准备就绪
        //当整个网页文件加载完成时，ready()这个函数才执行
        $(document).ready(function(){
            //这里写我们自己的脚本
            console.log("load end");
        })

        //可以简化为
        $(function(){
            //这里写我们自己的脚本
            console.log("load end");
        })
    </script>
</body>

5.12 过滤选择器

5.12.1 子元素过滤器

seletor:nth-child(n)

1.找到当前元素的父元素下，第n个孩子

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

如果匹配就选择它，应用样式，

如果不匹配就不选择它，这个伪类选择器失效（什么也没选中）

当前元素：所有匹配seletor选择器的元素

按照子元素在文档中出现的位置排序，从1开始

seletor：标签名、类名、id名、*

:nth-child(n) 等同于 *:nth-child(n)

seletor:nth-of-type(n)

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

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

按照同名标签在文档中出现的位置排序，序号从1开始

5.12.2 索引过滤器

selector:eq(index)

在匹配的集合中选择索引值为index的元素，索引从0开始

匹配的集合：$('seletor')获取到的dom元素集合

这个jquery扩展出来的选择器，性能没有原生的css选择器好

5.12.3 表单过滤器

:checked

匹配所有勾选的元素

只适用于复选框和单选按钮下拉菜单:selected

 function count(){
                //打印有几个input被选中了
                console.log($('input:checked').length);
            }
            $('input[type="checkbox"]').on('click',count)

            function count1(){
                //打印有几个input被选中了
                let $radio = $('input:checked')
                $radio.each(function(index,ele){
                    console.log(index,ele);
                    console.log($(ele).val());
                })

                // for(let i = 0;i<$radio.length;i++){
                //     console.log($radio.eq(i).val());
                    
                // }
            }
            $('input[type="radio"]').on('click',count1)