公告

昵称： xirang熙攘
园龄： 4年9个月
粉丝： 3
关注： 5

+加关注

合集

随笔档案

相册

workrman基础.assets(6)

阅读排行榜

html

标题 h1-h6
段落 p
水平线 hr
换行 br
字体样式 i 斜体,b 粗体,s 下划线
列表
- 无序列表 ul>li
- 有序列表 ol>li
- 自定义列表 dl>dt+dd
超链接 <a href="#" title="吃法"> 你好</a> 使用id 来添加锚点功能跳转到顶部
图片 <img src="123.png" title="这是一张图片" alt="猫咪">
预排版 pre
实体
- 空格 :  
- < : <
- > : &gt
表格
- 表格：<table></table>
- 行：<tr></tr>
- 单元格：<td></td>
- 每列的标题：<th></th>
- 表格标题：<caption></caption>
- 对齐
  - 水平对齐 align="center/left/right"
  - 垂直对齐 valign="top/middle/bottom"
- 单元格间距和填充
  - 单元格间距（cellspacing）：单元格和单元格距离，默认是2像素
  - 单元格填充（cellpadding）：单元格和内容的距离，默认是1像素
- 合并单元格
  - 合并行(rowspan)：把不同的行合并起来，写在上面的单元格上面
  - 合并列(colspan)：把不同列合并起来，写在左边的单元格上面

<!-- 表格的区域,border属性代表边框的意思 -->
<table border="1">
	<!-- 行 -->
	<tr>
    	<!-- 单元格 -->
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
    </tr>
    <tr>
    	<!-- 单元格 -->
        <td>令狐冲</td>
        <td>男</td>
        <td>22</td>
    </tr>
    <tr>
    	<!-- 单元格 -->
        <td>任盈盈</td>
        <td>女</td>
        <td>18</td>
    </tr>
    <tr>
    	<!-- 单元格 -->
        <td>任我行</td>
        <td>男</td>
        <td>55</td>
    </tr>
    <tr>
    	<!-- 单元格 -->
        <td>岳不群</td>
        <td>男</td>
        <td>50</td>
    </tr>
</table>
<!-- 合并单元格 -->
<table cellspacing="0" cellpading="30" border="1" width="300" height="200">
	<caption><h3>学生证</h3></caption>
    <tr>
    	<th align="center" colspan="4">深圳老马程序员</th>
    </tr>
    <tr align="center">
    	<td>姓名</td>
    	<td>班级</td>
    	<td>学号</td>
    	<td rowspan="2">照片</td>
    </tr>
    <tr align="center">
    	<td>曾真光</td>
        <td>php14期</td>
        <td>007</td>
    </tr>
</table>

排版标签
- div 盒子
- span 放文字
标签通用属性
- id 唯一标识不能重复 class 类可以多个,重复 name 可以重复 style 样式
表单：<form></form>
- input 输入框 <input />
  - maxlength 最大长度
  - value 默认值
  - size 文本框长度
  - readonly 只读
  - disabled 禁用
  - required：必填
  - placeholder：输入内容提示
  - autofocus：自动获取焦点-----自动帮我们将光标点进去
  - type 类型
    - 常用:
      - "text" 文本框
      - "password" 密码框
      - "radio" 单选框
      - "checkbox" 复选框
      - "file" 文件上传
      - "button" 普通按钮
      - "submit" 提交按钮
      - "reset" 重置按钮
      - "email"，文本框中只能输入email地址
    - 不常用
      - date 日期空间
      - time month 月份
      - week 周选择
      - number 唤醒数字键盘
      - range 滑块
      - color 颜色选择器
- 下拉菜单 select>option
- 文本域 <textarea></textarea>

<form>
    <!-- 单选 -->
    <input type="radio" name="sex" value="0">男
    <input type="radio" name="sex" value="1" checked>女

    <!-- 多选  -->
    <input type="checkbox" />足球
    <input type="checkbox" />排球
    <input type="checkbox" checked />篮球

    <!-- 下拉菜单 -->
    <select>
        <option>江苏</option>
        <option>浙江</option>
        <option>安徽</option>
        <!-- 下拉分组 -->
        <optgroup label="省份">
            <option value="1">山东省</option>
            <option value="2">河北省</option>
            <option value="3" selected>河南省</option>
        </optgroup>
    </select>
</form>

语义化标签
- <header> 标记定义一个页面或一个区域的头部
- <nav>标记定义导航链接
- <article>标记定义一篇文章内容
- <section>标记定义网页中一块区域
- <aside>标记定义页面内容部分的侧边栏
- <footer>标记定义一个页面或一个区域的底部
meta 标签

 <meta charset="utf-8">  <!--告知浏览器使用utf-8的编码格式来解析页面-->
<meta name="description" content="网页内容文本,PHP开发,laravel,thinkPhP`">   <!-- 搜索引擎上的描述 -->

css

<head>
	<style type="text/css">
			div{color:red;}
	</style>
</head>
<div>这是一个盒子</div>

字体属性

<style type="text/css">
    span{
        font-family:"微软雅黑"; /* 字体 */
        font-size:20px; /* 大小 */
        font-weight:bold; /* 粗细 */
        font-style:italic; /* 样式 */
        }
</style>

文本属性
- 文本对齐方式(左中右) text-align:left|right|center
- 首行缩进两个字符也可以用px单位 text-indent:2em
- 字体颜色也可写数值 #666 color:red
css选择器
- p{} #id{} .class{}
- 复合选择器
```
    p.box{color:green;} /* 标签选择器和类选择器一起使用 */
    .red.fz-50{color:red;font-size:50px;} /* 用多个类名选择一个元素 */
    div,p{color:blue;} /* 给多个元素设置同一种样式 */
```
- 通配符选择 *{} 常用来取消浏览器的默认设置 *{padding:0;margin:0;}
- 后代选择器,内外用空格隔开 外层内层{css样式}
- 子元素选择器，父和子之间用 > 隔开 父元素>子元素{css样式}
- 选择相邻的元素，两个元素中间用 + 隔开：元素1 + 元素2{css样式}
- 伪类
  - 元素:link 正常连接时候的状态
    元素:visited 点击以后的状态
    元素:hover 当鼠标移动上去的状态-------重点、常用
    元素:active 当鼠标按下去时候的状态
    重点：
    li:first-child 代表找出父元素中第一个li子元素
    li:last-child 代表找出父元素中最后一个li子元素
    li:nth-child(n) 找出父元素中的第n个li子元素
    li:nth-child(2n+1)奇数元素
- 属性选择器

<style>
    input[value]{color:red;}  /* 选择具有该属性的元素 */
    input[name="username"]{color:red;}  /* 选择具有该属性且等于该值的元素  username */
    p[name~="song"]{color:red;}  /* 属性有多个值 ，且值中包含该值的元素  second song */
    [name|="zhang"]{color:blue}  /* 属性中有连字符链接多个单词 zhang-san-feng */
    [name*="o"]{color:green}    /* 选择属性的值中包含当前的值的元素 name中标包含字母o的 元素   */
</style>
<body>
    <input type="text" name="username">
    <input type="text" name="password">
    <input type="button" value="普通按钮">
    <hr/>
    <p name="first song">锄禾日当午</p>
    <p name="second song">汗滴禾下锄</p>
    <p name="song">谁知盘中餐</p>
    <p name="last song">粒粒皆辛苦</p>
    <hr/>
    <input name="zhang san">
    <input name="li-xiao-san" value="张小三">
    <input name="zhang-san-feng">
    <input name="li xiao si" value="李小四">
    <input name="wanger xiao" value="王二小">
</body>

css尺寸行高
- 宽度 width:50px
- 高度 height:50px
- 行高 line-height:50px
font简写
- font: font-style font-weight font-size/line-height font-family
- font:italic bolder 30px/100px "微软雅黑";
背景属性
- 背景透明 background:rgba(值1，值2，值3，值4)
- 颜色 background-color:red;
- 图片 background-image:url(./images/1.jpg);
- 是否平铺 background-repeat:no-repeat;
  no-repeat不平铺，repeat-x横向平铺，repeat-y纵向平铺，repeat横向纵向都平铺------默认
- 背景图片位置 background-position:center center;
- 综合使用 background:颜色 url(图片路径) 平铺类型位置/大小 background:red url(/img/1.jpg) no-repeat left top/50px 50px
列表属性
- 去掉前缀 list-style-type:none
- 将列表前缀设置为自定义图片 list-style-image:url(图片路径)
内容溢出
- overflow:auto|hidden|scroll
  自动生成滚动条（右边）
  超出部分隐藏
  右边和下边都有滚动条
- overflow-x 水平方溢出
- overflow-y 垂直方向溢出
内部样式
- 使用style标签
- 行内样式
- 外部样式

<style type="text/css">
/* 使用style标签 */
</style>
<!-- 行内样式  直接写在标签上的style属性中-->
<div style="color:red;">
    我是盒子
</div>
<!-- 外部样式 使用标签关联 -->
<!-- 在html的head标签中  -->
<link rel="stylesheet" type="text/css" href="css文件路径">
<!-- 外部样式 使用指令关联 -->
<style type="text/css">
/* 在style标签中 */
    @import url("css文件路径")
</style>

样式继承和覆盖
- 能继承的css属性：font系列，text系列，color，line-height
- div可以继承父亲的宽度，高度不能继承
- 继承：父元素设置了样式，子元素也具有了
- 覆盖：父元素和子元素有同样的样式，生效的是子元素，子元素覆盖了父元素的样式
样式的优先级 样式属性:值 !important;
选择器优先级伪对象选择器>!important>行内样式>id选择器>class选择器>标签选择器>通配选择器>继承
样式分类优先级行内样式>内部样式/外部样式
样式叠加（权重） !important(无穷大) 行内样式(1000) id(100) class(10) 标签(1)
块元素宽度默认是100%，高度默认是0，可以设置宽度和高度，会继承父级的宽度，换行显示---div ul li p h1
行元素特点：宽高默认都是0，不能设置宽和高，一行显示----span b i u a
行内的块元素特点：只能设置宽和高，不能换行显示---img input
模式转换语法：display:值 取值：block转成块元素，inline转成行元素，inline-block转成行内的块元素，none隐藏元素
内边距 padding 外边距margin
边框类型 border-style:值 solid实线 dashed虚线 dotted点线 double双线
边框颜色 border-color:颜色值
边框厚度 border-width:尺寸值
一次性写好 border:类型颜色宽度
单独方向的边框设置上边框：border-top:三要素 left bottom right
边框圆角 border-radius:值 值：px 百分比
盒子模型的bug 盒子上下摆放，上盒子有下外边距，下盒子有上外边距，两个边距会重合，
- 以大的边距为准避免或将这个间距都给到一个元素上面
两个盒子嵌套关系，两个盒子对于上外边距会重合，以大的边距为准
- 给外部盒子加上边框或者上padding-top
- 给外部盒子添加oveflow:hidden
元素的可见性 visibility:值 取值：visible 可见 hidden 隐藏
- display:none 隐藏后不占空间
伪对象
- ::after:在指定的标签后面添加一个对象
- ::before:在指定的标签前面添加一个对象
- content：元素里面的内容（内容中不能写标签）
```
 元素::after{
 content:"";
 }
```
布局
- 标准流：按照标签默认的特性摆放盒子
- 浮动流：利用浮动摆放盒子
- 定位流：利用定位摆放盒子
浮动
- float 取值：left向左浮动，right向右浮动，none取消浮动
- 浮动的最大价值：让元素排列成一行，或者一左一右
- 行元素浮动，会优先于普通元素占据设置方向的位置，不会重叠
- 块元素浮动，会脱离页面原本的文本流（不占据原本的空间），会覆盖其他元素
- 清除浮动
  - 给父元素设置高度
  - 语法：clear:both
  - 设定父元素的overflow
  - 使用伪对象代替空标签
- 图标 <link rel="shortcut icon" href="favicon.ico" />
定位
- 4种定位方式：静态、相对、绝对、固定
- 4种边偏移属性：left、right、top、bottom
- 静态定位 position:static
- 相对定位 position：relative
- 绝对定位 position:absolute
- 固定定位 position:fixed
- 一般使用父相子绝
- 定位元素的层叠效果 z-index:值 只针对定位元素有效果
内减模式将padding内边距和边框带来增大盒子的影响去掉 box-sizing:border-box;
透明度 opacity:值 取值：0-1之间的小数
去掉文本域的自动拉伸效果 textarea{resize:none;}
行内文字溢出省略号形式显示

overflow: hidden;
white-space: nowrap;文字不换行
text-overflow:ellipsis;/* 超出的部分以省略号形式显示 */

vertical-align 属性用于设置元素的垂直对齐方式写在行内块元素上面。
- baseline 图片的基线和文字的基线保持对齐
- top 图片的顶线和文字的顶线（行高的顶线）对齐
- bottom 图片的底线和文字的底线（行高的底线）对齐
- middle 图片的中线和文字的中线对齐
弹性布局
- display:flex 设置一个弹性容器
- flex-direction:值 设置弹性布局的方向
  - row横向排列，等同于左浮动浮动效果
  - row-reverse 横向反向排列，等同于右浮动的效果
  - column 纵向排列
  - column-reverse 纵向反向排列，从下到上的排列
- flex-wrap:值 设置弹性布局是否换行
  - 不换行（默认），nowrap
  - 换行， wrap
  - 换行，并反向排列（从下往上排列），wrap-reverse------从下往上，从左往右进行排列
- justify-content:值 设置弹性布局的水平对齐方式
  - 从左向右（左对齐），默认，flex-start
  - 从右往左排列（右对齐），flex-end
  - 两端对齐，中间等距离隔开，space-between
  - 两端的空白是中间空白的一半，space-around------------环绕对齐
  - 居中对齐，center
  - 等距离排列，space-evenly
- align-content:值 垂直对齐方式（在换行的时候用）
  - 默认的排列方式，stretch--------靠上排列，但是元素之间有间距
  - 靠上排列（上对齐），flex-start
  - 靠下排列（下对齐），flex-end
  - 垂直上下两端对齐，中间等距离空白，space-between
  - 两端的空白是中间的空白的一半，space-around
  - 居中对齐，center
  - 等距离摆放，space-evenly
- align-items:值 交叉对齐方式，需要横向排列
  - flex-start，从起始位置对齐
  - flex-end，在结束位置对齐--------底部对齐
  - center，居中对齐---------垂直居中
  - baseline，在基准线对齐
  - stretch，拉伸子元素------图片不行
  - 当网页结构鲜明，简单，使用弹性布局
- align-self:值 子元素单独在y轴上的对齐方式
  - auto：默认值，元素继承了它的父容器的align-items属性，如果没有父容器则为"stretch"
  - stretch：拉伸
  - center：居中
  - flex-start：最上面
  - flex-end：最下面
  - baseline：容器的基线
  - 其实这个属性的结果和align-items的一样，只是align-items修饰的弹性容器中的所有子元素，align-self修饰的当前这一个元素。
css精灵技术网页加载每一张图片都需要对服务器进行一次请求，所以对服务器的负荷会很大，可以将多个小图放到一张大图上，每个地方使用小图片都对大图进行背景定位即可，这样只需要加载一张大图片，对服务器只做一次请求，可以减少服务器的开销，提供网站的性能

js

js代码写的地方
- 写在行内
- 写在外部js文件中，在页面引入
- 写在script标签中
alert("12345") 弹窗
console.log() 浏览器console控制台
document.write() 浏览器页面中
数据类型 Number、String、Boolean、Undefined、Null
获取变量的类型 typeof
类型转换 Number()、String()、Boolean() parseFloat()、parseInt() +，-，-0 等运算
算术运算符 + - * / % 取余（取模）
一元运算符
- ++ 自身加 (自增)
  - 前置++：先加1，后参与运算
  - 后置++：先参与运算，后加1
- -- 自身减 (自减)
逻辑运算符布尔运算符
- && 与左边为真则取右边，左边为假则取左边
  || 或左边为真则取左边，左边为假则边右边
  ! 非取反
关系运算符(比较运算符)
- < > >= <= == != === !==
- 与=的区别：只进行值得比较，=类型和值同时相等，则相等
赋值运算符
- = += -= *= /= %=

运算符的优先级

优先级从高到底
1. ()  优先级最高
2. 一元运算符  ++   --   !
3. 算数运算符  先*  /  %   后 +   -
4. 关系运算符  >   >=   <   <=
5. 相等运算符   ==   !=    ===    !==
6. 逻辑运算符 先&&   后||
7. 赋值运算符

分支结构 if

  if (/* 条件表达式 */) {
    // 执行语句
  }

  if (/* 条件表达式 */){
    // 成立执行语句
  } else {
    // 否则执行语句
  }

  if (/* 条件1 */){
    // 成立执行语句
  } else if (/* 条件2 */){
    // 成立执行语句
  } else if (/* 条件3 */){
    // 成立执行语句
  } else {
    // 最后默认执行语句
  }

三元运算符表达式1 ? 表达式2 : 表达式3
是对if……else语句的一种简化写法

switch语句

  switch (expression) {
    case 常量1:
      语句;
      break;
    case 常量2:
      语句;
      break;
    …
    case 常量n:
      语句;
      break;
    default:
      语句;
      break;
  }

  /*
  * 执行过程:
  * 获取表达式的值,和值1比较,相同则执行代码1,遇到break跳出整个语句,结束
  * 如果和值1不匹配,则和值2比较,相同则执行代码2,遇到break跳出整个语句,结束
  * 如果和值2不匹配,则和值3比较,相同则执行代码3,遇到break跳出整个语句,结束
  * 如果和值3不匹配,则和值4比较,相同则执行代码4,遇到break跳出整个语句,结束
  * 如果和之前的所有的值都不一样,则直接执行代码5,结束
  */

循环结构

  // 当循环条件为true时，执行循环体，
  // 当循环条件为false时，结束循环。
  while (循环条件) {
    //循环体
  }
  // for循环的表达式之间用的是;号分隔的，千万不要写成,
  for (初始化表达式1; 判断表达式2; 自增表达式3) {
    // 循环体4
  }
  //continue和break
 // break:立即跳出整个循环，即循环结束，开始执行循环后面的内容（直接跳到大括号）
 // continue:立即跳出当前循环，继续下一次循环（跳到i++的地方）

数组

定义 let arr = []
获取数组元素 arr[0] 通过下标
多维数组
遍历数组

for(var i = 0; i < arr.length; i++) {
  // 数组遍历的固定结构
}
//whil循环示例：
var arr1 = [1, 3, 4]; 
var i = 0;
while(i<arr1.length){
    console.log(arr1[i]);
    i++;
}
//修改添加元素
// 格式：数组名[下标/索引] = 值;
// 如果下标有对应的值，会把原来的值覆盖，如果下标不存在，会给数组新增一个元素。
var arr = ["red", "green", "blue"];
// 把red替换成了yellow
arr[0] = "yellow";
// 给数组新增加了一个pink的值
arr[3] = "pink";

函数
- 关键字声明 function 函数名(){}
- 表达式声明 let fn = function(){}
- 匿名函数 function(){}
- 箭头函数 ()=>{}
- 参数形参-函数定义的时候设置的参数占位作用实参-传入的参数
- 返回值 return
- 自执行函数（匿名函数自调用）的作用：防止全局变量污染
```
(function () {
  alert(123);
})();
```
作用域
- 全局变量与全局作用域 -- 在任何地方都可以访问到的变量就是全局变量，全局变量所在的区域就是全局作用域
- 局部变量 -- 只在固定的代码片段内可访问到的变量，最常见的例如函数内部的变量，就是局部变量。局部变量所在的区域就是局部作用域(函数作用域)
- 不使用var声明的变量是全局变量，不推荐使用。
  变量退出作用域之后会销毁，全局变量关闭网页或浏览器才会销毁
变量提升
- 定义变量的时候，变量的声明会被提升到作用域的最上面，变量的赋值不会提升。
函数提升
- JavaScript解析器首先会把当前作用域的函数声明提前到整个作用域的最前面
静态作用域
- 函数内部可以访问函数外部的变量，但是函数外部不可以访问函数内部的变量
- 函数内部如果有变量，则优先使用内部的变量，如果函数内部没有，才会使用函数外部的变量
对象
- 创建对象 let obj1 = {}
- 内置构造函数 let person = new Object()
- 自定义构造函数创建对象 function Person(){} let person = new Person()
this 的指向
- 1: 函数如果在某个对象下，this就指向这个对象
- 2: 函数如果被直接调用，this指向window对象
对象的使用
- 对象.方法名() //调用对象的方法
- 对象.属性 //获取对象的属性

遍历对象的属性

通过for..in语法可以遍历一个对象

  var obj1 = {
      name:'路飞',
      age : 17,
      sex : '男',
  }

  for(var k in obj1){
      console.log(k);
      console.log(obj1[k]);
  }

删除对象的属性
- delete obj1.age //删除对象中指定的属性
标准库对象
- Math对象常用属性和方法

console.log(Math.PI); //圆周率3.141592653589793
Math.random();//介于 0 和 1 之间的伪随机数。

Math.ceil(6.6);//获取大于或等于提供数值的最小整数--向上取整
Math.floor(8.8);//获取小于或等于提供数值的最大整数--向下取整
Math.round(9.9);//四舍五入
Math.max(10,20,15);//取多个值中的最大值
Math.min(10,20,15);//取多个值中的最小值
Math.pow(10,2);//返回x的y次幂
Math.sqrt(100);//求平方根

Date对象

// 获取当前时间，UTC世界时间，距1970年1月1日（世界标准时间）起的毫秒数
var now = new Date();
console.log(now.getTime());	// 获取距1970年1月1日（世界标准时间）起的毫秒数
console.log(now.valueOf());	// valueOf用于获取对象的原始值,与getTime()方法相同

Date构造函数的参数
1. 毫秒数 1498099000356		new Date(1498099000356)
2. 日期格式字符串  '2015-5-1'	 new Date('2015-5-1')
3. 年、月、日……				  new Date(2015, 4, 1)   // 月份从0开始

获取日期的毫秒形式

  var now = new Date();
  console.log(now.getTime());
  // valueOf用于获取对象的原始值
  console.log(now.valueOf());
  // HTML5中提供的方法，有兼容性问题
  var now = Date.now();
  // 不支持HTML5的浏览器，可以用下面这种方式
  var now = + new Date();	// 隐式调用 Date对象的valueOf()

日期格式化方法

toString()		// 转换成字符串
valueOf()		// 获取毫秒值
// 下面格式化日期的方法，在不同浏览器可能表现不一致，一般不用
toDateString()
toTimeString()
toLocaleDateString()
toLocaleTimeString()

获取日期指定部分

getTime()  	  // 返回毫秒数和valueOf()结果一样，valueOf()内部调用的getTime()
getSeconds()  // 返回0-59
getMinutes()  // 返回0-59
getHours()    // 返回0-23
getDay()      // 返回星期几 0周日   6周6
getDate()     // 返回当前月的第几天
getMonth()    // 返回月份，***从0开始***
getFullYear() //返回4位的年份  如 2016

Array对象
- push 方法用于在数组的末端添加一个或多个元素
- pop 方法用于删除数组的最后一个元素
- slice 方法用于提取原数组的一部分，返回一个新数组，原数组不变。
- join 方法用于将数组元素以指定字符拼接为字符串，返回一个字符串，原数组不变。
- toString 返回数组的字符串表示形式。
- some 检查定义的回调函数是否为数组的任何元素返回 true
- every 检查定义的回调函数是否为数组中的所有元素返回 true
- reduce 累加通过对数组中的所有元素调用定义的回调函数来累积单个结果。
String对象
- length 属性返回字符串的长度。
- indexOf('b') 从原字符串取出子字符串并返回，不改变原字符串
- substr(2,4) 从下标第二个开始截取4个长度的字符串
- toLowerCase 方法用于将一个字符串全部转为小写
- toUpperCase 则是全部转为大写
- replace('a','b') 用于替换匹配的子字符串,只替换第一个匹配
包装对象
- Number、String、Boolean 这三个原生对象可以把原始类型的值变成（包装成）对象
自增自减运算
- 因为 ++ 在前和++ 在后的运算结果不同，所以，尽量使用 +=1 -=1 替代，

构造函数
- 实例的 constructor 属性
- instanceof 操作符用于判断
- 每个对象都有一个 constructor 属性，该属性指向创建该实例的构造函数
- 反推出来，每一个对象都有其构造函数
原型
- 构造函数、prototype 原型对象、实例对象三者之间的关系
递归
- 最简单的一句话介绍递归：函数内部自己调用自己
- 递归必须要有判断条件，不加判断会死；
闭包
- 因此可以把闭包简单理解成“定义在一个函数内部的函数”。
  闭包最大的特点，就是它可以“记住”诞生的环境，比如f2记住了它诞生的环境f1，所以从f2可以得到f1的内部变量。
  在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁;
this
有时，需要把this固定下来，避免出现意想不到的情况；JavaScript提供了call，apply，bind这三个方法，来切换/固定this的指向。
call()方法、apply()方法、bind()方法
常量 const 来定义
块作用域由 { } 包括，if语句和for语句里面的{ }就属于块作用域。(不包括函数)
let关键字声明块级变量
允许使用反引号（倒引号） `` 来创建字符串，里面可以包含${变量名}形式的变量占位符。其中的变量会被解析。
参数给形参设置默认值 function(username="张三"){console.log(username)}
展开运算符（拆包）（用三个连续的点 (...) 表示），能够将数组和字符串字面量展开为多个元素
不定参数(可变参数/剩余参数)
- 不定参数是指，在函数中使用命名参数同时接收不定数量的未命名参数，需要使用三个连续的点 (...) 。
  这是一种语法糖(在原语法上的简化用法)，ES5通过函数内部的arguments对象来达到类似效果

数组解构 ,对象解构

  //还可以忽略值 需要使用,占位
  var arr = [3,4,5];
  var [a,, c] = arr;
  console.log(a, c);
  var person = {
    "nickname": "老三",
    "age": 30,
    "sex": "男"
  };
  //可以忽略值  直接忽略 不需要占位
  var {nickname, sex} = person;
  console.log(nickname, sex);

for of值遍历

  //遍历数组
  var team = ["师父", "大师兄", "二师兄", "沙师弟", "小白龙"];
  for(var v of team){
      console.log(v);
  }
  //也可以遍历字符串
  var str = "zhangsan";
  for(var v of str){
      console.log(v);
  }
  //for of不能遍历对象{} 
  var person = {"nickname":"老三", "age":30, "sex":"男"};
  for(var v of person){	//报错
      console.log(v);
  }

Symbol数据类型 Symbol，表示独一无二的值，Symbol最大的用途是用来定义对象的唯一属性名
typeof 判断箭头函数结果为function
instanceof判断是否Function的实例，结果为true
箭头函数不能做构造函数，不能用new实例化，也没有prototype属性

正则

限定符（量词）用来指定正则表达式的一个给定组件必须要出现多少次才能满足匹配。有 * 或 + 或 ? 或 {n} 或 {n,} 或 {n,m} 共6种。

*	匹配前面的子表达式零次或多次。例如，zo* 能匹配 "z" 以及 "zoo"。* 等价于{0,}。
+	匹配前面的子表达式一次或多次。例如，'zo+' 能匹配 "zo" 以及 "zoo"，但不能匹配 "z"。+ 等价于 {1,}。
?	匹配前面的子表达式零次或一次。例如，"do(es)?" 可以匹配 "do" 、 "does" 中的 "does" 、 "doxy" 中的 "do" 。? 等价于 {0,1}。
	n 是一个非负整数。匹配确定的 n 次。例如，'o{2}' 不能匹配 "Bob" 中的 'o'，但是能匹配 "food" 中的两个 o。
	n 是一个非负整数。至少匹配n 次。例如，'o{2,}' 不能匹配 "Bob" 中的 'o'，但能匹配 "foooood" 中的所有 o。'o{1,}' 等价于 'o+'。'o{0,}' 则等价于 'o*'。
	m 和 n 均为非负整数，其中n <= m。最少匹配 n 次且最多匹配 m 次。例如，"o{1,3}" 将匹配 "foooood" 中的前三个 o。'o{0,1}' 等价于 'o?'。请注意在逗号和两个数之间不能有空格。

贪婪匹配与非贪婪匹配
- 默认情况下，正则表达式执行贪婪匹配（尽可能取多的情况）
  非贪婪匹配：相对于贪婪匹配来说的。设置方式：将？加在其他限定符之后。

等价符

.	匹配除换行符（\n、\r）之外的任何单个字符。要匹配包括 '\n' 在内的任何字符，请使用像"(.\|\n)"的模式。
\d	匹配一个数字字符。等价于 [0-9]。
\D	匹配一个非数字字符。等价于 [ ^0-9]。
\w	匹配一个字母、数字、下划线。等价于[A-Za-z0-9_]。
\W	匹配非（字母、数字、下划线）。等价于 [ ^A-Za-z0-9_]。
\s	匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。
\S	匹配任何非空白字符。等价于 [ ^ \f\n\r\t\v]。
\n	匹配一个换行符。等价于 \x0a 和 \cJ。
\r	匹配一个回车符。等价于 \x0d 和 \cM。
\t	匹配一个制表符。等价于 \x09 和 \cI。

定位符用来描述字符串或单词的边界，^ 和 $ 分别指字符串的开始与结束，\b 描述单词的前或后边界，\B 表示非单词边界。

^	匹配输入字符串开始的位置。如果设置了 RegExp 对象的 Multiline 属性，^ 还会与 \n 或 \r 之后的位置匹配。
$	匹配输入字符串结尾的位置。如果设置了 RegExp 对象的 Multiline 属性，$ 还会与 \n 或 \r 之前的位置匹配。
\b	匹配一个单词边界，也就是指单词和空格间的位置。例如， 'er\b' 可以匹配"never" 中的 'er'，但不能匹配 "verb" 中的 'er'。
\B	匹配非单词边界。'er\B' 能匹配 "verb" 中的 'er'，但不能匹配 "never" 中的 'er'。

方括号表示一个范围，也称为字符簇，匹配满足条件的一个字符。

[xyz]	字符集合。匹配所包含的任意一个字符。例如， [abc]可以匹配 "plain" 中的 'a'。
[^xyz]	负值字符集合。匹配未包含的任意字符。例如， [ ^abc] 可以匹配 "plain" 中的'p'、'l'、'i'、'n'。
[a-z]	字符范围。匹配指定范围内的任意字符。例如， [a-z] 可以匹配 'a' 到 'z' 范围内的任意小写字母字符。
[^a-z]	负值字符范围。匹配任何不在指定范围内的任意字符。例如，[ ^a-z]可以匹配任何不在 'a' 到 'z' 范围内的任意字符。
x\|y	或的用法：匹配 x 或 y。例如，'z\|food' 能匹配 "z" 或 "food"。'(z\|f)ood' 则匹配 "zood" 或 "food"。

字符范围参考ASCII码表

示例：

[0-9] 查找任何从 0 至 9 的一个数字。

[a-z] 查找任何从小写 a 到小写 z 的字符。

[A-Z] 查找任何从大写 A 到大写 Z 的字符。

[A-z] 查找任何从大写 A 到小写 z 的字符。包括[ \ ]^_`等六个字符。

[A-Za-z]查找任何从大写 A 到小写 z 的字符，不包括[ \ ]^_`等六个字符。

修饰符的用法，修饰符一定要写到正则表达式末尾/之后，可以一次性使用多个修饰符。

i 执行对大小写不敏感的匹配。实际上就是不区分大小写的匹配（默认区分大小写）

g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。

m 执行多行匹配（^和$能匹配每行的开始与结束）。
转义字符（\）
将下一个字符标记为一个特殊字符、或一个原义字符、或一个向后引用、或一个八进制转义符。例如，'n' 匹配字符 "n"。'\n' 匹配一个换行符。序列 '\ \ ' 匹配 "\ " 而 "\ (" 则匹配 "("。
js中正则对象
- test方法检测目标字符串和正则表达式是否匹配，如果匹配返回true，不匹配返回false。
- exec方法执行一个正则匹配，只匹配一次，匹配到结果就返回一个数组类型的结果，匹配不到就返回null。
- 表示正则表达式，上一次匹配结束后的位置（目标字符串中的索引），即下一次匹配开始的位置。
```
  var pattern = /[a-z]/;//将正则表达式直接当做对象使用。
  var pattern = new RegExp(/[a-z]/);//实例化RegExp对象
  // test方法
  var str = 'php1js22';
  var pattern = /^[a-z]/;//以小写字母开头
  var res = pattern.test(str);//匹配字符串是否以小写字母开头
  console.log(res);//true
```
分组/捕获和反向引用
- 在正则表达式中，通过一对圆括号括起来的内容，我们就称之为“子表达式” var reg = /\d(\d)\d/gi;
- 捕获（分组）
- 反向引用
- 禁止引用 (?:正则) 这个小括号中的内容不能够被引用
匹配中文（utf-8编码） str.match(/[\u4E00-\u9FA5]/g)

  var str = '1122 3434 5566 7879 9887';
  //匹配连续四个数字，第一和第二数字相同，第三和第四数字相同
  var res = str.match(/(\d)\1(\d)\2/g);
  console.log(res);
  //匹配连续四个数字，第一和第三数字相同，第二和第四数字相同
  var res = str.match(/(\d)(\d)\1\2/g);
  console.log(res);
  //匹配连续四个数字，第一和第三数字相同
  var res = str.match(/(\d)\d\1\d/g);
  console.log(res);
  //匹配连续四个数字，第一和第二数字相同，第三和第四数字相同，并将相同的数字只保留一个
  var res = str.replace(/(\d)\1(\d)\2/g, '$1$2');
  console.log(res);

环视
- 正向肯定预查 every(?=n) 匹配任何其后紧接指定字符串 n 的字符串。
- 正向否定预查 every(?!n) 匹配任何其后没有紧接指定字符串 n 的字符串。
String 对象的正则方法
- match方法
- replace方法
- search方法
- split方法

dom

常用dom操作：
查找页面的标签元素
标签增加、修改、删除等操作
标签的属性相关操作
给标签元素绑定事件（设置当什么什么时候，做什么什么事情）

getElementsByTagName() 返回所有指定HTML标签的元素
getElementsByClassName() 返回所有class名字符合指定条件的元素
getElementsByName() 选择拥有name属性的HTML元素，返回值是一个类似数组的HTMLCollection对象标签的name属性的值
getElementById() 返回匹配指定id属性的元素节点
querySelector() 接受一个CSS选择器返回匹配指定选择器元素节点，返回第一个匹配的元素节点
querySelectorAll() 返回一个类似数组的HTMLCollection对象多个参数值，使用,（英文逗号）隔开

事件绑定

<body>
    <input type="button" value="按钮" id="btn" onclick="alert(2)">
</body>

<body>
    <input type="button" value="按钮" id="btn" onclick="f()">
</body>
<script>
    function f(){
        console.log(3);
    }
</script>

事件监听(节点对象方法) addEventListener

移除事件监听

<body>
    <input type="button" value="按钮" id="btn">
</body>
<script>
  function f(){
      alert(5);
  }
  var btn = document.getElementById('btn');
  // 事件监听
   btn.addEventListener('click',f);
   //移除事件监听 
  btn.removeEventListener('click',f);
</script>

页面事件(资源事件) load 一个资源及其相关资源已完成加载。
焦点事件
- focus 元素获得焦点
- blur 元素失去焦点

鼠标事件

事件名称	何时触发
mouseenter	指针移到有事件监听的元素内
mouseover	指针移到有事件监听的元素或者它的子元素内
mousemove	指针在元素内移动时持续触发
mousedown	在元素上按下任意鼠标按钮
mouseup	在元素上释放任意鼠标按键
click	在元素上按下并释放任意鼠标按键
dblclick	在元素上双击鼠标按钮
contextmenu	右键点击 (右键菜单显示前).
mouseleave	指针移出元素范围外（不冒泡）
mouseout	指针移出元素，或者移到它的子元素上
select	文本被选中（input标签、textarea标签）
copy	元素内容被拷贝时

键盘事件

事件名称何时触发

keydown 按下任意按键

keypress 除 Shift, Fn, CapsLock 外任意键被按住. (连续触发)

keyup 释放任意按键
form表单事件

Event Name Fired When

reset 点击重置按钮时（<input type=’reset’ value=’重置’ />）

submit 点击提交按钮
内容变化事件
change：当内容改变且失去焦点时触发（存储事件）
input ：当内容改变时触发（值变化事件）
事件冒泡
节点操作
- document.createElement()
  用来生成网页元素节点，参数为元素的标签名；
document.createTextNode()
用来生成文本节点，参数为所要生成的文本节点的内容；

node.appendChild()
接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点；

node.hasChildNodes()
返回一个布尔值，表示当前节点是否有子节点

node.removeChild()
接受一个子节点作为参数，用于从当前节点移除该子节点

node.cloneNode()
用于克隆一个选中的节点。
它接受一个布尔值作为参数，表示是否同时克隆子节点，默认是false，即不克隆子节点。
注意: 不会克隆绑定到该元素上的事件；

node.innerHTML
返回该元素包含的 HTML 代码。该属性可读写，常用来设置某个节点的内容；（不属于W3C DOM规范）

node.innerText

返回该元素包含的内容。该属性可读写
节点属性
- 获取class类名，需使用className属性
属性操作的标准方法
- node.getAttribute()
  返回当前元素节点的指定属性。如果指定属性不存在，则返回null；
  
  node.setAttribute()
  为当前元素节点新增属性。如果同名属性已存在
  node.hasAttribute()
  返回一个布尔值，表示当前元素节点是否包含指定属性
  
  node.removeAttribute()
  从当前元素节点移除属性
节点操作-层级关系
- node.nextElementSibling
  返回紧跟在当前节点后面的第一个同级Element节点，如果当前节点后面没有同级节点，则返回null；
node.previousElementSibling
返回紧跟在当前节点前面的第一个同级Element节点，如果当前节点前面没有同级节点，则返回null；

node.parentElement
返回当前节点的父级Element节点；

node.childNodes
返回一个NodeList集合，成员包括当前节点的所有子节点(注意空格回车也算)。

node.firstChild

返回树中节点的第一个子节点，如果节点是无子节点，则返回 null。

node.lastChild

返回该节点的最后一个子节点，如果该节点没有子节点则返回null。
CSS样式操作
- 名字需要改写，将横杠从CSS属性名中去除，然后将横杠后的第一个字母大写
- background-color写成backgroundColor
- 属性值都是字符串，设置时必须包括单位
  getComputedStyle()
  接受一个节点对象，返回该节点对象最终样式信息的对象，所谓“最终样式信息”，指的是各种CSS规则叠加后的结果。
  document.documentURI 返回文档的 URL。
  node.replaceChild(newChild, oldChild) 用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点。
  node.insertBefore() : parentElement.insertBefore(newElement,referenceElement)；
事件对象中的常用属性及方法
- event.bubbles:属性返回一个布尔值，表示当前事件是否会冒泡;
  event.eventPhase：返回一个整数值，表示事件流在传播阶段的位置
0:事件目前没有发生。
1:事件目前处于捕获阶段。
2:事件到达目标节点。
3:事件处于冒泡阶段。
event.type:返回一个字符串，表示事件类型，大小写敏感;
event.timeStamp:返回一个毫秒时间戳，表示事件发生的时间;
clientX、clientY :获取鼠标事件触发的坐标
事件代理/委托
- event.target：对事件起源目标的引用，属性返回触发事件的那个节点。
  event.currentTarget：属性返回事件当前所在的节点，即正在执行的监听函数所绑定的那个节点。
  作为比较，target属性返回事件发生的节点。
阻止浏览器默认行为&阻止事件传播
- event.preventDefault()：
  方法取消浏览器对当前事件的默认行为，
  比如点击链接后，浏览器跳转到指定页面，或者按一下空格键，页面向下滚动一段距离。
  event.stopPropagation()：
  方法阻止事件在DOM中继续传播，防止再触发定义在别的节点上的监听函数
浏览器对象模型

window.alert() : 显示一个警告对话框,上面显示有指定的文本内容以及一个"确定"按钮。
window.prompt() : 显示一个对话框,对话框中包含一条文字信息,用来提示用户输入文字.
window.confirm() ：方法显示一个具有一个可选消息和两个按钮(确定和取消)的模态对话框。

浏览器控制台

Console.clear() : 清空控制台。
Console.error() : 打印一条错误信息
Console.table() : 将数组或对象数据在控制台以表格形式打印
Console.log() ：打印字符串，使用方法比较类似C的printf、PHP的echo等格式输出

定时器
- setTimeout()和clearTimeout() 只执行一次
- setInterval()和clearInterval() 重复执行
location对象
- 页面跳转 location.href = 'http://qq.com'
history对象
- history.back() : 前往上一页, 用户可点击浏览器左上角的返回按钮模拟此方法
  history.forward() ：在浏览器历史记录里前往下一页，用户可点击浏览器左上角的前进按钮模拟此方法
  history.go() : 通过当前页面的相对位置从浏览器历史记录( 会话记录 )加载页面。比如：参数为-1的时候为上一页，参数为1的时候为下一页.

jquery

jQuery的入口函数

// 第一种写法
$(document).ready(function() {
  
});
// 第二种写法
$().ready(function() {
  
});
// 第三种写法
$(function() {
  
});

jQuery基本选择器

名称	用法	描述
ID选择器	$('#id');	获取指定ID的元素
类选择器	$('.class');	获取同一类class的元素
标签选择器	$('div');	获取同一类标签的所有元素
并集选择器	$('div,p,li');	使用逗号分隔，只要符合条件之一就可。
交集选择器	$('div.redClass');	获取class为redClass的div元素

jQuery层级选择器（重点）

名称	用法	描述
子代选择器	$('ul > li');	使用-号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器	$('ul li');	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

<script type="text/javascript">
  //常用选择器
  //根据id获取元素 获取到的结果：类数组对象
  console.log( $('#div0') );
  console.log( $('#div0')[0] );
  //根据class获取元素
  console.log( $('.div_1') );
  //根据标签名称来获取元素
  console.log( $('div') );
  //根据属性获取元素
  console.log( $('input[name=username]') );
  //根据表单元素属性获取元素
  console.log( $(':checked') );
</script>

jQuery过滤选择器

名称	用法	描述
:eq（index）	$('li:eq(2)').css('color', 'red');	获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
:odd	$('li:odd').css('color', 'red');	获取到的li元素中，选择索引号为奇数的元素
:even	$('li:even').css('color', 'red');	获取到的li元素中，选择索引号为偶数的元素

jQuery筛选方法（重点）

名称	用法	描述
children(selector)	$('ul').children('li')	相当于$('ul-li')，子类选择器
find(selector)	$('ul').find('li');	相当于$('ul li'),后代选择器
siblings(selector)	$('#first').siblings('li');	查找兄弟节点，不包括自己本身。
parent()	$('#first').parent();	查找父亲
eq(index)	$('li').eq(2);	相当于$('li:eq(2)'),index从0开始
next()	$('li').next()	找下一个兄弟
prev()	$('li').prev()	找上一次兄弟
closest	$('li').closest('ul')	找最近一个祖先元素

<script type="text/javascript">
    //常用筛选方法
    //获取爱好对应的div
    var hobby = $('#hobby');
    //获取 hobby 父元素
    console.log( $('#hobby').parent() );
    //获取 hobby 子元素
    console.log( $('#hobby').children() );
    //获取 hobby 最近的祖先元素
    console.log( $('#hobby').closest('form') );
    //获取 hobby 所有后代元素
    console.log( $('#hobby').find('input') );
    //获取 hobby 下一个兄弟元素
    console.log( $('#hobby').next() );
    //获取 hobby 前一个兄弟元素
    console.log( $('#hobby').prev() );
    //获取 hobby 所有兄弟元素
    console.log( $('#hobby').siblings() );
</script>

jQuery对象不能使用DOM对象的成员，DOM对象不能使用jQuery对象的成员

jQuery对象和DOM对象的相互转换

jQuery对象转换成DOM对象：   
  jQuery对象.get(索引值); 
  jQuery对象[索引值] 
      jQuery对象是包装集(集合)，从集合中取数据可以使用索引的方式
DOM对象转换成jQuery对象：   
  $(DOM对象) 只有这一种方法;

简单事件绑定

所有事件在jquery中都是jquery对象的方法
click(handler)			单击事件
mouseover(handler)		鼠标悬浮事件
mouseout(handler)		鼠标离开事件
...

<input type="button" value="我是一个按钮" id="btn">
<script>
  $(function(){
      $('#btn').click(function(){
            alert("来了老弟~");
        });
  });	  
</script>

绑定事件时，jquery对象中有多个dom元素，则自动给所有元素均绑定事件。

jQuery操作属性
- attr 设置属性 $obj.attr(name, value)
- 多个属性 $obj.attr(obj)
- 获取属性 $obj.attr(name)
- removeAttr 移除属性 $obj.removeAttr(name);
prop 操作,对于checked、selected、disabled这类boolean类型的属性来说，不能用attr方法，只能用prop方法
val()/text()/html()值操作
class操作
- 添加样式类 $obj.addClass(name)
- 移除样式类 $obj.removeClass('name')
- 判断是否有某个样式类 $obj.hasClass(name)
- 切换样式类 $obj.toggleClass(name)
CSS操作样式
- 操作单个样式 $obj.css(name, value)
- 设置多个样式 $obj.css(obj)
- 获取样式 $obj.css(name) $('div').css('background-color');
width方法与height方法
- width() height() 不传参数表示获取，传递参数表示设置。（传递参数时，可以不用带单位px）

设置或者获取垂直滚动条的位置

// 获取页面被卷曲的高度
$(window).scrollTop();
// 获取页面被卷曲的宽度
$(window).scrollLeft();
// 获取元素距离document的位置,返回值为对象：{left:100, top:100}
$(selector).offset();
// 获取相对于其最近的有定位的父元素的位置。
$(selector).position();

each方法遍历
- 遍历jQuery对象集合，为每个匹配的元素执行一个函数

on注册事件

// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
// 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将由自己执行。
// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
// 第四个参数：handler，事件处理函数
$(selector).on(events[,selector][,data],handler);

事件解绑

// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off('click');

触发事件

$(selector).click(); // 触发 click事件
$(selector).trigger('click');

jQuery事件对象

// screenX和screenY	对应屏幕最左上角的值
// clientX和clientY	距离页面左上角的位置（忽视滚动条）
// pageX和pageY	距离页面最顶部的左上角的位置（会计算滚动条的距离）

// event.keyCode	按下的键盘代码
// event.data	存储绑定事件时传递的附加数据

// event.stopPropagation()	阻止事件冒泡行为
// event.preventDefault()	阻止浏览器默认行为
// return false:既能阻止事件冒泡，又能阻止浏览器默认行为。

jQuery动画效果

显示(show)与隐藏(hide)与切换(toggle)是一组动画：
滑入(slideUp)与滑出(slideDown)与切换(slideToggle)，效果与卷帘门类似
淡入(fadeIn)与淡出(fadeOut)与切换(fadeToggle)

$obj.show([speed], [callback]);
// speed(可选)：动画的执行时间
  // 1.如果不传，就没有动画效果。如果是slide和fade系列，会默认为normal
  // 2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
    // 3.固定速度字符串，slow(200)、normal(400)、fast(600)，如果传其他字符串，则默认为normal。
// callback(可选):执行完动画后执行的回调函数

slideDown()/slideUp()/slideToggle();同理
fadeIn()/fadeOut();fadeToggle();同理

$('img').show(2000);

fadeTo 淡入淡出到指定透明度

$obj.fadeTo(speed, opacity, callback)
$('img').fadeTo(1000, 0.5);

jQuery节点操作

创建节点 $('<span>这是一个span元素</span>');

添加节点

append  appendTo		在被选元素的结尾插入内容   父.append(子)  子.appendTo(父)
prepend prependTo		在被选元素的开头插入内容   父.prepend(子) 子.prependTo(父)
before  insertBefore	在被选元素之后插入内容		后.before(前)  前.insertBefor(后)
after	insertAfter		在被选元素之前插入内容 	前.after(后)   后.insertAfter(前)
推荐记  前面的一列方法 append  prepend  before  after

清空节点与删除节点
- empty：清空指定节点的所有元素，自身保留(清理门户)
- remove：相比于empty，自身也删除（自杀）

克隆节点

// 复制$(selector)所匹配到的元素（深度复制）
// cloneNode(true)  //原生js cloneNode 不传参数 克隆标签本身，传参数true 克隆标签本身以及内容
// 返回值为复制的新元素，和原来的元素没有任何关系了。即修改新元素，不会影响到原来的元素。
$(selector).clone();//克隆元素本身及后代
$(selector).clone(true);//克隆元素本身及后代以及绑定的事件

数组和对象操作
①$.inArray(value, array, [fromIndex])

确定第一个参数在数组中首次出现的位置，从0开始计数(如果没有找到则返回 -1 )。

value:用于在数组中查找是否存在

array:待处理数组。

fromIndex:用来搜索数组队列，默认值为0。
```
$.inArray(1,[1,2,3,1]);

$.inArray(1,[1,2,3,1],2);
```
②$(‘选择器’).toArray(); 把jQuery集合中所有DOM元素恢复成一个数组。
```
$('div').toArray();
```
③$.merge(first, second); 合并数组
```
$.merge([1,2,3], [4,3,2]);
```
④$.parseJSON(str); 解析json字符串为对象，等价于 JSON.parse(str);
```
$.parseJSON('{"name":"zhangfei","age":30}');
```
字符串操作
$.trim(str) 去除字符串两边的空格，等价于 str.trim()
```
$.trim('  123   ');
```

类型操作

$.type(obj)  判断数据类型  typeof

$.isArray(obj) 判断是否数组

$.isFunction(obj) 判断是否函数

$.isEmptyObject(obj) 判断是否空对象（没有成员）

$.isPlainObject(obj) 判断是否纯对象（字面量语法{}或实例化new 构造函数 定义的对象）

$.isNumeric(obj) 判断是否数字（数字型或字符串型数字）

nodejs

node --version 或者 node -v (显示node的版本号)
按ctrl + 两次c 退出REPL环境
核心模块的使用
- FS模块
- HTTP模块

包管理器npm

使用moment 使用第三方包格式化时间
使用npm初始化项目 npm init

"name": "usenpm", // 项目名
"version": "1.0.0", // 版本号
"description": "这是我们第一次使用npm",  // 描述信息
"main": "index.js", // 入口文件
"scripts": { // npm 设置的一些指令
    "test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [ // 关键字
    "第一次"
],
"author": "itheima6期", // 作者
"license": "ISC" // 当前项目的协议

解决 npm 被墙问题

# 在任意目录执行都可以
# --global 表示安装到全局，而非当前目录
# --global 不能省略，否则不管用
npm install --global cnpm

接下来你安装包的时候把之前的 npm 替换成 cnpm。

举个例子：

# 这里还是走国外的 npm 服务器，速度比较慢
npm install jquery

# 使用 cnpm 就会通过淘宝的服务器来下载 jquery
cnpm install jquery

如果不想安装 cnpm 又想使用淘宝的服务器来下载：

npm install jquery --registry=https://registry.npm.taobao.org

但是每一次手动这样加参数很麻烦，所我们可以把这个选项加入配置文件中：

# 配置到淘宝服务器
npm config set registry https://registry.npm.taobao.org

# 查看 npm 配置信息
npm config list

只要经过了上面命令的配置，则你以后所有的 npm install 都会默认通过淘宝的服务器来下载。

模块加载的顺序和规则
在 CommonJS 规范中，使用 require() 加载(引入) 模块时，模块标识必须使用相对路径或绝对路径指明模块位置，但是在node的实现中，我们可以不指明模块路径；如： require('fs')、require('moment') ;

如果没有指明路径，那就是加载核心模块或第三方模块，指明加载路径一般就是加载自定义模块；

不管加载什么模块，都是优先从缓存中加载：

Node 加载模块时，如果这个模块已经被加载过了，则会直接缓存起来，将来再次引用时不会再次加加载这个模块（即：如果一个模块被加载两次，则模块中的代码只会被执行一次）

而核心模块和第三方模块的的加载顺序就是：

先加载核心模块，核心模块的内容都是在安装node时已经编译好的可执行的二进制代码，加载执行的速度，仅次于缓存加载，如果核心模块中没有，则加载第三方模块

第三方模块的加载规则：
- 先在当前文件的模块所属目录去找 node_modules目录
- 如果找到，则去该目录中找模块名的目录如 : moment
- 如果找到 moment 目录，则找该目录中的 package.json文件
- 如果找到 package.json 文件，则找该文件中的 main属性
- 如果找到main 属性，则拿到该属性对应的文件
- 如果找到 moment 目录之后，
  - 没有package.json
  - 或者有 package.json 没有 main 属性
  - 或者有 main 属性，但是指向的路径不存在
  - 则 node 会默认去看一下 moment 目录中有没有 index.js --> index.json--> index.node 文件
- 如果找不到index 或者找不到 moment 或者找不到 node_modules
- 则进入上一级目录找 node_moudles 查找（规则同上）
- 如果上一级还找不到，继续向上，一直到当前文件所属磁盘的根目录
- 如果到磁盘概目录还没有找到，直接报错

Ajax技术

快速入门

<body>
    <form action="1-1-1.php" method="get">
        <input type="text" name="names" value=""><br>
        <input type="button" value="提交">
    </form>
</body>
<script>
    //获取DOM对象
    var inp = document.getElementsByTagName('input');
    //绑定点击事件
    inp[1].onclick = function(){
        //获取文本值
        var v = inp[0].value;
        //获取ajax对象
        var xhr = new XMLHttpRequest();
        //监听状态变化
        xhr.onreadystatechange = function(){
            //判断状态值
            if(xhr.readyState == 4){
                //获取服务器返回信息
                alert(xhr.responseText);
            }
        }
        //打开链接
        xhr.open('get','/test');
        //发送连接
        xhr.send();
    }
</script>

Ajax获取对象

<script>
var btu = document.getElementById('btu');
btu.onclick = function(){
  try{
    var xhr =  new XMLHttpRequest()
  }catch(e){};

  try{
    var xhr = new ActiveXObject('Microsoft.XMLHTTP')
  }catch(e){};

  alert(xhr);
}
</script>

属性
- **readyState： Ajax状态码 * **
  0：表示对象已建立，但未初始化，只是 new 成功获取了对象，但是未调用open方法
  1：表示对象已初始化，但未发送，调用了open方法，但是未调用send方法
  2：已调用send方法进行请求
  3：正在接收数据（接收到一部分），客户端已经接收到了一部分返回的数据
  **4：接收完成，客户端已经接收到了所有数据 * **
- status ：http响应状态码
  200代表成功获取服务器端数据
  404未找到页面等等……
- statusText ：http响应状态文本
- responseText：如果服务器端返回字符串，使用responseText进行接收
- responseXML ：如果服务器端返回XML数据，使用responseXML进行接收
- onreadystatechange：当 readyState 状态码发生改变时所触发的回调函数
方法
- open(method,url,[aycs])：初始化Ajax对象 (打开)
  method:http请求方式，get/post
  url:请求的服务器地址
  aycs:同步与异步
- setRequestHeader(header,value)：设置请求头信息
  header ：请求头名称
  value ：请求头的值
- xhr.getAllResponseHeaders() 获取全部响应头信息
- xhr.getResponseHeader('key') 获取指定头信息
- send([content]) ：发送Ajax请求
  content ：如果是get请求时，此参数为null;
  
  如果是post请求时，此参数就是要传递的数据
  
  注意: 所有相关的事件绑定必须在调用send()方法之前进行.

post请求

//请求地址
var url = 'baidu';
//open参数为post
xhr.open('post',url);
//设置请求头 *** 
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
//设置post请求参数值
xhr.send('names='+inp.value);

认识jsonp
（不仅如此，我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力，比如script、img、iframe）；
src 的能力就是把远程的数据资源加载到本地(图片、JS代码等);
如何使用JSONP

<body>
  <input type="button" id="btu" value="点击">
</body>
<script src="ajax.js"> </script>
<script>
    //提前写好函数，调用函数需要传参
    function callback(msg){
        console.log(msg);
    }
    //动态添加script标签及src属性
    $('btu').onclick = function(){
        var sc = document.createElement('script');
        sc.src = "http://bbs.com/2.php?cb=callback";
        document.getElementsByTagName('head')[0].appendChild(sc);
    }
</script>

就是在远程服务器上设法动态的把数据装进js格式的文本代码段中，供客户端调用和进一步处理；
在前台通过动态添加script标签及src属性，表面看上去与ajax极为相似，但是，这和ajax并没有任何关系；
为了便于使用及交流，逐渐形成了一种 非正式传输协议，人们把它称作 JSONP ；
该协议的一个要点就是允许用户传递一个callback参数给服务端，
然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，
这样客户端就可以随意定制自己的函数来自动处理返回数据了。

跨域资源共享（ CORS）机制
jQ中的Ajax
基本语法：
- $.ajax(obj)
  对象的参数设置及含义：
  async： 布尔类型，代表是否异步，true代表异步，false同步，默认为true
  cache： 是否缓存，布尔类型，true代表缓存，false代表不缓存，默认为true
  complete： 当Ajax状态码（readyState）为4的时候所触发的回调函数
  contentType： 发送信息至服务器时内容编码类型；(默认: "application/x-www-form-urlencoded")
  data： 要求是一个字符串格式，Ajax发送时所传递的数据
  dataType： 期待的返回值类型，可以是text，xml，json，默认为text类型
  success： 当Ajax状态码为4且响应状态码为200时所触发的回调函数
  type： Ajax发送网络请求的方式，(默认: "GET")；
  url： 请求的url地址
- GET 应用
  $.get(url, [data], [callback], [type])
  url:待载入页面的URL地址
  data:待发送 Key/value 参数。
  callback:载入成功时回调函数。
  type:返回内容格式，xml, html, script, json, text, _default。
- POST 应用
  $.post(url, [data], [callback], [type])
  url:发送请求地址。
  data:待发送 Key/value 参数。
  callback:发送成功时回调函数。
  type:返回内容格式，xml, html, script, json, text, _default。

php

什么是wamp组合

php是一门语言，用来做业务逻辑
apache为PHP提供了运行环境
linux为Apache的运行提供了平台
mysql数据库用来存储数据

windows+apche+mysql+php

<?php
   phpinfo();

Apache的命令

httpd -v   查看apache版本号   version
httpd -t   检测运行环境  test

PHP的命令

php -v  PHP版本号

补充：查看端口的占用情况

在命令行下使用 netstat -ano查看

vhosts.conf配置如下

<VirtualHost _default_:80>
  DocumentRoot "C:\web1"       #指定虚拟目录路径
  ServerName www.baidu.com     # 虚拟目录绑定的域名
  DirectoryIndex aa.php        # 默认首页
  <Directory "C:\web1">
    Options -Indexes -FollowSymLinks +ExecCGI
    AllowOverride All
    Order allow,deny
    Allow from all
    Require all granted
  </Directory>
</VirtualHost>


<VirtualHost _default_:80>
DocumentRoot "C:\web2"
 ServerName www.sina.com
 DirectoryIndex bb.php
  <Directory "C:\web2">
    Options -Indexes -FollowSymLinks +ExecCGI
    AllowOverride All
    Order allow,deny
    Allow from all
    Require all granted
  </Directory>
</VirtualHost>

PHP定界符
1、标准风格（推荐使用）
```
<?php

?>
```
例题
```
<?php
  echo 'i am a boy!';
?>
```
提醒，如果整个页面都是PHP代码，PHP结束符是可以省略的（推荐）
```
<?php
  echo 'i am a boy!';
```
单行注释： //和#
多行注释： /* */

PHP输出语句

echo:输出
print:输出，输出成功返回1
print_r()：输出数组
var_dump():输出数据的详细信息，带有数据类型和数据长度

<?php
  var_dump('abc');	//string(3) "abc" 
?>

变量的命名规则
1. 变量必须以$开头，$符不是变量的一部分，仅表示后面的标识符是变量名。
2. 除了$以外，以字母、下划线开头，后面跟着数字、字母、下划线
3. 变量名区分大小写，$aa和$Aa是两个空间
PHP语句必须以分号结尾
rand(1,10)：获取1-10的随机整数
变量的传递有值传递和地址传递（引用传递使用 & 符号）
unset() 变量值由PHP垃圾回收机制销毁
define(常量名，值，[是否区别大小写]) true表示不区分大小写，默认是false
- 常量名前没有$符
  常量名推荐使用大写
const关键字定义常量
使用constant获取特殊字符做的常量名的值
defined()用来判断常量是否被定义

预定义常量

echo PHP_VERSION,'<br>';		//PHP版本号
echo PHP_OS,'<br>';				//PHP操作系统
echo PHP_INT_MAX,'<br>';		//PHP中整型的最大值

魔术常量

echo __LINE__,'<br>';		//获取当前行号
echo __FILE__,'<br>';		//文件的完整路径和文件名
echo __DIR__,'<br>';		//文件所在的目录

数据类型

整型

<?php
$num1=10;		//十进制
$num2=010;		//八进制（数字前面加0）
$num3=0x10;		//十六进制（数字前面加0x）

echo $num1,'<br>';		//10
echo $num2,'<br>';		//8
echo $num3;				//16

进制转换

机制	缩写	单词
十进制	dec	decimalist
二进制	bin	binary
八进制	oct	octonary
十六进制	hex	hexdecimalist

echo decbin(123),'<br>';   //十进制转二进制
echo bindec(1111011),'<br>';	//二进制转十进制
echo dechex(123),'<br>';		//十进制转十六进制
echo hexdec('7b'),'<br>';		//十六进制转十进制
echo decoct(123);				//十进制转八进制

浮点型
浮点数在内存中保存的是近似值浮点数不能参与比较
如果浮点数要比较，必须确定比较的位数

var_dump(0.9==(1-0.1));		//bool(true) 
echo '<br>';
var_dump(0.1==(1-0.9));		//bool(false) 
echo '<br>';
var_dump(bccomp(0.1,1-0.9,5));	//比较小数点后面5位   int(0)   0表示相等

布尔型
不能使用echo 和print输出布尔型，要使用var_dump()输出

字符串型
在PHP中单引号字符串和双引号字符串是有区别的
单引号字符串是真正的字符串
双引号字符串要解析字符串中的变量

字符串定界符

1、有<<<开头，后面跟的是标识符
2、字符串定界符的结束符必须顶格写，前面不能有任何的空白字符
3、字符串定界符分为两种，heredoc（双引号），nowdoc（单引号）

复合类型
- 数组
  在PHP中数组有两种形式，索引数组和关联数组
  索引数组：用整数做下标，默认从0开始，后面依次加一
  关联数组：用字符串做下标，通过=>符号将下标和值关联起来
  数组的下标只能是正整数和字符串
特殊类型
- 自动类型转换：当提供的类型和需要的类型不一致的时候会自动进行类型转换
- 强制类型转换（数据类型）数据 var_dump($num1,(int)$num1,(float)$num1)
运算符
- 算术运算符
  | 一元运算符 | 二元运算符 |
  | ---------- | ---------- |
  | ++ | + |
  | -- | - |
  | | * |
  | | / |
  | | % (取模) |
  ++前置：先自增再运算
  ++后置：先运算再自增
关系运算符（比较运算符）
```
>
>=
<
<=
==
!=
===
!==
```
逻辑运算符

&	与：运算符两边的表达式都要计算
|	或：运算符两边的表达式都要计算

&&	短路与：如果前面的条件不满足，后面的条件就不用计算了
||	短路或
!	非

赋值运算符

=	//赋值
+=			//a+=b   a=a+b
-=
*=
/=
%=

字符串连接符(.) echo 'aa'.'bb';
错误抑制符(@) echo @($aa+$bb);

三元运算符(?😃

表达式?值1：值2
//表达式的值为true，返回值1，否则返回值2

null合并运算符(??) PHP7.0以后才支持 echo $name??'姓名不详';
isset()：判断变量是否被设置，并且设置的不是null
empty()：检查一个变量是否为空，能转成false全部是空，['',0,0.0,array(),null]
多分支 if(){} elseif(){} elst{}

多路选择

switch(表达式){
        case 常量：
            //代码块
            break;
        case 常量：
            //代码块
            break;
      default:
          //代码块
}

循环 for

for(初始值;条件;增量){
  //循环体
}

while、do-while

while(条件){
}
-------------------------
do{
    
}while(条件)

foreach 循环是用来遍历数组

//语法一
foreach(数组 as 值){
}
//语法二
foreach(数组 as 键=>值){
}

跳转语句 break：中断循环 continue：中断当前循环，进入下一个循环
中断多重循环 break和continue默认中断、跳出1重循环，如果调中断、跳出多重循环，在后面加一个数字。

替代语法 php中除了do-while以外，其他的语法结构都有替代语法

规则：左大括号变冒号,右大括号变endXXX
在混编的时候用替代语法

//if的替代语法
    if():

    elseif():

    else:

    endif;
//switch替代语法
    switch():

    endswitch;
//for
    for():

    endfor;
//while
    while():

    endwhile;
//foreach
    foreach():

    endforeach;

函数可变函数匿名函数参数传递地址传递
函数的参数默认是值传递
如果要传递地址，在参数前面加&
如果是地址传递，不能直接写值
参数默认值
- 默认值必须是值，不能用变量代替
- 默认值可以使用常量
- 有默认值的写在后面，没有默认值的写在前面

参数个数不匹配

<?php
function fun($num1,$num2) {
  echo $num1,'<br>';
  echo $num2,'<br>';
}
//fun(10);	//实参少于形参（报错）
fun(10,20,30); //实参多于形参，只取前面对应的值

获取所有传递的参数

<?php
function fun() {
  //echo func_num_args(),'<br>';	//获取参数的个数
  $args=func_get_args();	//获取参数数组
  print_r($args);
}
fun(10);
fun(10,20);
fun(10,20,30);

参数约束
- 定义变长参数 function fun(...$args){echo '<pre>'}
- 参数类型约束 function fun(string $name,int $age) {}
- 返回值约束 function fun(int $num1,int $num2):int {return $num1+$num2 } 必须返回整型
return
- 终止脚本执行
- 返回页面结果
- 函数的返回和终止

变量作用域

全局变量：在函数外面
局部变量：在函数里面，默认情况下，函数内部是不会去访问函数外部的变量
超全局变量：可以在函数内部和函数外部访问
$GLOBALS保存的是全局变量的所有的值
global用于创建一个全局变量的引用
注意：常量没有作用域的概念

<?php
$num=10;   
function fun() {
  echo $num;     //Notice: Undefined variable: num  
}
fun();
//函数内部默认不能访问函数外部的值
---------------------
<?php
$_POST['num']=10;   //将值付给超全局变量
function fun() {
  echo $_POST['num'];    //获取超全局的值   10
}
fun();
----------------------------
<?php
function fun() {
  $_GET['num']=10;  //将值付给超全局变量
}
fun();
echo $_GET['num'];  //打印超全局变量的值  10

在函数内部访问全局变量

<?php
$num=10;  //全局变量
function fun() {
  echo $GLOBALS['num'];	//输出全局的$num
}
fun();

global关键字

<?php
$num=10;
function fun() {
  global $num;   //将全局变量的$num的地址引入到函数内部  相当于$num=&GLOBALS['num']
  echo $num;	//10
  $num=100;
}
fun();
echo '<br>';
echo $num;    //100
-----------------------------------
<?php
$num=10;
function fun() {
  global $num;
  unset($num);  //销毁的是引用，不是具体的值
}
fun();
echo $num;    //10

静态变量（static）
- 静态变量一般指的是静态局部变量。
  静态变量只初始化一次
  静态变量只初始化一次，调用完毕吧不销毁，第二次调用的时候就不再初始化
匿名函数use()
- 默认情况下，函数内部不能访问函数外部的变量，但在匿名函数中，可以通过use将外部变量引入匿名函数中
递归
- 函数内部自己调用自己
  递归有两个元素，一个是递归点（从什么地方递归），第二递归出口
包含文件
- require：包含多次
- include：包含多次
- require_once：包含一次
- include_once：包含一次
- require遇到错误抛出error类别的错误，停止执行
  include遇到错误抛出warning类型的错误，继续执行
  require_once、include_once只能包含一次
  HTML类型的包含页面中存在PHP代码，如果包含到PHP中是可以被执行的
  包含文件相当于把包含文件中的代码拷贝到主文件中执行，魔术常量除外，魔术常量获取的是所在文件的信息。
  包含在编译时不执行、运行时加载到内存、独立编译包含文件

包含文件的路径

include_path的使用场景：
如果包含文件的目录结构比较复杂，比如：在c:\aa\bb\cc\dd中有多个文件需要包含，可以将包含的路径设置成include_path，这样包含就只要写文件名就可以了

<?php
set_include_path('c:\aa\bb\cc\dd');  //设置include_path
require 'head4.html';	  //受include_path配置影响
require 'head2.html';

正斜（/） web中目录分隔用正斜  http://www.sina.com/index.php
反斜（\）物理地址的分隔用反斜，（windows中物理地址正斜和反斜都可以）  c:\web1\aa

错误处理
- notice：提示
- warning：警告
- error：致命错误
- notice和warning报错后继续执行，error报错后停止执行

与错误处理有关的配置
在php.ini中

4. error_reporting = E_ALL：报告所有的错误
2. display_errors = On：将错误显示在浏览器上
3. log_errors = On：将错误记录在日志中
4. error_log=’地址’：错误日志保存的地址

在项目开发过程中有两个模式，开发模式，运行模式

开发模式：错误显示在浏览器上，不要记录在日志中
运行模式：错误不显示在浏览器上，记录是日志中

提示：ini_set()设置PHP的配置参数

<?php
$debug=false;		//true:开发模式  false：运行模式
ini_set('error_reporting',E_ALL);	//所有的错误有报告
if($debug){
  ini_set('display_errors','on');	//错误显示是浏览器上
  ini_set('log_errors','off');	//错误不显示在日志中
}else{
  ini_set('display_errors','off');
  ini_set('log_errors','on');
  ini_set('error_log','./err.log');	//错误日志保存的地址
}

//测试
echo $num;

自定义错误处理
通过trigger_error产生一个用户级别的 error/warning/notice 信息

<?php
$age=100;
if($age>80){
  //trigger_error('年龄不能超过80岁');  //默认触发了notice级别的错误
  //trigger_error('年龄不能超过80岁',E_USER_NOTICE);	//触发notice级别的错误
  //trigger_error('年龄不能超过80岁',E_USER_WARNING);
  trigger_error('年龄不能超过80岁',E_USER_ERROR);   //错误用户error错误
  }

文件编程
- 创建文件夹【mkdir(路径，权限，是否递归创建)】
  make:创建
  directory：目录，文件夹
  mkdir('./aa/bb/cc/dd',0777,true); //递归创建
  0777表示是文件夹的权限
  true表示递归创建，默认是false
- 删除文件夹【rmdir()】
  删除的文件夹必须是空的
  PHP基于安全考虑，没有提供递归删除。
- 重命名文件夹【rename(旧名字，新名字)】
- 是否是文件夹【is_dir()】
- 打开文件夹、读取文件夹、关闭文件夹
```
$folder=opendir('./');	//打开目录
//var_dump($folder);		//resource(3) of type (stream) 
while($f=readdir($folder)){	//读取文件夹
  if($f=='.' || $f=='..')
    continue;
  echo iconv('gbk','utf-8',$f),'<br>';  //将gbk转成utf-8
}
closedir($folder);		//关闭文件夹
```

文件操作

将字符串写入文件

<?php
$str="床前明月光，\r\n疑是地上霜。\r\n举头望明月，\r\n低头思故乡。";
file_put_contents('./test.txt',$str);  //将字符串写到文本中

\r:回车   光标移动到当前行的最前面
\n:换行	将光标下移动一行
按键盘的回车键做了两步，第一步将光标移动到当前行的最前面，第二步下移一行。

将整个文件读入一个字符串

//方法一：
echo file_get_contents('./test.txt');   //将整个文件读入一个字符串 
//方法二：
readfile('./test.txt');	//读取输出文件内容

//注意：echo file_get_contents()==readfile()

打开文件并操作

fopen(地址,模式)	打开文件
模式：
r：读		read
w:写		 write
a:追加	append

打开文件，返回文件指针（文件指针就是文件地址），资源类型
打开文件写、追加操作，如果文件不存在，就创建新的文件
打开文件读操作，文件不存在就报错
追加是在文件的末尾追加
fputs()写一行，fgets()读一行，fclose()关闭文件

是否是文件【is_file()】
判断文件或文件夹是否存在【file_exists()】
删除文件【unlink】
二进制读取【fread(文件指针，文件大小)】二进制流的读取按文件大小来读的。比如图片文件
表单提交数据的两种方式
- get
- post
```
// 在php.ini中，可以配置post提交的大小
post_max_size = 8M
```
| | GET | POST |
| ------------ | ----------------------------------------------------- | ------------------------------------------------------------ |
| 外观上 | 在地址上看到传递的参数和值 | 地址栏上看不到数据 |
| 提交数据大小 | 提交少量数据，不同的浏览器最大值不一样，IE是255个字符 | 提交大量数据，可以通过更改php.ini配置文件来设置post提交数据的最大值 |
| 安全性 | 低 | 高 |
| 提交原理 | 提交的数据和数据之间在独立的 | 将提交的数据变成XML格式提交 |
| 灵活性 | 很灵活，只要有页面的跳转就可以get传递数据 | 不灵活 |
服务器接受数据的三种方式
通过名字获取名字对应的值
```
$_POST：数组类型，保存的POST提交的值
$_GET：数组类型，保存的GET提交的值
$_REQUEST：数组类型，保存的GET和POST提交的值
```
在一个请求中，既有get又有post，get和post传递的名字是一样的，这时候通过$_REQUET获取的数据是什么?
答：结果取决于配置文件
```
request_order = "GP"  # 先获取GET，在获取POST值
```
文件上传
表单的enctype属性
默认情况下，表单传递是字符流，不能传递二进制流，通过设置表单的enctype属性传递复合数据。
enctype属性的值有：
1. application/x-www-form-urlencoded：【默认】，表示传递的是带格式的文本数据。
2. multipart/form-data：复合的表单数据（字符串，文件），文件上传必须设置此值
3. text/plain：用于向服务器传递无格式的文本数据，主要用户电子邮件

服务器接受文件
超全局变量$_FILES是一个二维数组，用来保存客户端上传到服务器的文件信息。二维数组的行是文件域的名称，列有5个。
1、$_FILES[][‘name’]：上传的文件名
2、$_FILES[][‘type]：上传的类型，这个类型是MIME类型（image/jpeg、image/gif、image/png）
3、$_FILES[][‘size’]：文件的大小，以字节为单位
4、$_FILES[][‘tmp_name’]：文件上传时的临时文件
5、$_FILES[][‘error’]：错误编码(值有0、1、2、3、4、6、7)0表示正确
$_FILES[][‘error’]详解

值	错误描述
0	正确
1	文件大小超过了php.ini中允许的最大值 upload_max_filesize = 2M
2	文件大小超过了表单允许的最大值
3	只有部分文件上传
4	没有文件上传
6	找不到临时文件
7	文件写入失败

注意：MAX_FILE_SIZE必须在文件域的上面。
只要掌握的错误号：0和4

将上传文件移动到指定位置
- move_uploaded_file(临时地址,目标地址)
与文件上传有关的配置
post_max_size = 8M：表单允许的最大值

upload_max_filesize = 2M：允许上传的文件大小

upload_tmp_dir =F:\wamp\tmp：指定临时文件地址，如果不知道操作系统指定

file_uploads = On：是否允许文件上传

max_file_uploads = 20：允许同时上传20个文件
优化文件上传
- 通过时间戳做文件名
- 通过uniqid()实现

验证文件格式

通过$_FIELS[]['type']类型（不能识别文件伪装）
在php.ini中开启fileinfo扩展 extension=php_fileinfo.dll

<body>
<?php
if(!empty($_POST)) {
  //第一步：创建finfo资源
  $info=finfo_open(FILEINFO_MIME_TYPE);
  //var_dump($info);		//resource(2) of type (file_info) 
  //第二步：将finfo资源和文件做比较
  $mime=finfo_file($info,$_FILES['face']['tmp_name']);
  //第三步，比较是否合法
  $allow=array('image/jpeg','image/png','image/gif');	//允许的类别
  echo in_array($mime,$allow)?'合法':'不合法';
}
?>
<form method="post" action="" enctype='multipart/form-data'>
  <input type="file" name="face">
  <input type="submit" name="button" value="上传">
</form>
</body>

将时间戳转换格式
- echo date('Y-m-d H:i:s',1231346),'<br>'; //将时间戳转成年-月-日小时:分钟:秒
- echo date('Y-m-d H:i:s'),'<br>'; //将当前的时间转成年-月-日小时:分钟:秒
设置时区（php.ini）
- PRC：中华人民共和国
mysql扩展

mysqli_connect(主机IP，用户名，密码，数据库名，端口号) //如果端口号是3306可以省略
mysqli_connect_error()：获取连接数据库的错误信息
mysqli_connect_errno()：获取连接数据库的错误编码
mysqli_set_charset(连接对象,字符编码)    
mysqli_query()：执行SQL语句
mysqli_insert_id()：获取插入记录自动增长的ID
mysqli_affected_rows()：获取受影响的记录数
mysqli_error()：获取执行SQL语句的错误信息
mysqli_errno()：获取执行SQL语句的错误码
mysqli_fetch_assoc()：将一条数组匹配关联数组
mysqli_fetch_row()：将一条记录匹配成索引数组
mysqli_fetch_array()：将一条记录匹配成既有关联数组又有索引数组
mysqli_fetch_all()：匹配所有记录
mysqli_num_rows()：总行数
mysqli_num_fields()：总记录数
mysqli_free_result()：销毁结果集
mysqli_close()：关闭连接

访问修饰符一般来说，属性都用私有的，通过公有的方法对私有的属性进行赋值和取值。
- $this表示调用当前方法的对象

修饰符	描述
public（公有的）	在类的内部和外部都能访问
private（私有的）	只能在类的内部访问
protected（受保护的）	在整个继承链上访问

构造方法构造函数作用：初始化成员变量

function __construct(){
}
注意：前面是两个下划线

析构方法当对象销毁的时候自动调用

function __destruct(){
}

面向对象三大特性封装继承多态

//继承
class 子类 extends 父类{
}

继承中的构造函数

1、如果子类有构造函数就调用子类的，如果子类没有就调用父类的构造函数。
2、子类的构造函数调用后，默认不再调用父类的构造函数

通过类名调用父类的构造函数
parent关键字表示父类的名字，可以降低程序的耦合性

类名::__construct()
Person::__construct();		//通过父类的名字调用父类的构造函数
parent::__construct();		//parent表示父类的名字

多重继承 PHP不允许多重继承，因为多重继承容易产生二义性
多态：多种形态。
- 方法重写和方法重载
- 子类重写了父类的同名的方法 -重写
- 在同一个类中，有多个同名的函数，通过参数的不同来区分不同的方法，称为方法重载
私有属性可以继承但不能重写。
方法修饰符
1. static
  - static修饰的属性叫静态属性、static修饰的方法叫静态方法
  - 静态成员加载类的时候分配空间，程序执行完毕后销毁
  - 静态成员在内存中就一份。
  - 调用语法类名::属性类名::方法名()
    self表示所在类的类名，使用self降低耦合性
    static有两个作用，第一表示静态的，第二表示类名
2. final【最终的】
  - final修饰的方法不能被重写
  - final修饰的类不能被继承
  - 如果一个类确定不被继承，一个方法确定不会被重写，用final修饰可以提高执行效率
  - 如果一个方法不允许被其他类重写，可以用final修饰
3. abstract【抽象的】
  - abstract修饰的方法是抽象方法，修饰的类是抽象类
  - 只有方法的声明没有方法的实现称为抽象方法
  - 一个类中只要有一个方法是抽象方法，这个类必须是抽象类。
  - 抽象类的特点是不能被实例化
  - 子类继承了抽象类，就必须重新实现父类的所有的抽象方法，否则不允许实例化
  - 类中没有抽象方法也可以声明成抽象类，用来阻止类的实例化
类常量类常量是const常量 const常量可以做类成员，define常量不可以做类成员。
接口（interface）
1. 如果一个类中所有的方法是都是抽象方法，那么这个抽象类可以声明成接口
2. 接口是一个特殊的抽象类，接口中只能有抽象方法和常量
3. 接口中的抽象方法只能是public，可以省略，默认也是public的
4. 通过implements关键字来实现接口
5. 不能使用abstract和final来修饰接口中的抽象方法。
- 类不允许多重继承，但是接口允许多重实现。
- 在接口的多重实现中，如果有同名的方法，只要实现一次即可
- 类可以继承的同时实现接口
匿名类
- 如果类只被实例化一次就可以使用匿名类
- 好处，在执行的过程中，类不占用空间
方法绑定 闭包->call(对象)：将闭包绑定到对象上,并调用
异常处理

try:监测代码块
catch:捕获异常
throw:抛出异常
finally:无论有无异常都会执行，可以省略
Exception：异常类

try{
	//检测代码
}catch(Exception $ex){
	//捕获异常
}
finally{
	//不论是否有异常，都要执行，finally可以省略
}

自定义异常
- 自定义三种异常即可
  所有异常类的父类是Exception，Exception中的方法不允许重写
自动加载类
类的规则
1. 一个文件中只能放一个类（必须）
2. 文件名和类名同名（必须）
3. 类文件以.class.php结尾（不是必须）
手动加载 require './Goods.class.php'
自动加载类当缺少类的时候自动的调用__autoload()函数，并且将缺少的类名作为参数传递给__autoload()。
- __autoload()函数在PHP7.2以后就不支持了。
注册加载类通过spl_autoload_register()注册__autoload()函数

<?php
//方法一：
/*
//加载类函数
function loadClass($class_name) {
	require "./{$class_name}.class.php";
}
//注册加载类函数
spl_autoload_register('loadClass');
*/

//方法二：
spl_autoload_register(function($class_name){
	require "./{$class_name}.class.php";
});

//测试
$book=new Book();
$book->setName('面向对象编程');
$phone=new Phone();
$phone->setName('苹果6s');
$book->getName();
$phone->getName();

clone和__clone()
- clone的创建对象的方法之一
- 当执行clone指令的时候，会自动的调用__clone()方法
设计模式
- 单例模式
- 一个类只能有一个对象多次请求数据库只需要一个连接对象
  实现：三私一公

1、私有的静态属性用来保存对象的单例
2、私有的构造方法用来阻止在类的外部实例化
3、私有的__clone阻止在类的外部clone对象
4、公有的静态方法用来获取对象的单例

<?php
//三私一公
class DB {
	//静态的属性用来保存对象的单例
	private static $instance;
	//私有的构造方法阻止在类的外部实例化
	private function __construct() {
		
	}
	//私有的__clone()阻止在类的外部clone对象
	private function __clone() {
		
	}
	public static function getInstance() {
		//保存的值不属于DB类的类型就实例化
		if(!self::$instance instanceof self)
			self::$instance=new self();
		return self::$instance;
	}
}
//测试
$db1=DB::getInstance();
$db2=DB::getInstance();
var_dump($db1,$db2);	//object(DB)#1 (0) { } object(DB)#1 (0) { }

工厂模式
- 特点：传递不同的参数获取不同的对象
策略模式
- 特点：传递不同的参数调用不同的策略（方法）
序列化与反序列化
在PHP中，数组和对象无法保存，如果需要保存就要将数组或对象转换成一个序列。

序列化：将数组或对象转换成一个序列（serialize）

反序列化：将序列化的字符串转换成数组或对象。(unserialize)
对象的反序列化需要有类的参与，如果没有类在反序列化时候无法确定类
魔术方法

__construct()
__destruct()
__clone()
__set($k,$v)：给无法访问的属性赋值的时候自动执行
__get($k)：获取无法访问的属性值的时候自动调用
__isset($k)：判断无法访问的属性是否存在自动调用
__unset($k)：销毁无法访问的属性的时候自动执行
__call()：调用无法访问的方法时自动执行
__callstatic()：调用无法访问的静态方法时自动执行
__sleep()：当序列化的时候自动调用
__wakeup()：当反序列化的时候自动调用

__tostring()、__invoke()

__tostring()：将对象当成字符串使用的时候自动调用

__invoke()：将对象当成函数使用的时候自动调用

遍历对象通过foreach遍历对象
命名空间通过namespace关键字来声明命名空间
- 命名空间的名字可以是多级的（子级命名空间）。
访问空间元素的三种方式
非限定名称访问
完全限定名称访问
限定名称访问

<?php
namespace China\Beijing\Shunyi;
function getInfo() {
	echo '顺义...<br>';
}

namespace China\Beijing;
function getInfo() {
	echo '北京...<br>';	
}
//访问空间元素的三种方式
getInfo();					//非限定名称访问	北京...			
\China\Beijing\getInfo();	//完全限定名称访问		北京...
Shunyi\getInfo();			//限定名称访问		顺义...
//转成绝对路径如下：
// \China\Beijing\Shunyi\getInfo();

通过use引入命名空间
- 引入命名空间的拼接规则
- 公共空间+引入空间+（去除公共部分，公共部分只能有一级）空间元素
引入空间元素
引入类：use
引入函数：use function [php7.0以后支持]
引入常量：use const [php7.0以后支持]
给类、函数取别名通过as取别名
- 如果引入的类和函数与当前空间的类和函数名称相同，需要给引入的类和函数取别名。
公共空间如果一个页面没有namespace声明空间，这个页面的元素在公共空间下
- 公共空间用\表示
命名空间注意事项
1、命名空间只能存放类、函数、const常量
2、第一个namespace前面不能有任何的代码，空白字符、header()也不行。
3、包含文件不影响当前的命名空间
trait(原型)
trait 为了减少单继承语言的限制，可以在不同层次结构内独立的类中复用类的方法集。
迭代器
步骤：

1、复位数组指针 reset()

2、检查指针是否合法获取当前指针，如果不为null就是合法的

3、获取当前值 current()

4、获取当前键 key()

5、指针下移 next()
pdo扩展

$dsn=数据库类型:host=主机地址;port=端口号;dbname=数据库名称;charset=字符集

数据库类型：

MySQL数据库	=>	mysql:
oracle数据库	=>	oci:
SQL Server 		=>sqlsrv:
具体驱动类型参见手册“PDO驱动”

实例化PDO的过程就是连接数据库的过程

<?php
$dsn='mysql:host=localhost;port=3306;dbname=data;charset=utf8';
$pdo=new PDO($dsn,'root','root');
var_dump($pdo); //object(PDO)#1 (0) { }

1、如果连接的是本地数据库，host可以省略
2、如果使用的是3306端口，port可以省略
3、charset也省略，如果省略，使用的是默认字符编码
4、dbname也可以省略，如果省略就没有选择数据库
5、host、port、dbname、charset不区分大小写，没有先后顺序
6、驱动名称不能省略，冒号不能省略（因为冒号是驱动名组成部分），数据库驱动只能小写

执行数据操作语句
- 方法:$pdo->exec($sql)，执行数据增、删、改语句，执行成功返回受影响的记录数，如果SQL语句错误返回false。
执行数据查询语句
- 方法：$pdo->query($sql)，返回的是PDOStatement对象

PDO操作事务

$pdo->beginTransaction()	开启事务
$pdo->commit ()			提交事务
$pdo->rollBack()			回滚事务

PDO操作预处理
预处理语句：

prepare 预处理名字 from 'sql语句'

执行预处理

execute 预处理名字 [using 变量]

Mysql数据库

连接数据库

host		-h	主机
port		-P	端口号   （大写）
user		-u	用户名
password	-p	密码     （小写）

-- 连接数据库
F:\wamp\PHPTutorial\MySQL\bin>mysql -h127.0.0.1 -P3306 -uroot -proot  -- 明文

-- 如果连接本地数据库 -h可以省略 如果服务器端口是3306，-P端口号也可以省略
F:\wamp\PHPTutorial\MySQL\bin>mysql -uroot -proot	-- 明文

-- 密文
F:\wamp\PHPTutorial\MySQL\bin>mysql -uroot -p  
Enter password: ****

退出登录

mysql> exit		-- 方法一
mysql> quit		-- 方法二
mysql> \q		-- 方法三

创建数据库

-- 创建数据库
mysql> create database stu;
Query OK, 1 row affected (0.06 sec)

-- 创建数据库时，如果数据库已经存在就要报错
mysql> create database stu;
# ERROR 1007 (HY000): Can't create database 'stu'; database exists

-- 在创建数据库时候，判断数据库是否存在，不存在就创建
mysql> create database if not exists stu;
Query OK, 1 row affected, 1 warning (0.00 sec)

-- 特殊字符、关键字做数据库名，使用反引号将数据库名括起来
mysql> create database `create`;
Query OK, 1 row affected (0.04 sec)

mysql> create database `%$`;
Query OK, 1 row affected (0.05 sec)

-- 创建数据库时指定存储的字符编码
mysql> create database emp charset=gbk;
Query OK, 1 row affected (0.00 sec)
# 如果不指定编码，数据库默认使用安装数据库时指定的编码

显示所有数据库 show databases
删除数据库 drop database [if exists] 数据库名
显示创建数据库的语句 show create database 数据库名
修改数据库 alter database 数据库名 charset=字符编码
选择数据库 use 数据库名
表的操作
- 创建表

create table [if not exists] `表名`(
    `字段名` 数据类型 [null|not null] [default] [auto_increment] [primary key] [comment],
    `字段名 数据类型 …
)[engine=存储引擎] [charset=字符编码]

null|not null     是否为空
default:          默认值
auto_increment    自动增长,默认从1开始，每次递增1
primary key       主键，主键的值不能重复，不能为空,每个表必须只能有一个主键
comment:          备注
engine            引擎决定了数据的存储和查找   myisam、innodb

脚下留心：表名和字段名如果用了关键字，要用反引号引起来。

 -- 设置客户端和服务器通讯的编码
mysql> set names gbk;  
Query OK, 0 rows affected (0.00 sec)

-- 创建简单的表
mysql> create table stu1(
    -> id int auto_increment primary key,
    -> name varchar(20) not null
    -> )engine=innodb charset=gbk;
Query OK, 0 rows affected (0.11 sec)

-- 创建复杂的表
mysql> create table stu2(
    -> id int auto_increment primary key comment '主键',
    -> name varchar(20) not null comment '姓名',
    -> `add` varchar(50) not null default '地址不详' comment '地址',
    -> score int comment '成绩,可以为空'
    -> )engine=myisam;
Query OK, 0 rows affected (0.06 sec)

数据表的文件

一个数据库对应一个文件夹
一个表对应一个或多个文件
引擎是myisam，一个表对应三个文件
	.frm	：存储的是表结构
	.myd	:存储的是表数据
	.myi	:存储的表数据的索引
引擎是innodb,一个表对应一个表结构文件，innodb的都有表的数据都保存在ibdata1文件中，如果数据量很大，会自动的创建ibdata2，ibdata3...

innodb和myisam的区别

引擎
myisam	1、查询速度快 2、容易产生碎片 3、不能约束数据
innodb	1、以前没有myisam查询速度快，现在已经提速了 2、不产生碎片 3、可以约束数据

脚下留心：推荐使用innodb。

显示所有表 show tables;
显示创建表的语句

show create table;	 -- 结果横着排列
show create table \G  -- 将结果竖着排列

查看表结构 desc[ribe] 表名
复制表
- create table 新表 select 字段 from 旧表
  - 特点：不能复制父表的键，能够复制父表的数据
- create table 新表 like 旧表
  - 只能复制表结构，不能复制表数据
删除表
- drop table [if exists] 表1，表2,…

-- 删除表
mysql> drop table stu4;
Query OK, 0 rows affected (0.06 sec)

-- 如果表存在就删除
mysql> drop table if exists stu4;
Query OK, 0 rows affected, 1 warning (0.00 sec)

-- 一次删除多个表
mysql> drop table stu2,stu3;
Query OK, 0 rows affected (0.03 sec)

修改表 alter table 表名
- 添加字段：alter table 表名add [column] 字段名数据类型 [位置]
- 删除字段：alter table 表 drop [column] 字段名
- 修改字段(改名)：alter table 表 change [column] 原字段名新字段名数据类型 …
- 修改字段（不改名）:alter table 表 modify 字段名字段属性…
- 修改引擎：alter table 表名 engine=引擎名
- 修改表名:alter table 表名 rename to 新表名
- 将表移动到其他数据库

mysql> create table stu(
    -> id int,
    -> name varchar(20)
    -> );

alter table stu add `add` varchar(20);	-- 默认添加字段放在最后
alter table stu add sex char(1) after name;  -- 在name之后添加sex字段
alter table stu add age int first;  -- age放在最前面
alter table stu drop age;   -- 删除age字段
alter table stu change name stuname varchar(10);  -- 将name字段更改为stuname varchar(10)
alter table stu  modify sex varchar(20); -- 将sex数据类型更改为varchar(20)
alter table stu modify `add` varchar(20) default '地址不详';  -- 将add字段更改为varchar(20) 默认值是‘地址不详’
alter table stu engine=myisam; -- 修改引擎
alter table stu rename to student; -- 将stu表名改成student
alter table student rename to php74.stu;  -- 将当前数据库中的student表移动到php74数据库中改名为stu

插入数据 insert into 表名 (字段名, 字段名,…) values (值1, 值1,…)

-- 插入所有字段
insert into stu (id,stuname,sex,`add`) values (1,'tom','男','北京');
-- 插入部分字段
insert into stu(id,stuname) values (2,'berry');
-- 插入的字段和表的字段可以顺序不一致。但是插入字段名和插入的值一定要一一对应
insert into stu(sex,`add`,id,stuname) values ('女','上海',3,'ketty');
-- 插入字段名可以省略
insert into stu values(4,'rose','女','重庆'); 
-- 插入默认值和空值
insert into stu values (5,'jake',null,default);  
-- 插入多条数据
 insert into stu values (6,'李白','男','四川'),(7,'杜甫','男','湖北');

更新数据 update 表名 set 字段=值 [where 条件]

-- 将berry性别改为女
mysql> update stu set sex='女' where stuname='berry';
-- 将编号是1号的学生性别改成女，地址改为上海。
mysql> update stu set sex='女',`add`='上海' where id=1;

删除数据 delete from 表名 [where 条件]

-- 删除1号学生
mysql> delete from stu where id=1;
-- 删除名字是berry的学生
mysql> delete from stu where stuname='berry';
-- 删除所有数据
mysql> delete from stu;

1、delete from 表：遍历表记录，一条一条的删除
2、truncate table：将原表销毁，再创建一个同结构的新表。就清空表而言，这种方法效率高。

查询数据 select 列名 from 表名

-- 查询id字段的值
mysql> select id from stu;
-- 查询id,stuname字段的值
mysql> select id,stuname from stu;、
-- 查询所有字段的值
mysql> select * from stu;

校对集
- collate = 校对集
- _bin：按二进制编码比较，区别大小写
  _ci：不区分大小写

mysql> create table stu1(
    -> name char(1)
    -> )charset=utf8 collate=utf8_general_ci;
mysql> create table stu2(
    -> name char(1)
    -> )charset=utf8 collate=utf8_bin;
mysql> insert into stu1 values ('a'),('B');
mysql> insert into stu2 values ('a'),('B');

数据类型
- 整型
- 选择的范围尽可能小，范围越小占用资源越少
- 无符号整形（unsigned）无符号整形就是没有负数，无符号整数是整数的两倍
- 整形支持显示宽度，显示宽带是最小的显示位数，如int(11)表示整形最少用11位表示，如果不够位数用0填充。显示宽度默认不起作用，必须结合zerofill才起作用。

整形	占用字节数	范围
tinyint	1	-128~127
smallint	2	-32768~32767
mediumint	3	-8388608~8388607
int	4	-2147483648~2147483647
bigint	8	-9223372036854775808~9223372036854775807

mysql> create table stu4(
    -> id int(5),
    -> num int(5) zerofill   # 添加前导0,int(5)显示宽带是5
    -> );
mysql> insert into stu4 values (12,12);
mysql> select * from stu4;
+------+-------+
| id   | num   |
+------+-------+
|   12 | 00012 |
+------+-------+
1 row in set (0.00 sec)

浮点型
| 浮点型 | 占用字节数 | 范围 |
| ------------------ | ---------- | ------------------ |
| float（单精度型） | 4 | -3.4E+38~3.4E+38 |
| double（双精度型） | 8 | -1.8E+308~1.8E+308 |

浮点型的声明：float(M,D) double(M,D)

 M：总位数   D：小数位数

mysql> create table stu5(
    -> num1 float(5,2),   -- 浮点数
    -> num2 double(6,1)	  -- 双精度数
    -> );
mysql> insert into stu5 values (3.1415,12.96);
mysql> select * from stu5;
+------+------+
| num1 | num2 |
+------+------+
| 3.14 | 13.0 |
+------+------+

小数（定点数） decimal(M,D)
- 原理：将整数部分和小数部分分开存储
  decimal是变长的，大致是每9个数字用4个字节存储，整数和小数分开计算。M最大是65,D最大是30，默认是（10,2）。
  定点和浮点都支持无符号、显示宽度0填充。
字符型在数据库中没有字符串概念，只有字符，所以数据库中只能用单引号
| 数据类型 | 描述 |
| ---------- | ------------ |
| char | 定长字符，最大可以到255 |
| varchar | 可变长度字符，最大可以到65535 |
| tinytext | 2⁸–1 =255 |
| text | 2¹⁶–1 =65535 |
| mediumtext | 2²⁴–1 |
| longtext | 2³²–1 |

char(4)：存放4个字符，中英文一样。
varchar(L)实现变长机制，需要额外的空间来记录数据真实的长度。
L的理论长度是65535，但事实上达不到，因为有的字符是多字节字符，所以L达不到65535。
text系列的类型在表中存储的是地址，占用大小大约10个字节
一个记录的所有字段的总长度也不能超过65535个字节。
char是定长，var是变长
char最大值是255，varchar最大值是65535，具体要看字符编码
text系列在表中存储的是地址

枚举(enum) 从集合中选择一个值作为数据（单选）
枚举值是通过整形数字来管理的，第一个值是1，第二个值是2，以此类推，枚举值在数据库存储的是整形数字。
- 优点（1）、限制值
  （2）、节省空间
  （3）、运行速度快（整形比字符串运行速度快）

mysql> create table stu12(
    -> name varchar(20),
    -> sex enum('男','女','保密') # 枚举
    -> );
-- 插入的枚举值只能是枚举中提供的选项
mysql> insert into stu12 values ('tom','男');
-- 报错，只能插入男、女、保密
mysql> insert into stu12 values ('tom','不告诉你');
ERROR 1265 (01000): Data truncated for column 'sex' at row 1

集合(set) 从集合中选择一些值作为数据（多选）
- 集合和枚举一样，也为每个集合元素分配一个固定值，分配方式是从前往后按2的0、1、2、…次方，转换成二进制后只有一位是1，其他都是0。
- 已知集合类型占8个字节，那么集合中最多有多少选项有64个选项

'爬山','读书','游泳','烫头'
  1		2		4	8
mysql> select hobby+0 from stu13;
+---------+
| hobby+0 |
+---------+
|       1 |
|       5 |
|       5 |
+---------+
mysql> insert into stu13 values ('rose',15);
Query OK, 1 row affected (0.00 sec)

日期时间型
- datetime和date
- datetime格式：年-月-日小时:分钟:秒。支持的范围是'1000-01-01 00:00:00'到'9999-12-31 23:59:59'。
- timestamp（时间戳）
- datetime从1000到9999，而timestamp从1970年~2038年（原因在于timestamp占用4个字节，和整形的范围一样，2038年01月19日11:14:07以后的秒数就超过了4个字节的长度）
- year 只能表示1901~2155之间的年份，因为只占用1个字节，只能表示255个数
- time 可以表示时间，也可以表示时间间隔。范围是：-838:59:59~838:59:59

数据类型	描述
datetime	日期时间，占用8个字节
date	日期占用3个字节
time	时间占用3个字节
year	年份，占用1个字节
timestamp	时间戳，占用4个字节

Boolean
- MySQL不支持布尔型，true和false在数据库中对应的是1和0
- boolean型在MySQL中对应的是tinyint。
列属性
- 是否为空（null|not null） null表示字段值可以为null not null字段值不能为空
- 默认值（default）如果一个字段没有插入值，可以默认插入一个指定的值
- 自动增长（auto_increment）字段值从1开始，每次递增1，自动增长的值就不会有重复，适合用来生成唯一的id。在MySQL中只要是自动增长列必须是主键
- 主键（primary key）唯一标识表中的记录的一个或一组列称为主键。
  - 自动增长列的数据被删除，默认不再重复使用。truncate table删除数据后，再次插入从1开始
  - 自动增长列通过插入null值让其递增
  - 主键特点是不能重复不能为空
  - 只要是auto_increment必须是主键，但是主键不一定是auto_increment
  - 一个表只能有一个主键，但是一个主键可以有多个字段组成
    组合键

mysql> create table stu22(
    -> classname varchar(20),
    -> stuname varchar(20),
    -> primary key(classname,stuname)  -- 创建组合键
    -> );
Query OK, 0 rows affected (0.00 sec)

mysql> desc stu22;
+-----------+-------------+------+-----+---------+-------+
| Field     | Type        | Null | Key | Default | Extra |
+-----------+-------------+------+-----+---------+-------+
| classname | varchar(20) | NO   | PRI |         |       |
| stuname   | varchar(20) | NO   | PRI |         |       |
+-----------+-------------+------+-----+---------+-------+
2 rows in set (0.00 sec)

通过更改表添加主键

mysql> create table stu23(
    -> id int,
    -> name varchar(20)
    -> );
Query OK, 0 rows affected (0.05 sec)

-- 添加主键
mysql> alter table stu23 add primary key(id);
Query OK, 0 rows affected (0.09 sec)
Records: 0  Duplicates: 0  Warnings: 0

删除主键

mysql> alter table stu23 drop primary key;
Query OK, 0 rows affected (0.03 sec)
Records: 0  Duplicates: 0  Warnings: 0

插入数据

mysql> create table stu25(
    -> id tinyint unsigned auto_increment primary key,
    -> name varchar(20)
    -> );
Query OK, 0 rows affected (0.05 sec)

-- 插入数据
mysql> insert into stu25 values (3,'tom');   -- 可以直接插入数字
Query OK, 1 row affected (0.06 sec)

-- 自动增长列可以插入null,让列的值自动递增
mysql> insert into stu25 values (null,'berry');
Query OK, 1 row affected (0.00 sec)

唯一键（unique）
- 通过show create table 查看唯一键的名字
- 通过唯一键的名字删除唯一键
- alter table stu28 drop index name;
  | 键 | 区别 |
  | ------ | ---------------------------------------------------- |
  | 主键 | 1、不能重复，不能为空
  2、一个表只能有一个主键 |
  | 唯一键 | 1、不能重刻，可以为空
  2、一个表可以有多个唯一键 |

-- 创建表的时候创建唯一键 
mysql> create table stu26(
    -> id int auto_increment primary key,
    -> name varchar(20) unique    -- 唯一键
    -> );
Query OK, 0 rows affected (0.05 sec)

-- 方法二 
mysql> create table stu27(
    -> id int primary key,
    -> name varchar(20),
    -> unique(name)
    -> );
Query OK, 0 rows affected (0.05 sec)

多学一招：
unique 或 unique key 是一样的

通过修改表添加唯一键

-- 将name设为唯一键
mysql> alter table stu28 add unique(name);  

-- 将name,addr设为唯一键
mysql> alter table stu28 add unique(name),add unique(addr);
Query OK, 0 rows affected (0.00 sec)
Records: 0  Duplicates: 0  Warnings: 0

mysql> desc stu28;
+-------+-------------+------+-----+---------+-------+
| Field | Type        | Null | Key | Default | Extra |
+-------+-------------+------+-----+---------+-------+
| id    | int(11)     | NO   | PRI | NULL    |       |
| name  | varchar(20) | YES  | UNI | NULL    |       |
| addr  | varchar(20) | YES  | UNI | NULL    |       |
+-------+-------------+------+-----+---------+-------+
3 rows in set (0.02 sec)

备注（comment）
SQL注释

-- 单行注释
# 单行注释
多行注释  /*     */

主表和从表
1. 主表中没有的记录，从表不允许插入
2. 从表中有的记录，主表中不允许删除
3. 删除主表前，先删子表
外键（foreign key）
- 外键：从表中的公共字段

-- 创建表的时候添加外键
drop table if exists stuinfo;
create table stuinfo(
       id tinyint primary key,
       name varchar(20)
)engine=innodb;

drop table if exists stuscore;
create table stuscore(
       sid tinyint primary key,
       score tinyint unsigned,
       foreign key(sid) references stuinfo(id)   -- 创建外键
)engine=innodb;

-- 通过修改表的时候添加外键
语法：alter table 从表 add foreign key(公共字段) references 主表(公共字段)

drop table if exists stuinfo;
create table stuinfo(
       id tinyint primary key,
       name varchar(20)
)engine=innodb;

drop table if exists stuscore;
create table stuscore(
       sid tinyint primary key,
       score tinyint unsigned
)engine=innodb;

alter table stuscore add foreign key (sid) references stuinfo(id)

删除外键

-- 删除外键
mysql> alter table stuscore drop foreign key `stuscore_ibfk_1`;
Query OK, 0 rows affected (0.00 sec)
Records: 0  Duplicates: 0  Warnings: 0

三种外键操作

1、严格限制（参见主表和从表）

2、置空操作（set null）：如果主表记录删除，或关联字段更新，则从表外键字段被设置为null。

3、级联操作（cascade）：如果主表记录删除，则从表记录也被删除。主表更新，从表外键字段也更新。
语法：foreign key (外键字段) references 主表名 (关联字段) [主表记录删除时的动作] [主表记录更新时的动作]。

一般说删除时置空，更新时级联。

drop table if exists stuinfo;
create table stuinfo(
       id tinyint primary key comment '学号，主键',
       name varchar(20) comment '姓名'
)engine=innodb;

drop table if exists stuscore;
create table stuscore(
       id int auto_increment primary key comment '主键',
       sid tinyint comment '学号，外键',
       score tinyint unsigned comment '成绩',
       foreign key(sid) references stuinfo(id) on delete set null on update cascade
)engine=innodb;

置空、级联操作中外键不能是从表的主键

phpstudy中MySQL默认不是严格模式，将MySQL设置成严格模式

打开my.ini，在sql-mode的值中，添加STRICT_TRANS_TABLES

sql-mode="NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION,STRICT_TRANS_TABLES"

实体之间的关系
- 一对多（1：N）多对一（N：1）
- 一对一（1:1）
- 多对多（N：M）
数据库设计
1. 收集信息：与该系统有关人员进行交流、坐谈，充分理解数据库需要完成的任务
2. 标识对象（实体－Entity）：标识数据库要管理的关键对象或实体
3. 标识每个实体的属性（Attribute）
4. 标识对象之间的关系（Relationship）
5. 将模型转换成数据库
6. 规范化
绘制 E-R（Entity－Relationship）实体关系图）
将E-R图转成表
数据规范化
- 第一范式：确保每列原则性
- 第二范式：非键字段必须依赖于键字段
- 第三范式：消除传递依赖
- 反3NF 范式越高，数据冗余越少，但是效率有时就越地下，为了提高运行效率，可以适当让数据冗余。
查询语句

语法：select [选项] 列名 [from 表名] [where 条件]  [group by 分组] [order by 排序][having 条件] [limit 限制]

字段表达式

-- 可以直接输出内容
mysql> select '锄禾日当午';
+------------+
| 锄禾日当午          |
+------------+
| 锄禾日当午          |
+------------+
-- 输出表达式
mysql> select 10*10;
+-------+
| 10*10 |
+-------+
|   100 |
+-------+
mysql> select ch,math,ch+math from stu;
+------+------+---------+
| ch   | math | ch+math |
+------+------+---------+
|   80 | NULL |    NULL |
|   77 |   76 |     153 |
|   55 |   82 |     137 |
| NULL |   74 |    NULL |

-- 表达式部分可以用函数
mysql> select rand();
+--------------------+
| rand()             |
+--------------------+
| 0.6669325378415478 |
+--------------------+
1 row in set (0.00 sec)

通过as给字段取别名

mysql> select '锄禾日当午' as '标题';   -- 取别名
+------------+
| 标题           |
+------------+
| 锄禾日当午          |
+------------+

mysql> select ch,math,ch+math as '总分' from stu;
+------+------+------+
| ch   | math | 总分    |
+------+------+------+
|   80 | NULL | NULL |
|   77 |   76 |  153 |
|   55 |   82 |  137 |
| NULL |   74 | NULL |

-- 多学一招：as可以省略
mysql> select ch,math,ch+math '总分' from stu;
+------+------+------+
| ch   | math | 总分    |
+------+------+------+
|   80 | NULL | NULL |
|   77 |   76 |  153 |
|   55 |   82 |  137 |
| NULL |   74 | NULL |

from子句
- from：来自，from后面跟的是数据源。数据源可以有多个。返回笛卡尔积。
  插入测试表

create table t1(
       str char(2)
);
insert into t1 values ('aa'),('bb');
create table t2(
       num int
);
insert into t2 values (10),(20);

测试

-- from子句
mysql> select * from t1;
+------+
| str  |
+------+
| aa   |
| bb   |
+------+
2 rows in set (0.00 sec)

-- 多个数据源,返回笛卡尔积
mysql> select * from t1,t2;
+------+------+
| str  | num  |
+------+------+
| aa   |   10 |
| bb   |   10 |
| aa   |   20 |
| bb   |   20 |
+------+------+
4 rows in set (0.00 sec)

dual表是一个伪表。在有些特定情况下，没有具体的表的参与，但是为了保证select语句的完整又必须要一个表名，这时候就使用伪表。

mysql> select 10*10 as 结果 from dual;
+------+
| 结果     |
+------+
|  100 |
+------+
1 row in set (0.00 sec)

where子句

where后面跟的是条件，在数据源中进行筛选。返回条件为真记录

MySQL支持的运算符

-- 比较运算符
>	大于
<	小于
>=	大于等于
<=	小于等于
=	等于
!=	不等于
-- 逻辑运算符
and  与
or   或
not  非
-- 其他
in | not in	 					 字段的值在枚举范围内
between…and|not between…and      字段的值在数字范围内
is null | is not null			 字段的值不为空

group by 【分组查询】将查询的结果分组，分组查询目的在于统计数据。

-- 查询男生和女生的各自语文平均分
mysql> select stusex,avg(ch) '平均分' from stu group by stusex;
+--------+---------+
| stusex | 平均分       |
+--------+---------+
| 女      | 72.2500 |
| 男       | 77.0000 |
+--------+---------+
2 rows in set (0.00 sec)

-- 查询男生和女生各自多少人
mysql> select stusex,count(*) 人数 from stu group by stusex;
+--------+------+
| stusex | 人数     |
+--------+------+
| 女      |    4 |
| 男       |    5 |
+--------+------+
2 rows in set (0.00 sec)

-- 查询每个地区多少人
mysql> select stuaddress,count(*) from stu group by stuaddress;
+------------+----------+
| stuaddress | count(*) |
+------------+----------+
| 上海          |        1 |
| 北京           |        3 |
| 天津           |        2 |
| 河北          |        2 |
| 河南           |        1 |
+------------+----------+
5 rows in set (0.00 sec)

-- 每个地区的数学平均分
mysql> select stuaddress,avg(math) from stu group by stuaddress;
+------------+-----------+
| stuaddress | avg(math) |
+------------+-----------+
| 上海          |   76.0000 |
| 北京           |   74.5000 |
| 天津           |   83.0000 |
| 河北          |   72.0000 |
| 河南           |   56.0000 |
+------------+-----------+
5 rows in set (0.00 sec)

通过group_concat()函数将同一组的值连接起来显示

mysql> select group_concat(stuname),stusex,avg(math) from stu group by stusex;
+-------------------------------------+--------+-----------+
| group_concat(stuname)               | stusex | avg(math) |
+-------------------------------------+--------+-----------+
| 李斯文,诸葛丽丽,梅超风,Tabm             | 女      |   70.5000 |
| 张秋丽,李文才,欧阳俊雄,争青小子,Tom      | 男       |   77.2500 |
+-------------------------------------+--------+-----------+
2 rows in set (0.00 sec)

多列分组

mysql> select stuaddress,stusex,avg(math) from stu group by stuaddress,stusex;
+------------+--------+-----------+
| stuaddress | stusex | avg(math) |
+------------+--------+-----------+
| 上海          | 男       |   76.0000 |
| 北京           | 女      |   82.0000 |
| 北京           | 男       |   67.0000 |
| 天津           | 男       |   83.0000 |
| 河北          | 女      |   72.0000 |
| 河南           | 女      |   56.0000 |
+------------+--------+-----------+
6 rows in set (0.00 sec)

order by排序

asc：升序【默认】

desc：降序

-- 按年龄的升序排列
mysql> select * from stu order by stuage asc;
mysql>  select * from stu order by stuage;       -- 默认是升序

-- 按总分降序
mysql> select *,ch+math '总分' from stu order by ch+math desc;

having条件是在结果集上进行条件筛选

mysql> select * from stu having stusex='女';

having和where的区别：

where是对原始数据进行筛选，having是对记录集进行筛选。

limit
- limit [起始位置]，显示长度
- limit在update和delete语句中也是可以使用的。
查询语句中的选项
- all：显示所有数据【默认】
- distinct：去除结果集中重复的数据
聚合函数
1. sum() 求和
2. avg() 求平均值
3. max() 求最大值
4. min() 求最小值
5. count() 求记录数
模糊查询
- 通配符
  1. _ [下划线] 表示任意一个字符
  2. % 表示任意字符
- 模糊查询（like）
union（联合）语法：select 语句 union [选项] select 语句 union [选项] select 语句
- 将多个select语句结果集纵向联合起来
- union的选项有两个
  all：显示所有数据
  distinct：去除重复的数据【默认】
```
mysql> select stuname from stu union all select name from emp;
```
- union的注意事项
  union两边的select语句的字段个数必须一致
  union两边的select语句的字段名可以不一致，最终按第一个select语句的字段名。
  union两边的select语句中的数据类型可以不一致。
内连接返回两个表的公共记录

-- 语法一
select * from 表1 inner join 表2 on 表1.公共字段=表2.公共字段
-- 语法二
select * from 表1，表2 where 表1.公共字段=表2.公共字段
-- 内连接中inner可以省略
-- 表连接越多，效率越低

左外连接

select * from 表1 left join 表2 on 表1.公共字段=表2.公共字段

右外连接

select * from 表1 right join 表2 on 表1.公共字段=表2.公共字段

交叉连接返回笛卡尔积

select * from 表1 cross join 表2

自然连接自动判断条件连接，判断的条件是依据同名字段
- 自然内连接（natural join）
- 自然左外连接（natural left join）
- 自然右外连接（natural right join）
using用来指定连接字段
- using的结果也会对公共字段进行优化，优化的规则和自然连接是一样的；
子查询
- select * from 表1 where （子查询）
- 外面的查询称为父查询
- 子查询为父查询提供查询条件
标量子查询子查询返回的值是一个
列子查询子查询返回的结果是一列
- 如果子查询的结果返回多条记录，不能使用等于，用in或not in
行子查询子查询返回的结果是多个字段组成
表子查询将子查询的结果作为表
- from后面跟的是数据源，如果将子查询当成表来看，必须给结果集取别名。
exists子查询提高查询效率
视图
- 1、筛选表中的行
2、防止未经许可的用户访问敏感数据

3、隐藏数据表的结构

4、降低数据表的复杂程度

-- 创建视图
create view 视图名
as 
	select 语句；
	
-- 查询视图
select 列名 from 视图

修改视图

alter view 视图名
as
	select 语句

删除视图

drop view [if exists ] 视图1，视图,...

查看视图信息
- show tables; -- 显示所有的表和视图
- 精确查找视图（视图信息存储在information_schema下的views表中）
- select table_name from information_schema.views;
- show table status\G; -- 查询所有表和视图的详细状态信息
- show table status where comment='view'\G -- 只查找视图信息
- desc view1; 查询视图的结构
- show create view view1\G 查询创建视图的语法
视图算法
- 1、merge：合并算法（将视图语句和外层语句合并后再执行）
  2、temptable:临时表算法（将视图作为一个临时表来执行）
  3、undefined：未定义算法（用哪种算法有MySQL决定，这是默认算法，视图一般会选merge算法）
事务

开启事务

start transaction  或 begin [work]

提交事务

commit

回滚事务

rollback

索引加快查询速度
创建索引
- 1、主键索引：主要创建了主键就会自动的创建主键索引
  2、唯一索引：创建唯一键就创建了唯一索引
普通索引
删除索引 drop index 索引名 on 表名
时间类 unix_timestamp()
格式化时间戳 select from_unixtime(unix_timestamp());
加密函数 md5() sha()
预处理预编译一次，可以多次执行

预处理语句：prepare 预处理名字 from ‘sql语句’
执行预处理：execute 预处理名字 [using 变量]

1、MySQL中变量以@开头
2、通过set给变量赋值
3、？是位置占位符

posted on 2024-01-07 17:33 xirang熙攘阅读(53) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Mysql数据库

· 前端javascript基础

· Mysql基本部分笔记

· 初识MySQL

· mysql详细学习笔记

阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！

st779779

公告

搜索

常用链接

我的标签

合集