6.前端

HTML

HTML 超文本标记语言(HyperText Markup Language),扩展名叫.html或者.htm
HTML 用来制作网页的标准标记语言，超文本指超出普通文件范畴的内容如是音频视频连接等
HTML 是一种标记性的语言是写给网页游览器进行描述的

CS架构和BS架构

C/S client server 是客户端和服务器架构
B/S Brower Server 是游览器和服务器架构 B/S包含在C/S中是特殊的cs
    游览器是BS结构最主要的客户端，网站也是BS结构的软件
CS下pc端需要下载专门的软件才可以享受服务端的服务，BS下pc只需要安装一个游览器，客户端实现零安装零维护

http协议

Hyper Text Transfer Protocol 超文本传输协议  是用于万维网 服务器与本地游览器之间传输超文本的传送协议，属于应用层的面向对象的协议

http特性

基于tcp ip协议
基于请求响应模式

http规定请求是从客户端发出请求，服务端返回回应

无状态保存

http是不保存状态即无状态协议，http自身不对请求和响应之间的通信状态进行保存，
协议对于发送过的请求和响应不做持久化处理
用户登录一家购物网站即使跳转到其他页面也应该能继续保持登录状态，基于这个例子，网站为了能掌握是谁发出的请求需要保存用户的状态，http1.1虽然是无状态协议，为了实现期望的保持状态功能，引入了cookie技术，有cookie后再使用使用http协议通信就可以管理状态了

无链接状态

无连接的含义是限制每次链接只处理一个请求，服务器处理完客户的请求，并受到客户的应答后即断开连接，可以节省传输时间

http请求协议响应协议

http协议包含游览器发送数据到服务器需要遵循的请求协议与响应协议

请求协议
post方法请求数据是放在最后的,也就是请求体中
get方法数据是放在url后面的以？分隔url与数据参数之间用&连接 get提交的数据有大小限制，因为游览器对url的长度有限制
content-type是发送给服务端的数据以什么方式打包，服务器以相应的格式解包
- urlencoded 是name=’XXX’&age=37
- json是{“name”:“XXX”,“age”=37}
- multipart/form-data 发文件的时候用

空白部分是两个 \r \n

响应协议

	类别	原因短句
1XX	inofrmation（信息性状态码）	接受的请求正在处理
2XX	success(成功状态码)	请求正常处理完毕
3XX	Redirection(重定向状态码)	需要进行附加操作以完成请求
4XX	client error（客户端错误状态码）	服务器无法处理请求
5XX	server error(服务器错误状态码)	服务器处理请求出错

html标准结构

<!DOCTYPE html>  #声明：以html还是 xhtml解释文档 
<html lang="en"> # 根标签 文档的开始和结束标记
<head>  #存放解释性内容 不会出现再游览器的文档窗口显示
    <meta charset="UTF-8"> # 用utf8解释下面的内容
    <title>Title</title> # 标题内容
    <link rel='icon' href='https://www.jd.com/favicon.ico'> 标签图片 
</head>
<body> # 存放显示内容
</body>
</html>

游览器如何访问服务端

地址栏请求 get
超链接标签 get
form表单 get post
ajax

标签(元素)

格式区分：

闭合标签 <p></p>
自闭合标签<img>

功能分类：

块级标签（block）
独占一行 <p> </p> <h> </h1> <ul></ul> <div></div> <li></li> <ol></ol> <dd></dd> <dt></dt> <head></head> <nav></nav> <footer></footer> <section></section> <article></article> <aside></aside>
可设置宽高
不设置宽默认使用父标签的宽度
内联标签（inline）又叫行内元素
<a></a> <span></span> <strong></strong> <em></em> <label></label> <time></time>
不能设置宽高
按内容占位置
不支持上下 margin和padding，支持左右的
代码换行会被解析成半个空格大小
行内块元素
<img></img>
在一行内显示
可以设置宽高

标签嵌原则

块级标签可以嵌套块级标签和内联标签
内联标签只可以嵌套内联
自闭合标签无法嵌套任何标签

基本标签

标题标签

<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>

段落标签

文本中存在多个空格换行符时 游览器只解释一个
<br> 换行标签
<p> </p> 段落标签  自带换行且段落与段落之间有间隙

文本格式化标签

<b> </b> 加粗
<strong> </strong> 加粗
<i> </i> 倾斜
<em> </em> 倾斜
<del> </del> 删除标签  文本上显示————

标记标签`<mark></mark>`

<mark>标记</mark> 默认有背景色

特殊符号

&reg; 
&nbsp;  空格
&copy;  ©

div和span标签

<div></div>
不具备任何样式，配合css以及js使用，赋予一定的效果，可以用div来选择某个内容
<span></span>
不具备任何样式

超链接标签`<a></a>`

<a href='地址'> 点击 </a> 
点击的时候会去地址发起请求来获取响应回来覆盖当前页面，href为空的时候点击会请求当前页面 为#时不在请求
<a href='地址' traget='_blanks' title='提示'> 点击 </a>
点击的时候会去地址发起请求来获取响应，打开新的页面来接受响应 ，并且鼠标悬浮在点击的时候会显示提示

锚点应用

页面内跳转，当内容超出游览器大小需要滚动条的时候才有意义
<a href='#c1'>第一章</a> #是告诉游览器后面跟的值是一个id值 点击的时候第一张内容就会显示在游览器
<a href='#c2'>第二章</a>
<a href='#c3'>第三章</a>
<div id='c1'>第一章的内容</div>
<div id='c2'>第二章的内容</div>
<div id='c3'>第三章的内容</div>
<a href="mailto:邮箱">联系我们</a>  a标签发送邮件

下载应用

在href中写入文件的地址就可以,当游览器可以识别这个文件的时候就会直接打开不会下载，如果格式不被识别则会下载
加上download后不管游览器是否识别文件，直接下载
<a href="1.pdf" download="1.pdf">下载</a>

a标签的颜色

伪类：针对元素的某种状态添加不同的状态
：link   未访问连接的颜色
：visited 访问过的连接的颜色
：hover 鼠标悬停的颜色
：active 鼠标按下不动的颜色

img标签`<img>`

<img src='图片地址' title='提示' alt='也是提示'>
title 是鼠标悬浮在图片时候显示的提示
alt 是图片加载不出来的时候的提示
height 高度
width属性 指定引入图片的显示宽度。
border 边框宽度
图片地址 ./同级目录 ../上级目录
图片跳转的时候可以在a标签里面嵌套img标签
如果单独给标签一个宽或高，图片会等比缩放

列表标签

无序列表 <ul></ul>

<ul type='square'>   square 列表前面的实心圆更改为实心方块
    <li> 01 </li>
    <li> 02 </li>
</ul>
ul必须配合li使用,li是行

有序列表<ol></ol>

<ol>  
    <li> 01 </li>
    <li> 02 </li>
</ol>
ol必须配合li使用,li是行

定义列表<dl></dl>

定义列表分为标题和列表项
<ol>
    <dt>帮助中心</dt> 标题
    <dd>购物指南</dd>  列表项
    <dd>订单操作</dd>  列表项
</ol>
ol必须配合使用dt和dd

表格标签`<table></table>`

<table border='1' cellpadding='内容与边框的距离PX' cellspacing='单元格之间的空隙PX'>  border是边框宽度
    <caption>表格标题</caption>
    <tr> 一行
        <th>产品名称</th> 表头
        <th>产品描述</th>
    </tr> 
    <tr> 
        <td>姓名</td> 列，一个单元格数据
        <td rowspan='3' colspan='2'>年龄</td>  rowspans设置年龄占3行，合并单元格效果 colspan 设置占的列数
    </tr> 
</table>
vertical-align:middle;单元格内字体垂直居中

表单标签`<form></form>`

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

表单被form标签包含，内部使用不同的表单元素来呈现不同的方式来供用户输入或选择。当用户输入好数据后，就可以把表单数据提交到服务器端。

一个表单元素有三个基本组成部分：

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


<form action='数据提交服务器的地址' method='请求方式' enctype='数据的打包方式'></form>

<form action='数据提交服务器的地址' method='请求方式' enctype='数据的打包方式'>
    <p>姓名:<input type='text' name='name'></p> p换行 name是必须的输入的内容和name拼接成键值对否则发送请求的时候没数据
    <p>密码:<input type='password' name='pwd'></p>
    <p>爱好:篮球：<input type="checkbox" name="爱好" value="篮球"></p>
    checkbox 复选框选中就将数据发送给游览器不不选就不发送 type="checked"默认选中
    <input type='submit' value='注册'> 提交按钮
</form>

复选框

<form action='数据提交服务器的地址' method='请求方式' enctype='数据的打包方式'>
    <p>爱好:篮球：<input type="checkbox" name="爱好" value="篮球">
    足球：<input type="checkbox" name="爱好" value="足球"></p>
    checkbox 复选框选中就将数据发送给游览器不不选就不发送 type="checked"默认选中 发送数据时候 name和value组成键值对
    <input type='submit'>
</form>

单选框

<from>
    <P>
        性别：
        男：<input type="radio" name='gender' value="1">
        女：<input type="radio" name='gender' value="2">
        radio下的name只能对应一个值，所以也就是单选
    </P>
</from>

日期类型

<from>
    <p>
       生日：<input tyep="data" name="birth"> 
        发送的日期是字符串格式（2021-01-02）
    </p>
</from>

下拉菜单

<from>
    <p>   
    籍贯：
    <select name="province"id="" multiple="multiple" size="2"> multiple加上就是多选不加是单选 size是多选时默认显示两个其他用下拉来看
        <option value="河北" selected>河北</option> selected默认选中
        <option value="河南">河南</option>
     </select>
    </p>
</from>

多行文本框

<from>
    <p>
        个人简介
        <textarea name=" " id=" " clos="30列" rows="10行" Placeholder="个人简介"></textarea> Placeholder会将个人简介显示再输出框内
    </p>
</from>

按钮标签

<form>
    <p>
         <input type="button" value="普通按钮">
         <input type="reset" value="重置"> 默认事件为重置表单
         <input type="submit" value="提交"> 默认事件为提交表单 只能提交表单里面的数据
         <button>提交按钮</button> "button放在表单里面就是提交放表单外面就是普通的按钮"
    </p>
</form>

label标签

<form>
    <p>
        <label for="user"> 姓名：</label> 点击姓名也可以进入输入框  for关联id值为user
        <input type="text" name="user" placeholder="用户名" id="user">  
    </p>
</form>

H5新增标签

<head></head>

主要用于页面的头部，还可以放板块的头部

<nav></nav>

主要用于放导航

<footer></footer>

主要用于放页面的底部

<section></section>

用于放页面的板块，区分不用的区域

<article></article>

用于放文章

<aside></aside>

放附属信息

<time></time>

时间

css

Cascading Style Sheet 层叠样式表或级联样式表
控制网页外观处理并允许将网页的表现与内容分离的一种标记性语言
不需要编译，可以直接由浏览器执行（游览器解释性语言）
优点：
    有效的对页面布局更加灵活
    对页面字体颜色实现精确控制修改和控制更加便捷
    站点所有网页风格使用一个css文件可以统一控制
    支持多种设备 pad 手机 打印机 电视机
    可以将网页表现与结构分离，页面载入更快便于维护

css基本语

selector {property:value;}
选择器       属性      值
多个属性之间用分号隔开

css的引入方式

行内样式 > 嵌入式 > 链接式

与执行顺序有关从上往下执行后面执行的有覆盖的作用

行内样式

<div style="color:red">XXX</div>  
直接在标签里添加style属性,只在元素内部起作用

嵌入式

把css样式写在html文档内部head标签中的style标签里，游览器加载html的时候就已经加载css了，当单个文档需要特殊单独的样式可以使用内部样式表

<!DOCTYPE html>   
<html lang="en"> 
<head>  
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <link rel='icon' href='https://www.jd.com/favicon.ico'> 
    <style> /css代码/
        p{"color":"green"} 控制p标签 颜色为绿了
    </style>
</head>
<body> 
    <p>你好</p>
</body>
</html>

链接式

css存放在文件里引入，使用的时候在head标签里面用link标签的href属性引入文件，当css样式需要用于在多个页面的时候链接式是最理想的

div{color：white;}
引入方法：
<link rel="stylesheet" type="text/css" href="存放css文件的地址">

css选择器

基本选择器

标签选择器又叫元素选择器
标签名{ }

<!DOCTYPE html>   
<html lang="en"> 
<head>  
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <link rel='icon' href='https://www.jd.com/favicon.ico'> 
    <style> 
        div{color:red;}   div 标签的内容颜色变红
    </style>
</head>
<body> 
    <div>你好</div>
</body>
</html>

id选择器
#id值{ }

<!DOCTYPE html>   
<html lang="en"> 
<head>  
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <link rel='icon' href='https://www.jd.com/favicon.ico'> 
    <style> 
        #I1{color:red;} id为I1标签的内容颜色变红
           #I2{color:lightskyblue;}  id为I2标签的内容颜色变浅蓝色
    </style>
</head>
<body> 
    <p id="I1">DEEP</p> ID不能重复
    <p id="I2">COOL</p>
</body>
</html>

class选择器
.class名{ }

<!DOCTYPE html>   
<html lang="en"> 
<head>  
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <link rel='icon' href='https://www.jd.com/favicon.ico'> 
    <style> 
        .C1{color:red;} 类名为C1标签的内容颜色变为红色
    </style>
</head>
<body> 
    <p class="C1">DEEP</p>  class类
    <p class="C1">COOL</p>
</body>
</html>

通配选择器

*{color:read;} *代表所有标签

组合选择器

后代选择器

先找父标签 可以找多级
<!DOCTYPE html>   
<html lang="en"> 
<head>  
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <link rel='icon' href='https://www.jd.com/favicon.ico'> 
    <style> 
        .C1 .C2{color:red;} 去C1里面找类名为C2的 空格代表后代
           .C1 .C2 .C3{color:red;}
    </style>
</head>
<body> 
    <div class="C1"> 
        <div class='C2'>cool1</div>
    </div>
    <div class="C2">cool2</div> 
</body>
</html>

子代选择器

<!DOCTYPE html>   
<html lang="en"> 
<head>  
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <link rel='icon' href='https://www.jd.com/favicon.ico'> 
    <style> 
        .C1>.C2{color:red;} 去C1里面找类名为C2的只找子代
    </style>
</head>
<body> 
    <div class="C1"> 
        <div class='C2'>cool1</div>
    </div>
    <div class="C2">cool2</div> 
</body>
</html>

与或选择器

<!DOCTYPE html>   
<html lang="en"> 
<head>  
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <link rel='icon' href='https://www.jd.com/favicon.ico'> 
    <style> 
        div.c1{color:red;} div标签且属性叫c1  与选择器
        div.c1,#I1{color:red;} div标签且属性叫c1 或者id为I1的
    </style>
</head>
<body> 
    <div class="C1"> DEEP</div>
    <p class="C1">DEEP1</p>
    <div>item</div>
    <p id="I1">item</p>
</body>
</html>

兄弟选择器

<!DOCTYPE html>   
<html lang="en"> 
<head>  
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <link rel='icon' href='https://www.jd.com/favicon.ico'> 
    <style> 
        .c2+div{color:red;} 毗邻 找c2相邻的div也就是c3
        .c2~div{color:red} 兄弟 找c2往下的div 
    </style>
</head>
<body> 
    <div class="C1"> DEEP</div>
    <div class="C2"> DEEP</div>
    <div class="C3"> DEEP</div>
    <p>DEEP</p>
</body>
</html>

class属性选择器

E[att]          匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略。
                比如“[cheacked]”。以下同。）   p[title] { color:#f00; }
E[att=val]      匹配所有att属性等于“val”的E元素   div[class=”error”] { color:#f00; }
E[att~=val]     匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
                td[class~=”name”] { color:#f00; }
E[attr^=val]    匹配属性值以指定值开头的每个元素                    
                div[class^="test"]{background:#ffff00;}
E[attr$=val]    匹配属性值以指定值结尾的每个元素    div[class$="test"]{background:#ffff00;}
E[attr*=val]    匹配属性值中包含指定值的每个元素    div[class*="test"]{background:#ffff00;}

<!DOCTYPE html>   
<html lang="en"> 
<head>  
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <link rel='icon' href='https://www.jd.com/favicon.ico'> 
    <style> 
        [type]{border:1pX} 找属性为type的
        [type="text"]{border:1pX} 找属性为type且值为text的
        input[type]{border:1pX} 找input标签且属性为type的
    </style>
</head>
<body> 
    <input type="TEXT">
</body>
</html>

伪类选择器

anchor伪类用于控制超链接的显示效果 | :link | a:link | 选择所有未被访问的链接。 | | —- | —- | —- | | :visited | a:visited | 选择所有已被访问的链接。 | | :active | a:active | 选择活动链接。 | | :hover | a:hover | 选择鼠标指针位于其上的链接。 |

<style>
    a:link{color:red;}
    a:visited{color:blue;}
    a:active{color:red;}
    a:hover{color:blue;}
</style>

befor after 伪类

相当于在元素内部插入两个额外的标签，最适和的就是图形生成，在一些精致的UI实现上，可以简化HTML代码

:first-child	p:first-child	选择属于父元素的第一个子元素的每个元素。是找到p标签的父类，然后在父类中找第一个子元素
:last-child	p:last-child	选择属于其父元素最后一个子元素每个元素。找到p标签的父类，然后在父类中找最后一个子元素
:before	p:before	在每个元素的内容之前插入内容。在内容前插入
:after	p:after	在每个元素的内容之后插入内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 p:first-child{color: red;}   item1
        .c1 div:last-child{ color: red;} item4
        p#i1:after{
            content:"hello";
            color:red;
            display: block;
        }
    </style>
</head>
<body>
<div class="c1">
    <p>item1</p>
    <p>item12</p>
    <div>item3</div>
    <p>item4</p>
</div>
<p id="i1">p标签</p>
</body>
</html>

样式继承

继承就是，特定的css属性向下传递到子孙元素总的来说，一个HTML文档就是一个家族，然后html元素有两个子元素，相当于它的儿子，分别是head和body，然后body和head各自还会有自己的儿子，最终形成了一张以下的家族谱。

可以继承的元素表格

文本相关属性
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

有一些属性不能被继承，如：border, margin, padding, background等。

选择器优先级

优先级是指css样式在游览器中被解析的先后顺序

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
1 内联样式表的权值最高               style=""           1000；
2 统计选择符中的ID属性个数。         #id                100
3 统计选择符中的CLASS属性个数。      .class             10
4 统计选择符中的HTML标签名个数。     标签名              1
按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。

1、有!important声明的规则高于一切。
2、如果!important声明冲突，则比较优先权。
3、如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。
4、由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。
5、用数字表示只是说明思想，一万个class也不如一个id权值高

属性操作

文本属性

text-indent(缩进)

text-indent:40px

font-style（字体样式风格）

属性值：
normal：设置字体样式为正体。默认值。 
italic：设置字体样式为斜体。这是选择字体库中的斜体字。
oblique：设置字体样式为斜体。人为的使文字倾斜，而不是去使用字体库的斜体字。

font-weight（字体粗细）

属性值：
normal：设置字体为正常字体。相当于数字值400
bold：设置字体为粗体。相当于数字值700。
bolder：设置字体为比父级元素字体更粗的字体。
lighter：设置字体为比父级元素字体更细的字体。
number：用数字表示字体粗细。从小到大，越来约粗，取值范围：100、200、300、400、500、600、700、800、900。
注意：
font-weight的常用值有两个normal和bold，其他的值在浏览器中的支持并不好。

font-size的值有很多，有xx-small、x-small、small、medium、large、x-large、xx-large、smaller和larger，也可以设置值为具体的数值加上对应的计算单位来表示字体的大小。字体单位有像素（ px ）、字符（ em，默认1em等于16px，2em等于32px，根据不同浏览器的默认字体大小而决定 ）、百分比（ % ），磅[点]（ pt ）。
字体不指定大小时，主流浏览器默认是15像素到16像素。旧版本的谷歌浏览器，字体最小只能设置成12像素，新版已经修复

font-family（字体族）

font-family可以指定元素使用的字体系列或字体族。当我们使用font-family指定字体族的时候，可以指定多种字体,作为候补。指定多个字体的时候，需要使用逗号隔开。
如果css中没有声明当前内容使用的字体族的时候，默认：
    中文：  宋体 [ win7以后默认是 微软雅黑 ]
    英文：  Arial

color（字体颜色）

可以使用color来表示字体的颜色，颜色值最常用的有三种形式，英文单词，十六进制，RGB十进制。更高级的有 RGBA、HSL、HSLA，不过低版本的浏览器并不支持。

text-align（文本对齐方式）

text-align属性可以设置文本内容的水平对齐方式。属性值常用的有
左对齐left、居中对齐center、右对齐right。justify 实现两端对齐文本效果。

line-height（字体行高）

 字体行高即字体最底端与字体内部顶端之间的距离。值可以是normal、px、number、%。
 行高 = 字体大小 + 上半行距 + 下半行距

vertical-align

vertical-align 属性设置元素的垂直对齐方式。
<img src="" alt=""><span>yuan</span>

text-decoration

使用text-decoration可以设置文本内容的装饰线条，正常的文本是没有线条的，常用的值有none，underline，overline，line-through四种。

背景属性

background-color（背景颜色）


background-color: transparent;   // 透明 
background-color: rgb(255,0,0); //  红色背景 
background-color: #ff0000;  //  红色背景
background-color: red;    // 红色背景

background-image（背景图片）


background-image: url('图片地址')

当同时定义了背景颜色和背景图像时，背景图像覆盖在背景颜色之上。 所以当背景图片没有被加载到，或者不能完全铺满元素时，就会显示背景颜色。

background-image可以引入一张图片作为元素的背景图像。默认情况下，background-image放置在元素的左上角，并在垂直和水平方向重复平铺。

background-repeat（背景平铺方式）

CSS中，当使用图像作为背景了以后，都是默认把整个页面平铺满的，当需要背景图像只显示一次，或者只按照指定方式进行平铺的时候，可以使用background-repeat来进行设置。

默认是repeat（平铺），no-repeat（不平铺），repeat-x（X轴平铺），repeat-y（Y轴平铺）。

background-position（背景定位）

background-position: x轴坐标 y轴坐标

CSS中支持元素对背景图像的定位摆放功能，就是利用background-position属性来实现，以页面中元素的左上角为原点（0，0），把元素的内部区域当成一个坐标轴（上边框为X轴，越往左X的值越大，左边框为Y轴，越往下Y轴的值就越大，反之亦然），然后计算出背景图片的左上角与圆点的距离（x轴和y轴的距离），然后把背景图片放入到指定的位置上，对背景图片的位置进行精确的控制和摆放。

background-position的值分成两个，使用空格隔开，前面一个是背景图片左上角的x轴坐标，后面一个是背景图片左上角的y轴坐标。两个值都可以是正、负值。

背景定位的值除了是具体的数值以外，还可以是左（left）、中（center）、右（right）还可以是百分比

水平百分比的值 = 容器宽度的百分比-背景图片宽度的百分比

background（背景样式缩写）

background: 背景颜色  背景图片  背景平铺方式  背景定位;


和字体属性一样，多个不同背景样式属性也是可以同时缩写的，不过不需要像字体那样按照一定的顺序，背景样式的缩写属性的顺序是不固定的，可以任意编排。

边框属性

border-style（边框风格）

none：没有边框，当border的值为none的时候，系统将会忽略[border-color]
hidden：隐藏边框，低版本浏览器不支持。
dotted：点状边框。
dashed：虚线边框。
solid：实线边框。
double：双实线边框，两条单线与其间隔的和等于border-width值。

border-style的值可以缩写的
只有一个值的时候表示同时控制上下左右的边框风格。 border-style=50px
只有两个值的时候表示分别控制上下、左右的边框风格。border-style=50px,60px
有三个值的时候表示分别控制上、左右、下的边框风格。border-style=50px,60px,1px
有四个只的时候表示分别控制上、右、下、左的边框风格。border-style=50px,60px,1px,1px


border-top-style        设置上边的边框风格
border-bottom-style         设置下边的边框风格
border-left-style        设置左边的边框风格
border-right-style        设置右边的边框风格

border-width（边框宽度）

使用border-width可以定义边框的厚度，值可以是medium，thin，thick和指定数值的宽度。 同时，border-width也可以进行缩写,缩写与border-style相同


border-top-width        设置上边的边框宽度
border-bottom-width        设置下边的边框宽度
border-left-width        设置左边的边框宽度
border-right-width        设置右边的边框宽度

border-color（边框颜色）

定义边框的颜色，值表示的方式可以是十六进制，RGB十进制和单词表示法。

border-top-color        设置上边的边框颜色
border-bottom-color    设置下边的边框颜色
border-left-color        设置左边的边框颜色
border-right-color        设置右边的边框颜色

边框样式缩写

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

列表属性

 li { list-style-image:url('qq.gif'); }

设置不同的列表项标记为有序列表
设置不同的列表项标记为无序列表
设置列表项标记为图像

list-style-type（系统提供的列表项目符号）
list-style-image（自定义的列表项目符号）

display属性

display可以指定元素的显示模式，它可以把行内元素修改成块状元素，也可以把别的模式的元素改成行内元素。diisplay常用的值有四个。

display: block;             // 声明当前元素的显示模式为块状元素 独自占一行 可以设置宽高 如果不设置宽默认是父标签的宽
display: inline;        // 声明当前元素的显示模式为行内元素
display: inline-block;      // 声明当前元素的显示模式为行内块状元素 可以设置宽高，可以在一排显示
display: none;            // 声明当前元素的显示模式为隐藏  当多个内容时中间内容隐藏下面的会顶上去
display：table-cell;        //当前元素以单元格形式显示

盒模型

盒模型是CSS的核心知识点之一，它指定元素如何显示以及如何相互交互。HTML页面上的每个元素都可以看成一个个方盒子，这些盒子由元素的content（内容）、padding（内边距）、border（边框）、margin（外边距）组成。

padding内边距

内边距，也叫“内补白”，表示页面中元素的边框与内容的距离。内边距的值不能是负值，相当于table标签的cellpadding属性。

当padding只有一个值的时候表示同时控制上下左右的内边距。
当padding只有两个值的时候表示分别控制上下、左右的内边距。
当padding有三个值的时候表示分别控制上、左右、下的内边距。
当padding有四个只的时候表示分别控制上、右、下、左的内边距。

padding-top             设置上边的外边距
padding -bottom         设置下边的外边距
padding -left            设置左边的外边距
padding -right            设置右边的外边距

margin外边距

外边距，也叫“外补白”，表示页面中元素与元素之间的距离。外边距越大，两者的距离就越远，反之，如果外边距越小，则元素之间的距离就越近，外边距的值可以是正数，也可以是负值。

margin也可以像padding一样设置多个值和单独方向设置，用法一样。

在网页的开发过程中，需要让一个元素相对于父级元素作水平居中时，可以借助margin的特性来实现。
使用margin让元素自身居中：  margin: 0 auto;
浏览器的默认边距清零 border{margin:0;}

float属性(浮动)

流动布局

流动模型（Flow），即文档流，浏览器打开HTML网页时，从上往下，从左往右，逐一加载。
在正常情况下，HTML元素都会根据文档流来分布网页内容的。
文档流有2大特征：
① 块状元素会随着浏览器读取文档的顺序，自上而下垂直分布，一行一个的形式占据页面位置。
② 行内元素会随着浏览器区队文档的顺序，从左往右水平分布，一行多个的形式占据页面位置。行内元素摆放满一行以后才会到下一行继续排列。
脱离文档流后不占页面的位置

| 值    | 描述                             
| ----- | -------------
| left  | 在左侧浮动           
| right | 在右侧浮动

浮动模型

要学习浮动模型的布局模式，就要了解CSS提供的浮动属性（float）。浮动属性是网页布局中最常用的属性之一，通过浮动属性不但可以很好的实现页面布局，而且还可以依靠它来制作导航栏等页面功能。

当一个元素被设置浮动后，将具有以下特性：

1. 任何申明为float 的元素都会自动被设置为一个行内块状元素，具有行内块状元素的特性。 
2. 假如某个元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。
3. 在标准浏览器中如果浮动元素a脱离了文档流，那么排在浮动元素a后的元素将会往回排列占据浮动元素a本来所处的位置，使页面布局产生变化。
4. 如果水平方向上没有足够的空间容纳浮动元素，则转向下一行。
5. 字围效果：文字内容会围绕在浮动元素周围。
6. 浮动元素只能浮动至左侧或者右侧。
7. 浮动元素只能影响排在其后面元素的布局，却无法影响出现在浮动元素之前的元素

清除浮动

1. 在父元素设置高度来解决浮动
2.内墙法 在最后一个浮动元素后插入一个空的块元素设置clear:both
3.伪元素清除方法 --->推荐
网页布局中，最常用的布局便是浮动模型。但是浮动了以后就会破坏原有的文档流，使页面产生不必要的改动，所以我们一般在浮动了以后，达到目的了，就紧接着清除浮动。

在主流浏览器（如Firefox）下，如果没有设置height，元素的高度默认为auto，且其内容中有浮动元素时，在这种情况下元素的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的情况，叫“浮动溢出”，为了防止这个现象的出现而进行的CSS处理操作，CSS里面叫“清除浮动”。

| 值    | 描述                             |
| ----- | -------------------------------- |
| left  | 在左侧不允许浮动元素。           |
| right | 在右侧不允许浮动元素。           |
| both  | 在左右两侧均不允许浮动元素。     |
| none  | 默认值。允许浮动元素出现在两侧。 |

4.inline-block
加了该属性后元素就没办法居中了
5.overflow:hidden
如果子级有定位的话，并且定位超出了父级别的范围，就会看不见了

清除浮动解决父级塌陷 ——>伪元素清除法

 .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文件中写入大量无意义的空标签，又能清除浮动。
<div class="head clearfix"></div>

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


":after伪类的内容默认是一个行内元素"

overflow属性


针对超出父级的内容如何显示

hidden   针对超出父级的内容进行隐藏
auto     内容超出父级就会出现滚动条，如果内容没超出就没有
visible  默认值，超出的范围会显示出来
scroll   不管内容有没有超出，都有滚动条

position属性

网页布局中的每一个元素也可以看成是一个个类似图层的层模型。层布局模型就是把网页中的每一个元素看成是一层一层的，然后通过定位属性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像素

z-index:10  数值越大层级越高  只能用在定位元素上

相对定位 relative

相对定位就是在正常文档流中，元素相对于自身位置使用left、right、top、bottom属性进行定位偏移。
对于仅设置相对定位的话和正常文档流的盒子是一样的
不会脱离文档流

绝对定位 absolute

绝对定位就是将元素脱离文档流，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父级元素进行绝对定位，如果不存在这样的父级元素，则默认是相对于body元素左上角进行绝对定位。

固定定位 fixed

固定定位与绝对定位相似，但是固定定位是使用left、right、top、bottom属性相对于整个浏览器的窗口进行定位，而不再相对于某个HTML页面元素了，所以当元素使用了固定定位以后，就算页面的滚动条滚动了，固定定位的元素也不会变化位置。也就是说固定定位是相对于窗口的定位，不受文档流的影响了。

轮播图案例

<!DOCTYPE HTML>
<html lang="en-US">
  <head>
        <meta charset="utf8">
        <style>

            *{ margin: 0;padding: 0;}

            .lunbo{ width: 590px; height: 470px;border: 1px solid rebeccapurple;
                margin: 100px auto;position: relative;} # 相对定位

            .lunbo ul{ list-style: none; }  # 去除列表的样式

            .lunbo .img li{
                position: absolute;top: 0;left: 0;} # 绝对定位

            .lunbo .btn li{font-size: 25px; width: 40px;height: 40px;
                background-color: gray; text-align: center; line-height: 40px;
                border-bottom-right-radius: 50%;border-top-right-radius: 50%;
                color: white; position: absolute; top: 50%;
                margin-top: -20px;}

            .lunbo .left_btn{ left: 0;}

            .lunbo .right_btn{ right: 0;}
        </style>
  </head>
  <body>


  <div class="lunbo">
      <ul class="img">
          <li><a href=""><img src="imgs/1.jpg" alt=""></a></li>
          <li><a href=""><img src="imgs/2.jpg" alt=""></a></li>
          <li><a href=""><img src="imgs/3.jpg" alt=""></a></li>
          <li><a href=""><img src="imgs/4.jpg" alt=""></a></li>
          <li><a href=""><img src="imgs/5.jpg" alt=""></a></li>
      </ul>
      <ul class="btn">
          <li class="left_btn">  <  </li>
          <li class="right_btn"> > </li>
      </ul>
  </div>
  </body>
</html>

BFC概念

Block Formatting Contexts  块级元素格式化上下文
它决定了块级元素如何对它的内容进行布局，以及与其他元素的关系和相互作用

块级元素：父级 （是一个块元素）
内容： 子元素（是一个块元素）
其他元素：与内容同级别的兄弟元素
相互作用：BFC里的元素与外面的元素不会发生影响

触发BFC的方式：
1. float 的值不为None
2. overflow的值不为visible
3. display的值为table-cell,table-caption,inline-block
4.position的值不为static或者releative

BFC布局规则


普通文档流布局规则：
1. 浮动的元素是不会被父级元素计算高度的
2. 非浮动元素会覆盖浮动元素的位置
3. margin会传递给父级
4. 两个相邻元素上下margin会重叠


BFC的布局规则
1. 浮动元素会被父级元素计算高度(父级触发BFC)
2. 非浮动元素不会覆盖浮动元素的位置（非浮动元素触发）
3. margin不会传递给父级（父级触发）
4. 两个相邻的元素上下margin不会重叠（给其中一个元素添加一个单独的父级，然后让父级触发BFC）

雪碧图技术

是一种图像合并技术
将多个小图标和背景图像合并到一张图片上
利用css的背景定位来显示需要显示的图片部分

使用雪碧图的场景
静态图片 不随用户信息变化而变化
小图片 图片比较小 2-3kb
加载量比较大 大图片不建议使用雪碧图


使用css的背景属性的background-position来控制雪碧图的显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>雪碧图技术</title>
    <style type="text/css">
        div{
            width:48px;
            height:88px;
            background: url('imges/taobao_list.png' no-repeat 0 0 ;)
            background-size:24px 597px; 设置图片背景的大小
        }
        div.sprite{
            background-position:0 0;
        }

        div.sprite2{
            background-position:0 -88px;
        }
        div.sprite3{
            background-position:0 -176px;
        }

    </style>


</head>
<body>
    <div class="sprite"></div>
      <div class="sprite2"></div>
      <div class="sprite3"></div>
</body>
</html>

案例

1.网页元素产生阴影效果


<style>
    .shadow{

        width:200px;
        height:200px;
        background-color:purple;
        box-shadow:阴影水平偏移方向px，阴影垂直偏移方向px，阴影模糊程度px，阴影的颜色  ，阴影内射inset（默认外射）。 盒模型的阴影
    }

    .shadow:hover{
        top:-3px;
        box-shadow:2px,2px,50px,red,
    }

</style>

<body>
    <div class="shadow"></div>
</body>

2.透明

<head>
    <style>
        div{
            width:100px;
            height:100px;
            border:1px solid red;
            position:relative;
        }
        span{
            position:absolute;
            left:0;
            bottom:0;
            background:#000;
            background:rgba(0,0,0,0,0.5); #也可以实现透明效果，最后一个值是透明度
            color:#fff;
            width:100%;
            font:16px/40px "微软雅黑";
            text-indent:2em;
            opacity:0.5;<!--透明效果-->
        }


    </style>

</head>



<body>

    <div>
        <img src="">
        <span>图片透明效果</span>
    </div>

</body>

JavaScript

js引入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type=text/javascript>js代码</script>  嵌入式
    <script ype=text/javascript src="js文件路径"></script> 链接方式

</head>
<body>

</body>
</html>

js基本语法

js是一门弱类型的编程语言，属于基于对象和基于原型的脚本语言

变量

先定义再赋值 ，如果没有赋值默认是undefined
var 变量名  ;
变量名 =10;

声明并赋值
var y =20;

声明多个变量,并且可以是不同类型的
var a=1,b=2;

声明变量时不用var 那么就是声明了一个全局变量
便令命名 首字符只能是字母，下划线 $ 三选一 ，剩下的可以是下划线 $ 或任何字或数字字符区分大小写

注释

// 单行注释
/*
多行注释
*/

语句分隔符

var a=1 //分号和换行符作为语句分隔符
var b=2;
console.l0g(a,b)

数据类型

原始类型	字符串 string
	数字 number
	布尔值 boolean
	null
	undefined
对象类型	数组 array
	object
	函数对象 function
	日期data
	错误error
	正则RegExp
	内置对象（json math arguments）

数字类型

js没有整型和浮点型 只有number类型
var x =10;
var y =3.14;
console.log(x,typeof y); 3.14 "number"

字符串

变量 = "字符串"
字符串对象名称 = new String（"hello"）
var str = "hello";
car str1 = new String("hell");

```javascript

// 字符串对象的操作 var str = “hello”; // 这就是字符串对象 console.log(str);

// 字符串对象内置属性 // length 计算字符串的长度 console.log( str.length );

// 字符串对象内置方法 // toUpperCase(); 字母大写转换 // toLowerCase(); 字母小写转换

console.log( str.toUpperCase() ); console.log( str.toLowerCase() );

// indexOf 获取指定字符在字符串中第一次出现的索引位置 // 字符串也有下标,也可以使用中括号来提取字符串的指定字符 console.log(str[1]); // e console.log( str.indexOf(“e”) ); // 1

// 切片,当前方法支持使用负数代表倒数下标 // slice(开始下标) 从开始位置切到最后 // slice(开始下标,结束下标) 从开始下标切到指定位置之前 var str = “helloworld”; var ret = str.slice(3,6); // 开区间,不包含结束下标的内容 console.log(ret); // low var ret = str.slice(5); console.log(ret); // world var ret = str.slice(2,-1); console.log(ret); // lloworl var ret = str.slice(-4,-1); console.log(ret); // orl var ret = str.slice(-1,-4); console.log(ret); // orl

// split 正则分割,经常用于把字符串转换成数组 var str = “广东-深圳-南山”; var ret = str.split(“-“); console.log( ret );

// substr 截取 var str = “hello world”; var ret = str.substr(0,3); console.log(ret); // hel

// trim 移除字符串首尾空白 var password = “ ge llo “; var ret = password.trim(); console.log(password.length); // 13 console.log(ret.length); // 6


   - 布尔值
```javascript
true=1 false=0  代表0和1  
可以看作是on/off yes/no 1/0 对应true/false
主要用于控制语句

console.log(true); ture
console.log(false); false
console.log(typeof true); bool
console.log(true === 1); false
console.log(true == 1); true
console.log(true + 1);2
console.log(false + 1);1

空值

undefined类型只有一个值，即 undefined。
当声明的变量未初始化时，该变量的默认值是 undefined。
当函数无明确返回值时，返回的也是值 undefined;

另一种只有一个值的类型是 null，它只有一个专用值 null，即它的字面量。值 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。

尽管这两个值相等，但它们的含义不同。undefined 是声明了变量但未对其初始化时赋予该变量的值，null 则用于表示尚未存在的对象。如果函数或方法要返回的是对象，那么找不到该对象时，返回的通常是 null。

类型转换

强制转换和自动转换
因为是一门弱类型脚本语言，所以变量会在运算符的运行要求，有时候会根据运算符的要求进行自动转换

强制转换
// 1. 转换数据为数值类型
// parseInt     把数据转换成整数
// parseFloat   把数据转换成小数
// Number       把数据转换成数值
var box1 = "一共100件"; // 转换会失败
var box1 = "100件";     // 转换会成功
var ret = parseInt(box1);
console.log(box1);
console.log(ret);
//
var box2 = "3.14";
console.log(parseFloat(box2) ); // 3.14
//
var box3 = "3.14";   // 使用Number转换的数据里面必须是纯数字!!!!否则都会转换失败
// var box3 = "3.1.4";  // 转换失败!
console.log( Number(box3) );

// 对于转换数值,如果转换失败的话,则结果为 NaN ,是 Not a Number ,但是NaN的类型也是number类型

// 2. 转换数据为字符串
// 变量.toString()
// String(数据)
var box4 = 3.14;
var ret = box4.toString();
console.log(ret);
//
ret = String(box4);
console.log(ret);

// 3. 转换数据成布尔类型
// Boolean()

var box5 = "";
console.log( Boolean(box5) ); // false
var box6 = -1;
console.log( Boolean(box6) ); // true
var box7 = 0;
console.log( Boolean(box7) ); // false;
var box8 = "false";
console.log( Boolean(box8) ); // true
var box9 = [];
console.log( Boolean(box9) ); // true
var box10 = {};
console.log( Boolean(box10) ); // true
var box11 = "0";
console.log( Boolean(box11) ); // true
var box12 = null;
console.log( Boolean(box12) ); // false
var box13 = undefined;
console.log( Boolean(box13) ); // false

// 所谓的自动转换,其实弱类型中的变量会根据当前代码的需要,进行类型的自动隐式转化
var box1 = 1 + true;
// true 转换成数值,是1, false转换成数值,是0
console.log(box1); // 2

var box2 = 1 + "200";
console.log(box2); // 1200 原因是,程序中+的含义有2种,第一: 两边数值相加, 第二: 两边字符串拼接.但是在js中运算符的优先级中, 字符串拼接的优先级要高于数值的加减乘除,所以解析器优先使用了+号作为了字符串的拼接符号了,因为程序就需要+号两边都是字符串才能完成运算操作,因此1变成字符串最终的结果就是 "1" +"200"

var box3 = 1 - "200";
console.log(box3); // -199;因为-号中表示的就是左边的数值减去右边的数值,因此程序就会要求"200"是数值,因此内部偷偷的转换了一下

原始值和引用值

根据数据类型不同，有的变量储存在栈中，有的储存在堆中。具体区别如下：

原始变量及他们的值储存在栈中，当把一个原始变量传递给另一个原始变量时，是把一个栈房间的东西复制到另一个栈房间，且这两个原始变量互不影响。

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

// 初始值类型
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]

运算符


//算术运算符
   +   数值相加
   -   数值相减
   *   数值相乘
   /   数值相除
   %   数值求余
   **  数值求幂
   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);

流程控制语句

顺序结构从上往下执行
分支结构

  if(条件){
     // 条件为true时,执行的代码
   }

  if(条件){
     // 条件为true时,执行的代码
   }else{
     // 条件为false时,执行的代码
   }

   if(条件1){
     // 条件1为true时,执行的代码
   }else if(条件2){
     // 条件2为true时,执行的代码

   }....

   }else{
     // 上述条件都不成立的时候,执行的代码
   }

switch(条件){
      case 结果1:
           满足条件执行的结果是结果1时,执行这里的代码..
           break;
      case 结果2:
             满足条件执行的结果是结果2时,执行这里的代码..
             break;
      .....
      default:
           条件和上述所有结果都不相等时,则执行这里的代码
   }

switch比if else更为简洁
执行效率更高。switch…case会生成一个跳转表来指示实际的case分支的地址，而这个跳转表的索引号与switch变量的值是相等的。从而，switch…case不用像if…else那样遍历条件分支直到命中条件，而只需访问对应索引号的表项从而到达定位分支的目的。
到底使用哪一个选择语句，代码环境有关，如果是范围取值，则使用if else语句更为快捷；如果是确定取值，则使用switch是更优方案。

循环结构

while 循环  
while(循环的条件){
      // 循环条件为true的时候,会执行这里的代码 先判断再执行
   }
----------------------------------------------------
 var count = 0
 while (count<10){
     console.log(count);
     count++;
 }
----------------------------------------------------
var sum = 0 ;
var i = 1;
do{
    sum=sum+i;
    i++
}whie(i<=100);

do while 先执行一次再判断

for循环 
// 循环三要素
   for(1.声明循环的开始; 2.结束条件; 4. 循环的计数){
      // 3. 循环条件为true的时候,会执行这里的代码
   }

   for(循环的成员下标 in 被循环的数据){
      // 当被循环的数据一直没有执行到最后下标,都会不断执行这里的代码
   }   

//退出循环
 for (var i = 0;i<100;i++){
           if (i===88){
               continue  // 退出当次循环
               // break  // 退出当前整个循环
           }
           console.log(i)
       }
------------------------------------------------------------
// 方式1
for (var i = 0;i<10;i++){
    console.log(i)
}

// 方式2
var arr = [111,222,333]
for (var i in arr){
    console.log(i,arr[i])
}

数组对象

创建数组

创建方式1:
var arrname = [元素0,元素1,….];          // var arr=[1,2,3];

创建方式2:构造元素
var arrname = new Array(元素0,元素1,….); // var test=new Array(100,"a",true);

数组方法

var arr = ["A","B","C","D"];
// 内置属性
console.log( arr.length );
// 获取指定下标的成员
// console.log( arr[3] ); // D
console.log( arr[arr.length-1] ); // 最后一个成员

// (1) pop()  出栈,删除最后一个成员作为返回值
var arr = [1,2,3,4,5];
var ret = arr.pop();
console.log(arr); // [1, 2, 3, 4]
console.log(ret); // 5


// (2) push() 入栈,给数组后面追加成员
var arr = [1,2,3,4,5];
arr.push("a");
console.log(arr); // [1, 2, 3, 4, 5, "a"]


// (3) shift是将数组的第一个元素删除
var arr = [1,2,3,4,5];
arr.shift()
console.log(arr); // [2, 3, 4, 5]

// (4) unshift是将value值插入到数组的开始
var arr = [1,2,3,4,5];
arr.unshift("yuan")
console.log(arr); // ["yuan",1,2, 3, 4, 5]


// (5) reverse() 反转排列
var arr = [1,2,3,4,5];
arr.reverse();
console.log(arr); // [5, 4, 3, 2, 1]

// (6) slice(开始下标,结束下标)  切片,开区间


// (7) sort() 排序
var arr = [3,4,1,2,5,10];
console.log( arr ); // [3, 4, 1, 2, 5, 10]
arr.sort();
//
// // 这是字符的排序,不是数值的排序
console.log(arr);   //  [1, 10, 2, 3, 4, 5]

// 数值升序
var arr = [3,4,1,2,5,10];
arr.sort(function(a,b){
    return a-b;
});
console.log(arr);  // [1, 2, 3, 4, 5, 10]

// 数值降序   默认调用tostring发方法是比较的字符串
var arr = [3,4,1,2,5,10];
arr.sort(function(a,b){
    return b-a;
});
console.log(arr); // [10, 5, 4, 3, 2, 1]

// (8) splice(操作位置的下标,删除操作的成员长度,"替换或者添加的成员1","替换或者添加的成员2")  添加/删除指定的成员   "万能函数"
var arr1 = [1,2,3];
arr1.splice(1,1);
console.log(arr1); // 删除指定的1个成员  [1, 3]

var arr2 = ["a","b","c","d"];
arr2.splice(2,0,"w","x","w"); // 添加
console.log(arr2); // ["a", "b", "w", "x", "w", "c", "d"]

var arr3 = ["a","b","c"];
arr3.splice(1,1,"w");
console.log(arr3); // ["a", "w", "c"]

// (9) concat() 把2个或者多个数组合并
var arr1 = [1,2,3];
var arr2 = [4,5,7];
var ret = arr1.concat(arr2);
console.log( ret );


// (10) join()  把数组的每一个成员按照指定的符号进行拼接成字符串
var str = "广东-深圳-南山";
var arr = str.split("-");
console.log( arr ); // ["广东", "深圳", "南山"];

var arr1 = ["广东", "深圳", "南山"];
var str1 = arr1.join("-");
console.log( str1 ); // 广东-深圳-南山


// (11) find()  高阶函数, 返回符合条件的第一个成员
var arr = [4,6,5,7];
var func = (num)=>{
    if(num%2===0){
        return num;
    }
};
var ret = arr.find(func);
console.log( ret ); // 4

// (12)  filter() 高阶函数, 对数组的每一个成员进行过滤,返回符合条件的结果
var arr = [4,6,5,7];
function func(num){  // 也可以使用匿名函数或者箭头函数
    if(num%2===0){
        return num;
    }
}
var ret = arr.filter(func);  // 所有的函数名都可以作为参数传递到另一个函数中被执行
console.log( ret );

// (13) map() 对数组的每一个成员进行处理,返回处理后的每一个成员
var arr = [1,2,3,4,5];
var ret = arr.map((num)=>{
    return num**3;
});
console.log( ret  ); // [1, 8, 27, 64, 125]

// (14) 其它方法
// includes   查询指定数据是否在数组中存在!
// indexOf()  查询指定数据在数组中第一次出现的位置
// isArray()  判断变量的值是否是数组

遍历数组

 var arr = [12,23,34]
 for (var i in arr){
       console.log(i,arr[i])
 }

Object对象

基本操作

 Object 的实例不具备多少功能，但对于在应用程序中存储和传输数据而言，它们确实是非常理想的选择。
Object 实例的方式有两种。
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)
-------------------------------------------------------------
ject可以通过for循环遍历
 for (var attr in person){
           console.log(attr,person[attr]);
      }

序列化与反序列化

# json是一种数据格式, 语法一般是{}或者[]包含起来
# 内部成员以英文逗号隔开,最后一个成员不能使用逗号!
# 可以是键值对,也可以是列表成员
# json中的成员如果是键值对,则键名必须是字符串.而json中的字符串必须使用双引号圈起来
# json数据也可以保存到文件中,一般以".json"结尾.
# 前端项目中,一般使用json作为配置文件.

{
   "name": "xiaoming",
     "age":12
}

[1,2,3,4]

{
   "name": "xiaoming",
     "age":22,
   "sex": true,
   "son": {
      "name":"xiaohuihui",
      "age": 2
   },
   "lve": ["篮球","唱","跳"]
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // js对象,因为这种声明的对象格式很像json,所以也叫json对象
    var data = {
        name: "xiaoming",
        age: 22,
        say: function(){
            alert(123);
        }
    };

    // 把json对象转换成json字符串
    var ret = JSON.stringify(data);
    console.log(ret ); // {"name":"xiaoming","age":22}

    // 把json字符串转换成json对象
    var str = `{"name":"xiaoming","age":22}`;
    var ret = JSON.parse(str);
    console.log(ret);
</script>
</body>
</html>

data对象

创建data对象

//方法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午夜)

日期时间转换

日期和时间的转换:
// 返回国际标准时间字符串
toUTCString()
// 返回本地格式时间字符串
toLocalString()
// 返回累计毫秒数(从1970/1/1午夜到本地时间)
Date.parse(x)
// 返回累计毫秒数(从1970/1/1午夜到国际时间)
Date.UTC(x)


/以2021年03月2日 14:1:43 星期二格式化输出当前时间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());

math对象

 //  Number对象的内置方法
 //  toFixed(x) 保留小数位
 var num = 100.3;
 var ret = num.toFixed(2);
 console.log(num);  // 100.3
 console.log(ret);  // 100.30

// Math对象的内置方法
// abs(x)  返回数值的绝对值
// var num = -10;
console.log( Math.abs(num) ); // 10

// ceil(x)  向上取整
var num = 10.3;
console.log( Math.ceil(num) ); // 11

// floor(x) 向下取整
var num = 10.3;
console.log( Math.floor(num) ); // 10

// max(x,y,z,...,n)
console.log( Math.max(3,56,3) ); // 56
// min(x,y,z,...,n)

// pow(x,y)
console.log(Math.pow(3, 2)); // 相等于 3**2
console.log( 3**2 ); // 使用这个,上面废弃

// random()  生成0-1随机数
console.log( Math.random() );

// 生成0-10之间的数值
console.log( Math.random() * 10 );

// round(x) 四舍五入
// 生成0-10之间的整数
console.log( Math.round( Math.random() * 10 ) );

/----------------------------------------------------------
获取1-100的随机整数，包括1和100
var num=Math.random();
num=num*100;
num=Math.round(num);
console.log(num)

fuction对象

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

声明函数

// 函数的定义方式1
function 函数名 (参数){
    函数体;
    return 返回值;
}
功能说明：
    可以使用变量、常量或表达式作为函数调用的参数
    函数由关键字function定义
    函数名的定义规则与标识符一致，大小写是敏感的
    返回值必须使用return

//  函数的定义方式2

用 Function 类直接创建函数的语法如下：
var 函数名 = new Function("参数1","参数n","function_body");

虽然由于字符串的关系，第二种形式写起来有些困难，但有助于理解函数只不过是一种引用类型，它们的行为与用 Function 类明确创建的函数行为是相同的。

函数调用

    //f(); --->OK
    function f(){
        console.log("hello")

    }
    f() //----->OK

不同于python，js代码在运行时，会分为两大部分———预编译 和 执行阶段。

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

函数参数

// 位置参数
function add(a,b){
    console.log(a);
    console.log(b);
}
add(1,2)
add(1,2,3)
add(1)

// 默认参数
function stu_info(name,gender="male"){
    console.log("姓名："+name+" 性别："+gender)
}

stu_info("yuan")

------------------------------------------------------------
函数中的arguments对象

function add(a,b){

        console.log(a+b);//3
        console.log(arguments.length);//2
        console.log(arguments);//[1,2]

    }
add(1,2)

// arguments的应用1 
function add2(){
    var result=0;
    for (var num in arguments){
        result+=arguments[num]
    }
    console.log(result)

}

add2(1,2,3,4,5)

// arguments的应用2

function f(a,b,c){
    if (arguments.length!=3){
        throw new Error("function f called with "+arguments.length+" arguments,but it just need 3 arguments")
    }
    else {
        alert("success!")
    }
}

f(1,2,3,4,5)

函数返回值

在函数体内，使用 return 语句可以设置函数的返回值。一旦执行 return 语句，将停止函数的运行，并运算和返回 return 后面的表达式的值。如果函数不包含 return 语句，则执行完函数体内每条语句后，返回 undefined 值

在函数体内可以包含多条 return 语句，但是仅能执行一条 return 语句

函数的参数没有限制，但是返回值只能是一个；如果要输出多个值，可以通过数组或对象进行设计

function add(x,y) {
          return x+y
      }

var ret = add(2,5);
console.log(ret)

匿名函数

使用匿名函数表达式时，函数的调用语句，必须放在函数声明语句之后

      // 匿名函数赋值变量
       var foo = function () {
           console.log("这是一个匿名函数！")
       };

      // 匿名函数的自执行
      (function (x,y) {
           console.log(x+y);
       })(2,3)


     // 匿名函数作为一个高阶函数使用
     function bar() {

        return function () {
            console.log("inner函数！")
        }
    }

    bar()()

函数作用域

作用域是JavaScript最重要的概念之一，想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理。

任何程序设计语言都有作用域的概念，简单的说，作用域就是变量可访问范围，即作用域控制着变量与函数的可见性和生命周期。在JavaScript中，变量的作用域有全局作用域和局部作用域两种。

=============================================================

// 局部变量,是在函数内部声明,它的生命周期在当前函数被调用的时候, 当函数调用完毕以后,则内存中自动销毁当前变量
// 全局变量,是在函数外部声明,它的生命周期在当前文件中被声明以后就保存在内存中,直到当前文件执行完毕以后,才会被内存销毁掉

=============================================================
    var name = "yuan"; // 声明一个全局变量 name并赋值”yuan“
    name = "张三";  // 对已经存在的变量name重新赋值 ”张三“
    console.log(name);

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

    var  gender = "male"
    var  gender = "female" // 原内存释放与新内存开辟，指针指向新开辟的内存
    console.log(gender)
=============================================================
var num = 10; // 在函数外部声明的变量, 全局变量
function func(){
    // num = 20; // 函数内部直接使用变量,则默认调用了全局的变量,
    //var num = 20; // 函数内部使用var 或者 let声明的变量则是局部变量
    // 函数内部直接使用变量,则默认调用了全局的变量,
    // 使用变量的时候,解释器会在当前花括号范围值搜索是否有关键字var 或者 let 声明了变量,如果没有,则一层一层往外查找最近的声明
    // 如果最终查找不到,则直接报错! 变量名 is not define!
    console.log("函数内部num：",num)
}
func();
console.log("全局num：",num);

js预编译

js运行三个阶段：

1. 语法分析
2. 预编译
3. 解释执行

语法分析就是JS引擎去检查你的代码是否有语法错误，解释执行就是执行你的代码。最重要最需要理解的就是第二个环节预编译，简单理解就是在内存中开辟一些空间，存放一些变量与函数 。

预编译可分为全局预编译和局部预编译。

> 1. 在js脚本加载之后，会先通篇检查是否存在低级错误；
> 2. 在语法检测完之后，便进行全局预编译；
> 3. 在全局预编译之后，就解释一行，执行一行；
> 4. 当执行到函数调用那一行前一刻，会先进行函数预编译，再往下执行。

**全局预编译的3个步骤：**

1. 创建GO对象（Global Object）全局对象，即window对象。
2. 找变量声明，将变量名作为GO属性名，值为undefined
3. 查找函数声明，作为GO属性，值赋予函数体

**局部预编译的4个步骤：**

1. 创建AO对象（Activation Object）执行期上下文。
2. 找形参和变量**声明**，将变量和形参名作为AO属性名，值为undefined
3. 将实参值和形参统一。
4. 在函数体里面找函数声明，值赋予函数体。

> GO对象是全局预编译，所以它优先于AO对象所创建和执行

1. 函数声明整体提升-(具体点说，无论函数调用和声明的位置是前是后，系统总会把函数声明移到调用前面）
2. 变量 声明提升-(具体点说，无论变量调用和声明的位置是前是后，系统总会把声明移到调用前，注意仅仅只是声明，所以值是undefined）

案例分析
<script>
        var a = 10;
        console.log(a);

        function foo(a) {
          console.log(a);
          var a = 100;
          console.log(a);
          function a() {}
          console.log(a);
          var b = function(){};
          console.log(b);
          function d() {}
        }
        var c = function (){
        console.log("匿名函数C");
        };
        console.log(c);
        foo(20);

  </script>

全局编译
    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() {}
    }

案例


var num3 = 10;
function func3(){
    console.log(num3); 
    var num3 = 20;       
}
func3();
console.log(num3); 


 /*

        // 全局编译

        GO{
           num3:undefined,
           func3: function (){
            console.log(num3);
            var num3 = 20;
        }

        // 全局执行
        var num3 = 10;
        GO{
           num3:10,
           func3: function (){
            console.log(num3);
            var num3 = 20;
        }


        // 局部编译
        func3.AO{
           num3:undefined,
        }


        // 局部执行

        func3.AO{
           num3:20,
        }

        // 全局执行

        GO.num3 = 10
        }

*/

bom对象

BOM:Broswer object model,即浏览器提供我们开发者在javascript用于操作浏览器的对象。

winodws对象

窗口方法

// BOM  Browser object model 浏览器对象模型

// js中最大的一个对象.整个浏览器窗口出现的所有东西都是window对象的内容.
console.log( window );

// alert()  弹出一个警告框
window.alert("hello");

//confirm  弹出一个确认框,点击确认,返回true, 点击取消,返回false
var ret = confirm("您确认要删除当前文件么?");
console.log( ret  );

// 弹出一个消息输入框,当点击确认以后,则返回可以接收到用户在输入框填写的内容.如果点击取消,则返回null
var ret = prompt("请输入一个内容","默认值");
console.log( ret );

// close() 关闭当前浏览器窗口
window.close();

//打开一个新的浏览器窗口
window.open("http://www.baidu.com","_blank","width=800px,height=500px,left=200px,top=200px";

定时方法

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。而setTimeout是在指定的毫秒数后调用code一次。
其中，code为要调用的函数或要执行的代码串。millisec周期性执行或调用 code 之间的时间间隔，以毫秒计

// 设置循环定时器
var ID = window.setInterval(code,millisec)   // 每millisec毫秒执行一次code
// 取消循环定时器
window.clearInterval(ID);

// 设置单次定时器
var ID = window.setTimeout(code,millisec) // millisec毫秒后执行code一次
// 取消单次定时器
window.clearTimeout(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(){
        if (ID==undefined){
             showTime();
             ID=setInterval(showTime,1000);
        }
    }
    function end(){
        clearInterval(ID);
        ID=undefined;
    }

</script>

</body>
</html>

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>

本地存储对象

使用存储对象的过程中, 对象数据会根据域名端口进行保存的,所以 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>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button onclick="func1()">设置一个数据</button>
<button onclick="func2()">查看一个数据</button>
<script>
    function func1(){
        localStorage.setItem("name","yuan");
    }

    function func2(){
        var ret = localStorage.getItem("name");
        console.log(ret);
    }
</script>
</body>
</html>

localStorage和sessionStorage的区别：

1、localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。

2、他们均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。

3、localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。

4、不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标 签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。

DOM对象（核心）

DOM  document Object Model 文档对象模型
// 整个html文档,会保存一个文档对象document
// console.log( document ); // 获取当前文档的对

查找标签

直接查找

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选择符来获取查找到的所有元素,返回数组

案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="i1">DIV1</div>

<div class="c1">DIV</div>
<div class="c1">DIV</div>
<div class="c1">DIV</div>


<div class="outer">
    <div class="c1">item</div>
</div>


<div class="c2">
    <div class="c3">
        <ul class="c4">
            <li class="c5" id="i2">111</li>
            <li>222</li>
            <li>333</li>
        </ul>
    </div>
</div>

<script>

   // 直接查找

   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);

    var doms = document.querySelectorAll("ul li");
    console.log(":::",doms);

</script>

</body>
</html>

绑定事件

静态绑定

直接把事件写在标签元素中。


<div id="div" onclick="foo(this)">click</div>

<script>
    function foo(self){           // 形参不能是this;
        console.log("foo函数");
        console.log(self);   
    }
</script>

动态绑定

在js中通过代码获取元素对象,然后给这个对象进行后续绑定。

一个元素本身可以绑定多个不同的事件, 但是如果多次绑定同一个事件,则后面的事件代码会覆盖前面的事件代码

<p id="i1">试一试!</p>

<script>

    var ele=document.getElementById("i1");

    ele.onclick=function(){
        console.log("ok");
        console.log(this);    // this直接用 是ele 当前绑定事件的标签
    };

</scrip

多个标签绑定事件

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
</ul>


<script>

    var eles = document.querySelectorAll("ul li");
    for(var i=0;i<eles.length;i++){
        eles[i].onclick = function (){
            console.log(this.innerHTML)
            // console.log(eles[i].innerHTML)  // 结果？
        }
    }

</script>

操作标签

<标签名 属性1=“属性值1” 属性2=“属性值2”……>文本</标签名>

文本操作

<div class="c1"><span>click</span></div>

<script>

    var ele =document.querySelector(".c1");

    ele.onclick = function (){
        // 查看标签文本
        console.log(this.innerHTML)
        console.log(this.innerText)
    }

    ele.ondblclick = function (){
        // 设置标签文本
        this.innerHTML = "<a href='#'>yuan</a>"
        //this.innerText = "<a href='#'>yuan</a>"
    }

</script>

value操作

像input标签，select标签以及textarea标签是没有文本的，但是显示内容由value属性决定

    <input type="text" id="i1" value="yuan">
    <textarea name="" id="i2" cols="30" rows="10">123</textarea>
    <select  id="i3">
        <option value="hebei">河北省</option>
        <option value="hubei">湖北省</option>
        <option value="guangdong">广东省</option>
    </select>

<script>

    // input标签
    var ele1 =document.getElementById("i1");
    console.log(ele1.value);
    ele1.onmouseover = function (){
        this.value = "alvin"
    }

    // textarea标签
    var ele2 =document.getElementById("i2");
    console.log(ele2.value);
    ele2.onmouseover = function (){
        this.innerText = "welcome to JS world！"
        this.value = "welcome to JS world！"
    }
    // select标签
    var ele3 =document.getElementById("i3");
    console.log(ele3.value);
    ele3.value= "hubei"

</script>

css样式操作

<p id="i1">Hello world!</p>

<script>
    var ele = document.getElementById("i1");
    ele.onclick = function (){
        this.style.color = "red"
    }
</script>

属性操作

并不是所有属性都可以像value那样操作。

elementNode.setAttribute("属性名","属性值")    
elementNode.getAttribute("属性名")       
elementNode.removeAttribute("属性名");

class属性操作

elementNode.className
elementNode.classList.add("")
elementNode.classList.remove("")

案例tab切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .tab{
            width: 800px;
            height: 300px;
            /*border: 1px solid red;*/
            margin: 200px auto;
        }

        .tab ul{
            list-style: none;
        }

        .tab-title{
            background-color: #f7f7f7;
            border: 1px solid #eee;
            border-bottom: 1px solid #e4393c;
        }

        .tab .tab-title li{
            display: inline-block;
            padding: 10px 25px;
            font-size: 14px;
        }

        li.current {
            background-color: #e4393c;
            color: #fff;
            cursor: default;
        }

        .hide{
            display: none;
        }


    </style>
</head>
<body>


<div class="tab">
    <ul class="tab-title">
        <li class="current" index="0">商品介绍</li>
        <li class="" index="1">规格与包装</li>
        <li class="" index="2">售后保障</li>
        <li class="" index="3">商品评价</li>
    </ul>

    <ul class="tab-content">
        <li>商品介绍...</li>
        <li class="hide">规格与包装...</li>
        <li class="hide">售后保障...</li>
        <li class="hide">商品评价...</li>
    </ul>
</div>


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

</body>
</html>

节点操作

// 创建节点：
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>

常用事件

onload事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <script>
       window.onload = function (){
            ele = document.getElementById("i1")
            console.log(ele.innerHTML);
       }
//正常从上往下执行 js找i1的时候下面的代码现在还是没有的会没有效果
//用onload代码可以解决
    </script>

</head>
<body>

<div id="i1">yuan</div>

</body>
</html>

onsubmit事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<form action="" id="i1">
     用户名：<input type="text">
     密码：  <input type="password">
    <input type="submit">
</form>


<script>

     var ele = document.getElementById("i1");
     var user = document.querySelector("#i1 [type=text]")
     var pwd = document.querySelector("#i1 [type=password]")
     ele.onsubmit = function (e){
           console.log(user.value);
           console.log(pwd.value);

            return false;    // 终止事件执行
           // e.preventDefault() // 阻止元素默认行为
     }

</script>
</body>
</html>
//form表单里面会默认有个提交事件，选运行代码里面的事件再运行表单里的事件

onchange事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<select name="provonce" id="s1">
    <option value="hebei">请选择省份</option>
    <option value="hubei">湖北省</option>
    <option value="hunan">湖南省</option>
    <option value="hebei">河北省</option>
</select>

<select name="provonce" id="s2">
    <option value="hebei">请选择城市</option>

</select>

<script>

   var  data={"hunan":["长沙","岳阳","张家界"],"hubei":["武汉","襄阳","荆州"],"hebei":["石家庄","保定","张家口"]};
   console.log(data);
   var ele =  document.getElementById("s1");
   var ele2 =  document.getElementById("s2");
   ele.onchange=function () {
       console.log(this.value);
       var citys = data[this.value];
       console.log(citys);
       // 清空操作
       ele2.options.length=1;
       // 创建标签
       for (var i=0;i<citys.length;i++){
           var option =  document.createElement("option"); // </option></option>
           option.innerHTML=citys[i];
           ele2.appendChild(option)
       }
   }

</script>


</body>
</html>

onmouse事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #container{
            width: 300px;
        }
        #title{
            cursor: pointer;
            background: #ccc;
        }
       #list{
           display: none;
           background:#fff;
       }

        #list div{
            line-height: 50px;
        }
        #list  .item1{
            background-color: green;
        }

         #list  .item2{
            background-color: rebeccapurple;
        }

         #list  .item3{
            background-color: lemonchiffon;
        }


    </style>
</head>
<body>
<div id="container">
        <div id="title">使用了mouseout事件↓</div>
        <div id="list">
                <div class="item1">第一行</div>
                <div class="item2">第二行</div>
                <div class="item3">第三行</div>
        </div>
</div>
<script>

// 1.不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。

// 2.只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

   var container=document.getElementById("container");
   var title=document.getElementById("title");
   var list=document.getElementById("list");
   title.onmouseover=function(){
       list.style.display="block";
   };

   container.onmouseleave=function(){  // 改为onmouseout试一下
       list.style.display="none";
   };

/*

因为mouseout事件是会冒泡的，也就是onmouseout事件可能被同时绑定到了container的子元素title和list
上，所以鼠标移出每个子元素时也都会触发我们的list.style.display="none";

*/
</script>
</body>
</html>

onkey事件

<input type="text" id="t1"/>

<script type="text/javascript">

    var ele=document.getElementById("t1");

     ele.onkeydown=function(e){
        console.log("onkeydown",e.key)
    };

     ele.onkeyup=function(e){
        console.log("onkeyup",e.key)
    };
</script>

onblur和onfocus事件

<input type="text" class="c1">


<script>

    var ele = document.querySelector(".c1");

    // 获取焦点事件
    ele.onfocus = function () {
        console.log("in")
    };

    // 失去焦点事件
    ele.onblur = function () {
        console.log("out")
    }

</script>

冒泡事件

<div class="c1">
    <div class="c2"></div>
</div>


<script>

    var ele1 = document.querySelector(".c1");
    ele1.onclick = function () {
        alert("c1区域")
    };

    var ele2 = document.querySelector(".c2");
    ele2.onclick = function (event) {
        alert("c2区域");

        // 如何阻止事件冒泡
        event.stopPropagation();
    }

</script>

jquery

jQuery的引入

根本上jquery就是一个写好的js文件,所以想要使用jQuery的语法必须先引入到本地

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

jquery对象和dom对象的关系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    远程导入-->
    <!--    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>-->
<!--本地导入-->
    <script src="jquery3.6.js"></script>

</head>
<body>

<ul class="c1">
    <li>123</li>
    <li>234</li>
    <li>345</li>
</ul>

<script>

       // $(".c1 li").css("color","red");
       console.log($(".c1 li"));   // dom集合对象  [dom1,dom2,...]

       // 如何将jQury对象转换为Dom对象
       console.log($(".c1 li")[1].innerHTML);

       // 如何将Dom对象转换为jQuery对象;
       var ele = document.querySelector(".c1 li");
       // console.log(ele);
       // ele.style.color = "red";
      $(ele).css("color","orange")  // [ele]

</script>
</body>
</html>

基本语法

$().方法()
1.查找标签
2. .方法 操作标签
3. $就是jquery

jquery选择武器

直接查找

基本选择器

/*
#id         # id选择符 
element     # 元素选择符
.class      # claw43ss选择符  
selector1, selector2, selectorN   # 同时获取多个元素的选择符 

$("#id")   
$(".class")  
$("element")  
$(".class,p,div")
*/

组合选择器

/*
  ancestor descendant  // 包含选择符 
  parent > child       // 父子选择符 
  prev + next          // 下一个兄弟选择符 
  prev ~ siblings      // 兄弟选择符 

$(".outer div")  
$(".outer>div")  
$(".outer+div")  
$(".outer~div")
*/

属性选择器

/*
[attribute=value]    // 获取拥有指定数据attribute,并且置为value的元素 
$('[type="checked"]')  
$('[class*="xxx"]')  
*/

表单选择器

/*
$("[type='text']")----->$(":text")         注意只适用于input标签  : $("input:checked")
同样适用表单的以下属性
:enabled
:disabled
:checked
:selected
*/

筛选器

/*

  // 筛选器
  :first               //  从已经获取的元素集合中提取第一个元素
  :even                //  从已经获取的元素集合中提取下标为偶数的元素 
  :odd                 //  从已经获取的元素集合中提取下标为奇数的元素
  :eq(index)           //  从已经获取的元素集合中提取指定下标index对应的元素
  :gt(index)           //  从已经获取的元素集合中提取下标大于index对应的元素
  :last                //  从已经获取的元素集合中提取最后一个元素
  :lt(index)           //  从已经获取的元素集合中提取下标小于index对应的元素
  :first-child         //  从已经获取的所有元素中提取他们的第一个子元素
  :last-child          //  从已经获取的所有元素中提取他们的最后一个子元素
  :nth-child           //  从已经获取的所有元素中提取他们的指定下标的子元素
  // 筛选器方法
  $().first()          //  从已经获取的元素集合中提取第一个元素
  $().last()           //  从已经获取的元素集合中提取最后一个元素
  $().eq()             //  从已经获取的元素集合中提取指定下标index对应的元素

  */

导航查找

/* 
// 查找子代标签：         
 $("div").children(".test")     
 $("div").find(".test")  

 // 向下查找兄弟标签 
$(".test").next()               
$(".test").nextAll()     
$(".test").nextUntil() 

// 向上查找兄弟标签  
$("div").prev()                  
$("div").prevAll()       
$("div").prevUntil() 

// 查找所有兄弟标签  
$("div").siblings()  

// 查找父标签：         
$(".test").parent()              
$(".test").parents()     
$(".test").parentUntil() 

*/

jquery绑定事件

/*
三种用法:
  1. on 和 off
       // 绑定事件
       $().on("事件名",匿名函数)

       // 解绑事件,给指定元素解除事件的绑定
       $().off("事件名")

  2. 直接通过事件名来进行调用
       $().事件名(匿名函数)

  3. 组合事件,模拟事件
       $().ready(匿名函数)   // 入口函数
       $().hover(mouseover, mouseout)   // 是onmouseover和 onmouseout的组合
       $().trigger(事件名)  // 用于让js自动触发指定元素身上已经绑定的事件

*/

绑定取消事件

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

模拟事件触发

<!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"); // 模拟事件的触发
    });
    </script>
</body>
</html>

jquery操作标签

文本操作

/*
$("选择符").html()     // 读取指定元素的内容,如果$()函数获取了有多个元素,则提取第一个元素
$("选择符").html(内容) // 修改内容,如果$()函数获取了多个元素, 则批量修改内容

$("选择符").text()     // 效果同上,但是获取的内容是纯文本,不包含html代码
$("选择符").text(内容)  // 效果同上,但是修改的内容中如果有html文本,在直接转成实体字符,而不是html代码
*/

calue操作
$().val()

<!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>

属性操作

/*
//读取属性值
    $("选择符").attr("属性名");   // 获取非表单元素的属性值,只会提取第一个元素的属性值
    $("选择符").prop("属性名");   // 表单元素的属性,只会提取第一个元素的属性值

//操作属性
  $("选择符").attr("属性名","属性值");  // 修改非表单元素的属性值,如果元素有多个,则全部修改
  $("选择符").prop("属性名","属性值");  // 修改表单元素的属性值,如果元素有多个,则全部修改

  $("选择符").attr({'属性名1':'属性值1','属性名2':'属性值2',.....})
  $("选择符").prop({'属性名1':'属性值1','属性名2':'属性值2',.....})
*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="jquery3.6.js"></script>

</head>
<body>

<button class="select_all">全选</button>
<button class="cancel">取消</button>
<button class="reverse">反选</button>
<hr>
<table border="1">
    <tr>
        <td>选择</td>
        <td>姓名</td>
        <td>年龄</td>
    </tr>

    <tr>
        <td><input type="checkbox"></td>
        <td>张三</td>
        <td>23</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>李四</td>
        <td>23</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>王五</td>
        <td>23</td>
    </tr>
</table>

<script>

    $(".select_all").click(function () {
        $("table input:checkbox").prop("checked",true);

    });
    $(".cancel").click(function () {
       $("table input:checkbox").prop("checked",false);
    });

    $(".reverse").click(function () {
       $("table input:checkbox").each(function () {
           $(this).prop("checked",!$(this).prop("checked"))

       })

   });

</script>

</body>
</html>

css样式操作

/*
获取样式
$().css("样式属性");   // 获取元素的指定样式属性的值,如果有多个元素,只得到第一个元素的值

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

$().css("样式属性":function(){

  // 其他代码操作 
  return "样式值";
});
*/

class属性操作

$().addClass("class1  class2 ... ...")   // 给获取到的所有元素添加指定class样式
$().removeClass() // 给获取到的所有元素删除指定class样式
$().toggleClass() // 给获取到的所有元素进行判断,如果拥有指定class样式的则删除,如果没有指定样式则添加

tab切换案例 jquery版本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        *{
            margin: 0;
            padding: 0;
        }

        .tab{
            width: 800px;
            height: 300px;
            /*border: 1px solid rebeccapurple;*/
            margin: 200px auto;
        }

        .tab ul{
            list-style: none;
        }

        .tab ul li{
            display: inline-block;
        }

        .tab_title {
            background-color: #f7f7f7;
            border: 1px solid #eee;
            border-bottom: 1px solid #e4393c;
        }

        .tab .tab_title li{
            padding: 10px 25px;
            font-size: 14px;
        }

        .tab .tab_title li.current{
            background-color: #e4393c;
            color: #fff;
            cursor: default;
        }

        .tab_con li.hide{
            display: none;
        }

    </style>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>

<div class="tab">
    <ul class="tab_title">
        <li class="current">商品介绍</li>
        <li>规格与包装</li>
        <li>售后保障</li>
        <li>商品评论</li>
    </ul>

    <ul class="tab_con">
        <li>商品介绍...</li>
        <li class="hide">规格与包装...</li>
        <li class="hide">售后保障...</li>
        <li class="hide">商品评论...</li>
    </ul>
</div>

<script>


    // jQuery

    $(".tab_title li").click(function (){
           // current样式
           $(this).addClass("current").siblings().removeClass('current');
           // hide样式
           $(".tab_con li").eq($(this).index()).removeClass("hide").siblings().addClass("hide")
    })

</script>

</body>
</html>

节点操作

/*
//创建一个jquery标签对象
    $("<p>")

//内部插入

    $("").append(content|fn)  追加    // $("p").append("<b>Hello</b>");
    $("").appendTo(content)   添加    // $("p").appendTo("div");
    $("").prepend(content|fn)     // $("p").prepend("<b>Hello</b>");
    $("").prependTo(content)      // $("p").prependTo("#foo");

//外部插入

    $("").after(content|fn)       // ("p").after("<b>Hello</b>");
    $("").before(content|fn)      // $("p").before("<b>Hello</b>");
    $("").insertAfter(content)    // $("p").insertAfter("#foo");
    $("").insertBefore(content)   // $("p").insertBefore("#foo");

//替换
    $("").replaceWith(content|fn) // $("p").replaceWith("<b>Paragraph. </b>");

//删除

    $("").empty()
    $("").remove([expr])

//复制
    $("").clone([Even[,deepEven]])
*/

案例1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery3.6.js"></script>
</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>

    $(".add_btn").click(function () {
        // 创建jquery对象

        // var $img = $("<img>");
        // $img.attr("src","https://img1.baidu.com/it/u=3210260546,3888404253&fm=26&fmt=auto&gp=0.jpg")

        // 节点添加

        // $(".c1").append($img);
        // $img.appendTo(".c1")

        // $(".c1").prepend($img);
        // $(".c2").before($img);
        // 支持字符串操作
        $(".c1").append("<img src ='https://img1.baidu.com/it/u=3210260546,3888404253&fm=26&fmt=auto&gp=0.jpg'>")


    });


    $(".del_btn").click(function () {

          $(".c2").remove();
          // $(".c2").empty();

    });


    $(".replace_btn").click(function () {
        // alert(123);
        // var $img = $("<img>");
        // $img.attr("src","https://img1.baidu.com/it/u=3210260546,3888404253&fm=26&fmt=auto&gp=0.jpg")
        // $(".c2").replaceWith($img);
        $(".c2").replaceWith("<img src ='https://img1.baidu.com/it/u=3210260546,3888404253&fm=26&fmt=auto&gp=0.jpg'>");

    })

</script>

</body>
</html>

案例2 cloone

<div class="outer">
    <div class="item">
        <input type="button" value="+" class="add">
        <input type="text">
    </div>

</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>

   $(".add").click(function () {

       var $clone=$(this).parent().clone()
       $clone.children(".add").attr({"value":"-","class":"rem"})
       $(".outer").append($clone);
   });

    $('.rem').click(function () {
        $(this).parent().remove()
    });

    // 事件委派
    $(".outer").on("click",".item .rem",function () {
        $(this).parent().remove()
    })


</script>

css尺寸

/*
$("").height([val|fn])
$("").width([val|fn])
$("").innerHeight()
$("").innerWidth()
$("").outerHeight([soptions])
$("").outerWidth([options])
*/

css位置

/*
$("").offset([coordinates])  // 获取匹配元素在当前视口的相对偏移。
$("").position()             // 获取匹配元素相对父元素的偏移，position()函数无法用于设置操作。
$("").scrollTop([val])       // 获取匹配元素相对滚动条顶部的偏移。
*/

返回顶部案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }
        .content{
            height: 2000px;
            background-color: lightgray;
        }

        .return_top{
            width: 120px;
            height: 50px;
            background-color: lightseagreen;
            color: white;
            text-align: center;
            line-height: 50px;

            position: fixed;
            bottom: 20px;
            right: 20px;
        }

        .hide{
            display: none;
        }
    </style>

    <script src="jquery3.6.js"></script>
</head>
<body>


<div class="content">
    <h3>文章...</h3>
</div>

<div class="return_top hide">返回顶部</div>


<script>

    console.log($(window).scrollTop());
    $(".return_top").click(function () {

        $(window).scrollTop(0)

    });

    $(window).scroll(function () {
        console.log($(this).scrollTop());
        var v =$(this).scrollTop();
        if (v > 100){
            $(".return_top").removeClass("hide");
        }else {
            $(".return_top").addClass("hide");
        }

    })
</script>


</body>
</html>

位置偏移案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: orange;

        }

        .parent_box{
             width: 800px;
             height: 500px;
             margin: 200px auto;
             border: 1px solid rebeccapurple;
        }
    </style>
</head>
<body>

<button class="btn1">offset</button>
<div class="parent_box">
    <div class="box"></div>
</div>


<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>

    var $offset=$(".box").offset();
    var $left=$offset.left;
    var $top=$offset.top;

    console.log("$offset","top:"+$top+" left:"+$left)

    var $position=$(".box").position();
    var $left=$position.left;
    var $top=$position.top;

    console.log("$position","top:"+$top+" left:"+$left);


    $(".btn1").click(function () {
        $(".box").offset({left:50,top:50})
    });


</script>


</body>
</html>

jquery动画

基本方法

/*
//基本
    show([s,[e],[fn]])   显示元素
    hide([s,[e],[fn]])   隐藏元素

//滑动
    slideDown([s],[e],[fn])  向下滑动 
    slideUp([s,[e],[fn]])    向上滑动

//淡入淡出
    fadeIn([s],[e],[fn])     淡入
    fadeOut([s],[e],[fn])    淡出
    fadeTo([[s],opacity,[e],[fn]])  让元素的透明度调整到指定数值

//自定义
    animate(p,[s],[e],[fn])   自定义动画 
    stop([c],[j])             暂停上一个动画效果,开始当前触发的动画效果

*/

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>


        .c1{
            width: 250px;
            height: 250px;
            background-color: black;
        }

        .hide{
            display: none;
        }
    </style>

    <script src="jquery3.6.js"></script>
</head>
<body>


<p>
    <button class="show01">显示</button>
    <button class="hide01">隐藏</button>
</p>
<p>
    <button class="show02">显示</button>
    <button class="hide02">隐藏</button>
</p>
<p>
    <button class="show03">显示</button>
    <button class="hide03">隐藏</button>
</p>

<p>
    <button class="show04">显示</button>
    <button class="hide04">隐藏</button>
</p>
<hr>

<div class="c1"></div>


<script>
    // 自己实现的隐藏与显示

    $(".show01").click(function () {
        $(".c1").removeClass("hide")
    });
    $(".hide01").click(function () {
        $(".c1").addClass("hide")
    });

    // (1) show与hide方法

    $(".show02").click(function () {

        $(".c1").show(1000,function () {
            alert("显示成功")
        });

    });
    $(".hide02").click(function () {

        $(".c1").hide(1000,function () {
            alert("隐藏成功")
        })

    });

     // (2) slideDown与slideUp

     $(".show03").click(function () {

        $(".c1").slideDown(1000,function () {
            alert("显示成功")
        });

     });
     $(".hide03").click(function () {

        $(".c1").slideUp(1000,function () {
            alert("隐藏成功")
        })

    });

      // (3) fadeIn与fadeOut

     $(".show04").click(function () {

        $(".c1").fadeIn(1000,function () {
            alert("显示成功")
        });

     });
     $(".hide04").click(function () {

        $(".c1").fadeOut(1000,function () {
            alert("隐藏成功")
        })

    });
</script>

</body>
</html>

自定义动画

$(".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")
            })
        })

    })

扩展方法（插件）

jQuery.extend(object)

扩展jQuery对象本身。

用来在jQuery命名空间上增加新函数。 

在jQuery命名空间上增加两个函数:


<script>
    jQuery.extend({
      min: function(a, b) { return a < b ? a : b; },
      max: function(a, b) { return a > b ? a : b; }
});

    jQuery.min(2,3); // => 2
    jQuery.max(4,5); // => 5
</script>

jQuery.fn.extend(object)

扩展 jQuery 元素集来提供新的方法（通常用来制作插件）

增加两个插件方法：

<body>

<input type="checkbox">
<input type="checkbox">
<input type="checkbox">

<script src="jquery.min.js"></script>
<script>
    jQuery.fn.extend({
      check: function() {
         $(this).attr("checked",true);
      },
      uncheck: function() {
         $(this).attr("checked",false);
      }
    });

    $(":checkbox").check()
</script>

</body>

Bootstrap

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

项目目录结构

my_proiect 项目文件夹    

    index.html 项目入口文件

    css 文件夹
        存放css样式文件
    images 文件夹
        存放图片资源
    fonts 文件夹
        存放一些图标
    js 文件夹
        存放js脚本文件

9.前端

6.前端

HTML

CS架构和BS架构

http协议

http特性

http请求协议 响应协议

html标准结构

游览器如何访问服务端

标签(元素)

格式区分：

功能分类：

标签嵌原则

基本标签

标记标签<mark></mark>

特殊符号

div和span标签

超链接标签<a></a>

锚点应用

下载应用

a标签的颜色

img标签<img>

列表标签

表格标签<table></table>

表单标签<form></form>

H5新增标签

css

css基本语

css的引入方式

css选择器

基本选择器

组合选择器

class属性选择器

伪类选择器

样式继承

选择器优先级

属性操作

文本属性

背景属性

边框属性

列表属性

display属性

盒模型

float属性(浮动)

overflow属性

position属性

BFC概念

雪碧图技术

案例

JavaScript

js引入方式

js基本语法

数据类型

流程控制语句

数组对象

Object对象

data对象

math对象

fuction对象

js预编译

bom对象

winodws对象

location地址栏对象

本地存储对象

DOM对象（核心）

查找标签

直接查找

导航查找标签

css选择器查找

绑定事件

静态绑定

动态绑定

多个标签绑定事件

操作标签

文本操作

value操作

css样式操作

节点操作

常用事件

onload事件

http请求协议响应协议

标记标签`<mark></mark>`

超链接标签`<a></a>`

img标签`<img>`

表格标签`<table></table>`

表单标签`<form></form>`