前端基础知识

HTML基础

基本构成


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>显均学苑</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
    ......
</body>
</html>

对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。

基本标签


xxxxxxxxxx
<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的标题</h6>
 
<p>这是一个段落。</p>
<br/> （换行）
<hr> （水平线）
<!-- 这是注释 -->
&nbsp; (英文半角下的一个空格)

链接a

链接的地址在 href 属性中指定


xxxxxxxxxx
普通的链接：<a href="http://www.example.com/">链接文本</a>
图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a>
书签：
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>

title 鼠标悬停在超链接上的时候，显示的文字。
去掉下划线 text-decoration:none;
去掉颜色 color:#333;

图片img


xxxxxxxxxx
<img src="xxxx.jpg" alt="图片加载失败时的文本"  width="100" height="60"  />

title 添加描述性文字
alt 不到图像或图片加载失败，提供的文字说明。
loading 加载方式
- eager立即加载（默认值）
- lazy 延迟加载图像，直到它和视口接近到一个计算得到的距离，由浏览器定义。
align 指定图像相对于周围上下文的对齐方式。
注意不同浏览器和同一版本浏览器的不同版本对align的处理方式不一致，如下为Chrome浏览器处理方式。
- left：左浮动，等价于float: left与vertical-align: top
  注意：float浮动使元素呈现类似块级元素，而vertical-align对行内元素生效，因此vertical-align: top实际不生效
- right：右浮动，等价于float: right与vertical-align: top
- middle：中央对齐，等价于vertical-align: -moz-middle-with-baseline
- top：顶部对齐，等价于vertical-align: top
- bottom：底部对齐，等价于vertical-align: baseline
border 指定图像周围边框宽度。等价于border: 2px solid #000
hspace/vspace
hspace指定图片左右外边距。`hspace=10等价于margin: 0 10px
vspace指定图片上下外边距。`vspace=10等价于margin: 10px

表单form


xxxxxxxxxx
<form action="URL" method="post/get">
    <input type="text" name="email" size="40" maxlength="50">
    <input type="password">
    <input type="checkbox" checked="checked" name="a">
    <input type="radio" checked="checked" name="b">
    <input type="submit" value="提交">
    <input type="reset" value="重置">
    <input type="hidden">
    <select>
        <option>苹果</option>
        <option selected="selected">香蕉</option>
        <option>樱桃</option>
    </select>
    <textarea name="comment" rows="60" cols="20"></textarea>
</form>

<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

按钮button

定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本）。


xxxxxxxxxx
<button>登录</button>

表格table


xxxxxxxxxx
<table border="1">
  <caption>表格标题</caption>
  <tr>
    <th>表格标题</th>
    <th>表格标题</th>
  </tr>
  <tr>
    <td>表格数据</td>
    <td>表格数据</td>
  </tr>
</table>

单元格合并

rowspan 行数合并, 纵向合并
colspan 列数合并, 横向合并


xxxxxxxxxx
<tr><th>姓名</th><th colspan="2">电话</th></tr>

table属性

table 的属性如：border、width、height 等，建议写在 css 样式中。<caption> 元素可以设置表格的标题。

border 边框
cellspacing 单元格键的缝隙
cellpadding 单元格中文本距离单元格边框的距离


xxxxxxxxxx
<table border="1" cellpadding="10">...</table>

thead、tbody 、tfoot

<thead><tbody><tfoot> 把表格分成多个逻辑区域，以便之后可以用 CSS 更好的控制表现。

thead 元素用于对 HTML 表格中的表头内容进行分组
tbody 元素用于对 HTML 表格中的主体内容进行分组
tfoot 元素用于组合 HTML 表格中的页脚（脚注或表注）内容


xxxxxxxxxx
<!DOCTYPE HTML>
<html>
<head>
  <style type="text/css"> 
    thead {color:green} 
    tbody {color:blue;height:50px} 
    tfoot {color:red} 
  </style>
</head>
<body>
    <table border="1">
        <thead>
            <tr><th>Month</th><th>Savings</th></tr>
        </thead>
        <tbody>
            <tr><td>January</td><td>$100</td></tr>
            <tr><td>February</td><td>$80</td></tr>
        </tbody>
        <tfoot>
            <tr><td>Sum</td><td>$180</td></tr>
        </tfoot>
    </table>
</body>
</html>

有序列表、无序列表、自定义列表


xxxxxxxxxx
<!--无序列表-->
<ul>
    <li>项目</li>
    <li>项目</li>
</ul>
<!--有序列表-->
<ol>
    <li>第一项</li>
    <li>第二项</li>
</ol>
<!--自定义列表-->
<dl>
  <dt>项目 1</dt>
    <dd>描述项目 1</dd>
  <dt>项目 2</dt>
    <dd>描述项目 2</dd>
</dl>

框架


xxxxxxxxxx
<iframe src="demo_iframe.htm"></iframe>

文本格式化


xxxxxxxxxx
<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd> 
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
 
<abbr> （缩写）
<address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<del> （删除的文本）
<ins> （插入的文本）
<sub> （下标文本）
<sup> （上标文本）

样式、区块


xxxxxxxxxx
<style type="text/css">
    h1 {color:red;}
    p {color:blue;}
</style>
<div>文档中的块级元素</div>
<span>文档中的内联元素</span>

HTML5中input新类型

input 类型是 HTML5 中的新类型：color、date、datetime、datetime-local、month、week、time、email、number、range、search、tel 和 url。

语法：<input type="value">

值	描述
button	定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本）。
checkbox	定义复选框。
color	定义拾色器。
date	定义 date 控件（包括年、月、日，不包括时间）。
datetime	定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区）。
datetime-local	定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）。
email	定义用于 e-mail 地址的字段。
file	定义文件选择字段和 "浏览..." 按钮，供文件上传。
hidden	定义隐藏输入字段。
image	定义图像作为提交按钮。
month	定义 month 和 year 控件（不带时区）。
number	定义用于输入数字的字段。
password	定义密码字段（字段中的字符会被遮蔽）。
radio	定义单选按钮。
range	定义用于精确值不重要的输入数字的控件（比如 slider 控件）。
reset	定义重置按钮（重置所有的表单值为默认值）。
search	定义用于输入搜索字符串的文本字段。
submit	定义提交按钮。
tel	定义用于输入电话号码的字段。
text	默认。定义一个单行的文本字段（默认宽度为 20 个字符）。
time	定义用于输入时间的控件（不带时区）。
url	定义用于输入 URL 的字段。
week	定义 week 和 year 控件（不带时区）。

HTML其它

细表格线的2种方法

通过tabel属性设置


xxxxxxxxxx
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>test1</title>
</head>
<body>
  <table  width="500px" height="300px" align="center" cellpadding="0" cellspacing="1" bgcolor="black">
    <tr align="right" bgcolor="white">
        <td width="100px" height="50px">刘德华</td>
        <td align="center">张学友</td>
    </tr>
    <tr valign="top" bgcolor="white">
        <td>郭富城</td>
        <td valign="bottom">黎明</td>
    </tr>
  </table>
</body>
</html>

通过CSS设置（常见）


xxxxxxxxxx
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test2</title>
<style>
    table{
        border-collapse:collapse;
        border-spacing:0;
        border:1px solid;
      }
    td{
        border:1px solid;
       }
</style>
</head>
 
<body>
    <table   width="500px" height="300px" align="center">
        <tr align="right">
            <td width="100px" height="50px">刘德华</td>
            <td align="center">张学友</td>
        </tr>
        <tr valign="top">
            <td>郭富城</td>
            <td valign="bottom">黎明</td>
        </tr>
    </table>
</body>
</html>

重点：border-collapse:collapse;

自适应手机屏幕meta标签

支持汉字和自适应屏幕


xxxxxxxxxx
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
</head>

自动获取焦点

该input标签后添加autofocus="autofocus"即可autofocus="autofocus"


xxxxxxxxxx
<a href="http://www.web.com">返回首页</a>
<a href="/">返回首页</a>
<a href="javascript:history.go(-1)">返回上一页</a>

设置网站ico图标

制作一个尺寸16x16大小的图;

方法1
把favicon.ico文件上传到网站的根目录下的Public/img/favicon.ico，并把网站的首页文件的源代码之间加上一句：
方法2：
直接在站点根目录下放入名为：favicon.ico 的图标文件（必须要为 ICO 文件，BMP 及其他格式的图片文件不行）。还有将 favicon.ico 中的 favicon 命名为你网站域名的名称也可以。

=====================================END===============================

CSS基础

CSS引入方式

1. 行内样式

在HTML元素中使用style属性引入CSS样式。实际在写页面时不提倡使用，在测试的时候可以使用。


xxxxxxxxxx
<h1 style="color:blue;text-align:center;">这是行内样式</h1>

2. 内部样式表

在HTML文档头部 <head> 区域使用<style> 元素来包含CSS。


xxxxxxxxxx
<head>
   <style type="text/css">
      h3{
            color:red;
         }
   </style>
</head>

3. 外部样式表

CSS代码保存在扩展名为.css的样式表中 HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。

（1）链接式（推荐）


xxxxxxxxxx
<link type="text/css" rel="styleSheet" href="CSS文件路径" />

（2）导入式


xxxxxxxxxx
 ```
 <style type="text/css">
   @import url("css文件路径");
 </style>

实例：


xxxxxxxxxx
<head>
   <meta charset="utf-8" />
   <title>实例</title>
   <!--链接式:推荐使用-->
   <link type="text/css" rel="stylesheet" href="css/style.css" /> 
   <!--导入式-->
   <style type="text/css">
     @import url("css/style.css");
   </style>
 </head>

（3）链接式和导入式的区别


xxxxxxxxxx
  * <link>
  1、属于XHTML
  2、优先加载CSS文件到页面
  * @import
  1、属于CSS2.1
  2、先加载HTML结构再加载CSS文件。

4. 样式优先级

行内样式>内部样式>外部样式(后两者是就近原则)

CSS单位

CSS 有几种表示长度的不同单位。
许多 CSS 属性接受“长度”值，诸如 width、margin、padding、font-size 等。
长度是一个后面跟着长度单位的数字，诸如 10px、2em 等。
长度单位有两种类型：绝对单位和相对单位。
- px 像素 (1px = 1/96th of 1in)
- em 相对于元素的字体大小（font-size）（2em 表示当前字体大小的 2 倍）
- rem 相对于根元素的字体大小（font-size）

像素（px）是相对于观看设备的。对于低 dpi 的设备，1px 是显示器的一个设备像素（点）。对于打印机和高分辨率屏幕，1px 表示多个设备像素。

元素显示模式转换


xxxxxxxxxx
display:bock;           /* 块级元素 */
display:inline-bock;    /* 行内块   */
display:inline;         /* 行内元素 */

如果 display 设置为 none，则该框及其所有内容就不再显示，不占用文档中的空间。

CSS选择器

标签选择器


xxxxxxxxxx
p { color:red; text-align: center; }
h1{ color:blue; }

类选择器


xxxxxxxxxx
<div class="title">这是类选择器</div>
.title{ color:red; }

类名可以由数字、字典、下划线和横线，但不能以数字开头。

ID选择器（不能重复）


xxxxxxxxxx
<div id="title">这是ID选择器</div>
#title{ color:red; }

分组（并集）选择器

选择器之间用逗号隔开；表示同时选中多个选择器对应的元素，


xxxxxxxxxx
h1,p,span{ color:red; }

复合（子集）选择器

选择器之间不能有空格，要紧挨在一起


xxxxxxxxxx
<span class="title">子集选择器</span>
span.title{ color:blue; }

属性选择

根据元素中的属性或属性值来选取指定元素。


xxxxxxxxxx
[属性名]选取含有指定属性的元素
[属性名=“属性值”]选取含指定属性值的元素
[属性名^=``"属性值"``] 选取属性值以指定内容开头的元素
[属性名$=``"属性值"``] 选取属性值以指定内容结尾的元素
[属性名*=``"属性值"``] 选取属性值包含指定内容的元素


xxxxxxxxxx
<div>
    <div name="user_one">1</div>
    <div name="user_two">2</div>
    <div name="user_three">3</div>
</div>

div[name='user_one']{ color:blue; }

伪类选择器

伪类表示元素的一种特殊状态

:hover 　　移入时元素的状态
:visited　　已被访问过后的元素的状态
:active　　被点击时元素的状态

通配选择器

作用：用来选中页面中所有的元素

语法：*{ }


xxxxxxxxxx
*[title] { color:red; }   /* 把包含标题为title的所有元素变为红色 */

兄弟元素选择器

+相邻选择器

作用：选中一个元素后紧挨着的指定的兄弟元素

语法：前一个+后一个（作用在后一个）

~兄弟选择器

作用：选中后边所有的制定兄弟元素

语法：前一个~后边所有


xxxxxxxxxx
<div>
    <p>1</p>
    <p>2</p>
    <span>SPAN标签</span>
    <p>3</p>
    <p>4</p>
    <p>5</p>
</div>


xxxxxxxxxx
span+p{ color:blue; }   /* 作用在3上,如果span后边第一个不是p标签，则选择器不起作用。 */
span~p{ color:red; }    /* 作用在3、4、5上*/

后代（包含）选择器

作用：选中指定元素的指定后代元素

语法：祖先元素后代元素{ }


xxxxxxxxxx
div span{ color:blue; }

子元素选择器

作用：选中指定父元素的子元素

语法：父元素 > 子元素


xxxxxxxxxx
ul>li{ color:pink; }

序选择器


xxxxxxxxxx
/* 选择第一个li */
.list li:first-child{
     color: aqua;
 }

/* nth-child(3) 序号从1开始计数*/
.list li:nth-child(3){
     color: brown;
 }

/* nth-of-type(5) 序号从1开始计数*/
.list li:nth-of-type(5){
     color: blue;
 }

/* 选择最后一个li */
.list li:last-child{
     color: blueviolet;
 }

:nth-child() 选择器
匹配属于其父元素的第 N 个子元素，不论元素的类型，n 可以是数字、关键词或公式。
:nth-of-type(n)
匹配属于父元素的特定类型的第N个子元素，元素类型没有限制；n可以是数字、关键词或公式。
odd 、 even （选择奇数、偶数）

伪元素

设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容

::first-line

::first-line 伪元素用于向文本的首行添加特殊样式。

::first-line 伪元素只能应用于块级元素。


xxxxxxxxxx
p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

::first-letter

::first-letter 伪元素用于向文本的首字母添加特殊样式。


xxxxxxxxxx
p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

::before

::before 伪元素可用于在元素内容之前插入一些内容。

<h1> 元素的内容之前插入一幅图像


xxxxxxxxxx
h1::before {
  content: url(smiley.gif);
}

::after

::after 伪元素可用于在元素内容之后插入一些内容。

::selection

::selection 伪元素匹配用户选择的元素部分。

以下 CSS 属性可以应用于 ::selection：

color
background
cursor

outline

所选文本在黄色背景上显示为红色


xxxxxxxxxx
::selection {
  color: red; 
  background: yellow;
}

CSS定位和浮动

div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。

定位机制

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。

行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

定位position

static 元素框正常生成。

relative 相对定位

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。


xxxxxxxxxx
.myleft{
    position:relative;
    left:20px
}

absolute 绝对定位

元素框从文档流完全删除，并相对于其包含块定位。

fixed 固定定位
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

注意：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

浮动float

在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

left 元素向左浮动
right 元素向右浮动
none 默认值。元素不浮动，并会显示在其在文本中出现的位置
inline 规定应该从父元素继承 float 属性的值

CSS其它

ul li去掉圆点


xxxxxxxxxx
ul li{list-style:none;}或者{list-style-type:none;}

`<a>`标签去掉下划线


xxxxxxxxxx
a{text-decoration:none; color:#333; }    /*去掉下划线和颜色*/ 
a:link{text-decoration:none;   }         /* 指正常的未被访问过的链接*/
a:visited{text-decoration:none; }        /*指已经访问过的链接*/ 
a:hover{text-decoration:none;  }         /*指鼠标在链接*/
a:active{text-decoration:none;  }       /* 指正在点的链接*/

文字大小、加粗、居中等

大小、加粗


xxxxxxxxxx
font-size:20px;
font-weight: 700;
letter-spacing:2px;
letter-spacing:-2px;  //字间距

居中

(1) inline-block


xxxxxxxxxx
text-align:center; line-height:50px;

(2) block


xxxxxxxxxx
margin:auto;

input属性

1.常用样式


xxxxxxxxxx
input{ 
    border:0.5px solid #378888;
    width:300px;height:30px;
    border-radius:10px;
    border: none; 可以取消元素的边框
    outline: none; 可以取消元素被点击时显示的高亮颜色
}


xxxxxxxxxx
$("#test").attr({"disabled": "disabled"});  //禁用input按钮
$("#test").removeAttr('disabled');          //启用input按钮

2.复选框改变大小还能改变他的样式


xxxxxxxxxx
input[type="checkbox"]{
  display: inline-block; // 设置为 行内块 就能改变大小了
  width: 30px;
  height: 30px;
  -webkit-appearance: none;  // 改变元素外观
  -moz-appearance: none; // 改变元素外观
  appearance: none; // 改变元素外观
  background: #fff;
  border-radius: 3px;
  border: 1px solid #888;
}
input[type="checkbox"]:checked{ // 复选框选中的样式 使用带有对号的 背景图片打底
  background: url("images/checkbox-checked.png") no-repeat;
  background-size: 100% 100%;
  border: none;
}

position属性，定位底部


xxxxxxxxxx
position: relative;bottom: 0;width:100%;

position 属性规定应用于元素的定位方法的类型

有五个不同的位置值：

static （静态）
静态定位的元素不受 top、bottom、left 和 right 属性的影响。
元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位。
relative
元素相对于其正常位置进行定位。
设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。
fixed
元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。
固定定位的元素不会在页面中通常应放置的位置上留出空隙。
absolute
元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。
然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。
注意：“被定位的”元素是其位置除 static 以外的任何元素。
sticky
元素根据用户的滚动位置进行定位。
粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。
注意：Internet Explorer、Edge 15 以及更早的版本不支持粘性定位。 Safari 需要 -webkit- 前缀（请参见下面的实例）。您还必须至少指定 top、right、bottom 或 left 之一，以便粘性定位起作用。
在此例中，在到达其滚动位置时，sticky 元素将停留在页面顶部（top: 0）。

背景图片透明


xxxxxxxxxx
.bodystyle::before{
                content: " ";
                position: fixed;
                z-index: -1;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                background-image: url(bglog.png); 
                background-repeat: repeat;
                opacity: 0.1;
            }

button禁用和开启


xxxxxxxxxx
$("#button").attr("disabled","disabled"); 禁用
$("#button").removeAttr("disabled");    开启

兄弟姐妹


xxxxxxxxxx
$('#id').siblings() 当前元素所有的兄弟节点
$('#id').prev() 当前元素前一个兄弟节点
$('#id').prevaAll() 当前元素之前所有的兄弟节点
$('#id').next() 当前元素之后内第一个兄弟节点
$('#id').nextAll() 当前元素之后所有的兄弟节点
parent() 方法返回被选元素的直接父元素
parents() 方法返回被选元素的所有祖先元素。
children(expr).返回所有子节点，这个方法只会返回直接的孩子节点，不会返回所有的子孙节点
find(expr)

children()与find()

children(selector) 方法是返回匹配元素集合中每个元素的所有子元素（仅儿子辈），参数可选

find(selector)方法是返回匹配元素集合中每个元素的后代。参数是必选的

单选和多选的设置选中

单选项的设置（选中）


xxxxxxxxxx
$(this).siblings(".option").children("input").prop("checked",false); //清除其它选项
            $(this).find("input").prop("checked",true)

多选项设置（选中）

选中与取消


xxxxxxxxxx
if($tmp.is(":checked")){$tmp.prop("checked",false);}else{$tmp.prop("checked",true);};


xxxxxxxxxx
方法一（建议）：
if ($("#checkbox-id").get(0).checked) {
    // do something
}

if ($("#checkbox-id")[0].checked) {
    // do something
}

方法二（建议）：
if($('#checkbox-id').is(':checked')) {
    // do something
}
方法三（可能无效）：
if ($('#checkbox-id').attr('checked')) {
    // do something
}

方法四：
if ($('#checkbox-id').prop('checked')) {
    // do something
}

登录框居中


xxxxxxxxxx
.login{
    display:block;
    position: absolute;
    transform:translate(-50%,-61.8%);
    left:50%;
    top:50%;
    width:450px;
    border-radius:8px;
    background:rgb(255,255,255,0.9);    // 白色背景，不透明90% 
}


xxxxxxxxxx
{
width:450px;
height:400px;
position : fixed/absolute;
left : 50%;
top : 50%;
transform: translate(-50%, -50%);
}

=========================END===============================

JQUERY基础

引入和使用

在 HTML5 中，不必在 <script>标签中使用 type="text/javascript"。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言！

1. 外部引入

（1）站外引用


xxxxxxxxxx
// 样式
<script src="网址路径/文件名.js"></script>
// 引用百度CDN
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">

（2）下载 jQuery到本地

Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）

这两个版本都可以从官网 jQuery.com 下载。


xxxxxxxxxx
<head>
    <script src="./js/jquery-3.6.0.min.js"></script>
</head>

2. 内部引入


xxxxxxxxxx
<script type="text/javascript">自己的js代码</script>

独立文件中使用 jQuery 函数

如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。


xxxxxxxxxx
<script src="./js/my_jquery_functions.js"></script>

3. 行内引入


xxxxxxxxxx
<input type="button" value="行内引入方式" onclick="javascript:alert('我是行内引入方式');" />

语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(*selector*).*action*()


xxxxxxxxxx
$(this).hide() // 隐藏当前元素
$("p").hide()  // 隐藏所有 <p> 元素
$("#XXX").click(function(){ // js代码  }) // ID为XXX元素,点击事件

jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。

选择器

基本选择器

选择器	语法	作用
id选择器	$("#test")	根据id匹配一个元素
class类选择器	$(".test")	根据类class匹配元素
标签选择器	$("p")	根据元素名称（标签）匹配所有元素
所有元素	$("*")	匹配所有元素
并集	$("A,B")	A元素和B元素
交集	$("AB")	A元素中的B元素


xxxxxxxxxx
$("p").hide();
$("button").click(function(){ // 代码 });
$("#test").hide()
$(".test").hide()
*{color:#CCC;}

层级选择器

选择器	语法	描述
后代选择	$(A B)	A下的所有B（包括B的子级）
子选择	$(A>B)	A下的所有B（不包括B的子级）
兄弟	$(A+B)	A相邻的下一个B
兄弟	$(A~B)	A相邻的后面的所有B
兄弟	$(A).siblings()	A所有的兄弟

后代（元素之间空格）

A下的所有B（包括B的子级），可以用find()代替它。


xxxxxxxxxx
$(A B)
$(“ul li”)相当于$(“ul”).find(“li);

子选择器（>）

指定元素的直接后代元素，即子元素，可以用children()代替它。。


xxxxxxxxxx
$(A>B)
$(“body>div”)相当于$(“body”).children(“div”);

相邻兄弟选择器（+）

紧接在A元素后的B元素,可以用next()替代它。


xxxxxxxxxx
$(A+B)
$(“a+ul”)相当于$(“a”).next();

一般兄弟选择器（~）

一般兄弟选择器 $("A ~ B")，选取A元素之后的所有兄弟元素,可以用nextAll()代替它。


xxxxxxxxxx
$(A~B)
$(“a~span”)相当于$(“a”).nextAll("span");

基本过滤选择器

以 “:” 开头进行过滤

语法	描述	例子
first()或 :first	选取第一个元素	$("#test:first").css("color","red");
last()或 :last	选取最后一个元素	$("#test:last").css("color","red");
:not(selector)	不包括指定内容的元素	$("p:not('#one')").css("color","red");
:even	选取所有索引为偶数的元素，索引从0开始	$("tr:even").css("color","red");
:odd	选取所有索引为奇数的元素，索引从0开始	$("tr:odd").css("color","red");
:eq(index)	选取索引等于index的元素，索引从0开始	$("li:eq(2)").css("color","red");
:gt(index)	选取索引大于index的元素，索引从0开始
:lt(index)	选取索引小于index的元素，索引从0开始
:header	选取索引的标题标签

属性选择器

语法	描述
Element[attribute]	选取拥有此属性的选择器
Element[attribute=value]	选取指定属性值为value的元素
Element[attribute!=value]	选取指定属性值不等于value的元素
Element[attribute^=value]	选取指定属性值以value开始的元素
Element[attribute$=value]	选取指定属性值以value结束的元素
Element[attribute*=value]	选取指定属性值中含有value的元素

表单选择器

:input 选择由input生成的表单控件 :text 选择单行文本框 :password 选择密码框 :radio 单选按钮 :checkbox 复选按钮

表单对象属性过滤选择器

选择器	语法
可用元素	$("A:enabled")
不可用元素	$("A:disabled")
单选、复选框被选中的元素	$("A:checked")
下拉框被选中的元素	$("A:selected")

子元素选择器

:first-child/:last-child
:nth-child()/:nth-last-child()
:only-child

实例

元素元素

语法	描述
$("*")	选取所有元素
$(this)	选取当前 HTML 元素
$("p.intro")	选取 class 为 intro 的元素
$("p:first")	选取第一个元素
$("ul li:first")	选取第一个元素的第一个元素
$("ul li:first-child")	选取每个元素的第一个元素
$("[href]")	选取带有 href 属性的元素
$("a[target='_blank']")	选取所有 target 属性值等于 "_blank" 的元素
$("a[target!='_blank']")	选取所有 target 属性值不等于 "_blank" 的元素
$(":button")	选取所有 type="button" 的元素和
$("tr:even")	选取偶数位置的
$("tr:odd")	选取奇数位置的
$("h1,div,p")	所有、和元素

常用事件

鼠标事件	键盘事件	表单事件	文档/窗口事件
click 单击	keypress	submit	load
dblclick 双击	keydown	change	resize
mouseenter 鼠标指针进入	keyup	focus 获得焦点	scroll
mouseleave 鼠标指针离开		blur 失去焦点	unload
hover 悬停
mousedown 按下鼠标按键时
mouseup 松开鼠标按钮


xxxxxxxxxx
$("p").click(function(){
    // 动作触发后执行的代码!!
});

JQuery 效果

隐藏hide与显示show


xxxxxxxxxx
$(selector).hide(speed,callback);  // 隐藏
$(selector).show(speed,callback);  // 显示

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

toggle()

使用 toggle() 方法来切换 hide() 和 show() 方法。

淡入淡出

jQuery 拥有下面四种 fade 方法：

fadeIn()，用于淡入已隐藏的元素。


xxxxxxxxxx
$(selector).fadeIn(speed,callback);

fadeOut()，用于淡出可见元素。


xxxxxxxxxx
$(selector).fadeOut(speed,callback);

fadeToggle()，在 fadeIn() 与 fadeOut() 方法之间进行切换


xxxxxxxxxx
$(selector).fadeToggle(speed,callback);

fadeTo()，允许渐变为给定的不透明度（值介于 0 与 1 之间）。


xxxxxxxxxx
$(selector).fadeTo(speed,opacity,callback);
// 例如：
$("#div2").fadeTo("slow",0.4);

JQuery HTML

获取和设置（内容、属性）

text() 设置或返回所选元素的文本内容
html() 设置或返回所选元素的内容（包括 HTML 标记）
val() 设置或返回表单字段的值
attr() 获取属性值


xxxxxxxxxx
// 获取
$("#test").text();
$("#test").html();
$("#test").val();
$("#w3s").attr("href");

// 设置
$("#test1").text("Hello world!");
$("#test2").html("<b>Hello world!</b>");
$("#test3").val("Dolly Duck");
$("#w3s").attr("href","http://www.w3school.com.cn/jquery");
$("#w3s").attr({
    "href" : "http://www.w3school.com.cn/jquery",
    "title" : "W3School jQuery Tutorial"
});

添加和删除元素

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素


xxxxxxxxxx
$("p").append("Some appended text.");
$("p").append("Some appended text.");
$("img").after("Some text after");
$("img").before("Some text before");
$("#div1").remove();
$("#div1").empty();
// 过滤删除
$("p").remove(".italic");
// 通过参数接收无限数量的新元素
function appendText()
{
var txt1="<p>Text.</p>";               // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text.");   // 以 jQuery 创建新元素
var txt3=document.createElement("p");  // 以 DOM 创建新元素
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3);         // 追加新元素
}

function afterText()
{
var txt1="<b>I </b>";                    // 以 HTML 创建新元素
var txt2=$("<i></i>").text("love ");     // 通过 jQuery 创建新元素
var txt3=document.createElement("big");  // 通过 DOM 创建新元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);          // 在 img 之后插入新元素
}

CSS添加、移除、设置

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性


xxxxxxxxxx
.blue{
    color:blue;
}
// 添加
$("h1,h2,p").addClass("blue");
// 移除
$("h1,h2,p").removeClass("blue");
// 添加/删除类的切换
$("h1,h2,p").toggleClass("blue");
// 取得css属性
$("p").css("background-color");
// 设置css属性
$("p").css("background-color","yellow");
// 设置多个css属性
$("p").css({"background-color":"yellow","font-size":"200%"});

尺寸

width() 设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 设置或返回元素的高度（不包括内边距、边框或外边距）。
innerWidth() 返回元素的宽度（包括内边距）。
innerHeight() 返回元素的高度（包括内边距）。
outerWidth() 返回元素的宽度（包括内边距和边框）。
outerHeight() 返回元素的高度（包括内边距和边框）。
outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。
outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。


xxxxxxxxxx
// 获得
$("#div1").width()
$("#div1").height()
$("#div1").innerWidth()
$("#div1").innerHeight()
$("#div1").outerWidth()
$("#div1").outerHeight()
// 设置
$("#div1").width(500).height(500);

JQuery遍历

通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。

向上遍历DOM树（祖先）

parent() 返回被选元素的直接父元素。
parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()
parentsUntil() 返回介于两个给定元素之间的所有祖先元素。


xxxxxxxxxx
$("span").parent("ul");
$("span").parents("ul");

// 返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素
$("span").parents("ul");

// 返回介于 <span> 与 <div> 元素之间的所有祖先元素
$("span").parentsUntil("div");

向下遍历DOM树（后代）

children() 返回被选元素的所有直接子元素。
find() 返回被选元素的后代元素，一路向下直到最后一个后代。

水平遍历DOM树（同胞）

siblings() 返回被选元素的所有同胞元素
next() 返回被选元素的下一个同胞元素。
nextAll() 返回被选元素的所有跟随的同胞元素（所有后面的）。
nextUntil() 返回介于两个给定参数之间的所有跟随的同胞元素。
prev() 前面一个
prevAll() 前面所有
prevUntil() 向前面，介于两者之间的


xxxxxxxxxx
$("h2").siblings();
$("h2").siblings("p"); // 过滤

过滤

三个最基本的过滤方法是：first(), last() 和 eq()

其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。


xxxxxxxxxx
$("p").eq(1);

滑动

jQuery 拥有以下滑动方法：

slideDown()，用于向下滑动元素
slideUp() ，用于向上滑动元素
slideToggle() ，在 slideDown() 与 slideUp() 方法之间进行切换。


xxxxxxxxxx
$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);

动画

创建animate

animate() 方法

用于创建自定义动画。


xxxxxxxxxx
$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。


xxxxxxxxxx
// 它把 <div> 元素往右边移动了250像素
$("button").click(function(){
  $("div").animate({left:'250px'});
});

操作多个属性


xxxxxxxxxx
$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

使用相对值


xxxxxxxxxx
$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

使用预定义的值

您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"


xxxxxxxxxx
$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

使用队列功能

如果您编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。


xxxxxxxxxx
$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});

动画停止stop

stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

链接式操作

有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。


xxxxxxxxxx
$("#p1").css("color","red").slideUp(2000).slideDown(2000);

// 当进行链接时，代码行会变得很长。不过，jQuery 语法不是很严格；您可以按照希望的格式来写，包含换行和缩进。
$("#p1").css("color","red")
  .slideUp(2000)
  .slideDown(2000);

ajax请求

Ajax 是一种异步、无刷新(或者说局部页面刷新)技术。

同步，就是说必须等待请求之后给我返回结果了我才能继续往下操作。
异步，就是请求发送之后，不管你是否返回结果，我继续往下操作。

jQuery 封装好的 Ajax

$.ajax({})

参数：

type：请求方式GET/POST

url: 请求地址 url

async：是否一步，默认是 true 表示异步

data：发送到服务器的数据

dataType：预期服务器返回的数据类型

contentType：设置请求头

success：请求成功时调用此函数

error：请求失败时调用此函数


xxxxxxxxxx
$.ajax({
    type: "get",        // 请求方式
    url: "js/data.txt", // 请求路径
    dataType: "json",   // 预期返回一个 json 类型数据
    success: function (data) {   // data是形参名，代表返回的数据
        console.log(data);
    },
    error:function(err){
        console.log(err);
    }
});

$.get()

这是一个简单的 GET 请求功能以取代复杂 $.ajax。

请求成功时可调用回调函数，如果需要在出错时执行函数，请使用 $.ajax


xxxxxxxxxx
$.get("请求地址","请求参数",function(形参){
    ....
});
// 例如
$.get('js/data.json',{name:'tom',age:19},function(data){
    console.log(data);
});

$.post()

$.post 与 $.get用法一模一样。

$.getJSON 只能获取 json 格式的数据，其他的无法获取，而 $.get 和 $.post都可以获取。

JS其它（一）

实时监听INPUT输入


x
<input id="myInput" type="text" placeholder="请输入想说的话...">

 $("#myInput").on("input", function () {
    //实时显示输入的值
    $("#result").text($(this).val());
 });

定时器和延时器

语法

setInterval () 定时

setInterval(code, milliseconds); setInterval(function, milliseconds, param1, param2, ...)

参数	描述
code/function	必需。要调用一个代码串，也可以是一个函数。
milliseconds	必须。周期性执行或调用 code/function 之间的时间间隔，以毫秒计。
param1, param2, ...	可选。传给执行函数的其他参数（IE9 及其更早版本不支持该参数）。

clearInterval() 停止

clearInterval(id_of_setinterval)

clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作。

clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

setInterval()产生一个定时器，定义一个定时器标识；使用 clearInterval(定时器标识) 来停止。

用法1


xxxxxxxxxx
var mytag;
function jump(){
　　…………　　//函数内容
}
mytag = setInterval("jump",5000); //每个5秒调用一次函数

// 当需要停止时
$("#mydiv").click(function(){
　　clearInterval(mytag);
　　};　　
});

用法2


xxxxxxxxxx
var mytag;
function autoPlay(){
　　mytag = setInterval(function(){
　　　　………… 　　// 函数内容
　　},5000);   // 每5秒执行一行
}
autoPlay();　　// 调用函数

// 当需要停止时
$("#mydiv").click(function(){
　　clearInterval(mytag);
　　};　　
});

总结

setInterval与clearInterval都是直属于window对象。

第一种用法思路比较清晰，先设置一个函数，在通过setInterval来自行调用，但是将其在别处调用比较困难；

第二种方法看起来比较乱，在setInterval内部写下自行调用的函数，然后在给他套上一个有名函数，然后通过调用有名函数来实行自动，在别处调用比较方便。

setTimeout和setInterval的区别

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

setTimeout用于延迟执行某方法或功能
setInterval则一般用于刷新表单，对于一些表单的假实时指定时间刷新同步

setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。


xxxxxxxxxx
function hello(){
alert("hello");
}
//使用方法名字执行方法
var t1 = window.setTimeout(hello,1000);
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
window.clearTimeout(t1);//清除定时器


xxxxxxxxxx
//实时刷新时间单位为毫秒
setInterval('refreshQuery()',8000); 
/* 刷新查询 */
function refreshQuery(){
   $("#mainTable").datagrid('reload',null);
}

自定义休眠函数

原理：实际上，该例子不是使js脚本进入休眠，而是因为js是单线程，while(true)｛｝死循环调度cpu,使得whlie(){}后面的程序被阻塞，进而实现休眠的假象。


xxxxxxxxxx
<script>  
    //参数n为休眠时间，单位为毫秒:
    function sleep(n) {
        var start = new Date().getTime();
        //  console.log('休眠前：' + start);
        while (true) {
            if (new Date().getTime() - start > n) {
                break;
            }
        }
        // console.log('休眠后：' + new Date().getTime());
    }
 
    sleep(2000);
</script>

循环终止和退出

跳出each循环
return false 跳出循环
return true 进入下一个循环
跳出for循环
break 直接退出for这个循环。这个循环将不再被执行！ continue 直接跳出本次for循环。下次继续执行。 return语句就是用于指定函数返回的值。即使函数主体中还有其他语句，函数执行也会停止！

获取DOM元素的属性值

$(this).attr("id")

$(this).attr("class")

鼠标进入与离开的事件

mouseover 事件在鼠标指针进入被选元素或任意子元素时都会被触发，

mouseenter 事件只有在鼠标指针进入被选元素时被触发。

1.mouseover与mouseout

2.mouseenter与 mouseleave

获取当前时间（年月日时分秒）


xxxxxxxxxx
var now = new Date();
var time = now.getFullYear() + "-" +((now.getMonth()+1)<10?"0":"")+(now.getMonth()+1)+"-"+(now.getDate()<10?"0":"")+now.getDate();

（XXXX-XX-XX）
// 字符串转成时间对象
var mydate = new Date('2022-7-14 15:30:00');  
var year = mydate.getFullYear();
var month = mydate.getMonth()+1;    // 默认值为0-11月
var day = mydate.getDate();
var hours = mydate.getHours();
var minutes = mydate.getMinutes();
var seconds = mydate.getSeconds();
var week = myDate.getDay();  // 返回值为0-6
var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
console.log(weeks[week]);

//补齐两位数
function addleft0(obj) {
    // 方法1
    return obj.toString().length == 1 ? "0" + obj: obj;
    // 方法2
    return obj.toString().replace(/^[0-9]{1}$/, "0" + obj);
}

字符与数字的转换

parseInt(字符串) ，返回一个整数


xxxxxxxxxx
parseInt("123")        // 返回123
parseInt("10.5")        // 返回10
parseInt("xy123abc")   // 返回123

另外parseInt()方法还有基模式，就是可以把二进制、八进制、十六进制或其他任何进制的字符串转换成整数。

基是由parseInt()方法的第二个参数指定的


xxxxxxxxxx
parseInt("10", 2);  // returns 2

parseFloat(字符串) ，返回一个浮点数


xxxxxxxxxx
parseInt("123")        // 返回123.0
parseInt("10.5")        // 返回10.5
parseInt("xy10.5abc")   // 返回10.5

Number() 该方法转换的是整个值，而不是部分值。


xxxxxxxxxx
Number(false) 0
Number(true) 1
Number(undefined) NaN
Number(null) 0
Number( "5.5 ") 5.5
Number( "56 ") 56
Number( "5.6.7 ") NaN
Number(new Object()) NaN
Number(100) 100

toString() 将数字转换为字符串类型


xxxxxxxxxx
var num = 12.5;
var numStr = num.toString();
console.log(typeof(numStr));  // string

typeof 查看变量的类型

object对象与json字符串的转换

json字符串转obj对象

object = JSON.parse("字符串");

obj对象转json字符串

string = JSON.stringify(对象);

随机数

在一个范围内取数


xxxxxxxxxx
//x上限，y下限     
var x = 100;
var y = 50;
var rand = parseInt(Math.random() * (x - y + 1) + y);

不重复随机数


xxxxxxxxxx
//获取不重复随机数
function getRandom(lengths) {
    var arr = [];//存放随机数的数组
    var arrLen = lengths;//用来限制范围
    for(var i=0; i<4; i++){
        var radomNum = parseInt(Math.random() * arrLen);//生成范围内的数据数
        if(arr.indexOf(radomNum) == -1){
            //indexOf返回值为-1表示数组中没有和新随机数重复的值
            arr.push(radomNum);
        }else{
            //有重复值i--，不添加重复的值到数组中，并再循环一次
            i--;
        };

    };
    console.log(arr);
    return arr;
}

::before与::after

css3为了区分伪类和伪元素，伪元素采用双冒号写法。

常见伪类——:hover,:link,:active,:target,:not(),:focus 常见伪元素——::first-letter,::first-line,::before,::after,::selection

::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。

这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。

所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容。

content属性

::before和::after必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空。默认情况下，伪类元素的display是默认值inline，可以通过设置display:block来改变其显示。

string
使用引号包一段字符串，将会向元素内容中添加字符串。如：a:after{content:""}

attr()

通过attr()调用当前元素的属性，比如将图片alt提示文字或者链接的href地址显示出来。


xxxxxxxxxx
<style type="text/css">
a::after{
    content: "(" attr(href) ")";
}
</style>
<a href="http://www.cnblogs.com/starof">starof</a>

url()/uri()

用于引用媒体文件。


xxxxxxxxxx
a::before{
    content: url("https://www.baidu.com/img/baidu_jgylogo3.gif");
}

counter()
调用计数器，可以不使用列表元素实现序号功能。配合counter-increment和counter-reset属性使用：
h2:before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }

background参数

在一个声明中设置所有背景属性


xxxxxxxxxx
background: #00FF00 url(bgimage.gif) no-repeat fixed top;

参数	描述
background-color	规定要使用的背景颜色。
background-position	规定背景图像的位置。
background-size	规定背景图片的尺寸。
background-repeat	规定如何重复背景图像。
background-origin	规定背景图片的定位区域。
background-clip	规定背景的绘制区域。
background-attachment	规定背景图像是否固定或者随着页面的其余部分滚动。
background-image	规定要使用的背景图像。
inherit	规定应该从父元素继承 background 属性的设置。

1. background-repeat

用来设置背景图像的铺排填充方式, 默认值: repeat 。

repeat 表示横向纵向上均平铺;

no-repeat 表示不平铺;

repeat-x 表示横向上平铺,

repeat-y 表示纵向上平铺

round 表示背景图像自动缩放直到适应且填充满整个容器。注意: 当设置为 round 时, background-size 的 cover 和 contain 属性失效。

space 表示背景图像以相同的间距平铺且填充满整个容器或某个方向. 注意: 当 background-size 设置为 cover 和 contain 时, background-rapeat 的 space 属性失效。

2. background-position

用来设置背景图像的位置, 默认值: 0% 0%, 效果等同于 left top。

如果设置一个值, 则该值作用在横坐标上, 纵坐标默认为50%(即center) ; 如果设置两个值, 则第一个值作用于横坐标, 第二个值作用于纵坐标,

取值可以是方位关键字[left\top\center\right\bottom], 如 background-position: left center ;

也可以是百分比或长度, 百分比和长度可为设置为负值, 如: background-position: 10% 30px ;

3. background-attachment

用来设置背景图像是随对象内容滚动还是固定的，默认值 scroll。

fixed 背景图像相对窗体固定，即内容滚动时，图片不动; scroll 相对元素固定，背景图像跟随元素本身，元素内容滚动时背景图像不动; local 相对元素内容固定，背景图像跟随元素内容。

jQuery 事件 target 属性

语法：event.target

规定返回的最后一个值来自哪个事件。这个 event 参数来自事件绑定函数。

例：显示哪个 DOM 元素触发了事件


xxxxxxxxxx
<h1>这是一个标题</h1>
<h2>这是另一个标题</h2>
<p>这是一个段落</p>
<button>这是一个按钮</button>
<div id="output"></div>
$("p, button, h1, h2").click(function(event){
  $("#output").html("点击事件由一个 " + event.target.nodeName + " 元素触发");
});

checkbox选中状态及事件

jquery判断checked的三种方法


xxxxxxxxxx
.attr('checked); //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false
.prop('checked'); //16+:true/false
.is(':checked'); //所有版本:true/false

jquery赋值checked的几种写法


xxxxxxxxxx
所有的jquery版本都可以这样赋值:
// $("#cb1").attr("checked","checked");
// $("#cb1").attr("checked",true);
jquery1.6+:prop的4种赋值:
// $("#cb1″).prop("checked",true);//很简单就不说了哦
// $("#cb1″).prop({checked:true}); //map键值对
// $("#cb1″).prop("checked",function(){
return true;//函数返回true或false
});

//记得还有这种哦:$("#cb1″).prop("checked","checked");

checkbox click和change事件


xxxxxxxxxx
方法1：
$("#ischange").change(function() {
    alert("checked");
});

方法2：
$(function(){
    if ($.browser.msie) {
        $('input:checkbox').click(function () {
            this.blur();
            this.focus();
    });
};

方法3：
$("#ischange").change(function() {
    alert("checked");
    });
});

方法4：
$(function(){
    if ($.browser.msie) {
        $('input:checkbox').click(function () { 
            this.blur(); this.focus(); 
        }); 
    };
});

方法5：
$(document).ready(function(){
    $("testCheckbox").change(function() {
        alert("Option changed!");
    });
});

表格table

基本样式


xxxxxxxxxx
<table>
<thead>
    <caption>表头名称</caption>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>电话</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>13912345678</td>
    </tr>
</tbody>
</table>

tabel标签属性

边框border 默认为0，表格边框，一般设置为border=“1”
外间距cellspacing ，设置边框与边框之间的距离，一般设置为cellspacing="0"
内间距cellpadding ，设置边框与内容之间的距离；例如：cellpadding="5"

tabel通用属性

这是<table><tr><td>都识别的属性

对齐方式 align="left/center/right"
宽度、高度width="800",height=600,像素px可以省略不写。
tr、td垂直对方式，valign="top/middle/bottom"
rowspan 、colspan 行、列的合并
border-collapase

separate，默认值，边框独立；

collapse，相邻边框被合并。

字符串截取、分割、连接

substring函数（截取）

在指定位置截取字符串。用于返回字符串中指定位置的子字符串。


xxxxxxxxxx
string.substring(start, end)

start：指定截取位置，索引从0开始。
end：指定字符串截取的结束位置，索引从0开始。

substr函数（截取）

作用是用于从指定位置截取指定长度的字符串。


xxxxxxxxxx
string.substr(start [, length ])

start：指定截取位置，索引从0开始。
length：指定截取字符串的长度。

split函数（分割）

作用是将字符串分割为子字符串，并将结果作为字符串数组返回。


xxxxxxxxxx
string.split([separator[, limit]])

separator：指定分割字符串的方式。
limit：限制返回数组中的元素个数。

indexOf、lastIndexOf （位置）

指定的子串在字符串中的位置，如果没有找不到子串，则返回 -1。


xxxxxxxxxx
string.indexOf(subString[, startIndex])

subString 指要查找的子字符串。
startIndex 指出在 String 对象内开始查找的索引。如果省略，则从字符串的开始处查找。
indexOf() 方法是从字符串的开头（位置 0）开始检索字符串，而 lastIndexOf() 方法则是从字符串的结尾开始检索子串。

join方法（连接）

用于数组中元素的连接


xxxxxxxxxx
var arr = [1,2,3,4,5];
arr.join("-")   // 1-2-3-4-5

JQuery三种提示框

alert()提示信息框


xxxxxxxxxx
alert("hellow");

confirm()确认框

如果点击确定按钮，则 confirm() 返回 true。如果点击取消按钮，则 confirm() 返回 false。


xxxxxxxxxx
if(confirm("你确定删除吗?")){
 　　//点击确定后操作　
};

prompt()输入文本框


x
var word1 = prompt("请输入一段文字");
//第一个参数是提示文字，第二个参数是文本框中默认的内容
var word2 = prompt("请输入一段文字","");
if(word2){
    //输出word的格式
    alert("已获得:"+word2);
};

JS其它（二）

ES6数组去重复元素


xxxxxxxxxx
let arr = [1,1,2,3,5,7,7,7];

// 方法1,利用Array.from将Set结构转换成数组
let newArr = Array.from(new Set(arr));

// 方法2,扩展运算符和 Set 结构相结合
let newArr = [...new Set(arr)];

// 方法3,filter方法
let newArr = arr.filter((x,index,self)=>self.indexOf(x)===index)

ES6 扩展运算符三个点（...）

记住一句话：对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中

https://blog.csdn.net/astonishqft/article/details/82899965

jQuery清空file文件域


xxxxxxxxxx
var file = $("#file") 
file.after(file.clone().val("")); 
file.remove();

jQuery数组的操作（一）

1、创建数组


xxxxxxxxxx
var arrayObj = new Array();　      //创建一个数组
var arrayObj = new Array([size]);　//创建一个数组并指定长度，注意不是上限，是长度
a[0] = 10;
a[1] = "aaa";
a[2] = 12.6;
// 可以实例化的时候直接赋值
var a = new Array(1, 2, 3, 4, 5);
var b = [1, 2, 3, 4, 5];

2、数组元素的访问

数组[下标] 用来读写元素


xxxxxxxxxx
var testGetArrValue=arrayObj[1];   //获取数组的元素值
arrayObj[1]= "这是新值";            //给数组元素赋予新的值

3、数组元素的添加

arrayObj.push(item) // 将一个或多个新元素添加到数组结尾，并返回数组新长度
arrayObj.unshift(item) // 将一个或多个新元素添加到数组开始，数组中的元素自动后移，返回数组新长度


xxxxxxxxxx

var a =  ["aa","bb","cc"];
console.log(a.push("dd"));      // -> 4
console.log(a);                 // -> aa,bb,cc,dd
console.log(a.push([1,2,3]));   // -> 5
console.log(a);                 // -> aa,bb,cc,dd,1,2,3
//跟concat的区别在于，concat不影响原数组，直接返回新数组，而push则直接修改原数组，返回的是数组新长度

4、数组元素的删除

arrayObj.pop() // 移除最后一个元素并返回该元素值
arrayObj.shift() // 移除最前一个元素并返回该元素值，数组中元素自动前移
arrayObj.splice(deletePos,deleteCount)

splice() 方法，可以删除数组中的指定元素。

删除从指定位置deletePos开始的指定数量deleteCount的元素，数组形式返回所移除的元素;

常用实例：

数组.splice($.inArray(元素,数组),数量)


xxxxxxxxxx
var arr = ['a','b','c','d'];
arr.splice($.inArray('c',arr),1);
// 结果：arr =['a','b','d']


xxxxxxxxxx
var a =  ["aa","bb","cc"];
console.log
console.log(a.pop());  // -> cc
console.log(a);    // -> aa, bb
var a = [1,2,3,4,5,6,7,8,9];
console.log(a.splice(3,2));  // -> 4,5
console.log(a);    // -> 1,2,3,6,7,8,9

5、数组的截取和合并

arrayObj.slice(start, [end]); 以数组的形式返回数组的一部分，注意不包括 end 对应的元素，如果省略 end 将复制 start 之后的所有元素

arrayObj.concat([item1[, item2[, . . . [,itemN]]]]); 将多个数组（也可以是字符串，或者是数组和字符串的混合）连接为一个数组，返回连接好的新的数组


xxxxxxxxxx
var arrA = [1,2];
var arrB = [3,4];
var arrC = [5,6];
var arrD = [7,8];
var NewArr = [];
NewArr = arrA.concat(arrB,arrC,arrD); 
// result: 1,2,3,4,5,6,7,8


xxxxxxxxxx
var a = [123];
var b = "sunnycat";
var c =  ["www",21,"ido"];
var d = {x:3.14, y:"SK"};
var e = [1,2,3,4,[5,6,[7,8]]];
alert(a.concat(b));   // -> 123,sunnycat
alert(a); //  -> 123
alert(b.concat(c, d));    // -> sunnycatwww,21,ido[object  Object]
alert(c.concat(b));   // -> www,21,ido,sunnycat
alert(e.concat(11,22,33).join(" #  "));    // -> 1 # 2 # 3  # 4 # 5,6,7,8 # 11 # 22 # 33

需要注意的是只能用于数组或字符串，如果被连接（前面的a）的是数值、布尔值、对象，就会报错，字符串连接数组时，字符串会跟数组首元素拼接成新元素，而数组连接字符串则会追加新元素（这点我也不清楚原委，知情者请透露），对于数组里面包含数组、对象的，连接后保持原样

6、数组元素的排序

arrayObj.reverse(); //反转元素（最前的排到最后、最后的排到最前），返回数组地址
arrayObj.sort(); //对数组元素排序，返回数组地址

7、数组元素的字符串化

arrayObj.join(separator); 用指定间隔符，把数组元素连起来转为字符串。


xxxxxxxxxx
var a =  ['a','b','c','d','e','f','g'];
alert(a.join(" * ")); // -> a * b * c * d * e * f * g

8、随机打乱数组


xxxxxxxxxx
// 随机打乱数组函数
    var RandomShuffleArr = function (a) {
       var len = a.length;
       for(var i=0;i<len;i++){
           var end = len - 1 ;
           var index = (Math.random()*(end + 1)) >> 0;
           var t = a[end];
           a[end] = a[index];
           a[index] = t;
       }
       return a;
   };

jQuery数组的操作（二）

1. $.each(array, [callback]) 遍历[常用]

each遍历是for循环的变体,但比for循环强大.在数组中,它可以轻松的获取数组索引及对应的值。如果需要退出 each 循环可使回调函数返回 false。


xxxxxxxxxx
var _mozi=['墨家','墨子','墨翟','兼爱非攻','尚同尚贤']; //本文所用到的数组, 下同 
$.each(_mozi,function(key,val){ 
//回调函数有两个参数,第一个是元素索引,第二个为当前值 
alert('_mozi数组中 ,索引 : '+key+' 对应的值为: '+val); 
});

2. $.grep(array, callback, [invert]) 过滤数组[常用]

$.grep() 函数使用指定的函数过滤数组中的元素，并返回过滤后的数组。

提示：源数组不会受到影响，过滤结果只反映在返回的结果数组中。

语法


xxxxxxxxxx
$.grep( array, function(elementOfArray, indexInArray) [, invert ] )

参数	描述
array	Array类型将被过滤的数组。
function	Function类型指定的过滤函数。grep()方法为function提供了两个参数：其一为当前迭代的数组元素，其二是当前迭代元素在数组中的索引。
invert	可选。 Boolean类型默认值为false，指定是否反转过滤结果。如果参数invert为true，则结果数组将包含function返回false的所有元素。

例：


xxxxxxxxxx
<div></div>
<p></p>
<span></span>
<script>
$(function () { 
    // 选出数组里面不大于5，且索引号大于4的元素。
    var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ];
    $( "div" ).text( arr.join( ", " ) );
    arr = jQuery.grep(arr, function( element, index ) {
        return ( element > 5 && index > 4 );
    });
    
    // 选出数组里面不等于9的元素
    $( "p" ).text( arr.join( ", " ) ); 
    arr = $.grep(arr, function( a ) {
        return a == 9;
   true },);
    $( "span" ).text( arr.join( ", " ) );
});

3. $.inArray(val,array)判断值是否存在于数组中[常用]

解释: 确定第一个参数在数组中的位置, 从0开始计数(如果没有找到则返回 -1 。

4. $.map(array,[callback(element,index)])按给定条件转换数组 [一般]

解释:对于array中的每个元素，调用callback()函数，最终返回一个新的数组，原数组不变。


xxxxxxxxxx
$(function () {
    var arrInt = [1, 3, 5, 79];
    //map返回来的是一个新数组，第个值乘2
    var b = $.map(arrInt, function (value, key) {
                return value * 2;
            });
     console.log(b); // b.join(","),使用“，”符号连接成字符串
})

5. $.merge(first,second)合并两个数组[一般]

解释: 返回的结果会修改第一个数组的内容——第一个数组的元素后面跟着第二个数组的元素；

这个方法是用jQuery的方法替代原生concat()方法, 但功能并没有concat()强大, concat()可以同时合并多个数组。

6. $.unique(array)过滤数组中重复元素[不常用]

解释: 删除数组中重复元素. 只处理删除DOM元素数组,而不能处理字符串或者数字数组. 第一次看到这个方法,觉得这是个很便捷的方法, 可以过滤重复, 哈, 多完美, 但仔细一看, 仅限处理DOM元素. 功能8折了.所以, 我给它定义成了一个不常用的元素, 至少, 我用jQuery以来没用到过它

7. $.makeArray(obj) 将类数组对象转换为数组[不常用]

解释: 将类数组对象转换为数组对象, 类数组对象有 length 属性,其成员索引为0至 length-1. 这是个多余的方法, 无所不能的$本来就包含了这个功能. jQuery官网上解释的非常模糊. 其实, 它就是将某个类数组对象(比如用getElementsByTagName获取的元素对象集合)转换成数组对象.

8. $(dom).toArray()将所有DOM元素恢复成数组[不常用]

解释: 把jQuery集合中所有DOM元素恢复成一个数组; 并不常用的方法, 个人甚至觉得它和$.makeArray一样多余.

9. 数组的交、并、差

(1)交集


xxxxxxxxxx
// 利用filter方法来遍历是否有相同的元素
var arr3 = arr2.filter(function(v){
            return arr1.indexOf(v)!==-1     
        });
        
// ES7写法
let intersection = a.filter(v => b.includes(v))

(2)并集

(3) 差集


xxxxxxxxxx
var result = arr2.concat(arr3 ).filter(function (v) {
                return arr2.indexOf(v)===-1 || arr3 .indexOf(v)===-1
            });
// ES7写法
let difference = a.concat(b).filter(v => !a.includes(v) || !b.includes(v))

数组的交集、差集、并集、补集

方法1：使用 jQuery 实现


xxxxxxxxxx
var a = [1,2,3,4,5]
var b = [2,4,6,8,10]
console.log("数组a：", a);
console.log("数组b：", b);
// 交集
let intersect = $(a).filter(b).toArray();
// 差集
let minus = $(a).not(b).toArray();
// 补集
let complement = $(a).not(b).toArray().concat($(b).not(a).toArray());
// 并集
let unionSet = $.unique(a.concat(b));
console.log("a与b的交集：", intersect);
console.log("a与b的差集：", minus);
console.log("a与b的补集：", complement);
console.log("a与b的并集：", unionSet);

注意：数组a和b的顺序不一样，结果不一样，使用之前最好测试看下结果

方法2：使用 ES6 语法实现

在 ES6 中我们可以借助扩展运算符（…）以及 Set 的特性实现相关计算，代码也会更加简单些。


xxxxxxxxxx
var a = [1,2,3,4,5]
var b = [2,4,6,8,10]
console.log("数组a：", a);
console.log("数组b：", b);
var sa = new Set(a);
var sb = new Set(b);
// 交集
let intersect = a.filter(x => sb.has(x));
// 差集
let minus = a.filter(x => !sb.has(x));
// 补集
let complement = [...a.filter(x => !sb.has(x)), ...b.filter(x => !sa.has(x))];
// 并集
let unionSet = Array.from(new Set([...a, ...b]));
console.log("a与b的交集：", intersect);
console.log("a与b的差集：", minus);
console.log("a与b的补集：", complement);
console.log("a与b的并集：", unionSet);

方法3：使用ES5语法实现

（1）直接使用 filter、concat 来计算


xxxxxxxxxx
var a = [1,2,3,4,5]
var b = [2,4,6,8,10]
//交集
var c = a.filter(function(v){ return b.indexOf(v) > -1 })
//差集
var d = a.filter(function(v){ return b.indexOf(v) == -1 })
//补集
var e = a.filter(function(v){ return !(b.indexOf(v) > -1) })
 .concat(b.filter(function(v){ return !(a.indexOf(v) > -1)}))
//并集
var f = a.concat(b.filter(function(v){ return !(a.indexOf(v) > -1)}));
console.log("数组a：", a);
console.log("数组b：", b);
console.log("a与b的交集：", c);
console.log("a与b的差集：", d);
console.log("a与b的补集：", e);
console.log("a与b的并集：", f);

（2）对 Array 进行扩展

a. 为方便使用，我们可以对数组功能进行扩展，增加一些常用的方法。


xxxxxxxxxx
//数组功能扩展
//数组迭代函数
Array.prototype.each = function(fn){
 fn = fn || Function.K;
 var a = [];
 var args = Array.prototype.slice.call(arguments, 1);
 for(var i = 0; i < this.length; i++){
 var res = fn.apply(this,[this[i],i].concat(args));
 if(res != null) a.push(res);
 }
 return a;
};
//数组是否包含指定元素
Array.prototype.contains = function(suArr){
 for(var i = 0; i < this.length; i ++){
 if(this[i] == suArr){
 return true;
 }
 }
 return false;
}
//不重复元素构成的数组
Array.prototype.uniquelize = function(){
 var ra = new Array();
 for(var i = 0; i < this.length; i ++){
 if(!ra.contains(this[i])){
 ra.push(this[i]);
 }
 }
 return ra;
};
//两个数组的交集
Array.intersect = function(a, b){
 return a.uniquelize().each(function(o){return b.contains(o) ? o : null});
};
//两个数组的差集
Array.minus = function(a, b){
 return a.uniquelize().each(function(o){return b.contains(o) ? null : o});
};
//两个数组的补集
Array.complement = function(a, b){
 return Array.minus(Array.union(a, b),Array.intersect(a, b));
};
//两个数组并集
Array.union = function(a, b){
 return a.concat(b).uniquelize();
};

b. 为方便使用，我们可以对数组功能进行扩展，增加一些常用的方法。


xxxxxxxxxx
var a = [1,2,3,4,5]
var b = [2,4,6,8,10]
console.log("数组a：", a);
console.log("数组b：", b);
console.log("a与b的交集：", Array.intersect(a, b));
console.log("a与b的差集：", Array.minus(a, b));
console.log("a与b的补集：", Array.complement(a, b));
console.log("a与b的并集：", Array.union(a, b));

JS读取本地文件

一、上传文件方法


xxxxxxxxxx
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS读取本地文件</title>
</head>

<body>
    <div>
        <div>方法一</div>
        <input type="file" id="myID1" style="display: none" onchange="fileImport();">
        <input type="button" id="fileImportBtn" value="导入">
        <div>方法二</div>
        <input type="file" id="myID2" onchange="fileImport2();">
    </div>
    <div id="output"></div>
    <!-- <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> -->
    <script src="./jquery-3.5.0.min.js"></script>
    <script>
        //点击导入按钮,使files触发点击事件,然后完成读取文件的操作
        $("#fileImportBtn").click(function() {
            $("#myID1").click();
        })

        function fileImport() {
            //获取读取我文件的File对象
            var selectedFile = document.getElementById('myID1').files[0];
            // var selectedFile = $('#myID1').get(0).files[0]; // 与上一行等价

            var name = selectedFile.name;   //读取选中文件的文件名
            var size = selectedFile.size;   //读取选中文件的大小
            console.log("文件名:" + name + "大小:" + size);
            var reader = new FileReader();  //这是核心,读取操作就是由它完成.
            reader.readAsText(selectedFile,"GBK"); //读取文件的内容,也可以读取文件的URL
            reader.onload = function() {
                //当读取完成后回调这个函数,然后此时文件的内容存储到了result中,直接操作即可
                console.log(this.result);
                $("#output").html(this.result);
            }
        }
    </script>

    <script type="text/javascript">
        // 定义函数
        function fileImport2(){
            //获取读取我文件的File对象
            var selectedFile = $('#myID2').get(0).files[0];
            var reader = new FileReader(); //这是核心,读取操作就是由它完成.
            reader.readAsText(selectedFile,"GBK"); //读取文件的内容,也可以读取文件的URL
            reader.onload = function(){
                //当读取完成后回调这个函数,然后此时文件的内容存储到了result中,直接操作即可
                console.log(this.result);   // 与reader.result一样
                $("#output").html(this.result);
            };
        };
    </script>
</body>
</html>

二、将读取的文件转化成数组


xxxxxxxxxx
// 参数str为读取出的字符
function getArray(str){
    var re = /(\r\n|\n)/g; 
    var tmpStr = str.replace(re,","); 
    var Arr = tmpStr.split(",");
    // $.grep筛选或者使用for循环过滤掉空值
    var newArr = $.grep(Arr,function(element,index){ return element==""},true)
    console.log("新数组：\n",newArr);
};

FileReader读取本地文件

FileReader是一种异步读取文件机制，结合input:file可以很方便的读取本地文件。

1、首先需要实例化一个FileReader对象

2、FileReader提供的方法：

　　①readAsArrayBuffer(file)：按字节读取文件内容，结果用ArrayBuffer对象表示;

　　②readAsBinaryString(file)：按字节读取文件内容，结果为文件的二进制串;

　　③readAsDataURL(file)：读取文件内容，结果用data:url的字符串形式表示;

　　④readAsText(file,encoding)：按字符读取文件内容，结果用字符串形式表示;

　　⑤abort()：终止文件读取操作.

　　其中readAsDataURL和readAsText较为常用，这里只对这两者进行说明。

3.1readAsDataURL会将文件内容进行base64编码后输出：


xxxxxxxxxx
var inputBox = document.getElementById("inputBox"); // dom对象
inputBox.addEventListener("change",function(){
  var reader = new FileReader();
  reader.readAsDataURL(inputBox.files[0]);//发起异步请求
  reader.onload = function(){
    //读取完成后，数据保存在对象的result属性中
    console.log(this.result);//base64内容显示
  }
})

3.2由于媒体文件的src属性，可以通过采用网络地址或base64的方式显示，因此我们可以利用readAsDataURL实现对图片的预览。


xxxxxxxxxx
<input type="file" id="inputBox" >
<img src="" id="img">

var inputBox = document.getElementById("inputBox");
var img = document.getElementById("img");
inputBox.addEventListener("change",function(){
  var reader = new FileReader();
  reader.readAsDataURL(inputBox.files[0]);//发起异步请求
  reader.onload = function(){
    //读取完成后，将结果赋值给img的src
    img.src = this.result;
  }
})

jQuery对象和DOM对象的区别

简要

jquery对象和dom对象区别

1. jquery对象

$("#div")得到的是[object Object]，即jquery对象。

2. dom对象

document.getElementById("div")得到的是[object HTMLDivElement]，即dom对象。

3. jquery对象转成dom对象

两种方法：[index]和.get(index)

$("#div")[0]或者$("#div").get(0)

4. dom对象转成jquery对象

只需要用$()把DOM对象包装起来。

var v = document.getElementById("myID"); //DOM对象 var $v = $(myID); //jQuery对象

jquery对象和dom对象区别

详情

以前一直认为jquery中的$("#id")和document.getElementById("id")得到的效果是一样的，今天做特效的时候才发现并不是这么一回事，通过测试得到:

1、alert($("#div"))得到的是[object Object]

2、alert(document.getElementById("div"))得到的是[object HTMLDivElement]

3、alert($("#div")[0])或者alert($("#div").get(0))得到的是[object HTMLDivElement]

原因解读：

document.getElementById()返回的是DOM对象，而$()返回的是jQuery对象

什么是jQuery对象？

---就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，其可以使用jQuery里的方法。比如： $("#test").html() 意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法** 这段代码等同于用DOM实现代码： document.getElementById("id").innerHTML; 虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错。比如：$("#test").innerHTML、document.getElementById("id").html()之类的写法都是错误的。还有一个要注意的是：用#id作为选择符取得的是jQuery对象与document.getElementById("id")得到的DOM对象，这两者并不等价。请参看如下说的两者间的转换。既然jQuery有区别但也有联系，那么jQuery对象与DOM对象也可以相互转换。在两者转换前首先我们给一个约定：如果一个获取的是jQuery对象，那么我们在变量前面加上$，如：var $variab = jQuery对象；如果获取的是DOM对象，则与习惯普通一样：var variab = DOM对象；这么约定只是便于讲解与区别，实际使用中并不规定。

jQuery对象转成DOM对象

**两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index); (1)jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。如：var $v =$("#v") ; //jQuery对象 var v=$v[0]; //DOM对象 alert(v.checked) //检测这个checkbox是否被选中 (2)jQuery本身提供，通过.get(index)方法，得到相应的DOM对象如：var $v=$("#v"); //jQuery对象 var v=$v.get(0); //DOM对象 alert(v.checked) //检测这个checkbox是否被选中

DOM对象转成jQuery对象

对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象) 如：var v=document.getElementById("v"); //DOM对象 var $v=$(v); //jQuery对象转换后，就可以任意使用jQuery的方法了。通过以上方法，可以任意的相互转换jQuery对象和DOM对象。需要再强调注意的是：DOM对象才能使用DOM中的方法，jQuery对象是不可以用DOM中的方法。

其它的相关使用方法

1、DOM对象转jQuery对象

普通的Dom对象一般可以通过$()转换成jQuery对象。

如：$(document.getElementById("msg")) 返回的就是jQuery对象，可以使用jQuery的方法。

2、jQuery对象转DOM对象

由于jQuery对象本身是一个集合。所以如果jQuery对象要转换为Dom对象则必须取出其中的某一项，一般可通过索引取出。如： $("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]

这些都是Dom对象，可以使用Dom中的方法，但不能再使用jQuery的方法。

以下几种写法都是正确的： $("#msg").html(); $("#msg")[0].innerHTML; $("#msg").eq(0)[0].innerHTML; $("#msg").get(0).innerHTML;

3、两种方法获取对象方式：

如有

通过id:

　　document.getElementById('formid');

　　$('#formid')

通过name

　　document.getElementsByName('formName')[0]

　　$("form[name='formName']")

jquery固有的方法：

文章来源

JQuery实例

表格奇偶行变色


xxxxxxxxxx
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>表格奇偶行变色</title>
    <!-- 引入jquery库 -->
    <script src="./js/jquery-3.6.0.min.js" type="text/javascript"></script>
    <style>
        .even { background-color: #FFFFFF; }
        .odd { background-color: #EEEEEE; }
        .s { background-color: #FF6500; }    /* 选中的样式只能放在后面，才能掩盖原来的样式 */
        .selectedcolor{background-color:green;}
        table { border: 1px solid black; text-align: center; border-collapse: collapse; }
        th,td { border: 1px solid black; padding: 5px; }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th style="width: 70px;">选项</th>
                <th style="width: 90px;">姓名</th>
                <th style="width: 90px;">性别</th>
                <th style="width: 200px;">暂住地</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox"  class="box" /></td>
                <td>张三</td>
                <td>男</td>
                <td>四川成都</td>
            </tr>
            <tr>
                <td><input type="checkbox"  class="box" /></td>
                <td>李四</td>
                <td>女</td>
                <td>四川绵阳</td>
            </tr>
            <tr>
                <td><input type="checkbox"  class="box" /></td>
                <td>王五</td>
                <td>男</td>
                <td>四川南充</td>
            </tr>
            <tr>
                <td><input type="checkbox"  class="box" /></td>
                <td>赵六</td>
                <td>男</td>
                <td>四川自贡</td>
            </tr>
        </tbody>
    </table>
</body>
<script type="text/javascript">
    $(function() {
        // 奇偶行颜色
        $("tbody>tr:odd").addClass("odd");
        $("tbody>tr:even").addClass("even");
        // 鼠标移动到表格行变色
        $("tbody>tr").mouseover(function(){ $(this).addClass("s"); });
        $("tbody>tr").mouseout(function(){ $(this).removeClass("s"); });
        // 方法1，checkbox事件
        $("tbody>tr>td input").change(function(){
            var checkboxValue = $(this).is(":checked");
            if(checkboxValue){
                $(this).parents('tr').addClass("selectedcolor");
            }else{
                $(this).parents('tr').removeClass("selectedcolor");
            };
        });
        // 方法2，
        // 1)选中行后变色；2)选中与取消的轮换
        // $("tbody>tr").click(function() {
        //     // var $that = $(this);
        //     var checkboxValue = $(this).find(".box").is(":checked");
        //     if(checkboxValue){
        //         $(this).find(".box").removeAttr("checked");
        //         $(this).removeClass("selectedcolor");
        //     }else{
        //         $(this).find(".box").attr("checked", true);
        //         $(this).addClass("selectedcolor");
        //     };
        // });
    });
</script>
</html>

二级菜单联动

html：


xxxxxxxxxx
<div class="area">
    <label>省份：</label>
    <select name="province" id="province"></select>
    <label>城市：</label>
    <select name="city" id="city"></select>
</div>

js:


xxxxxxxxxx
<script type="text/javascript">
    var CITYS =  { 
        "北京": ["北京"], 
        "上海": ["上海"], 
        "天津": ["天津", "塘沽"], 
        "重庆": ["重庆", "涪陵", "江津", "巫山"],
        "河北": ["石家庄", "张家口", "承德", "秦皇岛", "唐山", "廊坊", "保定", "衡水", "邢台"], 
        "山西": ["太原", "大同", "朔州", "阳泉", "长治", "晋城", "忻州", "晋中", "临汾", "运城"],
        "四川": ["成都", "广元", "绵阳", "德阳", "南充", "广安", "内江", "乐山", "自贡", "泸州"],
        "浙江": ["杭州", "湖州", "嘉兴", "舟山", "宁波", "绍兴", "衢州", "金华", "台州", "温州"],
     };
    $(function () {
        //初始化 所有的省的数据
        $.each(CITYS,function (keyPro,val_city) {
            var $option = "<option>"+keyPro+"</option>";
            $("#province").append($option);
        });
        //省的数据改变时加载市的数据
        $("#province").on("change",function(){
            var province = $("#province option:selected").text();
            // console.log(province);
            $("#city").empty();
            $.each(CITYS[province],function (i,val) {
                $("#city").append("<option>"+val+"</option>")
            });
        })
        //上来后初始化一下城市的数据
        $("#province").triggerHandler("change");
    })
</script>

倒计时60秒


xxxxxxxxxx
var time = 60;
$("#test").click(function (){
    //如果不加入该判断，则会出现在倒计时期间不断的点击发生不断的加快（其实就是你点了多少次就重复多少次该函数）的问题，用setTimeout（）方法不加此判断也是一样的
    if(time==60){
        var time1 = setInterval(function(){
                  if(time==0){
                       clearInterval(time1);
                   }else{
                       time--;
                       $("#xxxx").html(time);
                   }
            }, 1000);
    };
});

自定义弹出页面框（带遮罩层）


xxxxxxxxxx
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>自定义弹出框页面</title>
    <!-- 引入jquery库 -->
    <script src="./js/jquery-3.6.0.min.js" type="text/javascript"></script>
    <style>
        /* 弹出框页面 */
        #PopupBox{
            background-color: #CCDDFF;
            display: none;
            line-height: 50px;
            width : 400px;
            height : 300px;
            border:5px solid #FFF;
            position : fixed;
            left : 50%;
            top : 50%;
            transform: translate(-50%, -50%);
            z-index: 110;
        }
        #PopupBox div{margin: auto;text-align: center;}
        #PopupBox div input{outline: none;border:0;width: 160px;font-size: 22px}
        #PopupBox div:last-child>button:nth-child(2){ margin-left: 30px;}

        /* 半透明的遮罩层 */
        #overlay {
            background: #000;
            filter: alpha(opacity=50); /* IE的透明度 */
            opacity: 0.5;  /* 透明度 */
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;  /* 或者 top=0;bottom=0 */
            height: 100%;
            z-index: 100; /* 此处的图层要小于弹出框页面 */
            display:none;
        }
    </style>
</head>

<body>
    <h1>自定义弹出框页面</h1>
    <div>
        <button id="openPopupBoxbtn">弹出新页面框</button>
    </div>
    <div id="overlay"></div>
    <div id="PopupBox">
        <div><button id="close">关闭</button></div>
        <div>
            <label>学号</label>
            <input type="text" value="" />
        </div>
        <div>
            <label>姓名</label>
            <input type="text"  value="" />
        </div>
        <div>
            <label>分数</label>
            <input type="text"  value="" />
        </div>
        <div>
            <button id="cancel">取消</button>
            <button id="confirm">确定</button>
        </div>
    </div>
</body>
<script type="text/javascript">
$("#openPopupBoxbtn").click(function(){
    $("#overlay").show();
    $("#PopupBox").show(1000);
});

$("#close,#cancel,confirm").click(function(){
    $("#PopupBox").hide(1000);
    $("#overlay").hide();
});
</script>
</html>

===========================END=========================

正则表达式

一、通用规则

1.语法

字符	描述
\	将下一个字符标记为或特殊字符、或原义字符、或向后引用、或八进制转义符。
^	匹配输入字符串的开始位置；除非在方括号表达式中使用，当该符号在方括号表达式中使用时，表示不接受该方括号表达式中的字符集合。要匹配 ^ 字符本身，请使用 \^。
$	匹配输入字符串的结束位置。
*	匹配前面的子表达式零次或多次。
+	匹配前面的子表达式一次或多次。
?	匹配前面的子表达式零次或一次。等价于 {0,1}。指明一个非贪婪限定符
.	匹配除换行符“\n”之外的任何单个字符。要匹配包括“\n”在内的任何字符，请使用像"`(.\|\n)`”的模式。
{n}	n是一个非负整数。匹配确定的n次。例如，“`o{2}`”不能匹配“`Bob`”中的“`o`”，但是能匹配“`food`”中的两个o。
{n,}	n是一个非负整数。至少匹配n次。例如，“`o{2,}`”不能匹配“`Bob`”中的“`o`”，但能匹配“`foooood`”中的所有o。“`o{1,}`”等价于“`o+`”。“`o{0,}`”则等价于“`o`”。
{n,m}	m 和 n 均为非负整数，其中n <= m。最少匹配 n 次且最多匹配 m 次。请注意在逗号和两个数之间不能有空格。'o{0,1}' 等价于 'o?'。
\|	指明两项之间的一个选择。
( )	标记一个子表达式的开始和结束位置。子表达式可以获取供以后使用。
\n	匹配一个换行符。等价于 \x0a 和 \cJ。
\r	匹配一个回车符。等价于 \x0d 和 \cM。
\t	匹配一个制表符。等价于 \x09 和 \cI。
\v	匹配一个垂直制表符。等价于 \x0b 和 \cK。
\f	匹配一个换页符。等价于 \x0c 和 \cL。
\d	匹配一个数字字符。等价于 [0-9]
\D	匹配一个非数字字符。等价于 `[^0-9]`
\w	匹配字母、数字、下划线。等价于[A-Za-z0-9_]
\W	匹配非字母、数字、下划线。等价于 `[^A-Za-z0-9_]`
\s	匹配任何空白字符，包括空格、制表符、换行符、换页符等等。等价于 [ \f\n\r\t\v]。注意 Unicode 正则表达式会匹配全角空格符。
\S	匹配任何非空白字符。等价于 “`[^ \f\n\r\t\v]`”。
(pattern)	匹配 pattern 并获取这一匹配。所获取的匹配可以从产生的 Matches 集合得到，在VBScript 中使用 SubMatches 集合，在JScript 中则使用 $0…$9 属性。要匹配圆括号字符，请使用 '(' 或 ')'。
(?:pattern)	匹配 pattern 但不获取匹配结果，也就是说这是一个非获取匹配，不进行存储供以后使用。这在使用 "或" 字符 (\|) 来组合一个模式的各个部分是很有用。例如， 'industr(?:y\|ies) 就是一个比 'industry\|industries' 更简略的表达式。
(?=pattern)	正向肯定预查（look ahead positive assert），在任何匹配pattern的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如，"Windows(?=95\|98\|NT\|2000)"能匹配"Windows2000"中的"Windows"，但不能匹配"Windows3.1"中的"Windows"。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始。
(?!pattern)	正向否定预查(negative assert)，在任何不匹配pattern的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如"Windows(?!95\|98\|NT\|2000)"能匹配"Windows3.1"中的"Windows"，但不能匹配"Windows2000"中的"Windows"。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始。

修饰符	描述
i	ignore - 不区分大小写
g	global - 全局匹配；查找所有的匹配项
m	multi line - 多行匹配

2.常用正则

匹配空行	/^\s*$/
中文字符	[\u4e00-\u9fa5]
必须同时包含字符和数字和特殊字符，可用于密码验证	^(?=.\d)(?=.[a-zA-Z])(?=.[!@#$%^&?=+_])(.{8,18})$
匹配 HTML 标记	/<\s(\S+)(\s[^>])?>[\s\S]<\s\/\1\s*>/

二、JS

1. match

格式：stringObj.match(rgExp)

stringObj为字符串必选；rgExp为正则表达式必选项。

返回值：如果能匹配则返回结果数组，如果不能匹配返回null。

我们必须明确的是，这个方法跟其他语言是不同的。

全局标示g

当有g时，匹配整个字符串；当无g时，匹配首次的子符串。 var reg = / 正则表达式 /g


xxxxxxxxxx
var str = 'AAA18BBB99CCC86DDD13';
var res = str.match(/\d+/); //只能匹配字符串中出现的首个数字，未使用全局匹配符g
// 结果：res=[18]
// 当有g时：res = [18,99,86,13]

2. test

test() 方法用于检测一个字符串是否匹配某个模式.

语法：RegExpObject.test(string)

返回值：如果字符串 string 中含有与 RegExpObject 匹配的文本，则返回 true，否则返回 false。

三、Python

1. match、search、findall用法区别

match:从字符串首字母开始匹配，如果匹配成功，则返回Match对象,反之返回空。若想获取返回Match对象转为值，则用group()方法。
search：从这个整个字符串匹配，如果匹配成功，则返回Match对象,反之返回空。若想获取返回Match对象转为值，则用group()方法。
findall：匹配所有的字符串，返回的是list。


xxxxxxxxxx
import re
s = '3123C72D1D8E67'
r = re.match('\d',s)
print(r)
r1 = re.search('\d',s)
print(r1.group())
r2 = re.findall('\d',s)

结果


xxxxxxxxxx
<_sre.SRE_Match object; span=(0, 1), match='3'>
3
['3', '1', '2', '3', '7', '2', '1', '8', '6', '7']

===================================END=====================================

Flex布局

一、概要图


xxxxxxxxxx
.box{
  display: flex;    
  display: inline-flex; /*行内元素*/
  display: -webkit-flex; /* Safari Webkit内核的浏览器 */
}

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

二、容器属性

1.flex-direction属性*

flex-direction属性决定主轴的方向（即项目的排列方向）。


xxxxxxxxxx
flex-direction: row | row-reverse | column | column-reverse;

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

2.flex-wrap属性*

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。


xxxxxxxxxx
flex-wrap: nowrap | wrap | wrap-reverse;

nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。

3.flex-flow属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。


xxxxxxxxxx
flex-flow: <flex-direction> <flex-wrap>;

4.justify-content属性*

justify-content属性定义了项目在主轴上的对齐方式。


xxxxxxxxxx
justify-content: flex-start | flex-end | center | space-between | space-around;

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

5. align-items属性*

align-items属性定义项目在交叉轴（副轴/侧轴）上如何对齐。


xxxxxxxxxx
align-items: flex-start | flex-end | center | baseline | stretch;

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

6.align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。


xxxxxxxxxx
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

三、项目属性

1. order属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。


xxxxxxxxxx
order: <integer>;

2. flex-grow属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。


xxxxxxxxxx
flex-grow: <number>; /* default 0 */

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

3. flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。


xxxxxxxxxx
flex-shrink: <number>; /* default 1 */

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。

4. flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。


xxxxxxxxxx
flex-basis: <length> | auto; /* default auto */

5. flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。


xxxxxxxxxx
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

6.align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。


xxxxxxxxxx
align-self: auto | flex-start | flex-end | center | baseline | stretch;

Mock.js模拟后台数据

一、在VUE3中使用

第1步，在项目的根目录vue.config.js中写入


xxxxxxxxxx
module.exporte ={
 devSever:{
    before:require('./mymock/index.js')  // 引入mymock/index.js
 }
}

第2步，新建mymock/index.js文件


xxxxxxxxxx
const fs = require('fs')
const path = require('path')
const Mock = require('mockjs');   //mockjs 导入依赖模块
const JSON5 = require('json5')

// 读取json文件
function getJsonFile(filePath){
    //读取指定json文件
    var json = fs.readFileSync(path.resolve(__dirname,filePath), 'utf-8')
    // 解析返回
    return JSON5.parse(json)
}

// 返回一个函数
module exports = function(app){
    //监听http请求
    app.get('/user/userinfo',rep,res){
        // 每次请求时读取mock data的josn文件
        // getJSONFile方法定义了如何读取json文件并解析成数据对象
        var json = getJsonFile('./userInfo.json5');
        //将json传入Mock.mock方法中，生成的数据返回 给浏览器
        res.json(Mock.mock(json));   
    }
}

第3步，vue中使用


xxxxxxxxxx
import axios from 'axios'

......
axis.get('/user/userinfo')
.then(res=>{
  console.log(res);
})
.catch(err=>{
  console.log(err);
})

详细情况如下

创建项目vue-cli


xxxxxxxxxx
vue create mock-demo

进入项目mock-demo


xxxxxxxxxx
cd mock-demo
# run run serve

新建mymock/testMock.js


xxxxxxxxxx
const Mock = require('mockjs');   //mockjs 导入依赖模块
let id = Mock.mock('@id')  // 随机的id，字符串
console.log(id);

let obj = Mock.mock({
    id:"@id()",
    username:"@cname()",
    date:"@date()",
    ip:"@ip()",
    email:"@email()",
    // 图片，参数size,background,foreground,text
    avatar:"@image('200*200','red','#fff','avatar')",  
});
console.log(obj);

可以在终端中输入查看：node testmock.js

安装依赖


xxxxxxxxxx
# 使用axios发送ajax请求
cnpm install axios --save
# 使用mockjs产生模拟数据
cnpm install mockjs --save-dev
# 使用json5解决json文件，无法添加注释问题
cnpm install json5 --save-dev

新建mymock/userInfo.json5


xxxxxxxxxx
{
    id:"@id()",
    username:"@cname()",
    date:"@date()",
    ip:"@ip()",
    email:"@email()",
    // 图片，参数size,background,foreground,text
    avatar:"@image('200*200','red','#fff','avatar')",  
}

安装json5之后才可以使用注释，否则注释报错！

新建mymock/testJSON5.js


xxxxxxxxxx
const fs = require('fs')
const path = require('path')
const JSON5 = require('json5')

var json = fs.readFileSync(path.join(__dirname,'./userInfo.json5'),'utf-8')
// console.log(json)

var obj = JSON5.parse(json)
console.log(obj)

二、在jQuery中使用

在html文件中，引入jquery.js和mock.js


xxxxxxxxxx
<head>
    <script src="https://cdn.bootcss.com/jquery/3.6.0/jquery.min.js"></scrpt>
    <script src="https://cdn.bootcss.com/Mock.js/1.0.0/mock.min.js"></scrpt>
</head>

新建mymock/index.js文件（自定义的模拟数据）


xxxxxxxxxx
Mock.mock('/user/userinfo','get',{
     id:"@id()",
     username:"@cname",
     date:"@date()",
     ip:"@ip()",
     email:"@email()"

});

引入自定义的index.js文件


xxxxxxxxxx
<script src="./mymock/index.js"></scrpt>

发送ajax请求


xxxxxxxxxx
$.ajax({
    url:'/user/userinfo',
    dataType:'json',
    success:(data)=>{
        console.log(data);
    }
});

前端基础知识

HTML基础

基本构成

基本标签

链接a

图片img

表单form

按钮button

表格table

单元格合并

table属性

thead、tbody 、tfoot

有序列表、无序列表、自定义列表

框架

文本格式化

样式、区块

HTML5中input新类型

HTML其它

细表格线的2种方法

通过tabel属性设置

通过CSS设置（常见）

自适应手机屏幕meta标签

自动获取焦点

返回首页和上一页

设置网站ico图标

CSS基础

CSS引入方式

1. 行内样式

2. 内部样式表

3. 外部样式表

（1）链接式（推荐）

（2）导入式

（3）链接式和导入式的区别

4. 样式优先级

CSS单位

元素显示模式转换

CSS选择器

标签选择器

类选择器

ID选择器（不能重复）

分组（并集）选择器

复合（子集）选择器

属性选择

伪类选择器

通配选择器

兄弟元素选择器

后代（包含）选择器

子元素选择器

序选择器

伪元素

::first-line

::first-letter

::before

::after

::selection

CSS定位和浮动

定位机制

定位position

浮动float

CSS其它

ul li去掉圆点

<a>标签去掉下划线

文字大小、加粗、居中等

input属性

1.常用样式

2.复选框改变大小 还能改变他的样式

position属性，定位底部

背景图片透明

button禁用和开启

兄弟姐妹

children()与find()

单选和多选的设置选中

单选项的设置（选中）

多选项设置（选中）

登录框居中

JQUERY基础

引入和使用

1. 外部引入

（1）站外引用

（2）下载 jQuery到本地

`<a>`标签去掉下划线

2.复选框改变大小还能改变他的样式

、
和
元素