-
第十一周内容回顾
第十一周内容回顾
文章目录
1、前端入门
1.1、前端简介
前端
与用户直接打交道得操作界面都可以称之为是前端后端
不直接与用户打交道得内部真正执行核心业务逻辑得代码程序前端学习
真正得前端工程师也需要学习很长得时间 我们作为后端工程师对前端目前只做最核心得了解 大致七天得学习前端核心基础
- HTML
- 网页得骨架
- CSS
- 网页的 样式
- JS
- 网页的动态
1.2、HTTP超文本传输协议
四大特性
- 基于请求响应
- 基于TCP/IP之上作用于应用层的协议
- 无状态
- 无/短连接
1.2.1、数据格式
请求数据格式
- 请求首行（请求方式：有很多种 协议名称及版本）
- 请求头（一大堆K：V键值对）
- 换行
- 请求体（携带一些铭感的数据 不是所有的请求都有请求体）
响应数据格式
- 响应首行（响应状态码）
- 响应头（一大堆K：V键值对）
- 换行
- 响应体（一般情况下就是 浏览器）
1.3、响应状态码
利用数字来表示一些复杂的情况说明（类似于暗号）
**1XX：**服务端已经接收到你的请求正在处理 你可以继续提交或者等待
**2XX：**200 ok服务端给出了相应的响应
**3XX：**重定向
**4XX：**403请求不符合条件 404请求资源不存在
**5XX：**服务端内部错误我们在公司还会自己定义更多的状态码
一般情况下从10000开始2、HTML
2.1、HTML简介
超文本标记语言
是所有游览器展示的页面必备的！！浏览器展示的界面 我们也称之为HTML页面 存储HTML语言的文件后缀一般是 .html
HTML 没有任何逻辑 所见即所得
HTML 注释语法
- 1
HTML 文件结构
<html> 所有的代码都必须写在html标签内部 <head>head> head内的数据一般都不是给用户看的 <body>body> body内的数据就是浏览器展示给用户看的 html>- 1
- 2
- 3
- 4
HTML 标签分类
HTML 代码是不讲究缩进的 我们只是习惯了python的缩进语法
2.2、head内常见标签
标签 标签功能 </code></td><td>控制网页小标题</td></tr><tr><td><code><stytle></style></code></td><td>内部支持编写css控制标签样式的</td></tr><tr><td><code><link></code></td><td>引入外部css文件</td></tr><tr><td><code><script></script></code></td><td>内部支持编写JS代码 还可以通过src属性引入外部JS文件</td></tr><tr><td><code><meta></code></td><td>通过内部属性的不同 可以有很多功能</td></tr></tbody></table></div> <h4><a name="t9"></a><a id="23body_110"></a>2.3、body内基本标签</h4> <div class="table-box"><table><thead><tr><th>标签字符</th><th>功能</th></tr></thead><tbody><tr><td><code>h1~h6</code></td><td>标题标签</td></tr><tr><td><code><p></p></code></td><td>段落标签</td></tr><tr><td><code><hr></code></td><td>分割线</td></tr><tr><td><code><br></code></td><td>换行</td></tr><tr><td><code><u></u></code></td><td>下划线</td></tr><tr><td><code><s></s></code></td><td>删除线</td></tr><tr><td><code><b></b></code></td><td>加粗</td></tr></tbody></table></div> <p><strong>注意：有很多样式 可能存在很多种标签可以实现</strong></p> <p><strong>块儿级标签 与行内 标签</strong><br> 块儿级标签：一块标签独占一行</p> <p>行内标签：内部文本多大自身就占多大</p> <h4><a name="t10"></a><a id="24body_129"></a>2.4、body内基本符号</h4> <div class="table-box"><table><thead><tr><th>字符</th><th>功能</th></tr></thead><tbody><tr><td><code> </code></td><td>空格</td></tr><tr><td><code>gt</code></td><td>大于号</td></tr><tr><td><code>lt</code></td><td>小于号</td></tr><tr><td><code>amp</code></td><td>&</td></tr><tr><td><code>yen</code></td><td>￥</td></tr><tr><td><code>reg</code></td><td>注册</td></tr><tr><td><code>copy</code></td><td>版权</td></tr></tbody></table></div> <h4><a name="t11"></a><a id="25body_141"></a>2.5、body内布局标签</h4> <p><strong>div</strong><br> 块儿级标签</p> <p><strong>spen</strong><br> 行内标签</p> <p><strong>块儿级标签是可以通过CSS调整为不独占一行</strong><br> <strong>标签之间很多时候可以嵌套</strong></p> <ul><li> <p>块儿级可以嵌套任何类型标签</p> <p>p标签虽然是块儿级标签 但是不能嵌套块儿级标签</p> <p>行内标签只能嵌套行内标签</p> </li></ul> <h4><a name="t12"></a><a id="26body_158"></a>2.6、body内常见标签</h4> <p><strong>a标签<code><a></a></code></strong></p> <p><strong>链接标签</strong></p> <ul><li><strong>herf可以填写网址 点击自动跳转</strong> <ul><li>herf 还可以填写其他标签的id值 实现锚点功能</li></ul> </li><li><strong>target 可以控制是否新建页面跳转</strong> <ul><li><code>_self</code>在原来页面跳转</li><li><code>_blank</code>新起一个页面跳转</li></ul> </li></ul> <p><strong>img 标签</strong><br> <strong>图片标签</strong></p> <ul><li>src 填写图片地址（网络地址 本地地址）</li><li>title 鼠标悬浮在图片上回提示信息</li><li>alt图片加载失败提示信息</li><li>width 调整图片高度 <ul><li>上诉两给调整一个 另一个就会等比缩放</li></ul> </li></ul> <h4><a name="t13"></a><a id="27_179"></a>2.7、标签两个重大属性</h4> <p><strong>下面的两个属性都是用来快速定位 需要操作的标签</strong><br> <strong>id属性（一对一管理）</strong><br> 类似于身份证号 再同一个html页面上id值不能重复</p> <p><strong>classs属性（批量管理）</strong><br> 类似于分组 多个标签可以拥有相同的class值</p> <h4><a name="t14"></a><a id="28_188"></a>2.8、列表标签</h4> <p><strong>无序列表</strong></p> <pre data-index="2" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> 可以添加参数 type="disc 实心默认 circle空心圆 square实心方块 nonne无样式" <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>python<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>mysql<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>httml<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre> <ul><li>页面上有规则的横向或者竖向的多个元素几乎使用的都是无序列表</li></ul> <p><strong>有序列表</strong></p> <pre data-index="3" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">start</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> #第一个参数 为序号样式 第二个起始点 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>第一个<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>第二个<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>第三个<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre> <p><strong>表格标签</strong></p> <pre data-index="4" class="set-code-hide prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span> #表格 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>thead</span><span class="token punctuation">></span></span> 字段 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> 添加一行 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>id<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> 字段一 th相比td 粗一点 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>name<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>pwd<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>thead</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tbody</span><span class="token punctuation">></span></span> 数据 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> 添加一行数据 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>001<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>kk<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>123<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tbody</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li></ul></pre> <h3><a name="t15"></a><a id="3form__233"></a>3、form 表单标签</h3> <p><strong>能够 获取用户（输入 选择 上传）的数据并发送给后端服务器</strong><br> <code>form</code>表单 能完成上述操作的不仅仅只有它</p> <pre data-index="5" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <p><code>action</code> 属性<br> 用于控制数据的提交地址 不写的话就是朝当前页面所在地址提交<br> <code>method</code> 控制数据提交的方式</p> <p><strong>用户输入 账号密码</strong></p> <pre data-index="6" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>账号：<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>密码：<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre> <p><strong>用户日期选择</strong></p> <pre data-index="7" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>birthday:<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>date<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <p><strong>用户 邮箱填写 自动识别 @</strong></p> <pre data-index="8" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>emil:<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre> <p><strong>单选（性别）</strong></p> <pre data-index="9" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>hoby: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hoby<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 唱 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hoby<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 跳 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hoby<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 篮球 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre> <p><strong>上传文件 单个或多个</strong></p> <pre data-index="10" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;">上传单个文件 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>file: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>file<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> 上传多个文件 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>file: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>file<span class="token punctuation">"</span></span> <span class="token attr-name">multiple</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li></ul></pre> <p><strong>下拉单选</strong></p> <pre data-index="11" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>province: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>上海<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>浙江<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>北京<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li></ul></pre> <p><strong>下拉多选</strong></p> <pre data-index="12" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>GF: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">multiple</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>kk<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>ming<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>hong<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li></ul></pre> <p><strong>大内容文本框</strong></p> <pre data-index="13" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>简介 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>30<span class="token punctuation">"</span></span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textarea</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <p><strong>提交数据</strong></p> <pre data-index="14" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>用户注册<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <p><strong>重置输入的内容</strong></p> <pre data-index="15" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>reset<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>重置内容<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <p><strong>无功能按钮</strong><br> 可以后期自己添加功能</p> <pre data-index="16" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>无功能按钮<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <h4><a name="t16"></a><a id="31_341"></a>3.1、获取用户输入的标签两大重要属性</h4> <p><strong>name 属性</strong><br> 类似于字典的键</p> <p><strong>value 属性</strong><br> 类似于字典的值</p> <p>form表单在朝后端发送得到得数据时候 标签必须要有name 否则不会发送该标签得值</p> <p><strong>获取用户输入得input 标签理论上需要label配合使用</strong></p> <pre data-index="17" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>username<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 这一步 可以让 输入框前得 注释能够被点击 账号：<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">mame</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>username<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>账号<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>username<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> <p><strong>获取用户输入input标签 也可以添加背景提示</strong><br> <code>placeholder</code></p> <pre data-index="18" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pwd<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>密码：<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">tyep</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>密码<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pwd<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <p><strong>获取的用户输入的标签如果不是让用户自己写而是选择 那么标签需要自己写value</strong></p> <pre data-index="19" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gender<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>male<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>男 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gender<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>female<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>女 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hoby<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>basketball<span class="token punctuation">"</span></span> <span class="token attr-name">checked</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checked<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>篮球 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>province<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sh<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>上海<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li></ul></pre> <p><strong>针对radio 和 checkbox 可以默认选中</strong><br> <code>checked="checked"</code> 如果属性名和属性值 相等 那么可以简写成checked</p> <pre data-index="20" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gender<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>male<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>男 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gender<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>female<span class="token punctuation">"</span></span> <span class="token attr-name">checked</span><span class="token punctuation">></span></span>女 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> <p>针对option标签也可以默认选中<br> <code>selected</code></p> <h3><a name="t17"></a><a id="4CSS_399"></a>4、CSS层叠样式表</h3> <p><strong>调整标签样式</strong><br> <strong>语法结构</strong></p> <pre data-index="21" class="set-code-show prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">选择器</span> <span class="token punctuation">{<!-- --></span> 属性名1<span class="token punctuation">;</span>属性值1<span class="token punctuation">;</span> 属性名2；属性值2； <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> <p>**注释语法 **</p> <pre data-index="22" class="set-code-show prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token comment">/*注释内容*/</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <p><strong>三种编写CSS的方式</strong></p> <ol><li>head 中 style标签内部直接编写（学习阶段使用 方便）</li><li>head 中link标签引入外部css文件（最正规）</li><li>直接在标签内部通过style属性编写（不推荐）</li></ol> <h4><a name="t18"></a><a id="41CSS_423"></a>4.1、CSS选择器</h4> <h4><a name="t19"></a><a id="42CSS_425"></a>4.2、CSS基本选择器</h4> <p><strong>选择标签</strong><br> 直接编写标签名来查找标签</p> <pre data-index="23" class="set-code-show prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token comment">/*查找所有的div标签 并将内部的文本颜色变为绿色*/</span> <span class="token selector">div</span><span class="token punctuation">{<!-- --></span> <span class="token property">color</span><span class="token punctuation">:</span>green<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> <p><strong>类选择器</strong><br> 通过编写class值来查找标签</p> <pre data-index="24" class="set-code-show prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token comment">/*朝朝所有class属性中含有c1的标签 并将内部的文本颜色变为红色*/</span> <span class="token selector">.c1</span><span class="token punctuation">{<!-- --></span> <span class="token property">color</span><span class="token punctuation">:</span>red<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> <p><strong>id选择器</strong><br> 通过编写 id的值来精确查找标签</p> <pre data-index="25" class="set-code-show prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token comment">/*查找id值是d1的标签 并将内部的文本颜色 改为清色*/</span> <span class="token selector">#d1</span> <span class="token punctuation">{<!-- --></span> <span class="token property">color</span><span class="token punctuation">:</span>aquamarine<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> <p><strong>通用选择器</strong><br> 查找所有的标签</p> <pre data-index="26" class="set-code-show prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">查找所有的标签 并将内部的文本颜色改为蓝色 *</span><span class="token punctuation">{<!-- --></span> <span class="token property">color</span><span class="token punctuation">:</span>bulue<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> <h4><a name="t20"></a><a id="43css_467"></a>4.3、css组合选择器</h4> <p><strong>后代选择器</strong><br> 两个选择器之间空格隔开 查找前面选择器获取到的标签内所有符号 空格后面选择器要求标签</p> <pre data-index="27" class="set-code-show prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token comment">/*查找div 标签内部所有的 span （后代）*/</span> <span class="token selector">#d1 span</span> <span class="token punctuation">{<!-- --></span> <span class="token property">color</span><span class="token punctuation">:</span>blue<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> <p><strong>儿子选择器</strong><br> 两个选择器之间大于号隔开 查找前面选择器获取到的标签 内部第一层级符合大于号后面选择器要求的标签</p> <pre data-index="28" class="set-code-show prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token comment">/*朝div标签内所有的儿子span*/</span> <span class="token selector">#d1>span</span><span class="token punctuation">{<!-- --></span> <span class="token property">color</span><span class="token punctuation">:</span>orange <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> <p><strong>毗邻选择器</strong><br> 两个选择器 加号隔开 查找前面选择器取到标签下方 紧挨着的一个 符合加号后面选择器要求的标签</p> <pre data-index="29" class="set-code-show prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">#d1+span</span> <span class="token punctuation">{<!-- --></span> <span class="token property">color</span><span class="token punctuation">:</span>red<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <p><strong>弟弟选择器</strong><br> 两个选择器 波浪隔开 查找 前面选择器取到的标签 下方所有的符合波浪后面选择器 要求的标签</p> <pre data-index="30" class="set-code-show prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">#d1~span</span> <span class="token punctuation">{<!-- --></span> <span class="token property">color</span><span class="token punctuation">:</span>green<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <h4><a name="t21"></a><a id="44CSS_507"></a>4.4CSS属性选择器</h4> <p><strong>所有标签除了有自己默认的属性之外 还可以拥有自定义的任意属性</strong></p> <ul><li>默认属性：<code>id</code> <code>class</code></li><li>自定义属性：<code>x=1</code> <code>y=2</code></li></ul> <p><strong>查找属性名含有name的标签</strong></p> <pre data-index="31" class="set-code-show prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">[name]</span><span class="token punctuation">{<!-- --></span> <span class="token property">background-color</span><span class="token punctuation">:</span>red<span class="token punctuation">;</span> <span class="token comment">/*背景色设为 红色*/</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <p><strong>查找属性名含有那么 并且值是username 的标签</strong></p> <pre data-index="32" class="set-code-show prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">[name='username']</span><span class="token punctuation">{<!-- --></span> <span class="token property">background-color</span><span class="token punctuation">:</span>blue<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <p><strong>查找input标签并且 属性名含有name值是username的</strong></p> <pre data-index="33" class="set-code-show prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">input[name='username']</span><span class="token punctuation">{<!-- --></span><span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <h4><a name="t22"></a><a id="45_536"></a>4.5、选择器之分组与嵌套</h4> <p><strong>当多个选择器找到的标签需要调整相同的样式 那么可以合并</strong></p> <pre data-index="34" class="set-code-show prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">div,p,span</span> <span class="token punctuation">{<!-- --></span> <span class="token property">color</span><span class="token punctuation">:</span>red<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <p><strong>并且合并的选择器彼此不干扰 也没有类型限制</strong></p> <pre data-index="35" class="set-code-show prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">#d1,c1,span</span> <span class="token punctuation">{<!-- --></span> <span class="token property">color</span><span class="token punctuation">:</span>red<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <p><strong>还可以在选择器基础上添加额外的选择 使得查找更精确</strong></p> <pre data-index="36" class="set-code-show prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">span.c1</span> <span class="token punctuation">{<!-- --></span> <span class="token property">color</span><span class="token punctuation">:</span>red<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">div#d1</span> <span class="token punctuation">{<!-- --></span> <span class="token property">color</span><span class="token punctuation">:</span>blue<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li></ul></pre> <h4><a name="t23"></a><a id="46CSS_566"></a>4.6、CSS选择器之伪类选择器</h4> <p><strong>a标签 默认的颜色 有两种 紫色跟蓝色</strong><br> 紫色：谅解地址一家被点过了<br> 蓝色：链接地址从来没有点击过</p> <pre data-index="37" class="set-code-show prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token comment">/*鼠标悬浮上去 之后样式改变 适用于所有含有文本的标签*/</span> <span class="token selector">a:hover</span> <span class="token punctuation">{<!-- --></span> <span class="token property">color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span> <span class="token punctuation">}</span> a <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre> <h4><a name="t24"></a><a id="47CSS___580"></a>4.7、CSS选择器 之伪元素 选择器</h4> <p><strong>通过CSS代码来操作标签的文本内容</strong></p> <pre data-index="38" class="set-code-hide prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token comment">/*将文本第一个字 修改样式*/</span> <span class="token selector">p:first-letter</span> <span class="token punctuation">{<!-- --></span> <span class="token property">font-size</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/*在文本前面 添加文本 内容 且该内容 不会被选中*/</span> <span class="token selector">p:before</span> <span class="token punctuation">{<!-- --></span> <span class="token property">content</span><span class="token punctuation">:</span><span class="token string">"哈哈哈哈!"</span><span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span>red<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* 在文本后面添加 内容 且 该文本不会被选中*/</span> <span class="token selector">p:after</span> <span class="token punctuation">{<!-- --></span> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"哦哦哦"</span><span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> aqua<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li></ul></pre> <ul><li>为元素选择可以用在解决标签浮动所带来的负面影响 也可以用来做数据的防爬</li></ul> <h4><a name="t25"></a><a id="48_606"></a>4.8、选择器优先级</h4> <p><strong>当多个选择器查找到相同的标签 改不同的样式 那么标签该听谁的</strong></p> <ol><li> <p>选择器相同 引入位置不同</p> <p>就近原则 覆盖上面 内容</p> </li><li> <p>选择器不同的情况</p> <p>行内 > id选择器 > 类选择器 > 标签选择器</p> <p><code>越精确 优先级越高</code></p> </li></ol> <p>**强制修改标签样式的操作 !important **</p> <pre data-index="39" class="set-code-show prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">div</span> <span class="token punctuation">{<!-- --></span> <span class="token property">color</span><span class="token punctuation">:</span>red !import <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <h4><a name="t26"></a><a id="49_628"></a>4.9、字体样式</h4> <p><strong>width</strong> 属性可以为元素设置宽度<br> <strong>height</strong> 属性可以为元素设置高度<br> 块级标签才能设置宽度，行内标签的宽度由内容来决定</p> <pre data-index="40" class="set-code-hide prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token comment">/*设置 字体大小*/</span> <span class="token selector">p</span> <span class="token punctuation">{<!-- --></span> font=<span class="token property">size</span><span class="token punctuation">:</span>30px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/*设置 字体更细*/</span> <span class="token selector">p</span> <span class="token punctuation">{<!-- --></span> <span class="token property">font-weight</span><span class="token punctuation">:</span>lighter<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/*设置字体颜色样式*/</span> <span class="token selector">p</span> <span class="token punctuation">{<!-- --></span> <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token comment">/*字体颜色*/</span> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>61<span class="token punctuation">,</span> 25<span class="token punctuation">,</span> 21<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">/*三基色 设定颜色*/</span> <span class="token property">color</span><span class="token punctuation">:</span> #153d2f<span class="token punctuation">;</span> <span class="token comment">/*十六进制设置颜色*/</span> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>252<span class="token punctuation">,</span> 190<span class="token punctuation">,</span> 6<span class="token punctuation">,</span> 0.84<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">/*设置颜色透明度（最后一位数）*/</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li></ul></pre> <p><strong>设置文本居中</strong></p> <pre data-index="41" class="set-code-show prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">p</span> <span class="token punctuation">{<!-- --></span> <span class="token property">text-align</span><span class="token punctuation">:</span>center<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <p><strong>取消文本下划线</strong></p> <pre data-index="42" class="set-code-show prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">a</span> <span class="token punctuation">{<!-- --></span> <span class="token property">text-decoration</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <p><strong>首行缩进</strong></p> <pre data-index="43" class="set-code-show prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">p</span> <span class="token punctuation">{<!-- --></span> <span class="token property">text-indent</span><span class="token punctuation">:</span>32px<span class="token punctuation">;</span> 字标签 默认16px 这是首行缩进两字符 <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <h3><a name="t27"></a><a id="5_678"></a>5、背景属性</h3> <p><strong>设置背景颜色</strong></p> <pre data-index="44" class="set-code-show prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">body</span> <span class="token punctuation">{<!-- --></span> <span class="token property">background-color</span><span class="token punctuation">:</span> #b7b6b6<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <p><strong>设置图片为背景</strong></p> <pre data-index="45" class="set-code-show prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">div#d1</span> <span class="token punctuation">{<!-- --></span> <span class="token property">height</span><span class="token punctuation">:</span>1000px<span class="token punctuation">;</span> <span class="token comment">/*调整块 高度*/</span> <span class="token property">width</span><span class="token punctuation">:</span> 1000px<span class="token punctuation">;</span> <span class="token comment">/*调整长度*/</span> <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">url</span><span class="token punctuation">(</span><span class="token string">"https://picx.zhimg.com/v2-c4f561cf0c23beced24b56f7fcac997c_r.jpg?source=1940ef5c"</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">background-position</span><span class="token punctuation">:</span> -342px 0px /* 图片 漂移 <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li></ul></pre> <ul><li>可以通过 网页开发者工具 来调整 图片移动</li></ul> <p><strong>填写填充</strong></p> <pre data-index="46" class="set-code-show prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">div#d1</span> <span class="token punctuation">{<!-- --></span> <span class="token property">height</span><span class="token punctuation">:</span>1000px<span class="token punctuation">;</span> <span class="token comment">/*调整块 高度*/</span> <span class="token property">width</span><span class="token punctuation">:</span> 1000px<span class="token punctuation">;</span> <span class="token comment">/*调整长度*/</span> <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">url</span><span class="token punctuation">(</span><span class="token string">"https://picx.zhimg.com/v2-c4f561cf0c23beced24b56f7fcac997c_r.jpg?source=1940ef5c"</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">background-position</span><span class="token punctuation">:</span> -342px 0px /* 图片 漂移 <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li></ul></pre> <h3><a name="t28"></a><a id="6_712"></a>6、边框属性</h3> <p><strong>给上下左右设定 边框</strong></p> <pre data-index="47" class="set-code-show prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">#d2</span> <span class="token punctuation">{<!-- --></span> <span class="token property">height</span><span class="token punctuation">:</span>1000px<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 1000px<span class="token punctuation">;</span> <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">url</span><span class="token punctuation">(</span><span class="token string">"https://picx.zhimg.com/v2-c4f561cf0c23beced24b56f7fcac997c_r.jpg?source=1940ef5c"</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 5px solid black<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#d2</span> <span class="token punctuation">{<!-- --></span> <span class="token property">height</span><span class="token punctuation">:</span>1000px<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 1000px<span class="token punctuation">;</span> <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">url</span><span class="token punctuation">(</span><span class="token string">"https://picx.zhimg.com/v2-c4f561cf0c23beced24b56f7fcac997c_r.jpg?source=1940ef5c"</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">/*border: 5px solid black;*/</span> <span class="token property">border-left</span><span class="token punctuation">:</span> 10px solid red<span class="token punctuation">;</span> /**给左边 边框设置样式/ <span class="token property">border-top</span><span class="token punctuation">:</span> 10px solid blue<span class="token punctuation">;</span> /**给上边边 边框设置样式/ <span class="token property">border-right</span><span class="token punctuation">:</span> 10px solid green<span class="token punctuation">;</span> /**给右边 边框设置样式/ <span class="token property">border-bottom</span><span class="token punctuation">:</span> 10px solid red<span class="token punctuation">;</span> /**给下面边 边框设置样式/ <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li></ul></pre> <p><strong>边框画圆</strong><br> <code>border-radius:50%</code></p> <pre data-index="48" class="set-code-show prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">#d2</span> <span class="token punctuation">{<!-- --></span> <span class="token property">height</span><span class="token punctuation">:</span>500px<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span> <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">url</span><span class="token punctuation">(</span><span class="token string">"https://picx.zhimg.com/v2-c4f561cf0c23beced24b56f7fcac997c_r.jpg?source=1940ef5c"</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">/*border: 5px solid black;*/</span> <span class="token property">background-position</span><span class="token punctuation">:</span> center center<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> <span class="token comment">/*在块儿级标签 画圆*/</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li></ul></pre> <h3><a name="t29"></a><a id="7display_748"></a>7、display</h3> <p><strong>隐藏标签</strong><br> <code>display:none</code></p> <pre data-index="49" class="set-code-show prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector"><style> div</span> <span class="token punctuation">{<!-- --></span> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> </style> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre> <ul><li>多用于非法用途 将原本的 显示的 账户输入窗口的 k值 清除</li><li>创建一个隐藏标签 来绑定一个账户 用户已提交 提交的是该kv数据</li></ul> <p><strong>使元素同时具备行内元素和块儿级元素的特点</strong><br> <code>display:"inline-block"</code></p> <h3><a name="t30"></a><a id="8_767"></a>8、盒子模型</h3> <p><strong>所有的标签的可以看成是一个快递盒</strong></p> <div class="table-box"><table><thead><tr><th>比喻</th><th>实际</th><th>名词</th></tr></thead><tbody><tr><td>两个快递盒之间的距离</td><td>标签之间的距离</td><td>外边距（margin）</td></tr><tr><td>快递盒的厚度</td><td>标签的边框</td><td>边框（border）</td></tr><tr><td>盒子内物体距离盒子内壁</td><td>内部文本与边框的距离</td><td>内边距（padding）</td></tr><tr><td>物体自身的大小</td><td>标签内部的内容</td><td>内容</td></tr></tbody></table></div> <p><strong>外边距操作</strong><br> <code>margin</code></p> <pre data-index="50" class="set-code-show prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token property">margin-top</span><span class="token punctuation">:</span>20px<span class="token punctuation">;</span> <span class="token comment">/*设置上外边距*/</span> <span class="token property">margin-left</span><span class="token punctuation">:</span>100px<span class="token punctuation">;</span> <span class="token comment">/*设置左外边距*/</span> <span class="token property">margin-right</span><span class="token punctuation">:</span>100px<span class="token punctuation">;</span> <span class="token comment">/*设置右外边距*/</span> <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span> <span class="token comment">/*设置 下外边距为100px*/</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> <p><strong>body 标签自带8px的外边距</strong></p> <pre data-index="51" class="set-code-show prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token property">margin</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span>简写形式 作用域上下左右 <span class="token property">margin</span><span class="token punctuation">:</span> 10px 20px<span class="token punctuation">;</span> 上下 左右 <span class="token property">margin</span><span class="token punctuation">:</span> 10px 20px 30px 40px<span class="token punctuation">;</span> 上右下左（顺时针） margin 还可以让内部标签 居中显示 margin：100px auto 仅限于水平方向 居中 <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre> <ul><li>padding 使用方式与margin一致</li></ul> <h3><a name="t31"></a><a id="9_800"></a>9、浮动布局</h3> <p><strong>靠左 或靠右浮动：<code>float:left\right</code></strong><br> <strong>浮动会造成 父标签坍陷 这是一个不好的现象 因为会引起歧义</strong><br> 解决福哦那个造成的父亲标签塌陷</p> <pre data-index="52" class="set-code-show prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">.clearfix:after</span><span class="token punctuation">{<!-- --></span> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">;</span> <span class="token comment">/*空文本*/</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token comment">/*让其变成块儿级*/</span> <span class="token property">clear</span><span class="token punctuation">:</span>both<span class="token punctuation">;</span> <span class="token comment">/*让其左右两边蹦年右浮动元素*/</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre> <ul><li>提前写好 上述的css擦欧总 遇到标签塌陷就给标签添加 clearfix类值 即可</li><li><strong>游览器针对文本 时优先展示的（浮动的元素如果 遮挡会想办法展示）</strong></li></ul> <p><strong>溢出属性</strong></p> <div class="table-box"><table><thead><tr><th>overflow属性值</th><th>作用</th></tr></thead><tbody><tr><td><code>visble</code></td><td>默认值，内容不会被修剪，会是呈现在元素框之外</td></tr><tr><td><code>hidden</code></td><td>内容会被修剪，并且其余内容是不可见的</td></tr><tr><td><code>scroll</code></td><td>内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容</td></tr><tr><td><code>auto</code></td><td>如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容</td></tr><tr><td><code>inherit</code></td><td>规定从父元素继承 overflow 属性的值</td></tr></tbody></table></div> <h3><a name="t32"></a><a id="10_827"></a>10、定位</h3> <p><strong>static（静态）</strong><br> 所有标签默认都不能直接通过定位修改位置 必须切换成下面三种之一</p> <p><strong>relatice（相对 定位）</strong><br> 相对于标签原来的位置咋定位</p> <p><strong>absolute（绝对定位）</strong><br> 基于已经定位过的父标签左定位（如果没有父表则以body为参照）</p> <p><strong>fixed（固定定位）</strong><br> 相对于浏览器窗口做定位</p> <h4><a name="t33"></a><a id="101zindex_841"></a>10.1、z-index</h4> <p><strong>浏览器界面其实是一个三维坐标 z轴指向用户</strong></p> <h3><a name="t34"></a><a id="11JavaScript_845"></a>11、JavaScript</h3> <p><em>跟java没有关系 主要是伪类噌热度</em></p> <p><strong>JavaScript 与 ECMASript的区别</strong></p> <ul><li>前者是后者的规划 后者是前者的一种实现</li><li>EcmaScript不是JavaScript唯一的部分 也不是唯一被标准化的部分</li><li>完整的JavaScript 由以下三个不同的部分组成 <ul><li>核心（ECMAScript）</li><li>文档对象模型（DOM）</li><li>浏览器对象模型（BOM）</li></ul> </li></ul> <p><strong>JavaScript 是一门编程有传言（NodeJS 是能够 执行js在后端服务器运行的工具）</strong></p> <h4><a name="t35"></a><a id="111htmljs_860"></a>11.1、html引入js的方式</h4> <p><strong>通过<code>script</code>标签键 直接编写js代码</strong></p> <pre data-index="53" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> 在这里写js代码 </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <p><strong>引入js文件 通过<code>script</code> 标签中 src属性 导入js文件</strong></p> <h4><a name="t36"></a><a id="112js_872"></a>11.2、js变量与常量</h4> <p><strong>在js中声明 变量和 常量 都需要使用关键字</strong></p> <ul><li><strong>var：全局有效</strong></li><li><strong>let：如果在局部名称空间中使用那么仅仅在局部名称空间有效</strong></li><li><strong>const：定义常量</strong></li></ul> <p><strong>JS也是动态类型：变量名绑定的数据值类型不固定</strong></p> <pre data-index="54" class="set-code-show prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;">var name=<span class="token string">'jason'</span> name = 123 name =[11<span class="token punctuation">,</span>22<span class="token punctuation">,</span>33<span class="token punctuation">,</span>] <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <h4><a name="t37"></a><a id="113js_888"></a>11.3、js数据类型之数值类型</h4> <p><strong>在js中常看数据类型可以使用typef</strong></p> <p><strong>在js中整型浮点型称为数值类型number</strong></p> <pre data-index="55" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token function">parseInt</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">//整数</span> parseFloat（） <span class="token comment">//小数</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre> <p><code>NaN</code> : Not a Number不是一个数字</p> <h4><a name="t38"></a><a id="114js_901"></a>11.4、js数据类型之字符串类型</h4> <p><strong>字符串 string</strong></p> <pre data-index="56" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token keyword">var</span> name <span class="token operator">=</span><span class="token string">'kk'</span> <span class="token comment">//单引号</span> <span class="token keyword">let</span> name <span class="token operator">=</span> <span class="token string">"kk"</span> <span class="token comment">//双引号</span> <span class="token keyword">var</span> s1 <span class="token operator">=</span> <span class="token string">'你好啊$(name)'</span> <span class="token comment">//格式化输出</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <h4><a name="t39"></a><a id="115js_911"></a>11.5、js数据类型之布尔值</h4> <p><code>bollean</code> 布尔值</p> <ol><li><strong>True</strong></li><li><strong>Faise</strong> <ol><li>（空字符串）</li><li><code>0</code></li><li><code>null</code></li><li><code>undefined</code></li><li><code>NaN</code></li></ol> </li></ol> <p><strong>null 与 undefined 的区别</strong><br> <code>null</code> 可以理解为曾经拥有过 现在暂时空了</p> <p><code>undefined</code> 可以理解为从来没拥有过</p> <h4><a name="t40"></a><a id="116jsobject_928"></a>11.6、js数据类型之对象（object）</h4> <p><strong>JS中也是一切皆对象</strong><br> 所有事物都是对象：字符串、数组、函数···</p> <h5><a id="1161_933"></a>11.6.1、对象之数组</h5> <p><strong>就是python中列表</strong></p> <pre data-index="57" class="set-code-show prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;">// 直接生成 let l1 = [12<span class="token punctuation">,</span><span class="token string">'kk'</span><span class="token punctuation">,</span>22<span class="token punctuation">,</span>44<span class="token punctuation">,</span>55] <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre> <p><strong>forEACH</strong></p> <p>将 数组的每个元素传递给回调函数 类似于for循环</p> <pre data-index="58" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span>index<span class="token punctuation">,</span>arr</span><span class="token punctuation">)</span><span class="token punctuation">(</span>value<span class="token punctuation">,</span>index<span class="token punctuation">,</span>arr<span class="token punctuation">)</span><span class="token punctuation">)</span> l1<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">a</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">)</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <p><strong>splice</strong></p> <pre data-index="59" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;">l1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">11</span><span class="token punctuation">,</span><span class="token number">22</span><span class="token punctuation">,</span><span class="token number">33</span><span class="token punctuation">,</span><span class="token number">44</span><span class="token punctuation">]</span> l1<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token string">'kk'</span><span class="token punctuation">)</span> l1 <span class="token punctuation">[</span><span class="token number">11</span><span class="token punctuation">,</span><span class="token number">22</span><span class="token punctuation">,</span><span class="token string">'kk'</span><span class="token punctuation">,</span><span class="token number">44</span><span class="token punctuation">,</span><span class="token punctuation">]</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> <p><strong>map</strong></p> <pre data-index="60" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;">l1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">11</span><span class="token punctuation">,</span><span class="token number">22</span><span class="token punctuation">,</span><span class="token number">33</span><span class="token punctuation">,</span><span class="token number">44</span><span class="token punctuation">,</span><span class="token number">55</span><span class="token punctuation">]</span> l1<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span><span class="token keyword">return</span> value <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">[</span><span class="token number">12</span><span class="token punctuation">,</span><span class="token number">23</span><span class="token punctuation">,</span><span class="token number">34</span><span class="token punctuation">,</span><span class="token number">45</span><span class="token punctuation">,</span><span class="token number">56</span><span class="token punctuation">]</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> <h4><a name="t41"></a><a id="117js_970"></a>11.7、js类型之自定义对象（）</h4> <p><strong>自定义对象 相当于 python中的字典</strong><br> 自定义对象 定义方式</p> <pre data-index="61" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token comment">//方式一</span> <span class="token keyword">let</span> d1 <span class="token operator">=</span><span class="token punctuation">{<!-- --></span><span class="token string-property property">'name'</span><span class="token operator">:</span><span class="token string">'jason'</span><span class="token punctuation">,</span><span class="token string-property property">'pwd'</span><span class="token operator">:</span><span class="token number">123</span><span class="token punctuation">}</span> <span class="token comment">//方式二</span> <span class="token keyword">let</span> <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">object</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre> <p><strong>获取键值的方式</strong><br> d1 点键的方式获取值</p> <h4><a name="t42"></a><a id="118_986"></a>11.8、运算符</h4> <p><strong>自增</strong><br> 加号位置不同 其预算的流程也不同</p> <pre data-index="62" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token keyword">var</span> x<span class="token operator">=</span><span class="token number">10</span> <span class="token keyword">var</span> res1<span class="token operator">=</span>x<span class="token operator">++</span><span class="token punctuation">;</span> <span class="token comment">//加号 值 后面 那么就是先赋值 在在进行自增</span> <span class="token keyword">var</span> res2<span class="token operator">=</span><span class="token operator">++</span>x<span class="token punctuation">;</span> <span class="token comment">//加号在值前面 那么就是 先自增 在赋值</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <p><strong>弱等于 与强等于</strong><br> <code>==</code>弱等于 js会自动 转换成相同数据类型<br> <code>===</code>强等于 不会自动转换 等于oython中的==</p> <p><strong>逻辑运算符</strong></p> <div class="table-box"><table><thead><tr><th>符号</th><th>功能</th></tr></thead><tbody><tr><td>&&</td><td>等于python中and</td></tr><tr><td>||</td><td>等于pyton中or</td></tr><tr><td>！</td><td>等于python中的not</td></tr></tbody></table></div> <h4><a name="t43"></a><a id="12js_1009"></a>12、js流程控制</h4> <h4><a name="t44"></a><a id="121_1011"></a>12.1、分支结构</h4> <ol><li> <p><strong>单if分支</strong></p> <pre data-index="63" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token keyword">if</span><span class="token punctuation">(</span>条件<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>条件成立之后执行的代码<span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> </li><li> <p><strong>if····else分支</strong></p> <pre data-index="64" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token keyword">if</span><span class="token punctuation">(</span>条件<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> 条件链成立之后执行的代码 <span class="token punctuation">}</span> <span class="token keyword">else</span><span class="token punctuation">{<!-- --></span> 条件不成立之后执行的代码 <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li></ul></pre> </li><li> <p><strong>if···elif····else分支</strong></p> <pre data-index="65" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token keyword">if</span><span class="token punctuation">(</span>条件<span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> 条件<span class="token number">1</span>成立之后执行的代码 <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>条件<span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> 条件<span class="token number">1</span> 不成立条件<span class="token number">2</span>成立执行的代码 <span class="token punctuation">}</span> <span class="token keyword">else</span><span class="token punctuation">{<!-- --></span> 上述条件都不满足 后执行的代码 <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li></ul></pre> </li></ol> <h4><a name="t45"></a><a id="122_1044"></a>12.2、循环结构</h4> <p><strong>for循环</strong></p> <pre data-index="66" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i<span class="token operator">=</span><span class="token number">1</span><span class="token punctuation">;</span>i<span class="token operator"><</span><span class="token number">101</span><span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <p><strong>打印数组内所有数据值</strong></p> <pre data-index="67" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;">l1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">11</span><span class="token punctuation">,</span><span class="token number">22</span><span class="token punctuation">,</span><span class="token number">33</span><span class="token punctuation">,</span><span class="token number">44</span><span class="token punctuation">,</span><span class="token number">55</span><span class="token punctuation">,</span><span class="token number">66</span><span class="token punctuation">,</span><span class="token number">77</span><span class="token punctuation">,</span><span class="token number">88</span><span class="token punctuation">,</span><span class="token string">'kk'</span><span class="token punctuation">]</span> <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i<span class="token operator">=</span><span class="token number">0</span> i<span class="token operator"><</span><span class="token function">length</span><span class="token punctuation">(</span>l1<span class="token punctuation">)</span><span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>l1<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> <p><strong>while循环</strong></p> <pre data-index="68" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token keyword">while</span><span class="token punctuation">(</span>条件<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> 循环体代码 <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <h3><a name="t46"></a><a id="13_1071"></a>13、函数</h3> <p><strong>函数语法结构</strong></p> <pre data-index="69" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token keyword">function</span> <span class="token function">函数名</span><span class="token punctuation">(</span><span class="token parameter">形参</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> 函数体代码 <span class="token keyword">return</span> 返回值 <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">func</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span>b</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span>b<span class="token punctuation">)</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li></ul></pre> <p><strong>参数个数 不需要一一对应 如果想要限制参数个数需要使用内置 关键字 arguments</strong></p> <pre data-index="70" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token keyword">function</span> <span class="token function">func</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span>b</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> <span class="token keyword">if</span><span class="token punctuation">(</span>arguments<span class="token punctuation">.</span>length<span class="token operator">===</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span>b<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token keyword">else</span><span class="token punctuation">{<!-- --></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'参数个数不足'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li></ul></pre> <p><strong>匿名函数</strong></p> <pre data-index="71" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span>b</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> <span class="token keyword">return</span> a<span class="token operator">+</span>b<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <p><strong>箭头函数</strong></p> <pre data-index="72" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token keyword">var</span> f <span class="token operator">-</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">v</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> <span class="token keyword">return</span> <span class="token constant">V</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">var</span> <span class="token function-variable function">f</span> <span class="token operator">=</span> <span class="token parameter">v</span> <span class="token operator">=></span> v<span class="token punctuation">;</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> <h3><a name="t47"></a><a id="14js_1115"></a>14、js内置对象</h3> <p><strong>类似于python中的内置函数名或内置模块</strong><br> <strong>固定语法</strong></p> <pre data-index="73" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token keyword">var</span> 变量名 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token function">内置对象名</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <h4><a name="t48"></a><a id="141Date_1124"></a>14.1、Date日期对象</h4> <pre data-index="74" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token keyword">let</span> Dobj <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> dobj Thu Aug <span class="token number">25</span> <span class="token number">2022</span> <span class="token number">20</span><span class="token operator">:</span><span class="token number">38</span><span class="token operator">:</span><span class="token number">11</span> <span class="token constant">GMT</span><span class="token operator">+</span><span class="token number">0800</span> <span class="token punctuation">(</span>中国标准时间<span class="token punctuation">)</span> dobj<span class="token punctuation">.</span><span class="token function">toLocaleString</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token string">'2022/8/28 20:38:11'</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li></ul></pre> <h4><a name="t49"></a><a id="142JSON__1135"></a>14.2、JSON 序列化对象</h4> <p><strong>对象转换成JSON格式字符串</strong><br> <code>JSON.stringify</code></p> <pre data-index="75" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token keyword">let</span> d1 <span class="token operator">=</span><span class="token punctuation">{<!-- --></span><span class="token literal-property property">name</span><span class="token operator">:</span><span class="token string">'kk'</span><span class="token punctuation">,</span><span class="token literal-property property">pwd</span><span class="token operator">:</span><span class="token number">123</span><span class="token punctuation">}</span> <span class="token keyword">let</span> sd1 <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">,</span><span class="token function">stringify</span><span class="token punctuation">(</span>d1<span class="token punctuation">)</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre> <p><strong>JSON格式字符串 转换为对象</strong><br> <code>JSON.parse</code></p> <pre data-index="76" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token keyword">let</span> d2 <span class="token operator">=</span>JSOn <span class="token function">parse</span><span class="token punctuation">(</span>sd1<span class="token punctuation">)</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <h4><a name="t50"></a><a id="142RegExp__1152"></a>14.2、RegExp 正则</h4> <p><strong>两种定义方式</strong></p> <pre data-index="77" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token comment">//方式一:</span> <span class="token keyword">let</span> reg1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">RegEXp</span><span class="token punctuation">(</span><span class="token string">"^[a-zA-Z][a-zA-Z0-9][5,11]"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//方式二:</span> <span class="token keyword">let</span> reg2 <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^[a-zA-Z][a-zA-Z0-9][5,11]"</span><span class="token regex-delimiter">/</span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre> <p><strong>正则表达式中不能有空格 且不能为空，为空自动匹配<code>undefined</code></strong></p> <h3><a name="t51"></a><a id="15BOM_1166"></a>15、BOM</h3> <p><strong>BOM：浏览器对象模型</strong><br> 通过写js代码可以跟浏览器交互</p> <p><strong>打开 一个网页窗口</strong></p> <pre data-index="78" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;">window<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">'http://www.baidu.com'</span><span class="token punctuation">,</span><span class="token string">''</span><span class="token punctuation">,</span><span class="token string">'height=100px,width=100px,left=500px'</span><span class="token punctuation">)</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <p><strong>关闭一个自己创建的页面</strong></p> <pre data-index="79" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;">window<span class="token punctuation">.</span><span class="token function">close</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <p><strong>客户端绝大部分信息</strong><br> <code>userAgent</code> 作为游览器的标识</p> <pre data-index="80" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;">window<span class="token punctuation">.</span>navigtor<span class="token punctuation">.</span>userAgent <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <h4><a name="t52"></a><a id="151history_1190"></a>15.1、history对象</h4> <p><strong>控制网页前进 或 返回上一页</strong><br> <code>history.forward()</code><br> <code>history.back()</code></p> <pre data-index="81" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token comment">//控制网页 前进一页</span> window<span class="token punctuation">.</span>history<span class="token punctuation">.</span><span class="token function">forward</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">//控制网页返回上一页</span> window<span class="token punctuation">.</span>history<span class="token punctuation">.</span><span class="token function">back</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre> <h4><a name="t53"></a><a id="152location_1204"></a>15.2、location对象</h4> <p><strong>查看当前网址 或跳转 至某网址</strong><br> <code>location.href</code></p> <pre data-index="82" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token comment">//查看当前网址</span> window<span class="token punctuation">.</span>location<span class="token punctuation">.</span>href <span class="token string">'https://fanyi.youdao.com/'</span> <span class="token comment">//跳转至 某网页</span> window<span class="token punctuation">.</span>location<span class="token punctuation">.</span>href<span class="token operator">=</span><span class="token string">'www.baidu,com'</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li></ul></pre> <p><strong>刷新网页 重新加载</strong><br> <code>location.reload()</code></p> <pre data-index="83" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;">window<span class="token punctuation">.</span>location<span class="token punctuation">.</span><span class="token function">reload</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <h4><a name="t54"></a><a id="153_1225"></a>15.3、弹出框</h4> <p><strong>确认框</strong><br> <code>confirm()</code><br> <em>当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。</em></p> <p><strong>警告框</strong><br> <code>alert()</code></p> <p><strong>提示框</strong><br> 当提示框出现后 用户需要输入值 然后点击确认或取消按钮 才能继续操作<code>prompt</code></p> <h4><a name="t55"></a><a id="154_1237"></a>15.4、计时器</h4> <div class="table-box"><table><thead><tr><th>关键字</th><th>作用</th></tr></thead><tbody><tr><td><code>setTimeout</code></td><td>定时任务</td></tr><tr><td><code>setInterval</code></td><td>循环定时任务</td></tr><tr><td><code>clearInterval</code></td><td>停止循环定时任务</td></tr></tbody></table></div> <h3><a name="t56"></a><a id="16DOM_1245"></a>16、DOM</h3> <h4><a name="t57"></a><a id="161_1247"></a>16.1、查找标签</h4> <p><strong>根据id 查找 标签</strong><br> <em>结果是标签本身</em></p> <pre data-index="84" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;">document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'d1'</span><span class="token punctuation">)</span> <span class="token operator"><</span>div id<span class="token operator">=</span><span class="token string">"d1"</span><span class="token operator">></span>div<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <p><strong>根据class 查找标签</strong><br> <em>结果是数组</em></p> <pre data-index="85" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;">document<span class="token punctuation">.</span><span class="token function">getElementsByClassName</span><span class="token punctuation">(</span><span class="token string">'c1'</span><span class="token punctuation">)</span> <span class="token function">HTMLCollection</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span> <span class="token punctuation">[</span>div<span class="token punctuation">.</span>c1<span class="token punctuation">,</span> p<span class="token punctuation">.</span>c1<span class="token punctuation">]</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <p><strong>根据 标签类型 获取标签</strong><br> <em>结果是数组</em></p> <pre data-index="86" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;">document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span> <span class="token comment">//HTMLCollection(3) [div#d1, div.c1, div, d1: div#d1]</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <blockquote> <p>**涉及到DOM的操作 的JS代码应该放在文档的body标签 内部的最下方 **</p> </blockquote> <p>16.2、操作节点</p> <p><strong>创建标签对象</strong></p> <pre data-index="87" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token keyword">let</span> aEle <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">)</span> <span class="token comment">//创建一个a标签</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <p><strong>给标签添加属性</strong></p> <pre data-index="88" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;">aEle<span class="token punctuation">.</span>href <span class="token operator">=</span> <span class="token string">'https://www.baidu.com'</span> <span class="token comment">//给a标签添加 href属性</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <p><strong>给标签添加文本</strong></p> <pre data-index="89" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;">aEle<span class="token punctuation">.</span>innerText <span class="token operator">=</span> <span class="token string">'前往百度主页'</span> <span class="token comment">//给给 a标签 添加 文本</span> <span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://www.baidu.com"</span><span class="token operator">></span>前往百度主页<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <p><strong>让创建 的标签添加至文档流中（页面上）</strong><br> <em>该方式为动态创建 临时有效</em></p> <pre data-index="90" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;">div1Ele<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span>aEle<span class="token punctuation">)</span> <span class="token comment">//通过查找到的标签 点 append 添加 创建好的a标签 值末尾</span> div1Ele<span class="token punctuation">.</span><span class="token function">insertBefore</span><span class="token punctuation">(</span>aEle<span class="token punctuation">,</span>div1Ele<span class="token punctuation">.</span>firstElementChild<span class="token punctuation">)</span> <span class="token comment">//添加至指定节点的前面</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <h5><a id="162_1309"></a>16.2、属性操作</h5> <p><strong>设置标签的自定义属性</strong><br> <code>setAttribute</code></p> <pre data-index="91" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token comment">//setAttribute 标签可以定义 默认属性也可以定义自定义属性</span> img1<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'src'</span><span class="token punctuation">,</span><span class="token string">'111.png'</span><span class="token punctuation">)</span> img1<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'aaa'</span><span class="token punctuation">,</span><span class="token string">'kkk'</span><span class="token punctuation">)</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> <ul><li>通过点的形式定义的 属性 只能是默认属性</li></ul> <h5><a id="163_1323"></a>16.3、文本操作</h5> <p><strong>获取标签内所有文本与标签（可以创建子标签）</strong><br> <code>innerHTML</code></p> <pre data-index="92" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;">div1Ele<span class="token punctuation">.</span>innerHTML <span class="token string">'\n div\n <a href="https://www.baidu.com">前往百度主页</a><p>div>p\n <span>div>p>span</span>\n </p>\n <span>div>span</span>\n <p>div>p</p>\n'</span> <span class="token comment">//不同的标签通过撬棍 符分割</span> <span class="token comment">//创建子标签</span> div1Ele<span class="token punctuation">.</span>innerHTML<span class="token operator">=</span> <span class="token string">'<h3> 这是innerHTML</h5>'</span> div1Ele <span class="token operator"><</span>div id<span class="token operator">=</span><span class="token string">"d1"</span><span class="token operator">></span><span class="token operator"><</span>h3<span class="token operator">></span> 这是innerHTML<span class="token operator"><</span><span class="token operator">/</span>h3<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li></ul></pre> <p><strong>获取标签内文本</strong><br> <code>innerText</code></p> <pre data-index="93" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;">div1Ele<span class="token punctuation">.</span>innerText <span class="token string">'div 前往百度主页\n\ndiv>p div>p>span\n\ndiv>span\n\ndiv>p'</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <h3><a name="t58"></a><a id="17JS_1348"></a>17、JS操作扩展</h3> <h4><a name="t59"></a><a id="171JS_1350"></a>17.1、JS获取用户输入</h4> <p><strong>获取用户输入 选择</strong><br> 通过 标签 点 <code>value</code> 获取属性值</p> <pre data-index="94" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;">document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'d1'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>value <span class="token string">'1241414'</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <p><strong>获取用户上传的文件数据</strong><br> 通过 标签 点 <code>file</code> 获取文件 数组 通过[0] 取值 获取文件对象</p> <pre data-index="95" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;">document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'d5'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>files<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> File <span class="token punctuation">{<!-- --></span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'1825659-20191014121946473-388162006.jpg'</span><span class="token punctuation">,</span> <span class="token literal-property property">lastModified</span><span class="token operator">:</span> <span class="token number">1658977320884</span><span class="token punctuation">,</span> <span class="token literal-property property">lastModifiedDate</span><span class="token operator">:</span> Thu Jul <span class="token number">28</span> <span class="token number">2022</span> <span class="token number">11</span><span class="token operator">:</span><span class="token number">02</span><span class="token operator">:</span><span class="token number">00</span> <span class="token constant">GMT</span><span class="token operator">+</span><span class="token number">0800</span> <span class="token punctuation">(</span>中国标准时间<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token literal-property property">webkitRelativePath</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> <span class="token literal-property property">size</span><span class="token operator">:</span> <span class="token number">99607</span><span class="token punctuation">,</span> …<span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <h4><a name="t60"></a><a id="172JS_1370"></a>17.2、JS类属性操作</h4> <p><strong>获取标签 所有class的属性值</strong><br> <code>classList</code></p> <pre data-index="96" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token keyword">let</span> div1Ele <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByClassName</span><span class="token punctuation">(</span><span class="token string">'c1'</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token comment">// 存储classname 含有c1的第一个标签</span> div1Ele<span class="token punctuation">.</span>classList <span class="token comment">//获取该标签 所有类属性值 数组</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre> <p><strong>添加 标签 class属性值</strong><br> <code>classList.add()</code></p> <pre data-index="97" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;">div1Ele<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'c5'</span><span class="token punctuation">)</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <p><strong>判断 标签 class属性值是否存在</strong><br> <code>classList.contains()</code></p> <pre data-index="98" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;">div1Ele<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">contains</span><span class="token punctuation">(</span><span class="token string">'c5'</span><span class="token punctuation">)</span> <span class="token comment">//返回值为布尔值</span> <span class="token boolean">true</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <p><strong>删除 标签 classs属性值</strong><br> <code>classList.remove()</code></p> <pre data-index="99" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;">div1Ele<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">'c3'</span><span class="token punctuation">)</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <p><strong>当该属性值 不存在时 添加 该属性值 存在便删除该属性值</strong></p> <pre data-index="100" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;">div1Ele<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">toggle</span><span class="token punctuation">(</span><span class="token string">'c3'</span><span class="token punctuation">)</span> <span class="token comment">//存在即删除 并返回False</span> <span class="token boolean">false</span> <span class="token comment">//不存在 尾部追加 返回True</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> <h5><a id="173_JS_1412"></a>17.3、 JS样式操作</h5> <p><strong>通过 style关键字 来修改标签样式</strong><br> <code>style</code></p> <p><strong>改变 标签 背景颜色</strong></p> <pre data-index="101" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;">pEle<span class="token punctuation">.</span>style<span class="token punctuation">.</span>backgroundColor <span class="token operator">=</span> <span class="token string">'red'</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <h3><a name="t61"></a><a id="18_1423"></a>18、事件</h3> <p><strong>事件可以简单理解为是给html标签绑定了一些额外的功能(能够触发js代码的运行)</strong></p> <h4><a name="t62"></a><a id="181_1427"></a>18.1、绑定事件</h4> <p><strong>建议使用方式二绑定</strong></p> <pre data-index="102" class="set-code-hide prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token comment">// 方式一：通过添加属性绑 执行的函数</span> <span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"button"</span> value<span class="token operator">=</span><span class="token string">"开关"</span> onclick<span class="token operator">=</span><span class="token string">"func1()"</span><span class="token operator">></span> <span class="token operator"><</span>script<span class="token operator">></span> <span class="token keyword">function</span> <span class="token function">func1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'bong!!'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token comment">//方式二：通过 标签.属性 绑定执行的函数 可以查找到多个标签 批量绑定</span> <span class="token operator"><</span>button id<span class="token operator">=</span><span class="token string">"d1"</span><span class="token operator">></span> 双击 <span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span> <span class="token operator"><</span>script<span class="token operator">></span> <span class="token keyword">let</span> btnEle <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'d1'</span><span class="token punctuation">)</span> btnEle<span class="token punctuation">.</span><span class="token function-variable function">ondblclick</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter"><span class="token keyword">this</span></span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'peng!!'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li></ul></pre> <p><strong>事件中 关键字this</strong><br> <code>this</code> 指代的是当前被操作的标签对象</p> <pre data-index="103" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token keyword">let</span> btnEle <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'d1'</span><span class="token punctuation">)</span> btnEle<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter"><span class="token keyword">this</span></span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'peng!!'</span><span class="token punctuation">)</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre> <p><strong>等待文档加载完毕之后再取执行一些代码</strong><br> <code>windowd.conload</code></p> <h3><a name="t63"></a><a id="19jQuery__1466"></a>19、jQuery 基本使用</h3> <blockquote> <p><strong>jQuery() >>> $()</strong></p> </blockquote> <h4><a name="t64"></a><a id="191_1470"></a>19.1、选择器</h4> <p><strong>id选择器</strong></p> <pre data-index="104" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#d1"</span><span class="token punctuation">)</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <p><strong>标签选择器</strong></p> <pre data-index="105" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"tagName"</span><span class="token punctuation">)</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <p><strong>class选择器</strong></p> <pre data-index="106" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">".className"</span><span class="token punctuation">)</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <h4><a name="t65"></a><a id="192_1490"></a>19.2、基本筛选器</h4> <pre data-index="107" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'div:first'</span><span class="token punctuation">)</span> <span class="token comment">//第一个</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'div:last'</span><span class="token punctuation">)</span> <span class="token comment">//最后一个</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'div:eq(index)'</span><span class="token punctuation">)</span> <span class="token comment">//通过索引 取值</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'div:even'</span><span class="token punctuation">)</span> <span class="token comment">//匹配所有索引值为偶数的元素 从0开始计数</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'div:odd'</span><span class="token punctuation">)</span> <span class="token comment">// 匹配所欲索引值为计数得元素，从0 开始</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'div:gt(index)'</span><span class="token punctuation">)</span> <span class="token comment">//匹配所有大于给定索引值得元素</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'div:lt(index)'</span><span class="token punctuation">)</span> <span class="token comment">//匹配所有小于给定索引值得元素</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'div:not(元素选择器)'</span><span class="token punctuation">)</span> <span class="token comment">//筛选掉所欲满足not条件得标签</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'div:has(元素选择器)'</span><span class="token punctuation">)</span> <span class="token comment">//选取所有包含一个或多个标签在其内得标签（指得是从后代元素找）</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li></ul></pre> <h4><a name="t66"></a><a id="193_1504"></a>19.3、表单筛选器</h4> <p><strong>可以看成是属性选择器优化而来</strong></p> <pre data-index="108" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">':checked'</span><span class="token punctuation">)</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'input:checked'</span><span class="token punctuation">)</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre> <p>常用 表单筛选器</p> <pre data-index="109" class="set-code-show prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">':text'</span><span class="token punctuation">)</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">':password'</span><span class="token punctuation">)</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">':file'</span><span class="token punctuation">)</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">':radio'</span><span class="token punctuation">)</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">':checkbox'</span><span class="token punctuation">)</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">':submit'</span><span class="token punctuation">)</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">':reset'</span><span class="token punctuation">)</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">':button'</span><span class="token punctuation">)</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">':enabled'</span><span class="token punctuation">)</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">':disabled'</span><span class="token punctuation">)</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">':checked'</span><span class="token punctuation">)</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">':selected'</span><span class="token punctuation">)</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li></ul></pre> </div> </div> </li> <li class="list-group-item ul-li"> <b>相关阅读:</b><br> <nobr> <a href="/Article/Index/1557547">爬虫学习笔记-数美验证</a> <br /> <a href="/Article/Index/1007258">Linux：Nginx 正向代理实现内网访问互联网</a> <br /> <a href="/Article/Index/738877">【华为OD机试真题 JS】矩形相交的面积</a> <br /> <a href="/Article/Index/1452428">YOLO目标检测——树叶检测数据集下载分享【含对应voc、coco和yolo三种格式标签】</a> <br /> <a href="/Article/Index/814609">西交软件915历年真题_编程题汇总与分析</a> <br /> <a href="/Article/Index/1336910">2024免费的硬盘数据恢复软件有哪些？</a> <br /> <a href="/Article/Index/1084243">CS210: Software Development PA6 PatientQueue</a> <br /> <a href="/Article/Index/1172827">结构方程模型调整</a> <br /> <a href="/Article/Index/1021904">自动化专业做上位机，现在薪资水平如何？</a> <br /> <a href="/Article/Index/1684976">观察者模式-委托(大话设计模式)C/C++版本</a> <br /> </nobr> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/weixin_71967396/article/details/126575179 </li> </ul> </div> <div class="col-lg-4 col-sm-12"> <ul class="list-group" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 最新文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/1484446">攻防演习之三天拿下官网站群</a> <br /> <a href="/Article/Index/1515268">数据安全治理学习——前期安全规划和安全管理体系建设</a> <br /> <a href="/Article/Index/1759065">企业安全 | 企业内一次钓鱼演练准备过程</a> <br /> <a href="/Article/Index/1485036">内网渗透测试 | Kerberos协议及其部分攻击手法</a> <br /> <a href="/Article/Index/1877332">0day的产生 | 不懂代码的"代码审计"</a> <br /> <a href="/Article/Index/1887576">安装scrcpy-client模块av模块异常，环境问题解决方案</a> <br /> <a href="/Article/Index/1887578">leetcode hot100【LeetCode 279. 完全平方数】java实现</a> <br /> <a href="/Article/Index/1887512">OpenWrt下安装Mosquitto</a> <br /> <a href="/Article/Index/1887520">AnatoMask论文汇总</a> <br /> <a href="/Article/Index/1887496">【AI日记】24.11.01 LangChain、openai api和github copilot</a> <br /> </nobr> </li> </ul> <ul class="list-group pt-2" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 热门文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/888177">十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！</a> <br /> <a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a> <br /> <a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a> <br /> <a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a> <br /> <a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a> <br /> <a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a> <br /> <a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a> <br /> <a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a> <br /> <a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <br /> <a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a> <br /> </nobr> </li> </ul> </div> </div> </div> <!-- 主体 --> <!--body结束--> <!--这里是footer模板--> <!--footer--> <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="text-muted center foot-height"> Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a> <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a> </div> <div style="width:300px;margin:0 auto; padding:0px 5px;"> <a href="/regex.html">正则表达式工具</a> <a href="/cron.html">cron表达式工具</a> <a href="/pwdcreator.html">密码生成工具</a> </div> <div style="width:300px;margin:0 auto; padding:5px 0;"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"> <img src="" style="float:left;" /><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">京公网安备 11010502049817号</p></a> </div> </div> </div> </div> </nav> <!--footer--> <!--footer模板结束--> <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script> <!--这里是scripts模板--> <!--scripts模板结束--> </body> </html> - HTML