前端笔记

最新推荐文章于 2023-09-02 13:58:33 发布

bansheng8492

最新推荐文章于 2023-09-02 13:58:33 发布

阅读量632

点赞数

文章标签：前端 json 人工智能 ViewUI

原文链接：http://www.cnblogs.com/ciquankun/p/11570315.html

版权

浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面

HTML

html参考手册

html标签超文本标记语言，是一种创建于网页的标记语言，不一种编译语言

http 超文本传输协议

<!--声明是个html文件-->
<!--注释-->
<!Doctype html>
<html lang="zh-cn">  #这个lang表示语言，zh-CN是中文的意思，就是说，你整个文档的内容以中文为主，如果以英文为主，就写成lang='en'
<head>渲染时的配置项
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Demo</title>
</head>
<body>主页显示的内容

</body>
</html>

<!DOCTYPE html>声明为HTML5文档。

<html> </html>文档的开始和结束标记.是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。

<head> </head>定义了HTML文档的头.它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据，配置信息等，是给浏览器看的，你看到的是在body标签里面写的。
<title> </title>定义了网页(标签页的标题)标题,在浏览器标题栏显示

<body> </body>之间的文本是可见的网页的主体内容

html标签格式,严格封闭

HTML标签是由尖括号包围的关键字，如<html>, <div>等
HTML标签通常是成对出现的，比如：<div>和</div>，第一个标签是开始，第二个标签是结束。结束标签会有斜线。
也有一部分标签是单独呈现的，比如：<br/>、<hr/>、等。
标签里面可以有若干属性，也可以不带属性。

　　标签的语法：

内容部分标签名>
几个重要的属性
- id:定义标签的唯一ID,HTML文档树中唯一,
- class:为html元素定义一个或多个类名
- style:规定元素的行内样式

标签	意义
<title></title>	定义网页标题
<style></style>	定义内部样式表
<script></script>	定义JS代码或引入外部JS文件
<link/>	引入外部样式表文件
<meta/>	定义网页原信息

body内常用标签（HTML中的重点）

基本标签（块级标签和内联标签）

块级标签(独占一行)：p、h1--h6、hr、div,from ul ol li br table

内联标签(不独占一行)：b、i、u、s、span、img、a input , select,textarea

不加标签的纯文字也是可以在body中写的
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>

<p>段落标签</p> #独占一个段落

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

<!--换行-->
<br>

<!--水平线--><hr> #就是单独个一个水平线
每次加上一些内容，别忘了刷新一下页面，才能看到新添加的效果或者内容，其实上面这些标签很少用

关于标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。div是可以包含div的

p标签比较特殊，不能包含块级标签，p标签也不能包含p标签。可以试一下p标签套p标签，f12你会发现三个p标签

特殊字符（还有好多其他的，可以直接百度搜HTML特殊符号对照表）

内容	对应代码
空格(html中默认是不显示空格的，也就是说通过空格键加了空格也没有多个空格的效果，加多少个都是显示一个空格效果，需要这些特殊字符才能显示出空格效果)
>	>
<	<
&	&
¥	¥
版权标识（写公司网站的时候会用到）	©
注册（一个圆圈里面有个R）	®

HTML特殊符号表

img标签内联标签

<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息(其他标签也可以使用)" width="宽(数字)" height="高(宽高两个属性只用一个会自动等比缩放)">

a标签--超链接标签内联标签

所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。

不写href属性，<a>百度</a>显示普通文本

<a href="" >百度</a> #写了herf属性但是没有值的效果，有特殊效果，文字有颜色，有下划线，点击刷新但当前页面
<a href="http://www.baidu.com" target="_blank" >百度</a> 有属性有值，新的标签页打开

<a herf = "#top">回到顶部</a>设置锚点方式一  回到 a标签的name=top的位置,写的是a标签name属性对应的值,写法 href='#值'
<a herf ="top">回到顶部</a> 是设置锚点方式二 回到标签id=top的位置  ,任意标签都可以不用特意设置a标签   herf 的值不用加#
target=_self 默认当前页面打开
target=_blank 打开一个新的标签页

列表

ul 无序标签

<ul type="disc">  #type控制样式
  <li>第一项</li>
  <li>第二项</li>
</ul>

　type属性：

disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）

ol 有序标签

<ol type="1" start="2"> #start 空着起始
  <li>第一项</li>
  <li>第二项</li>
</ol>

type属性： start是从数字几开始

1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马

dl 标题列表

<dl>
  <dt>标题1</dt>
  <dd>内容1</dd>
  <dt>标题2</dt>
  <dd>内容1</dd>
  <dd>内容2</dd>
</dl>

table 表格(重点)

table 表格属性 border=1

thead 标题部分

tbody内容部分

tr 一行

th 一个单元格(标题里的有加粗效果)

td 一个单元格

<table border='1'>
  <thead> #标题部分
  <tr> #一行
    <th>序号</th> #一个单元格
    <th>姓名</th>
    <th>爱好</th>
  </tr>
  </thead>
  <tbody> #内容部分
  <tr> #一行
    <td>1</td> #一个单元格
    <td>Egon</td>
    <td>杠娘</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Yuan</td>
    <td>日天</td>
  </tr>
  </tbody>
</table>

table属性

border: 表格边框.
cellpadding: 内边距（内边框和内容的距离）
cellspacing: 外边距.（内外边框的距离）
width: 像素百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行 td里使用
colspan: 单元格横跨多少列（即合并单元格） td里使用

form表单标签

表单用于向服务器传输数据，从而实现用户与Web服务器的交互

表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。

action=“网址”将数据提交到网址

表单还可以包含textarea、select、fieldset和 label标签。

input标签

用户名(普通文本):<input type="text" name="username"/>
密码(密文):<input type="password" name="password"/>
性别:单选框
<input type="radio" name ="sex" value="1"/>男
<input type="radio" name ="sex" value="2"/>女
爱好:多选框
<input type="checkbox" name="hobby" value="1"/>抽烟  后台得到列表 hobby:[1,2,3]
<input type="checkbox" name="hobby" value="2" checked="checked"/>喝酒 
<input type="checkbox" name="hobby" value="3"/>烫头
<input type="checkbox" name="hobby" value="4"/>睡觉
出生日期:
<input type="data" />
<div>
<input type="submit" value="确定"/>
</div>

上传头像:
<input type="file"/>

input文本输入框,input标签如果想将数据提交到后台那么必须写name

input文本选择框 ,必须写name 和 value

input选择框name相同算是一组选择

checked="checked"属性默认选中(属性名和属性值一样的属性可以简写 ---只写属性名)

name：表单提交时的“键”，注意和id的区别
value：表单提交时对应项的值
- type="button", "reset", "submit"时，为按钮上显示的文本年内容
- type="text","password","hidden"时，为输入框的初始值
- type="checkbox", "radio", "file"，为输入相关联的值
checked：radio和checkbox默认被选中的项
readonly：text和password设置只读,可以被提交
disabled：所有input均适用,不能被提交

type属性值	表现形式	对应代码
text	单行输入文本
password	密码输入框（不显示明文）	<input type="password" />
date	日期输入框	<input type="date" />
checkbox	复选框	<input type="checkbox" checked="checked" name='x' />
radio	单选框	<input type="radio" name='x' />
submit	提交按钮	<input type="submit" value="提交" /> #发送浏览器上输入标签中的内容，配合form表单使用，页面会刷新
reset	重置按钮	<input type="reset" value="重置" /> #页面不会刷新，将所有输入的内容清空
button	普通按钮	<input type="button" value="普通按钮" />
hidden	隐藏输入框	<input type="hidden" />
file	文本选择框	<input type="file" /> （等学了form表单之后再学这个）
button	普通的按钮	<button> 在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。</button>

<form action="http://127.0.0.1:8848" method="post"> method的值get显式的  post隐式的
  
</form>

from表单

action:值是一个网址,将数据传输到网址
method:提交方法,默认是get,效果是在网址上可以看到提交的数据

注意,想通过form表单标签来提交用户输入的数据,必须在form表单里面写你的input标签,并且必须有个提交按钮,按钮有两种,1: input标签type='submit', 2: botton按钮

select 下拉框

<form action="" method="post">
  <select name="city" id="city" multiple>
    <option value="1">北京</option>
    <option selected="selected" value="2">上海</option> #默认选中，当属性和值相同时，可以简写一个selected就行了
    <option value="3">广州</option>
    <option value="4">深圳</option>
  </select>
</form>

multiple属性,多选,name属性提交数据时的键,option标签中value属性的值需要写,是将来提交数据的真实数据city:[1,2,3,4]


单选下拉框:
<select name='city'>
    <option value='a'>沙河</option>
    <option value='b'>沙河</option>
</select>  
提交的数据:
    city:a

多选下拉框
<select name='hobby' multiple='multiple'>
    <option value='a'>肤白</option>
    <option value='b'>貌美</option>
    <option value='c'>大长腿</option>
</select>
提交的数据:
    hobby:['a','b','c']

multiple：布尔属性，设置后为多选下拉框，否则默认单选
disabled：禁用
selected：selcet中的option中的属性默认选中该项
value：定义提交时的选项值

label标签

　定义：<label> 标签为 input select元素定义标注（标记）。如果不用这个label给input标签一个标记，input会变黄，不影响使用，只是提示你，别忘了给用户一些提示，也就是这个label标签。
　　　　说明：

label 元素不会向用户呈现任何特殊效果。但是点击label标签里面的文本，那么和他关联的input标签就获得了光标，让你输入内容
<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。

<form action="" >
  <label for="username">用户名</label>  #for和input的id属性一样，就关联在一起了
  <input type="text" id="username" name="username">
  <label>用户名：<input type ="text" name=""><label>
</form>
　1.label 元素不会向用户呈现任何特殊效果。但是点击label标签里面的文本，那么和他关联的input标签就获得了光标，让你输入内容
　2.<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。

textarea多行文本

<textarea name="memo" id="memo" cols="30" rows="10">
  默认内容
</textarea>

　　属性说明：

name：名称
rows：行数 #相当于文本框高度设置
cols：列数 #相当于文本框长度设置
disabled：禁用
maxlength

CSS

css介绍: CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素，给HTML设置样式，让它更加美观。

语法结构

div{
    color:green;
    background-color:black;
}
选择器{css样式:样式对应的值}

css引入方式

<!--方式一-->内部样式
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color:red;
        }
    </style>
</head>

<!--方式二-->行内样式(内联样式)
<div style="color: #ccff2d;background-color: #ccff2d">
    1234567，7654321
</div>

/*方式三*/外部样式
1.创建一个css文件
格式如下
div{
    color:red;
}

2.在html中引入
 <link rel="stylesheet" href="div.css">引入css文件

选择器

基本选择器

元素选择器(标签名)
```
div{
 color:red;
}
```
id选择器 --按照id属性找到选择器
```
#d2{
  color:yellow;
}
```

类选择器标签内设置相同的class值

.d2{
   color:yellow; 
}

/*样式类名不要用数字开头（有的浏览器不认）。*/

/*标签中的class属性如果有多个，要用空格分隔。*/

<div class='c1 c2 c3 c4'></div>  

c2和c1相同的样式,会覆盖c1的,使用c2的
class类值可以是多个,中间空格分割

通用选择器--对所有的标签都生效

* {  /*  *表示所有的标签*/
  color: white;
}

组合选择器

后代选择器(子子孙孙) 选择器空格选择器

/*css*/
.c1 a{
 color:green;
 background-color:salmon ;
}

/*html*/
<body>
<div class="c1">
    <a href="">爷爷</a>
    <div>
        <a href="">葫芦娃</a>
        <div>
            <a href="">葫芦娃2</a>
        </div>
    </div>
</div>
</body>

/*a标签特殊  必须选中a标签才可以修改样式  不能继承父级标签的样式*/

儿子选择器(只找儿子) 选择器 >选择器

/*css*/
.c1>a{
 color:green;
 background-color:salmon ;
}

/*html*/
<body>
<div class="c1">
    <a href="">爷爷</a>
    <div>
        <a href="">葫芦娃</a>
        <div>
            <a href="">葫芦娃2</a>
        </div>
    </div>
</div>
</body>

毗邻选择器 选择器1+选择器2 找的是选择器1下边的紧挨着选择器1的选择器2

/*css*/
.c1+p{
 color:green;
 background-color:salmon ;
}

/*html*/
<p>lll</p>
<p>ssss</p>
<div class="c1">
    <a href="">爷爷</a>
    <div>
        <a href="">葫芦娃</a>
        <div>
            <a href="">葫芦娃2</a>
        </div>
    </div>
</div>
<p>lll</p>
<p>ssss</p>

弟弟选择器 选择器1~选择器2 选择器1下方的所有的与选择器1并列的选择器2

/*css*/
.c1~p{
 color:green;
 background-color:salmon ;
}

/*html*/
<p>lll</p>
<p>ssss</p>
<div class="c1">
    <a href="">爷爷</a>
    <div>
        <a href="">葫芦娃</a>
        <div>
            <a href="">葫芦娃2</a>
        </div>
    </div>
</div>
<p>lll</p>
<p>ssss</p>

属性选择器

通过标签的属性找到对应的标签

[xxx]{color:red;} 找到有xxx属性的所有标签
[xxx='p2']{color:red;} 找到有xxx属性的并且属性值为p2的所有标签
p[title]{xx:xx;}  找到所有有title属性的p标签
p[title='p2']{xx:xx;} 找到所有有title属性的并且属性值为p2的p标签
/*css*/

p[title]{/*通过属性找标签:找到所有含有title属性的p标签*/
            color:red;
        }
p[title="p3"]{/*找到所有title属性为"p3"的p标签*/
            color:rebeccapurple;
        }
/*找到所有含有title属性的标签并且title的值为hello的 元素*/
[title="hello"] {
  color: red;
}

/*html*/
<p >p1</p>
<p title="p2">p2 </p>
<p title="p3">p3</ptitle>
<span title="hello">ss</span>

属性的正则


/*找到所有title属性以hello开头的元素*/
[title^="hello"] {
  color: red;
}

/*找到所有title属性以hello结尾的元素*/
[title$="hello"] {
  color: yellow;
}

/*找到所有title属性中包含（字符串包含）hello的元素*/
[title*="hello"] {
  color: red;
}

/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/
[title~="hello"] {
  color: green;
}

分组和嵌套

分组多个选择器的样式相同可以用使用用法:选择器1,选择器2

/*css*/
div,p{
 color: red;
}
/*html*/
<div>div1</div>
<p>p1</p>

解释:div选择器和p选择器找到的所有标签设置共同的样式.

嵌套多种选择器可以混合起来使用，比如：.c1类内部所有p标签设置字体颜色为红色。
```
.c1 p {
  color: red;
}
```

过滤

div.c1{x:XX}找到c1类值的div标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div.c1{
            color: red;
        }
    </style>
</head>
<body>
<div>
    div1
    <span class="c1" >span</span>
</div>
<div class="c1">div2</div>
<div class="c1">div3</div>
</body>
</html>

伪类选择器

可以根据标签的不同状态再进行进一步的区分，比如一个a标签，点击前，点击时，点击后有不同的三个状态。

/* 未访问的链接 */
a:link {
  color: #FF0000
}

/* 已访问的链接 */
a:visited {
  color: #00FF00
} 

/* 鼠标移动到链接上 */  这个用的比较多 并且所有的标签都可以使用
a:hover {
  color: #FF00FF
} 

/* 选定的链接 */ 就是鼠标点下去还没有抬起来的那个瞬间，可以让它变颜色
a:active {
  color: #0000FF
}

/*input输入框获取焦点时样式*/
input:focus {   #input默认的有个样式，鼠标点进去的时候，input框会变浅蓝色的那么个感觉
  #outline: none;
  background-color: #eee; #框里面的背景色
}

伪元素选择器

first-letter 文本内容首字母设置

常用的给首字母设置特殊样式

/*css*/
div:first-letter{
        color: red;
        font-size: 20px;
    }

/*html*/
<div>
    呃呃呃的
    撒返回数据咖啡杯凯撒dsafd
    s发的萨芬机开绿灯撒加陌生地
    方大撒把发生的纠纷就是快乐大巴
</div>

before

/*css*/  /*在每个<div>元素之前插入内容*/
div:before {
          content:"*";
          color:red;
        }

/*html*/
<div>
    鹅鹅鹅，曲项向天哥
</div>

after

/*css*/  /*在每个<div>元素之后插入内容*/
div:after {
          content:"*";
          color:red;
        }

/*html*/
<div>
    鹅鹅鹅，曲项向天哥
</div>


/*上面的这些前后添加的文本内容在页面上是无法选中的，正常的标签或者文字是可以选中的。*/

选择器的优先级

总结：当选择器相同的时候，按照顺序来看css样式，谁最后就按照谁渲染

css继承权重为0

选择器优先级

权重越高,对应选择器样式会被优先显示
组合选择器,各个选择器权重相加
权重不进位,11个类选择器组合到一起,也没有一个id选择器优先级大
默认css样式是可以继承的,继承的权重为0
权重相同的选择器,最后一个生效
权重排序:
1.继承:0
2.元素选择器:1
3.类选择器:10
4.id选择器:100
5.内联样式选择器:1000
6.div{color:red!import;}最高级别

   

   
   ![img](https://images2018.cnblogs.com/blog/867021/201803/867021-20180305155201408-1680872107.png)

## CSS属性相关

### 宽和高

width属性可以为元素设置宽度。

height属性可以为元素设置高度。

**块级标签才能设置宽度，内联标签的宽度由内容来决定。**

```css
块级标签
/*css*/

div{
    height: 100px;
    width: 80px;
    background-color: red;

}
span{
    height: 20px;
    width: 40px;
    background-color: yellow;
}
/*html*/
<div>div</div>
<span>span1</span>

CSS样式

字体属性--font

字体:font-family

字体大小 font-size

字重 font-weight

详细信息介绍1

详细信息介绍2

字体font-family 从左往右找浏览器能支持的字体

div{
 font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif;/*从左往右找到浏览器能识别的字体,找到就渲染*/
}


<div>明月几时有，把酒问青天</div>

字体大小 font-size 浏览器默认字体大小16px

/*css*/
div{
 font-size: 30px;
}
/*html*/
<div>明月几时有，把酒问青天</div>

字重 font-weight

字重的值描述
normal 默认值，标准粗细
bold 粗体
bolder 更粗
lighter 更细
100~900 设置具体粗细，400等同于normal，而700等同于bold
inherit 继承父元素字体的粗细值

字重的值	描述
normal	默认值，标准粗细
bold	粗体
bolder	更粗
lighter	更细
100~900	设置具体粗细，400等同于normal，而700等同于bold
inherit	继承父元素字体的粗细值

文本颜色---- color

十六进制值 - 如: ＃FF0000 #前两位是表示红，中间两位表示绿，后面两位表示蓝，F是最高级别，0表示最低级别（无色）
一个RGB值 - 如: RGB(255,0,0) #红绿蓝就是RGB的意思，第一个参数是红，最高255，最低0
颜色的名称 - 如: red
还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。

文字属性 --text

文字属性详细信息1

文字属性详细信息2

文字水平对齐 text-align

div{
            width: 200px; /* 如果标签设置百分比  按照父级的宽度的百分比来*/
            height: 100px;
            border: 1px solid #ccff2d;
            text-align: center;
 }
text-align: center;居中对齐
text-align: right;右对齐
text-align: left;左对齐

值	描述
left	左边对齐默认值
right	右对齐
center	居中对齐
justify	两端对齐

line-height 值与水平一直就是垂直居中

文字装饰 text-decoration 属性用来给文字添加特殊效果。

a{
  text-decoration: none;
}
/*常用来给a标签去除下划线*/

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
inherit	继承父元素的text-decoration属性的值。

首行缩进 text-indent 将段落第一行缩进单位建议em
```
p{
    text-indent:32px;
}

p{
    text-indent:2em;
}
```

垂直对齐 line-height

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            text-align: center;
            line-height:200px;
        }
    </style>
</head>
<body>

<div>
    <span>
        xxxxx
    </span>

</div>

</body>
</html>

背景属性-- background

背景属性1

背景属性2

背景颜色 background-color

/*背景颜色*/
background-color: red;

背景图片 background-image

/*背景图片   9宫格  */
background-image: url('1.jpg');  /*url里面是图片路径，如果和你的html文件在一个目录下，使用这种相对路径就行了，来个葫芦娃图片试一下*/ 

/*默认平铺*/

background-repeat: no-repeat; 不平铺
/*
 背景重复
 repeat(默认):背景图片沿着x轴和y轴重复平铺，铺满整个包裹它的标签
 repeat-x：背景图片只在水平方向上平铺
 repeat-y：背景图片只在垂直方向上平铺
 no-repeat：背景图片不平铺
*/

/*背景位置*/  
background-position: left top; 
background-position:  center top;
background-position: right top;
background-position: left center;
background-position: center center;
background-position: right center;
background-position: right bottom;
background-position: center bottom;
background-position: right bottom;
background-attachment: fixed;/*固定位置*/
/*background-position: 200px 200px;*/ #200px 200px 
是距离父级标签的左边和上边的距离，以前大家都用雪碧图，就是将很多的网页上需要的小图片组合成一个大图，用这个图中哪个位置的小图片，就通过这个参数来调整，看下面的示例操作，现在很少用这个了

/*简写方式 background: yellow url() no-repeat 100px 200px*/
/* 背景颜色  背景图片的地址 是否平铺 图片位置 */

盒子模型

边框属性 ---border

详解1

详解2

border-width 宽度

div{
 border-style: solid;
 border-color: blue;
 border-width: 10px;
 width: 100px;
 height: 200px;

}

border-style 样式

#i1 {
  border-top-style:dotted;
  border-top-color: red;
  border-right-style:solid;
  border-bottom-style:dotted;
  border-left-style:none;
}

border-left-style:dotted
border-left: 2px solid red;
border-right 2px dashed red;

值	描述
none	无边框。
dotted	点状虚线边框。
dashed	矩形虚线边框。
solid	实线边框。

border-color 颜色

圆角 border-radius

div{
    border-radius:50%;
}


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            /*border-style: dotted;*/
            /*border-color: red;*/
            /*border-width: 10px;*/
            /*border: 10px solid yellow;*/
            border-left:10px solid yellow ;
            border-right:10px dashed red ;
            border-radius: 5%; 
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

简写

#i1 {
  border: 2px solid red;
}
/*边框宽度  边框样式  边框颜色*/

调试窗口 document.body.contentEditable=true 可编辑网页

display

详解1

详解2

块级标签就算设置了高度宽度也会独占一行除非设置 inline-block

值	意义
display:"none"	隐藏标签,不占原来的位置 .HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block"	将内联标签转成块级标签默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:"inline"	将块级标签转成内联标签按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block"	使元素同时具有行内元素和块级元素的特点。不独占一行,能设置高度宽度

display:"none"与visibility:hidden的区别：

visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

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

        div{
            height: 200px;
            width: 200px;
            border: 1px solid red;
            /*display: inline;*/
            /*display: inline-block;*/
            display: none; /* 隐藏标签 */
        }

        span{
            height: 200px;
            width: 200px;
            border: 1px solid green;
            /*display: block;*/

        }
        p{
            height: 200px;
            width: 200px;
            border: 1px solid yellow;
            display: inline;

        }

    </style>
</head>
<body>
<div>xxxxxxx</div>
<span>span1111</span>
</body>
</html>

css盒子模型

理论详解1

理论详解2

占用空间大小 content+padding+border

margin 外边距:用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。 如果旁边没有其他标签,按照父级标签的位置进行移动
```
.margin-test {
  margin-top:5px;
  margin-right:10px;
  margin-bottom:15px;
  margin-left:20px;
}

div{
margin 2px 10px 6px 7px /*上右下左*/
}

.mycenter {
  margin: 0 auto;  /*上下0像素，左右自适应，居中的效果*/
}
```
挨着的盒子两个盒子的间距取margin的最大值作为双方的距离

padding 内边距:用于控制内容与边框之间的距离；

.padding-test {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 20px;
}
div{
padding 2px 10px 6px 7px /*上右下左*/
}

border边框为要在内边距和内容外的边框
content内容盒子的内容,显示文本和图像

float浮动

详解1

详解2

一般进行页面布局,会脱离了正常的文档流 , 会造成父级标签塌陷问题

文本会被挤到到一边有display:inline-block效果

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

清除浮动(解决塌陷问题)---clear

给父级标签设置高度
clear:both 清除浮动在父级下层的设置,不允许上边有浮动元素

通过伪元素选择器清楚浮动

.clearfix:after{
 content:"";
    display:block;
    clear:both;
}
示例

/*css*/
.c1{
 width: 100px;
    height: 100px;
 background-color: red;
 float: left;
}
.c2{
   width: 100px;
   height: 100px;
   background-color: fuchsia;
   float: right;
}
.clearfix:after{
 content:"";
    display:block;
    clear:both;
}
.c3{
   height: 100px;
   background-color: green;
}
/*html*/
<div class="clearfix">
    <div class="c1">hehe1</div>
    <div class="c2">hehe2</div>
</div>
<div class="c3">hehe3</div>

clear 值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。****

overflow溢出属性

详解1

详解2

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

overflow（水平和垂直均设置）
overflow-x（设置水平方向，只出现x轴的滚动条）
overflow-y（设置垂直方向，只出现y轴的滚动条）

/*css*/
        .c1{
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
            overflow: auto;
        }

/*html*/
    <div class="c1">菩提本无树，明镜亦非台，本来无一物，何处惹尘埃
        菩提本无树，明镜亦非台，本来无一物，何处惹尘埃
        菩提本无树，明镜亦非台，本来无一物，何处惹尘埃
        菩提本无树，明镜亦非台，本来无一物，何处惹尘埃
        菩提本无树，明镜亦非台，本来无一物，何处惹尘埃
        菩提本无树，明镜亦非台，本来无一物，何处惹尘埃
    </div>

定位属性

定位(position)

脱离文档流

static 无定位

relative(相对定位) 按照原来的位置移动还占着原来的空间

div{
    position:relative;
    left:100px;  距离原位置的左边框右移  100px
}

absolute(绝对定位)--不占用自己原来的位置移动时如果父级标签或者祖先悲标签设置了绝对相对定位就会按照整个父级标签或祖先标签文档进行定位.

如果父级标签或者祖先悲标签都没有设置绝对相对定位,就会按照整个html文档进行移动.
```
div{
 position:absolute;
    left:100px;  距离整个文档的左边框100px
    top:100px;  距离整个文档顶部100px;
}
```

回到顶部示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1,.c3{
            background-color: red;
            height: 500px;
            width: 600px;
        }
        .c2{
            background-color: green;
            height: 500px;
            width: 600px;
        }

        #back_top{
            height: 40px;
            width: 80px;

            position: fixed;
            right: 40px;
            bottom: 40px;
            background-color: black;

            text-align: center;
            line-height: 40px;
        }
        #back_top a{
            color:white;
            text-decoration: none;
        }


    </style>
</head>
<body>

<a name="xxx">这是顶部位置</a>

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

<span id="back_top">
    <a href="#xxx">回到顶部</a>
</span>


</body>
</html>

fixed(固定) 按照整个窗口进行移动
```
/*示例*/
```

z-index设置层级

只有定位了的元素才能设置

z-index 值表示谁压着谁，数值大的压盖住数值小的，
只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素float不能使用z-index
z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
从父现象：父亲的级别低，儿子级别再高也没用

模态对话框

#自定义的一个模态对话框示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>自定义模态框</title>
  <style>
    .cover {
      background-color: rgba(0,0,0,0.65); #rgba的最后一个参数就是透明度的意思，所以如果我们这样写，就不需要写下面那个opcity了，但是这个只表示的背景颜色的透明度，opcity是标签的透明度及标签的内容(包括里面的文字)及标签下面的子标签的透明度
      position: fixed;
      top: 0;
      right: 0;  top\right\bottom\left都设置为0，意思就是全屏，这个标签把全屏都覆盖了
      bottom: 0;
      left: 0;
      z-index: 998;
      #opcity:0.4; #设置元素的透明度
    }

    .modal {
      background-color: white;
      position: fixed;
      width: 600px;
      height: 400px;
      left: 50%;  #设置了left：50%和top：50%，你就会发现，你这个标签的左上角相对于页面的左面是50%，上面是50%，所以我们还要移动窗口，往左移动标签宽度的一半，往上移动高度的一半就行了。就是下面的margin设置
      top: 50%;
      margin: -200px 0 0 -300px; #左下右上，别忘了，往左移动要负值，往上移动要负值，因为它的移动是按照自己标签的左上角来移动的。
      z-index: 1000;
    }
  </style>
</head>
<body>

<div class="cover"></div>
<div class="modal"></div>
</body>
</html>


自定义模态框示例

opacity--标签透明度

rgba针对颜色

opacity针对标签 0~1

示例

更改光标

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
<p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>
</body>
</html>

JavaScript

　注：ES6就是指ECMAScript 6。

尽管 ECMAScript 是一个重要的标准，但它并不是 JavaScript 唯一的部分，当然，也不是唯一被标准化的部分。实际上，一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：

核心（ECMAScript）
文档对象模型（DOM） Document object model (整合js，css，html)
浏览器对象模型（BOM） Broswer object model（整合js和浏览器）

JavaScript 引入方式

script标签内写代码

<!--script可以放在body里也可以放在head里-->
<script>
        alert("欢迎来到王者荣耀");
</script>

引入额外的JS文件
```
<script src="js文件路径"></script>
```

JavaScript 语言规范

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

结束符 ;

JavaScript 语言基础

变量声明

JavaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头。
声明变量使用 var 变量名; 的格式来进行声明
变量名是区分大小写的。
推荐使用驼峰式命名规则。首字母大写
保留字不能用做变量名。
关键字不用记
```
abstract
boolean
byte
char
class
const
debugger
double
enum
export
extends
final
float
goto
implements
import
int
interface
long
native
package
private
protected
public
short
static
super
synchronized
throws
transient
volatile
```
*补充：（ES6新特性，等咱们学到 VUE 在细说，简单了解一下就行了**）*

　　　　　　ES6新增了let命令，用于声明变量。其用法类似于var，但是所声明的变量只在let命令所在的代码块内有效。例如：for循环的计数器就很适合使用let命令。
```
for (let i=0;i<arr.length;i++){...}
```
　　　　　　ES6新增const用来声明常量。一旦声明，其值就不能改变。这个东西就是为了定义一个固定的常量，供大家使用，这个常量不会改变
```
const PI = 3.1415;
PI // 3.1415

PI = 3
// TypeError: "PI" is read-only
```

JavaScript 数据类型

JavaScript拥有动态类型（python也是动态的）

var x;  // 此时x是undefined  静态语言比如c：创建变量的时候，要指定变量的类型，python3.6也出现了类型注解的新特性def func(x:int,y:int) --> int: return x + y，意思是参数是int类型，返回值也是int类型的，就是个注释的作用
var x = 1;  // 此时x是数字
var x = "Alex"  // 此时x是字符串

数值(number)

//示例
var a=1;
var b=1.1;
typeof a;//---"number"
typeof b;//--"number"
var c=123e5;//----12300000  
var d=123e-5;//---0.00123

字符串(string)

var a="陈硕";
typeof a;//"string"

数值--字符串转换

var a="1";
var b=parseInt(a);
typeof b;//"number"

var c="1.11";
var c=parseFloat(c);

var a="bbb1";
var b=parseInt(a);//b=NaN  not a number
typeof NAN ;//"number"
//NaN不相等NaN

//字符串拼接
var a="hello";
var b = "world";
var c=a+b;  //c=helloworld


var a="hello";
a.length;//5

字符串方法	说明
.length #不加括号的是属性	返回长度
.trim() #得到一个新值去除空格	移除空白
.trimLeft()	移除左边的空白
.trimRight()	移除右边的空白
.charAt(n) #n类似索引，从0开始，超过最大值返回''空字符串	返回第n个字符
.concat(value, ...) #s='hello';s.concat('xx');得到helloxx	拼接
.indexOf(substring, start) #这个start是从索引几开始找，没有返回-1	子序列位置
.substring(from, to) #不支持负数，所以一般都不用它，了解一下就行了	根据索引获取子序列
.slice(start, end) #var s1='helloworld';s1.slice(0,-5)看结果，就用它	切片
.toLowerCase() #全部变小写	小写
.toUpperCase() #全部变大写	大写
.split(delimiter, limit)#分隔,s1.splite(' '),后面还可以加参数s1.split(' '，2),返回切割后的元素个数	分割

布尔值(boolean)

var a = true;
var b = false;

　""(空字符串)、0、null、undefined、NaN都是false。

null 和undefined

null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;
undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。

var a;
typeof a;// "undefined"

Object对象

所有的数据类型都是对象

var a= new Sting("sss");
typeof a;//"object"

数组

var a = [123, "ABC"]; 
typeof a;  // 输出"object"
var b = new Array ([123, "ABC"]); 
typeof b;  // 输出"object"


//数组常用方法
var a = [11,22,33];
索引取值 -- a[0];
数组长度 -- a.length;
尾部追加 -- a.push(44);
尾部删除 -- a.pop()
    示例:
        var a = [11, 22, 33, 44];
        var b = a.pop();
        结果:
            a -- [11, 22, 33]
            b -- 44
头部添加 -- a.unshift('aa')
    示例:
         var a = [11, 22, 33];
         a.unshift('aa')
         a --  ["aa", 11, 22, 33]
头部删除 -- shift()
    示例:
        var a = ["aa", 11, 22, 33];
        a.shift() -- 'aa'
        a -- [11, 22, 33];

切片 -- slice()
    var b = a.slice(0,3);
    b -- [11, 22]
反转 reverse()
    var a = [11,22,33];
    a.reverse() 
    a -- [33,22,11]

数组元素拼接 join
    示例:
        var a = ['aa','bb','cc'];
        var b = a.join('_');
        b -- "aa_bb_cc";

数组合并 concat
    var a = ["aa", "bb", "cc"];
    var b = [11,22];
    var c = a.concat(b);
    c -- ["aa", "bb", "cc", 11, 22];
排序 sort 比较尬
    示例:
        var a = [12,3,25,43];
        对a进行升序排列:
        1.定义函数
            function sortNumber(a,b){
                return a - b
             };
        2. var b = a.sort(sortNumber)
        b -- [3, 12, 25, 43]
    sort 规则:
          如果想按照其他标准进行排序，就需要提供比较函数，也就是自己提供一个函数提供排序规则，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
　　　　　　若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
　　　　　　若 a 等于 b，则返回 0。
　　　　　　若 a 大于 b，则返回一个大于 0 的值。

删除 .splice() 
    示例:
        var a = ['aa','bb',33,44];
        单纯删除:a.splice(1,1)
        a -- ["aa", 33, 44]
        
        删除在替换新元素:
        var a = ["aa", 33, 44];
        a.splice(0,2,'hello','world');
        a --  ["hello", "world", 44];
    三个参数介绍:
        参数：1.从哪删(索引), 2.删几个  3.删除位置替换的新元素(可多个元素)

数组常用方法	说明
.length	数组的大小
.push(ele)	尾部追加元素
.pop()	获取尾部的元素
.unshift(ele)	头部插入元素
.shift()	头部移除元素
.slice(start, end)	切片
.reverse() #在原数组上改的	反转
.join(seq)#a1.join('+')，seq是连接符	将数组元素连接成字符串
.concat(val, ...) #连个数组合并,得到一个新数组，原数组不变	连接数组
.sort()	排序
.forEach() #讲了函数再说	将数组的每个元素传递给回调函数
.splice() #参数：1.从哪删(索引), 2.删几个 3.删除位置替换的新元素(可多个元素)	删除元素，并向数组添加新元素。
.map() #讲了函数再说	返回一个数组元素调用函数处理后的值的新数组

自定义对象---python中的字典

JavaScript的对象（Object）本质上是键值对的集合（Hash结构），但是只能用字符串作为键。

键可以不加引号:
var a = {name:'alex',age:48};
//取值的两种方式

var a = {"name": "Alex", "age": 18};
console.log(a.name);
console.log(a["age"]);

类型查询

typeof是一个一元运算符（就像++，--，！，- 等一元运算符），不是一个函数，也不是一个语句。

typeof "abc"  // "string"
typeof null  // "object"
typeof true  // "boolean"
typeof 123  typeof NAN // "number"
typeof undefined  //"undefined"

"undefined "- 如果变量是 Undefined 类型的
"boolean "- 如果变量是 Boolean 类型的
"number" - 如果变量是 Number 类型的
"string" - 如果变量是 String 类型的
"object "- 如果变量是一种引用类型或 Null 类型的，需要注意的是typeof null返回为object,因为特殊值null被认为是一个空的对象引用。

运算符

算术运算符

+ - * / % ++ --  //i++,是i自加1，i--是i自减1   i++的这个加1操作优先级低，先执行逻辑，然后再自加1，而++i，这个加1操作优先级高，先自加1，然后再执行代码后面的逻辑

示例:
    var a = 100;
    a++;或者++a; -- 101 a自增1

    a++和++a的区别,示例:
    var a = 102;
    a++ == 102; -- true
    a -- 103;
    ++a == 103; -- false
    a -- 104;

比较运算符

&& || !  #and，or，非（取反）!null返回true
示例:
    var a = true;
    var b = true;
    var c = false;
    a && b; -- true
    a && c; -- false
    a || c; -- true
    !c; -- true

赋值运算符

= += -= *= /= 
示例: n += 1其实就是n = n + 1

流程控制

if判断

简单if-else判断
    var a = 4;
    if (a > 5){
        console.log('a大于5');

    }
    else{
        console.log('小于5');
    };

多条件判断
var a = 10;
if (a > 5){
  console.log("a > 5");
}else if(a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}

switch切换

括号里必须是数字

示例:
    var a = 1;
    switch (a++){ //这里day这个参数必须是一个值或者是一个能够得到一个值的算式才行，这个值和后面写的case后面的值逐个比较，满足其中一个就执行case对应的下面的语句，然后break，如果没有加break，还会继续往下判断
        case 1:
            console.log('等于1');
            break;
        case 3:
            console.log('等于3');
            break;
        default:  case都不成立,执行default
            console.log('啥也不是!')    

    }

for循环

for (var i=0;i<10;i++) {  //就这么个写法，声明一个变量，变量小于10，变量每次循环自增1，for(;;){console.log(i)}；这种写法就是个死循环，会一直循环，直到你的浏览器崩了，就不工作了，回头可以拿别人的电脑试试~~
  console.log(i);
}
循环数组：
var l2 = ['aa','bb','dd','cc']
方式1
for (var i in l2){
   console.log(i,l2[i]);
}
方式2
for (var i=0;i<l2.length;i++){
　　console.log(i,l2[i])
}

循环自定义对象：
var d = {aa:'xxx',bb:'ss',name:'小明'};
for (var i in d){
    console.log(i,d[i],d.i)  #注意循环自定义对象的时候，打印键对应的值，只能是对象[键]来取值，不能使用对象.键来取值。i取出来是字符串
}

//switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句。

while循环

var i = 0;
var a = 10;
while (i < a){
    console.log(i);
    if (i>5){
        continue;
        break;
    }
    i++;
};

三元运算符

var c = a>b ? a:b;

函数

定义函数

普通函数
function f1(){
    console.log('111');
}
f1();  执行函数

带参数的函数
function f1(a,b){
    console.log('111');
}
f1(1,2);

带返回值的函数
function f1(a,b){
    return a+b;
}
f1(1,2); -- 3

//返回值不能有多个
function f1(a,b){
    return a,b;//错的
}
f1(1,2); -- 2
function f1(a,b){
    return [a,b];  //想要多个返回值,需要换一种数据类型
}
f1(1,2); -- [1, 2]

匿名函数:
    var f1 = function(){
        console.log('111');
    }
    f1();

自执行函数
    (function(a,b){
        console.log(a+b);
    })(1,2);

函数的全局变量和局部变量

局部变量：

    在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。

全局变量：

    在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

变量生存周期：

    JavaScript变量的生命期从它们被声明的时间开始。

    局部变量会在函数运行以后被删除。

    全局变量会在页面关闭后被删除。

作用域

先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。

var city = "BeiJing";
function f() {
  var city = "ShangHai";
  function inner(){
    var city = "ShenZhen";
    console.log(city);
  }
  inner();
}
f();  


var city = "BeiJing";
function Bar() {
  console.log(city);
}
function f() {
  var city = "ShangHai";
  return Bar;
}
var ret = f();
ret();

闭包:
    var city = "BeiJing";
    function f(){
        var city = "ShangHai";
        function inner(){
            console.log(city);
        }
        return inner;
    }
    var ret = f();
    ret();

函数中的arguments参数（看一下就行了）

function add(a,b){
  console.log(a+b);
  console.log(arguments.length) //获取传入的参数的个数，arguments就是指的你传入的所有的实参，放在一个数组里面，这个arguments.length是统计这个数组的元素的个数。
}

add(1,2)

　　输出：

3
2

面向对象

function Person(name){
    this.name = name;
};

var p = new Person('taibai');  

console.log(p.name);

Person.prototype.sum = function(a,b){  //封装方法
    return a+b;
};

p.sum(1,2);
3

Data对象

//方法1：不指定参数
var d1 = new Date(); //获取当前时间
console.log(d1.toLocaleString());  //当前2时间日期的字符串表示
//方法2：参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString())

常用方法
var d = new Date(); 
使用 d.getDate()
//getDate()                 获取日
//getDay ()                 获取星期 ，数字表示（0-6），周日数字是0
//getMonth ()               获取月（0-11,0表示1月,依次类推）
//getFullYear ()            获取完整年份
//getHours ()               获取小时
//getMinutes ()             获取分钟
//getSeconds ()             获取秒
//getMilliseconds ()        获取毫秒
//getTime ()                返回累计毫秒数(从1970/1/1午夜),时间戳

JSON对象

var str1 = '{"name": "chao", "age": 18}';
var obj1 = {"name": "chao", "age": 18};
// JSON字符串转换成对象
var obj = JSON.parse(str1); 
// 对象转换成JSON字符串
var str = JSON.stringify(obj1);

RegExp对象

//RegExp对象

//创建正则对象方式1
// 参数1 正则表达式(不能有空格)
// 参数2 匹配模式：常用g(全局匹配;找到所有匹配，而不是在第一个匹配后停止)和i(忽略大小写)

// 用户名只能是英文字母、数字和_，并且首字母必须是英文字母。长度最短不能少于6位 最长不能超过12位。

// 创建RegExp对象方式（逗号后面不要加空格），假如匹配用户名是只能字母开头后面是字母加数字加下划线的5到11位的
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$"); //注意，写规则的时候，里面千万不能有空格，不然匹配不出来你想要的内容，除非你想要的内容本身就想要空格，比如最后这个{5,11},里面不能有空格

// 匹配响应的字符串
var s1 = "bc123";

//RegExp对象的test方法，测试一个字符串是否符合对应的正则规则，返回值是true或false。
reg1.test(s1);  // true

// 创建方式2，简写的方式
// /填写正则表达式/匹配模式（逗号后面不要加空格）
var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/; 

reg2.test(s1);  // true

注意，此处有坑：如果你直接写一个reg2.test()，test里面啥也不传，直接执行，会返回一个true，用其他的正则规则，可能会返回false，是因为，test里面什么也不传，默认传的是一个undefined，并且给你变成字符串undefined，所以能够匹配undefined的规则，就能返回true，不然返回false
// String对象与正则结合的4个方法
var s2 = "hello world";

s2.match(/o/g);         // ["o", "o"]             查找字符串中 符合正则 的内容 ，/o/g后面这个g的意思是匹配所有的o,
s2.search(/h/g);        // 0                      查找字符串中符合正则表达式的内容位置，返回第一个配到的元素的索引位置，加不加g效果相同
s2.split(/o/g);         // ["hell", " w", "rld"]  按照正则表达式对字符串进行切割，得到一个新值，原数据不变
s2.replace(/o/g, "s");  // "hells wsrld"          对字符串按照正则进行替换

// 关于匹配模式：g和i的简单示例
var s1 = "name:Alex age:18";

s1.replace(/a/, "哈哈哈");      // "n哈哈哈me:Alex age:18"
s1.replace(/a/g, "哈哈哈");     // "n哈哈哈me:Alex 哈哈哈ge:18"      全局匹配
s1.replace(/a/gi, "哈哈哈");    // "n哈哈哈me:哈哈哈lex 哈哈哈ge:18"  不区分大小写


// 注意事项1：
// 如果regExpObject带有全局标志g，test()函数不是从字符串的开头开始查找，而是从属性regExpObject.lastIndex所指定的索引处开始查找。
// 该属性值默认为0，所以第一次仍然是从字符串的开头查找。
// 当找到一个匹配时，test()函数会将regExpObject.lastIndex的值改为字符串中本次匹配内容的最后一个字符的下一个索引位置。
// 当再次执行test()函数时，将会从该索引位置处开始查找，从而找到下一个匹配。
// 因此，当我们使用test()函数执行了一次匹配之后，如果想要重新使用test()函数从头开始查找，则需要手动将regExpObject.lastIndex的值重置为 0。
// 如果test()函数再也找不到可以匹配的文本时，该函数会自动把regExpObject.lastIndex属性重置为 0。

var reg3 = /foo/g;
// 此时 regex.lastIndex=0
reg3.test('foo'); // 返回true
// 此时 regex.lastIndex=3
reg3.test('xxxfoo'); // 还是返回true
// 所以我们在使用test()方法校验一个字符串是否完全匹配时，一定要加上^和$符号，把匹配规则写的确定一些，尽量不用上面这种的写法/xxx/。

// 注意事项2(说出来你可能不信系列)：
// 当我们不加参数调用RegExpObj.test()方法时, 相当于执行RegExpObj.test(undefined)，然后将这个undefined又转为字符串"undefined",去进行匹配了, 并且/undefined/.test()默认返回true。
var reg4 = /^undefined$/;
reg4.test(); // 返回true
reg4.test(undefined); // 返回true
reg4.test("undefined"); // 返回true

Math对象

Math.abs(x)      返回数的绝对值。
exp(x)      返回 e 的指数。
floor(x)    小数部分进行直接舍去。
log(x)      返回数的自然对数（底为e）。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次幂。
random()    返回 0 ~ 1 之间的随机数。
round(x)    把数四舍五入为最接近的整数。
sin(x)      返回数的正弦。
sqrt(x)     返回数的平方根。
tan(x)      返回角的正切。

bom+dom操作

window对象

window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
window.open() - 打开新窗口
window.close() - 关闭当前窗口 (只能关闭用js的window.open()打开的页面，了解一下就行了)

windows子对象

navigator对象

浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息。

navigator.appName　　// Web浏览器全称
navigator.appVersion　　// Web浏览器厂商和版本的详细字符串
navigator.userAgent　　// 客户端绝大部分信息
navigator.platform　　　// 浏览器运行所在的操作系统

screen对象（了解即可）

屏幕对象，不常用。

screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

history对象（了解即可）

window.history 对象包含浏览器的历史。

浏览历史对象，包含了用户对当前页面的浏览历史，但我们无法查看具体的地址，可以简单的用来前进或后退一个页面。

history.forward()  // 前进一页，其实也是window的属性，window.history.forward()
history.back()  // 后退一页

location对象*****

　window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

location.href  获取URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面,就是刷新一下页面

弹出框

　　　　可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

警告框

　　　　警告框经常用于确保用户可以得到某些信息。

　　　　当警告框出现后，用户需要点击确定按钮才能继续进行操作。

　　　　语法：

alert("你看到了吗？");

确认框（了解即可）

　　　　确认框用于使用户可以验证或者接受某些信息。

　　　　当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。

　　　　如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。

　　　　语法：

confirm("你确定吗？")

　我们可以根据返回的true和false来判断一下，然后根据这个值来使用location去跳转对应的网站。

　　提示框（了解即可）

　　　　提示框经常用于提示用户在进入页面前输入某个值。

　　　　当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。

　　　　如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为默认值，就是第二个参数，如果没有默认值那么返回null。

　　　　语法：

prompt("请在下方输入","你的答案")

计时器******

通过使用 JavaScript，我们可以在一定时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

var t=setTimeout("JS语句",毫秒)  //第一个参数js语句多数是写一个函数，不然一般的js语句到这里就直接执行了，先用函数封装一下，返回值t其实就是一个id值（浏览器给你自动分配的）

setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。

setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg()"。

第二个参数指示从当前起多少毫秒后执行第一个参数（1000 毫秒等于一秒）。

　clearTimeout()

　　　　　　语法：

clearTimeout(setTimeout_variable)

　　　　举个例子：

// 在指定时间之后执行一次相应函数
var timer = setTimeout(function(){alert(123);}, 3000)
// 取消setTimeout设置
clearTimeout(timer);

　setInterval() 每隔一段时间做一些事情

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

　setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

语法：

setInterval("JS语句",时间间隔)

返回值

一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

　　　　clearInterval()

　　　　　　clearInterval() 方法可取消由 setInterval() 设置的 timeout。

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

　　　　　　语法：

clearInterval(setinterval返回的ID值)

　　　　　　举个例子：

// 每隔一段时间就执行一次相应函数
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval设置
clearInterval(timer);

DOM

DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法。

　　当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

　　HTML DOM 模型被构造为对象的树。

查找标签

直接查找

document.getElementById           根据ID获取一个标签
document.getElementsByClassName   根据class属性获取（可以获取多个元素，所以返回的是一个数组）
document.getElementsByTagName     根据标签名获取标签合集

间接查找

parentElement            //父节点标签元素
children                 //所有子标签
firstElementChild        //第一个子标签元素
lastElementChild         //最后一个子标签元素
nextElementSibling       //下一个兄弟标签元素
previousElementSibling   //上一个兄弟标签元素

节点操作

创建节点***

var divEle = document.createElement("div");

添加节点

　追加一个子节点（作为最后的子节点）

somenode.appendChild(newnode)；

把增加的节点放到某个节点的前边。

somenode.insertBefore(newnode,某个节点);

var imgEle=document.createElement("img");
imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg");
var d1Ele = document.getElementById("d1");
d1Ele.appendChild(imgEle);

删除节点

获得要删除的元素，通过父元素调用该方法删除。

somenode.removeChild(要删除的节点)

替换节点

somenode.replaceChild(newnode, 某个节点);

somenode是父级标签，然后找到这个父标签里面的要被替换的子标签，然后用新的标签将该子标签替换掉

属性节点

获取文本节点的值：

var divEle = document.getElementById("d1")
divEle.innerText  #输入这个指令，一执行就能获取该标签和内部所有标签的文本内容
divEle.innerHTML  #获取的是该标签内的所有内容，包括文本和标签

　设置文本节点的值：

var divEle = document.getElementById("d1")
divEle.innerText="1"  
divEle.innerHTML="<p>2</p>" #能识别成一个p标签

　attribute操作

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")  #比较规范的写法
divEle.getAttribute("age")
divEle.removeAttribute("age")

// 自带的属性还可以直接.属性名来获取和设置，如果是你自定义的属性，是不能通过.来获取属性值的
imgEle.src
imgEle.src="..."

获取值操作

elementNode.value

适用于以下标签，用户输入或者选择类型的标签：

input
select
textarea

var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);

class操作

className  获取所有样式类名(字符串)首先获取标签对象
标签对象.classList.remove(cls)  删除指定类
classList.add(cls)  添加类classList.contains(cls)  存在返回true，否则返回falseclassList.toggle(cls)  存在就删除，否则添加，toggle的意思是切换，有了就给你删除，如果没有就给你加一个

指定CSS操作**

obj.style.backgroundColor="red"

JS操作CSS属性的规律：

1.对于没有中横线的CSS属性一般直接使用style.属性名即可。如：

obj.style.margin
obj.style.width
obj.style.left
obj.style.position

2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。如：

obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily
obj.style.backgroundColor

事件

　HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。

常用事件

捕获用户行为

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               // 练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。

onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击，使用的对象是form。

绑定方式：

方式一：（已经不常用了，多数用方式二了）

<div id="d1" onclick="changeColor(this);">点我</div>  
<script>  
  function changeColor(ths) {  
    ths.style.backgroundColor="green";
  }
</script>

this是实参，表示触发事件的当前元素。

函数定义过程中的ths为形参。

方式二：

<div id="d2">点我</div>
<script>
  var divEle2 = document.getElementById("d2");
  divEle2.onclick=function () {　　 //console.log(this)
    this.innerText="呵呵"; #哪个标签触发的这个事件，this就指向谁
  }
</script>

HTML DOM 事件

DOM： 指明使用的 DOM 属性级别。

鼠标事件

属性	描述	DOM
onclick	当用户点击某个对象时调用的事件句柄。	2
oncontextmenu	在用户点击鼠标右键打开上下文菜单时触发
ondblclick	当用户双击某个对象时调用的事件句柄。	2
onmousedown	鼠标按钮被按下。	2
onmouseenter	当鼠标指针移动到元素上时触发。	2
onmouseleave	当鼠标指针移出元素时触发	2
onmousemove	鼠标被移动。	2
onmouseover	鼠标移到某元素之上。	2
onmouseout	鼠标从某元素移开。	2
onmouseup	鼠标按键被松开。	2

键盘事件

属性	描述	DOM
onkeydown	某个键盘按键被按下。	2
onkeypress	某个键盘按键被按下并松开。	2
onkeyup	某个键盘按键被松开。	2

框架/对象（Frame/Object）事件

属性	描述	DOM
onabort	图像的加载被中断。 ( )	2
onbeforeunload	该事件在即将离开页面（刷新或关闭）时触发	2
onerror	在加载文档或图像时发生错误。 ( , 和 )
onhashchange	该事件在当前 URL 的锚部分发生修改时触发。
onload	一张页面或一幅图像完成加载。	2
onpageshow	该事件在用户访问页面时触发
onpagehide	该事件在用户离开当前网页跳转到另外一个页面时触发
onresize	窗口或框架被重新调整大小。	2
onscroll	当文档被滚动时发生的事件。	2
onunload	用户退出页面。 ( 和 )	2

表单事件

属性	描述	DOM
onblur	元素失去焦点时触发	2
onchange	该事件在表单元素的内容改变时触发( , , , 和 )	2
onfocus	元素获取焦点时触发	2
onfocusin	元素即将获取焦点时触发	2
onfocusout	元素即将失去焦点时触发	2
oninput	元素获取用户输入时触发	3
onreset	表单重置时触发	2
onsearch	用户向搜索域输入文本时触发 ( <input="search">)
onselect	用户选取文本时触发 ( 和 )	2
onsubmit	表单提交时触发	2

剪贴板事件

属性	描述	DOM
oncopy	该事件在用户拷贝元素内容时触发
oncut	该事件在用户剪切元素内容时触发
onpaste	该事件在用户粘贴元素内容时触发

打印事件

属性	描述	DOM
onafterprint	该事件在页面已经开始打印，或者打印窗口已经关闭时触发
onbeforeprint	该事件在页面即将开始打印时触发

拖动事件

事件	描述	DOM
ondrag	该事件在元素正在拖动时触发
ondragend	该事件在用户完成元素的拖动时触发
ondragenter	该事件在拖动的元素进入放置目标时触发
ondragleave	该事件在拖动元素离开放置目标时触发
ondragover	该事件在拖动元素在放置目标上时触发
ondragstart	该事件在用户开始拖动元素时触发
ondrop	该事件在拖动元素放置在目标区域时触发

多媒体（Media）事件

事件	描述	DOM
onabort	事件在视频/音频（audio/video）终止加载时触发。
oncanplay	事件在用户可以开始播放视频/音频（audio/video）时触发。
oncanplaythrough	事件在视频/音频（audio/video）可以正常播放且无需停顿和缓冲时触发。
ondurationchange	事件在视频/音频（audio/video）的时长发生变化时触发。
onemptied	当期播放列表为空时触发
onended	事件在视频/音频（audio/video）播放结束时触发。
onerror	事件在视频/音频（audio/video）数据加载期间发生错误时触发。
onloadeddata	事件在浏览器加载视频/音频（audio/video）当前帧时触发触发。
onloadedmetadata	事件在指定视频/音频（audio/video）的元数据加载后触发。
onloadstart	事件在浏览器开始寻找指定视频/音频（audio/video）触发。
onpause	事件在视频/音频（audio/video）暂停时触发。
onplay	事件在视频/音频（audio/video）开始播放时触发。
onplaying	事件在视频/音频（audio/video）暂停或者在缓冲后准备重新开始播放时触发。
onprogress	事件在浏览器下载指定的视频/音频（audio/video）时触发。
onratechange	事件在视频/音频（audio/video）的播放速度发送改变时触发。
onseeked	事件在用户重新定位视频/音频（audio/video）的播放位置后触发。
onseeking	事件在用户开始重新定位视频/音频（audio/video）时触发。
onstalled	事件在浏览器获取媒体数据，但媒体数据不可用时触发。
onsuspend	事件在浏览器读取媒体数据中止时触发。
ontimeupdate	事件在当前的播放位置发送改变时触发。
onvolumechange	事件在音量发生改变时触发。
onwaiting	事件在视频由于要播放下一帧而需要缓冲时触发。

动画事件

事件	描述	DOM
animationend	该事件在 CSS 动画结束播放时触发
animationiteration	该事件在 CSS 动画重复播放时触发
animationstart	该事件在 CSS 动画开始播放时触发

过渡事件

事件	描述	DOM
transitionend	该事件在 CSS 完成过渡后触发。

其他事件

事件	描述	DOM
onmessage	该事件通过或者从对象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息时触发
onmousewheel	已废弃。使用 onwheel 事件替代
ononline	该事件在浏览器开始在线工作时触发。
onoffline	该事件在浏览器开始离线工作时触发。
onpopstate	该事件在窗口的浏览历史（history 对象）发生改变时触发。
onshow	该事件当
onstorage	该事件在 Web Storage(HTML 5 Web 存储)更新时触发
ontoggle	该事件在用户打开或关闭元素时触发
onwheel	该事件在鼠标滚轮在元素上下滚动时触发

Jquery

一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。

　下载链接：jQuery官网，首先需要下载这个jQuery的文件，然后在HTML文件中引入这个文件，就可以使用这个文件中帮我们提供的jquery的接口了。

中文文档：jQuery AP中文文档

//文件引入
<script src="jquery-3.1.1.min.js"></script>

jQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里提供的方法：例如$(“#i1”).html()。

var $variable = jQuery对像
var variable = DOM对象
$variable[0]//jQuery对象转成DOM对象，通过一个jQuery对象+[0]索引零，就变成了DOM对象，就可以使用JS的代码方法了，DOM对象转换成jQuery对象：$(DOM对象)，通过$符号包裹一下就可以了
$(".c2")[2];//jquery对象索引都是dom对象

$("#i1").html();//jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML;// DOM对象使用DOM的方法

选择器

基本选择器（同css）

id选择器：

$("#id")  //不管找什么标签，用什么选择器，都必须要写$("")，引号里面再写选择器，通过jQuery找到的标签对象就是一个jQuery对象，用原生JS找到的标签对象叫做DOM对象，看我们上面的jQuery对象部分的内容

标签选择器：

$("tagName");

class选择器：

$(".className");

配合使用：

$("div.c1");  // 找到有c1 class类的div标签

所有元素选择器：

$("*");

组合选择器：

$("#id, .className, tagName");

层级选择器：（同css）

x和y可以为任意选择器

$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y");// 找到所有紧挨在x后面的y
$("x ~ y");// x之后所有的兄弟y

属性选择器

[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于

例子:

// 示例,多用于input标签
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签

筛选器

基本筛选器（选择之后进行过滤）：

:first // 第一个  找到前边各个选择器的第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

示例写法:
    $('li:has(span)');
    
$("div:has(h1)")// 找到所有后代中有h1标签的div标签，意思是首先找到所有div标签，把这些div标签的后代中有h1的div标签筛选出来
$("div:has(.c1)")// 找到所有后代中有c1样式类（类属性class='c1'）的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

简单绑定事件的示例

// 绑定事件的方法
$('#btn').click(function () {
    $('.mode')[0].classList.remove('hide');
    $('.shadow')[0].classList.remove('hide');
    jquery写法:
    $('.mode,.shadow').removeClass('hide');
})

表单筛选器

多用于找form表单里面出现的input标签，当然通过属性选择器找肯定也是没问题的，这样就是写着简单一些

:text
:password
:file
:radio
:checkbox
:submit
:reset
:button

例子

$(":checkbox")  // 找到所有的checkbox

表单对象属性:

:enabled
:disabled
:checked
:selected

//注意checked
//$("checked")会把select中的option标签也选出来,一般在前边加input如$("input:checked")

<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

$("input:enabled")  // 找到可用的input标签

<select id="s1">
  <option value="beijing">北京市</option>
  <option value="shanghai">上海市</option>
  <option selected value="guangzhou">广州市</option>
  <option value="shenzhen">深圳市</option>
</select>

$(":selected")  // 找到所有被选中的option

链式表达式

<ul>
    <li>陈硕</li>
    <li>子文</li>
    <li class="c1">李业</li>
    <li>吕卫贺</li>
    <li>峡谷先锋珊姐</li>
    <li class="c2">怼姐</li>
    <li>骚强</li>

</ul>

操作      $('li:first').next().css('color','green').next().css('color','red');

筛选器方法

选择器或者筛选器选择出来的都是对象，而筛选器方法其实就是通过对象来调用一个进一步过滤作用的方法，写在对象后面加括号，不再是写在选择器里面的了。

下一个元素:

$("#id").next()//找一个
$("#id").nextAll()//找全部
$("#id").nextUntil("#i2") #直到找到id为i2的标签就结束查找，不包含它

上一个元素：

$("#id").prev()//找一个
$("#id").prevAll()//找全部
$("#id").prevUntil("#i2")
//要注意找到的标签的顺序  是从下往上找的

父亲元素

$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素（爷爷辈、祖先辈都找到）$("#id").parentsUntil('body') // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止，这里直到body标签，不包含body标签，基本选择器都可以放到这里面使用。

儿子和兄弟元素：

$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们，不包含自己，.siblings('#id')，可以在添加选择器进行进一步筛选

查找

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

$("div").find("p")  //等价与$("div p")

筛选

筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。

$("div").filter(".c1")  //等价 $("div.c1")
// 从结果集中过滤出有c1样式类的，从所有的div标签中过滤出有class='c1'属性的div，和find不同，find是找div标签的子子孙孙中找到一个符合条件的标签

补充（和前面使用冒号的一样 :first等，只不过冒号的那个是写在选择器里面的，而下面的这几个是方法，如此而已，就不说啦）：

.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素

标签操作

a标签点击不跳转不刷新

<a herf="">ssss</a><!--点击会刷新页面-->
<a herf="#">xxxxx</a><!--点击不刷新,但是url后边会加一个#-->
<a herf="javascript:void(0);">bsx</a><!--点击之后什么反应也没有-->

样式操作

类名的操作

addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。

css

css("color","red")//DOM操作：tag.style.color="red"

//示例
$("p").css("color", "red"); //将所有p标签的字体设置为红色
//单个方式:
$('div').css('background-color','green');
//多个方式:
$('div').css({'background-color':'yellow','width':'400px'});

位置操作

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移，不能设置位置
$(window).scrollTop()  //滚轮向下移动的距离
$(window).scrollLeft() //滚轮向右移动的距离

.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。

和 .position()的差别在于： .position()获取相对于它最近的具有相对位置(position:relative或position:absolute)的父级元素的距离，如果找不到这样的元素，则返回相对于浏览器的距离

尺寸

height() //盒子模型content的大小，就是我们设置的标签的高度和宽度
width()
innerHeight() //内容content高度 + 两个padding的高度
innerWidth()
outerHeight() //内容高度 + 两个padding的高度 + 两个border的高度，不包括margin的高度，因为margin不是标签的，是标签和标签之间的距离
outerWidth()

事件

常见 DOM 事件：

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload
hover

返回顶部示例:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>位置相关示例之返回顶部</title>
  <style>
    .c1 {
      width: 100px;
      height: 200px;
      background-color: red;
    }

    .c2 {
      height: 50px;
      width: 50px;

      position: fixed;
      bottom: 15px;
      right: 15px;
      background-color: #2b669a;
    }
    .hide {
      display: none;
    }
    .c3 {
      height: 100px;
    }
  </style>
</head>
<body>
<button id="b1" class="btn btn-default">点我</button>
<div class="c1"></div>
<div class="c3">1</div>
<div class="c3">2</div>
<div class="c3">3</div>
<div class="c3">4</div>
<div class="c3">5</div>
<div class="c3">6</div>
<div class="c3">7</div>
<div class="c3">8</div>
<div class="c3">9</div>
<div class="c3">10</div>
<div class="c3">11</div>
<div class="c3">12</div>
<div class="c3">13</div>
<div class="c3">14</div>
<div class="c3">15</div>
<div class="c3">16</div>
<div class="c3">17</div>
<div class="c3">18</div>
<div class="c3">19</div>
<div class="c3">20</div>
<div class="c3">21</div>
<div class="c3">22</div>
<div class="c3">23</div>
<div class="c3">24</div>
<div class="c3">25</div>
<div class="c3">26</div>
<div class="c3">27</div>
<div class="c3">28</div>
<div class="c3">29</div>
<div class="c3">30</div>
<div class="c3">31</div>
<div class="c3">32</div>
<div class="c3">33</div>
<div class="c3">34</div>
<div class="c3">35</div>
<div class="c3">36</div>
<div class="c3">37</div>
<div class="c3">38</div>
<div class="c3">39</div>
<div class="c3">40</div>
<div class="c3">41</div>
<div class="c3">42</div>
<div class="c3">43</div>
<div class="c3">44</div>
<div class="c3">45</div>
<div class="c3">46</div>
<div class="c3">47</div>
<div class="c3">48</div>
<div class="c3">49</div>
<div class="c3">50</div>
<div class="c3">51</div>
<div class="c3">52</div>
<div class="c3">53</div>
<div class="c3">54</div>
<div class="c3">55</div>
<div class="c3">56</div>
<div class="c3">57</div>
<div class="c3">58</div>
<div class="c3">59</div>
<div class="c3">60</div>
<div class="c3">61</div>
<div class="c3">62</div>
<div class="c3">63</div>
<div class="c3">64</div>
<div class="c3">65</div>
<div class="c3">66</div>
<div class="c3">67</div>
<div class="c3">68</div>
<div class="c3">69</div>
<div class="c3">70</div>
<div class="c3">71</div>
<div class="c3">72</div>
<div class="c3">73</div>
<div class="c3">74</div>
<div class="c3">75</div>
<div class="c3">76</div>
<div class="c3">77</div>
<div class="c3">78</div>
<div class="c3">79</div>
<div class="c3">80</div>
<div class="c3">81</div>
<div class="c3">82</div>
<div class="c3">83</div>
<div class="c3">84</div>
<div class="c3">85</div>
<div class="c3">86</div>
<div class="c3">87</div>
<div class="c3">88</div>
<div class="c3">89</div>
<div class="c3">90</div>
<div class="c3">91</div>
<div class="c3">92</div>
<div class="c3">93</div>
<div class="c3">94</div>
<div class="c3">95</div>
<div class="c3">96</div>
<div class="c3">97</div>
<div class="c3">98</div>
<div class="c3">99</div>
<div class="c3">100</div>

<button id="b2" class="btn btn-default c2 hide">返回顶部</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
  //$("#b1").on("click", function () {
  //  $(".c1").offset({left: 200, top:200});
  //});

  // $(window),window对象是还记得吗？是不是全局的一个对象啊，整个页面窗口对象，通过$符号包裹起来就变成了一个jQuery对象了
  $(window).scroll(function () {
    if ($(window).scrollTop() > 100) { //当滚动条相对顶部位置的滚动距离大于100的时候才显示那个返回顶部的按钮，这个100你可以理解为窗口和整个页面文档的距离，鼠标向下滑动的距离
      $("#b2").removeClass("hide");
    }else {
      $("#b2").addClass("hide");
    }
  });
  $("#b2").on("click", function () { //jQuery绑定事件第二天我们在学，先作为了解
    $(window).scrollTop(0);
  })
</script>
</body>
</html>

文本操作

html()// 取得第一个匹配元素的html内容，包含标签内容
html(val)// 设置所有匹配元素的html内容，识别标签，能够表现出标签的效果

文本值

text()// 取得所有匹配元素的内容，只有文本内容，没有标签
text(val)// 设置所有匹配元素的内容，不识别标签，将标签作为文本插入进去

值操作

val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值
//给单选框或多选框设置值时,只要val方法中的值和标签的value属性对应的值相同时,那么这个标签会被选中.
//此处有坑:$(":radio").val("1");这样设置值会把所有的input标签的type=radio的value都变成"1"

取值:
    文本输入框:$('#username').val();
    input,type=radio单选框: $('[type="radio"]:checked').val();,首先找到被选中的标签,再进行取值
    input,type=checkbox多选框: 通过val方法不能直接获取多选的值,只能拿到一个,想拿到多个项的值,需要循环取值
        var d = $('[type="checkbox"]:checked');
        for (var i=0;i<d.length;i++){
            console.log(d.eq(i).val());
        }
    单选下拉框select: -- $('#s1').val();
    多选下拉框select: -- $('#s2').val(); -- ['1','2']

设置值
    文本输入框: -- $('#username').val('xxx');
    input,type=radio单选框: -- $(':radio').val(['1']) 找到所有的radio,然后通过val设置值,达到一个选中的效果.
    给单选或者多选框设置值的时候,只要val方法中的值和标签的value属性对应的值相同时,那么这个标签就会被选中.
    此处有坑:$(':radio').val('1');这样设置值,不带中括号的,意思是将所有的input,type=radio的标签的value属性的值设置为1.
    
    input,type=checkbox多选框: -- $(':checkbox').val(['1','2']);
    
    单选下拉框select: -- $('#s1').val(['3']);
    多选下拉框select: -- $('#s2').val(['1','2']);
    
    统一一个方法:
        选择框都用中括号设置值.

示例:

<input type="checkbox" value="basketball" name="hobby">篮球
<input type="checkbox" value="football" name="hobby">足球

<select multiple id="s1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<script>
$("[name='hobby']").val(['basketball', 'football']);
$("#s1").val(["1", "2"])
</script>

//获取选中的checkbox或radio的值
<label for="c1">女</label>
<input name="gender" id="c1" type="radio" value="0">
<label for="c2">男</label>
<input name="gender" id="c2" type="radio" value="1">

$("input[name='gender']:checked").val()

属性操作

用于ID自带属性等或自定义属性：

attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: "v1", k2:"v2"})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性


设置属性: -- $('#d1').attr({'age1':'18','age2':'19'});
        单个设置:$('#d1').attr('age1','18');
查看属性值: -- $('#d1').attr('age1');
删除属性: -- $('#d1').removeAttr('age1'); 括号里面写属性名称

用于checkbox和radio

prop() // 获取属性  得到true或者false

prop和attr方法的区别:
总结一下：
    1.对于标签上有的能看到的属性和自定义属性都用attr
    2.对于返回布尔值的比如checkbox、radio和option的是否被选中或者设置其被选中与取消选中都用prop。
    具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
    checked示例:
        attr():
            查看值,checked 选中--'checked'  没选中--undefined
                $('#nv').attr({'checked':'checked'}); 
            设置值,attr无法完成取消选中
                $('#nv').attr({'checked':'undefined'});
                $('#nv').attr({'checked':'undefined'});
                
         prop():
            查看值,checked 选中--true  没选中--false
                $(':checkbox').prop('checked');
            设置值:
                $(':checkbox').prop('checked',true);
                $(':checkbox').prop('checked',false);

文档处理

添加到指定元素内部的后面

$(A).append(B)// 把B追加到A    B可以是字符串形式的标签  B可以为：stirng | element（js对象） | jquery元素
$(A).appendTo(B)// 把A追加到B

添加到指定元素内部的前面

$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B

添加到指定元素外部的后面

$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面

添加到指定元素外部的前面

$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

移除和清空元素

remove()// 从DOM中删除所有匹配的元素。删除节点后，事件也会删除（简言之，删除了整个标签）

$(selector).detach(); // 删除节点后，事件会保留
empty()// 删除匹配的元素集合中所有的后代节点，包括文本被全部删除，但是匹配的元素还在
示例:
$('#d1').remove();
$('#d1').empty();

替换

selector.replaceWith()//用后边的替换前边的 selector被替换：将所有匹配的元素替换成指定的string、js对象、jquery对象。
replaceAll()//用前边的替换后边得
// selector被替换：将所有的匹配的元素替换成p标签。
$('<p>哈哈哈</p>').replaceAll(selector);

克隆

clone()// 参数，看下面的示例

$('button').click(function() {

 // 1.clone()：克隆匹配的DOM元素
 // 2.clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力)
  $(this).clone(true).insertAfter(this);
})

　　克隆示例：点击复制按钮：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>克隆</title>
  <style>
    #b1 {
      background-color: deeppink;
      padding: 5px;
      color: white;
      margin: 5px;
    }
    #b2 {
      background-color: dodgerblue;
      padding: 5px;
      color: white;
      margin: 5px;
    }
  </style>
</head>
<body>

<button id="b1">屠龙宝刀，点击就送</button>
<hr>
<button id="b2">屠龙宝刀，点击就送</button>

<script src="jquery-3.2.1.min.js"></script>
<script>
  // clone方法不加参数true，克隆标签但不克隆标签带的事件
  $("#b1").on("click", function () {
    $(this).clone().insertAfter(this);
  });
  // clone方法加参数true，克隆标签并且克隆标签带的事件
  $("#b2").on("click", function () {
    $(this).clone(true).insertAfter(this);
  });
</script>
</body>
</html>

事件

绑定方式

//方式一:
$("#d1").click(function(){
    $(this).css("background-color","green")
})
//方式二:
$("#d1").on("click",function(){
    $(this).css("background-color","green")
})

常用事件

click(function(){...})
hover(function(){鼠标进入时触发},function(){鼠标离开时触发})
blur(function(){...})//失去光标时出触发的事件
focus(function(){...})//获取光标时触发事件
change(function(){...}) //内容发生变化时触发，一般用于input，select等  input标签当光标离开或者回车才会触发
on("input",function(){...})//只能用方式2绑定 域内一变化立马触发,用于搜索
$(window).keyup(function(){...})//键盘抬起时发生
$(window).keydown(function(){...})//键盘按下时发生
mouseover 和 mouseenter的区别是：mouseover事件是如果该标签有子标签，那么移动到该标签或者移动到子标签时会连续触发，mmouseenter事件不管有没有子标签都只触发一次，表示鼠标进入这个对象
mouseenter//鼠标进入触发的事件
mouseout//鼠标离开时触发
mouseover//鼠标进入时触发,进入子标签时页会触发
//绑定多个事件
on("input blur",function(){...})  //空格间隔


$(window).keydown(function(e){//e事件对象
    console.log(e.keyCode)//捕获键位
})

示例:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #d1{
                background-color: red;
                height: 200px;
                width: 200px;
            }
            #d2{
                background-color: green;
                height: 200px;
                width: 200px;
            }

            .dd1{
                background-color: yellow;
                height: 40px;
                width: 40px;
            }
            .dd2{
                background-color: pink;
                height: 40px;
                width: 40px;
            }

        </style>
    </head>
    <body>



    <div id="d1">
        <div class="dd1"></div>
    </div>
    <div id="d2">
        <div class="dd2"></div>
    </div>

    用户名:<input type="text" id="username">


    <br>

    <!--<select name="" id="s1">-->
    <!--    <option value="1">上海</option>-->
    <!--    <option value="2">深圳</option>-->
    <!--    <option value="3">贵州</option>-->
    <!--</select>-->

    <input type="text" id="xxx">

    </body>
    <script src="jquery.js"></script>
    <script>
        // 绑定事件的方式1
        // $("#d1").click(function () {
        //     $(this).css('background-color','green');
        // })

        // 方式2
        // $('#d1').on('click',function () {
        //     $(this).css('background-color','green');
        // });
        //
        // // 获取光标触发的事件
        // $('#username').focus(function () {
        //     $(this).css('background-color','green');
        // });
        // // 失去光标触发的事件
        // $('#username').blur(function () {
        //     $(this).css('background-color','white');
        // });
        // // 域内容发生变化触发的事件,一般用于select标签
        // $('#s1').change(function () {
        //      // $('#d1').css('background-color','black');
        //     console.log('xxxxx')
        //
        // });

        // $('#xxx').change(function () {
        //     console.log($(this).val());
        // })

        // 输入内容实时触发的事件,input事件只能on绑定
        // $('#xxx').on('input',function () {
        //     console.log($(this).val());
        // });
        //
        // //绑定多个事件 事件名称空格间隔
        // $('#xxx').on('input blur',function () {
        //     console.log($(this).val());
        // })


        // 鼠标进入触发的事件
        // $('#d1').mouseenter(function () {
        //     $(this).css('background-color','green');
        // });
        // // 鼠标离开触发的事件
        // $('#d1').mouseout(function () {
        //     $(this).css('background-color','red');
        // });

        // hover事件 鼠标进进出出的事件
        // $('#d1').hover(
        //     // 鼠标进入
        //     function () {
        //         $(this).css('background-color','green');
        //     },
        //     // 鼠标离开
        //     function () {
        //         $(this).css('background-color','red');
        //     }
        // );


        $('#d1').mouseenter(function () {
            console.log('xxx');
        });
        $('#d2').mouseover(function () {
            console.log('ooo');
        });
        // 键盘按下
           // $(window).keydown(function (e) {
            //     console.log(e.keyCode);
            //
            // });
         // 键盘抬起
            $(window).keyup(function (e) {
                console.log(e.keyCode);
            });

    </script>
    </html>

移除事件（不常用）

.off( events [, selector ][,function(){}])

　　　　off() 方法移除用 .on()绑定的事件处理程序。

$("li").off("click")；就可以了

事件冒泡

子标签和父(祖先)标签如果绑定了相同的事件比如点击事件,当点击子标签时,会一层一层的触发触发父(祖先)级标的事件

阻止事件冒泡(阻止事件发生)

e.stopPropagation()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止默认事件</title>
</head>
<body>

<form action="">  #action里面如果没写url，默认是将内容提交到当前页面的url处
    <button id="b1">点我</button>
</form>

<script src="jquery-3.3.1.min.js"></script>
<script>
    $("#b1").click(function (e) {
        alert(123);
        //return false;
        e.stopPropagation();
    });
</script>
</body>
</html>

$(".c2").click(function(){
    //方式一:
    return false;  
})

$(".c2").click(function(e){
    //方式一:
   e.stopPropagation();
})

事件委托

　事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件，将未来添加进来的某些子标签自动绑定上事件。

$(".d1").on("click",".btn",function(){
    var a=$(this).clone();//$(this)是被点击的儿子标签
    $("#d1").append(a);
})
//第一个参数是事件类型
//中间的参数是个选择器，前面这个$('table')是父级标签选择器，选择的是父级标签，意思就是将子标签（子子孙孙）的点击事件委托给了父级标签
//但是这里注意一点，你console.log(this)；你会发现this还是触发事件的那个子标签，这个记住昂

常用事件表

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload
hover

each

jQuery.each(collection, callback(indexInArray, valueOfElement))：

描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。

li =[10,20,30,40]
$.each(li,function(i, v){  //循环数组
  console.log(i, v);//function里面可以接受两个参数，i是索引，v是每次循环的具体元素。
})循环自定义对象也是可以的：
var d1 = {'name':'chao','age':18}
$.each(d1,function(k,v){console.log(k,v)})

.each(function(index, Element))：

描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。

　　　　.each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素。

// 为每一个li标签添加foo
$("li").each(function(i,v){
  $(this).addClass("c1");
});
$("li").each(function(k,v){//v是dom对象
  console.log(k,$(v);
});

　　　　注意: jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素 - 被称为隐式迭代的过程。当这种情况发生时，它通常不需要显式地循环的 .each()方法：

也就是说，上面的例子没有必要使用each()方法，直接像下面这样写就可以了：

$("li").addClass("c1");  // 对所有标签做统一操作

注意:

在遍历过程中可以使用 return false提前结束each循环。

而直接使用return;后面什么都不加，不写false，就是跳过本次循环的意思

.data()

任意jQuery对象都有data方法，可以保存任意值，可以用来代替全局变量

　在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。

.data(key, value): 设置值

描述：在匹配的元素上存储任意相关数据。

$("div").data("k",100);//给所有div标签都保存一个名为k，值为100

.data(key): 取值，没有的话返回undefined

描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data(name, value)或 HTML5 data-*属性设置。

$("div").data("k");//返回第一个div标签中保存的"k"的值

　.removeData(key):

　　　　描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。

$("div").removeData("k");  //移除元素上存放k对应的数据

页面载入

这个window.onload有个缺点，这个缺点就是这个操作时给window.onload赋值，如果你自己写了两个js文件，每个js文件中都有一个window.onload的话，那么后引入的文件会把前面引入的文件的window.onload里面的js代码全部覆盖掉，那么第一个文件的js代码就失去了效果，还有一个问题就是，window.onload会等到页面上的文档、图片、视频等所有资源都加载完才执行里面的js代码，导致有些效果的加载比较慢，所以我们使用下面的写法，不存在覆盖问题，而且只要文档加载完就触发，不需要等着一些图片啊视频啊什么的，加载js效果的速度快。

与window.onload的区别:

1.window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用

2.jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）

//原生js
window.onload(function(){//等待所有的页面加载完成在执行,只能执行一次
    
})

两/种写法:

//方法一:
$(function(){
// 你在这里写你的代码
})
//方法二:
$(document).ready(function(){
// 在这里写你的JS代码...
})

动画效果

// 基本
show([s,[e],[fn]])  $('.c1').show()  //show(5000),就是5秒之后显示出来这个标签，并且有一个动画效果，（搞个img图片看看效果），后面两个参数先不用管
hide([s,[e],[fn]])  $('.c1').hide()
toggle([s],[e],[fn])//这几个toggle的意思就是你原来是什么效果，我就反着来
// 滑动（拉窗帘一样）
slideDown([s],[e],[fn])  //使用的时候别忘了给标签设置一个高度和宽度，其实就是控制你的标签高度，如果你写$('#di').slideUp(5000)；意思就是5秒内把你的高度变为0//还有如果你直接操作的是img标签和操作img标签的父级标签，两个的效果是不同的
slideUp([s,[e],[fn]]) 
slideToggle([s],[e],[fn])
// 淡入淡出（控制透明度）
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])  //o参数是透明度，0-1的区间，意思是淡入或者淡出到一个多大的透明读
fadeToggle([s,[e],[fn]])
// 自定义（了解即可）
animate(p,[s],[e],[fn])

点赞示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>点赞动画示例</title>
  <style>
    div {
      position: relative;
      display: inline-block;
    }
    div>i {
      display: inline-block;
      color: red;
      position: absolute;
      right: -16px;
      top: -5px;
      opacity: 1;
    }
  </style>
</head>
<body>

<div id="d1">点赞</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
  $("#d1").on("click", function () {
    var newI = document.createElement("i");
    newI.innerText = "+1";
    $(this).append(newI);
    $(this).children("i").animate({
      opacity: 0  //1秒之后透明度变为0，注意写法，animate({属性：值},毫秒数) 
    }, 1000)
  })
</script>
</body>
</html>

插件(了解)

　jQuery.extend(object)

　jQuery的命名空间下添加新的功能。多用于插件开发者向 jQuery 中添加新函数时使用。

　示例：

<script>
jQuery.extend({ //$.extend({})
  min:function(a, b){return a < b ? a : b;}, //自定义了一个min和max方法，min和max作为键，值是一个function
  max:function(a, b){return a > b ? a : b;}
});
jQuery.min(2,3);// => 2
jQuery.max(4,5);// => 5
</script>

jQuery.fn.extend(object)

一个对象的内容合并到jQuery的原型，以提供新的jQuery实例方法。

<script>
  jQuery.fn.extend({  //给任意的jQuery标签对象添加一个方法
    check:function(){
      return this.each(function(){this.checked =true;});
    },
    uncheck:function(){
      return this.each(function(){this.checked =false;});
    }
  });
// jQuery对象可以使用新添加的check()方法了。
$("input[type='checkbox']").check();
</script>

单独写在文件中的扩展：

(function(jq){
  jq.extend({
    funcName:function(){
    ...
    },
  });
})(jQuery);

转载于:https://www.cnblogs.com/ciquankun/p/11570315.html

bansheng8492

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端笔记

浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面HTMLhtml参考手册html标签超文本标记语言，是一种创建于网页的标记语言，不一种编译语言http 超文本传输协议...
复制链接

扫一扫