第十一章前端基礎

時間 2019-11-12

標籤第十一章前端基礎简体版

原文原文鏈接

第十一章前端基礎

11.1HTML

什麼是HTML?javascript

html全稱HyperText Mackeup Language,翻譯爲超文本標記語言,他不是一種編程語言,是一種描述性的標記語言,用於描述超文本內容的顯示方式。好比字體、顏色、大小等。HTML是負責描述文檔語義的語言php
- 超文本 : 音頻,視頻,圖片等稱爲超文本css
- 標記 : <英文單詞或者字母>稱爲標記，一個HTML頁面都是由各類標記組成。html
HTML的規範?前端
- HTML不區分大小寫,可是全部的標記都必須小寫,全部的標記都必須關閉。html5
- 全部的屬性值必須加引號且必須有值java
- HTML頁面的後綴名是html或者htmnode
- HTML的結構：jquery
  - 聲明部分：主要做用是用來告訴瀏覽器這個頁面使用的是哪一個標準。是HTML5標準。程序員
  - head部分：將頁面的一些額外信息告訴服務器。不會顯示在頁面上。
  - body部分：咱們所寫的代碼必須放在此標籤內。
一些網絡術語
- 網頁 : 由各類標記組成的頁面
- 主頁(首頁) : 一個網站的起始頁面或者導航頁面。
- 標記： <p>稱爲開始標記，</p>稱爲結束標記，也叫標籤。每一個標籤都規定好了特殊的含義
- 元素：<p>內容</p>稱爲元素.
- 屬性：給每個標籤所作的輔助信息。
html的基本特徵
- 對換行和空格不敏感 ,空白摺疊

11.1.1html標籤

<!DOCTYPE html>      #html 5的聲明,開頭的這一行，就是文檔聲明頭，DocType Declaration，簡稱DTD。此標籤可告知瀏覽器文檔使用哪一種 HTML 或 XHTML 規範。
<html lang="en">    #告訴瀏覽器這是一個html5
<head>              #至關於人的性格,不可見head標籤都放在頭部分之間。這裏麪包含了：<title>、<meta>、<link>，<style>
 #<!---->   ctrl + / 表示註釋 
 <title>Title</title>    #<title>指定整個網頁的標題，在瀏覽器最上方顯示。
 <meta charset="utf-8">     #單閉合標籤,提供有關頁面的基本信息
    <link rel="stylesheet" href="index.css">   #link + table鍵 新建一個index.css文件定義文檔與外部資源的關係。
    <style>           #定義內部樣式表與網頁的關係
        body{
            background-color: darkred;        #書寫後改變顏色,由於代碼從前到後依次執行
       }
    </style>
    <script src="./index.js">
    
    </script>
</head>
<body>
 <h1>wusir</h1>    #一級標籤
    <h2>wusir</h2>
    <h3>wusir</h3>
    <h4>wusir</h4>
    <h5>wusir</h5>
    <h6>wusir</h6>
<p>神仙顏值佟麗婭驚喜古裝亮相,想必女神對本身的新造型也是十分滿意.</p>
<p>據說曾與經紀人開玩笑稱「再接幾部古裝戲」</p>
<p>與以前的敦煌扮相相比,少了些經世無雙的絕美,但又多了幾分仙女下凡的平易近人之感</p>
<p>梨渦淺笑,如沐春風。新任同福老闆佟麗婭邀請各路江湖少俠,相伴混江湖~</p>   
</body>

點擊網頁上文字而後鼠標右鍵點擊標題,使用 "檢查"後效果

11.2.1標籤(標記)

#HTML將全部的標籤分爲兩種：
1.文本級標籤：p、span、a、b、i、u、em。文本標籤裏只能放文字、圖片、表單元素。
2.容器級標籤：div、h系列、li、dt、dd。容器級標籤裏能夠聽任何東西。

1.雙閉合標籤 <html></html>

前面稱爲開始標記,後面稱爲結束標記.

2.單閉合標籤 <meta charset="utf-8">

3.head標籤

meta 基本網站元信息標籤
title 網站的標題
link 連接css文件
script 連接javaScript文件
style 內嵌樣式

11.1.2body標籤

#標題標籤< h1 >   < h6 >
#字體標籤< font >   (已廢棄)
#< b >     加下劃線
#< strong >   中間加一道線

11.1.2.1標題標籤

< h1 > < h6 >

當< h1 > < h6 >較多時會自動出現滾動欄

返回頂部操做

當添加top後,在瀏覽器上面不顯示,點擊回到頂部會回到top位置

11.1.2.2段落標籤(p標籤)

p標籤是一個文本級標籤，p裏面只能放文字、圖片、表單元素。其餘的一概不能放,段落之間增長縫隙

11.1.2.3超連接標籤(a標籤)

超連接的屬性
- href：連接新網址，回到頂部，跳轉郵箱，下載文件
- title：鼠標懸浮上的標題
- name：主要用於設置一個錨點的名稱。
- target：告訴瀏覽器用什麼方式來打開目標頁面。target屬性有如下幾個值：
  - _self`：在同一個網頁中顯示（默認值)
  - _blank：在新的空白頁面打開新的連接。
    
    也就是說，若是不寫target=」_blank」那麼就是在相同的標籤頁打開，若是寫了target=」_blank」，就是在新的空白標籤頁中打開。
  - _parent：在父窗口中顯示
  - _top：在頂級窗口中顯示

1.外部連接

連接外部文件,a是英語anchor「錨」的意思，就好像這個頁面往另外一個頁面扔出了一個錨。是一個文本級的標籤。href是英語hypertext reference超文本地址的縮寫。讀做「喝瑞夫」，不要讀做「喝夫」。

另外一種進入百度的方法:

2.錨連接：

指給超連接起一個名字，做用是在本頁面或者其餘頁面的的不一樣位置進行跳轉。好比說，在網頁底部有一個向上箭頭，點擊箭頭後回到頂部，這個就是利用到了錨連接。
首先咱們要建立一個錨點，也就是說，使用name屬性或者id屬性給那個特定的位置起個名字。

點擊會回到top位置

3.幾個特殊狀況

返回首頁位置
```
<a href="#">跳轉到頂部</a>
```

3.< a href=""> 小屁孩 < /a> 超連接

使用h3包起會自動換行

更改超文本字體顏色

懸浮圈 :會在點擊超文本時出現一個鼠標懸浮提示

11.1.2.4圖片標籤 < img/ >

1.img基本概念

img: 表明的就是一張圖片。是單邊標記。img是自封閉標籤，也稱爲單標籤。
可插入圖片類型jpg,gif,png,bmp,不能往網頁中插入的圖片格式是：psd、ai

HTML頁面不是直接插入圖片，而是插入圖片的引用地址，因此也要把圖片上傳到服務器上。
src屬性：指圖片的路徑。在寫圖片的路徑時，有兩種寫法：相對路徑、絕對路徑
相對路徑和絕對路徑總結:
- 相對路徑的好處：站點無論拷貝到哪裏，文件和圖片的相對路徑關係都是不變的。
- 絕對路徑使用有一個前提，就是網頁文件和你的圖片，必須在一個服務器上。

2.img標籤的屬性

src:圖片的資源地址
width ;寬度
heigh :高度
title：提示性文本。公有屬性。也就是鼠標懸停時出現的文本
align：指圖片的水平對齊方式，屬性值能夠是：left、center、right
alt：圖片加載失敗時顯示的標題。alt是英語 alternate 「替代」的意思。（有的瀏覽器不支持）
文本級的標籤顯示在瀏覽器上時，無論你的圖片多高，它總會底邊對齊，這是一種現象，「高矮不齊，底邊對齊」
若是要想保證圖片等比例縮放，請只設置width和height中其中一個。
若是想實現圖文混排的效果，請使用align屬性，取值爲left或right

11.1.2.5字體標籤

1.標題標籤 : h1 ~ h5

2.粗體標籤 :< b >或< strong >

3.下劃線標籤 : < u >

4.中劃線 :< s >

< font >** (已廢棄)

color = "顏色";設置字體顏色。
size：設置字體大小,若是取值大於7那就按照7來算，若是取值小於1那就按照1來算。若是想要更大的字體，那就只能經過css樣式來解決
face="微軟雅黑"：設置字體類型。注意在寫字體時，「微軟雅黑」這個字不能寫錯。

11.1.2.6列表標籤

1.無序列表 < ul >

**無序列表中的每一項是< li >,li：list item，「列表項」的意思。
ul：unordered list,無序列表的意思

屬性 :type = "屬性值"

disc(實心原點,默認)
square(實心方點)
circle(空心圓)
注意:
- li不能單獨存在，必須包裹在ul裏面；反過來講，ul的「兒子」不能是別的東西，只能有li,可是li是一個容器級標籤，li裏面什麼都能放。甚至能夠再放一個ul。
- ul的做用，並非給文字增長小圓點的，而是增長無序列表的「語義」的

#列表之間是能夠嵌套的。
    <ul>
    <li><b>北京市</b>
        <ul>
            <li>海淀區</li>
            <li>朝陽區</li>
            <li>東城區</li>

        </ul>
    </li>

    <li><b>廣州市</b>
        <ul>
            <li>天河區</li>
            <li>越秀區</li>
        </ul>
    </li>
  </ul>

2.有序列表 < ol >

英文單詞：Ordered List。
屬性type="屬性值"。屬性值能夠是：
- 1(阿拉伯數字，默認)、
- a
- A
- i、
- I。結合start屬性表示從幾開始。

3.定義列表< dl >

**<dl>英文單詞：definition list，沒有屬性。dl的子元素只能是dt和dd .dt,dd只能在dl裏面
<dt>：definition title 列表的標題，這個標籤是必須的**
<dd>：definition description 列表的列表項，若是不須要它，能夠不加
- 上圖能夠看出，定義列表表達的語義是兩層：
  - （1）是一個列表，列出了幾個dd項目
  - （2）每個詞兒都有本身的描述項。dd是描述dt的,一個dt能夠配不少dd：

11.1.2.7表格標籤< table >

1.一個表格<table>是由每行<tr>組成的，每行是由<td>組成的。一個表格是由行組成的（行是由列組成的），而不是由行和列組成的

2.< table >屬性

border：邊框。像素爲單位。
bordercolor：表格的邊框顏色
cellspacing：單元格和單元格之間的距離（外邊距），像素爲單位。默認狀況下的值爲0
align：表格的水平對齊方式。屬性值能夠填：left right center。注意：這裏不是設置表格裏內容的對齊方式，若是想設置內容的對齊方式，要對單元格標籤<td>進行設置）
width：寬度。像素爲單位。
height：高度。像素爲單位
bgcolor="#99cc66"：表格的背景顏色。
background="路徑src/...：背景圖片。背景圖片的優先級大於背景顏色。

帶邊框

< tr >行屬性**
- dir：公有屬性，設置這一行單元格內容的排列方式。能夠取值：ltr：從左到右（left to right，默認），rtl：從右到左（right to left）
- bgcolor：設置這一行的單元格的背景色。注：沒有background屬性，即：沒法設置這一行的背景圖片，若是非要設置，能夠用css實現。
- height：一行的高度
- align="center"：一行的內容水平居中顯示，取值：left、center、right
- valign="center"`：一行的內容垂直居中，取值：top、middle、bottom
< td > 單元格
- align`：內容的橫向對齊方式。屬性值能夠填：left right center。若是想讓每一個單元格的內容都居中，這個屬性太麻煩了，之後用css來解決。
- valign：內容的縱向對齊方式。屬性值能夠填：top middle bottom
- width：絕對值或者相對值(%)
- height：單元格的高度
- bgcolor：設置這個單元格的背景色。
- background：設置這個單元格的背景圖片。
合併單元格
- colspan：橫向合併。例如colspan="2"表示當前單元格在水平方向上要佔據兩個單元格的位置。
- rowspan：縱向合併。例如rowspan="2"表示當前單元格在垂直方向上
加粗單元格`< th >
<caption>：表格的標題。使用時和tr標籤並列

11.1.2.8表單標籤(form標籤)

1.表單標籤用<form>表示，用於與服務器的交互。表單就是收集用戶信息的，就是讓用戶填寫的、選擇的。

2.屬性:

action`：指定表單數據的處理程序，通常是PHP，如action=「login.php」
enctype：表單數據的編碼方式（加密方式），只能在post方式下使用
method：表單數據的提交方式，通常取值：get(默認)和post
get方式
- 明文提交，不安全，只能提交2kb信息，提交的內容會在地址上顯示,提交的數據類型只限於ASCII字符,將表單數據，以"name=value"形式追加到action指定的處理程序的後面，二者間用"?"隔開，每個表單的"name=value"間用"&"號隔開,
post
- 密文提交，安全，能夠提交大量信息將表單數據直接發送(隱藏)到action指定的處理程序。POST發送的數據不可見。Action指定的處理程序能夠獲取到表單數據。能夠提交海量信息，相對來講安全一些，提交的數據格式是多樣的(Word、Excel、rar、img)。

3.輸入標籤,文本框< input >

屬性
- type = "屬性值" :文本類型,
  - text（默認）單行文本輸入框
  - password：密碼輸入框
  - checkbox :多選框
    - 名字相同的按鈕做爲一組進行選擇。
  - radio：單選按鈕
    - 產生互斥效果：給每一個單選按鈕設置相同的name屬性值
    - 默認選中：給單選按鈕添加checked屬性
  - submit`：提交按鈕
    
    傳送當前表單的數據給服務器或其餘程序處理。這個按鈕不須要寫value自動就會有「提交」文字。這個按鈕真的有提交功能。點擊按鈕後，這個表單就會被提交到form標籤的action屬性中指定的那個頁面中去。`
  - datetime :時間
  - file：上傳文件。
  - name：控件的名稱，提交到當前服務器的名稱
  - value = "內容",文本框裏的默認內容（已經被填好了的）
  - readonly：文本框只讀，不能編輯。由於它的屬性值也是readonly，因此屬性值能夠不寫。用了這個屬性以後，在google瀏覽器中，光標點不進去；在IE瀏覽器中，光標能夠點進去，可是文字不能編輯。
  - disabled：文本框只讀，不能編輯，光標點不進去。屬性值能夠不寫
  - size="50"`：表示文本框內能夠顯示五十個字符。一個英文或一箇中文都算一個字符。注意size屬性值的單位不是像素哦。

label標籤
- 能夠設置和input有綁定關係
設置方式：input元素要有一個id，而後label標籤有一個for屬性，和id相同，那麼label和input就有綁定關係了
下拉列表標籤< select >
- < select>標籤屬性 :
  - multiple：能夠對下拉列表中的選項進行多選。沒有屬性值。
  - size="1"：若是屬性值大於1，則列表爲滾動視圖。默認屬性值爲1，即下拉視圖。
  - < option>標籤
    - 屬性：selected：預選中。沒有屬性值。
四種按鈕
多行文本輸入框< textarea >
- 屬性
  - rows="4"：指定文本區域的行數
  - cols="20"：指定文本區域的列數

11.1.2.9.塊級標籤< div > 和 < span >

div：把標籤中的內容做爲一個塊兒來對待(division)。必須單獨佔據一行。
- align = "屬性值"：設置塊兒的位置。屬性值可選擇：left、right、 center
- div在瀏覽器中，默認是不會增長任何的效果的，可是語義變了，div中的全部元素是一個小區域,div標籤是一個容器級標籤，裏面什麼都能放，甚至能夠放div本身。
- 將網站分割成獨立的邏輯區域
< span>和< div>惟一的區別在於：<span>是不換行的，而<div>是換行的.
span也是表達「小區域、小跨度」的標籤，可是是一個文本級的標籤。
- 小區域標籤,在不影響文本正常顯示的狀況下,單獨設置對應樣式

11.1.2.10其餘標籤

# &nbsp   空格
# &lt     小於號
# &gt     大於號
# &copy   版權©
# &trade 商標™
# &amp   符號&

&nb sp; 空格

換行標籤< br >

< p >標籤和< br >標籤的區別：
- < p >標籤會在段落的先後自動插入一個空行，而< br >標籤沒有空行
- 並且<br>標籤沒有屬性。注意<br> 沒有結束標籤，把<br>標籤寫爲 <br/> 是經得起將來考驗的作法

< hr >水平線標籤

< center >內容居中標籤

此時center表明是一個標籤，而不是一個屬性值了。只要是在這個標籤裏面的內容，都會居於瀏覽器的中間。到了H5裏面，center標籤不建議使用。

預約義標籤 < pre >

將保留其中的全部的空白字符(空格、換行符)，原封不動的輸出結果（告訴瀏覽器不要忽略空格和空行）說明：真正排網頁過程當中，<pre>標籤幾乎用不着。但在PHP中用於打印一個數組時使用。

上圖中，好像pre標籤部分的字體變小了，並且還出現了縮進，好吧，這個實際上是瀏覽器搞的鬼。爲何要有<pre>這個標籤呢？答案是：全部的瀏覽器默認狀況下都會忽略空格和空行。

11.1.2.11 html的嵌套關係

塊級標籤
- 特色
  - 獨佔一行
  - 能夠設置寬高，若是不設置寬，默認是父標籤的100%寬度
- 標籤：h1~h6，ul，ol，li，form，table，tr，p，div

11.2 css

11.2.1css引入方式

行內樣式

<div style = "color : red ;"> mjj </div>

內嵌式

#在head標籤內書寫style
<style>     
  /*css代碼*/
</style>

外接式 (多用)

<link href="css/inex.css" rel="stylesheet">

三種引入方式的優先級

#行內樣式 > 內嵌式和外接式
#內嵌式和外接式要看誰在後面,在後面的優先級高

11.2.2 css選擇器

選擇器做用 : 選中標籤

基礎選擇器

id選擇器

#xxx

<style>
box{
    width:200px;
    height:200px;
    background-color:yellow;
}
	.active{
        border-radius:100px;    #設置成100會是一個圓,當設置10時,會出現圓角,見下圖
}
    #box{
    	color: red;
    }
</style>

<div class = "box active" id="box">大佬</div>
<div class = "box"></div>
<div class = "box"></div>

標籤選擇器

類選擇器

.xxx     能夠重複,歸類,內能夠設置多個

<style>
box{
    width:200px;
    height:200px;
    background-color:yellow;
}
	.active{
        border-radius:100px;    #設置成100會是一個圓,當設置10時,會出現圓角,見下圖
}
</style>

<div class = "box active"></div>
<div class = "box"></div>
<div class = "box"></div>

text-align :center 實現水平居中

line-height = 盒子的高度實現垂直居中

11.2.3高級選擇器

後代選擇器 子子孫孫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>震驚,大佬居然作出這個動做</title>
    <style>
        /*後代選擇器,和直接寫p區別是限定了範圍*/
        /*#box p{*/
            /*color: red;*/
        /*}*/
    </style>
</head>
<body>
    <div id="box">
        <div>
            <div>
                <div>
                    <p>
                        大佬
                    </p>
                </div>
            </div>
        </div>
        <p>
            張三
        </p>
    </div>
</body>
</html>

子代選擇器

只包括兒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>震驚,大佬居然作出這個動做</title>
    <style>
        /*子代選擇器*/
        #box>p{
            color: yellow;
        }
    </style>
</head>
<body>
    <div id="box">
        <div>
            <div>
                <div>
                    <p>
                        大佬
                    </p>
                </div>
            </div>
        </div>
        <p>
            張三
        </p>
    </div>
</body>
</html>

組合選擇器 html,body,div,p,ul
交集選擇器 span,active

11.2.4盒子模型

塊級標籤
- 特色
  - 獨佔一行
  - 能夠設置寬高，若是不設置寬高，默認是父標籤的100%寬度
標籤：h1~h6，ul，ol，li，form，table，tr，p，div
行內標籤
- 特色 :
  - 在一行內顯示
  - 不能夠設置寬高，若是不設置寬高,默認是字體的大小
- 標籤 : a,span,b，strong，i，em，img，td
行內塊標籤
- 特色
  - 在一行內顯示
  - 能夠設置寬高
- 標籤 : input ,img
- 屬性
  - display：顯示方式
    - block：顯示塊
    - inline：顯示行內
    - inline-block：顯示行內塊
- text-align：文本排列方式
  - left：水平靠左
  - center：水平居中
  - right：水平靠右
- line-height：行高，一行的高度當行高等於盒子模型的高度時，實現垂直居中
- text-decoration：文本修飾
  - none：無修飾
  - underline：下劃線
  - line-through：刪除線
嵌套關係
- 塊級標籤能夠嵌套塊級和行內以及行內塊
- 行內標籤儘可能不要嵌套塊級
- p標籤不要嵌套div，也不要嵌套p，能夠嵌套a/img/表單控件
  - 會改變結構

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>震驚,大佬居然作出這個動做</title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: yellow;
            /*padding: 50px;*/
            /*padding :0 20px;*/
            /*上下  左右*/
            /*padding :0 20px 30px;*/
            /*上  左右  下*/
            padding :10px 20px 30px 40px;
            /*上 右 下 左(順時針)*/
            border: 4px solid #000;
            margin-left: 30px;
            /*盒子茴香油移動三十*/
        }
    </style>
</head>
<body>
<div id="box" class="box">大佬</div>
</body>
</html>

屬性
- width : 內容的寬度
- height : 內容的寬度
- border :邊框
- padding 內邊距,border到內容的距離
- margin 外邊距

padding內邊距

padding：就是內邊距的意思，它是邊框到內容之間的距離
另外padding的區域是有背景顏色的。而且背景顏色和內容的顏色同樣。也就是說background-color這個屬性將填充全部的border之內的區域

border邊框

邊框有三個要素： 粗細線性樣式顏色
若是顏色不寫，默認是黑色。若是粗細不寫，不顯示邊框。若是隻寫線性樣式，默認的有上下左右 3px的寬度,實體樣式，而且黑色的邊框。

按照三要素寫border

border-width: 3px;
border-style: solid;
border-color: red;
/*
border-width: 5px 10px;
border-style: solid dotted double dashed;
               實線   點線   雙線    虛線
border-color: red green yellow;
*/

margin外邊距

margin：外邊距的意思。表示邊框到最近盒子的距離。

/*表示四個方向的外邊距離爲20px*/
margin: 20px;
/*表示盒子向下移動了30px*/
margin-top: 30px;
/*表示盒子向右移動了50px*/
margin-left: 50px;

margin-bottom: 100px;

水平方向

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

    <style>
        /*選中第一個*/
        span:nth-child(1){
            background-color: red;
            margin-right:20px;
        }
        span:nth-child(2){
            background-color: green;
            margin-left: 100px;
        }

    </style>
</head>
<body>
    <span>張三</span><span>李四</span>
</body>
</html>

垂直方向

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

    <style>
        div{
            width: 200px;
            height: 200px;
        }
        #box1{
            background-color: red;
            margin-bottom:30px;
        }
         #box2{
            background-color: black;
             margin-top: 100px;
        }

    </style>
</head>
<body>
	/*margin在垂直方向上會出現外邊距合併現象*/
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

margin在垂直方向上會出現外邊距合併現象

製造三角形

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

    <style>
        #box{
            font-size: 12px;
            width: 0;
            height: 0;
            /*background-color: #000000;*/
            border-top: 15px solid blue;
            border-left:15px solid transparent;
            border-right:15px solid transparent;
            /*border-bottom:15px solid transparent;*/
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

11.2.5css繼承性和層疊性

在css中有某些屬性能夠繼承下來
- color
- text-xxx,
- line-xxx
- font-size 設置字體顏色

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

    <style>
        #box{
            color: red;
            text-align: center;
            line-height: 80px;
            font-size: 26px;
        }
        p{
            background-color: transparent;
            /*透明色*/
        }
    </style>
</head>
<body>
    <div id="box">
        <p class="active">
            張三
        </p>
    </div>

</body>
</html>

權重

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

    <style>
        /*類選擇器權重10*/
         .active{
            color: yellow;
        }
         /*id選擇器權重100*/
         #active{
             color: green;
         }
         /*標籤選擇器權重1*/
        p{
            color: red !important;
        }
		/*!important強制將該屬性權重調到最大,用做調試*/
    </style>
</head>
<body>
    <div id="box1" class="wrap1">
        <div id="box2" class="wrap2">
            <div id="box3" class="wrap3">
                <p class="active" id="active">
                    張三
                </p>
            </div>
        </div>
    </div>
</body>
</html>

選中了標籤,權重比較

1.數選擇器數量 id 類標籤 ,誰大誰的優先級較高,若是同樣大,後面的屬性會覆蓋前面的屬性
2.選中的標籤的屬性優先級永遠大於繼承來的屬性,無可比性
3.同是繼承來的屬性
- 誰描述的近,誰的優先級高
- 描述的同樣進,在迴歸到數選擇器數量

11.2.6行內元素和塊級元素(重點)

11.2.6.1特色

行內元素

與其餘行內元素並排
不能設置寬,高.默認的寬度,就是文字的寬度

塊級元素

獨佔一行,不能和其餘任何元素並列
能接受寬、高。若是不設置寬度，那麼寬度將默認變爲父親的100%。

11.2.6.2分類

從HTML的角度來說，標籤分爲：

文本級標籤 :p、span、a、b、i、u、em
容器級標籤：div、h系列、li、dt、dd。

從CSS的角度講:

塊級元素：全部的容器級標籤都是塊級元素，還有p標籤。
行內元素：除了p以外，全部的文本級標籤，都是行內元素。p是個文本級，可是是個塊級元素。

11.2.6.3塊級元素和行內元素相互轉換

塊級元素---->行內元素：

一旦，給一個塊級元素（好比div）設置：

display :inline

那麼，這個標籤將當即變爲行內元素，此時它和一個span無異。inline就是「行內」。也就是說：

此時這個div不能設置寬度、高度；
此時這個div能夠和別人並排了

行內元素---->塊級元素：

一樣的道理，一旦給一個行內元素（好比span）設置：

display: block;

那麼，這個標籤將當即變爲塊級元素，此時它和一個div無異。block」是「塊」的意思。也就是說：

此時這個span可以設置寬度、高度
此時這個span必須霸佔一行了，別人沒法和他並排
若是不設置寬度，將撐滿父親

11.2.7僞類選擇器

對於a標籤,若是想設置a標籤樣式,要做用於a標籤上,對於繼承性來講,a標籤不起做用(由於a標籤有僞類選擇器)

愛恨準則(LoVe HAte)

/*a標籤沒有被訪問時設置的樣式*/
a:link{    
}
/*a標籤被訪問後設置的樣式*/
a:visited{
}
/*a標籤懸浮時設置的屬性(用的多)*/
a:hover{
}
/*a標籤被摁住時設置的屬性*/
a:active{
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href='#'>百度一下</a>
</body>
</html>

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

   <style>
        a.active{
            color: deepskyblue;
       }
        #box{
            width: 200px;
            height: 200px;
            background-color: black;
       }
        #box:hover{
            background-color: red;
       }
   </style>
</head>
<body>
   <a href="#">百度一下</a>
   <div id="box"></div>
</body>
</html>

懸浮在黑框上時,會變成紅色

11.2.8屬性選擇器

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

    <style>
        input[type='text']{
            background-color: red;
        }
    </style>
</head>
<body>
    <form action="">
        <input type="text">
        <input type="password">
        <input type="radio">
        <input type="checkbox">
    </form>
</body>
</html>

11.2.9僞元素選擇器

經過僞元素添加的內容爲行內元素

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

    <style>
		/*選中第一個字體*/
        p::first-letter{
            color:red;
            font-size: 26px;
            /*加粗*/
            font-weight:bold ;
        }

    </style>
</head>
<body>
    <p>小豬佩奇身上紋</p>
</body>
</html>

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

    <style>
		/*只針對字體,不針對符號*/
        p::first-letter{
            
            color:red;
            font-size: 26px;
            font-weight:bold ;
        }
		/*若添加的是符號,就不生效*/
        p::before{
            content: '@';
        }
        p::after{
            /*經過僞元素添加的內容爲行內元素,是解決浮動佈局經常使用的一種方法*/
            content: '***';
        }

    </style>
</head>
<body>
    <p>小豬佩奇身上紋</p>
</body>
</html>

11.2.10字體屬性和文本屬性

參考：https://book.apeland.cn/details/351/

字體屬性

字體

font-family

font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif

字體大小
- font-size表示設置字體大小，若是設置成inherit表示繼承父元素的字體大小值。
- 通常瀏覽器的字體大小默認爲爲16px
- 最經常使用的像素單位：px、em、rem，這裏我們先介紹一種單位，px。
  - px:像素是指由圖像的小方格組成的，這些小方塊都有一個明確的位置和被分配的色彩數值，小方格顏色和位置就決定該圖像所呈現出來的樣子。

字體粗細

font-weight表示設置字體的粗細

屬性值	描述
normal	普通的字體粗細，默認
bold	加粗的字體粗細
lighter	比普通字體更細的字體
bolder	比bold更粗的字體
100~900	400表示normal

字體樣式

font-style

屬性值	描述
normal	默認的，文本設置爲普通字體
italic	若是當前字體的斜體版本可用，那麼文本設置爲斜體版本；若是不可用，那麼會利用 oblique 狀態來模擬 italics。經常使用
oblique	將文本設置爲斜體字體的模擬版本，也就是將普通文本傾斜的樣式應用到文本中。

px,em,rem

px :
em :相對單位,相對於當前盒子字體大小
rem:根元素

文本屬性

文本修飾

text-decoration

屬性值	描述
none	無文本的修飾
underline	文本下劃線
overline	文本上劃線
line-through	穿過文本的線，~~能夠模擬刪除線~~。

文本縮進
- text-indent
- 它的屬性值是像素(px、em、rem)單位。
行間距
- 行間距，也叫行高，表示行與行之間的距離。line-height

中文間距和字體間距

中文間距:letter-spacing

字母間距: word-spacing

p{
    /*文字之間的距離*/
    letter-spacing:5px; 
    /*調整英文單詞之間的距離*/
    word-spacing: 10px;
}

文本對齊

text-align

屬性值	描述
left	文本左對齊，默認
right	文本右對齊
center	中心對齊

11.2.11浮動(佈局方案)

1.浮動介紹

浮動是網頁佈局中很是重要的一個屬性。那麼浮動這個屬性一開始設計的初衷是爲了網頁的`文字環繞效果

另外以前我們學習了標籤的分類，每類標籤都是有它本身的特色，好比塊級標籤獨佔一行，哎呀，忽然有個idea，若是讓兩個div在一排內顯示，那怎麼辦，可能有的同窗又說了，老師，display屬性啊，把他們設置成inline-block。你會發現:

2.浮動屬性

浮動：css樣式表中用float來表示

屬性值	描述
none	表示不浮動，全部以前講解的HTML標籤默認不浮動
left	左浮動
right	右浮動
inherit	繼承父元素的浮動屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮動屬性用法</title>
    <style type="text/css">
        .left{
            width: 200px;
            height: 200px;
            background-color: red;
            color: #fff;
            /*左浮動*/
             float:left;
        }
        .right{
            width: 200px;
            height: 200px;
            background-color: green;
            color: #fff;
            /*右浮動*/
             float:right;
        }
    </style>
</head>
<body>
    <div class="left">左邊的盒子</div>
    <div class="right">右邊的盒子</div>
</body>
</html>

3浮動的現象

脫離了標準文檔流,不在頁面上佔位置,即脫標
浮動的元素互相貼靠
浮動元素有收縮效果
浮動的元素會產生」字圍「效果

浮動帶來的問題 :撐不起父盒子的高度

標準文檔流

文檔流指的是元素排版佈局過程當中，元素會默認自動從左日後，從上往下的流式排列方式。即不對頁面進行任何佈局控制時，瀏覽器默認的HTML佈局方式，這種佈局方式從左往右，從上往下，有點像流水的效果，咱們稱爲流式佈局。

脫標

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>脫標</title>
    <style type="text/css">
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
            color: #fff;
        }
        .box2{
            width: 400px;
            height: 400px;
            background-color: green;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="box1">左邊的盒子</div>
    <div class="box2">右邊的盒子</div>
</body>
</html>

會發現紅色盒子壓蓋住了黃色的盒子，爲何會出現這種現象呢？

由於：在標準文檔流下，左邊的盒子'和'右邊的盒子'兩個盒子是上下排版，若是對左邊的盒子設置了浮動，那麼該盒子會脫離了標準文檔流，它就不會按照默認的流式排版佈局，能夠認爲這個左邊的盒子盒子浮起來了，不受標準文檔流排版佈局的約束。那麼此時瀏覽器認爲右邊的盒子盒子是標準文檔流下的第一個盒子。因此右邊的盒子就渲染到了頁面中的第一個位置上。

浮動元素的貼邊現象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>浮動元素貼靠</title>
    <style type="text/css">
        .box1{
            width: 100px;
            height: 450px;
            background-color: red;
            float: left;
        }
        .box2{
            width: 200px;
            height: 250px;
            background-color: green;
            float: left;
        }
        .box3{
            width: 300px;
            height: 300px;
            background-color: blue;
            float: left;
        }
    </style>
<body>
      <div class="box1"></div>
      <div class="box2"></div>
       <div class="box3"></div>
</body>

文字環繞效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>浮動元素貼靠</title>
    <style type="text/css">
        img{
            width: 800px;
        }
        .box{
            float: left;
        }
        p{
            border: 1px solid red;
        }
    </style>
<body>
    <div class="box">
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559248530842&di=ebc34319c311fc5a237ed407b0857c31&imgtype=0&src=http%3A%2F%2Fd.ifengimg.com%2Fq100%2Fimg1.ugc.ifeng.com%2Fnewugc%2F20181102%2F14%2Fwemedia%2Fe0f05d427f2fa022a5b1471e033c071bd92802b9_size108_w1280_h764.jpg" alt="">
   </div>
    <p>
一、 說到底，都是一個字。
二、 她瞪眼怒道：「喊我作什麼？不要臉！」
三、 蒼顏白髮人衰境，黃卷青燈人空心。
四、 世事無奈人無奈，能說之時不想說，想說之時已經是不能說。
五、 人生不如意之事七八九，苦事；終歸還能與人言一二三，幸事。
六、 情之一字，不知所起，不知所棲，不知所結，不知所解，不知所蹤，不知所終。
七、 「我喝過很烈的酒，也放過不應放的手，從前不會回頭，日後不會將就。」
八、 世間文字八萬個，惟有情字最殺人。
九、 徐鳳年閉上眼睛，雙手搭在春雷上，有些明白一些事情了，爲什麼徐驍現在還像個老農那般喜歡縫鞋？軒轅敬城本該像張鉅鹿那般經略天下，最不濟也能夠去跟荀平靠攏，卻被本身堵在了一家三口的家門之外，堵在了軒轅一姓的徽山之上，即便一舉成爲儒聖，還是未曾跨出半步。騎牛的最終仍是下了山，但這種下山與在山上，又有什麼兩樣？羊皮裘李老頭兒十六歲金剛十九歲指玄二十四歲達天象，爲什麼斷臂之後還是在江上鬼門關爲他當年的綠袍兒，幾笑一飛劍？
十、 少年跟着在她心中默唸道：「天道崩塌，我陳平安，惟有一劍，可搬山，斷江，倒海，降妖，鎮魔，敕神，摘星，摧城，開天！」
十一、 人生不如意之事七八九，能與人言一二三都無，纔算坎坷。
十二、 某些人和事，哪怕是路邊的風景，但是隻要看一眼，依然會讓人以爲很美好。
1三、 人生不如意之事七八九，能與人言一二三都無，纔算坎坷。
1四、 一名年輕女子御劍而來，身後有青衫儒士凌波微步，逍遙踏空。
1五、 什麼叫喜歡一我的？那就是見到對方以前，不知情爲什麼物，錯過以後，更不知情爲什麼物。
1六、 混吃等死，小富即安，飛黃騰達，是由於各有各的緣法，未必有高下之分。
1七、 青草明年生，大雁去又回。 春風今年吹，公子歸不歸？ 青石板青草綠，青石橋上青衣郎，哼着金陵調。 誰家女兒低頭笑？ 黃葉今年落，一歲又一歲。 秋風明年起，娘子在不在？ 黃河流黃花黃，黃河城裏黃花娘，撲着黃蝶翹。 誰家兒郎刀在鞘？
1八、 這麼多年下來，陳平安活得很艱辛，可是不苦。
1九、 拓跋春隼冷笑不止，只不過再一次笑不出來。
20、 今生來生都願識盡世間好人，讀盡世間好書，看盡世間好山水，天上風景再好，從不羨慕。
2一、 女子無情時，負人最狠。女子癡情時，感人最深。
2二、 情到深處，知悔不肯悔。
2三、 女子站在一柄長劍之上，在身陷必死之地的傢伙身前懸空。
2四、 情到深處，知悔不肯悔。
2五、 小和尚將洗好的袈裟晾好，望向房內：「又是一個天晴的好日子.李子，師父說我沒悟性，你也說我笨，我們寺裏兩個禪，我都不修.你即是個人禪，秀色可參。」
2六、 她閉上眼睛，緩緩道：「天道崩塌，我陳平安，惟有一劍，可搬山，斷江，倒海，降妖，鎮魔，敕神，摘星，摧城，開天！」
2七、 太上忘情，非是無情，忘情是寂靜不動情，好似遺忘，如果記起，即是至情。正所謂言者因此在乎，得意而忘一言，道可道很是道，偶而知道，欲言又止，纔算知道。
2八、 情，心中青梅。年老仍記年少澀。
2九、 書上說，天下沒有不散的宴席。不要怕，書上還說了，人生何處不相逢。
30、 姓溫的店小二順着竹子的手指，看到有女子撐傘過橋，姍姍而來。
3一、 天雨雖寬，不潤無根之草
3二、 他就算不認可，也知道本身喜歡她。不喜歡，如何能看了那麼多年，卻也老是看不厭？
3三、 有些女子，明知很很差，可就是放不下的。
3五、 徐鳳年睜眼之後，拿袖口抹了抹血污，笑着喊道：「姜泥！老子喜歡你！」
3六、 徐鳳年想着她的酒窩，搖晃站起身。
3七、 我寧姚喜歡的男人，必定要是全天下最厲害的劍仙，全天下！最厲害！大劍仙！什麼道祖佛陀，什麼儒家至聖，在他一劍以前，也要低頭，都要讓路！」
3八、 女子無情時，負人最狠。女子癡情時，感人最深。
3九、 需知作人逆勢如飲酒，順勢卻如倒茶，對不對？
40、 情之一字，不知所起，不知所棲，不知所結，不知所解，不知所蹤，不知所終。
4一、 既然喜歡了，卻沒能說出口，那就別死在這裏！
4二、 只是不知道，原來是如此的喜歡。
4三、 不握劍了，握着她的手，這樣的江湖，比什麼都好
4四、 人生當苦無妨,良人當歸即好.
    </p>
</body>

4.清除浮動的方式

方式一:給父元素添加固定高度(不靈活,後期不易維護)
- 萬年不變的導航欄

方式二:內牆法

給最後一個浮動元素的後面添加一個空的塊級標籤,而且設置該標籤的屬性爲 clear :both

問題:冗餘

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
    *{
    padding :0;
    margin:0;
    }
    .father{
        width:800px;
/*        height:800px;*/
        margin: 100px auto;
        border:1px solid #000;
    }
    .child1{
        width: 200px;
        height: 200px;
        background-color: red;
        float: left;
    }
    .child2{
        width: 300px;
        height: 200px;
        background-color: green;
        float: right;
    }
    .clear{
        clear: both;
    }
</style>
</head>
<body>
    <div class="father">
        <div class="child1">張三</div>
        <div class="child2">李四</div>
        <div class="clear"></div>
    </div>
</body>
</html>

方式三:僞元素清除法(推薦)

.<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
    *{
    padding :0;
    margin:0;
    }
    .father{
        width:800px;
/*        height:800px;*/
        margin: 100px auto;
        border:1px solid #000;
    }
    .child1{
        width: 200px;
        height: 200px;
        background-color: red;
        float: left;
    }
    .child2{
        width: 300px;
        height: 200px;
        background-color: green;
        float: right;
    }
    .clearfix::after{
        content: '&';
        display: block;
        clear: both;
    }
</style>
</head>
<body>
    <div class="father clearfix">
        <div class="child1">張三</div>
        <div class="child2">李四</div>
    </div>
</body>
</html>

方式四:overflow:hidden超出隱藏
- overflow:hidden會造成bfc區域,造成bfc區域以後,內部有他本身的佈局規則,計算bfc高度是.浮動元素也參與計算,但要當心overflow:hidden的本意

overflow

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
    .box{
        width: 300px;
        height: 300px;
        border:1px solid #000;
    }
</style>
</head>
<body>
    <div class="box">
一、 說到底，都是一個字。
二、 她瞪眼怒道：「喊我作什麼？不要臉！」
三、 蒼顏白髮人衰境，黃卷青燈人空心。
四、 世事無奈人無奈，能說之時不想說，想說之時已經是不能說。
五、 人生不如意之事七八九，苦事；終歸還能與人言一二三，幸事。
六、 情之一字，不知所起，不知所棲，不知所結，不知所解，不知所蹤，不知所終。
七、 「我喝過很烈的酒，也放過不應放的手，從前不會回頭，日後不會將就。」
八、 世間文字八萬個，惟有情字最殺人。
九、 徐鳳年閉上眼睛，雙手搭在春雷上，有些明白一些事情了，爲什麼徐驍現在還像個老農那般喜歡縫鞋？軒轅敬城本該像張鉅鹿那般經略天下，最不濟也能夠去跟荀平靠攏，卻被本身堵在了一家三口的家門之外，堵在了軒轅一姓的徽山之上，即便一舉成爲儒聖，還是未曾跨出半步。騎牛的最終仍是下了山，但這種下山與在山上，又有什麼兩樣？羊皮裘李老頭兒十六歲金剛十九歲指玄二十四歲達天象，爲什麼斷臂之後還是在江上鬼門關爲他當年的綠袍兒，幾笑一飛劍？
十、 少年跟着在她心中默唸道：「天道崩塌，我陳平安，惟有一劍，可搬山，斷江，倒海，降妖，鎮魔，敕神，摘星，摧城，開天！」
十一、 人生不如意之事七八九，能與人言一二三都無，纔算坎坷。
十二、 某些人和事，哪怕是路邊的風景，但是隻要看一眼，依然會讓人以爲很美好。
1三、 人生不如意之事七八九，能與人言一二三都無，纔算坎坷。
1四、 一名年輕女子御劍而來，身後有青衫儒士凌波微步，逍遙踏空。
1五、 什麼叫喜歡一我的？那就是見到對方以前，不知情爲什麼物，錯過以後，更不知情爲什麼物。
1六、 混吃等死，小富即安，飛黃騰達，是由於各有各的緣法，未必有高下之分。
1七、 青草明年生，大雁去又回。 春風今年吹，公子歸不歸？ 青石板青草綠，青石橋上青衣郎，哼着金陵調。 誰家女兒低頭笑？ 黃葉今年落，一歲又一歲。 秋風明年起，娘子在不在？ 黃河流黃花黃，黃河城裏黃花娘，撲着黃蝶翹。 誰家兒郎刀在鞘？
1八、 這麼多年下來，陳平安活得很艱辛，可是不苦。
1九、 拓跋春隼冷笑不止，只不過再一次笑不出來。
20、 今生來生都願識盡世間好人，讀盡世間好書，看盡世間好山水，天上風景再好，從不羨慕。
    </div>
</body>
</html>

5.BFC

BFC(Block formatting context)直譯爲"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-level box參與，它規定了內部的Block-level Box如何佈局，而且與這個區域外部絕不相干。

BFC佈局規則

1.內部的Box會在垂直方向，一個接一個地放置。
2.Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
3.每一個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。
4.BFC的區域不會與float 元素重疊。
5.BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
/*6.計算BFC的高度時，浮動元素也參與計算

哪些元素會造成bfc

1.根元素
2.float屬性不爲none
3.position爲absolute或fixed
4.display爲inline-block
5.overflow不爲visible

11.2.12定位

position:  static |  relative  | absolute  | fixed;
   定位   靜態(默認)      相對       絕對      固定

1.靜態定位static默認

2.相對定位relative

特徵
- 與標準文本流下的盒子沒有區別
- 有坑,會影響佈局
做用
- 作"子絕父相"佈局方案的參考
參考點
- 以原盒子作參考點

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
    .box{
        width: 500px;
        height: 600px;
        border:1px solid #000;
    }
    .box .a{
        width: 200px;
        height: 200px;
        background-color:red ;
        
    }
      .box .b{
        width: 200px;
        height: 200px;
        background-color:green;
    }
      .box .c{
        width: 200px;
        height: 200px;
        background-color:blue ;
    }
</style>
</head>
<body>
    <div class="box">
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>

    </div>
</body>
</html>

3.絕對定位absolute

若是單獨設置一個盒子爲絕對定位
- 以top描述,它的參考點是以body的(0,0)點作參考點
- 以bottom描述,是以瀏覽器左下角爲參考點來調整位置
特徵
- 壓蓋
- 脫標
- 子絕父相 :以最近的父輩元素左上角爲參考點進行定位

4.固定定位fixed

特徵
- 脫標
- 固定不變
- 提升層級
- 參考點:瀏覽器左上角

iconfont的使用:

z-index

規則
- 只適用於定位的元素，默認爲z-index:auto;
- z-index取值爲整數,數值越大,層級越高
- 若是元素設置了定位，沒有設置z-index，那麼誰寫在最後面的，表示誰的層級越高。(與標籤的結構有關係)
- 從父現象。一般佈局方案咱們採用"子絕父相"，比較的是父元素的z-index值，哪一個父元素的z-index值越大，表示子元素的層級越高。

background背景

/*設置背景圖*/
background-image: url("xiaohua.jpg")

/*默認是repeat*/
background-repeat: repeat;
/*水平方向*/
background-repeat: repeat-x;
/*垂直方向*/
background-repeat: repeat-y;
/*不平鋪,只顯示是一張*/
background-repeat: no-repeat;

/*調整背景圖的位置,默認是(0,0)*/
background-position: -164px -106px;

cursor:pointer

box-shadow

box-shadow: 水平距離 垂直距離 模糊程度 陰影顏色 inset

recet.css

行內的水平垂直居中

塊級元素的水平垂直居中

11.3JavaScript核心編程

11.3.1 JS簡介

Web前端有三層：
- HTML：從語義的角度，描述頁面結構
- CSS：從審美的角度，描述樣式（美化頁面）
- JavaScript：從交互的角度，描述行爲（提高用戶體驗）
js中只有全局做用域和函數做用域
爲何咱們要學Javascript？
- 1.由於你沒有選擇。在web世界裏，只有Javascript能跨平臺、跨瀏覽器驅動網頁，與用戶交互
- 隨着HTML5在PC和移動端愈來愈流行，JavaScript變得更加劇要了。而且，新興的Node.js把JavaScript引入到了服務器端，JavaScript已經變成了全能型選手。
Javascript還能夠作什麼呢？
- 它能夠在網頁上實現複雜的功能，網頁展現再也不是單純的簡單的靜態信息，而是實施的內容更新，交互式的地圖，2D/3D的動畫，滾動播放的音視頻等等。這都是Javascript能夠作的
- HTML是一種標記語言，用來結構化咱們的網頁內容並賦予內容含義，例如定義段落、標題和數據表，或在頁面中嵌入圖片和視頻。
- CSS是一種樣式規則語言，可將樣式應用於 HTML 內容，例如設置背景顏色和字體，在多個列中佈局內容。
- Javascript是一種腳本語言，能夠用來建立動態更新的內容，控制多媒體，製做圖像動畫，還有不少。（好吧，雖然它不是萬能的，但能夠經過簡短的代碼來實現神奇的功能。）

11.3.2 Javascript的插入

內部Javascript

新建一個index.html文件,而後寫入如下代碼
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    //編寫Javascript代碼
</script>
</body>
</html>
```
< script type="text/javascript" >是表示在< script >< /script >之間是文本類型(text),javascript是告訴瀏覽器裏面的語言是javascript語言.

外部Javascript

1.首先，在剛纔的html文件所在的目錄下建立一個名爲script.js的新文件。請確保文件擴展名爲.js,只有這樣才能被識別爲Javascript代碼。

2.將"script"元素替換爲

<script src="script.js" async></script>

3.在script.js文件中，咱們就能夠編寫Javascript代碼

11.3.3認識Javascript語句和註釋

JavaScript語句

請看代碼:

<script type="text/javascript">
   alert("張三");       //Javascript語句。
</script>

1.Javascript代碼最終是被瀏覽器解釋運行的
2.每一句Javascript代碼都以 ; 做爲結束當前語句,且;分號必須是英文狀態下的。
3.一樣，JS中的代碼和符號都要在英文狀態下輸入,雖然分號;也能夠不寫，但咱們要養成良好的編程習慣，記得在語句末尾寫上分號。

註釋

單行註釋
- 在JS中以//的字符被視爲單行註釋，註釋是給開發人員看的，Javascript引擎在執行JS代碼的時候回自動忽略。
多行註釋
- 使用/**/把多行字符包裹起來，把一大塊視爲一個註釋：

11.3.4變量的存儲

聲明變量

聲明變量使用關鍵字var,能夠一次聲明多個變量，變量之間用,逗號隔開。
語法
```
var 變量名;
var x,y;
```
變量名取名規則
- 能夠使用任意多個英文字母、數字、下劃線()或者美圓符($)組成。
- 變量必須使用字母、下劃線(_)或者美圓符($)開始。
- 不能使用Javascript關鍵字和Javascript保留字來進行命名
- 變量名嚴格區別大小寫，如A何a是兩個不一樣的變量

變量賦值

使用"="等號給變量存儲內容,注意：這裏的"="號的做用是給變量賦值，不是等於號。
```
var x = 5;//聲明變量x並將5賦值給x
```
也能夠這樣寫
```
var x; //聲明變量x
x = 5; //給變量x賦值
```

更新變量

var x = 5;
x = 10;

11.3.5變量類型

11.3.5.1基本變量類型

1整型(number)

Javascript不區分整數和浮點數，統一用Number表示。與其它編程語言（Javas）不一樣的是在JS中你不須要聲明一個變量的類型。好比這樣都是合法的：

var x = 123;
var y = 1.213;
var z = -99;

2字符串(string)

字符串是文本的一部分。當你給一個變量賦值給字符串時，你須要用單引號或雙引號把值包括起來,單引號和雙引號引用的字符串沒有任何區別

var name = '王聰聰';
var en = "abc";

3布爾(Boolean)

布爾值和布爾代數的表示徹底一致,最簡單的布爾代數只有兩個元素0和1，將它應用於邏輯中，解釋0爲假(false)，1爲真(true)。

4未定義的(undefined)

5null

11.3.5.2引用數據類型

1數組(Array)

數組是一個值的集合，每一個值都有一個索引號，從0開始，每一個索引都有一個相應的值，根據須要添加更多數值。

2對象(object)

3函數(Function)

11.3.6數字和運算符

11.3.6.1算術運算符

運算符	名稱	做用	示例
`+`	加法	兩個數相加。	`6 + 9`
`-`	減法	從左邊減去右邊的數。	`20 - 15`
`*`	乘法	兩個數相乘。	`3 * 7`
`/`	除法	用右邊的數除左邊的數	`10 / 5`
`%`	求餘(有時候也叫取模)	在你將左邊的數分紅同右邊數字相同的若干整數部分後，返回剩下的餘數	`8 % 3` (返回 2，將8分紅3份，餘下2 。)

Javascript中的運算符優先級與數學運算符優先級相同—乘法和除法老是先完成，而後再算加法和減法。

11.3.6.2遞增和遞減運算符

a++ 和 ++a 的區別

a++是表示先把值賦給其餘爲數字類型的變量，本身在+1。而++a 是本身先+1，再把值賦給數字類型的變量；其實原理仍是運算符的優先級不一樣
```
var a=1; 
var b=a++;    //此時輸出結果b爲1，a爲2 
```
```
var a=1; 
var b=++a;    //此時輸出結果b爲2，a爲2
```

11.2.6.3賦值運算符

var x = 3;    //將3賦值給變量x
var y = 4;    //將4賦值給變量y
x = y;        //將變量y的值賦值以定義的變量x,那麼變量x從新賦值。x和y有相同的值，4

var x = 3;
x = x + 4;
//能夠簡寫成
var x = 3;
x += 4;     //等價於 x = x + 4;

運算符	名稱	做用	示例	等價於
`+=`	遞增賦值	右邊的數值加上左邊的變量，而後再返回新的變量。	`x = 3;x += 4;`	`x = 3;x = x + 4;`
`-=`	遞減賦值	左邊的變量減去右邊的數值，而後再返回新的變量。	`x = 6;x -= 3;`	`x = 6;x = x - 3;`
`*=`	乘法賦值	左邊的變量乘以右邊的數值，而後再返回新的變量。	`x = 2;x *= 3;`	`x = 2;x = x * 3;`
`/=`	除法賦值	左邊的變量除以右邊的數值，而後再返回新的變量。	`x = 10;x /= 5;`	`x = 10;x = x / 5;`

11.3.7條件判斷

11.3.7.1. if..else語句

if(能夠的話){
    //我要談女友
}else{
    //不能夠談女友
}

1.關鍵字if ,後面跟隨括號
2.要測試的條件，放到括號裏這個條件會利用比較運算符進行比較，而且返回true或者false。
3.一組花括號，在裏面咱們有一些代碼——能夠是任何代碼，而且只會在條件語句返回true的時候運行。
4.關鍵字else。
5.另外一組花括號，會在條件語句返回true的時候運行。

注意：你不必定須要else和第二個花括號下面的代碼也是符合語法規則的

if(能夠的話){
    //我要談女友
}   //不能夠談女友

最後，有時候你可能會看到 if…else 語句沒有寫花括號(這是徹底有效的代碼，但不建議這樣使用)

if (能夠的話) 
    能夠談女盆友;
else 
    不能夠談女友;

11.3.7.2.else if

var weather = 'sunny';
if(weather == 'sunny'){
    //天氣很是棒，能夠出去玩耍了
}else if(weather == 'rainy'){
    //天氣下雨了，只能在家裏呆着
}else if(weather == 'snowing'){
    //天氣下雪了，能夠出去滑雪了
}

11.3.7.3.比較運算符

符號	含義
`===` 和 `!==`	判斷一個值是否嚴格等於，或不等於另外一個。
`==`和 !=	判斷一個值是否等於，或不等於另外一個
`<` 和 `>`	判斷一個值是否小於，或大於另外一個。
`<=` 和 `>=	判斷一個值是否小於或等於，或者大於或等於另外一個。

var a = 5;
var b = '5';
var isEqual = a == b; //true 由於在比較的時候，瀏覽器會把數值5轉換成字符串5去比較
var isEqual2 = a === b; //false 由於a和b比較的不只僅是值的相等，還比較它們的數據類型

11.3.7.4.嵌套if … else

將另外一個if … else 語句放在另外一箇中 - 嵌套它是徹底可行的,即便代碼所有一塊兒工做，每一個if … else語句徹底獨立於另外一個。

var weather = 'sunny';
if(weather == 'sunny'){
    if(temperature > 30){
        //仍是在家裏吹空調吧
    }else if(temperature<=30){
        //天氣很是棒，能夠出去玩耍了
    }
}

11.3.5.5.邏輯運算符

符號	含義
&&	邏輯與; 使得並列兩個或者更多的表達式成爲可能，只有當這些表達式每個都返回`true`時，整個表達式纔會返回`true.`
\|\|	邏輯或; 當兩個或者更多表達式當中的任何一個返回 `true` 則整個表達式將會返回 `true`.
!	邏輯非; 對一個布爾值取反, 非true返回false,非false返回true.

11.3.8switch語句

if...else 語句可以很好地實現條件代碼，可是它們仍是有缺點的。它們主要適用於您只有幾個選擇的狀況，每一個都須要至關數量的代碼來運行，和/或的條件很複雜的狀況（例如多個邏輯運算符）。對於只想將變量設置一系列爲特定值的選項或根據條件打印特定語句的狀況，語法可能會很麻煩，特別是若是您有大量選擇。
switch語句——他們以單個表達式/值做爲輸入，而後查看多個選項，直到找到與該值相匹配的選項，執行相應的代碼。
```
switch (expression) {
  case choice1:
    run this code
    break;
  case choice2:
    run this code instead
    break;
  default:   //默認
    actually, just run this code
}
```
- 1.關鍵字 switch, 後跟一組括號,括號內爲表達式或值
- 2.關鍵字 case, 後跟一個選項的表達式/值，後面跟一個冒號,若是選擇與表達式匹配，則運行一些代碼
- 3.一個 break 語句, 分號結尾. 若是先前的選擇與表達式/值匹配，則瀏覽器在此中止執行代碼塊，並執行switch語句以後的代碼.
- 4.能夠添加任意的 case 選項
- 5.關鍵字 default, 後面跟隨和 case 徹底相同的代碼模式 (選項 2–3), except that default以後不須要再有選項, 而且您不須要 break 語句, 由於以後沒有任何運行代碼. 若是以前沒有選項匹配，則運行default選項.
```
var weather = 'sunny';
switch(weather){
    case 'sunny':
        //天氣很是棒，能夠出去玩耍了
        break;
    case 'rainy':
       //天氣下雨了，只能在家裏呆着
        break;
    case 'snowing':
        //天氣下雪了，能夠出去滑雪了
        break;
    default:
        //哪裏也不出去
}
```

11.3.9三元運算符

語法

(codition) ? run this code : run this code instead;

實例:

var isResult  =  1 > 2 '真的' : '假的' ;

11.3.10循環

11.3.10.1 for循環基本用法

for(初始化條件;結束條件;遞增條件){
    //run this code
}

var total = 0;
var i;
for(i = 1;i <= 10000; i++){
    total = total+ i;
}
console.log(total);//50005000

11.3.10.2 for用於遍歷數組

var shopping = ['香蕉','蘋果','牛奶','紅牛'];
var x;
for(var i = 0; i < shopping.length; i ++){
    x = shopping[i];
    console.log(x);
}

11.3.103.使用break退出循環

for循環的3個條件都是能夠省略的，若是沒有退出循環的判斷條件，就必須使用break語句退出循環，不然就是死循環：

var x = 0;
for (;;) { // 將無限循環下去
    if (x > 100) {
        break; // 經過if判斷來退出循環
    }
    x ++;
}

11.3.10.4.continue語句

var x;
for(var i = 0; i <= 10; i++){
    if(i == 3) continue;
     x = x + "這個數字是" + i 
}

break和continue的區別
- break,選中以後,就終止循環
- continue,選中以後,繼續循環的進行。

11.3.10.5.while循環

好比咱們要計算100之內全部奇數之和，能夠用while循環實現。

var x = 0;
var n = 99;
while (n > 0) {
    x = x + n;
    n = n - 2;
}
x; // 2500

11.3.10.6.do...while循環

do { ... } while()循環，它和while`循環的惟一區別在於，不是在每次循環開始的時候判斷條件，而是在每次循環完成的時候判斷條件：
```
var n = 0;
do {
    n = n + 1;
} while (n < 100);
n; // 100
```
用do { ... } while()循環要當心，循環體會至少執行1次，而for和while循環則可能一次都不執行。

11.3.11對象(object)

object也是ECMAScript中使用最多的一個類型。而且每一個對象都有屬性和方法。對象是由一些彼此相關的屬性和方法集合在一塊兒而構成的一個數據實體。

11.3.11.1.對象的屬性

它是屬於這個對象的某個變量。好比字符串的長度、數組的長度和索引、圖像的寬高等

11.3.11.2.對象的方法

只有某個特定屬性才能調用的函數。表單的提交、時間的獲取等。

11.3.11.3.對象的建立方式

方法一:使用new操做符後跟Object構造函數

//建立對象
var person = new Object();        //var person = {};//與new Object()相同
//給對象添加name和age屬性
person.name = 'jack';
person.age = 28;
//給對象添加fav的方法
person.fav = function(){
    console.log('泡妹子');
}

方法二:使用對象字面量表示法

var person = {
    name : 'jack';
    age : 28,
    fav : function(){
        console.log('泡妹子');
    }
}

11.3.11.4.語法

點語法(推薦)

用於訪問person對象中的age屬性和fav方法
```
person.name; //jack
person.fav();//泡妹子
```

括號表示法

person['name'];

11.3.12內置對象

11.3.12.1,數組(array)

1.數組建立方式

方法一:Array構造函數方式建立
```
var colors = new Array();
```
方法二:使用字面量方式建立數組
```
var colors = [];
```

2.檢測數組

肯定某個值究竟是否是數組

var colors = ['red','green','blue'];
if(Array.isArray(colors)){
    //對數組執行某些操做
}

3.轉換方法

toString()

返回由數組中每一個值的字符串形式拼接而成的一個以逗號分隔的字符串。
```
var colors = ['red','green','blue'];
alert(colors.toString());   //red,green,blue
```
toLocalString()

4.分割字符串

join()

只接收一個參數。

var colors = ['red','blue','green'];
colors.join('||'); //red||blue||green

5.棧

棧是一種LIFO(Last-In-First-Out,後進先出)的數據結構

push()方法

能夠接收任意數量的參數，把它們逐個添加到數組末尾，並返回修改後數組的長度。

var colors = [];
var count = colors.push('red','blue','green');
alert(count);          //3
console.log(colors)   //['red','blue','green']

pop()方法

從數組末尾移除最後一項，減小數組的 length 值，而後返回移除的項

var colors = [];
var count = colors.push('red','blue','green');
var item = colors.pop();   //取最後一項
alert(item);              //green
alert(colors.length);    //2

6.隊列

隊列是一種FIFO(First-In-First-Out，先進先出)的數據結構

shift()方法

可以移除數組中的第一個項並返回該項，同時將數組長度減 1。

var colors = ['red','blue','green'];
var item = colors.shift();//取得第一項
alert(item); //"red"
alert(colors.length); //2

unshift()方法

它能在數組前端添加任意個項並返回新數組的長度。

var colors = [];
var count  = colors.unshift('red','green'); //推入兩項
alert(count); //2
console.log(colors); // ["red", "green"]

7.重排序方法

reverse()方法

翻轉數組項的順序

var values = [1,2,3,4,5];
values.reverse();
alert(values); // 5,4,3,2,1

sort()方法

默認狀況下，sort()方法按升序排列爲了實現排序，sort()方法會調用每一個數組項的toString()轉型方法，而後比較獲得的字符串，以肯定如何排序。即便數組中的每一項都是數值，sort()方法比較的也是字符串。
```
var values = [0,1,5,10,15];
varlus.sort();
alert(values); //0,1,10,15,5   //我的認爲是從前到後每一個數字比較
```
由於數值 5 雖然小於 10，但在進行字符串比較時，」10」則位於」5」的前面，因而數組的順序就被修改了。不用說，這種排序方式在不少狀況下都不是最佳方案。

比較函數接收兩個參數，若是第一個參數位於第二個參數以前則返回一個負數，若是兩個參數相等則返回0，若是第一個參數位於第二個參數以後則返回正數。
```
function compare(v1,v2){
    if(v1 < v2){
        return -1;
    }else if (v1 > v2){
        return 1;
    }else{
        return 0;
    }
}
```

8.操做方法

concat()方法

數組合並方法，一個數組調用concat()方法去合併另外一個數組，返回一個新的數組。concat()接收的參數是能夠是任意的。

參數爲一個或多個數組，則該方法會將這些數組中每一項都添加到結果數組中。

參數不是數組，這些值就會被簡單地添加到結果數組的末尾

var colors = ['red','blue','green'];
colors.concat('yello');              //["red", "blue", "green", "yello"]
colors.concat({'name':'張三'});     //["red", "blue", "green", {…}]
colors.concat({'name':'李四'},['black','brown']);                                                                             // ["red", "blue", "green", {…}, "black", "brown"]

slice()方法
- 一個參數的狀況下，slice()方法會返回從該參數指定位置開始到當前數組默認的全部項
- 兩個參數的狀況下，該方法返回起始和結束位置之間的項——但不包括結束位置的項。(前取後不取)
- 注意： slice()方法不會影響原始數組
```
var colors = ['red','blue','green','yellow','purple'];
colors.slice(1);      //["blue", "green", "yellow", "purple"]
colors.slice(1,4);   // ["blue", "green", "yellow"]
```
- 若是slice()方法的參數中有一個負數，則用數組長度加上該數來肯定響應的位置。例如，在一個包含5項的數組上調用slice(-2,-1)與調用slice(3,4)獲得的結果相同。若是結束位置小於起始位置，則返回空數組
```
var colors = ['red','blue','green','yellow','purple'];
colors.slice(-2,-1);//["yellow"] 
colors.slice(-1,-2);//[]
```
splice()方法
- 1.刪除：能夠刪除任意數量的項，只需指定2個參數：要刪除的第一項的位置和要刪除的個數。例如splice(0,2)會刪除數組中的前兩項
- 2.插入：能夠向指定位置插入任意數量的項，只需提供3個參數：起始位置、0（要刪除的個數）和要插入的項。若是要插入多個項，能夠再傳入第4、第5、以致任意多個項。例如，splice(2,0,'red','green')會從當前數組的位置2開始插入字符串'red'和'green'
- 3.替換：能夠向指定位置插入任意數量的項，且同時刪除任意數量的項，只需指定 3 個參數:起始位置、要刪除的項數和要插入的任意數量的項。插入的項數沒必要與刪除的項數相等。例如，splice (2,1,"red","green")會刪除當前數組位置 2 的項，而後再從位置 2 開始插入字符串"red"和"green"。
```
var colors = ['red','blue','green']
var a = colors.splice(0,1)
alert(a)        //red
alert(colors)   //blue,green
var b = colors.splice(1,0,'yellow','orange') 
alert(b)        //空數組
alert(colors)   //blue,yellow,orange,green
var c = colors.splice(1,1,'ye','or')
alert(c)       //空數組
alert(colors)  //blue,ye,or,orange,green
```

9.位置方法

indexOf()

接收兩個參數:要查找的項和(可選的)表示查找起點位置的索引,從數組的開頭(位置 0)開始向後查找

lastIndexOf()

接收兩個參數:要查找的項和(可選的)表示查找起點位置的索引,從數組的末尾開始向前查找。

var numbers = [1,2,3,4,5,4,3,2,1];
alert(numbers.indexOf(4)); //3
alert(numbers.lastIndexOf(4));// 5
alert(numbers.indexOf(4,4));// 5
alert(numbers.lastIndexOf(4,4));//3
var person = {name:"mjj"};
var people = [{name:'mjj'}];
var morePeople = [person];
alert(people.indexOf(person)); //-1
alert(morePeople.indexOf(person));// 0

10.迭代方法

filter()方法

filter()函數，它利用指定的函數肯定是否在返回的數組中包含某一項

var numbers = [1,2,3,4,5,4,3,2,1];
var filterResult = numbers.filter(function(item,index,array){
	(item>2);
});
alert(filterResult);    //[3,4,5,4,3]

map()

map()`方法也返回一個數組，而這個數組的每一項都是在原始數組中的對應項上運行輸入函數的結果

var numbers = [1,2,3,4,5,4,3,2,1];
var filterResult = numbers.map(function(item, index, array){
    return item * 2;
});
alert(filterResult); //[2,4,6,8,10,8,6,4,2]

forEach()

它只是對數組中的每一項運行傳入的函數。這個方法沒有返回值，本質上與使用 for 循環迭代數組同樣。
```
//執行某些操做 10
var numbers = [1,2,3,4,5,4,3,2,1];
numbers.forEach(function(item, index, array){
});
```
every()
some()

11.3.12.2.字符串(string)

1.單引號和雙引號

在js中能夠使用單引號和雙引號來表示字符串。但在同一個字符串中不要混合使用

var name = 'why a apple?";   
//返回一個錯誤,緣由:瀏覽器會認爲字符串沒有被關閉。

var shj = 'Would you eat a "apple"?';
var desc = "I'm MJJ";    
//能夠使用

2.轉義字符串中的字符

若是'自己也是一個字符，那就能夠用""括起來，好比"I'm MJJ"包含的字符是I，'，m，空格，M，J,J這6個字符。
若是字符串內部既包含'又包含""怎麼辦？能夠用轉義字符\來標識
```
'I\'m \"MJJ\"';
```

3.字符串的拼接

var a = 'hello ';
var b = 'world';
var joined = a + b;
joined;     //變量joined的值爲"hello world"

4.數字和字符串

1.字符串 + 數字
```
"hello" + 234;    //結果爲 "hello234"
```
它居然沒有報錯，運行的很好,這是由於瀏覽器很聰明的將數字轉換成字符串，並將這兩個字符串拼接在一塊兒。
2.用引號來包括兩個數字，進行+運算。
```
var myNum = '18' + '30';       //"1830"
typeof myNum;                 //String
```
咱們能夠用typeof操做符來檢查變量是一個數字仍是一個字符串

3.空字符串 + 數字

var myNum = "" + 234;          //"234"
typeof myNum;                //String

4.經過Javascript提供的Number()把任何的內容轉換成數字。

var myStr = '123';
var myNum = Number(myStr);
typeof myNum;                 // 123    Number

5.每個數字都有一個名爲toString()的方法，它能夠將數值轉換成字符串。
```
var myNum = 123;
var myStr = myNum.toString();     //"123"
```

5.字符方法

這兩個方法都接收一個參數，即基於 0 的字符位置。

charAt()

charAt()方法以單字符字符串的形式返回給定位置的那個字符 (ECMAScript 中沒有字符類型)。
```
var stringValue = "hello world"; 
alert(stringValue.charAt(1));   //"e"
```

charCodeAt()

獲得的不是字符而是字符編碼

var stringValue = "hello world";
alert(stringValue.charCodeAt(1)); //輸出"101"

6.字符操做方法

concat()

將一或多個字符串拼接起來,返回拼接獲得的新字符串

var stringValue = "hello ";
var result = stringValue.concat("world"); alert(result); //"hello world" alert(stringValue); //"hello"

slice() 和 substring()

返回被操做字符串的一個子字符串，並且也都接受一或兩個參數。第一個參數指定字符串的開始位置，第二個參數指定的是字符串最後一個字符後面的位置。
substr()

返回被操做字符串的一個子字符串，並且也都接受一或兩個參數。第一個參數指定字符串的開始位置，第二個參數指定的則是返回的字符個數。若是沒有給這些方法傳遞第二個參數，則將字符串的長度做爲結束位置。

slice()、substr()和 substring()也不會修改字符串自己的值——它們只是返回一個基本類型的字符串值，對原始字符串沒有任何影響
```
var stringValue = "hello world";
alert(stringValue.slice(3));//"lo world"
alert(stringValue.substring(3));//"lo world"
alert(stringValue.substr(3));//"lo world"
alert(stringValue.slice(3, 7));//"lo w"
alert(stringValue.substring(3,7));//"lo w"
alert(stringValue.substr(3, 7));//"lo worl"
```
在傳遞給這些方法的參數是負值的狀況下，它們的行爲就不盡相同了。其中，slice()方法會將傳入的負值與字符串的長度相加，substr()方法將負的第一個參數加上字符串的長度，而將負的第二個參數轉換爲 0。最後，substring()方法會把全部負值參數都轉換爲 0。
```
var stringValue = "hello world";
alert(stringValue.slice(-3));//"rld" 
alert(stringValue.substring(-3));//"hello world"
alert(stringValue.substr(-3)); //"rld"
alert(stringValue.slice(3, -4));//"lo w" 
alert(stringValue.substring(3, -4));//"hel"
alert(stringValue.substr(3, -4)); //""(空字符串)
```
由於-3 會被轉換爲 8(字符串長度加參數 11+(-3)=8)，實際上至關於調用了 slice(8)和 substr(8)。但 substring()方法則返回了所有字符串，由於它將-3 轉換成了 0。

當第二個參數是負值時
- slice()方法會把第二個參數轉換爲 7這就至關於調用了 slice(3,7)，所以返回」lo w」。
- substring()方法會把第二個參數轉換爲 0，使調用變成了 substring(3,0)，而因爲這個方法會將較小的數做爲開始位置，將較大的數做爲結束位置，所以最終至關於調用了 substring(0,3)
- substr()也會將第二個參數轉換爲 0，這也就意味着返回包含零個字符的字符串，也就是一個空字符串。

7.字符串位置方法

indexOf() 和 lastIndexOf()
- 從一個字符串中搜索給定的子字符串，而後返回子字符串的位置(若是沒有找到該子字符串，則返回-1)
- indexOf()方法從字符串的開頭向後搜索子字符串
- lastIndexOf()方法是從字符串的末尾向前搜索子字符串
```
var stringValue = "hello world";
alert(stringValue.indexOf("o"));             //4
alert(stringValue.lastIndexOf("o"));         //7
alert(stringValue.indexOf("o", 6));         //7
alert(stringValue.lastIndexOf("o", 6));     //4
```

8.trim()方法

刪除字符串的先後空格.

var stringValue = "   hello world   ";
var trimmedStringValue = stringValue.trim();
alert(stringValue);            //"   hello world   "
alert(trimmedStringValue);     //"hello world"

9.字符串大小寫轉換方法

toLowerCase()
toUpperCase()
toLocaleLowerCase()

toLocaleUpperCase()

後兩種針對特定時區

var stringValue = "hello world";
alert(stringValue.toLocaleUpperCase());  //"HELLO WORLD"
alert(stringValue.toUpperCase());        //"HELLO WORLD"
alert(stringValue.toLocaleLowerCase());  //"hello world"
alert(stringValue.toLowerCase());        //"hello world"

10.Date日期

Date 類型使用自 UTC(Coordinated Universal Time，國際協調時間)1970 年 1 月 1 日午夜(零時)開始通過的毫秒數來保存日期。在使用這種數據存儲格式的條件下，Date 類型保存的日期可以精確到 1970 年 1 月 1 日以前或以後的 285 616 年。

要建立一個日期對象，使用 new 操做符和 Date 構造函數便可
```
var now = new Date([parameters]);
```
- 無參數 : 建立今天的日期和時間，例如： var today = new Date();
- 一個符合如下格式的表示日期的字符串: 「月日, 年時:分:秒.」例如： var Xmas95 = new Date("December 25, 1995 13:30:00")。若是你省略時、分、秒，那麼他們的值將被設置爲0。
- 一個年，月，日的整型值的集合，例如： var Xmas95 = new Date(1995, 11, 25)。
- 一個年，月，日，時，分，秒的集合，例如： var Xmas95 = new Date(1995, 11, 25, 9, 30, 0);
Date對象的方法

日期格式化方法

toDateString()——以特定於實現的格式顯示星期幾、月、日和年;
toTimeString()——以特定於實現的格式顯示時、分、秒和時區;
toLocaleDateString()——以特定於地區的格式顯示星期幾、月、日和年;
toLocaleTimeString()——以特定於實現的格式顯示時、分、秒;
toUTCString()——以特定於實現的格式完整的 UTC 日期。

myDate.toDateString();//"Mon Apr 15 2019"
myDate.toTimeString();//"10:11:53 GMT+0800 (中國標準時間)"
myDate.toLocaleDateString();//"2019/4/15"
myDate.toLocaleDateString();//"2019/4/15"
myDate.toLocaleTimeString();//"上午10:11:53"
myDate.toUTCString();//"Mon, 15 Apr 2019 02:11:53 GMT"

11.字符串和數值之間的轉換

字符串轉數值

var str = '123.0000111';
console.log(parseInt(str));
console.log(typeof parseInt(str));
console.log(parseFloat(str));
console.log(typeof parseFloat(str));
console.log(Number(str));

數值轉字符串

var num  = 1233.006;
// 強制類型轉換
console.log(String(num));
console.log(num.toString());
// 隱式轉換
console.log(''.concat(num));
// toFixed()方法會按照指定的小數位返回數值的字符串 四捨五入
console.log(num.toFixed(2));

12.Globle對象

無論你從什麼角度上看，這個對象都是不存在的。不屬於任何其餘對象的屬性和方法，最終都是它的屬性和方法。事實上，沒有全局變量或全局函數; 全部在全局做用域中定義的屬性和函數，都是 Global 對象的屬性。

13.window對象

在全局做用域中聲明的全部變量和函數，就是window 對象的屬性

var color = "red";
function sayColor(){
    alert(window.color);
}
window.sayColor();  //"red"

14.Math對象

1.Math 對象的屬性

屬性	說明
Math.E	天然對數的底數，即常量e的值
Math.LN10	10的天然對數 ln(10)
Math.LN2	2的天然對數
Math.LOG2E	以2爲底e的對數
Math.LOG10E	以10爲底e的對數
Math.PI	π的值
Math.SQRT1_2	1/2的平方根(即2的平方根的倒數)
Math.SQRT2	2的平方根

2.min()和 max()方法

min()和 max()方法用於肯定一組數值中的最小值和最大值。這兩個方法均可以接收任意多個數值參數(經常使用於避免多餘的循環和在 if 語句中肯定一組數的最大值)
```
var max = Math.max(3, 54, 32, 16);
alert(max);    //54
var min = Math.min(3, 54, 32, 16);
alert(min);    //3
```
例:要找到數組中最大或最小值,能夠像下面這樣用apply()方法
```
var values = [1,2,36,23,43,3,41];
var max = Math.max.apply(null, values);
```
3.舍入方法
- Math.floor() :執行向下舍入，即它老是將數值向下舍入爲最接近的整數;
- Math.ceil()`執行向上舍入，即它老是將數值向上舍入爲最接近的整數;
- Math.round()`執行標準舍入，即它老是將數值四捨五入爲最接近的整數(這也是咱們在數學課上學到的舍入規則)。
```
var num = 25.7;
var num2 = 25.2;
alert(Math.ceil(num));//26
alert(Math.floor(num));//25
alert(Math.round(num));//26
alert(Math.round(num2));//25
```

4.random()方法

Math.random()方法返回大於等於 0 小於 1 的一個隨機數

例一::獲取min到max的範圍的整數

function random(lower, upper) {
    return Math.floor(Math.random() * (upper - lower)) + lower;
}

例子2: 獲取隨機顏色

/**
 * 產生一個隨機的rgb顏色
 * @return {String}  返回顏色rgb值字符串內容，如：rgb(201, 57, 96)
 */
function randomColor() {
    // 隨機生成 rgb 值，每一個顏色值在 0 - 255 之間
    var r = random(0, 256),
        g = random(0, 256),
        b = random(0, 256);
    // 鏈接字符串的結果
    var result = "rgb("+ r +","+ g +","+ b +")";
    // 返回結果
    return result;
}

例子3: 獲取隨機驗證碼

function createCode(){
    //首先默認code爲空字符串
    var code = '';
    //設置長度，這裏看需求，我這裏設置了4
    var codeLength = 4;
    //設置隨機字符
    var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R', 'S','T','U','V','W','X','Y','Z');
    //循環codeLength 我設置的4就是循環4次
    for(var i = 0; i < codeLength; i++){
        //設置隨機數範圍,這設置爲0 ~ 36
        var index = Math.floor(Math.random()*36);
        //字符串拼接 將每次隨機的字符 進行拼接
        code += random[index]; 
    }
    //將拼接好的字符串賦值給展現的Value
    return code
}

11.3.12.3.Bom

ECMAScript 是 JavaScript 的核心，但若是要在 Web 中使用 JavaScript，那麼 BOM(瀏覽器對象模型)則無疑纔是真正的核心。

1.widow對象

BOM 的核心對象是 window，它表示瀏覽器的一個實例。在瀏覽器中，window 對象有雙重角色，它既是經過 JavaScript 訪問瀏覽器窗口的一個接口，又是 ECMAScript 規定的 Global 對象。這意味着在網頁中定義的任何一個對象、變量和函數，都以 window 做爲其 Global 對象，

2.系統對話框方法

警告框alert()
```
window.alert('mjj');
```
確認框confirm()
```
var a = window.confirm('你肯定要離開網站?');
console.log(a);
```
若是點擊肯定,a的值返回true,點擊取消,a的值返回`false`
彈出框prompt()
```
var name = window.prompt('請輸入你早晨吃了什麼?','mjj');
console.log(name);
```
prompt()方法接收兩個參數,第一個參數是顯示的文本,第二個參數是默認的文本,若是點擊了肯定,則name的結果爲mjj`

3.定時任務方法

setTimeout()

setTimeout()方法表示一次性定時任務作某件事情,它接收兩個參數,第一個參數爲執行的函數,第二個參數爲時間(毫秒計時:1000毫秒==1秒)
```
window.setTimeout(function(){
    console.log('chang');
},0)
console.log('xiongdada');    
//xiongdada
//chang
```
JavaScript 是一個單線程序的解釋器，所以必定時間內只能執行一段代碼。爲了控制要執行的代碼，就有一個 JavaScript 任務隊列。這些任務會按照將它們添加到隊列的順序執行。setTimeout()的第二個參數告訴 JavaScript 再過多長時間把當前任務添加到隊列中。若是隊列是空的，那麼添加的代碼會當即執行;若是隊列不是空的，那麼它就要等前面的代碼執行完了之後再執行。

setInterval()

週期性循環的定時任務.它接收的參數跟setTimeout()方法同樣.

例子: 每隔1秒讓num數值+1,當num數值大於5時,中止更新

var num = 0;
var timer = null;
timer = setInterval(function(){
    num++;
    if (num > 5) {
        clearInterval(timer);   //clearInterval()清除當前的定時任務
        return;
    }
    console.log('num:'+ num);
},1000);

4.location對象

location是最有用的BOM對象之一,它提供了與當前窗口中加載的文檔有關的信息，還提供了一些導航功能，它既是 window 對象的屬性，也是document 對象的屬性;

11.3.12.4.Dom

1.Dom介紹

①文檔：DOM中的」D」

DOM是」Document Object Model「(文檔對象模型)的首字母縮寫。當建立一個網頁並把它加載到web瀏覽器中時，DOM就在幕後悄然而生。它將根據你編寫的網頁文檔建立一個文檔對象。

②對象：DOM中的」O「

對象是一種獨立的數據集合。與某個特定對象相關聯的變量被稱爲這個對象的屬性；能夠經過某個特定對象去調用的函數被稱爲這個對象的方法。

1.用戶定義對象（user-defined object）：由程序員自行建立的對象。
2.內建對象（native object）:內建的Javascript語言中的對象，如Array、Math和Date等。
3.宿主對象（host object）:由瀏覽器提供的對象，好比window對象

③模型：DOM中的「M」

DOM中的「M」表明着「Model」(模型),DOM表明着被加載到瀏覽器窗口裏的當前網頁

2.節點node

表明着網絡中的一個鏈接點。網絡是有節點構成的集合。屬性老是被放在起始標籤裏，因此屬性節點老是被包含在元素節點當中。並不是所屬地額元素都包含着屬性，但全部的屬性都會被包含在元素裏。

元素節點element node

像<body>、<p>、<ul>之類的元素這些咱們都稱爲叫元素節點（element node）
文本節點text node
屬性節點

元素都或多或少的有一些屬性，屬性的做用是對元素作出更具體的描述
註釋節點

3.獲取元素節點的方式

①getElementById()

特色
- 這個方法將返回一個與那個給定id屬性值的元素節點相對應的對象。這個方法是與document對象相關聯的函數
- 只有一個參數：你想得到的那個元素的id屬性值，這個id值必須是字符串類型。通常只用在頂級層存在不能太過依賴id
```
<div id='box'>張三</div>
<script type="text/javascript">
//經過id獲取單個節點對象
	var box1 = document.getElementById('box')
	console.log(box1);
	console.dir(box1);
</script>
```

②getElementsByTagName()

這個方法將返回一個元素對象集合。標籤名

<body>
	<div id='box'>張三</div>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>
<script type="text/javascript">
	var box2 = document.getElementsByTagName('div');
	console.log(box2);
	var lis = document.getElementsByTagName("li");
	console.log(lis)
</script>

③getElementsByClassName()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type='text/css'>
			ul li{
				color: black;
			}
			ul li.active{
				color: red;
			}
		</style>
	</head>
	<body>
		<div id='box'>張三</div>
		<ul class='box3'>
			<li class="active">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
		<script type="text/javascript">
			//1.經過id獲取單個節點對象
			var box1 = document.getElementById('box')
			console.log(box1);
			console.dir(box1);
			//2.經過標籤名獲取對象
			var box2 = document.getElementsByTagName('div');
			console.log(box2);
			var lis = document.getElementsByTagName("li");
			console.log(lis)
			for (var i = 0;i < lis.length;i++){
				/* lis[i].className = 'active'; */	
				lis[i].onclick = function(){
					//this指定了綁定onclick的那個對象
					
					//排他思想
					for(var j = 0;j < lis.length;j++){
						lis[j].className = '';
					//將全部顏色清空
					}
					this.className = 'active'
				}
			}
			//3.經過類名獲取 */
			var lis2 = document.getElementsByClassName("active");
			console.log(lis2) */
			var a = document.getElementById("box3")
			console.log(box.children);
		</script>
	</body>
</html>

4.事件

①單擊事件onclick()

②鼠標懸浮事件onmouseover()

③鼠標離開事件onmouseout()

5.對樣式操做

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box{
				width: 200px;
				height: 200px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="box">張三</div>
		<script type="text/javascript">
			//1.獲取事件源對象
			var box = document.getElementById('box');
			//2.綁定事件
			box.onmouseover = function(){
				//3.讓標籤背景色變綠
				box.style.backgroundColor = 'green';
				box.style.fontSize = '30px';
			}
			box.onmouseout = function(){
				//3.讓標籤背景色變綠
				box.style.backgroundColor = 'red';
				box.style.fontSize = '15px';
			}
			
		</script>
	</body>
</html>

//效果:鼠標懸浮在盒子上時會變綠,鼠標離開後會變紅

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box{
				width: 200px;
				height: 200px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="box">張三</div>
		<script type="text/javascript">
			var isRed = true;
			box.onclick = function(){
				if(isRed){
					this.style.backgroundColor = 'green';
					isRed = false;
				}else{
					this.style.backgroundColor = 'red';
					isRed = true;
				}	
			}
		</script>
	</body>
</html>

//鼠標在盒子上時點擊會在紅藍兩色中互相切換

6.對屬性設置

//setAttribute

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p title='個人班級' id="p1" class='active'>21</p>
		<script type='text/javascript'>
			var p1 = document.getElementById("p1");
			console.log(p1.getAttribute("title"));
			console.log(p1.getAttribute("class"));
			p1.setAttribute('class',"abc");
			//若是是自定義屬性,要在文檔上可見,經過setAttribute來設置屬性
			p1.setAttribute('abc',"123");
			
			console.log(p1.className);
			console.log(p1.title);
			//不可見,可經過console.dir()找到
			p1.abc = 123;
			
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.a{
				color: red;
				font-size: 20px;
			}
			p.active{
				color: aqua;
			}
		</style>
	</head>
	<body>
		<p title='個人班級' id="p1" class='a'>21</p>
		<script type='text/javascript'>
			var p1 = document.getElementById("p1");
			console.log(p1.className);
			console.log(p1.title);
			//不可見,可經過console.dir(p1)找到
			p1.abc = 123;
			console.dir(p1);
			p1.onclick = function(){
				this.className += "active"
			}
		</script>
	</body>
</html>

7.節點的建立

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul id="box">
			
		</ul>
		<script type="text/javascript">
			var ul = document.getElementById("box");
			//建立節點
			var li1 = document.createElement("li");
			var li2 = document.createElement("li");
			//innerText只設置文本
			/* li1.innerText = '<a href="#">123</a>'; */
			//
			li1.innerHTML = '<a href="#">123</a>';
			//添加類名
			li1.setAttribute('class','active');
			//獲取a,結果會是一個列表
			console.log(li1.children);
			li1.children[0].style.color = 'blue';
			//追加
			ul.appendChild(li1);
			//ul.insertBeofore('新節點','舊節點')
			li2.innerHTML = '第一個';
			ul.insertBefore(li2,li1);
			//刪除
			ul.removeChild(li1);
		</script>
	</body>
</html>

遍歷數據操做界面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			ul li{
				
			}
		</style>
	</head>
	<body>
		<ul id='box'>
			
		</ul>
		<script type='text/javascript'>
			var box = document.getElementById('box');
			//假設從後端獲取了數據
			var data = [
				{id:1,name:'小米5',subName:'5週年',price:198},
				{id:2,name:'小米6',subName:'6週年',price:298},
				{id:3,name:'小米7',subName:'7週年',price:398},
				{id:4,name:'小米8',subName:'8週年',price:498},
				{id:5,name:'小米9',subName:'9週年',price:598}
				];
			for(var i=0;i<data.length;i++){
				var li = document.createElement('li');
				//li.innerText = data[i].name;
				li.innerHTML = `<p>${data[i].name}</P>
				<p class='subName'>${data[i].subName}</p>
				<span class='price'>${data[i].price}</span>`;
				box.appendChild(li);
			}	
		</script>
	</body>
</html>

圖片切換

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="box">
			<img src="圖片組成的文件夾地址" alt="" id='imgbox'>
		</div>
		<botton id='prev'>上一張</botton>
		<botton id='next'>下一張</botton>
		
		<script type='text/javascript'>
			var imgbox = document.getElementById("imgbox");
			var next = document.getElementById("next");
			var prev = document.getElementById("prev");
			var num=1;
	/* 		next.onclick = function(){
				num++;
				if(num==5){
					num=1;
				}
				imgbox.src = `imges/${num}.jpg`;
			}
			 */
			next.onclick = function(){
				nextImg();
			}
			function nextImg(){
				num++;
				if(num==5){
					num=1;
			}
				imgbox.src = `imges/${num}.jpg`;
			}
			setInterval(nextImg,0);
		</script>
		
	</body>
</html>

11.3.13 jquery

11.3.13.1jquery簡介

jquery是一個快速,小巧的,功能豐富的js庫,他經過易於使用的API在瀏覽器中運行,使得html文檔遍歷,操做,事件處理,動畫和Ajax變得更加簡單.經過多功能性和可擴展性的結合,使得實現功能更加簡單,方法居多

操做:獲取節點元素對象,屬性操做,樣式操做,類名,節點的建立,刪除,添加,建立

11.3.13.2jquery的核心

write less,do more

11.3.13.3 js節點對象和jQuery對象的區別

區別：
- 經過 jQuery 獲取的元素是一個僞數組，數組中包含着js節點對象
- jQuery就是把js節點對象從新包裝了一下，讓其具備了jQuery方法
相互轉換：
- js節點對象轉換成jQuery對象：$(js節點對象);
- jQuery對象轉換成js節點對象：jquery對象[index];
總結：若是想要用哪一種方式設置屬性或方法，必須轉換成該類型

11.3.13.4jquery選擇器

1.基礎選擇器

#：id選擇器
. ：類選擇器
element：標籤選擇器
*：通配符選擇器
, ：並集選擇器

2.高級選擇器

空格：後代選擇器
>：子代選擇器
+：緊鄰選擇器
~：兄弟選擇器

3.屬性選擇器

4.基本過濾選擇器

符號	含義	用法
:eq(index)	index爲從0開始的一個數字,選擇序號爲index的元素.選擇第一個匹配的元素	$("li:eqindex(2)")
:gt(index)	index爲從0開始的一個數字,選擇序號大於index的元素.	$("li:gt(2)")
:lt(index)	index爲從0開始的一個數字,選擇序號小於index的元素.	$("li:lt(2)")
:odd	選擇全部序號爲奇數的元素	$("li:odd")
:even	選擇全部序號爲偶數的元素	$("li:even")
:first	選擇匹配的第一個元素	$("li:first")
:last	選擇匹配的最後一個元素	$("li:last")

5.篩選選擇器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li class="a">
				<a href="#">
					mjj
				</a>
			</li>
			<li class="b">wusir</li>
			<li class="c">alex</li>
			<li class="d">sb</li>
		</ul>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		/* 	console.log($('ul li:eq(1)'));
			console.log($('ul li:lt(1)'));
			console.log($('ul li:first'));
			console.log($('ul li:last')); */
			
			// 篩選方法
			// 即選擇兒子又選擇孫子....
			console.log($('ul').find('li a'));
			// 只選擇親兒子
			console.log($('ul').children());
			
			console.log($('a').parent().parent().parent().parent().parent().parent());
			
		
			//補充：獲取文檔,body和html
			console.log(document);
			console.log(document.body);
			console.log(document.documentElement);
		</script>
	</body>
</html>

選項卡的製做

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			button.active{
				color: red;
			}
			p{
				display: none;
			}
			p.active{
				display: block;
			}
		</style>
	</head>
	<body>
		<button class="active">熱門</button>
		<button>電視影音</button>
		<button>電腦</button>
		<button>傢俱</button>
		<p class="active">熱門</p>
		<p>電視影音</p>
		<p>電腦</p>
		<p>傢俱</p>
		<script type="text/javascript">
			// 1.獲取標籤
			var btns = document.getElementsByTagName('button');
			var ops = document.getElementsByTagName('p');
			
			//2.給每一個標籤綁定點擊事件
			/* for(var i = 0;i < btns.length; i++){
				btns[i].index = i;
				btns[i].onclick = function (){
					for(var j = 0; j < btns.length; j++){
						btns[j].className = '';
						ops[j].className = '';
					}
					//改變button的樣式
					this.className = 'active';
					//改變p標籤的樣式
					ops[this.index].className = 'active';
				}
			} */
			
			for(let i = 0;i < btns.length; i++){
				
				btns[i].onclick = function (){
					for(var j = 0; j < btns.length; j++){
						btns[j].className = '';
						ops[j].className = '';
					}
					//改變button的樣式
					this.className = 'active';
					//改變p標籤的樣式
					ops[i].className = 'active';
				}
			}
		</script>
	</body>
</html>

jq實現選項卡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			button.active{
				color: red;
			}
			p{
				display: none;
			}
			p.active{
				display: block;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>
				<a href=""></a>
			</li>
			<li>
				<a href=""></a>
			</li>
		</ul>
		<button class="active"><a href="">熱門</a></button>
		<button>電視影音</button>
		<button>電腦</button>
		<button>傢俱</button>
		<p class="active">
			<a href="#">家電</a>
		</p>
		<p>電視影音</p>
		<p>電腦</p>
		<p>傢俱</p>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$('button').click(function(){
				// 鏈式編程
				//第二個按鈕 索引1
				console.log($(this).addClass('active'));   //修改類名
				$(this).addClass('active').siblings('button').removeClass('active');
				// 獲取當前點擊的元素的索引
				console.log($(this).index());
				$('p').eq($(this).index()).addClass('active').siblings('p').removeClass('active');
			})
		</script>
	</body>
</html>

11.3.13.5對屬性的操做

jquery的屬性操做模塊分爲四個部分：html屬性操做，dom屬性操做，類樣式操做和值操做

html屬性操做：是對html文檔中的屬性進行讀取，設置和移除操做。好比attr()、removeAttr()
DOM屬性操做：對DOM元素的屬性進行讀取，設置和移除操做。好比prop()、removeProp()
類樣式操做：是指對DOM屬性className進行添加，移除操做。好比addClass()、removeClass()、toggleClass()
`值操做：是對DOM屬性value進行讀取和設置操做。好比html()、text()、val()

1.attr

設置屬性值或者返回被選元素的屬性值

//獲取值：attr()設置一個屬性值的時候 只是獲取值
        var id = $('div').attr('id')
        console.log(id)
        var cla = $('div').attr('class')
        console.log(cla)
        //設置值
        //1.設置一個值 設置div的class爲box
        $('div').attr('class','box')
        //2.設置多個值，參數爲對象，鍵值對存儲
        $('div').attr({name:'hahaha',class:'happy'})

2.removeAttr()

移除屬性

//刪除單個屬性
$('#box').removeAttr('name');
$('#box').removeAttr('class');

//刪除多個屬性
$('#box').removeAttr('name class');

3.prop()

prop() 方法設置或返回被選元素的屬性和值。

用於返回屬性值時，則返回第一個匹配元素的值。
用於設置屬性值時，則爲匹配元素集合設置一個或多個屬性/值對。
```
//返回屬性的值：
$(selector).prop(property)
//設置屬性和值：
$(selector).prop(property,value)
//設置多個屬性和值：
$(selector).prop({property:value, property:value,...})
```
何時使用attr()，何時使用prop()？
- 1.是有true,false兩個屬性使用prop();
- 2.其餘則使用attr();

11.3.13.6jquery的動畫效果

1.普通動畫

show()：顯示動畫

// 無參數，表示讓指定的元素直接顯示出來
$(selector).show();

// 經過控制元素的寬高、透明度、display屬性，逐漸顯示
$(selector).show(2000); 
// slow 慢：600ms		normal 正常：400ms		fast 快：200ms
$(selector).show("slow");

// 動畫執行完後，當即執行回調函數
$(selector).show(5000, function(){});

hide()：隱藏動畫

$(selector).hide();
$(selector).hide(1000); 
$(selector).hide("slow");
$(selector).hide(1000, function(){});

toggle()：開關式顯示隱藏動畫

// 顯示和隱藏的來回切換採用的是toggle()方法：就是先執行show()，再執行hide()
$('#box').toggle(3000,function(){}

2.捲簾門動畫

slideDown()：滑入動畫
slideUp()：滑出動畫

slideToggle()：滑入滑出切換動畫

//一、滑入動畫效果：下拉動畫，顯示元素
$(selector).slideDown(speed, 回調函數);
//二、滑出動畫效果：上拉動畫，隱藏元素
$(selector).slideUp(speed, 回調函數);。
//三、滑入滑出切換動畫效果：
$(selector).slideToggle(speed, 回調函數);

3.淡入淡出動畫

fadeIn()：淡入動畫
fadeOut()：淡出動畫
fadeToggle()：淡入淡出切換動畫

fadeTo()：指定透明度

//一、淡入動畫效果：讓元素以淡淡的進入視線的方式展現出來
$(selector).fadeIn(speed, callback);
//二、淡出動畫效果：讓元素以漸漸消失的方式隱藏起來
$(selector).fadeOut(1000);
//三、淡入淡出切換動畫效果：經過改變透明度，切換匹配元素的顯示或隱藏狀態
$(selector).fadeToggle('fast', callback);

4 自定義動畫

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

第一個參數表示：要執行動畫的CSS屬性（必選）
第二個參數表示：執行動畫時長（可選）

第三個參數表示：動畫執行完後，當即執行的回調函數（可選）

jQuery(function () {
            $("button").click(function () {
                var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100};
                var json2 = {
                    "width": 100,
                    "height": 100,
                    "left": 100,
                    "top": 100,
                    "border-radius": 100,
                    "background-color": "red"
               };

                //自定義動畫
                $("div").animate(json, 1000, function () {
                    $("div").animate(json2, 1000, function () {
                        alert("動畫執行完畢！");
                   });
               });

           })
       })

5.中止動畫

$(selector).stop(true, false);
- 第一個參數：
  - true：後續動畫不執行
  - false：後續動畫會執行
- 第二個參數：
  - true：當即執行完成當前動畫
  - false：當即中止當前動畫
- 注意：
  - 參數若是都不寫，默認兩個都是false
  - 實際工做中，直接寫stop()用的多

11.3.13.7jQuery經常使用事件

經常使用事件示例：
- click：鼠標單擊事件
- mouseover / mouseout：鼠標移入/移出事件
- mouseenter / mouseleave：鼠標進入/離開事件（推薦）
  - 同時使用時，能夠用.hover(回調函數,回調函數)
- change：文本框內容改變事件
- select：文本框內容被選中事件
- focus：光標聚焦事件
- blur：光標失焦事件
取消事件默認的方式：
- javascript:void(0);
- javascript:;
- .preventDefault()

11.3.13.8 類操做

添加類：addClass()

// 爲每一個匹配的元素添加指定的類名
$('div').addClass("box");			//追加一個類名到原有的類名
// 爲匹配的元素添加多個類名
$('div').addClass("box box2");		//追加多個類名

刪除類：removeClass()

// 移除指定的類（一個或多個）
$('div').removeClass('box')；
// 移除所有的類
$('div').removeClass();

若是存在就刪除，不存在就添加：toggleClass()

// 若是存在（不存在）就刪除（添加）一個類。
// 語法：toggleClass('box')
$('span').click(function(){
    // 動態的切換class類名爲active
    $(this).toggleClass('active')
})

11.3.13.9 文檔操做

1.插入操做

①後置追加`append/appendTo`

父元素.append(子元素);

追加某元素，在父元素中添加新的子元素

var oli = document.createElement('li');
oli.innerHTML = '哈哈哈';
$('ul').append('<li>1233</li>');
$('ul').append(oli);
$('ul').append($('#app'));

子元素.appendTo(父元素)
- 追加到某元素子元素添加到父元素

$('<li>天王蓋地虎</li>').appendTo($('ul')).addClass('active')

var oH3 = document.createElement('h3');
oH3.innerText = '女神';
// 父.append(子)
$('#box').append('mjj');
$('#box').append('<h2>wusir</h2>');//*****
$('#box').append(oH3);
// append()若是參數是jq對象,那麼至關於移動操做
$('#box').append($('h4'));

//我是分割線
// 子.appendTo(父)
$('<a href="#">百度一下</a>').appendTo('#box').css('color','yellow');
//好處在於能夠鏈式操做

②前置追加`prepend/prependTo`

父元素.prepend(子元素);
- 前置添加，添加到父元素的第一個位置
```
$('ul').prepend('<li>我是第一個</li>')
```
子元素.prependTo(父元素);
- 前置添加，添加到父元素的第一個位置
```
 $('<a href="#">路飛學誠</a>').prependTo('ul')
```

③.after：在匹配的元素以後插入內容

兄弟元素.after(要插入的兄弟元素);

$('ul').after('<h4>我是一個h3標題</h4>')

要插入的兄弟元素.inserAfter(兄弟元素);

$('<h5>我是一個h2標題</h5>').insertAfter('ul')

④before：在匹配的元素以後插入內容

兄弟元素.before(要插入的兄弟元素);

$('ul').before('<h3>我是一個h3標題</h3>')

要插入的兄弟元素.inserBefore(兄弟元素);

$('<h2>我是一個h2標題</h2>').insertBefore('ul')`

2.修改操做

①replaceWith

將全部匹配的元素替換成指定的string、js對象、jquery對象

$(selector).replaceWith(content);
//將全部的h5標題替換爲a標籤
$('h5').replaceWith('<a href="#">hello world</a>')
//將全部h5標題標籤替換成id爲app的dom元素
$('h5').replaceWith($('#app'));

②replaceAll

替換全部

$('<br/><hr/><button>按鈕</button>').replaceAll('h4')

3.刪除操做

①remove

刪除節點後，事件也會刪除（即刪除了整個標籤）

$(selector).remove();

$('ul').remove();

②detach

刪除節點後，事件會保留

$(selector).detach();

 var $btn = $('button').detach()
 //此時按鈕能追加到ul中
 $('ul').append($btn)

$('#btn').click(function() {
    alert(1);
    // 	// 即移除標籤,事件也跟着移除
    // 	/* $(this).remove();鏈式的,返回值是該對象//****
    console.log($(this).remove());
    $('#box').after($(this).remove());
    
    //.detach() 方法和.remove()同樣, 除了 .detach()保存全部jQuery數據和被移走的元素相關聯。當須要移走一個元素，不久又將該元素插入DOM時，這種方法頗有用。

③empty

清空選中元素中的全部後代節點

$(selector).empty();

//從DOM中移除集合中匹配元素的全部子節點。 
$('#box').html(' ');
$('#box').empty();

4.鼠標事件

mouseover 和 mouseout鼠標移入移出事件

//mouseover 鼠標穿過父級元素和子元素都會調用方法

mouseenter()鼠標進入事件
mouseleave()

$('#box').mouseenter(function(){
    console.log('進來了');

    $('#child').stop().slideDown(1000);
})
$('#box').mouseleave(function(){
    console.log('離開了');

    $('#child').stop().slideUp(1000);
})

//``````````````````````````````````````````````````````````

$('#box').hover(function(){
    $('#child').stop().slideDown(1000);
},function(){
    $('#child').stop().slideUp(1000);
})

foucs 和 blusr

$('input[type=text]').focus();
//默認加載頁面聚焦行爲

keydown 和 keyup 和 .keyCode屬性

$('input[type=text]').keydown(function(e){
				console.log(e.keyCode);
				switch (e.keyCode){
					case 8:
						$(this).val(' ')
						break;
					default:
						break;
				}	
			})

5.表單提交事件

表單提交轉換方向

<body>
    <a href="javascript:;">百度遊戲啊</a>
<form action="">
    <input type="text" placeholder="用戶名">
        <input type="password" placeholder="密碼">
            <input type="submit">
                </form>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    $('form').submit(function(e){
    e.preventDefault();
    console.log('11111');
})
</script>
</body>

11.3.13.10 ajax

定義：

AJAX = 異步的javascript和XML（Asynchronous Javascript and XML）
在不重載整個網頁的狀況下，AJAX經過後臺加載數據，並在網頁上進行顯示

獲取首頁數據

$(function(){
    // 獲取首頁的數據
    $.ajax({
        url:'https://api.apeland.cn/api/banner/',
        methods:'get',
        success:function(res){
            console.log(res);
            if(res.code === 0){
                var cover = res.data[0].cover;
                var name = res.data[0].name;
                console.log(cover);
                $('#box').append(`<img src=${cover} alt=${name}>`)
           }
       },
        error:function(err){
            console.log(err);
       }
   })
})

11.3.11 bootstrap

別人幫咱們已經寫好了代碼,咱們拿過來,稍做修改.佈局

11.3.13.12jquery插件

11.3.13.13

相關標籤/搜索

每日一句

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

第十一章 前端基礎

第十一章 前端基礎

11.1HTML

11.1.1html標籤

1.雙閉合標籤 <html></html>

2.單閉合標籤 <meta charset="utf-8">

3.head標籤

11.1.2body標籤

11.1.2.1標題標籤

11.1.2.2段落標籤(p標籤)

11.1.2.3超連接標籤(a標籤)

11.1.2.4圖片標籤 < img/ >

11.1.2.5字體標籤

11.1.2.6列表標籤

1.無序列表 < ul >

2.有序列表 < ol >

3.定義列表< dl >

11.1.2.7表格標籤< table >

<caption>：表格的標題。使用時和tr標籤並列

11.1.2.8表單標籤(form標籤)

11.1.2.9.塊級標籤< div > 和 < span >

11.1.2.10其餘標籤

&nb sp; 空格

換行標籤< br >

< hr >水平線標籤

< center >內容居中標籤

預約義標籤 < pre >

11.1.2.11 html的嵌套關係

11.2 css

11.2.1css引入方式

11.2.2 css選擇器

基礎選擇器

11.2.3高級選擇器

11.2.4盒子模型

padding內邊距

border邊框

按照三要素寫border

margin外邊距

製造三角形

11.2.5css繼承性和層疊性

權重

11.2.6行內元素和塊級元素(重點)

11.2.6.1特色

11.2.6.2分類

11.2.6.3塊級元素和行內元素相互轉換

11.2.7僞類選擇器

愛恨準則(LoVe HAte)

11.2.8屬性選擇器

11.2.9僞元素選擇器

11.2.10字體屬性和文本屬性

字體屬性

px,em,rem

文本屬性

11.2.11浮動(佈局方案)

1.浮動介紹

2.浮動屬性

3浮動的現象

4.清除浮動的方式

5.BFC

11.2.12定位

1.靜態定位static默認

2.相對定位relative

3.絕對定位absolute

4.固定定位fixed

iconfont的使用:

z-index

background背景

box-shadow

行內的水平垂直居中

塊級元素的水平垂直居中

11.3JavaScript核心編程

11.3.1 JS簡介

11.3.2 Javascript的插入

內部Javascript

外部Javascript

11.3.3認識Javascript語句和註釋

JavaScript語句

註釋

11.3.4變量的存儲

聲明變量

第十一章前端基礎

第十一章前端基礎

`<caption>`：表格的標題。使用時和`tr`標籤並列