五、前端三剑客

前言

1、CS架构和BS架构

  • CS模式

C/S 就是Client/Server 的缩写，是客户端和服务器架构。C/S结构下，客户机必须要下载专门的软件，才可以享受到服务端的服务。

  • BS模式

B/S 就是Browser/Server的缩写，是浏览器和服务器架构。B/C是特殊的C/S架构，浏览器就是B/S结构最主要的客户端，而网站是B/S结构的软件。而B/S结构下，客户机上只要安装一个浏览器（Browser），就可以在任何地方进行操作而不用安装任何专门的软件。

2、网页构成

W3C标准是一系列标准的集合。网页主要由三部分组成：

  • 结构（Structure）：HTML --> XHTML --> XML（骨骼架构）
  • 表现（Presentation）：CSS（着装、渲染、定位）
  • 行为（Behavior）：js（动态效果）--> jquery、vue（组件：对js的封装、实现）

一个完整的JavaScript包含三个部分：ECMAScript（标准语法）、BOM（浏览器对象模型）以及DOM

025 HTML：超文本标记语言

1、web开发

1.1、最简单的web应用程序

# 基于应用层协议：http协议
import socket

sock = socket.socket()
sock.bind(("127.0.0.1", 8800))
sock.listen(5)

while 1:
    print("server is working...")
    conn, addr = sock.accept() # 三次握手：建立连接
    # 接收request请求
    recv_data = conn.recv(1024)
    print(recv_data.decode())
    # 返回response响应
    conn.send(b"HTTP/1.1 200 OK \r\n\r\n welcome to web world!")
    conn.close()

sock.close()

1.2、HTTP协议

1.2.1 、简介

HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写，用于万维网（WWW:World Wide Web ）服务器与本地浏览器之间传输超文本的传送协议。HTTP是一个属于应用层的面向对象协议，工作于客户端-服务端架构之上。浏览器作为HTTP客户端，通过URL向HTTP服务端（WEB服务器）发送所有请求。Web服务器根据接收到的请求，向客户端发送响应信息。

1.2.2、 http协议特性

  • 基于TCP/IP协议：http协议是基于TCP/IP协议（网路层）之上的应用层协议。
  • 基于请求－响应模式：请求从客户端发出，最后服务器端响应此请求并返回。
  • 无状态保存：HTTP是一种不保存状态，即无状态(stateless)的协议，对于发送过的请求或响应都不做持久化处理。目的是为了更快地处理大量事务，确保协议的可伸缩性。为了实现期望的保持状态功能，于是引入了Cookie技术。
    • 不保存谁在什么时间发了什么内容
      • 优点：效率高、省资源
      • 缺点：重复验证身份（cookie来解决）
    • 无状态协议有两个显著的好处
      • 第一是容易实现高并发（发邮件就是典型的无状态协议）
      • 第二是实现诸如代理、转发、过滤等机制非常简单，而且不容易出错（打电话则属于有状态协议）
  • 无连接：限制每次连接只处理一个请求。服务器处理完客户的请求并收到客户的应答后，即断开连接。好处是节省传输时间。（短连接、长连接）

1.3.3、http请求协议与响应协议

  • 请求协议：请求首行、请求头、空行（标志请求头结束）、请求体（若是get请求，则请求体无内容）

<!-- get与post请求：
1、数据位置：GET提交的数据会放在URL之后，POST是把提交的数据放在HTTP包的请求体中。
2、数据大小：GET提交的数据大小有限制（因为浏览器对URL的长度有限制），而POST方法提交的数据没有限制。
3、缓存：get请求可以被缓存，post请求不会被缓存。
-->

  • 响应协议：响应首行、响应头、空行、响应体

响应状态码：状态码的职责是当客户端向服务器端发送请求时，返回的请求结果。

<!-- 常见的状态码：
1、100：Continue	继续。客户端应继续其请求
2、200：OK	    请求成功。一般用于GET与POST请求
3、301：Moved Permanently	永久移动。请求的资源已被永久的移动到新URL，返回信息会包括新的URL，浏览器会自动定向到新URL。今后任何新的请求都应使用新的URL代替。
4、302：Found	    临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URL
5、403：Forbidden	服务器理解请求客户端的请求，但是拒绝执行此请求
6、404：Not Found	服务器无法根据客户端的请求找到资源（网页）。
7、502：Bad Gateway	作为网关或者代理工作的服务器尝试执行请求时，从远程服务器接收到了一个无效的响应
-->

2、HTML概述

  • HTML，即超文本标记语言（HyperText Markup Language ）
  • 是一种用来制作网页的标准标记语言；超文本是指超出普通文本范畴的文档，如图片、音频、视频等。
  • HTML 不是一种编程语言，而是一种写给网页浏览器、具有描述性的标记语言。（无逻辑）
  • 用户在访问网页时，是把服务器的HTML文档下载 到本地客户设备中，然后通过本地客户设备的浏览器，将文档按顺序解释、渲染成对应的网页效果。

3、HTML标准结构

<!DOCTYPE html>  <!--告诉浏览器使用什么样的html或xhtml来解析html文档-->
<html lang="en"> <!--文档的开始标记和结束标记-->
<head> <!--出现在文档开头部分：如何解释-->
    <meta charset="UTF-8"> <!--声明编码方式-->
    <title>Title</title>   <!--定义网页标题-->
</head>
<body> <!--网页主体内容：具体显示-->

</body>
</html>

4、标签的语法

<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
1、HTML标签是由尖括号包围的特定关键词
2、标签分为两种：闭合、自闭合
3、不区分大小写、可以有若干个属性、可以嵌套（块级可以嵌套块级和内联，但内联只可以嵌套内联）
4、XHTML是实现HTML到XML的过渡（The Extensible Markup Lanxguage：可扩展标记语言）

5、基本标签（重点）

  • 标题标签：<h1>标题1</h1>...<h6>标题6</h6>
  • 段落标签：<p>大家好，我是段落1。</p>
  • 换行标签：br/：barter rabbet（换行）的缩写、hr：horizon（水平线）的缩写。
  • 文本格式化标签
<b>定义粗体文本方式1</b><br />
<strong>定义粗体文本方式2</strong><br />
<em>定义斜体字方式1</em><br />
<i>定义斜体字方式2</i><br />
<del>定义删除文本</del><br />
  • 特殊符号

  • 标签分类：块级标签(block) -- 独占一行 、内联标签(inline) -- 按文本内容占位
  • div和span标签：并无实际的意义，主要通过CSS样式为其赋予不同的表现。（重要性在于无样式）

6、a标签(超链接)

6.1、超链接基本使用

超链接是浏览者和服务器交互的主要手段，是网页中指向一个目标的连接关系。（网页跳转）

6.2、锚点（页内跳转）

锚点( anchor )是超链接的一种应用，可以实现页面内的链接跳转。

7、img标签(图像)

img标签配合a标签使用，可实现点击图片跳转：
<a><img src="" alt="" title=""></a>

/*
src属性：
    指定图像的URL地址，是英文source的简写，表示引入资源。
    src的值可以是本地计算机存储的图片的地址，也可以是网络上外部网站的图片的地址。
    如果src的值不正确，那么浏览器就无法正确的图片，而是显示一张裂图。
alt属性：指定图像无法显示时的替换文本。
title属性：悬浮图片上的提示文字。

width属性： 指定引入图片的显示宽度。
height属性：指定引入图片的显示高度。
border属性：指定引入图片的边框宽度，默认为0。
*/

8、列表标签

9、表格标签

9.1、table结构

9.2、table属性

9.3、td属性

10、form标签(表单)

表单：收集客户端提供的相关信息，提供用户数据录入的方式，有单选、多选、单行文本、多行文本、下拉列表等输入框，便于网站管理员收集用户的数据，是Web浏览器和Web服务器之间实现信息交流和数据传递的桥梁。

一个表单元素有三个基本组成部分：标签、控件、按钮

  • 表单标签，包含表单处理程序所在的URL以及数据提交到服务器的方法等表单信息。
  • 表单域，包含（多行）文本框、密码框、隐藏域、单选框、复选框、下拉选择框和文件上传框等表单控件。
  • 表单按钮，包括提交按钮、复位按钮和一般按钮，用于将数据传送到服务器上的CGI脚本或者取消输入。

1、单行输入框
<input type="text">
type="text"：用户名
type="password"：密码

type="radio"：单选（性别）
type="checkbox"：多选（爱好）

type="date"：日期（生日）

type="submit"：提交按钮（有事件）
type="button"：按钮（无事件）
type="reset"：重置按钮

2、多行文本框
<textarea name="info" cols="50" rows="10" placeholder="个人简介"></textarea>

3、下拉菜单
<selec name="province" multiple="multiple" size="2">
    <option value="hebei" selected="selected">河北省</option>
</select>

<!-- name属性：输入数据的必备属性，多选框最好设置成一样的，单选框必须设置成一样的。 -->
<!-- value属性：用户名密码是输入的，故无需设置；而多选框是勾选的，必须设置。 -->
<!-- label标签：for、id（扩大有效区，提升用户体验） -->
<!-- checked="checked"：多选框默认选中、可简写为checked -->

026 CSS：浏览器解释型语言

CSS层叠样式表是Cascading Style Sheet的缩写，是用于控制网页外观处理，并允许将网页的“表现”与“内容”分离的一种标记性语言；CSS不需要编译，可以直接由浏览器执行（属于浏览器解释型语言）。

  • 好处：
    • 有效布局、灵活多样
    • 精确控制效果、修改更加快捷
    • 快速切换主题、统一控制，达到一改全改效果
    • 支持多种设备
    • 将网页的“表现”与“结构”分离，使页面载入得更快、更利于维护
  • 语法：

1、CSS的引入方式

  • 行内式（少用）：样式写在元素的style属性中（个别元素需要应用特殊样式）
  • 嵌入式（测试）：样式写在HTML文档内部head标签中的style标签里（单个文档需要应用特殊样式）
  • 链接式（多用）：单独写在后缀为 .css 的外部样式表中；使用时，用link标签的href属性引入css文件。

2、CSS的选择器

2.1、基本选择器

  • id选择器：#
  • class选择器：.
  • 标签名
  • 通配符：*

2.2、组合选择器

  • 后代选择器：空格（子子孙孙所有代、可跳过某一代）
  • 子代选择器：>（只找儿子这一代）
  • 与选择器：没有空格（多个条件、精准定位）
  • 或选择器：逗号分隔
  • 兄弟选择器：（注意：只能选择后面的兄弟，无法选择前面的）
    • 毗邻选择器（+）：紧挨着的下一个兄弟
    • 兄弟选择器（~）：后面的多个兄弟、可跳过某几个兄弟
  • class属性语法（重要）：可有多个属性值，叠加css样式效果

2.3、属性选择器

  • 精确匹配：
    • 属性选择：[att]、[att=val]，有属性、属性值全等（属性）
    • 简单属性选择：E[att]，标签有属性（标签的属性）
    • 具体属性值选择：E[att=val]，标签属性值全等（标签的属性值）
  • 模糊匹配：~、^、$、*
    • 部分属性值选择：E[att~=val]，属性值中有一个相等即可（如，class有多个属性值）
    • 属性值子串匹配选择器：^、$、*
      • E[attr^=val] ，开头
      • E[attr$=val]，结尾
      • E[attr*=val]，包含（可以是不全的属性值，如com-md-）
/*所有属性的通用写法*/
[class~="c3"] {
	font-weight: bolder;
}
/*class属性的简写（class属性可有多个属性值，叠加css样式效果）*/
.c3 {
	font-weight: bolder;
}
/*id属性的简写*/
#c2 {
	font-weight: bolder;
}

2.4、伪类选择器

  • anchor伪类：专用于控制超链接的显示效果

  • before、after伪类：相当于在元素内部插入两个额外的标签（after伪类用于清除浮动）

:first-child，所有父元素的第一个子元素
p:first-child，所有父元素的第一个子元素，且该子元素为p
p:first-child i，所有父元素的第一个子元素，且该子元素为p，p标签的所有i标签

/*after伪类：构造标签，多用于清除浮动*/
#i1:after {
    display: block;
	content: "这是一个伪类构造的块级标签";
	color: red;
}
<div id="i1">
    DIV标签
    <!--<div style="color: red">这是一个伪类构造的块级标签</div>-->
</div>

2.5、样式继承

CSS的样式表继承指的是，特定的CSS属性向下传递到子孙元素。

2.6、选择器优先级

  • 继承

继承是CSS的一个主要特征，它是依赖于祖先-后代的关系。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如，一个body定义了的颜色值也会应用到段落的文本中。

然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。有一些属性不能被继承，如：border、margin、padding、background等。

  • 优先级

CSS优先级，是指CSS样式在浏览器中被解析的先后顺序。样式表中的特殊性描述了不同规则的相对权重。

3、CSS的属性操作

3.1、文本属性

  • font-family：字体，微软雅黑、宋体、Arial
  • font-size：字号，字体单位:像素（px）、字符（em，1em等于1*字体大小）、百分比（%），磅[点]（pt）
  • color：颜色，三种形式：英文单词，十六进制，RGB十进制
  • font-weight：粗细，normal、bold、bolder、lighter、number
  • font-style：风格，normal（正体）、 italic（斜体，字体库中的）、oblique（斜体，人为的）
  • text-align：文本水平对齐方式，left、center、right；justify两端对齐（满一行）
  • vertical-align：垂直对齐方式， top 、middle、bottom、px、%
  • line-height：行高（一行内容垂直居中，改变的是文本上下的半行距）
  • text-decoration：装饰线条，none、overline、line-through、underline
// font: font-style font-weight  font-size/line-height  font-family;

3.2、背景属性

  • background-color：背景颜色，transparent（透明）、RGB十进制颜色、十六进制颜色、颜色单词
  • background-image：背景图片，url('图片地址')
  • background-repeat：背景图片平铺方式，repeat、no-repeat、repeat-x、repeat-y
  • background-position：背景图片定位，x轴坐标 y轴坐标
// background: 背景颜色  背景图片url  背景图片平铺方式  背景图片定位;

3.3、边框属性

  • 可以缩写：1、2、3、4个值；可以单独指定不同方向：top、bottom、left、right
  • border-width：宽度，medium、thin、thick、指定数值的宽度
  • border-style：风格，none、hidden、dotted、dashed、solid、double
  • border-color：颜色，十六进制、RGB十进制、单词表示法
// border: 边框宽度 边框风格 边框颜色;

3.4、列表属性

3.5、dispaly属性（模式）

  • display可以指定元素的显示模式，常用的值有四个：inline、block、inline-block、none（隐藏）。
  • 与“visibility：hidden”的区别：display上面的设置成none后，下面的会移上去；而hidden不会。
  • 布局核心问题：如何能够让多个可以设置长宽的元素在一行显示（display：inline-block、float浮动）

3.6、盒子模型（重点）

  • 元素看成方盒子：content（内容）、padding（内边距）、border（边框）、margin（外边距）
  • padding（内边距及其缩写）：元素的边框与内容的距离，不能是负值，可以设置多值、不同方向。
  • margin（外边距及其缩写）：元素与元素之间的距离，可正可负；margin: 0 auto。
  • box-sizing：标准盒模型（content-box）、怪异盒模型（border-box）

3.7、float属性（浮动）

  • 流动布局：即文档流，浏览器打开HTML网页时，从上往下，从左往右，逐一加载；文档流有2大特征：
    • 块状元素会随着浏览器读取文档的顺序，自上而下垂直分布，一行一个的形式占据页面位置。
    • 行内元素会随着浏览器读取文档的顺序，从左往右水平分布，一行多个的形式占据页面位置。
  • 浮动模型：浮动属性（float）用于实现页面布局，制作导航栏等页面功能。
    • 简单浮动：float: left;
    • 字围效果：文字内容会围绕在浮动元素周围（如图片）

  • 清除浮动：浮动后就会破坏原有的文档流，使页面产生不必要的改动（父级塌陷）
    • 子元素浮动后溢出容器而影响布局叫“浮动溢出”，处理“浮动溢出”的操作称为“清除浮动”。

此外，还可以给父元素加上溢出隐藏属性（overflow: hidden;）来进行清除浮动。

父级高度塌陷解决的四种方法：
1、父元素增加高度，使父级边框足以容纳内部的浮动元素。
2、父级元素设置自动溢出（overflow: hidden;），隐藏溢出部分。
3、在浮动元素后面增加一个空的div（清除浮动、内外边距设为0）
4、父级元素添加伪类（after伪类）
.father:after{
    content: '';
    display: block;
    clear: both;
}

3.8、position属性（定位）

  • 层布局模型把网页中的每个元素看成是一层，通过定位属性position对元素进行定位摆放，实现网页布局。
  • 定位属性的值：静态定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed）。
    • 静态定位（static）：默认
    • 相对定位（relative）：不脱离文档流、参照元素本身位置
    • 绝对定位（absolute）：完全脱离文档流、参照已经定位的最近父级元素，直至body标签
    • 固定定位（fixed）：完全脱离文档流、参照浏览器窗口
  • 方位属性：top、bottom、left、right

float：半脱离文档流

027 JavaScript(1)：动态行为

1、JavaScript 的历史

1.1、JavaScript 的历史

JavaScript （脚本语言）因互联网而生，紧随着浏览器的出现而问世。回顾它的历史，就要从浏览器的历史讲起。

  • 1990年底，万维网（World Wide Web）只能在操作系统的终端里浏览网页文件.
  • 1992年底，人类历史上第一个浏览器（Mosaic），从此可以在图形界面的窗口浏览网页。
  • 1994年，Netscape（网景）在Mosaic的基础上，开发面向普通用户的新一代的浏览器Netscape Navigator。
  • 问题：Navigator浏览器需要一种可以嵌入网页的脚本语言，用来控制浏览器行为。
  • 1995年，脚本语言JavaScript问世，JavaScript可以像胶水一样，将各个部分连接起来。
  • 1996年3月，Navigator 2.0 浏览器正式内置了 JavaScript 脚本语言。

1.2、JavaScript与ECMAScript的关系

  • 1997年7月，ECMA组织规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript。
  • 不叫JavaScript的原因：
    • 一方面是由于商标的关系，JavaScript已经被Netscape公司注册为商标
    • 另一方面也是想体现制定者是ECMA组织，不是Netscape公司，有利于保证这门语言的开放性和中立性。
  • 因此，ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。
  • 一个完整的JavaScript包含三个部分：
    • ECMAScript（标准语法）
    • BOM（浏览器对象模型）
    • DOM（文档对象模型）

1.3、JavaScript与Java的关系

  • JavaScript和Java是两种不一样的语言，但是它们之间存在联系。
  • JavaScript的基本语法和对象体系，是模仿Java而设计的；JavaScript的原意是“很像Java的脚本语言”。
  • 在JavaScript语言中，函数是一种独立的数据类型，以及采用基于原型对象（prototype）的继承链。
  • Java语言需要编译，而JavaScript语言则是运行时由解释器直接执行。
  • JavaScript的原始设计目标是一种小型的、简单的动态语言，与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版做了大幅升级，但存在严重分歧。

  • 2008年7月，ECMAScript 3.1发布，不久后改名为ECMAScript 5。

  • 2009年12月，ECMAScript 5.0正式发布。

  • 2011年6月，ECMAscript 5.1发布，并且成为ISO国际标准。

  • 2012年底，所有主要浏览器都支持ECMAScript 5.1版的全部功能。

  • 2015年6月，ECMAScript 6正式发布，并且更名为“ECMAScript 2015”。

  • 以后每年发布一个ECMAScirpt的版本，下一个版本在2016年发布，称为“ECMAScript 2016”。

  • 由于Netscape公司在内部使用自己的版本号，导致JavaScript有不同于ECMAScript的版本号：

    • 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的引入方式

1、直接编写
    <script>
        console.log('hello yuan')
    </script>
2、导入文件
    <script src="hello.js"></script>

3、ECMAScript基本语法

  • 变量

  • 注释：单行//、多行/* */
  • 语句分隔符：换行符 + 分号（python是换行符）

4、ECMAScript 基本数据类型

4.1、数字类型（number）

JavaScript 没有整型和浮点型，只有一种数字类型，即number类型。（NaN也属于number类型）

4.2、字符串（String）

  • 字符串创建（两种方式）：变量 = “字符串”、字符串对象名称 = new String (字符串)

  • 内置属性：str.length，计算字符串的长度

  • 内置方法：

    • str.toUpperCase()：字母转大写
    • str.toLowerCase()：字母转小写
    • str[索引]：索引取值
    • str.indexOf("值")：值取索引（第一次）
    • str.slice(开始下标，结束下标)：切片，前开后闭、无步长、不可倒取（区别于splice切片）
    • str.split("分隔符")：分割，字符串转换成数组（类似python的列表）
    • str.substr(起始, 长度)：截取（区别于slice切片）
    • str.trim()：移除字符串首尾空白，新生成一个字符串（类似python的strip）

4.3、布尔值（boolean）

boolean类型仅有两个值：true和false，也代表1和0；主要用于JavaScript的控制语句（if分支处理不同情况）

4.4、空值（undefined、null）

  • undefined类型：变量未赋值、函数无返回值
  • null类型：不存在
  • 值 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。

4.5、类型转换

js中类型转换有2种：一种就是强制转换、一种就是自动转换。因为js是一门弱类型的脚本语言，所以变量有时候会根据运算符的要求进行自动转换。（python属于强类型）

  • 转换数据为数值类型：number
    • parseInt：把数据转换成整数（开头是数字）
    • parseFloat：把数据转换成小数（只认一个小数点）
    • Number：把数据转换成数值（必须是纯数字）
    • 转换数值若失败，则结果为 NaN（ Not a Number），也是number类型。
  • 转换数据为字符串：string
    • String(变量)：推荐
    • 变量.toString()
  • 转换数据为布尔类型：boolean
    • false：""、0、null、undefined
    • true："0"、[]、{}
  • 自动转换（暗转换）：指弱类型中的变量会根据当前代码的需要，进行类型的自动隐式转化。
var box1 = 1 + true;
// true 转换成数值1, false 转换成数值0
var box2 = 1 + "200";
// 1200，原因：程序中+的含义有2种（两边数值相加、 两边字符串拼接）。但是在js运算符的优先级中, 字符串拼接的优先级要高于数值的加减乘除，所以解析器优先使用+号作为字符串的拼接符号。因为程序需要+号两边都是字符串才能完成运算操作，因此1自动转化为字符串，导致最终的结果就是 "1" +"200"
var box3 = 1 - "200";
// -199， 因为-号中表示的就是左边的数值减去右边的数值，因此程序就会要求"200"是数值

4.6、原始值和引用值

根据数据类型不同，有的变量储存在“栈”中，有的储存在“堆”中。具体区别如下：（类似python的可变不可变）

  • 原始变量及它们的值储存在“栈”中，当把一个原始变量传递给另一个原始变量时，是把一个栈房间的东西复制到另一个栈房间，且这两个原始变量互不影响。
  • 引用值是把引用变量的名称储存在“栈”中，但是把其实际对象储存在“堆”中，且存在一个指针由变量名指向储存在堆中的实际对象。当把引用对象传递给另一个变量时，复制的其实是指向实际对象的指针， 此时两者指向的是同一个数据。若通过“方法”改变其中一个变量的值，则访问另一个变量时，其值也会随之加以改变；若不是通过方法而是通过“重新赋值”， 此时相当于重新开了一个房间，该值的原指针改变 ，则另外一个值不会随它的改变而改变。

5、运算符

  • 算数运算符：加减乘除、取余求幂、自增自减
  • 赋值运算符：=、同上
  • 比较运算符：大于小于、大于等于、小于等于、等于不等于、全等不全等
  • 逻辑运算符：非（not、！）、或（or、||）、并（and、&&）
    • 短路：&&（前真看后）、||（前假看后）
    • 快速布尔化：!a >>> false、!!a >>> true
  • 条件运算符（三目运算符）：条件 ? true : false

6、流程控制语句

6.1、顺序结构

从上向下，按顺序执行。

6.2、分支结构

  • if 分支语句：单分支、双分支、多分支
// 多分支   
if(条件1){
     // 条件1为true时，执行的代码
}else if(条件2){
     // 条件2为true时，执行的代码  
}
....
}else{
     // 上述条件都不成立时，执行的代码
}
  • switch语句
switch(条件){
	case 结果1:
		满足条件执行的结果是结果1时，执行这里的代码...;
		break;
	case 结果2:
		满足条件执行的结果是结果2时，执行这里的代码...;
		break;
	.....
default:
	条件和上述所有结果都不相等时，则执行这里的代码;
}

6.3、循环语句

  • while循环：条件循环
var count = 0  // 初始值
while (count<10){  // 循环条件
    console.log(count);  // 循环体
    count++;  // 步进值
}
  • for循环：条件循环（重要）
// 循环三要素
for(1.声明循环的开始; 2.循环条件; 4. 循环的计数){
	// 3. 循环条件为true的时候，会执行这里的代码
}

for(循环的成员下标 in 被循环的数据){
	// 当被循环的数据一直没有执行到最后下标，都会不断执行这里的代码
}
// python的for循环：遍历循环，直接循环成员，而非下标

7、数组对象（列表）

  • 创建数组
创建方式1：简易形式
var arrname = [元素0, 元素1, …];           // var arr = [1, 2, 3];

创建方式2：类实例化
var arrname = new Array(元素0, 元素1, …);  // var arr = new Array(100, "a", true);
console.log(typeof arr1);  // object
  • 数组方法
    • length属性：获取元素个数
    • arr[索引]：索引取值
    • pop()：出栈，删除最后一个成员并返回
    • push()：入栈，在数组最后追加一个成员（类似python的append）
    • shift()：删除数组的第一个元素
    • unshift("元素")：在数组的前面插入一个元素
    • reverse()：反转排列
    • sort() ：默认按ascii码排序、可自定义规则
    • slice(开始下标, 结束下标)：切片（开区间）
    • splice(操作位置的下标, 删除操作的成员长度, "替换或者添加的成员1", "替换或者添加的成员2")
      • 删除：两个参数
      • 添加：第二个参数为0
      • 替换：第二个参数不为0
    • concat()：合并2个或者多个数组（区别于push）
    • join("字符")：把数组的每一个成员按照指定的符号拼接成字符串（区别于python字符串的join）
    • find(规则函数名)：高阶函数, 返回符合条件的第一个成员
    • filter(规则函数名)：高阶函数, 对数组的每一个成员进行过滤，返回符合条件的所有结果
    • map(规则函数名)：对数组的每一个成员进行处理，返回处理后的每一个成员
    • includes()：查询指定数据是否在数组中存在（结果是布尔值）
    • indexOf()：查询指定数据在数组中第一次出现的位置
    • Array.isArray(arr1)：判断变量arr1的类型是否是数组（结果是布尔值）

8、Object对象（字典）

8.1、object对象的基本操作

  • 创建object对象：
// 法一（推荐）
var person = new Object();
person.name = "alvin";  // 给对象添加属性
person.age = 18;

// 法二
var person = {
                name : "alvin",
                age : 18
             }; 
// python中字典的键必须是可哈希的（str键要加引号）
// js中的键是属性，引号可加可不加
  • 访问对象属性：. 点、 []中括号、for循环
console.log(person.age);  
console.log(person["age"]);  // 推荐
for (var attr in person){
	console.log(attr, person[attr]);
}

8.2、json序列化和反序列化（重要）

JSON：JavaScript 对象表示法（JavaScript Object Notation）是一种轻量级的数据交换格式（json字符串），不属于任何语言，但任何语言都支持json格式。优点：易于阅读和编写；作用：存储和传输数据。

编程语言不同，语法和数据类型也不同，所以要互相通信，需要一种通用的标准，即json格式（json字符串）。socket通信只能传字符串：后端python格式的字典，json序列化为json字符串，到达前端后，再反序列化为前端js格式的对象。

# json是一种数据格式, 语法一般是{}或者[]包含起来。（起源于js，但不依赖js。）
# 内部成员以英文逗号隔开，最后一个成员不能使用逗号；成员可以是键值对，也可以是列表。
# json中的成员如果是键值对，则键名必须是字符串，而json中的字符串必须使用“双引号”圈起来。
# json数据也可以保存到文件中，一般以".json"结尾；前端项目中，一般使用json作为配置文件。
  • 序列化：string（把json对象转换成json字符串）
var ret = JSON.stringify(data);
  • 反序列化：object对象（把json字符串转换成json对象）
var ret = JSON.parse(str);

9、Date对象

  • 创建Date对象
//方法1：不指定参数
var nowd1=new Date();
//方法2：参数为日期字符串
var d2=new Date("2004/3/20 11:12");
//方法3：参数为毫秒数(时间戳)
var d3=new Date(5000);
//方法4：参数为年月日、时分秒、毫秒
var d4=new Date(2004, 2, 20, 11, 12, 0, 300);  // 毫秒并不直接显示
  • 获取时间信息

  • 日期和时间的转换
日期和时间的转换:
// 返回国际标准时间字符串
toUTCString()
// 返回本地格式时间字符串
toLocalString()

// 返回累计毫秒数(从1970/1/1午夜到本地时间)
Date.parse(x)
// 返回累计毫秒数(从1970/1/1午夜到国际时间)
Date.UTC(x)

10、Math对象

  • Number对象的内置方法：
    • num.toFixed(x)：保留小数位（四舍五入）
  • Math对象的内置方法：
    • Math.abs(x)：返回数值的绝对值
    • Math.ceil(x)：向上取整
    • Math.floor(x)：向下取整
    • Math.max(x, y, z, ..., n)：取最大
    • Math.min(x, y, z, ..., n)：取最小
    • Math.pow(x, y)：幂运算（新版写法：x**y）
    • Math.random()：生成 0-1 之间的随机小数
    • Math.round(x)：四舍五入

11、Function 对象（重点）

函数在程序中代表的就是一段具有功能性的代码，使程序更具结构性和提升复用性，让代码变得更加灵活强大。

11.1、声明函数

// 函数的定义方式1
function 函数名(参数){
    函数体;
    return 返回值;
}
// 函数的定义方式2（函数也是个对象）    
用 Function 类直接创建函数的语法如下：
var 函数名 = new Function("参数1", "参数n", "function_body");

11.2、函数调用

函数名(参数)，不同于python，js代码在运行时，会分为两大部分 —>预编译 和 执行阶段。

  • 预编译：会先检测代码的语法错误，进行变量、函数的声明。
  • 执行阶段：变量的赋值、函数的调用等。

11.3、函数参数

  • 参数基本使用：
    • 位置参数：调用时的参数多于定义的参数，不报错；少于则提示undefined
    • 默认参数：不传值，则使用默认值（传参，即变量赋值）
  • 函数中的arguments对象：
    • 将实参组成一个数组，传给arguments对象
    • 应用：求和、校验

11.4、函数返回值

  • return只能返回一个值（python可返回多个值，用逗号隔开，其实也是一个值，会自动打包成一个元组）
  • js要想输出多个值，可以通过数组或对象进行设计。
  • 在函数体内可以包含多条 return 语句，但是仅能执行一条 return 语句。
  • 无return，返回 undefined（变量未赋值、函数无返回值）

11.5、匿名函数

  • 匿名函数，即没有变量名的函数。function ( ) { console.log("这是一个匿名函数！") };
  • 匿名函数赋值给变量，加括号调用。（此时，函数调用必须放在函数定义后面）
  • 匿名函数的自执行：整体先加括号，后面再加括号和参数。
  • 匿名函数作为一个高阶函数使用：函数名作为参数、返回值。
  • 使用匿名函数表达式时，函数的调用语句，必须放在函数声明语句之后！

11.6、函数作用域

作用域就是变量可访问范围，即作用域控制着变量与函数的可见性和生命周期。在JavaScript中，变量的作用域有两种：

  • 局部作用域：在函数内部声明，生命周期在函数被调用时，调用后，内存中自动销毁当前变量。
  • 全局作用域：在函数外部声明，生命周期在当前文件中被声明以后就保存在内存中，直到当前文件执行完毕以后，才会被内存销毁。
// 情况1：先var声明变量，再直接使用
var name = "yuan"; // 声明一个全局变量 name 并赋值为“yuan”
name = "张三";   // 对已经存在的变量name，重新赋值为“张三”
console.log(name); // 张三

// 情况2：不用var声明变量
age = 18;  // 之前不存在age变量，这里等同于var age = 19，即声明全局变量age并赋值为18

// 情况3：两次var声明同一个变量名
var gender = "male";
var gender = "female"; // 原内存释放与新内存开辟，指针指向新开辟的内存
console.log(gender); // female

// 在函数外部声明的变量, 全局变量（不写var，也是全局变量）
// 函数内部直接使用变量，则默认调用了全局的变量（不写var，函数外已定义了）
// 函数内部使用var 或者 let声明的变量则是局部变量
// 使用变量的时候，解释器会在当前花括号范围值搜索是否有关键字var 或者 let 声明了变量。
// 如果没有，则一层一层往外查找最近的声明。如果最终查找不到，则直接报错：变量名 is not define!

11.7、JS的预编译

js运行三个阶段：

  • 语法分析：JS引擎去检查你的代码是否有语法错误
  • 预编译：在内存中开辟一些空间，存放一些变量与函数 （最重要）
  • 解释执行：执行你的代码（函数调用前，先局部预编译、再执行）

全局预编译三步骤：

  • 创建GO全局对象（Global Object），即window对象。（只有一个）
  • 找变量声明，将变量名作为GO属性名，值为undefined（未赋值）。
  • 找函数声明，将函数名作为GO属性名，值赋予函数体。

局部预编译四步骤：

  • 创建AO对象（Activation Object），执行其上下文。（可有多个）
  • 找变量、形参声明，将变量、形参名作为AO属性名，值为undefined。
  • 将实参的值和形参统一。
  • 在函数体里面找函数声明，值赋予函数体。

预编译两点总结：

  • 函数声明整体提升（具体点说，无论函数调用和声明的位置是前是后，系统总会把函数声明移到调用前面。注：匿名函数除外，本质是变量赋值。）
  • 变量声明提升（无论变量调用和声明的位置是前是后，系统总会把变量声明移到调用前，注意仅仅只是声明，所以值还是undefined。）

028 JavaScript(2)

1、BOM对象

BOM（Broswer object model）浏览器对象模型，即浏览器为开发者提供在javascript用于操作浏览器的对象。

1.1、window对象

window对象是js中最大的一个对象：整个浏览器窗口出现的所有东西都是window对象的内容。

  • 窗口方法

    • window.alert("")：警告框
    • window.confirm("")：确认框（true、false）
    • window.prompt("请输入内容", "默认值")：输入框
    • window.open("")：打开新窗口
    • window.close()：关闭当前浏览器窗口

  • 定时方法

    setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。而setTimeout是在指定的毫秒数后，只调用code一次。

    • 设置循环定时器：var ID = window.setInterval(code, millisec);
    • 取消循环定时器：window.clearInterval(ID);
    • 设置单次定时器：var ID = window.setTimeout(code, millisec);
    • 取消单次定时器：window.clearTimeout(ID);
    • 注意：先等待时间、后执行函数；
    • millisec周期性执行或调用 code 之间的时间间隔，以毫秒计（1秒=1000毫秒）

1.2、location对象 ( 地址栏)

  • 地址栏对象控制和操作地址栏，所谓的地址就是当前页面所在地址；
  • URL地址结构（协议://域名:端口/路径/文件名?查询字符串#锚点）
  • 查看信息：
    • 完整URL：location.href
    • 域名和端口：location.host
    • 域名：location.hostname
    • 端口：location.port
    • 路径：location.pathname
    • get参数：location.search
    • 页面跳转：location.href="http://www.baidu.com"; location.assign("http://www.baidu.com");
    • 页面刷新：location.reload()
1、window.location.href=“url”;  // location.href是一个属性，改变url地址。

2、window.location.assign("url")  
// 加载新的文档，效果与location.href相当；但assign会添加记录到浏览历史，点击后退可以返回之前页面。 

3、window.location.replace("url")   
// 将地址替换成新url，该方法通过指定URL替换当前缓存在历史里（客户端）的项目。
// 与以上两者的区别：在replace之后，浏览历史就被清空了；因此若使用replace页面跳转后是不能后退的。

1.3、本地存储对象

使用存储对象的过程中， 对象数据会根据域名、端口进行保存。

  • localStorage：本地永久存储
    • 设置一个数据保存到存储对象：
      • localStorage.setItem("变量名","变量值");
      • localStorage.变量名 = 变量值;
    • 获取存储对象中保存的指定变量对应的数据：
      • localStorage.getItem("变量名")
      • localStorage.变量名
    • 从存储对象中删除一个指定变量对应的数据：
      • localStorage.removeItem("变量名")
    • 从存储对象中删除所有数据：
      • localStorage.clear()
  • sessionStorage：本地会话存储（临时存储：窗口关闭即释放）
  • 比较：
    • 都是用来存储客户端临时信息的对象
    • 都只能存储字符串类型的对象
    • localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，则所有通过sessionStorage存储的数据都清空了。（Ctrl+Shift+delete：可清除localStorage信息）
    • 不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。

2、DOM对象(JS核心)

DOM（Document Object Model ）文档对象模型，整个html文档会保存到一个文档对象document。

2.1、查找标签

  • 直接查找标签
    • document.getElementById("id值")：一个DOM对象
    • document.getElementsByTagName("标签名")：多个DOM对象组成一个数组
    • document.getElementsByClassName("类名")：多个DOM对象组成一个数组
    • document.getElementsByClassName("类名")[0]：数组的第一个DOM对象
  • 导航查找标签
    • dom对象.parentElement：父节点标签元素
    • dom对象.children：所有子标签元素
    • dom对象.firstElementChild：第一个子标签元素
    • dom对象.lastElementChild：最后一个子标签元素
    • dom对象.previousElementSibling：上一个兄弟标签元素
    • dom对象.nextElementSibling：下一个兄弟标签元素
  • CSS选择器查找
    • document.querySelector("css选择器")：获取查找到的第一个元素，返回标签对象（一个dom对象）
    • document.querySelectorAll("css选择器")：获取查找到的所有元素，返回数组（多个dom对象）

2.2、绑定事件

  • 静态绑定 （少用）：直接把事件写在标签元素中。

    • 定义：function foo(self){}，形参不能是this，self代指dom对象
    • 调用：onclick="foo(this)"，self代指dom对象

  • 动态绑定（多用）：在js中通过代码先查找获取元素对象（dom对象），然后再给这个对象绑定事件。

    • 获取对象：直接、导航、css

    • 绑定事件：dom对象.on事件 = function()

      ​ 事件函数中的this，代指触发事件的标签（dom对象）

    • 多个标签循环绑定事件

      <script>
    var eles = document.querySelectorAll("ul li");  // 数组
    for(var i=0;i<eles.length;i++){
        eles[i].onclick = function (){
            console.log(this.innerHTML)  // 一定要用this          
            // console.log(eles[i].innerHTML)  // 结果：报错（i=3）
            // for循环只绑定了事件，还未执行；点击时才执行，而此时i=3。
        }
    console.log(i);  // 3    
    }
</script>

2.3、操作标签(重点)

dom操作利用属性，jquery操作依赖方法。

  • 文本操作：
    • 查看标签文本（无参数）：
      • 获取dom标签对象的纯文本：this.innerText
      • 获取dom标签对象的内容（标签、文本）：this.innerHTML
    • 设置标签文本（有参数）：
      • 标签无效果：this.innerText = ""
      • 标签有效果：this.innerHTML = ""
  • value属性操作（input、select、textarea）：this.value = ""
  • css样式操作：this.style.color = "red";
  • 属性操作：并不是所有属性都可以像value属性那样操作
    • 获取属性：elementNode.getAttribute("属性名")
    • 设置属性：elementNode.setAttribute("属性名", "属性值")
    • 删除属性：elementNode.removeAttribute("属性名")
  • class属性操作：重点
    • 获取属性：elementNode.className
    • 添加属性：elementNode.classList.add()
    • 删除属性：elementNode.classList.remove()
  • 节点操作：
    • 创建节点：插入前、替换前
      • 创建标签：document.createElement("标签名")
      • 属性赋值：节点.属性名 = 属性值
    • 插入节点：
      • 在父节点的最后追加一个子节点：父节点.appendChild(子节点)
      • 在父节点的某个子节点之前插入新的子节点：父节点.insertBefore(新子节点, 某个子节点)
    • 删除节点：父节点.removeChild(子节点)
    • 替换节点：父节点.replaceChild新子节点, 原子节点)

2.4、常用事件

  • onload事件
<script>
	// 加载事件：先加载、后执行（不会因为script位置报错）
	window.onload = function (){
		var ele = document.getElementById("i1");
		console.log(ele.innerHTML);
	}
</script>
  • onsubmit事件

  • onchange事件

  • onmouse事件

  • onkey事件

  • onblur和onfocus事件

  • 冒泡事件

029 jQuery：JavaScript 库

1、jQuery介绍

  • jQuery是什么

jQuery是个快速、简洁的JavaScript框架，其宗旨是“write Less，Do More”。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

框架或组件出现的原因是js有缺陷，但在前端又一枝独秀，我们只能去扩展它，这类似python的模块。

  • jQuery的核心特性：
    • 具有独特的链式语法和短小清晰的多功能接口；
    • 具有高效灵活的css选择器，并且可对CSS选择器进行扩展；
    • 拥有便捷的插件扩展机制和丰富的插件；
    • 兼容各种主流浏览器，如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的语法，必须先引入到本地。

  • jQuery的基本语法：$().方法() --> jQuery().方法() 的简写

    • $()：查找标签（jQuery实例化对象）
    • .方法()：操作标签

  • jQuery对象和dom对象的关系：

    • jquery对象是dom对象的集合
    • 如何将jQuery对象转换为Dom对象：索引取值，$()[索引]
    • 如何将Dom对象转换为jQuery对象：$(dom对象)
    • 注意区分jquery对象、dom对象的操作方法：
      • ele.style.color = "red"; dom对象利用属性
      • $(ele).css("color", "orange"); jquery对象依赖方法

2、jQuery的选择器

2.1、直接查找

  • 基本选择器
    • #id：id选择符
    • .class：class选择符
    • element：元素（标签名）选择符
    • selector1,selector2,selectorN：同时获取多个元素，逗号后面不加空格
  • 组合选择器
    • ancestor descendant：后代选择器（子子孙孙所有代）
    • parent > child：父子选择器（仅子代这一代）
    • prev + next：下一个兄弟选择器
    • prev ~ siblings：所有兄弟选择器
  • 属性选择器
    • 精确匹配
      • [attribute=value]：获取拥有指定属性attribute，并且属性值置为value的元素
      • $('[type="checked"]')：属性值全等
      • $('.links [href]')：标签有此属性
    • 模糊匹配
      • $('[class*="xxx"]')：包含
      • $('.links [href$="png"]') ：$，以...结尾的
      • ^：以...开头的
  • 表单选择器
    • $("[type='text']")---->可简写为$(":text") ，注意：简写只适用于input标签
    • $("input :checked")：标签 + 属性
    • :enabled、:disabled、:checked、:selected
  • 筛选器（css、js没有）
    • 从jquery对象（dom对象的集合）中，再筛选出想要的jquery对象（dom对象的集合）
    • $(".c1 li:first").css("color", "red");
    • 筛选器：筛选器放引号内无法传参，比如index
      • :first // 第一个元素
      • :last // 最后一个元素
      • :even // 下标为偶数的元素
      • :odd // 下标为奇数的元素
      • :eq(index) // 下标等于index对应的元素
      • :gt(index) // 下标大于index对应的元素
      • :lt(index) // 下标小于index对应的元素
      • :first-child // 所有元素中的第一个子元素，如只取每条记录的姓名
      • :last-child // 所有元素中的最后一个子元素
      • :nth-child(n) // 指定下标的子元素：从1开始
    • 筛选器方法：可以用变量传参
      • $().first()
      • $().last()
      • $().eq(index)

2.2、导航查找

// 1、查找子代标签：         
$("div").children(".test") // 儿子（这一代）：用得多    
$("div").find(".test")  // 子子孙孙（所有代）：必须加条件

// 2、查找兄弟标签：
// 1）向下查找兄弟标签 
$(".test").next()  // 下一个兄弟 // $(".test")：jquery对象（多个dom对象）               
$(".test").nextAll() // 下面所有的兄弟
$(".test").nextUntil() // 到某个兄弟停止（不包括自己）                          
// 2）向上查找兄弟标签  
$("div").prev()                  
$("div").prevAll()       
$("div").prevUntil() 
// 3）查找所有兄弟标签（不包括自己）  
$("div").siblings()  
              
// 3、查找父标签：         
$(".test").parent()  // 父亲（这一代）
$(".test").parent().parent()  // 链式 
$(".test").parents()  // 祖祖父父（所有代）    
$(".test").parentUntil()  // 到某个父亲停止（不包括那个父亲）

3、jQuery的绑定事件

  • 简易版本（多用）：jQuery对象.事件(function(){})
  • bind版本（少用）：$().bind("事件", function(){})
  • on版本（事件委派）：$().on("事件", function(){})
  • 解绑事件：$().off("事件名")
  • 入口函数、组合事件、模拟事件：
    • $().ready(匿名函数) // 入口函数(等同于$(function(){...})😉
    • $().hover(mouseover, mouseout) // 是onmouseover和 onmouseout的组合
    • $().trigger(事件名) // 用于让js自动触发指定元素身上已经绑定的事件

4、jQuery的操作标签

  • 文本操作
// js借助属性操作、jquery依赖方法操作
// js：this.innerHTML、jquery：$(this).html()
$("选择符").html()  // 获取（无参）：读取指定元素的内容，如果$()函数获取了多个元素，则提取第一个元素
$("选择符").html(内容) // 设置（有参）：修改内容，如果$()函数获取了多个元素，则批量修改内容

$("选择符").text()      // 效果同上，但是获取的内容是纯文本，不包含html代码
$("选择符").text(内容)  // 效果同上，但是修改的内容中若有html文本，是直接转成实体字符，而不是html代码
  • value操作（input、select、textarea）：$().val()
<script>
	$(function () {
		$("#i1").blur(function () {
			// 获取dom对象的value属性值
			console.log(this.value);  
			// 获取jquery对象的value属性值
			console.log($(this).val());                       
			// 设置value属性值
			$(this).val("hello world")
		})
	})
</script>
  • 属性操作
// attr：任意元素
// prop：表单元素（键值相同，比如checked）

//读取属性值（获取）
  $("选择符").attr("属性名");   // 获取非表单元素的属性值，只会提取第一个元素的属性值
  $("选择符").prop("属性名");   // 获取表单元素的属性值，只会提取第一个元素的属性值
//操作属性值（设置、修改）
  $("选择符").attr("属性名","属性值");  // 修改非表单元素的属性值，如果元素有多个，则全部修改
  $("选择符").prop("属性名","属性值");  // 修改表单元素的属性值，如果元素有多个，则全部修改
// 同时修改多个属性  
  $("选择符").attr({'属性名1':'属性值1','属性名2':'属性值2',.....}) 
  $("选择符").prop({'属性名1':'属性值1','属性名2':'属性值2',.....})
  • css样式操作
1、获取样式
$().css("样式属性");   // 获取元素的指定样式属性的值，如果有多个元素，只得到第一个元素的值

2、操作样式
$().css("样式属性", "样式值").css("样式属性", "样式值");
$().css({"样式属性1": "样式值1", "样式属性2": "样式值2", ...})

3、匿名函数
$().css("样式属性":function(){  
  // 其他代码操作 
  return "样式值";
});
  • class 属性操作
$().addClass("class1  class2 ... ...")   // 给获取到的所有元素，添加指定class样式
$().removeClass() // 给获取到的所有元素，删除指定class样式
$().toggleClass() // 给获取到的所有元素进行判断，若拥有指定class样式的则删除，若没有指定样式则添加
  • 链式操作

  • 节点操作
// 创建一个jquery标签对象（插入前、替换前）
    var $img = $("<img>");  // 创建jquery标签对象
	$img.attr("src", "https://img1.baidu.com/..."); // 属性赋值

// 1、插入
// 1）内部插入（父子）
    $(".c1").prepend($img); // 父亲在开始追加儿子
    $(".c1").append($img);  // 父亲在最后追加儿子
    $img.prependTo(".c1"); // 儿子追加到父亲最前面
    $img.appendTo(".c1");  // 儿子追加到父亲最后面

// 2）外部插入（兄弟）
    $(".c2").before($img); // 兄弟在前面添加新兄弟
    $(".c2").after($img);  // 兄弟在后面添加新兄弟
    $($img).insertBefore(".c2"); // 新兄弟插到兄弟之前
    $($img).insertAfter(".c2");  // 新兄弟插到兄弟之后

// 添加支持字符串操作
$(".c1").append("<img src ='https://img1.baidu.com/...'>");

// 2、替换
   $(".c2").replaceWith($img);
// 替换支持字符串操作
$(".c2").replaceWith("<img src ='https://img1.baidu.com/...'>");

// 3、删除
    $(".c2").remove(); // 删除标签
    $(".c2").empty();  // 清空内容，保留标签

// 4、复制
    $("").clone([Even[,deepEven]])
  • 事件委派
    • 把原来加给子元素身上的事件绑定在父元素身上，把事件委派给父元素。
    • 传统方法添加事件的两个弊端：很耗费资源、后期动态添加的li，不会拥有事件。

  • css尺寸
// 内容
$("").height([val|fn])
$("").width([val|fn])
// 内容 + 填充
$("").innerHeight()
$("").innerWidth()
// 内容 + 填充 + 边框 + 外边距(true)
$("").outerHeight([options])
$("").outerWidth([options])
  • css位置
$("").offset([coordinates])  
// 获取匹配元素在当前窗口的相对偏移。（参数可设置偏移{top:100 , left:100}）
$("").position()        // 获取匹配元素相对父元素的偏移，position()函数无法用于设置操作。
$("").scrollTop([val])  // 获取匹配元素相对滚动条顶部的偏移。

5、jQuery的动画

5.1、基本方法

// (毫秒, 事件, 回调)
// 1、基本
	show([s,[e],[fn]])   // 显示元素
	hide([s,[e],[fn]])   // 隐藏元素
// 2、滑动
	slideDown([s],[e],[fn])  // 向下滑动 
	slideUp([s,[e],[fn]])    // 向上滑动
// 3、淡入淡出
	fadeIn([s],[e],[fn])     // 淡入
	fadeOut([s],[e],[fn])    // 淡出
	fadeTo([[s],opacity,[e],[fn]])  // 让元素的透明度调整到指定数值
// 4、自定义
	animate(p,[s],[e],[fn])   // 自定义动画 
	stop([c],[j])             // 暂停上一个动画效果，开始当前触发的动画效果（快速点击也不延迟）

5.2、自定义动画

// $(".box").animate(动画最终效果, 动画完成的时间, 动画完成以后的回调函数)

$(".animate").click(function () {
	// 变圆
    $(".c1").animate({
		"border-radius":"50%",
		"top":340,
		"left":200
	},1000,function () {
		// 还原
        $(".c1").animate({
			"border-radius":"0",
			"top":240,
			"left":120
		},1000,function () {
            // 回调：等同于再手动点击一次
            $(".animate").trigger("click")
        })
	})        
})

6、扩展方法 (插件机制)

  • jQuery.extend(object)：扩展 jQuery 对象本身

  • jQuery.fn.extend(object)：扩展 jQuery 元素集，用来制作插件。

7、BootStrap

介绍：Bootstrap是Twitter推出的用于前端开发的开源工具包，是个CSS/HTML框架，让web开发更迅速、简单。

好处：Bootstrap简单灵活，可用于架构流行的用户界面，具有友好的学习曲线，卓越的兼容性，响应式设计，12列栅格系统，样式向导文档，自定义JQuery插件，完整的类库，基于Less等特性。

注意： Bootstrap提供了三种不同的方式供我们下载，我们只需要下载生产环境的Bootstrap即可。

posted @ 2023-07-31 16:28  我是凯凯哦  阅读(70)  评论(0)    收藏  举报