一 目前主流web架构
C/S结构：本地有app客户端，云端有服务器
- 这个在浏览器功能不强大时广泛采用，在手机端情况类似
- 这个方式的优点：
- 功能强大，自由定制，不受浏览器限制
- 响应快
- 本地资源支持多
- 这个方式的缺点：
- 需要下载，增加用户负担
- 更新需要用户配合
- 软件安全性不好，容易被破解
B/S结构：本地只有浏览器， 云端服务器
- 现在PC端主流采用的模式
- 优缺点与上面的C/S结构相反
- 在手机端的表现是h5、微信小程序、其他平台软件的小程序，目前占优的是微信小程序
二 http协议和html
- http协议是应用层协议，基于TCP/IP协议。规定网络请求和网络相应的数据格式
- 请求格式（get/post)
- 请求首行
- 请求头
- 请求体（get没有请求体）
- 相应格式 http/1.1
- 响应首行
- 响应头
- 响应体
- 请求格式（get/post)
- html是基于http的一种网页标记语言，目前已经到了第五版
- 采用标签来构建元素的排布骨架
- 用CSS样式表来指定如何显示元素
补充知识：
OSP7的7层理论结构：
- 应用层：规定数据的格式 http
- http就是其中的主流应用层协议 1.1版
- 表示层：对数据进行压缩编码 encode
- 会话层：与目标建立连接 listen accept
- 传输层：建立端口之间的联系 port
- TCP是传输层协议，面向连接，要保证
- UDP是数据报文协议，面向传输，要速度
- 网络层：标记目标的ip地址 ip
- 数据链路：对数据进行分组、设置源和目标mac地址 nat
- 物理层：二进制数据在物理媒介上的传输 光纤
三 html的标记语言
1. 结构性标记
- 整个页面都在这个标签里面
- 页面头，放置编码、标题、css连接地址、关键字、作者、logo等等
- 显示给用户的页面信息
- 万能结构标记，用途最广泛
页脚信息，最新版h5里面有规定 ```html <!DOCTYPE html>
<a name="l2hCt"></a>
## 2. 元素标记
注意元素的内部属性之间靠空格分开，n个空格只算一个。
<a name="QsJAW"></a>
### 2.1 标题
- <h1> - <h6> 1最大，6最小
<a name="CqIyz"></a>
### 2.2 段落
- <p> 段落是块级标签
- <br/> 换行标签 break
<a name="BxgwY"></a>
### 2.3 文字
- 粗体 <b>
- 斜体 <i>
- 删除线 <del>
- 常用字体名称
```html
苹方简体常规： font-family: PingFangSC-Regular, sans-serif;
苹方繁体： font-family: PingFangTC-Regular
微软雅黑 ： font-family: Microsoft Yahei
阿瑞尔 Arial
2.4 列表
2.6 表格
- 表格体
- 表头行
- 表头单元格
- 表体行
- 单元格 ` ``` - css尺寸 ```javascript $("").height([val|fn]) $("").width([val|fn]) $("").innerHeight() $("").innerWidth() $("").outerHeight([soptions]) $("").outerWidth([options]) ``` - css位置偏移量 ```html /* $("").offset([coordinates]) // 获取匹配元素在当前视口的相对偏移。 $("").position() // 获取匹配元素相对父元素的偏移，position()函数无法用于设置操作。 $("").scrollTop([val]) // 获取匹配元素相对滚动条顶部的偏移。 */ 案例1：返回顶部
- 表体
- background 背景
- align 水平对齐 valign 垂直对齐
- rowspan 水平单元格合并 colspan 垂直单元格合并
- border 边框
```html
// border的语法：3px solid red (线的宽度，线型，颜色)
<th> 列1 </th> <th> 列2 </th>单元格的内容1 单元格的内容2 //表格的格式设定 单元格宽度和高度
- 表格内容过长时的隐藏处理 ```html 总结： 当设置了表格的table-layout:fixed以后，各单元格的宽度设置失效，所有的宽度将均分，为了，解决 这个很简单，只要在第一行的页头设置宽度即可，但是同时带来几个问题 1. 固定列宽之后，可能出现内容溢出，要确定是否换行，如果换行，行高不能写死了。 2. 如果要加载其他复杂的功能，比如点击修改，也要处理内容是否溢出的问题，要同时解决这些问题 3. 格式问题可以留着后面解决，先处理内容和功能问题和bug 4. 任何一个解决方案，都不能只考虑一点，权衡之后做决定。 <h4>测试</h4> <style> #a1 { table-layout: fixed; /*先固定表格布局*/ width: 100%; border: 1px solid grey; border-collapse: collapse; } td,th { white-space: nowrap; /*不换行*/ overflow: hidden; /*超出内容隐藏*/ text-overflow: ellipsis; /*文本隐藏方式 加三个小点*/ height: 100px; border: 2px solid #ccc; } </style> <div>中华人民共和国中华人民共和国</div> <table id="a1"> <tr> <td width="5%">J2345-1</td> <td width="10%">studwork profiles profiles profiles</td> <td width="5%" >Echo</td> <td width="10%" >new delhi,India</td> <td width="10%"> 2021-05-06</td> <td width="30%">装箱明细装箱明细装箱明细装箱明细装箱明细装箱明细箱明细装箱明细箱明细装箱明细箱明细装箱明细箱明细装箱明细装箱明细装箱明细装箱明细装箱明细装箱明细装箱明细</td> </tr> </table>一下是控制列格式的css ```html
<a name="nC3R7"></a> ### 2.7 链接 - <a href="链接地址"> - 锚定： 在页面内跳转 ```html <div id="c1"> 第一章 </div> <a href="#c1"> 返回顶部 </a>2.8 表单
- 单选框 <input type="radio"> 单选，同样的name可以实现互斥 案例如下： ```html <p> 性别： <input type="radio" name="gender" value="male" checked="checked" > male <input type="radio" name="gender" value="female" > female </p> <!-- 效果如下 --> # 默认选择的选项添加属性： checked = "checked"
复选框
<p> 爱好： <input type="checkbox" name="hobbie" value="piano" > 钢琴 <input type="checkbox" name="hobbie" value="running" > 跑步 </p>
input的email类型 可以使用placeholder，且在提交时自动检查邮件地址格式
input的button类型
input type=”reset” 把内容重置到修改前初始状态，button的显示文字用value设置
input type =”submit” 把所有form领域内的input标签的name和value组成的键值对按method方法传给action所指定的地址，button的显示文字用value设置
- input的date类型
```python
这个类型要求的格式
给他传默认值的时候必须格式化为date:’Y-m-d’, 小细节，内外引号不能相同
一般浏览器不支持placeholder属性
- 下拉框 <select> 选项 <option> 嵌套 ```html <p> 省份： <select name= "province" > <option value="hebei" > 河北 <option value="henan" > 河南 <option value="shandong" > 山东 </select> </p> # 被选中的option 设置属性selected = "selected" # name 只需要在select主标签上设置即可 # value值需要在每个option标签设置 # multiple="multiple" 多选 # required="required" 必填 # size = 3 下拉列表中可见选项的数目
属性 值 描述 autofocus autofocus 规定在页面加载后文本区域自动获得焦点。 disabled disabled 规定禁用该下拉列表。 form form_id 规定文本区域所属的一个或多个表单。 multiple multiple 规定可选择多个选项。 name name 规定下拉列表的名称。 required required 规定文本区域是必填的。 size number 规定下拉列表中可见选项的数目。 多行文本框
属性：
cols 宽度 rows 高度 value 没有定义
方法
.val() 获取控件内文本内容 .html() 意思同上
- 按钮 <button> - 提交按钮 <button type="submit"> 效果与input type="submit"相同，唯一区别btn是成对标签 - 重置按钮 <button type="reset"> ```html -- button的属性，只要存在disable属性就会禁用，要恢复只能清除属性，另外对于控件类给属性赋值最好用JS的prop来做 <button disabled="disabled"> </button> button的显示文字 value = "确认提交"2.8 span
- 万能行内标签
- 配合css可以实现花样操作
-
2.9 特殊标签
空格  
- 注册R ®
3.0 标签总结：
| 标签类型 | 列举 | 性质 | | —- | —- | —- | | 块级标签 | p h div ul li | 独占一行，有盒模型的所有特征： 长、宽、高 、边框、内外边距 | | 行内标签 | span a | 与别的元素共占一行，有文字的所有特性，特别注意基线的概念 ，这在对齐问题上特别重要 | | 行内块级 | img | 除了不独占一行，有盒的其他特征，也有行内元素的特征，基线由其中的内容决定。
float自动把块级变行内块级 | | display
强行变性 | block 块级
inline 行内
inline-block 行内块级 | 主要用法：
把块级元素变为行内块级，便于横向排版 |
四 样式表CSS
1. CSS的三种形式
css是一种内容与格式分离的设计理念， 方便设计者根据需要调整显示的样式，而不用去更改html原始代码，提高开发的效率和灵活性。 在开始之前，有几个注意要点：
- css的class属性名不能以数字开头
- class可以多个属性名，以空格分开
行内样式表 非常少
<div style="color: white;text-align: center">行内设置</div>嵌入样式表 局部采用
<head> <title>title</title> <meta charset="utf8"> <style> div{ color: white; background-color: #369; text-align: center } </style> </head>链接样式表，目前最流行 ```html
注意： - 花括号和引号里面：键和键值之间用冒号链接，参考python的字典 <a name="Gmm0e"></a> ## 2. CSS的选择器 - 基本选择器 - 标签 - class - id - 组合选择器 - 与选择器 一个标签同时满足两个条件 p.classname - 或选择器 可以针对不同标签 p, classname, idname - 子代选择器 空格 - 儿子选择器 > - 毗邻选择器 + 其后的一个标签受影响 - 兄弟选择器 ~ 其后的同一级标签都受影响 ```python // 这里有一个组合选择器的例子：选择子代里面所有的li，除了第一个li // 大于号“>”儿子选择器找到所有的儿子li，共7个，加号“+”毗邻选择器，然后找他这7个li的毗邻元素，这样自然排除了第一个 <style> .test>li + li{ color: red; } </style> <div class="luffy-container"> <ol class="test"> <li>11</li> <li>22</li> <li>33</li> <li>44</li> <li>55</li> <li>66</li> <li>77</li> </ol> </div>- 属性选择器
- 标签[属性] p[title] 凡是有title属性的p标签
- 标签[属性*=”start”] 凡是属性值里面含有start字符的标签
- 标签[属性^=”start”] 凡是属性值里面以start字符开头的标签
- 标签[属性$=”start”] 凡是属性值里面以start字符结尾的标签
- 标签[属性~=”start”] 凡是属性值里面有空格分开的几个值，其中一个是start字符的标签
伪类选择器
与鼠标动作有关的
hover 鼠标悬浮
a:hover{ cursor: pointer; -- 鼠标手型 move "十" text "I" opacity: 80%; -- 不透明度 color: red; -- 字体颜色 }link
- visited
- active
- 在标签的内容之前和之后的处理，可添加一个div标签
- p:before
- p:after
- 指定某个特殊的子代
- p:first-child
- p:last-child
3. CSS的属性操作
3.1 元素居中
● 文本图片水平居中 div{ text-align: center } ● div在上级div中居中： margin: auto auto; ● 垂直居中 line-height: 60px; 文本垂直居中，把行高调整为与盒子等高就可以 ● 其他的居中 margin-top: auto;3.2 div布局方法
行内块级方法,把块级元素变成行内排布，但是内容不一致时有诡异的事情
display: inline-block;float 方法
- 1： float的元素脱离文档流，后面的元素顶替他的位置，可能产生重叠
- 2： 他会贴在它的上级不浮动元素的下面的左或者右
3： 如果他上级的元素也浮动，则排在他的同一行（按照左右不同的顺序)
float: left; float: right;4：父级塌陷的解决 ```html
/class里加入空格clearfix，让他同时有两个值，让他具有通用性/ /.clearfix:after语句相当于在这里插入了一个div/- **5 position方法** - relative 相对定位，参考起点：他本来的位置 不脱离文档流html- **absolute 绝对定位 参考起点：最近的已定位的父级，一直到body， 脱离文档流 ** - **脱离文档流之后，元素会悬浮，但是文字和图片等实际元素的排版不会有重叠 **html<a name="XStQ3"></a> ### 3.3 行内元素的排布 - line-height的数字值是和font-size大小相关的； - vertical-align的百分比值是和line-height值相关的； - 要让行内元素行或内块级元素水平居中，在父亲上设置text-align: center; - 行内元素垂直居中，可以设置行内块元素的margin-top: 50%-减去块高度的一半 - vertical-align 不能让元素在父级中垂直居中，而是处理img和文本之间的对齐关系 - 背景图的定位 background-position: 10,10 - 垂直居中： - padding 给父级设置上下的padding即可 <a name="PYJse"></a> ### 3.4 CSS的排版总结 - 横向排布的方法和区别 - 排布原则： 面向内容 | **方法** | **效果** | **优点** | 缺点 | | --- | --- | --- | --- | | float | 左飘：与左边padding贴齐<br />右飘：与右边padding贴齐 | 方便左右对齐，采用的最多 | 脱离文档流，可能父级<br />塌陷 解决：fixclear:after | | display：inline-block | div像文字一样排布，对于默认左对齐的元素可以采用 | 不脱离文档流<br />可以用text-align | 不能左右对齐，特别注意<br />基线和行内元素的相互影响 | | position：absolute | 定位到任意指定位置，需要父级设置relative，适合小零件的位置固定 | 随意定位 | 设置很麻烦，需要微调<br />对不同浏览器有差异 | - css的执行逻辑 - 按顺序找到html的脚本中的一行，查找css中的选择标签，依次执行 - 如果没找到直接匹配的选择器，则一直向其父级查找，直到body级别为止，如果没有任何一级匹配，则使用默认值 - 如果几个选择器定位到同一个元素，按权重选择 - 标签 = 1 权重 - class = 10权重 - id= 1000 权重（总高于class和标签） - ！import= 最高权重 - 如两个选择器同权重，则后出现的权重更高 - 个人理解： - css在发展早期是一维的，主要是文字和图片的排版，没有考虑到这么复杂的版面设计问题，所以对于横向排布的设计有些凌乱和麻烦； - 最初采用的表格定位方式也有很多缺陷，容纳的元素有限，功能局限大，排版也混乱，最终html采取折中混杂的方式，float和position联合使用。 - html和css依然在不断迭代中，所以这些知识后面也需要不断在实践中更新，加深理解。 <a name="sbnHp"></a> # <a name="Eiwqs"></a> ### 1.2、网页构成 World Wide Web Consortium，简称“W3C”，中文翻译为万维网联盟，又称W3C理事会。1994年10月在[麻省理工学院](http://baike.baidu.com/view/1935.htm)计算机科学实验室成立，建立者是万维网的发明者蒂姆·伯纳斯·李。万维网联盟是Web技术领域最具权威和影响力的国际中立性技术标准机构，创建和发展了W3C标准，致力于维护和发展 web 规范。W3C 标准是网页开发的核心标准。那么什么是W3C标准呢？<br />W3C标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成： - 结构（Structure） - 表现（Presentation） - 行为（Behavior） 对应的W3C标准也分成了三个方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMA[Script等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。<br />前端基础总共分为三部分：html、css和js。<br />那么了解了开发网页的标准以后，我们接下来开始正式的学习网页开发吧。 <a name="kqdID"></a> ## 5.基本标签 - 标题标签html标题1
标题2
- 段落标签 <p>大家好，我是段落1。</p> - 换行标签 <br/> - 文本格式化标签 HTML提供了一系列的用于格式化文本的标签，可以让我们输出不同外观的元素，比如粗体和斜体字。如果需要在网页中，需要让某些文本内容展示的效果丰富点，可以使用以下的标签来进行格式化。html 定义粗体文本
定义粗体文本方式2
定义斜体字
定义斜体字方式2
定义删除文本
- 特殊符号 ® ©<br />标签大致可分为两类 - 块级标签(block) -- 独占一行 - 内联标签(inline) -- 按文本内容占位 - div和span标签 <div>只是一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现.<br /><span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现<br />块级元素与行内元素的区别所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。 <a name="BTYmi"></a> ## 6.超链接标签 <a name="cZtAc"></a> ### 6.1、超链接基本使用 超链接是浏览者和服务器的交互的主要手段，也叫超级链接或a链接，是网页中指向一个目标的连接关超链接的属性： | **属性** | **值** | **描述** | | --- | --- | --- | | href | 网络链接 [ 例如: [http://www.baidu.com](http://www.baidu.com/)<br /> ] 本地链接 [ 例如：F:\\html\\index.html ] | 规定链接的跳转目标 | | title | [百度](http://www.baidu.com/) | 链接的提示信息 | | target | _blank [ 在新建窗口中打开网页 ] _self [ 默认值，覆盖自身窗口打开网页 ] _parent [ 在父级框架中打开网页 ] _top [ 在顶级框架中打开网页 ] framename [ 在指定的框架中打开网页] | 与前面四项固定值不同，framename是泛指，并不是这个值，这点将在后面框架部分内容中详细介绍，这里可以暂时先略过 | 1、href是超链接最重要的属性，规定了用户点击链接以后的跳转目标，这个目标可以是 网络连接，也可以是本地连接。<br />2、网络链接指的是依靠网络来进行关联的地址，一般在地址前面是以 http://或者https://这样开头的，如果没有网络，则用户点击了超链接也无法访问对应的目标。<br />3、本地链接指的是本地计算机的地址，一般在地址前面是以 file:///开头或直接以 C:/、D:/、E:/开头的，不需要经过网络。<br />4、如果href的值留空，则默认是跳转到当前页面，也就是刷新当前页面。 - 打开一个新窗口，指定窗口大小和打开方式python $(“.publisher_name”).click(function () { open(“/books/?publisher_id=2”, “_blank”, “width=800px,height=500px,left=200px,top=200px” ); });<a name="FQGXl"></a> ### 6.2、锚点 锚点( anchor )是超链接的一种应用，也叫命名锚记，锚点可以像一个定位器一样，可以实现页面内的链接跳转，运用相当普遍。例如，我们有一个网页，由于内容太多，导致页面很长，而且里面的内容，可以分为N个部分。这样的话，我们就可以在网页的顶部设置一些锚点，这样便可以方便浏览者点击相应的锚点，到达本页内相应的位置，而不必在一个很长的网页里自行寻找。又例如，我们页面中，有个链接需要跳转到另一个页面的中间或者脚部去，这时候也可以运用上锚点技术来解决这个问题。html 13910566706<!DOCTYPE HTML> 第一章 第二章 第三章第一章内容
第二章内容
第三章内容
<a name="oqZns"></a> ## 7.img标签 在HTML中，图像由<img>标签定义的，它可以用来加载图片到html网页中显示。网页开发过程中，有三种图片格式被广泛应用到web里，分别是 jpg、png、gif。<br />img标签的属性：<br />/*<br />src属性：<br /> 指定图像的URL地址，是英文source的简写，表示引入资源。<br /> src的值可以是本地计算机存储的图片的地址，也可以是网络上外部网站的图片的地址。<br /> 如果src的值不正确，那么浏览器就无法正确的图片，而是显示一张裂图。<br />alt属性：指定图像无法显示时的替换文本。<br />width属性： 指定引入图片的显示宽度。<br />height属性：指定引入图片的显示高度。<br />border属性：指定引入图片的边框宽度，默认为0。<br />title属性：悬浮图片上的提示文字<br />*/<br />点击图片跳转可以配合a标签使用<br /><a><img src="" alt=""></a> <a name="Tt5ug"></a> ## 8.列表标签 <ul type="square"><br /> <li>item1</li><br /> <li>item2</li><br /> <li>item3</li><br /> </ul> <ol start="100"><br /> <li>item1</li><br /> <li>item2</li><br /> <li>item3</li><br /> </ol> <a name="BwWG3"></a> ## 9.表格标签 <a name="l7czI"></a> ### 9.1、table结构 在HTML中使用table来定义表格。网页的表格和办公软件里面的xls一样，都是有行有列的。HTML使用tr标签定义行，使用td标签定义列。<br />语法：<br /><table border="1"><br /> <tr><br /> <td>单元格的内容</td><br /> ……<br /> </tr><br />……<br /></table> 1、<table>和</table>表示一个表格的开始和结束。一组<table>...</table>表示一个表格。<br />2、border用于设置整个表格的边框宽度，默认为0，表示不显示边框。<br />3、<tr>和</tr>表示表格中的一行的开始和结束。一组<tr>...</tr>，一个表格可以有多行。通过计算table标签中包含多少对tr子标签即可知道一个表格有多少行。<br />4、<td>和</td>表示表格中的一个单元格的开始和结束。通过计算一个tr里面包含了多少对td自标签即可知道一个表格有多少列，多少的单元格了。 <a name="CIZgy"></a> ### 9.2、table属性 | **属性** | **值** | **描述** | | --- | --- | --- | | [width](http://www.w3school.com.cn/tags/att_table_width.asp) | px、% | 规定表格的宽度。 | | height | px、% | 规定表格的高度。 | | [align](http://www.w3school.com.cn/tags/att_table_align.asp) | left、center、right | 规定表格相对周围元素的对齐方式。 | | [bgcolor](http://www.w3school.com.cn/tags/att_table_bgcolor.asp) | rgb(x,x,x)、#xxxxxx、colorname | 规定表格的背景颜色。 | | background | url | 规定表格的背景图片。 | | [border](http://www.w3school.com.cn/tags/att_table_border.asp) | px | 规定表格边框的宽度。 | | [cellpadding](http://www.w3school.com.cn/tags/att_table_cellpadding.asp) | px、% | 规定单元格边框与其内容之间的空白。 | | [cellspacing](http://www.w3school.com.cn/tags/att_table_cellspacing.asp) | px、% | 规定单元格之间的空隙。 | | nowrap | 没有值 <td nowrap> </td> | 单元格不允许换行 | <a name="xUEZl"></a> ### 9.3、td属性 表格中除了行元素以外，还有单元格，单元格的属性和行的属性类似。td和th都是单元格。 | **属性** | **值** | **描述** | | --- | --- | --- | | height | px、% | 规定单元格的高度。 | | width | px、% | 规定单元格的宽度。 | | [align](http://www.w3school.com.cn/tags/att_table_align.asp) | left、center、right | 规定单元格内容的对齐方式。 | | valign | top、middle、bottom | 规定单元格内容的垂直对齐方式。 | | [bgcolor](http://www.w3school.com.cn/tags/att_table_bgcolor.asp) | rgb(x,x,x)、#xxxxxx、colorname | 规定单元格的背景颜色。 | | background | url | 规定单元格的背景图片。 | | rowspan | number | 规定单元格合并的行数 | | colspan | number | 规定单元格合并的列数 | <a name="mW4vz"></a> ## 10.表单标签 表单主要是用来收集客户端提供的相关信息，提供了用户数据录入的方式，有多选、单选、单行文本、下拉列表等输入框，便于网站管理员收集用户的数据，是Web浏览器和Web服务器之间实现信息交流和数据传递的桥梁.<br />表单被form标签包含，内部使用不同的表单元素来呈现不同的方式来供用户输入或选择。当用户输入好数据后，就可以把表单数据提交到服务器端。<br />一个表单元素有三个基本组成部分： - 表单标签，包含了表单处理程序所在的URL以及数据提交到服务器的方法等表单信息。 - 表单域，包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等表单控件。 - 表单按钮，包括提交按钮、复位按钮和一般按钮，用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。 在HTML中创建表单用form标签。每个表单都可以包含一到多个表单域或按钮。form标签属性： | **属性** | **值** | **描述** | | --- | --- | --- | | action | 访问服务器地址 | 服务器端表单处理程序的URL地址 | | method | post、get[默认值] | 表单数据的提交方法 | | target | 参考超链接的target属性 | 表单数据提交时URL的打开方式 | | enctype | application/x-www-form-urlencoded[默认值] multipart/form-data [用于文件上传] text/plain [用于纯文本数据发送] | 表单提交数据时的编码方式 |javascript用户注册
：
密码：
爱好： 篮球 足球 双色球
性别： 男 女 其他
生日：
上传简历：
<!- 上传文件的input表单标签，value=“上传文件的路径” accpet=”可接受的文件类型”—>籍贯：
<a name="D8K9B"></a> ## 11、总结 今天我们学习了HTML标签元素尤其是form表单标签的使用和属性以及基于HTTP协议实现web通信流程，这一点是需要重点理解掌握的。 <a name="tPOsH"></a> # <a name="Luxrv"></a> ## 1、CSS的引入方式 CSS样式有三种不同的使用方式，分别是行内样式，嵌入样式以及链接式。我们需要根据不同的场合不同的需求来使用不同的样式。 - 行内样式 行内样式，就是写在元素的style属性中的样式，这种样式仅限于元素内部起作用。当个别元素需要应用特殊样式时就可以使用内联样式。但不推荐大量使用内联样式，因为那样不利于后期维护。html行内设置/行内设置的方法与嵌入式相同，只不过把它变成一个属性style/- 嵌入式 嵌入式，是把CSS样式写在HTML文档内部head标签中的style标签里。浏览器加载HTML的同时就已经加载了CSS样式了。当单个文档需要特殊，单独的样式时，可以使用内部样式表。 - 链接式 链接式，就是把CSS样式写在HTML文档的外部，一个后缀为 .css 的外部样式表中，然后使用时在head标签中，使用link标签的href属性引入文件即可。当CSS样式需要应用在很多页面时，外部样式表是最理想的选择。在使用外部样式表的情况下，我们可以通过改变一个文件来改变这所有页面的外观。<br /> css样式表的存储路径： /css/common.csshtml<a name="bB8v5"></a> ### 3.2.2、组合选择器 - 后代子代选择器: 空格 - 与选择器 点号 p.c1 - 或选择器 逗号 p.c1,#i1 - 兄弟选择器 - 毗邻选择器 加号 + （紧挨着的下一个） - 兄弟选择器 波浪号 ~ （下面同一层次的所有标签） <a name="TYWlQ"></a> ### 3.3.3、属性选择器 E[att] 匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略。<br /> 比如“[cheacked]”。以下同。） p[title] { color:#f00; }<br /> <br />E[att=val] 匹配所有att属性等于“val”的E元素 div[class=”error”] { color:#f00; } p[type*="create"] <br />相当于是一个组合标签 <a name="HQQsn"></a> ### 3.3.4、伪类选择器 - anchor伪类：专用于控制链接的显示效果 | [:link](https://www.w3school.com.cn/cssref/selector_link.asp) | **a:link** | **选择所有未被访问的链接。** | | --- | --- | --- | | [:visited](https://www.w3school.com.cn/cssref/selector_visited.asp) | a:visited | 选择所有已被访问的链接。 | | [:active](https://www.w3school.com.cn/cssref/selector_active.asp) | a:active | 选择活动链接。 | | [:hover](https://www.w3school.com.cn/cssref/selector_hover.asp) | a:hover | 选择鼠标指针位于其上的链接。 | - before after伪类 before/after伪类相当于在元素内部插入两个额外的标签，其最适合也是最推荐的应用就是图形生成。在一些精致的UI实现上，可以简化HTML代码，提高可读性和可维护性。 | [:first-child](https://www.w3school.com.cn/cssref/selector_first-child.asp) | **p:first-child** | **选择属于父元素的第一个子元素的每个 <p> 元素。** | | --- | --- | --- | | [:last-child](https://www.w3school.com.cn/cssref/selector_last-child.asp) | p:last-child | 选择属于其父元素最后一个子元素每个 <p> 元素。 | | [:before](https://www.w3school.com.cn/cssref/selector_before.asp) | p:before | 在每个 <p> 元素的内容之前插入一个div。 | | [:after](https://www.w3school.com.cn/cssref/selector_after.asp) | p:after | 在每个 <p> 元素的内容之后插入div。 | <a name="pYVIt"></a> ### 3.3.5、样式继承 CSS的样式表继承指的是，特定的CSS属性向下传递到子孙元素。总的来说，一个HTML文档就是一个家族，然后html元素有两个子元素，相当于它的儿子，分别是head和body，然后body和head各自还会有自己的儿子，最终形成了一张以下的家族谱。<br />在上图中，可以看到，body的子元素有三个，h1、p和ul，ul也有几个子元素，p也有1个子元素，那么li和a就都是body的后代元素。有时可能我们在body里面设置了一些属性，结果，body下面所有的后代元素都可能享受到，这就是样式继承。就像一句俗语一样，“龙生龙，凤生凤，老鼠的儿子会打洞”。样式继承，可以给我们的网页布局带来很多的便利，让我们的代码变得更加简洁，但是，如果不了解，或者使用不当，也有可能会给我们带来很多不必要的麻烦。<br />因此，如果了解了哪些样式是会继承到后代元素的，那么就可以避免这些问题的发生了。 | **文本相关属性** | | | | | --- | --- | --- | --- | | font-family | font-size | letter-spacing | line-height | | font-style | font-variant | text-align | text-indent | | font-weight | font | text-transform | word-spacing | | color | direction | | | | 列表相关属性 | | | | | list-style-image | list-style-position | list-style-type | list-style | | 表格和其他相关属性 | | | | | border-collapse | border-spacing | caption-side | empty-cells | | cursor | | | | <a name="eftzF"></a> ### 3.3.6、选择器优先级 - 继承 继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。<br />body{color:red;} <p>helloyuan</p><br />这段文字都继承了由body {color:red;}样式定义的颜色。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。<br />p{color:green}<br />发现只需要给加个颜色值就能覆盖掉它继承的样式颜色。由此可见：任何显示申明的规则都可以覆盖其继承样式。 此外，继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等。 - 优先级所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。样式表中的特殊性描述了不同规则的相对权重。 /*<br />!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性markdown 1 内联样式表的权值最高 style=”” 1000； 2 统计选择符中的ID属性个数。 #id 100 3 统计选择符中的CLASS属性个数。 .class 10 4 统计选择符中的HTML标签名个数。 标签名 1<br />按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。 1、有!important声明的规则高于一切。<br />2、如果!important声明冲突，则比较优先权。<br />3、如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。<br />4、由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。<br />5、用数字表示只是说明思想，一万个class也不如一个id权值高 <a name="uOYDH"></a> ## 3、CSS的属性操作 <a name="hQnFU"></a> ### 3.3.1、文本属性 - font-style（字体样式风格） /*<br />属性值：<br />normal：设置字体样式为正体。默认值。 <br />italic：设置字体样式为斜体。这是选择字体库中的斜体字。<br />oblique：设置字体样式为斜体。人为的使文字倾斜，而不是去使用字体库的斜体字。<br />*/ - font-weight（字体粗细） /*<br />属性值：<br />normal：设置字体为正常字体。相当于数字值400<br />bold：设置字体为粗体。相当于数字值700。<br />bolder：设置字体为比父级元素字体更粗的字体。<br />lighter：设置字体为比父级元素字体更细的字体。<br />number：用数字表示字体粗细。从小到大，越来约粗，取值范围：100、200、300、400、500、600、700、800、900。<br />注意：<br />font-weight的常用值有两个normal和bold，其他的值在浏览器中的支持并不好。<br />*/ - font-size（字体大小） /*<br />font-size的值有很多，有xx-small、x-small、small、medium、large、x-large、xx-large、smaller和larger，也可以设置值为具体的数值加上对应的计算单位来表示字体的大小。字体单位有像素（ px ）、字符（ em，默认1em等于16px，2em等于32px，根据不同浏览器的默认字体大小而决定 ）、百分比（ % ），磅[点]（ pt ）。<br />字体不指定大小时，主流浏览器默认是15像素到16像素。旧版本的谷歌浏览器，字体最小只能设置成12像素，新版已经修复。*/ - font-family（字体族） /*<br />font-family可以指定元素使用的字体系列或字体族。当我们使用font-family指定字体族的时候，可以指定多种字体,作为候补。指定多个字体的时候，需要使用逗号隔开。<br />如果css中没有声明当前内容使用的字体族的时候，默认：<br /> 中文： 宋体 [ win7以后默认是 微软雅黑 ]<br /> 英文： Arial<br />*/ - color（字体颜色） // 可以使用color来表示字体的颜色，颜色值最常用的有三种形式，英文单词，十六进制，RGB十进制。更高级的有 RGBA(带透明度）、HSL、HSLA，不过低版本的浏览器并不支持。 另外要注意，使用十六进制表示颜色值的时候，如果字符的格式类似于“AAAAAA”的这种，六个字符一样的；又或者是“AABBCC”，这种，一二，三四，五六 位置上的数字一样的，我们可以使用简写来表达。 - text-align（文本对齐方式）html text-align: left; text-align: right; text-align: center; text-align: justify; 实现两端对齐文本效果- line-height（字体行高）html line-height: 20px; line-height: 60%; // 字体行高即字体最底端与字体内部顶端之间的距离。值可以是normal、px、number、%。 行高 = 字体大小 + 上半行距 + 下半行距- vertical-align (行内块元素之间的对齐方式）html vertical-align: middle;
— 属性设置元素的垂直对齐方式。yuan
- text-decorationhtml a{ text-decoration: none; } // 使用text-decoration可以设置文本内容的装饰线条，正常的文本是没有线条的，常用的值有none，underline，overline，line-through四种。<a name="kgH17"></a> ### 3.3.2、背景属性 - background-color（背景颜色）html- background-image（背景图片） background-image可以引入一张图片作为元素的背景图像。默认情况下，background-image放置在元素的左上角，并在垂直和水平方向重复平铺。<br />语法：html background-image: url(‘图片地址’)当同时定义了背景颜色和背景图像时，背景图像覆盖在背景颜色之上。 所以当背景图片没有被加载到，或者不能完全铺满元素时，就会显示背景颜色。 - background-repeat（背景平铺方式） CSS中，当使用图像作为背景了以后，都是默认把整个页面平铺满的，但是有时候在很多场合下面，页面并不需要这种默认的效果，而可能需要背景图像只显示一次，或者只按照指定方式进行平铺的时候，可以使用background-repeat来进行设置。html background-repeat: no-repeat; (不平铺） background-repeat: repeat-x; （X轴平铺） background-repeat: repeat-y; （Y轴平铺）- background-position（背景定位）html background-position:0 0; 相对于元素左上角，x轴坐标 y轴坐标, 两个值都可以是正、负值 background-position: left; 还可以是左（left）、中（center）、右（right）以页面中元素的左上角为原点（0，0），把元素的内部区域当成一个坐标轴（上边框为X轴，越往左X的值越大，左边框为Y轴，越往下Y轴的值就越大，反之亦然），然后计算出背景图片的左上角与圆点的距离（x轴和y轴的距离） - background（背景样式缩写） 和字体属性一样，多个不同背景样式属性也是可以同时缩写的，不过不需要像字体那样按照一定的顺序，背景样式的缩写属性的顺序是不固定的，可以任意编排。html background: url(“img.jpg”) no-repeat center; 背景图片 背景平铺方式 背景定位;<a name="n8ZNC"></a> ### 3.3.3、边框属性 - border-style（边框风格） 定义边框的风格，值可以有html border-style: none：没有边框，当border的值为none的时候，系统将会忽略[border-color] border-style: hidden：隐藏边框，低版本浏览器不支持。 border-style: dotted：点状边框。 border-style: dashed：虚线边框。 border-style: solid：实线边框。 border-style: double：双实线边框，两条单线与其间隔的和等于border-width值。border-style的值可以缩写的：html border-style:dotted dashed solid; 分别控制上、左右、下的边框风格 ## 只有一个值的时候表示同时控制上下左右的边框风格 只有两个值的时候表示分别控制上下、左右的边框风格 有三个值的时候表示分别控制上、左右、下的边框风格 有四个值的时候表示分别控制上、右、下、左的边框风格- border-width（边框宽度） 使用border-width可以定义边框的厚度，值可以是medium，thin，thick和指定数值的宽度。 同时，border-width也可以进行缩写：html border-width: 1px; border-top-width: medium; 设置上边的边框宽度 border-bottom-width: thin; 设置下边的边框宽度 border-left-width: thick; 设置左边的边框宽度 border-right-width 设置右边的边框宽度- border-color（边框颜色）html border-color : #FFF ; #十六进制颜色可以缩写，相同的两位可以并做一位，#FFF = #FFFFFFborder-color也可以单独指定不同方向 - 边框样式缩写 还可以把边框风格，边框宽度，边框颜色进行组合在一起，进行缩写：语法：<br />// border: 边框宽度 边框样式 边框颜色;<br />注意，border的缩写值可以不按照顺序来进行书写。这样的缩写可以同时控制4个方向的边框样式。 <a name="YDoLH"></a> ### 3.3.4、列表属性 CSS中提供了一些列表属性可以用来：<br /> (1)、设置不同的列表项标记为有序列表<br /> (2)、设置不同的列表项标记为无序列表<br /> (3)、设置列表项标记为图像 - list-style-type（系统提供的列表项目符号） - list-style-image（自定义的列表项目符号）html li { list-style-image: url(‘qq.gif’); }<a name="ziGQ1"></a> ### 3.3.5、dispaly属性 display可以指定元素的显示模式，它可以把行内元素修改成块状元素，也可以把别的模式的元素改成行内元素。diisplay常用的值有四个。<br />语法：html display: block; // 声明当前元素的显示模式为块状元素 display: inline; // 声明当前元素的显示模式为行内元素 display: inline-block; // 声明当前元素的显示模式为行内块状元素 display: none; // 声明当前元素的显示模式为隐藏<a name="DVkob"></a> ### 3.3.6、盒子模型（重点） 盒模型是CSS的核心知识点之一，它指定元素如何显示以及如何相互交互。HTML页面上的每个元素都可以看成一个个方盒子，这些盒子由元素的content（内容）、padding（内边距）、border（边框）、margin（外边距）组成。 - padding（内边距及其缩写） 内边距，也叫“内补白”，表示页面中元素的边框与内容的距离。内边距的值不能是负值，相当于table标签的cellpadding属性。<br />内边距可以设置多个值：<br />/*<br />当padding只有一个值的时候表示同时控制上下左右的内边距。<br />当padding只有两个值的时候表示分别控制上下、左右的内边距。<br />当padding有三个值的时候表示分别控制上、左右、下的内边距。<br />当padding有四个只的时候表示分别控制上、右、下、左的内边距。<br />*/<br />内边距也可以进行单独设置：<br />/*<br />padding-top 设置上边的外边距<br />padding -bottom 设置下边的外边距<br />padding -left 设置左边的外边距<br />padding -right 设置右边的外边距<br />*/ - margin（外边距及其缩写） 外边距，也叫“外补白”，表示页面中元素与元素之间的距离。外边距越大，两者的距离就越远，反之，如果外边距越小，则元素之间的距离就越近，外边距的值可以是正数，也可以是负值。<br />margin也可以像padding一样设置多个值和单独方向设置，用法一样。<br />1、在网页的开发过程中，需要让一个元素相对于父级元素作水平居中时，可以借助margin的特性来实现。<br />使用margin让元素自身居中：html margin: 0 auto; 0：上下外边距为0， auto: 左右边距自动计算让元素在上级元素中居中2、浏览器的默认边距清零html * { margin: 0; padding: 0; }<a name="OQV9X"></a> ### 3.3.7、float属性（重点） - 流动布局 流动模型（Flow），即文档流，浏览器打开HTML网页时，从上往下，从左往右，逐一加载。<br />在正常情况下，HTML元素都会根据文档流来分布网页内容的。<br />文档流有2大特征：<br />① 块状元素会随着浏览器读取文档的顺序，自上而下垂直分布，一行一个的形式占据页面位置。<br />② 行内元素会随着浏览器区队文档的顺序，从左往右水平分布，一行多个的形式占据页面位置。行内元素摆放满一行以后才会到下一行继续排列。html <!DOCTYPE HTML>d1d2- 浮动模型 要学习浮动模型的布局模式，就要了解CSS提供的浮动属性（float）。浮动属性是网页布局中最常用的属性之一，通过浮动属性不但可以很好的实现页面布局，而且还可以依靠它来制作导航栏等页面功能。<br />简单浮动：html <!DOCTYPE HTML>- 字围效果 ```html <!DOCTYPE HTML> <html lang="en-US"> <head> <title>字围效果</title> <style> .c1{ width: 200px; height: 200px; background-color: indianred; } .c2{ <!-c2脱离文档流，显示在c3的上面了--> width: 300px; height: 200px; background-color: orange; float: left; } .c3{ width: 400px; height: 400px; background-color: lightblue; } </style> </head> <body> <div class="c1">111</div> <div class="c2">222</div> <div class="c3">333</div> </body> </html>字围效果的总结：
- div块的默认高度由不脱离文档流的元素的总和决定
- 浮动元素的与上级不浮动元素的基线对齐
- 如果行内块元素浮动不脱离文档流，单不把他视为文字块，只看被占据的一块区域。
案例：
<!DOCTYPE HTML> <html lang="en-US"> <head> <title>字围案例</title> <meta charset="utf8"> <style> .c1{ width: 500px; } img{ <!-图片本来是个行内块元素，浮动以后并不脱离文档流--> float: left; width: 300px; height: 200px; } </style> </head> <body> <div class="c1"> <img src="" alt=""> <span class="text"> </span> </div> </body> </html>当一个元素被设置浮动后，将具有以下特性：
- 任何申明为float 的元素都会自动被设置为一个行内块状元素，具有行内块状元素的特性。
- 假如某个元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。
- 在标准浏览器中如果浮动元素a脱离了文档流，那么排在浮动元素a后的元素将会往回排列占据浮动元素a本来所处的位置，使页面布局产生变化。
- 如果水平方向上没有足够的空间容纳浮动元素，则转向下一行。
- 字围效果：文字内容会围绕在浮动元素周围。
- 浮动元素只能浮动至左侧或者右侧。
- 浮动元素只能影响排在其后面元素的布局，却无法影响出现在浮动元素之前的元素。
- 清除浮动clearfix
网页布局中，最常用的布局便是浮动模型。但是浮动了以后就会破坏原有的文档流，使页面产生不必要的改动，所以我们一般在浮动了以后，达到目的了，就紧接着清除浮动。
在主流浏览器（如Firefox）下，如果没有设置height，元素的高度默认为auto，且其内容中有浮动元素时，在这种情况下元素的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的情况，叫“浮动溢出”，为了防止这个现象的出现而进行的CSS处理操作，CSS里面叫“清除浮动”。<!DOCTYPE HTML> <html lang="en-US"> <head> <title></title> <meta charset="utf8"> <style> .box{ border: 1px solid red; } .c1{ width: 200px; height: 200px; background-color: #336699; float: left; } .c2{ width: 200px; height: 200px; background-color: orange; float: right; } .footer{ width: 100%; height: 60px; background-color: yellowgreen; } </style> </head> <body> <div class="box"> <div class="c1"></div> <div class="c2"></div> </div> <div class="footer"></div> </body> </html>clear是css中专用于清除浮动的，常用的属性值有以下几个：
值 描述 left 在左侧不允许浮动元素。 right 在右侧不允许浮动元素。 both 在左右两侧均不允许浮动元素。 none 默认值。允许浮动元素出现在两侧。 <!DOCTYPE HTML> <html lang="en-US"> <head> <title>简单浮动</title> <style> .c1{ width: 200px; height: 200px; background-color: indianred; float: left; /*float: right;*/ } .c2{ width: 300px; height: 200px; background-color: orange; float: left; clear: left; /*clear: both;*/ } .c3{ width: 400px; height: 200px; background-color: lightblue; float: left; } </style> </head> <body> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> </body> </html>清除浮动解决父级塌陷问题：
.clearfix:after { /在类名为“clearfix”的元素内最后面加入内容/
content: “.”; /内容为“.”就是一个英文的句号而已。也可以不写。/
display: block; /加入的这个元素转换为块级元素。/
clear: both; /清除左右两边浮动。/
visibility: hidden; /可见度设为隐藏。注意它和display:none;是有区别的。/
/ visibility:hidden;仍然占据空间，只是看不到而已；/
line-height: 0; /行高为0；/
height: 0; /高度为0；/
font-size:0; /字体大小为0；/
}
整段代码就相当于在浮动元素后面跟了个宽高为0的空div，然后设定它clear:both来达到清除浮动的效果。
之所以用它，是因为，你不必在html文件中写入大量无意义的空标签，又能清除浮动。此外，还给父元素加上溢出隐藏属性（overflow: hidden;）来进行清除浮动。
3.3.8、position属性
就像photoshop中的图层功能会把一整张图片分层一个个图层一样，网页布局中的每一个元素也可以看成是一个个类似图层的层模型。层布局模型就是把网页中的每一个元素看成是一层一层的，然后通过定位属性position对元素进行定位摆放，最终实现网页的布局。
定位属性position有4个值，分别是静态定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed）。默认就是static。所以我们略过。
元素设置了定位以后，还要依靠4个方位属性来进行定位摆放。
方位属性：
/*
top：让元素相对于指定目标的顶部偏移指定的距离。
例如： top：10px; 表示距离顶部10像素right：让元素相对于指定目标的右边偏移指定的距离。
例如： right：10px; 表示距离顶部10像素bottom：让元素相对于指定目标的底部偏移指定的距离。
例如： bottom：10px; 表示距离顶部10像素left：让元素相对于指定目标的左边偏移指定的距离。
例如： left：10px; 表示距离顶部10像素
*/- 相对定位（relative）
相对定位就是在正常文档流中，元素相对于自身位置使用left、right、top、bottom属性进行定位偏移。
.c1{
width: 200px;
height: 200px;
background-color: indianred;} .c2{<br /> width: 200px;<br /> height: 200px;<br /> background-color: orange;<br /> position: relative;<br /> left: 200px;<br /> top: 200px; } .c3{<br /> width: 200px;<br /> height: 200px;<br /> background-color: lightblue; }- 绝对定位（absolute）
绝对定位就是将元素脱离文档流，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父级元素进行绝对定位，如果不存在这样的父级元素，则默认是相对于body元素进行绝对定位。
轮播图案例：
<!DOCTYPE HTML>
返回顶部4、总结
学习css选择器以及属性设置，尤其是盒子模型，浮动，定位等属性的掌握。
5、作业
五. JavaScript脚本
1.2、JavaScript与ECMAScript的关系
1996年8月，微软模仿JavaScript开发了一种相近的语言，取名为JScript（JavaScript是Netscape的注册商标，微软不能用），首先内置于IE 3.0。Netscape公司面临丧失浏览器脚本语言的主导权的局面。
1996年11月，Netscape公司决定将JavaScript提交给国际标准化组织ECMA（European Computer Manufacturers Association），希望JavaScript能够成为国际标准，以此抵抗微软。ECMA的39号技术委员会（Technical Committee 39）负责制定和审核这个标准，成员由业内的大公司派出的工程师组成，目前共25个人。该委员会定期开会，所有的邮件讨论和会议记录，都是公开的。
1997年7月，ECMA组织发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript。这个版本就是ECMAScript 1.0版。之所以不叫JavaScript，一方面是由于商标的关系，Java是Sun公司的商标，根据一份授权协议，只有Netscape公司可以合法地使用JavaScript这个名字，且JavaScript已经被Netscape公司注册为商标，另一方面也是想体现这门语言的制定者是ECMA，不是Netscape，这样有利于保证这门语言的开放性和中立性。因此，ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。在日常场合，这两个词是可以互换的。
ECMAScript只用来标准化JavaScript这种语言的基本语法结构，与部署环境相关的标准都由其他标准规定，比如DOM的标准就是由W3C组织（World Wide Web Consortium）制定的。
一个完整的JavaScript包含三个部分：ECMAScript（标准语法），DOM以及BOM！
ECMA-262标准后来也被另一个国际标准化组织ISO（International Organization for Standardization）批准，标准号是ISO-16262。1.3、JavaScript与Java的关系
JavaScript和Java是两种不一样的语言，但是它们之间存在联系。
JavaScript的基本语法和对象体系，是模仿Java而设计的。但是，JavaScript没有采用Java的静态类型。正是因为JavaScript与Java有很大的相似性，所以这门语言才从一开始的LiveScript改名为JavaScript。基本上，JavaScript这个名字的原意是“很像Java的脚本语言”。
在JavaScript语言中，函数是一种独立的数据类型，以及采用基于原型对象（prototype）的继承链。这是它与Java语法最大的两点区别。JavaScript语法要比Java自由得多。
另外，Java语言需要编译，而JavaScript语言则是运行时由解释器直接执行。
总之，JavaScript的原始设计目标是一种小型的、简单的动态语言，与Java有足够的相似性，使得使用者（尤其是Java程序员）可以快速上手。1.4、JavaScript的版本
1997年7月，ECMAScript 1.0发布。
1998年6月，ECMAScript 2.0版发布。
1999年12月，ECMAScript 3.0版发布，成为JavaScript的通行标准，得到了广泛支持。
2007年10月，ECMAScript 4.0版草案发布，对3.0版做了大幅升级，预计次年8月发布正式版本。草案发布后，由于4.0版的目标过于激进，各方对于是否通过这个标准，发生了严重分歧。以Yahoo、Microsoft、Google为首的大公司，反对JavaScript的大幅升级，主张小幅改动；以JavaScript创造者Brendan Eich为首的Mozilla公司，则坚持当前的草案。
2008年7月，由于对于下一个版本应该包括哪些功能，各方分歧太大，争论过于激进，ECMA开会决定，中止ECMAScript 4.0的开发（即废除了这个版本），将其中涉及现有功能改善的一小部分，发布为ECMAScript 3.1，而将其他激进的设想扩大范围，放入以后的版本，由于会议的气氛，该版本的项目代号起名为Harmony（和谐）。会后不久，ECMAScript 3.1就改名为ECMAScript 5。
2009年12月，ECMAScript 5.0版正式发布。Harmony项目则一分为二，一些较为可行的设想定名为JavaScript.next继续开发，后来演变成ECMAScript 6；一些不是很成熟的设想，则被视为JavaScript.next.next，在更远的将来再考虑推出。TC39的总体考虑是，ECMAScript 5与ECMAScript 3基本保持兼容，较大的语法修正和新功能加入，将由JavaScript.next完成。当时，JavaScript.next指的是ECMAScript 6。第六版发布以后，将指ECMAScript 7。TC39预计，ECMAScript 5会在2013年的年中成为JavaScript开发的主流标准，并在此后五年中一直保持这个位置。
2011年6月，ECMAscript 5.1版发布，并且成为ISO国际标准（ISO/IEC 16262:2011）。到了2012年底，所有主要浏览器都支持ECMAScript 5.1版的全部功能。
2013年3月，ECMAScript 6草案冻结，不再添加新功能。新的功能设想将被放到ECMAScript 7。
2013年12月，ECMAScript 6草案发布。然后是12个月的讨论期，听取各方反馈。
2015年6月，ECMAScript 6正式发布，并且更名为“ECMAScript 2015”。这是因为TC39委员会计划，以后每年发布一个ECMAScirpt的版本，下一个版本在2016年发布，称为“ECMAScript 2016”。
除了ECMAScript的版本，很长一段时间中，Netscape公司（以及继承它的Mozilla基金会）在内部依然使用自己的版本号。这导致了JavaScript有自己不同于ECMAScript的版本号。1996年3月，Navigator 2.0内置了JavaScript 1.0。JavaScript 1.1版对应ECMAScript 1.0，但是直到JavaScript 1.4版才完全兼容ECMAScript 1.0。JavaScript 1.5版完全兼容ECMAScript 3.0。目前的JavaScript 1.8版完全兼容ECMAScript 5。
参考链接2、JS的引入方式
3、ECMAScript基本语法
js是一门弱类型的编程语言,属于基于对象和基于原型的脚本语言.
- 变量
格式:
// 方式1 先声明再赋值
var 变量名; // 声明的变量如果没有进行赋值,或者没有被定义的变量,值默认是undefined
变量名 = 变量值;
// 方式2 声明并赋值
var 变量名 = 变量值;
// 方式3 一行可以声明多个变量.并且可以是不同类型
var name=”yuan”, age=20, job=”lecturer”;
1、声明变量时 可以不用var. 如果不用var 那么它是全局变量
2、变量命名,首字符只能是字母,下划线,$美元符 三选一，余下的字符可以是下划线、美元符号或任何字母或数字字符且区分大小写- 注释
// 单行注释
/
多行注释
/- 语句分隔符
var a = 1 // 分号和换行符作为语句分隔符号
var b = 2;
console.log(a,b)4、ECMAScript 基本数据类型
4.4.1、数字类型
JavaScript 没有整型和浮点型，只有一种数字类型，即number类型。
var x = 10;
var y = 3.14;
console.log(x,typeof x); // 10 “number”
console.log(y,typeof y); // 3.14 “number”4.4.2、字符串
字符串创建(两种方式)
- 变量 = “字符串”
- 字串对象名称 = new String (字符串)
var str1=”hello world”;
var str1= new String(“hello word”);方法 JS的字符串的不同点 Python的字符串 切片 str.slice(start, end) 支持负数 str[start, end] 大小写 str.toUpperCase() str.upper() 长度 str.length len(str) 查找 index str.indexOf(“t”) str.index(“t”) 截取 str.substr(start, end) none 清除首尾空白 str.trim() str.strip() 分割 split
re_arry=’next=manager’.split(‘=’)split 拼接 “abc”.concat(“1”,”2”) join 替换方法 replace(“regex”, “replacement”) replace(“substring”, “replacement”) - JavaScrip里面的正则表达式的语法 ```html
功能1. test() 判定字符串data是否符合一个模式（^\d+$） res = /^\d+$/.test(data)) # true /false
功能2. match() 从字符串中提取符合模式的子字符串
var s = ?next=/backManager/ var res = s.match(/\?next=(.*)/)res[0] = ‘?next=/backManager/‘ res[1]= ‘/backManager/‘
注意斜杠原样匹配需要写成\/,问号原样匹配\?
- 功能3. search() 搜索其中的子字符串的其起始位置序号，没有返回null index = data.search(/^runboo$/i)
<a name="EYb6k"></a> ### 4.4.3、布尔值 1、Boolean类型仅有两个值：true和false，也代表1和0，实际运算中true=1,false=02、布尔值也可以看作on/off、yes/no、1/0对应true/false;3、Boolean值主要用于JavaScript的控制语句<br />console.log(true); <a name="CLTsZ"></a> ### 4.4.4、特殊空值（Undefined和Null） ```markdown # 这些是False 1. NaN (not a number的缩写） 2. undefined （声明了但没有初始化，或者函数没有返回值的） 3. null （压根儿就不存在）他是一个值，不是一个为"null"的字符串，跟py区别很大 4. 空字符串 例如 sex == null 判断为true 而 sex == "null" 则是false # 这些是True (这跟python不一样) 1. 空列表 2. 空字典 函数没有返回值默认是undefined --4.4.5、类型转换
js中,类型转换有2种.一种就是强制转换,一种就是自动转换.
因为js是一门弱类型的脚本语言,所以变量会在运算符的运行要求,有时候根据运算符的要求,进行自动转换的.方法 JS的类型转换 Python的类型转换 字符转整数 parseInt(“100件”) ** 神奇 //100 int(“100”) 字符转浮点 parseFloat(“3.14”) float(“3.14”) 数值字符转换 Number(“3.14”) **只能纯数值 / 转换为字符串 3.14.toString() str(3.14) 自动转换 1+”200” 按字符串走 //1200
1-“200” 按数值走 //-199
原则：优先按字符串处理/ 4.4.6、原始值和引用值
根据数据类型不同，有的变量储存在栈中，有的储存在堆中。具体区别如下：
原始变量及他们的值储存在栈中，当把一个原始变量传递给另一个原始变量时，是把一个栈房间的东西复制到另一个栈房间，且这两个原始变量互不影响。
引用值是把 引用变量的名称储存在栈中，但是把其实际对象储存在堆中，且存在一个指针由变量名指向储存在堆中的实际对象，当把引用对象传递给另一个变量时，复制的其实是指向实际对象的指针， 此时 两者指向的 是同一个数据，若通过方法改变其中一个变量的值，则访问另一个变量时，其值也会随之加以改变；但若不是通过方法 而是通过 重新赋值 此时 相当于 重新开了一个房间 该值的原指针改变 ，则另外一个 值不会随他的改变而改变。
// 初始值类型
var a = “yuan”;
var b = a;
a = “alvin”;
console.log(a);//alvin
console.log(b);//yuan// 对象类型
var arr1=[1,2];
arr2 = arr1;
arr1.push(3);
console.log(arr1)// [1,2,3]
console.log(arr2);//[1,2,3]arr1=[4,5];
console.log(arr1);//[4,5]
console.log(arr2);//[1,2,3]5、运算符
- 运算符
/
//算术运算符
+ 数值相加
- 数值相减
数值相乘
/ 数值相除
% 数值求余
数值求幂
a++ 数值后自增1 a=a+1
++a 数值前自增1 a=a+1
b— 数值后自减1 b=b-1
—b 数值前自减1 b=b-1
//赋值运算符
=
+=
-=
*=
/=
%=
=//比较运算符,比较的结果要么是true, 要么是false
> 大于
< 小于
>= 大于或者等于
<= 小于或者等于
!= 不等于[计算数值]
== 等于[计算]!== 不全等[不仅判断数值,还会判断类型是否一致]
=== 全等[不仅判断数值,还会判断类型是否一致]//逻辑运算符
&& 并且 and 两边的运算结果为true,最终结果才是true
|| 或者 or 两边的运算结果为false,最终结果才是false
! 非 not 运算符的结果如果是true,则最终结果是false ,反之亦然.
//逻辑运算符进阶用法:
1. 实现短路
var a = false || 2 >>> a = 2
var a = true && “hehe” >>> a = “hehe”
2. 快速布尔化[把数据快速转换成布尔类型]
var a = 100
!!a >>> true//条件运算符[三目运算符]
条件?true:false
例如:
var age = 12;
var ret = age>=18?”成年”:”未成年”; // 相当于 python中的”成年” if age >= 18 else “未成年”
console.log(ret);
*/6、流程控制语句
编程语言的流程控制分为三种：
- 顺序结构(从上向下顺序执行)
- 分支结构
- 循环结构
之前我们学习的方式就是顺序执行，即代码的执行从上到下，一行行分别执行。
例如：console.log(“星期一”);
console.log(“星期二”);
console.log(“星期三”);4.6.1、分支结构
注意：
- 条件判断必须用括号包裹起来；
- 花括号必须对称，否则报错
- 语句之间应该用分号隔开，虽然换行也行，但是与出错可能性
if 分支语句
if (a>0) { var td = document.createElement("td"); table.appendChild(td); } else if (a > -1) { console.log("great") } else { console.log("excellent") }switch语句
switch(条件){
case 结果1:
满足条件执行的结果是结果1时,执行这里的代码..
break;
case 结果2:
满足条件执行的结果是结果2时,执行这里的代码..
break;
…..
default:
条件和上述所有结果都不相等时,则执行这里的代码
}
1、switch比if else更为简洁
2、执行效率更高。switch…case会生成一个跳转表来指示实际的case分支的地址，而这个跳转表的索引号与switch变量的值是相等的。从而，switch…case不用像if…else那样遍历条件分支直到命中条件，而只需访问对应索引号的表项从而到达定位分支的目的。
3、到底使用哪一个选择语句，代码环境有关，如果是范围取值，则使用if else语句更为快捷；如果是确定取值，则使用switch是更优方案。4.6.2、循环语句
while循环
while(循环的条件){
// 循环条件为true的时候,会执行这里的代码
}
循环案例：
var count = 0
while (count<10){
console.log(count);
count++;
}for循环 ```javascript // 循环三要素 for(1.声明循环的开始; 2.条件; 4. 循环的计数){ // 3. 循环条件为true的时候,会执行这里的代码 }
for(循环的成员下标 in 被循环的数据){ // 当被循环的数据一直没有执行到最后下标,都会不断执行这里的代码 }
// 方式1 for (var i = 0;i<10;i++){ console.log(i) }
// 方式2 这里特别坑，带着python的懒惰思维，怎么也想不到他这里i是序号,不是元素本身 var arr = [111,222,333] for (var ind in arr){ console.log(i,arr[ind]) }
- 退出循环（break和continue） ```javascript for (var i = 0;i<100;i++){ if (i===88){ continue // 退出当次循环 // break // 退出当前整个循环 } console.log(i) } // 作业： （1）计算1+2+3+...+100=？ （2）求20的阶乘值 var total = 0; for (var i=1; i<=100; i++) { total+= i; } console.log(total) var mult = 1; for (var i=1; i<=20; i++) { mult*= i; } console.log(mult)7、数组对象
- 创建数组 ```javascript // 创建方式1: var arrname = [元素0,元素1,….]; // var arr=[1,2,3];
// 创建方式2: var arrname = new Array(元素0,元素1,….);
// 数组长度 console.log( arr.length );
// 获取指定下标的成员 console.log( arr[arr.length-1] ); // 最后一个成员
// (1) pop() 出栈,删除最后一个成员作为返回值 var ret = arr.pop();
<br />// (2) push() 入栈,给数组后面追加成员<br />var arr = [1,2,3,4,5];<br />arr.push("a");<br />console.log(arr); // [1, 2, 3, 4, 5, "a"] // (3) shift是将数组的第一个元素删除<br />var arr = [1,2,3,4,5];<br />arr.shift()<br />console.log(arr); // [2, 3, 4, 5] // (4) unshift是将value值插入到数组的开始<br />var arr = [1,2,3,4,5];<br />arr.unshift("yuan")<br />console.log(arr); // ["yuan",1,2, 3, 4, 5] // (5) reverse() 反转排列<br />var arr = [1,2,3,4,5];<br />arr.reverse();<br />console.log(arr); // [5, 4, 3, 2, 1] // (6) slice(开始下标,结束下标) 切片,开区间 // (7) sort() 排序<br />var arr = [3,4,1,2,5,10];<br />console.log( arr ); // [3, 4, 1, 2, 5, 10]<br />arr.sort();<br />//<br />// // 这是字符的排序,不是数值的排序<br />console.log(arr); // [1, 10, 2, 3, 4, 5] // 数值升序<br />var arr = [3,4,1,2,5,10];<br />arr.sort(function(a,b){<br /> return a-b;<br />});<br />console.log(arr); // [1, 2, 3, 4, 5, 10] // 数值降序<br />var arr = [3,4,1,2,5,10];<br />arr.sort(function(a,b){<br /> return b-a;<br />});<br />console.log(arr); // [10, 5, 4, 3, 2, 1] // (8) splice(操作位置的下标,删除操作的成员长度,"替换或者添加的成员1","替换或者添加的成员2") 添加/删除指定的成员 "万能函数"<br />var arr1 = [1,2,3];<br />arr1.splice(1,1);<br />console.log(arr1); // 删除指定的1个成员 [1, 3] var arr2 = ["a","b","c","d"];<br />arr2.splice(2,0,"w","x","w"); // 添加<br />console.log(arr2); // ["a", "b", "w", "x", "w", "c", "d"] var arr3 = ["a","b","c"];<br />arr3.splice(1,1,"w");<br />console.log(arr3); // ["a", "w", "c"] // (9) concat() 把2个或者多个数组合并<br />var arr1 = [1,2,3];<br />var arr2 = [4,5,7];<br />var ret = arr1.concat(arr2);<br />console.log( ret ); // (10) join() 把数组的每一个成员按照指定的符号进行拼接成字符串<br />var str = "广东-深圳-南山";<br />var arr = str.split("-");<br />console.log( arr ); // ["广东", "深圳", "南山"]; var arr1 = ["广东", "深圳", "南山"];<br />var str1 = arr1.join("-");<br />console.log( str1 ); // 广东-深圳-南山 // (11) find() 高阶函数, 返回符合条件的第一个成员<br />var arr = [4,6,5,7];<br />var func = (num)=>{<br /> if(num%2===0){<br /> return num;<br /> }<br />};<br />var ret = arr.find(func);<br />console.log( ret ); // 4 // (12) filter() 高阶函数, 对数组的每一个成员进行过滤,返回符合条件的结果<br />var arr = [4,6,5,7];<br />function func(num){ // 也可以使用匿名函数或者箭头函数<br /> if(num%2===0){<br /> return num;<br /> }<br />}<br />var ret = arr.filter(func); // 所有的函数名都可以作为参数传递到另一个函数中被执行<br />console.log( ret ); // (13) map() 对数组的每一个成员进行处理,返回处理后的每一个成员<br />var arr = [1,2,3,4,5];<br />var ret = arr.map((num)=>{<br /> return num**3;<br />});<br />console.log( ret ); // [1, 8, 27, 64, 125] // (14) 其它方法<br />// includes 查询指定数据是否在数组中存在!<br />// indexOf() 查询指定数据在数组中第一次出现的位置<br />// isArray() 判断变量的值是否是数组<br /> - 遍历数组 var arr = [12,23,34]<br />for (var i in arr){<br /> console.log(i,arr[i])<br />} - 判断是否数组存在某个元素的方法 inArray (Jquery方法） ```html # 找到返回下标，否则返回-1，首先类型要匹配，整型和字符串不能匹配 $.inArray("a",["ab","b","c",'a'])7.1 object对象, js字典
字典的创建
var newdict = {"k1":"v1","k2":"v2"};字典的遍历方式
for (var key in newdict) { var item = newdict[key]; console.log(key); console.log(item); }跟python字典的区别
● 多了一个点式访问 ● 但是点式访问的键必须是字符串 ● 可以用类的方法添加属性值```javascript var person = new Object(); person.name = “alvin”; person.age = 18; 另一种方式是使用对象字面量表示法。对象字面量是对象定义的一种简写形式，目的在于简化创建包含大量属性的对象的过程。下面这个例子就使用了对象字面量语法定义了与前面那个例子中相同的person 对象： var person = {
name : "alvin", age : 18 };● object可以通过. 和 []来访问。 console.log(person[“age”]); console.log(person.age)
<a name="wDS64"></a> ### 8.2、json序列化和反序列化 JSON：JavaScript 对象表示法（JavaScript Object Notation），是一种轻量级的数据交换格式。易于人阅读和编写。<br /># json是一种数据格式, 语法一般是{}或者[]包含起来<br /># 内部成员以英文逗号隔开,最后一个成员不能使用逗号!<br /># 可以是键值对,也可以是列表成员<br /># json中的成员如果是键值对,则键名必须是字符串.而json中的字符串必须使用双引号圈起来<br /># json数据也可以保存到文件中,一般以".json"结尾.<br /># 前端项目中,一般使用json作为配置文件. {<br /> "name": "xiaoming",<br /> "age":12<br />} [1,2,3,4] {<br /> "name": "xiaoming",<br /> "age":22,<br /> "sex": true,<br /> "son": {<br /> "name":"xiaohuihui",<br /> "age": 2<br /> },<br /> "lve": ["篮球","唱","跳"]<br />}<br />js中也支持序列化和反序列化的方法：<br /><!DOCTYPE html><br /><html lang="en"><br /><head><br /> <meta charset="UTF-8"><br /> <title>Title</title><br /></head><br /><body><br /><script><br /> // js对象,因为这种声明的对象格式很像json,所以也叫json对象<br /> var data = {<br /> name: "xiaoming",<br /> age: 22,<br /> say: function(){<br /> alert(123);<br /> }<br /> }; // 把json对象转换成json字符串<br /> var ret = JSON.stringify(data);<br /> console.log(ret ); // {"name":"xiaoming","age":22} // 把json字符串转换成json对象<br /> var str = `{"name":"xiaoming","age":22}`;<br /> var ret = JSON.parse(str);<br /> console.log(ret);<br /></script><br /></body><br /></html> <a name="JAo6i"></a> ## 9、Date对象 - 创建Date对象 ```html //方法1：不指定参数 var nowd1=new Date(); console.log(nowd1.toLocaleString( )); //方法2：参数为日期字符串 var d2=new Date("2004/3/20 11:12"); console.log(d2.toLocaleString( )); var d3=new Date("04/03/20 11:12"); console.log(d3.toLocaleString( )); //方法3：参数为毫秒数 var d4=new Date(5000); console.log(d4.toLocaleString( )); console.log(d4.toUTCString()); //方法4：参数为年月日小时分钟秒毫秒 var d5=new Date(2004,2,20,11,12,0,300); console.log(d5.toLocaleString( ));//毫秒并不直接显示- 获取时间信息
获取日期和时间
getDate() 获取日 getDay () 获取星期 getMonth () 获取月（0-11） getFullYear () 获取完整年份 getYear () 获取年 getHours () 获取小时 getMinutes () 获取分钟 getSeconds () 获取秒 getMilliseconds () 获取毫秒 getTime () 返回累计毫秒数(从1970/1/1午夜)- 日期和时间的转换 ```html 日期和时间的转换: // 返回国际标准时间字符串 toUTCString()
// 返回本地格式时间字符串 toLocalString()
// 返回累计毫秒数(从1970/1/1午夜到本地时间) Date.parse(x)
// 返回累计毫秒数(从1970/1/1午夜到国际时间) Date.UTC(x)
练习：以2021年03月2日 14:1:43 星期二格式化输出当前时间 ```html function getCurrentDate(){ //1. 创建Date对象 var date = new Date(); //没有填入任何参数那么就是当前时间 //2. 获得当前年份 var year = date.getFullYear(); //3. 获得当前月份 js中月份是从0到11. var month = date.getMonth()+1; //4. 获得当前日 var day = date.getDate(); //5. 获得当前小时 var hour = date.getHours(); //6. 获得当前分钟 var min = date.getMinutes(); //7. 获得当前秒 var sec = date.getSeconds(); //8. 获得当前星期 var week = date.getDay(); //没有getWeek // 2014年06月18日 15:40:30 星期三 return year+"年"+changeNum(month)+"月"+day+"日 "+hour+":"+min+":"+sec+" "+parseWeek(week);
}//解决 自动补齐成两位数字的方法
function changeNum(num){ if(num < 10){ return "0"+num; }else{ return num; } } //将数字 0~6 转换成 星期日到星期六 function parseWeek(week){ var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]; // 0 1 2 3 ............. return arr[week]; } console.log(getCurrentDate());- 怎么把字符串解析为日期 ```html function parseMyDate(date):
<a name="yPJAb"></a> ## 10、Math对象 // Number对象的内置方法<br />// toFixed(x) 保留小数位<br />var num = 100.3;<br />var ret = num.toFixed(2);<br />console.log(num); // 100.3<br />console.log(ret); // 100.30 // Math对象的内置方法<br />// abs(x) 返回数值的绝对值<br />// var num = -10;<br />console.log( Math.abs(num) ); // 10 // ceil(x) 向上取整<br />var num = 10.3;<br />console.log( Math.ceil(num) ); // 11 // floor(x) 向下取整<br />var num = 10.3;<br />console.log( Math.floor(num) ); // 10 // max(x,y,z,...,n)<br />console.log( Math.max(3,56,3) ); // 56<br />// min(x,y,z,...,n) // pow(x,y)<br />console.log(Math.pow(3, 2)); // 相等于 3**2<br />console.log( 3**2 ); // 使用这个,上面废弃 // random() 生成0-1随机数<br />console.log( Math.random() ); // 生成0-10之间的数值<br />console.log( Math.random() * 10 ); // round(x) 四舍五入<br />// 生成0-10之间的整数<br />console.log( Math.round( Math.random() * 10 ) ); - 练习：获取1-100的随机整数，包括1和100 var num=Math.random();<br />num=num*100;<br />num=Math.round(num);<br />console.log(num) <a name="wJvKm"></a> ## 11、Function 对象 函数在程序中代表的就是一段具有功能性的代码，可以让我们的程序编程更加具有结构性和提升程序的复用性,也能让代码变得更加灵活强大 <a name="lEIMJ"></a> ### 11.1、声明函数 // 函数的定义方式1<br />function 函数名 (参数){<br /> 函数体;<br /> return 返回值;<br />}<br />功能说明：<br /> 可以使用变量、常量或表达式作为函数调用的参数<br /> 函数由关键字function定义<br /> 函数名的定义规则与标识符一致，大小写是敏感的<br /> 返回值必须使用return<br /> <br />// 函数的定义方式2<br /> <br />用 Function 类直接创建函数的语法如下：<br />var 函数名 = new Function("参数1","参数n","function_body"); 虽然由于字符串的关系，第二种形式写起来有些困难，但有助于理解函数只不过是一种引用类型，它们的行为与用 Function 类明确创建的函数行为是相同的。 <br /> <a name="bBJ1u"></a> ### 11.2、函数调用 //f(); --->OK<br /> function f(){<br /> console.log("hello") }<br /> f() //----->OK 不同于python，js代码在运行时，会分为两大部分———预编译 和 执行阶段。 - 预编译：会先检测代码的语法错误，进行变量、函数的声明。 - 执行阶段：变量的赋值、函数的调用等，都属于执行阶段。 <a name="MOQ9E"></a> ### 11.3、函数参数 （1） 参数基本使用<br />// 位置参数<br />function add(a,b){<br /> console.log(a);<br /> console.log(b);<br />}<br />add(1,2)<br />add(1,2,3)<br />add(1) // 默认参数<br />function stu_info(name,gender="male"){<br /> console.log("姓名："+name+" 性别："+gender)<br />} stu_info("yuan")<br />（2）函数中的arguments对象<br />function add(a,b){ console.log(a+b);//3<br /> console.log(arguments.length);//2<br /> console.log(arguments);//[1,2] }<br />add(1,2) // arguments的应用1 <br />function add2(){<br /> var result=0;<br /> for (var num in arguments){<br /> result+=arguments[num]<br /> }<br /> console.log(result) } add2(1,2,3,4,5) // arguments的应用2 function f(a,b,c){<br /> if (arguments.length!=3){<br /> throw new Error("function f called with "+arguments.length+" arguments,but it just need 3 arguments")<br /> }<br /> else {<br /> alert("success!")<br /> }<br />} f(1,2,3,4,5) <a name="kSviy"></a> ### 11.4、函数返回值 在函数体内，使用 return 语句可以设置函数的返回值。一旦执行 return 语句，将停止函数的运行，并运算和返回 return 后面的表达式的值。如果函数不包含 return 语句，则执行完函数体内每条语句后，返回 undefined 值。<br />function add(x,y) {<br /> return x+y<br /> } var ret = add(2,5);<br />console.log(ret)<br />1、在函数体内可以包含多条 return 语句，但是仅能执行一条 return 语句<br />2、函数的参数没有限制，但是返回值只能是一个；如果要输出多个值，可以通过数组或对象进行设计。 <a name="NspxC"></a> ### 11.5、匿名函数 匿名函数，即没有变量名的函数。在实际开发中使用的频率非常高！也是学好JS的重点。<br /> // 匿名函数赋值变量<br /> var foo = function () {<br /> console.log("这是一个匿名函数！")<br /> }; // 匿名函数的自执行<br /> (function (x,y) {<br /> console.log(x+y);<br /> })(2,3) // 匿名函数作为一个高阶函数使用<br /> function bar() { return function () {<br /> console.log("inner函数！")<br /> }<br /> } bar()()<br /> <br />使用匿名函数表达式时，函数的调用语句，必须放在函数声明语句之后！ <a name="ebHND"></a> ### 11.6、函数作用域 作用域是JavaScript最重要的概念之一，想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理。<br />任何程序设计语言都有作用域的概念，简单的说，作用域就是变量可访问范围，即作用域控制着变量与函数的可见性和生命周期。在JavaScript中，变量的作用域有全局作用域和局部作用域两种。<br />// 局部变量,是在函数内部声明,它的生命周期在当前函数被调用的时候, 当函数调用完毕以后,则内存中自动销毁当前变量<br />// 全局变量,是在函数外部声明,它的生命周期在当前文件中被声明以后就保存在内存中,直到当前文件执行完毕以后,才会被内存销毁掉<br />首先熟悉下var<br /> var name = "yuan"; // 声明一个全局变量 name并赋值”yuan“<br /> name = "张三"; // 对已经存在的变量name重新赋值 ”张三“<br /> console.log(name); age = 18 // 之前不存在age变量，这里等同于var age = 19 即声明全局变量age并赋值为18 var gender = "male"<br /> var gender = "female" // 原内存释放与新内存开辟，指针指向新开辟的内存<br /> console.log(gender)<br />作用域案例：<br />var num = 10; // 在函数外部声明的变量, 全局变量<br /> function func(){<br /> // num = 20; // 函数内部直接使用变量,则默认调用了全局的变量,<br /> //var num = 20; // 函数内部使用var 或者 let声明的变量则是局部变量<br /> // 函数内部直接使用变量,则默认调用了全局的变量,<br /> // 使用变量的时候,解释器会在当前花括号范围值搜索是否有关键字var 或者 let 声明了变量,如果没有,则一层一层往外查找最近的声明<br /> // 如果最终查找不到,则直接报错! 变量名 is not define!<br /> console.log("函数内部num：",num)<br /> }<br />func();<br />console.log("全局num：",num); <a name="gATFi"></a> ### 12. 文件对象 - 获取文件对象 ```html var file_obj = $('#upload-file')[0].files[0]; //注意： 1，files是DOM对象的属性，所以要在JQuery的对象后面加[0] 2. files返回一个文件列表- 文件对象的属性
console.log(file_obj.name); //文件名称 console.log(file_obj.size); //文件大小 console.log(file_obj.lastModified); // 最后修改日期，从1970年1.1日开始的毫秒数
FileReader实例方法
FileReader 的实例具有以下可操作的方法:
方法名称 描述 使用示例 abort() 手动终止读取操作，只有当 readyState 为 1 时才能调用，调用后，readyState 值为 2 reader.abort() readAsArrayBuffer(blob) 读取指定的 Blob 或 File 对象。读取操作完成后(触发loadend事件)，result属性将包含一个 ArrayBuffer 对象表示所读取的文件的数据。 reader.readAsArrayBuffer(blob) readAsDataURL(blob) 读取指定的 Blob 或 File 对象。读取操作完成后(触发loadend事件)，result属性将包含一个 data:URL 格式的字符串(base64编码) reader.readAsArrayBuffer(file) readAsBinaryString(blob) 已废弃，用 readAsArrayBuffer 代替 — readAsText(blob[, encoding]) 将 Blob 或者 File 对象转根据特殊的编码格式转化为内容(字符串形式), 默认编码是 utf-8 reader.readAsArrayBuffer(blob) 读取本地图片示例:
<input type="file" id='file' accept="image/png, image/jpg, image/jpeg, image/gif" />><br />><img src="" alt="Image preview..."> var preview = document.querySelector('img'); var reader = new FileReader(); reader.addEventListener("load", function () { preview.src = reader.result;}, false); document.getElementById('file').addEventListener('change', function (event) { var file = this.files[0]; if (file) { reader.readAsDataURL(file); } });11.7、JS的预编译
js运行三个阶段：
- 语法分析
- 预编译
- 解释执行
语法分析就是JS引擎去检查你的代码是否有语法错误，解释执行就是执行你的代码。最重要最需要理解的就是第二个环节预编译，简单理解就是在内存中开辟一些空间，存放一些变量与函数 。
预编译可分为全局预编译和局部预编译。- 在js脚本加载之后，会先通篇检查是否存在低级错误；
- 在语法检测完之后，便进行全局预编译；
- 在全局预编译之后，就解释一行，执行一行；
- 当执行到函数调用那一行前一刻，会先进行函数预编译，再往下执行。
全局预编译的3个步骤：
- 创建GO对象（Global Object）全局对象，即window对象。
- 找变量声明，将变量名作为GO属性名，值为undefined
- 查找函数声明，作为GO属性，值赋予函数体
局部预编译的4个步骤：
- 创建AO对象（Activation Object）执行期上下文。
- 找形参和变量声明，将变量和形参名作为AO属性名，值为undefined
- 将实参值和形参统一。
- 在函数体里面找函数声明，值赋予函数体。
GO对象是全局预编译，所以它优先于AO对象所创建和执行
案例分析：
全局预编译
GO/window = {
a: undefined,
c: undefined，
foo: function(a) {
console.log(a);
var a = 123;
console.log(a);
function a() {}
console.log(a);
var b = function() {}
console.log(b);
function d() {}
}
}解释执行代码（直到执行调用函数foo(20)语句）
GO/window = {
a: 10,
c: function (){
console.log(“I at C function”);
}
test: function(a) {
console.log(a);
var a = 123;
console.log(a);
function a() {}
console.log(a);
var b = function() {}
console.log(b);
function d() {}
}
}调用函数foo(20)前发生布局预编译
// 局部预编译前两步：
AO = {
a:undefined,
b:undefined,
}// 局部预编译第三步：
AO = {
a:20,
b:undefined,
}
// 局部预编译第四步：
AO = {
a:function a() {},
b:undefined
d:function d() {}
}
预编译总结：- 函数声明整体提升-(具体点说，无论函数调用和声明的位置是前是后，系统总会把函数声明移到调用前面）
- 变量 声明提升-(具体点说，无论变量调用和声明的位置是前是后，系统总会把声明移到调用前，注意仅仅只是声明，所以值是undefined）
面试题：
var num3 = 10;
function func3(){
console.log(num3);
var num3 = 20;
}
func3();
console.log(num3);/*
// 全局编译 GO{<br /> num3:undefined,<br /> func3: function (){<br /> console.log(num3);<br /> var num3 = 20;<br /> } // 全局执行<br /> var num3 = 10;<br /> GO{<br /> num3:10,<br /> func3: function (){<br /> console.log(num3);<br /> var num3 = 20;<br /> } // 局部编译<br /> func3.AO{<br /> num3:undefined,<br /> } // 局部执行 func3.AO{<br /> num3:20,<br /> } // 全局执行 GO.num3 = 10<br /> }day28 JavaScript(2)
1、BOM对象
BOM:Broswer object model,即浏览器提供我们开发者在javascript用于操作浏览器的对象。
4.13.1、window对象
- 窗口方法
// BOM Browser object model 浏览器对象模型
// js中最大的一个对象.整个浏览器窗口出现的所有东西都是window对象的内容.
console.log( window );// alert() 弹出一个警告框
window.alert(“hello”);//confirm 弹出一个确认框,点击确认,返回true, 点击取消,返回false
var ret = confirm(“您确认要删除当前文件么?”);// 弹出一个消息输入框,当点击确认以后,则返回可以接收到用户在输入框填写的内容.如果点击取消,则返回null
var ret = prompt(“请输入一个内容”,”默认值”);// close() 关闭当前浏览器窗口
window.close();//打开一个新的浏览器窗口 window.open / open(url, ‘_blank’)
window.open("http://www.baidu.com","_blank","width=800px,height=500px,left=200px,top=200px"); # _blank 新窗口（默认） _self 替换现在窗口 # 可以设定窗口的大小和位置
- 定时方法
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。而setTimeout是在指定的毫秒数后调用code一次。
// 设置循环定时器 var ID = window.setInterval(func,millisec) // 每millisec毫秒执行一次func -- 这里的func不能带括号，也不能带参数，要带参数只有下面一种嵌套函数的写法： var ID = window.setInterval(function(){ f1(a,b); },1000) // 取消循环定时器 window.clearInterval(ID); // 设置单次定时器 var ID = window.setTimeout(code,millisec) // millisec毫秒后执行code一次 // 取消单次定时器 window.clearTimeout(ID);— 系统设定是：先跑秒数，再执行func
— 返回值是定时器的ID显示时间案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input id="ID1" type="text" > <button onclick="begin()">开始</button> <button onclick="end()">停止</button> <script> function showTime(){ var nowd2=new Date().toLocaleString(); var temp=document.getElementById("ID1"); temp.value=nowd2; } var ID; function begin(){ // setInterval函数先执行延迟秒数，然后再执行func，所以这里做这个操作 if (ID==undefined){ showTime(); ID=setInterval(showTime,1000); } } function end(){ clearInterval(ID); ID=undefined; } </script> </body> </html>4.13.2、Location ( 地址栏)对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button onclick="func1()">查看Location对象</button> <button onclick="func2()">跳转到百度</button> <button onclick="func3()">F5</button> <script> function func1(){ console.log( location ); } // 地址栏对象控制和操作地址栏 // 所谓的地址就是当前页面所在地址 // 地址结构: // 协议://域名:端口/路径/文件名?查询字符串#锚点 console.log( `协议=>${location.protocol}` ); console.log( `端口=>${location.port}` ); console.log( `域名=>${location.hostname}` ); console.log( `域名:端口=>${location.host}` ); console.log( `路径=>${location.pathname}` ); console.log( `查询字符串=>${location.search}` ); console.log(`完整的地址信息=>${location.href}`); function func2(){ // location.href="http://www.baidu.com"; // 页面跳转 location.assign("http://www.baidu.com"); // 页面跳转 } function func3(){ location.reload(); // 刷新页面 } </script> </body> </html>解析地址栏参数的方法
主要方式是通过location.search 方法
//首先分析地址栏的格式 www.baidu.com?par=v1&par2=v2 var query1 = location.search // 获取地址栏以？开始的字符串，包括问号 '?par=v1&par2=v2' var query2 = location.search.substring(1) //获取去掉第一位问号的子字符串 'par=v1&par2=v2' //写一个方法，获取其中的参数数值，如果没有返回false 先用&来分割（split字符串），然后用=分割字符串13.3、本地存储对象
使用存储对象的过程中, 对象数据会根据域名端口进行保存的,所以 js不能获取当前页面以外其他域名端口保存到本地的数据。也就是说,我们存储对象获取数据只能是自己当前端口或者域名下曾经设置过的数据,一旦端口或者域名改变,则无法获取原来的数据。
localStorage 本地永久存储
localStorage.setItem(“变量名”,”变量值”); 保存一个数据到存储对象
localStorage.变量名 = 变量值 保存一个数据到存储对象localStorage.getItem(“变量名”) 获取存储对象中保存的指定变量对应的数据
localStorage.变量名 获取存储对象中保存的指定变量对应的数据localStorage.removeItem(“变量名”) 从存储对象中删除一个指定变量对应的数据
localStorage.clear() 从存储对象中删除所有数据sessionStorage 本地会话存储
sessionStorage.setItem(“变量名”,”变量值”); 保存一个数据到存储对象
sessionStorage.变量名 = 变量值 保存一个数据到存储对象sessionStorage.getItem(“变量名”) 获取存储对象中保存的指定变量对应的数据
sessionStorage.变量名 获取存储对象中保存的指定变量对应的数据sessionStorage.removeItem(“变量名”) 从存储对象中删除一个指定变量对应的数据
sessionStorage.clear() 从存储对象中删除所有数据
练习：
<!DOCTYPE html>
localStorage和sessionStorage的区别：
1、localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。
2、他们均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。
3、localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。
4、不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标 签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。2、DOM对象(JS核心)
DOM document Object Model 文档对象模型
// 整个html文档,会保存一个文档对象document
// console.log( document ); // 获取当前文档的对象2.1、查找标签
- 直接查找标签
document.getElementsByTagName(“标签名”)
document.getElementById(“id值”)
document.getElementsByClassName(“类名”)
1、方法的返回值是dom对象还是数组
2、document对象可以是任意dom对象，将查询范围限制在当前dom对象- 导航查找标签
elementNode.parentElement // 父节点标签元素
elementNode.children // 所有子标签
elementNode.firstElementChild // 第一个子标签元素
elementNode.lastElementChild // 最后一个子标签元素
elementNode.nextElementSibling // 下一个兄弟标签元素
elementNode.previousElementSibling // 上一个兄弟标签元素- CSS选择器查找
document.querySelector(“css选择器”) //根据css选择符来获取查找到的第一个元素，返回标签对象（dom对象）
document.querySelectorAll(“css选择器”); // 根据css选择符来获取查找到的所有元素,返回数组// 直接查找 var ele = document.getElementById("i1"); // ele就是一个dom对象 console.log(ele); var eles = document.getElementsByClassName("c1"); // eles是一个数组 [dom1,dom2,...] console.log(eles); var eles2 = document.getElementsByTagName("div"); // eles2是一个数组 [dom1,dom2,...] console.log(eles2); var outer = document.getElementsByClassName("outer")[0]; var te = outer.getElementsByClassName("c1"); console.log(te); // 导航查找 var c5 = document.getElementsByClassName("c5")[0]; console.log(c5); // c5是一个DOM对象 console.log(c5.parentElement.lastElementChild); // 返回值是dom对象 console.log(c5.parentElement.children); // 返回值是dom对象数组 console.log(c5.nextElementSibling.nextElementSibling); console.log(c5.parentElement.children); // css选择器 var dom = document.querySelector(".c2 .c3 .c5"); console.log(":::",dom);2.2、绑定事件
- 静态绑定 ：直接把事件写在标签元素中。 ```javascript
click``` - 动态绑定：在js中通过代码获取元素对象,然后给这个对象进行后续绑定。 **如果先定义了功能函数，后续绑定，函数名后面不要括号，否则就变成执行了结果了。 ** ```javascript function foo() { console.log("okay") } var btn.onlick = foo; ``` ```javascript试一试!
``` 一个元素本身可以绑定多个不同的事件, 但是如果多次绑定同一个事件,则后面的事件代码会覆盖前面的事件代码
多个标签绑定事件， 可以采用循环的方式。 ### 2.3、操作标签 <标签名 属性1=“属性值1” 属性2=“属性值2”……>文本 - **文本操作** ```python点击``` - **value操作** 像input标签，select标签以及textarea标签是没有文本的，但是显示内容由value属性决定 ```python ``` ```python ``` - data属性 这是一个隐含的属性，可以存用户不可见，但是JS可见的内容，具体语法如下： ```python //data属性的增删改查： //set $("#save").data("currentTr", $currentTr); # 可以把一个对象赋值给这个属性 //get var $currentTr = $(this).data("currentTr"); //del $(this).removeData("currentTr") ``` - **css样式操作**Hello world!
属性操作
elementNode.setAttribute("属性名","属性值") elementNode.getAttribute("属性名") elementNode.removeAttribute("属性名");并不是所有属性都可以像value那样操作。
- class属性操作**
案例：tab切换elementNode.className elementNode.classList.add (class属性增加一个空格值，没有就新建） elementNode.classList.remove (class属性移除一个空格值，没有什么都不做）
<script> var titles = document.querySelectorAll(".tab-title li"); var contents = document.querySelectorAll(".tab-content li"); for (var i = 0;i<titles.length;i++){ titles[i].onclick = function () { // (1) 触发事件标签拥有current样式 for (var j = 0;j<titles.length;j++){ titles[j].classList.remove("current") } console.log(this); this.classList.add("current"); // (2) 显示点击title对应的详情内容 var index = this.getAttribute("index"); // console.log(this.getAttribute("index")); // console.log(contents[index]); for (var z = 0;z<contents.length;z++){ contents[z].classList.add("hide"); } contents[index].classList.remove("hide"); } } </script>- 节点操作
node.remove() 这个功能是什么意思？ 和removeChild有啥区别？
// 创建节点：
document.createElement(“标签名”)
// 插入节点
somenode.appendChild(newnode) // 追加一个子节点（作为最后的子节点）
somenode.insertBefore(newnode,某个节点) // 把增加的节点放到某个节点的前边
// 删除节点
somenode.removeChild()：获得要删除的元素，通过父元素调用删除
//替换节点
somenode.replaceChild(newnode, 某个节点);
案例：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button class="add_btn">添加节点</button> <button class="del_btn">删除节点</button> <button class="replace_btn">替换节点</button> <div class="c1"> <h3>hello JS!</h3> <h3 class="c2">hello world</h3> </div> <script> var add_btn = document.querySelector(".add_btn"); var del_btn = document.querySelector(".del_btn"); var replace_btn = document.querySelector(".replace_btn"); var c1 = document.querySelector(".c1"); var c2 = document.querySelector(".c2"); add_btn.onclick = function () { // 创建节点 var ele = document.createElement("img"); // <img> ele.src = "https://img2.baidu.com/it/u=1613029778,1507777131&fm=26&fmt=auto&gp=0.jpg" console.log(ele); // 添加节点 // c1.appendChild(ele); c1.insertBefore(ele, c2) }; del_btn.onclick = function () { // 删除子节点 c1.removeChild(c2); }; replace_btn.onclick = function () { // 创建替换节点 var ele = document.createElement("img"); // <img> ele.src = "https://img2.baidu.com/it/u=1613029778,1507777131&fm=26&fmt=auto&gp=0.jpg" console.log(ele); // 替换节点 c1.replaceChild(ele, c2); } </script> </body> </html>2.4、常用事件
onload事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> // 这一段js代码可以前置 因为有onload的设置 window.onload = function (){ ele = document.getElementById("i1") console.log(ele.innerHTML); // 这一段js代码可以前置 } </script> </head> <body> <div id="i1">yuan</div> </body> </html>onsubmit事件 ```html <!DOCTYPE html>
``` - onkey事件 ```javascript ``` - onblur和onfocus事件 ```javascript ``` - 冒泡事件 ```javascript使用了mouseout事件↓第一行第二行第三行``` ## 3、总结与作业 - 总结 - 作业 ```html员工管理系统
姓名 年龄 部门 删除 编辑 张三 23 销售 李四 21 销售 王五 23 运营 <a name="dZNbo"></a> ### 员工信息管理流程图  <a name="sNbL7"></a> # day29 jQuery <a name="bolr5"></a> ## 1、jQuery介绍 - jQuery是什么 jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（_或JavaScript框架_）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。<br />jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等 - jQuery的版本 目前在市场上, 1.x , 2.x, 3.x 功能的完善在1.x, 2.x的时候是属于删除旧代码,去除对于旧的浏览器兼容代码。3.x的时候增加es的新特性以及调整核心代码的结构 - jQuery的引入 根本上jquery就是一个写好的js文件,所以想要使用jQuery的语法必须先引入到本地 ```javascript <!-- 远程导入--> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <!--本地导入--> <script src="jquery3.6.js"></script>- jQuery对象和dom对象的关系 ```javascript
控制台— jQuery.fn.init [img.avatar.lg.rounded-circle.img-thumbnail, prevObject: jQuery.fn.init(1)]
<a name="sHjOM"></a> ### 2.2、导航查找 ```javascript // 查找子代标签： $("div").children(".test") $("div").find(".test") // 向下查找兄弟标签 $(".test").next() $(".test").nextAll() $(".test").nextUntil() // 向上查找兄弟标签 $("div").prev() $("div").prevAll() $("div").prevUntil() // 查找所有兄弟标签 $("div").siblings() $('div').silbings('.active') # 进步筛选带有active类的siblings $('#load_info-id-3').parent().siblings('#discharge_port-id-3') 这样也可以 // 查找父标签： $(".test").parent() $(".test").parents() $(".test").parentUntil() //查找元素在兄弟元素中的序号 ----------------------- $("li").index() // 没有firstchild或者lastchild方法，只能在查询时筛选 ---------------------- // 只能借用children方法来,可以在children的参数里面筛选，第几个。 $(".test").children(":first")3、jQuery的绑定事件
切记不要不小心重复在一个按钮上绑定事件，导致重复操作
两个解决方案：- 不再一个绑定事件里面再绑定另外一个事件，单独在外部绑定
- 如果确实要在内部绑定，可以先做一个解绑的动作，如下：
代码
JQ方法： $().off("事件名"); JS方法： dom.onclick = null; JS方法二： dom.removeEventListener('click', clickHandler); -- clickHandler是回调函数，执行完remove动作以后再执行回调事件绑定的三个方法：
三种用法: 1. on 和 off // 绑定事件 $().on("事件名",匿名函数) 事件委派只能用on 2. 直接通过事件名来进行调用 $().事件名(匿名函数) 3. 组合事件,模拟事件 $().ready(匿名函数) // 入口函数 $().hover(mouseover, mouseout) // 是onmouseover和 onmouseout的组合 $().trigger(事件名) // 用于让js自动触发指定元素身上已经绑定的事件案例1：绑定取消事件
<p>限制每次一个按钮只能投票3次</p> <button id="zan">点下赞(<span>10</span>)</button> <script> let zan = 0; $("#zan").click(function(){ $("#zan span").text(function(){ zan++; let ret = parseInt($(this).text())+1; if(zan >= 3){ $("#zan").off("click"); // 事件解绑 } return ret; }); }) </script>案例2：模拟事件触发
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-1.11.0.js"></script> <style> input[type=file]{ display: none; } .upload{ width: 180px; height: 44px; border-radius: 5px; color: #fff; text-align: center; line-height: 44px; background-color: #000000; border: none; outline: none; cursor: pointer; } </style> </head> <body> <input type="file" name="avatar"> <button class="upload">上传文件</button> <script> $(".upload").on("click", function(){ $("input[type=file]").trigger("click"); // trigger模拟事件的触发，相当于在这里点击了input标签 }); </script> </body> </html>JQuery的each循环
$(".class").each(function(i) { console.log($(this),i) -- this: 选择器结果里面的每个dom对象 -- i: this在选择器结果列表里面的序号 })each循环的第二种用法：
$.each(items, function(index,item){ 函数体}) - items是数据列表 - index，item分别是items里面的每一项的序号和数据项 - 函数体里面就可以对循环数据进行分别处理4、jQuery的操作标签
- data方法
可以给标签添加一个隐藏属性，且通过这个这隐藏属性传递一个对象，语法：
$("#id").data("currentVal") -- 获取 currentVal的值 $("#id").data("currentVal", $item) -- 把$item对象赋值给currentVal 可用于复杂数据的传递和取送案例：员工信息编辑弹出模态框的时候，把数据隐式传到save按钮
var username = $(this).parent().parent().find('td').eq(1).text(); var age = $(this).parent().parent().find('td').eq(2).text(); // 由于新增和编辑按钮公用modal框，所以，通过加属性的方式做区分 var $currentTr = $(this).parent().parent(); $("#save").data("currentTr", $currentTr);用JQ操作标签的案例，要点：
- children(“:first”) 筛选子节点方法
- removeClass(“btn-primary”).addClass(“btn-warning”) 添加删除class属性的链式操作
<input type='text' value='${temp}' >直接文本式创建节点用反引号，且${temp}格式化变量的时候前后不能有空格<script> $edit_btn = $("#name").next().children(":first") $edit_btn.click(function () { $btn.html("保存"); $btn.removeClass("btn-primary").addClass("btn-warning"); var temp = $("#name").html(); $("#name").html(`<input type='text' value='${temp}' >`) }) </script>
- 文本操作 html和text ```html $(“选择符”).html() // 读取指定元素的内容,如果$()函数获取了有多个元素,则提取第一个元素 $(“选择符”).html(内容) // 修改内容,如果$()函数获取了多个元素, 则批量修改内容，直接替换整个标签下的html代码
$(“选择符”).text() // 效果同上,但是获取的内容是纯文本,不包含html代码 $(“选择符”).text(内容) // 效果同上,但是修改的内容中如果有html文本,在直接转成实体字符,而不是html代码
- value操作 val() $().val() 针对button这一类表单控件的取值和赋值 ```javascript <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery3.6.js"></script> <script> $(function () { $("#i1").blur(function () { // 获取jquery对象的value属性值 console.log(this.value); console.log($(this).val()); // 设置value属性值 $(this).val("hello world") }); $("#i3").change(function () { console.log(this.value); console.log($(this).val()); $(this).val("guangdong"); }); console.log($("#i2").val()); console.log($("#i2").val("hello pig!")) }) </script> </head> <body> <input type="text" id="i1"> <select id="i3"> <option value="hebei">河北省</option> <option value="hubei">湖北省</option> <option value="guangdong">广东省</option> </select> <p> <textarea name="" id="i2" cols="30" rows="10">123</textarea></p> </body> </html>- 获取焦点 focus
//把鼠标焦点移动到回复框 $("#comment-content").focus();
- 属性操作 attr / prop ```javascript //读取属性值 $(“选择符”).attr(“属性名”); // 获取非表单元素的属性值,只会提取第一个元素的属性值 $(“选择符”).prop(“属性名”); // 表单元素的属性,只会提取第一个元素的属性值
//操作属性 $(“选择符”).attr(“属性名”,”属性值”); // 修改非表单元素的属性值,如果元素有多个,则全部修改
//删除属性 $(“选择符”).removeAttr(“属性名”)
$(“选择符”).prop(“属性名”,”属性值”); // 修改表单元素的属性值,如果元素有多个,则全部修改
$(“选择符”).attr({‘属性名1’:’属性值1’,’属性名2’:’属性值2’,…..}) $(“选择符”).prop({‘属性名1’:’属性值1’,’属性名2’:’属性值2’,…..}) */ <!DOCTYPE html>
<script src="jquery3.6.js"></script>
``` - css样式操作 css() ```javascript // 获取样式 $().css("样式属性"); // 获取元素的指定样式属性的值,如果有多个元素,只得到第一个元素的值 //操作样式 $().css("样式属性","样式值").css("样式属性","样式值"); $().css({"样式属性1":"样式值1","样式属性2":"样式值2",....}) $().css("样式属性":function(){ // 其他代码操作 return "样式值"; }); ``` - class 属性操作 ```javascript $().addClass("class1 class2 ... ...") // 给获取到的所有元素添加指定class样式, 如果已经存在就不重复添加 $().removeClass("class1 class2") // 给获取到的所有元素删除指定class样式 $().toggleClass() // 给获取到的所有元素进行判断,如果拥有指定class样式的则删除,如果没有指定样式则添加 京东售后服务tab切换案例jQuery版本：选择 姓名 年龄 张三 23 李四 23 王五 23 ``` - 判断DOM对象的class是否含有某属性（hasClass()) ```python jQuery 属性操作 - hasClass() 方法 检查第一个- 商品介绍
- 规格与包装
- 售后保障
- 商品评论
- 商品介绍…
- 规格与包装…
- 售后保障…
- 商品评论…
元素是否包含 "intro" 类： $("button").click(function(){ alert($("p:first").hasClass("intro")); }); ``` - 节点操作 ```javascript //创建一个jquery标签对象 $("
") //内部插入 $("").append(content|fn) // $("p").append("Hello"); $("").appendTo(content) // $("p").appendTo("div"); $("").prepend(content|fn) // $("p").prepend("Hello"); $("").prependTo(content) // $("p").prependTo("#foo"); //外部插入 $("").after(content|fn) // ("p").after("Hello"); $("").before(content|fn) // $("p").before("Hello"); $("").insertAfter(content) // $("p").insertAfter("#foo"); $("").insertBefore(content) // $("p").insertBefore("#foo"); //替换 $("").replaceWith(content|fn) // $("p").replaceWith("Paragraph. "); //删除 $("").empty() $("").remove([expr]) //复制 $("").clone([Even[,deepEven]]) ``` ```javascript 案例1：
``` ```javascript 案例2：clone案例hello JS!
hello world
``` - JQuery的字符串格式化操作 ${变量名} ```html --反引号之间可以进行JQuery的格式化操作 (跟波浪号在同一个键上） -- ${变量名} `
文章...
案例2：位置偏移 <!DOCTYPE html>
|
属性： | ||||
| ${name} | ${age} | ${dept} |
若有收获，就点个赞吧
0 人点赞
