前端筆記

時間 2020-09-14

標籤前端筆記简体版

原文原文鏈接

瀏覽器發請求 --> HTTP協議 --> 服務端接收請求 --> 服務端返回響應 --> 服務端把HTML文件內容發給瀏覽器 --> 瀏覽器渲染頁面javascript

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文檔。java

<html> </html>文檔的開始和結束標記.是HTML頁面的根元素，在它們之間是文檔的頭部（head）和主體（body）。node

<head> </head>定義了HTML文檔的頭.它們之間的內容不會在瀏覽器的文檔窗口顯示。包含了文檔的元（meta）數據，配置信息等，是給瀏覽器看的，你看到的是在body標籤裏面寫的。
<title> </title>定義了網頁(標籤頁的標題)標題,在瀏覽器標題欄顯示python

<body> </body>之間的文本是可見的網頁的主體內容jquery

html標籤格式,嚴格封閉

HTML標籤是由尖括號包圍的關鍵字，如<html>, <div>等
HTML標籤一般是成對出現的，好比：<div>和</div>，第一個標籤是開始，第二個標籤是結束。結束標籤會有斜線。
也有一部分標籤是單獨呈現的，好比：<br/>、<hr/>、等。
標籤裏面能夠有若干屬性，也能夠不帶屬性。

　　標籤的語法：正則表達式

<標籤名屬性1=「屬性值1」屬性2=「屬性值2」……>內容部分</標籤名>
<標籤名屬性1=「屬性值1」屬性2=「屬性值2」…… />
幾個重要的屬性
- id:定義標籤的惟一ID,HTML文檔樹中惟一,
- class:爲html元素定義一個或多個類名
- style:規定元素的行內樣式

標籤	意義
<title></title>	定義網頁標題
<style></style>	定義內部樣式表
<script></script>	定義JS代碼或引入外部JS文件
<link/>	引入外部樣式表文件
<meta/>	定義網頁原信息

body內經常使用標籤（HTML中的重點）

基本標籤（塊級標籤和內聯標籤）

塊級標籤(獨佔一行)：p、h1--h六、hr、div,from ul ol li br tablejson

內聯標籤(不獨佔一行)：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	單行輸入文本	<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	繼承父元素字體的粗細值

文本顏色---- 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	該事件在表單元素的內容改變時觸發( , , )</td>	2
onfocus	元素獲取焦點時觸發	2
onfocusin	元素即將獲取焦點時觸發	2
onfocusout	元素即將失去焦點時觸發	2
oninput	元素獲取用戶輸入時觸發	3
onreset	表單重置時觸發	2
onsearch	用戶向搜索域輸入文本時觸發 ( <input="search">)
onselect	用戶選取文本時觸發 ( 和 )</td>	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);

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

前端筆記

HTML

html標籤格式,嚴格封閉

body內經常使用標籤（HTML中的重點）

基本標籤（塊級標籤和內聯標籤）

特殊字符（還有好多其餘的，能夠直接百度搜HTML特殊符號對照表）

img標籤 內聯標籤

a標籤--超連接標籤 內聯標籤

列表

ul 無序標籤

ol 有序標籤

dl 標題列表

table 表格(重點)

form表單標籤

input標籤

select 下拉框

label標籤

textarea多行文本

CSS

語法結構

css引入方式

選擇器

基本選擇器

組合選擇器

屬性選擇器

分組和嵌套

僞類選擇器

僞元素選擇器

選擇器的優先級

CSS樣式

字體屬性--font

文本顏色---- color

文字屬性 --text

背景屬性-- background

盒子模型

邊框屬性 ---border

display

css盒子模型

float浮動

overflow溢出屬性

定位屬性

定位(position)

z-index設置層級

opacity--標籤透明度

示例

更改光標

JavaScript

JavaScript 引入方式

JavaScript 語言規範

JavaScript 語言基礎

變量聲明

JavaScript 數據類型

數值(number)

字符串(string)

布爾值(boolean)

null 和undefined

Object對象

數組

自定義對象---python中的字典

類型查詢

運算符

算術運算符

比較運算符

賦值運算符

流程控制

if判斷

switch切換

for循環

while循環

三元運算符

函數

定義函數

函數的全局變量和局部變量

做用域

函數中的arguments參數（看一下就好了）

面向對象

Data對象

JSON對象

RegExp對象

Math對象

img標籤內聯標籤

a標籤--超連接標籤內聯標籤