前端知識

時間  2019-11-22
標籤 前端 知識 简体版
原文   原文鏈接

目錄javascript

前端：

  • 須要瞭解的原理：css

    • JS特色：html

      • js是一個輕量級的語言，能夠插入html頁面的編程語言處理邏輯

    • JS和html css的區別：前端

      • html是純文本文件，使用標籤來描述問題，而css是描述標籤的樣式，讓頁面更好看，而js是一個輕量級的語言，他能夠切入到html頁面的編程語言，js也是能夠處理邏輯html5

        ​

  • 什麼是jquery：java

    • jquery是一個快速簡潔的js框架，封裝了js代碼的模塊，極大的簡化了js的編程python

      ​

    • 優點：jquery

      • js代碼對瀏覽器的兼容性作的更好了web

      • 隱式循環正則表達式

      • 鏈式操做

        ​

    • 封裝了js代碼的模塊，封裝了dom節點，封裝了操做dom節點的簡便方法

      ​

  • web端的組成：

    • html 純文本文件，使用標籤來描述文字的，是一種描述性的標記語言

    • css 描述了標籤的樣式，讓頁面更好看

    • js/jq 動態的效果

      ​

  • http和socket：

    • 前端是怎麼交互的：http基於tcp-socket協議，後端發送的字符串到前端來，前端瀏覽器進行渲染，而後將發來的內容展現到網頁上

      ​

  • http reques ：http請求

  • http response ：http響應

    ​

html：

  • 超文本標記語言就是純文本文件，使用標籤來描述文字的，是一種描述性的標記語言

    • 超文本：圖片，音頻，視頻

    • 標記：全部內容都是包裹在標籤中

    • 切記標籤必定要閉合

      ​

  • 標記（標籤）的分類：

    • 雙標標記：<body> <body> （雙閉合標記）

    • 單標標記：<meta> （單閉合標記）

      ​

標籤：

  • head：一我的的思想

    • 寫在head標籤的內容不不可見

  • title:

    • 9989整個網頁的標題，遊覽器最上方顯示

  • meta:

    • 網頁的源信息，收錄，編碼，遊覽器版本，關鍵字，網頁的描述

  • boby：顯示的代碼

    <!doctype html>           #版本，默認html5
<html lang="zh-cn">       #編碼
<head>                    #head下的內容不可見
    <meta charset="UTF-8">
    <meta name="viewport" content="python,go">   #百度收錄
    <meta http-equiv="refresh" content="2;URL=http://www.baidu.com">  #重定向
    <meta name="Description" content="搜索頁面的標籤/>
    <title>haha</title>   #顯示在網頁標籤上的名字

</head>
<body>

</body>
</html>

import socket
sk = socket.socket()
sk.bind(("192.168.13.146",6677))
sk.listen()

while 1:
    try:
        conn,addr = sk.accept()
        ret = conn.recv(1024)
        conn.send(b"HTTP/1.1 200 OK \r\n\r\n")
        with open('demo-01.html', encoding='utf-8') as f:
            conn.send(f.read().encode('utf-8'))

    except Exception as e:
      print(e)

    ​

內聯標籤（行內元素）

  • 註釋：<!--註釋-->

  • 字體標籤：b標籤加粗，strong標籤不換行

  • 斜體：i標籤或者em

  • 上下標：sup sub

  • 中劃線：del或s del新標籤，在字符串中劃一條橫線

  • 下劃線：u

  • 空格：br/ 換行

  • 特性：空白摺疊，&nbsp空格，&lt 大於號，&gt 小於號

    ​

  • span：沒有任何樣式的標籤

  • img 單邊標籤-內聯：

    • <img src="資源路徑" alt="圖裂說明" height="200px">

    • src 圖片的網絡地址，（width寬度 height高度）寬高二選一

      src 本地路徑存放 img/0.jpg

    • alt 在圖片加載失敗的時候顯示內容，用戶體驗，爬蟲

      ​

  • a 超連接標籤：

    • <a href="http://www.baidu.com" target="_blank">進入百度</a>

    • href

      • 屬性能夠鏈接網絡資源，點擊跳轉
      • href=mailto:郵箱地址 鏈接到本地郵件服務器

    • 錨鏈接：

      #先定義a標籤，在經過a標籤 文件+以前定義好的A標籤內容
#demo-01.html 能夠跳轉到另外一個頁面的具體位置
<a name="top">頂部</a>
<a href="#top">回到頂部</a>

  • target：

    • self：默認在當前網頁打開
    • _blank：在新網頁跳轉打開
    • title：鼠標懸浮顯示小標題

​

塊級標籤（佔滿一整行）

  • 標題標籤：h1-h6

  • 段落標籤：<p> </p> 自動在段落中添加空白 文本級標籤(內部不能在嵌套別的標籤) `

  • 沒有樣式：<div>海洋</div> 沒有任何效果的塊標籤

  • 分割線 ：<hr>分割線</hr>

    ​

列表：

  • ul：無序列表：經常使用

    屬性type:disc(默認)\square(實心方形)\circle(空心圓)\none(不顯示樣式)
<!--設置不顯示任何樣式-->
<ul type="none">
    <li>手機</li>
    <li>電腦</li>
</ul>
<!--設置顯示實心方塊-->
<ul type="square">
    <li>舊電腦</li>
    <li>舊傢俱</li>
</ul>
<!--設置顯示空心圓-->
<ul type="circle">
    <li>舊電腦</li>
    <li>舊傢俱</li>
</ul>
<!--默認顯示實心圓 disc-->
<ul>
    <li>舊電腦</li>
    <li>舊傢俱</li>
</ul>

  • ol ：有序列表

    屬性type:1(默認)\a(小寫字母)\A(大寫字母)\I(羅馬數字)
屬性start:開始位置（瞭解）
<!--默認顯示1,2,3序號,能夠指定開始的值-->
<ol>
    <li>長頭髮</li>
    <li>舊家電</li>
</ol>
<!--設置根據a,b,c顯示,能夠指定開始的值-->
<ol type="a" start="2">
    <li>長頭髮</li>
    <li>舊家電</li>
</ol>
<!--設置根據A,B,C顯示,能夠指定開始的值-->
<ol type="A" start="26">
    <li>長頭髮</li>
    <li>舊家電</li>
</ol>
<!--設置根據羅馬數字,能夠指定開始的值-->
<ol type="I">
    <li>長頭髮</li>
    <li>舊家電</li>
</ol>

  • dl：定義列表：

    <!--帶標題的列表-->
<dl>
    <dt>title</dt> <!--dt表示標題--> 
    <dd>alex</dd>  <!--dd表示內容--> 
    <dd>wusir</dd>
    <dd>太白</dd>
    <dt>title</dt>
    <dd>alex</dd>
    <dd>wusir</dd>
    <dd>太白</dd>
</dl>

  • list-style：去掉列表樣式：

    在css中去掉列表的樣式
ul,li{
   list-style: none;
}

    ​

表格：

  • 標準表格:thead tbody的內容

    tr表示每一行
表頭：th表示thead中的每個元素
內容：td表示tbody中的每個元素

若是要將兩個單元格合併，那確定就要刪掉一個單元格。
單元格的屬性：
colspan：橫向合併。例如colspan="2"表示當前單元格在水平方向上要佔據兩個單元格的位置。
rowspan：縱向合併。例如rowspan="2"表示當前單元格在垂直方向上
border線框 cellpadding內容距離  ellspacing外邊框距離

<table border="1" cellpadding="10px" cellspacing="5px">  
        <thead>
            <tr>
                <th>第一列</th>
                <th>第二列</th>
                <th>第三列</th>
            </tr>
        </thead>

        <tbody>

            <tr>
                <td colspan="2">第一個值</td>
                <td>dudu</td>
            </tr>

            <tr>
                <td>第二個值</td>
                <td>wahaha</td>
                <td rowspan="2">ab鈣</td>
            </tr>

            <tr>
                <td>第三個值</td>
                <td>wahaha</td>
            </tr>
        </tbody>
    </table>

  • 不寫thead只寫tbody 就沒有表頭樣式

    <table border="1" cellpadding="10px" cellspacing="5px">
        <tbody>
            <tr>
                <td colspan="2">第一個值</td>

                <td>dudu</td>
            </tr>
            <tr>
                <td>第二個值</td>
                <td>wahaha</td>
                <td rowspan="2">ab鈣</td>
            </tr>
            <tr>
                <td>第二個值</td>
                <td>wahaha</td>

            </tr>
        </tbody>
    </table>

    ​

from 表單：

  • input 輸入框 ：

    form : 表單標籤
  action : 提交到的地址,把表單中的數據提交到對應的地址上

input :
  type種類:text,password,radio,checkbox,submit

    name:value :把數據提交到後臺的,提交的是input標籤的name值和value值
  placeholder:輸入框的默認提示文字
    checked:  checked屬性表示默認選中
    readonly :對於輸入框的禁止修改 能夠提交
    disabled :對於全部元素不能修改 也不能提交

    <!--注意:若是設置了readonly,只能給輸入框的模式設置,那麼不能修改,可是能夠提交-->
    <!--注意:若是設置了disabled,能夠給全部的表單元素設置,那麼不能修改,也不能提交-->

button :
  input的submit類型和button放在form表單中都表示提交

<form action="http://192.168.13.80:8899">
    <input type="text" name='username' placeholder="請輸入用戶名或密碼" >
    <input type="password" name="password"  value="dada" disabled>

    <input type="radio" name="sex" value="1" checked > 男
    <input type="radio" name="sex" value="2" > 女

    <input type="checkbox" name="hobby" value="a" checked> 抽菸
    <input type="checkbox" name="hobby" value="b" checked> 喝酒
    <input type="checkbox" name="hobby" value="c"> 摳腳

    <input type="submit" value="表單按鈕">
    <button>提交按鈕</button>
    <!--注意 input的submit類型和button放在form表單中都表示提交-->

text-align: right;  樣式輸入框提示右浮動

    ​

  • 其餘類型：

    reset：重置 hidden：隱藏輸入框 button：普通按鈕 file：文件選擇框 date：日期輸入框
注意: 若是是file類型的input標籤須要修改表單的enctype類型Multipart/form-data

<form>
  <input type="hidden">
  <input type="reset">  
  <input type="button" value="普通按鈕">   #button放在外面就是普通按鈕，放在form表示提交
  <input type="file">
  <input type="date">
</form>

  • lable+input：

    lable:
     for屬性,點擊lable中的內容,讓for標示的id對應的元素得到焦點

<label for="user">姓名 : </label>
<input type="text" name='username' id="user" >

  • textarea 文本框：

    #內容較多時使用
<textarea name="" id="" cols="30" rows="10"></textarea>

  • select 選擇框：

    select選擇框:
  multiple:設置多選框
    size:選擇框內顯示數量
option選項:
  selected:默認選中

<select name="city" id="a" size="3">
        <option value="1" selected>北京</option>
        <option value="2">上海</option>
        <option value="3">天津</option>
</select>

<select name="" id="" multiple>
        <option value="" selected>抽菸</option>
        <option value="" selected>喝酒</option>
        <option value="" >燙頭</option>
</select>
<!--注意:默認是單選-->
<!--注意:使用multiple屬性設置爲多選:按住鼠標下拉,按住ctrl選,按住shift選-->


import socket
sk = socket.socket()
sk.bind(('192.168.13.80',8899))
sk.listen()
try:
    conn,addr = sk.accept()
    ret = conn.recv(1024)
    print(ret)
    with open('demo-01.html',encoding='utf-8') as f:
        conn.send(f.read().encode('GBK'))

except Exception as e:
    print(e)
finally:
    conn.close()
    sk.close()

    ​

css：

  • 層疊樣式表，做用就是給HTML頁面標籤添加各類樣式

    ​

樣式

  • 樣式的引入：

    <head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--引入方式二:內接引入-->
   <!--<style>-->
        <!--div{-->
            <!--color: blue;}-->
    <!--</style>-->

    <!--引入方式三: 外接樣式-連接式 :link導入一個鏈接 重點重點重點*****-->
    <!--<link rel="stylesheet" href="index.css">-->

    <!--引入方式四: 外接樣式-導入式 :style導入一個@import url('路徑')-->
    <!--<style>-->
        <!--@import url("index.css");-->
    <!--</style>-->
</head>

<body>
<!--引入方式一 :行內引入-->
<!--<div style="color:red">wahaha</div>-->
<body>

  • 幾個基礎樣式

    <style>
        div{
            color: red;
            width: 200px;
            height: 200px;
            background-color: yellow;
             /*background-color: yellow;* 註釋css樣式/ 
        }
 </style>

<body>
<div>qqxing</div>
<div>qqxing</div>
</body>

    ​

選擇器：

基本選擇器（中要）

標籤：div  類：.sp   id：#div1  通用選擇器:*
標籤名直接選擇標籤,#選擇id, .表示class,*表示全部標籤
<style>
        span{
            color:green}

        div{
            color: #c4db69}

        a{
            color: red;}
</style>

1.樣式的繼承 : 子元素會繼承父元素的樣式(可是a標籤除外)
2.要想對a標籤進行樣式設置,必須直接找到a標籤的位置,對a單獨設置
3.樣式之間的重疊部分是有優先級的,繼承下來的樣式的優先級爲0(最低)

#div1{     #內容標籤的會進行匹配
   color: cornflowerblue;}

.sp{
     color: orangered;}

*{         #通用選擇器:全部的標籤都會被選中
   color: yellow;}

#內容id class優先級高
<body>
<div id="div1">
    wahaha1
    <span class="sp">我是一個div1-span</span>
</div>

<span>只有span</span>

<div>
    wahaha2
    <span  class="sp">我是一個div2-span</span>
    <a href="http:www.taobao.com">我是一個div-span</a>
</div>
</body>

​

高級選擇器

後代選擇器:div p 表示div標籤下的全部的p標籤
子代選擇器:div>p 表示div下面一層全部的p標籤
毗鄰選擇器:div+p 找div的兄弟標籤中的下一個p標籤
弟弟選擇器:div~p 找div下的全部弟第p標籤
屬性選擇器:div[title] div[title='aaa'] 找到全部含有title屬性的div/找到全部title屬性='aaa'的div
並集選擇器:ul,li 全部,分隔的標籤都要找到
交集選擇器:div.aa 找全部class='aa'的div標籤
僞類選擇器:a:active鼠標按下 link鏈接未訪問以前 visited鏈接訪問後
         input:focus 輸入框得到焦點
         hover:鼠標懸浮
僞元素選擇器:first-letter第一個字的樣式 
           before(after)值這個標籤的前面(後面)加content,給這個content設置樣式

​

後代\子代：

後代選擇器：找的是子孫
    子代選擇器：只找子代

後代選擇器:表示div 標籤下的全部span標籤
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       div span{
           color: tomato;
        }
    </style>
</head>

<body>
    <div>
        我是div標籤的content
        <span>西紅柿色1</span>
        <p>
            在div-p標籤中
           <span>西紅柿色2</span>
        </p>
    </div>
    <span>我只是一個單純的span標籤</span>
</body>

子代選擇器：div>span  表示div下面一層全部的span標籤
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       div>span{
           color: tomato;
        }
    </style>
</head>

<body>
    <div>
        我是div標籤的content
        <span>西紅柿色1</span>
        <p>
            在div-p標籤中
           <span>西紅柿色2</span>
        </p>
    </div>
    <span>我只是一個單純的span標籤</span>
</body>

​

毗鄰+\弟弟~

毗鄰: span+a  找div兄弟標籤中的下一個p標籤
    <style>
       span+a{
           color: tomato;}
    </style>
    <div>
        <a>我是a0標籤</a>
        <span>span標籤</span>
        <a>我是a1標籤</a>  <!--變色-->
        <a>我是a2標籤</a>
    </div>

弟弟: span~a  找div下的全部弟弟p標籤
    <style>
       span~a{
           color: tomato;
        }
    </style>
    <div>
        <a>我是a0標籤</a>
        <span>span標籤</span>
        <a>我是a1標籤</a>   <!--變色-->
        <a>我是a2標籤</a>   <!--變色-->
    </div>

​

並集交集選擇器

並集：逗號分隔的標籤都要找到
<style>
    ul,ol,span{
       background-color: gainsboro;
    }
</style>

<body>
<ul>
    <li>u-first</li>
</ul>
<ol>
    <li>o-first</li>
</ol>
</body>

交集選擇器:只有class中含有box1.box2才能夠渲染染色
<style>
    div.box1.box2{
            background-color: red;
            width: 200px;
            height: 200px;
    }
</style>

<body>
    <div class="box1 box2">box1box2</div>
    <div class="box1">box1</div>
    <div>aaa</div>
    <span class="box1">span標籤</span>
</body>

​

屬性選擇器（屬性對應屬性）

屬性選擇器 [屬性]/[屬性='值']
<style>
       /*a[href]{*/
            /*color: green;*/
        /*}*/
        /*a[href='http://www.taobao.com']{*/
            /*color: lightpink;*/
        /*}*/
        input[type='text']{
            background-color: red;
        }
 </style>

<body>
     <div>
        <a href="http://www.taobao.com">我是a0標籤</a>
        <span>span標籤</span>
        <a href="http://www.jd.com">我是a1標籤</a>
        <a href="http://www.mi.com">我是a2標籤</a>
        <a>沒有href屬性</a>
    </div>
    <input type="text">
    <input type="password">
</body>

​

僞類選擇器：

a : link：沒有被訪問a標籤的樣式 visited：訪問事後的顏色 active：輸入點擊摁住的顏色

input: focus   輸入框得到焦點，框內背景色
通用: hover     鼠標懸浮時候的顏色

<style>
        a:link{
            color:tomato; 
        }
        a:visited{
            color: gray;
        }
        a:active{
            color: green;
        }
        input:focus{
            background-color: aquamarine;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: lightgray;
        }
        div:hover{
            background-color: red;
        }
</style>

<body>
<a href="http://www.jd.com">京東</a>
<a href="http://www.xiaohuar.com">校花</a>
<input type="text">
<div></div>
</body>

​

僞元素選擇器:

first-letter：設置第一個首字母樣式
before ：在內容前添加樣式
after  : 在內容後面添加樣式*****

<style>
        /*div:first-letter{*/
            /*color: red;}*/

        div:before{
            content: '**';
            color: pink;}

        div:after{
            content: '.....';
            color: lightblue;}
</style>

<body>
<div>春江水暖鴨先知</div>
</body>

​

css選擇器優先級：

行內>id選擇器>類選擇器>標籤選擇器>繼承
1000  100    10       1       0
全部的值能夠累加可是不進位
優先級若是相同,寫在後面的生效  

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        div.a.b{
            background-color: gray;
        }
        div.a{
            background-color: blue !important;  !important提升樣式優先級
        }
        #aa{
            background-color: lightpink;
        }
    </style>

<body>
    <div class="a b" id="aa">aaa</div> #id優先級最高，以後是類，最後是標籤
    <div>bbb</div>
    <div>ccc</div>
    <div>ddd</div>
</body>

​

顏色表示：

rgb表示法:
    rgb :red green blue 光譜三原色
    rgb(255,255,255) 白色
    rgb(0,0,0) 黑色

16進制的顏色表示法
    #000000-#FFFFFF
    #000 - #FFF

單詞表示法:
    # red green 
rgba表示法:
    #a表示的是透明度 0-1,0是徹底透明,1是不透明
https://htmlcolorcodes.com/zh/yanse-ming/

​

字體:

<style>
        p{
            font-family: '楷體';
            font-weight: bold;          變粗
            font-size: 30px;            字體大小
            text-align: right;          右對齊
            
            /*text-decoration: overline;*/    上標線
            /*text-decoration: underline;*/   下標線
            
            text-indent: 2em;               em單位是一個相對單位,相對當前字體大小的像素是1em
            text-shadow: 5px 5px 5px red;}  陰影字體顏色

        div{
            height: 200px;
            line-height: 200px;
            font-size: 20px;
            background-color: orange;}      設置背景顏色
        a{
            text-decoration: none;}
    </style>

<body>

    <p>我是一個p標籤</p>
    <div>我是一個p標籤</div>
    <a href="">娃哈哈</a>

</body>

​

文本:

text-align 文字的水平對齊
    left 左對齊
    center 居中
    reght 右對齊
text-decoration 文本裝飾
    none;         沒有下劃線
    line-through; 中劃線
    overline;     上劃線
    underline;    下劃線

text-indent 文本縮進
    text-indent: 2em; em單位是一個相對單位,相對當前字體大小的像素是1em

line-height 行高,設置行高=容器高度,文字自動垂直居中
    line-height: 200px;

文字溢出
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        .div0 {
            width: 300px;
            border: 1px solid darkblue;
        }
        .div1 {
            width: 300px;
            border: 1px solid red;

            /*強制在一行內顯示*/
            white-space: nowrap;
            /*超出部分隱藏*/
            overflow: hidden;
        }
        .div2 {
            width: 300px;
            border: 1px solid black;

            /*強制在一行內顯示*/
            white-space: nowrap;
            /*超出部分隱藏*/
            overflow: hidden;
            /*修剪超出的文本*/
            text-overflow: clip;
        }
        .div3 {
            width: 300px;
            border: 1px solid chocolate;

            /*強制在一行內顯示*/
            white-space: nowrap;
            /*超出部分隱藏*/
            overflow: hidden;
            /*顯示省略符號來表明被修剪的文本*/
            text-overflow: ellipsis;
        }
    </style>

<body>
<div class="div0">各國領導人感謝中方做爲東道主對各國參展給予的大力支持</div><br>
<div class="div1">各國領導人感謝中方做爲東道主對各國參展給予的大力支持</div><br>
<div class="div2">各國領導人感謝中方做爲東道主對各國參展給予的大力支持</div><br>
<div class="div3">各國領導人感謝中方做爲東道主對各國參展給予的大力支持</div><br>
</body>

​

背景圖片:

background-color: red;   在沒有背景圖片覆蓋的範圍顯示背景顏色
background-image: url('timg.jpg'); 設置背景圖片

height: 400px;
width: 400px; 

background-repeat: no-repeat; 設置圖片不重複   repeat-x水平重複   repeat-y垂直重複
background-position: right top; 圖片的位置    左中右x 上中下y
/*left center right /top center bottom*/

background-attachment: fixed; 在窗口中固定圖片的位置，滾動位置不變
background:red url("timg.jpg") no-repeat left center;  把全部的設置綜合寫在background中


    <style>
    div{
        /*background-color: red;*/
        /*background-image: url('222.jpg');*/
        height: 400px;
        width: 400px;
        background:red url("222.jpg") no-repeat left center;
        /*background-attachment: fixed*/}   固定圖片位置
    </style>

<body>
    <div>
        <p>大長腿</p>
    </div>
</body>

​

邊框的設置:

width: 100px;
            height: 100px;

            border-color: tomato green gray yellow;
            border-width: 1px 3px 5px 7px;
            border-style: solid dotted dashed double;
            /*一個值:上下左右
            四個值:遵循順時針上右下左
            三個值:上 右左 下
            兩個值:遵循上下 左右

            border-top-style:dotted;  單獨設置頂線的樣式(top,left,bottom,right)
            border-left-style:solid;  單獨設置左邊線的樣式
            border-top-color:red;     單獨設置頂線顏色

            border:yellow solid  10px;    統一設置邊框的顏色 樣式 寬度  ***

示例：
    <style>
        div{
            width: 100px;
            height: 100px;
            border: solid 2px red;

            border-color: tomato green gray yellow;
            border-width: 1px 3px 5px 7px;
            border-style: solid dotted dashed double;

            /*border:yellow solid  10px;*/}
        div.brother{
            display: none;}
    </style>

<body>
    <div class="brother"></div>
    <div>海洋</div>
    <a href="">手機</a>
    <a href="">小米商城</a>
</body>

​

塊和行內的概念\轉換:

  • 行內元素：
    • 與其餘行內元素並排；
    • 不能設置寬、高。默認的寬度，就是文字的寬度
  • 塊級元素：
    • 霸佔一行，不能與其餘任何元素並列；
    • 能接受寬、高。若是不設置寬度，那麼寬度將默認變爲父親的100%

  • 示例：

    display的屬性值 : block塊  inline行內 inline-block行內快 none

display: block;         獨佔一行，元素合併在一行內，而且能夠設置寬高
display: inline-block;  既能夠設置寬高又不會獨佔一行 行內\塊轉行內快     ******經常使用

display: inline;        表示一個行內元素,不能設置寬高
display: none;          不只不顯示內容,連位置也不佔了

   <style>
        a{
            /*display: block;*/        #將連個a標籤放在一個行內
            display:inline-block;
            color:blue;                #字體顏色    
            height: 30px;              #字體大小
            background-color: red;     #顏色
            text-decoration: none;     #沒有下劃線
            line-height: 30px;         #背景顏色
            text-align: center;        #文字居中水平對齊
        }
    </style>

<body>
   <div class="brother"></div>
    <div></div>
    <a href="">手機</a>
    <a href="">小米商城</a>
</body>

    ​

盒模型:

  • 在網頁中顯示方方正正的盒子稱爲盒模型

    • 盒模型有兩種：標準模型和IE模型。咱們在這裏重點講標準模型。

      border  : 邊框的寬度
padding : 內邊距的距離
content : width height
背景包含的部分:padding + conntent
計算一個盒子的總大小: 寬width+2padding+2border 高height+2padding+border

外邊距 margin
    上下的盒子若是設置bottom和top會致使塌陷,取兩個設置的最大值做爲外邊距
margin: 0 auto;表示左右居中(父盒子寬度,子盒子寬度)

分方向的設置
border-top border-right  border-bottom border-left
padding-top padding-right  padding-bottom padding-left
margin-top margin-right  margin-bottom margin-left

給圖形設置圓角
border-radius: 5px;

盒子模型：
    <style>
        body{
            margin: 0;
        }
        div{
            width: 200px;   /*content內容部分的寬*/  #設置塊大小和顏色
            height: 200px;
            background-color: yellow;   #設置塊背景顏色

            border:blue solid 10px;     #外邊距大小
            padding: 30px;              #外邊距到內容邊距大小
            /*padding: 內邊距*/
        }
        div.box2{
            margin-top: 20px;
            margin-left: 20px;
            margin-bottom: 20px;   #設置上下左右大小
        }
        .box3{
            margin-top:40px        #設置上下兩個模塊的距離
        }
    </style>

<body>
    <div class="box2">盒子的大小 寬+padding*2+邊*2  高+padding*2+邊*2</div>
    <div class="box3">盒子2</div>
</body>

    • 盒子居中：

      <style>
        div.father{
            width: 800px;
            height: 40px;
            background-color: darkgray;
        }
        div.son{
            width: 500px;
            height: 35px;
            padding: 5px 0 0 10px;
            background-color: blue;
            /*margin-left: auto;*/
            /*margin-right: auto;*/
            margin: 0 auto;
        }
    </style>

body>
<div class="father">
    <div class="son">
        你好
    </div>
</div>
</body>

    • 三角形：

      <style>
        div{
            width: 0;
            height: 0;
            border-color: red transparent transparent transparent;
            border-width: 50px;
            border-style: solid;
        }
    </style>

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

    • 圖片變圓：

      #img直接行內引用調用style塊
<body>
    <div class="box2" >
        <img style="border-radius: 100px" src="222.jpg" alt="">
    </div>
</body>

      ​

浮動:

  • float：表示浮動的意思。它有四個值。

        • none: 表示不浮動，默認
        • left: 表示左浮動
        • right：表示右浮動

  • 示例：

    浮動的元素會脫離標準文檔流,本來塊級元素就再也不獨佔整行了
而且在原頁面中也不佔位置了,以後的元素會擠到頁面上影響頁面的排版
清除浮動 clear:both
僞元素清除法:
        .clearfix:after{
            content: '';
            clear: both;
            display: block;
        }
<body>
<div class="father clearfix">
<div class="box"></div>
<div class="box"></div>
</div>
<div class="main">
    主頁的內容
</div>
</body>

示例：
      <style>
        div.main{
            height: 100px;
            background-color: darkgray;}

        div.box{
            width: 100px;
            height: 100px;
            border: solid red;
            background-color: yellow;
            float: right;                #當設置了浮動，子類會覆蓋父類部分
        }

        div.father{
            background-color: blue;    #父類寬高都沒有設置，大小隨着子類大小走
            /*overflow: hidden;*/    #當父類清除浮動則並排顯示，
        }

        /*.clear{*/
            /*clear: both;*/
        /*}*/
        /*.clearfix:after{*/
            /*content: '';*/
            /*clear: both;*/
            /*display: block;*/
        /*}*/
    </style>

<body>
<div class="father clearfix">
    <div class="box"></div>     
    <div class="box"></div>
</div>

<div class="main">
    主頁的內容

</div>
</body>

    ​

overflow:

  • 內容多餘標籤的大小

  • 示例：

    visible 可見(默認)
hidden 超出部分隱藏
scroll 超出顯示滾動條

    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: chartreuse;
            overflow: visible;
        }
    </style>

<body>
    <div>
        <p>兩隻老虎，兩隻老虎跑得快</p>
        <p>兩隻老虎，兩隻老虎跑得快</p>
        <p>兩隻老虎，兩隻老虎跑得快</p>
        <p>兩隻老虎，兩隻老虎跑得快</p>
        <p>兩隻老虎，兩隻老虎跑得快</p>
    </div>
</body>

    ​

定位:

  • 定位有三種：相對定位、絕對定位、固定定位

    position : 相對：relative 絕對：absolute 固定：fixed
top:10px;
right:10px;
bottom:10px;
left:10px;

相對定位 :相對本身原來的位置移動,移動以後還佔據原來的位置

絕對定位 :固定在頁面不會隨着頁面而走動，不會佔據原來的位置,層級的提高
       做用：頁面佈局常見的「父相子絕」，必定要會！！！！

      （絕對定位是相對於整個html頁面,不會佔據原來的位置,層級的提高
       若是咱們設置了絕對定位的元素 的父元素 沒有設置position,那麼咱們對元素的全部設置都是基於整          個頁面
      若是設置了position,那麼子盒子的absolute位置會根據父盒子的位置定位
      父相子絕:子元素設置的絕對位置會對應着祖級元素的相對位置）

固定定位 :固定是相對於整個窗口的，隨着窗口移動
       做用： 1.返回頂部欄 2.固定導航欄 3.小廣告


         <style>
        div.father{
            width: 400px;
            height: 2000px;
            background-color: lightgray;
            position: absolute;          #設置底板固定
        }
        div{
            width: 100px;              #設置div塊圖片的大小
            height: 100px;
        }
        .d1{
            background-color: red;}
        .d2{
            background-color: yellow;
            position: absolute;  #將d2往左絕對定位100px，綠色塊直接飄上來，而相對還會站原來位置
            left:100px;}
        .d3{
            background-color: green;}
        img{
            position: fixed;   #將絕對圖片設置成固定定位，這個圖片會隨着頁面走動，提高層級
            right: 20px;
            bottom:100px;
        }
        .d4{
            opacity: 1;
        }
    </style>


<body>
    <div class="father">
        <div class="d1"></div>
        <div class="d2"></div>
        <div class="d3"></div>
    </div>

    <div class="d4">
            你好你好娃哈哈
        <img src="222.jpg" alt="">
    </div>
</body>

    ​

z-index 優先級:

  • 指的就是各個盒子重疊在一塊兒誰上誰下的問題。

    四大特性，只要你記住了，頁面佈局就不會出現找不到盒子的狀況。

z-index 值表示誰壓着誰，數值大的壓蓋住數值小的，
只有定位了的元素，纔能有z-index,也就是說，無論相對定位，絕對定位，固定定位，均可以使用z-index，而浮動元素不能使用z-index
z-index值沒有單位，就是一個正整數，默認的z-index值爲0若是你們都沒有z-index值，或者z-index值同樣，那麼誰寫在HTML後面，誰在上面壓着別人，定位了元素，永遠壓住沒有定位的元素。
從父現象：父親慫了，兒子再牛逼也沒用

  • 示例：

    <style>
        .father{
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 600px;
            background-color: gray;
            z-index: 10;
        }
        .son{
            position: absolute;
            top: 0;
            left: 0;
            width: 50px;
            height: 50px;
            background-color: red;
            z-index: 100;
        }
    </style>

<body>
    <div class="father"></div>
    <div class="son"></div>
</body>

    ​

opacity 透明度：

  • 透明度示例

    <style>
        img {
            opacity: 0.5;   #調整d4對應的整個標籤的透明度是50%
      }   
    </style>

<body>
    <div class="d4">
        大長腿 <br/>
        <img src="111.jpg" alt="">
    </div>
</body>

    ​

JavaScript：

  • javascript介紹:

    • 能夠處理邏輯

    • 能夠和瀏覽器交互，不夠嚴謹

      ​

  • javascript包含:

    • ECM Ascript js的一種標準化規範 標出了一些基礎的js語法

    • DOM document object model 文本對象模型 主要操做文檔中的標籤

    • BOM browser object model 瀏覽器對象模型 主要用來操做瀏覽器

      ​

  • js引入和script標籤

    方式一:在html頁寫js代碼
<body>
    <script>
        alert("hello,world")
    </script>
</body>

方式二: 引入js文件（項目中經常使用）
     <script src="first.js"></script>

    ​

  • 結束符和註釋

    結束符
; 是js代碼中的結束符

單行註釋
// alert('hello,world');
多行註釋
/*多行註釋*/

    ​

變量

  • 建立變量名

    變量名 : 數字\字母\下劃線\$
建立變量的關鍵字var :var a = 1;
建立變量的時候能夠不指定數據類型
建立變量但不賦值 :var a;   a建立出來就是一個undefined未定義

    ​

輸入輸出：

  • 示例：

    彈出框alert
  alert('hello') 彈出框中的內容是"hello"
彈出輸入框
  var inp = prompt('問句') 彈出輸入框,輸入的內容會被返回給inp
控制檯輸出
    console.log(變量或值)

    ​

基礎的數據類型

  • 查看類型

    兩種方式：
    typeof 變量;
    typeof(變量);

  • boolean 布爾值：

    true  : [] {} 
false : undefined null NaN 0 ''

  • null 空和undefined未定義：

    null 表示空  boolean值爲false
undefined 沒有定義 建立變量可是不賦值 boolean值爲false

    ​

number-數字:

  • 數字：

    整數 var a = 1
小數 var b = 1.237
保留兩位小數 b.toFixed(2)  //1.24

    ​

str-字符串:

  • 字符串：

    var s1 = '單引號'
var s2 = '雙引號都是字符串的表達方式'

  • 字符串經常使用方法：

    屬性 : .length

方法:
trim()  #去空白;
  ww = ee.trim()

concat  #拼接： 
  var str1 = "胡";
  var str2 = "海洋";
  console.log(str1.concat(str2));  結果：胡海洋

charAt(索引)  #給索引求字符
  var str1 = "胡海洋";
  console.log(str1.charAt(0));

indexOf(字符) #給字符求索引
  var str1 = "胡海洋";
  console.log(str1.indexOf("洋"));

slice(start,end) #切片，顧頭不顧尾,
  var str1 = "胡海洋";
  console.log(str1.slice(0,2));

.toLowerCase()   #所有變小寫   
.toUpperCase()   #所有變大寫
  console.log(str.toLowerCase());
  console.log(str.toUpperCase());

.split(',',2)    #根據(第一個參數)分隔符切割,切前多少個結果，切割完變成列表
  var  str =  '哈哈哈|噠噠噠|嘟嘟嘟';
  console.log(str.split('|'));

    ​

內置對象類型

數組 Array

  • 數組就是python中的列表：

    建立:
var arr = ['a','b','c'];
var arr2 = new Array();  #建立一個空的列表

索引操做:
arr[0] 查看

    ​

  • Array經常使用的屬性和方法

    屬性:length

方法:
var li = ["胡"]

index   #根據索引進行賦值
  li[1]="海"    

.push()     #尾部追加元素
  li.push("洋");

.pop()      #刪除最後一個元素，並獲取
  li.pop(2)  

.unshift()    #頭部插入元素
.shift()  #頭部移除元素
    li.unshift("寶寶")
  li.shift("寶寶")

.slice(start, end)    #切片
    li.slice(0,1)

.reverse()    #在原數組上進行反轉，有問題能夠在翻轉回來
  li.reverse();

.join(seq)    #a1.join('|')， 將數組元素鏈接成字符串
  console.log(li.join("|"));

.concat(val, ...)            #多個數組合並,獲得一個新數組，原數組不變
    var li = ["胡", "海", "洋"]
    var l2 = ["徐","俊","麗"]
  var l3 = li.concat(l2);

.sort()       #排序
  function sortNumber(a,b){
    return a - b}

    var arr1 = [11, 100, 22, 55, 33, 44]
    arr1.sort(sortNumber)

.splice() 
  li.splice(0,2);
#參數：1.從哪刪(索引), 2.刪幾個 3.刪除位置替換的新元素(可多個元素)  刪除元素，並向數組添加新元素。

    ​

自定義類型

  • 示例

    var obj = {"name":"海洋"}

    ​

JSON：

  • 示例：

    #字典key 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);

​

數據類型之間的轉換

  • 轉換示例

    string --> int   #字符串轉數字
  parseInt('123') //123
  parseInt('123abc') //123
  parseInt('abc') //NaN  not a number

string --> float        
  parseFloat('1.233') 

float/int --> String
  var num = 123
  String(123)               #小數轉字符串 推薦
  var str = num.toString()  #數字轉

    任意類型 --> Boolean
  Boolean(數據)

#字符串和數字相加 --> 字符串
#字符串和數字相減 --> 數字

    ​

運算符

  • 賦值運算符

    = += -= *= /= %=

    ​

  • 比較運算符

    > < >= <= 
== !=  不比較類型 （經常使用）
===  !== 比較類型和值(經常使用)

    ​

  • 算數運算符

    + - * / % ** 

++ --
var a = 1
undefined
var b = a++    // a=2  b=1
var c = ++a    // a=3  c=3

    ​

  • 邏輯運算符

    && 邏輯與  ||邏輯或  !邏輯非
true && true    //true
true || false   //true
!true           //false

    ​

流程控制

  • 特色

    全部的代碼塊都是用{}標識的
全部的條件都是用()標識的

    ​

  • if 判斷語句：

    #if 單分支
var ji  = 20;
if(ji >= 20){
    console.log('恭喜你，吃雞成功，大吉大利')
}

#if else
var ji  = 20;
if (ji > 2){console.log("大於")}
else{console.log("小於")};

#多層if判斷
if (true) {
   //執行操做
}else if(true){
    //知足條件執行            
}else if(true){
   //知足條件執行        
}else{
  //知足條件執行
}

  • case語句

    # 和if語句也能夠實現，case多了一個默認輸入（瞭解就行）
  var err_type = 'info'
    switch(err_type) {
        case 'warining':
            console.log('警告');
            break;
        case 'error':
            console.log('錯誤');
            break;
        default:
            console.log('沒錯')
    }

    ​

  • while-循環

    var i = 1;            #初始化循環變量
while(i<=9){        #判斷循環條件
    console.log(i);
    i = i+1;      #更新循環條件
}

    ​

  • for-循環

    # 方式一:
for(var i = 1;i<=10;i++){
        console.log(i)
}

# 方式二:  for 至關於python中的range(len(arr))
var arr = [1,2,3,4,5]
for (i in arr){
        console.log([i])
}

    ​

  • 三元運算符

    # var 結果 = boolean表達式 ? 爲true返回的值:爲false返回的值
var a = 1
var b =2
var c = a>b ? a:b  //若是a>b成立返回a，不然返回b
console.log(c)

    ​

函數:

  • 函數結構：

    function 函數名(參數){
    函數體
    return 返回值
}
函數名(參數)
#注意 : 傳遞的參數能夠和定義的個數不同,可是不要這麼寫
#      返回值只能有一個

    ​

  • 僞數組

    #arguments僞數組

function add(){
    console.log(arguments);
}
add(1,2,3,4)

function add(a,b){
    console.log(arguments);
}
add(1,2,3,4)

    ​

  • 匿名函數

    var add = function(){
    console.log('hello,world');
} 
add()  #調用

    ​

  • 自調用函數

    (function(a,b){
    console.log(a,b)
})(1,2)

    ​

正則：

  • 示例：

    建立一個正則:
var reg = RegExp('正則表達式')  //注意,寫在字符串中全部帶\的元字符都會被轉義,應該寫做\\
var reg2 = /正則表達式/  //內部的元字符就不會轉義了
reg.test('待檢測的字符串') //若是字符串中含有符合表達式規則的內容就返回true,不然返回false

在字符串中應用正則
var exp = 'alex3714'
exp.match(/\d/)    //只匹配從左到右的第一個
exp.match(/\d/g)   //匹配全部符合規則的 返回一個數組
var exp2 = 'Alex is a big sb'
exp2.match(/a/) //只匹配小寫a
exp2.match(/a/i) //i表示不區分大小寫 A也會被匹配出來
exp2.match(/a/ig) //不區分大小寫並匹配全部

exp.search(/正則表達式/i) //不區分大小寫,從exp字符串中找出符合條件的子串的第一個索引位置
exp.split(/正則表達式/i,n) //不區分大小寫,根據正則切割,返回前n個結果
exp.replace(/正則/gi,'新的值') //i表示不區分大小寫,g表示替換全部,將符合正則條件的內容替換成新的值

小問題1
var reg2 = /\d/g     //正則表示要匹配多個值
reg2.test('a1b2c3')  //屢次test會的到true true true false 繼續test會循環以前的結果

小問題2
var reg3 = /\w{5,10}/
reg3.test() //若是什麼都不寫,那麼默認test中傳遞undefined參數,恰好能夠符合9位字符串的規則

    ​

Date對象

  • 建立時間對象：

    #建立對象:
var dt = new Date()  //獲取到當前時間

#時間轉換
dt.toLocalString() //轉換成'2019/8/13 10:18:12'
dt.getFullYear()   //年
dt.getMonth()      //月 1月是0
dt.getday()        //週中天 週日是0
dt.getDate()       //月中天 1號是1
dt.getHours()      //時 從0開始
dt.getMinutes()    //分 從0開始
dt.getSeconds()    //秒 從0開始

自定義時間:
var dt2 = new Date('2018/1/1 12:12:12')   1月1日
var dt2 = new Date(2018,1,1);             2月1日

    ​

  • Math對象：

    Math.abs(x)      返回數的絕對值。
pow(x,y)    返回 x 的 y 次冪。
round(x)    把數四捨五入爲最接近的整數。
sqrt(x)     返回數的平方根。
exp(x)      返回 e 的指數。
log(x)      返回數的天然對數（底爲e）。
sin(x)      返回數的正弦。
tan(x)      返回角的正切。

    ​

面向對象(瞭解):

  • 面向對象：

    function Student(name,age){
    this.stu_name = name
    this.stu_age  = age
}
Student.prototype.show = function(){
    console.log(this.stu_name,this.stu_age)
}

var stu = Student('alex',84) // 實例化
stu.stu_name  // 查看屬性
stu.stu_age
stu.show()    // 調用方法

object.prototype.show = function(){
    console.log(this.stu_name,this.stu_age)
}

    ​

DOM

  • 什麼是dom：

    document object modle 文檔對象模型
整個文檔就是一顆樹
樹當中的每個節點都是一個對象 : 這個對象中維繫着 屬性信息 文本信息 關係信息

在頁面上還有一些動做效果:
  根據人的行爲改變的 點擊 鼠標懸浮
  自動在改變的

    ​

  • js是怎麼給前端的web加上動做的：

    1.找到對應的標籤
2.給標籤綁定對應的事件
3.操做對應的標籤

    ​

查找標籤

  • 直接查找：（元素就是樣式）

    var a = document.getElementById('baidu')           //直接返回一個元素對象
console.log(a)

var sons = document.getElementsByClassName('son')  //返回元素組成的數組
console.log(sons)
sons[0] //獲取到一個標籤對象

var divs = document.getElementsByTagName('div')    //返回元素組成的數組
console.log(divs)

#示例：
<body>
    <div id = 'foo'>
        <div id = 'son1' class="son">
            <img src="" alt="">
        </div>

        <div id = 'son2' class="son">
            <a href="" id="baidu"></a>
        </div>
    </div>
</body>

<script>
    var a = document.getElementById('baidu')     #返回id一個元素
    console.log(a)
    var foo = document.getElementById('foo')     #返回foo下的全部元素
    console.log(foo)

    var sons = document.getElementsBClassName('son')  #經過類名將元素轉成列表返回
    console.log(sons)

    sons[0]    #獲取到一個標籤對象
    var divs = document.getElementsByTagName('div')  
    console.log(divs)
</script>

    ​

  • 間接查找：

    #找父親
var a = document.getElementById('baidu')          
console.log(a)
var foodiv = a.parentNode          //獲取到父節點的對象
console.log(foodiv)

#找兒子
var foo= document.getElementById('foo')
foo.children            #獲取全部的子節點,返回一個數組
foo.firstElementChild   #獲取第一個子節點     
foo.lastElementChild    #獲取最後一個子節點
console.log(a)

#找兄弟
var son1 = document.getElementById('son1')
console.log(son1)
var son2 = document.getElementById('son2')
console.log(son2)
var a = son1.nextElementSibling     #找下一個兄弟 返回一個對象
son1.previousElementSibling         #找上一個兄弟 返回一個對象，若是沒有兄弟返回null
console.log(a)

    ​

操做自己的標籤

  • 標籤的建立

    var obj = document.createElement('標籤名')   // a div ul li span
obj就是一個新建立出來的標籤對象

    ​

  • 標籤的添加

    父節點.appendChild(要添加的節點) //添加在父節點的兒子們以後
父節點.insertBefore(要添加的節點,參考兒子節點) //添加在父節點的某個兒子以前

#添加節點，前要先建立好一個標籤
<script>
    var obj = document.createElement('span')
    var obj1 = document.createElement('a')
    console.log(obj)
    obj.appendChild(obj1)      #添加節點，前要先建立好一個標籤
    console.log(obj)
</script>

#insertBefore
<script>
    var obj = document.createElement('span')
    var obj1 = document.createElement('a')
    var obj2 = document.createElement('span')

    obj.appendChild(obj1)
    obj.insertBefore(obj2,obj1)    #在節點中，插入一個節點
    console.log(obj)
</script>

    ​

  • 標籤的刪除

    父節點.removeChild(要刪除的子節點         # obj.removeChild(obj2)
子節點1.parentNode.removeChile(子節點2)

    ​

  • 標籤的替換

    父節點.replaceChild(新標籤,舊兒子)

<script>
    var obj = document.createElement('span')
    var obj1 = document.createElement('a')
    var obj2 = document.createElement('span')
    var obj3 = document.createElement('a')

    obj.appendChild(obj1)
    obj.insertBefore(obj2,obj1)
    console.log(obj)

    obj.replaceChild(obj3,obj2)
    console.log(obj)
</script>

    ​

  • 標籤的複製

    節點.cloneNode()     //只克隆一層
節點.cloneNode(true) //克隆本身和全部的子子孫孫
注意 :若是克隆出來的標籤的id是重複的,那麼修改以後才能應用到頁面上

    ​

節點的屬性

  • 操做方法：

    節點對象.getAttribute('屬性名')           #獲取節點屬性
節點對象.setAttribute('屬性名','屬性值')   #設置節點屬性
節點對象.removeAttribute('屬性名')        #刪除節點屬性

    <style>
        .odiv{
            width: 100px;
            height: 100px;
            background-color: red;}
    </style>

<body>
    <div id="outer"></div>
    <button id="b1">顯示</button>
    <button id ="b2">隱藏</button>
</body> 

<script>
    var b1 = document.getElementById('b1')       #經過document找到b1節點
    b1.onclick = function () {                     #b1.onclick 當點擊觸發函數
        var div_obj = document.getElementById('outer')  #獲取id-outer屬性
        div_obj.setAttribute('class','odiv')            #將其設置爲紅色
    }

    var b2 = document.getElementById('b2')
    b2.onclick = function () {
        var div_obj = document.getElementById('outer')
        div_obj.removeAttribute('class')         #刪除紅色後，按鈕向上浮動
    }
</script>

    ​

節點的文本：

  • 操做方法：

    節點對象.innerText = '只能寫文字'
節點對象.innerHTML = '能夠放標籤'

#示例：
<body>
    <div id = 'box'>haiyang
        <div>xujunli</div>
    </div>
</body>

<script>
    var box = document.getElementById('box')  #獲取節點
    console.log(box.innerText)                #innerText 獲取內容
    console.log(box.innerText="dada")         #修改節點中的值
    console.log(box.innerHTML)                #innerHTML 標籤下的內容和包括文本
</script>

    ​

獲取節點值：

  • 操做方法：

    #輸入框
<textarea name="" id="content" cols="30" rows="10">
</textarea>

#獲取value
var content = document.getElementById('content');
content.value
content["value"]

    ​

節點的類-Class

  • 操做方法：

    <style>
        .odiv1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .odiv2{
            background-color: yellow;
        }
    </style>

<body>
<div id='box' class = 'odiv1'></div>
</body>

<script>
    var box = document.getElementById('box')

     box.onclick = function () {
         if(this.classList.contains('odiv2')){
               this.classList.remove('odiv2')
         }else{
            this.classList.add('odiv2')
         }
    }
</script>

    ​

BOM

  • browser object model 瀏覽器對象模型

    ​

事件

  • onclick：鼠標單擊

  • ondbclick：鼠標雙擊

  • onscroll：滾動軸移動

  • onunload：關閉網頁時

  • onsubmit：表單提交事件

  • onreset：重置表單時

  • onmouseover：鼠標懸停，就是鼠標停留在圖片上

  • onmouseout：鼠標移出，鼠標離開圖片所在區域

    ​

  • 綁定方式

    <button id="btn">點擊一下</button>

方式一:
    var btn = document.getElementById('btn')
    btn.onclick = function () {               #onclick 鼠標點擊觸發
        alert('點我幹嗎')
    }

方式二:
  btn.onclick = clik
    function clik() {
        alert('不要點')
    }

方式三:（瞭解）
  <button id="btn" onclick="clik()">點擊一下</button>
  function clik() {
        alert('不要點')
    }

    ​

常見對象：

  • 示例：

    alert();    #不一樣瀏覽器中的外觀是不同的
confirm();  #兼容很差
prompt();   #不推薦使用

#打開窗口：
window.open(url,target)
  <button onclick="window.open('https://www.baidu.com/')">百度首頁</button>
    //url：要打開的地址。
    //target：新窗口的位置。能夠是：_blank 、_self、 _parent 父框架。

#關閉窗口：
  window.close()  只能關閉用js的window.open()打開的頁面

window.innerHeight - 瀏覽器窗口的內部高度
window.innerWidth  - 瀏覽器窗口的內部寬度

    ​

定時器

  • setInterval

    每隔一段時間就完成某個操做
var ret = setInterval(fn,n)  每隔n毫秒就調用一次fn函數
var ret = setInterval("fn()",n) 

clearInterval(ret)   清除定時器

#示例：
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>

    var ret = setInterval(fn,500)
    function fn(){
        var box = document.getElementById('box')
        box.classList.toggle('box')
    }

    ​

  • setTimeOut

    在設定時間以後執行一次來完成某個操做
var tid = setTimeout(fn,n)       n毫秒以後只調用一次fn函數
var tid = setTimeout("fn()",n) 
clearTimeout(tid)   清除定時器

#示例：
    var tid = window.setTimeout("fn()",2000)
    function fn() {
        alert('wahaha')
    }

    ​

  • location對象

    window的子對象  window.location

屬性:
window.location.href           #查看當前網頁的url

window.location.href = 'http://www.baidu.com'   #修改當前網頁的url,修改以後會跳轉

方法:
window.location.reload();        #刷新頁面

    ​

  • navigator

    #獲取客戶端的信息：
console.log(navigator.userAgent);    #獲取瀏覽器信息
console.log(navigator.platform);     #獲取系統版本

    ​

練習：

  • 設置字體顏色

    <div>
    <span id = 'content'>熱烈慶祝23期學生全體就業</span>
</div>

<script>
    setInterval(f,200)
    function f() {
        var content = document.getElementById('content');
        var color = parseInt(Math.ceil(Math.random()*16777215),16)
        content.style.color = '#'+color
    }
</script>

  • 廣告頁關閉

    <style>
        body{
            margin: 0;
        }
        .ad{
            background-color: green;
            position: fixed;
            padding: 5px;
            width: 100%;
            height: 50px;
            color: yellow;
            text-align: center;
            line-height: 50px;
        }
        button{
            float: right;
        }
    </style>

<body>
    <div class="ad">
        python23期皇家賭場開業了,性感荷官在線發牌
        <button id="close">x</button>
    </div>

    <div class='content'>
        我是正文內容
        <img src="111.jpg" alt="">
        <img src="222.jpg" alt="">
    </div>
</body>


<script>
    var btn = document.getElementById('close')  #獲取close節點
    btn.onclick = function () {
        this.parentNode.style.display = 'none'  #獲取父的節點，將父節點樣式清空
    }
</script>

    ​

  • 紅綠燈：

    <style>
        .outer{
            border: solid 5px darkgray;
            border-radius: 10px;
            float: left;
        }
        .light{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: lightgray;
            float: left;
        }
        .red{
            background-color: red;
        }
        .yellow{
            background-color: yellow;
        }
        .green{
            background-color: green;
        }
    </style>

<body>
<div class="outer">
    <div class="light red"></div>
    <div class="light"></div>
    <div class="light"></div>
</div>

<script>
    setInterval(change,1000)    #一秒調用一次函數
    function change(){
        var outer = document.getElementsByClassName('outer')[0]   #獲取outer節點

        if(outer.children[0].classList.contains('red')){          #判斷是不是紅色
            outer.children[0].classList.remove('red')             #是的話刪除變成黃色
            outer.children[1].classList.add('yellow')

        }else if(outer.children[1].classList.contains('yellow')){  #判斷是否是黃色
            outer.children[1].classList.remove('yellow')           #是的話刪除，添加綠色
            outer.children[2].classList.add('green')

        }else{
            outer.children[2].classList.remove('green')
            outer.children[0].classList.add('red')
        }
    }
</script>
</body>

    ​

  • 瀏覽器滾動欄判斷-onscroll事件

    window.onscoll 在頁面的滾動條滾動的時候觸發的事件
document.documentElement.scrollTop 針對獲取瀏覽器的垂直滾動條的位置

#示例：
    <style>
        div{
            height: 2000px;
        }
        a{
            display: none;
            position: fixed;
            bottom: 20px;
            right:20px;
        }
    </style>

<body>
    <div></div>
    <a href="#" id="back">回到頂部</a>
</body>

<script>
    //針對獲取瀏覽器的垂直滾動條的位置
    window.onscroll = function () {              #滾動時觸發
        var a = document.getElementById('back')  #獲取a標籤節點
        console.log(document.documentElement.scrollTop)
        if(document.documentElement.scrollTop>500){   #判斷當前滾動條位置是否發於500
            a.style.display = 'block'            #大於則添加樣式
        }else{
            a.style.display = 'none'             #小於則去掉樣式
        }
    }
</script>

    ​

  • select選擇框聯動-onchange事件

    select對象.options.selectedindex 被選中的選項在options中的索引位置

#示例：
<body>
    <select name="province" id="province">
        <option selected>請選擇省份</option>
    </select>

    <select name="city" id="city">
        <option selected>請選擇城市</option>
    </select>
</body>

<script>
    data = {"河北": ["廊坊", "邯鄲"], "北京": ["朝陽區", "海淀區"], "山東": ["威海市", "煙臺市"]}
    var pro = document.getElementById('province')  #獲取省份節點

    for(k in data){
        var opt = document.createElement('option') #建立option標籤
        opt.innerText = k                        #給每一個標籤循環添加內容
        pro.appendChild(opt)                     #往省份節點中添加配置好的標籤
    }

    pro.onchange = function () {
        var city = document.getElementById('city') #獲取城市節點
        city.innerText = null                      #將以前內容所有清空

        var ind = this.options.selectedIndex       #將每次選擇的值賦予給ind
        var key = this.children[ind].innerText     #經過省份獲取到城市內容
        console.log(key)

        for(var i in data[key]){                 #循環選擇省份的城市內容
            console.log(i,typeof i)
            var val = data[key][i]                   #將每一個值賦值給val
            var opt = document.createElement('option')   #建立城市標籤
            opt.innerText = val                            #將每一個城市內容添加到城市標籤
            city.appendChild(opt)                        #將標籤添加到城市標籤下
        }
    }
</script>

    ​

  • 模態框：

    <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            html,body{
                height: 100%;
            }
            #box{
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,.3);
            }
            #content{
                position: relative;
                top: 150px;
                width: 400px;
                height: 200px;
                line-height: 200px;
                text-align: center;
                color: red;
                background-color: #fff;
                margin: auto;
            }
            #span1{
                position: absolute;
                background-color: red;
                top: 0;
                right: 0;
                width: 30px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                color: #fff;

            }
        </style>

    <body>
        <button id="btn">彈出</button>
    </body>

  <script type="text/javascript">
        var oBtn = document.getElementById('btn');  #獲取dom元素 1.獲取事件源
        var oDiv = document.createElement('div');   #建立彈出模態框的相關DOM對象
        var oP = document.createElement('p');
        var oSpan = document.createElement('span');

        #設置屬性
        oDiv.id = 'box';
        oP.id = 'content'
        oP.innerHTML = '模態框成功彈出'
        oSpan.innerHTML = 'X';
        oSpan.id = 'span1'

        #追加元素
        oDiv.appendChild(oP);
        oP.appendChild(oSpan);

        oBtn.onclick = function(){                   # 點擊彈出按鈕 彈出模態框
            this.parentNode.insertBefore(oDiv,oBtn)  # 動態的添加到body中一個div
        }

        oSpan.onclick = function(){            # 點擊X 關閉模態框
            oDiv.parentNode.removeChild(oDiv)  # 移除oDiv元素
        }
    </script>

    ​

jQuery

  • jquery概念

  • jquery是一個快速簡潔的js框架，極大的簡化了js的編程

    ​

  • jquery的優點

    1.js代碼對瀏覽器的兼容性作的更好了
2.隱式循環
3.鏈式操做

    ​

  • jquery是什麼?

    高度封裝了js代碼的模塊
  封裝了dom節點
  封裝了操做dom節點的簡便方法

    ​

  • jquery的導入

    https://code.jquery.com/jquery-3.4.1.js 未壓縮版
https://code.jquery.com/jquery-3.4.1.min.js 壓縮版

下載:保存在本地文件裏
引入:<script src="jquery3.4.1.min.js"></script>

    ​

  • $和jQuery的關係

    $就是jQuery名字的簡寫,其實是一回事兒

    ​

  • for循環注意事項：

    #不要用for(i in li_list){}的方式循環一個jq對象

for(let i=0;i<li_list.length;i++){   #let 聲明的變量的做用域只在for循環中
        console.log(i)
}

    ​

  • jquery對象和dom對象的關係和轉換

    jquery封裝了dom
dom轉成jquery : jQuery(dom對象)  $(dom對象)
jquery轉成dom : jq對象[index]

#示例：
<div></div>
<div id="app"></div>
<div class="box"></div>
<div class="box"></div>
<div></div>

#經過js獲取這些元素節點：
    var myBox = document.getElementById("app");           //經過 id 獲取單個元素
    var boxArr = document.getElementsByClassName("box");  //經過 class 獲取的是僞數組
    var divArr = document.getElementsByTagName("div");    //經過標籤獲取的是僞數組

#經過jQuery獲取這些元素節點：
   //獲取的是數組，裏面包含着原生 JS 中的DOM對象。
　　console.log($('#app'));
　　console.log($('.box'));
　　console.log($('div'));

    ​

jquery選擇器

  • 三種選擇器

    基本選擇器： 通常都是經過ID或者class類來進行選擇
層級選擇器： 能夠經過層次進行選擇，如後代子代選擇器
屬性選擇器： 能夠經過屬性進行選擇

    ​

  • 基礎選擇器（重要）：

    id選擇器   .類選擇器  標籤選擇器   *通用選擇器

#示例：
<body>
    <div class="box" title="baidu">
        <ul id="city">
            <li>北京</li>
            <a href="https://www.baidu.com" class="baidu" title="baidu">wahaha</a>

            <li id="sh"><a href="haha" title="luffy">上海</a></li>
            <li><a href="dada" title="luffy">山東</a></li>

            <li>河北</li>
            <span></span>
        </ul>
        <p>p標籤</p>
    </div>
</body>
<script src="jquery3.4.1.min.js"></script>


#id選擇器，ID設置不可重複，只選擇一個
$('#city')   
k.fn.init [ul#city]  

#類選擇器，class設置能夠重複
$('.box')
k.fn.init [div.box]

#標籤選擇器，獲取全部li標籤
$('li')
k.fn.init(4) [li, li, li, li]
$('a')
k.fn.init(2) [a, a]

#通用選擇器，選擇全部
$('*')
k.fn.init(16) [html, head, meta, title, body, div.box, ul#city, li, li, a, li, a, li, p, script, script]

#div.c1交集選擇器      
$('div.box')
k.fn.init [div.box]

#div,p並集選擇器，多選幾個
$('div,p,a')
k.fn.init(4) [div.box, a, a, p]

    ​

  • 層級選擇器：

    空格 後代選擇器，選擇div下的全部li標籤   
$('div li')

>子代選擇器，表示div下面一層全部的p標籤
$('div>ul>li')

+毗鄰選擇器，找兄弟標籤中的下一個li標籤
$('.baidu+li')
k.fn.init [prevObject: k.fn.init(1)]

~弟弟選擇器，找兄弟標籤中全部弟弟li標籤
$('.baidu~li')
k.fn.init(3) [li, li, li, prevObject: k.fn.init(1)]

    ​

  • 屬性選擇器：

    $("[href]")          必須是含有某屬性的標籤

$('a[href]')       有某屬性的符合前面選擇器的標籤，    #a=選擇器  href=屬性

$('a[title="luffy"]')        屬性名="luffy"的符合選擇器要求標籤
$('a[title！="luffy"]')      屬性名="luffy"不符合選擇器要求標籤

$('a[href$="com"]')          屬性值以xxx結尾的
$('a[href^="http"]')         屬性值以xxx開頭的
$('a[href*="baidu"]')        屬性值包含xxx
$('a[href][class="baidu"]')  擁有屬性1,且屬性二的值='xxx',符合前面選擇器要求的

    ​

jquery篩選器

  • 基礎篩選器（重要）：

    $('選擇器:篩選器')
$('選擇器:first')

做用於選擇器選擇出來的結果
$('a:first')   找第一個
$('a:last')    最後一個
$('a:eq(1)')   經過索引找
$('a:even')    找偶數索引
$('a:odd')     找奇數索引
$('a:gt(1)')   大於某索引的
$('a:lt(1)')   小於某索引的

$('*:not("li")')       # not(選擇器) 不含 符合選擇器 要求的
$('*:has("a[href]")')  # has(選擇器) 後代中含有該選擇器要求的(找的不是後代,找的是自己)

    ​

  • 表單篩選器

    • type篩選器：

      #form 表單選擇
$(':text')
$(':password')
$(':radio')
$(':checkbox')
$(':file')
$(':submit')
$(':reset')
$(':button')
注意 : date type的input是找不到的

      ​

    • 狀態篩選器：

      enabled
disabled
checked
selected

$(':disabled')
jQuery.fn.init [input]

$(':enabled')
jQuery.fn.init(15) [input, input, input, input, input, input, input, input, input, input, input, select, option, option, option]

$(':checked')
jQuery.fn.init(4) [input, input, input, option]

$(':selected')
$(':checkbox:checked')
jQuery.fn.init(2) [input, input]

$('input:checkbox:checked')
jQuery.fn.init(2) [input, input]

#示例：
<body>
<input type="text" name="" disabled>
<input type="password" name="" >
<input type="radio" name="sex" checked>
<input type="radio" name="sex" >
<input type="checkbox" name="hobby" checked>
<input type="checkbox" name="hobby" checked>
<input type="checkbox" name="hobby">
<input type="file" name="" >
<input type="date" name="" >
<input type="submit" name="" >
<input type="reset" name="" >
<input type="button" name="" >

<select name="" id="">
    <option value="" selected>北京</option>
    <option value="">上海</option>
    <option value="">天津</option>
</select>
</body>

<script src="jquery.3.4.1.js"></script>

      ​

篩選器方法

  • 篩選示例：

    找兄弟 :$('ul p').siblings()

找哥哥
$('ul p').prev()              找上一個哥哥
$('ul p').prevAll()           找全部哥哥
$('ul p').prevUntil('選擇器')  找哥哥到某一個地方就停了

找弟弟 : next()  nextAll()     nextUntil('選擇器')
找祖宗 : parent()  parents()   parentsUntil('選擇器')
找兒子 : children()

    ​

  • 篩選方法：

    first()
last()
eq(index)

not('選擇器')     去掉知足選擇器條件的
filter('選擇器')  交集選擇器,在全部的結果中繼續找知足選擇器要求的
find('選擇器')    後代選擇器 找全部結果中符合選擇器要求的後代
has('選擇器')     經過後代關係找當代 後代中有符合選擇器要求的就把當代的留下

    ​

事件的綁定

  • 綁定示例

    <body>
    <button>點擊1</button>
    <button>點擊2</button>
</body>

<script src="jquery.3.4.1.js"></script>

<script>
    $('button').click(
        function () {
            alert('你點了我一下!')
        }
    )
</script>

    ​

標籤的文本操做（重要）

  • 文本操做示例

    text()
$('li:first').text()         // 獲取值
$('li:first').text('wahaha') // 設置值

$('li:last').html()          // 獲取值
$('li:last').html('qqxing')  // 設置值

$('li:first').html('<a href="http://www.mi.com">爽歪歪</a>')   //a標籤

var a = document.createElement('a')
a.innerText = '我是AD鈣'
$('li:last').html(a)     //a 是dom對象，js方式添加

var a2 = document.createElement('a')
var jqobj = $(a2)
jqobj.text('乳娃娃')
$('li:last').html(jqobj)   //jqobj是jquery對象，jquery方式

#代碼示例：
<body>
    <ul>
        <li>list1</li>
        <li>list2</li>
    </ul>
</body>
<script src="jquery.3.4.1.js"></script>
<script>
    $('li:first').html('<a href="http://www.mi.com">爽歪歪</a>')   //a標籤

    var a = document.createElement('a')
    a.innerText = '我是AD鈣'
    $('li:last').html(a)       //a 是dom對象

    var a2 = document.createElement('a')
    var jqobj = $(a2)
    jqobj.text('乳娃娃')
    $('li:last').html(jqobj)   //jqobj是jquery對象

</script>

    ​

標籤的操做

  • 增長標籤

    父子關係:
  追加兒子 :(父).append(子) (子).appendTo(父)
  頭部添加 :(父).prepend(子) (子).prependTo(父)

兄弟關係:
  添加哥哥 :參考點.before(要插入的)     要插入的.insertbefore(參考點)
  添加弟弟 :參考點.after(要插入的)      要插入的.insertAfter(參考點)
若是被添加的標籤本來就在文檔樹中,就至關於移動
    #代碼示例：
<body>
    <ul>
        <li>唱</li>
        <li id="l2">跳</li>
        <li>rap</li>
    </ul>
</body>
<script src="jquery.3.4.1.js"></script>

例子append
    var li = document.createElement('li')
    var jq = $(li).text('張藝興')
    $('ul').append(jq)

    var li = document.createElement('li')
    var jq = $(li).text('張藝興')
    $('ul').append(jq[0])

    var li = document.createElement('li')
    var jq = $(li).text('張藝興')
    $('ul').append('<li>鹿晗</li>')

例子appendTo
  var li = document.createElement('li')
    var jq = $(li).text('張藝興')
    jq.appendTo('ul')

    var dom_ul = document.getElementsByTagName('ul')[0]
    var li = document.createElement('li')
    var jq = $(li).text('張藝興')
    jq.appendTo(dom_ul)

    var li = document.createElement('li')
    var jq = $(li).text('張藝興')
    jq.appendTo($('ul'))

對已經存在的內容進行添加 -- 移動
   $('li:first').appendTo('ul')

  • 頭部添加：

    $('li:last').prependTo('ul')
$('ul').prepend('<li>李東宇</li>')
$('<li>鄧帥</li>').prependTo('ul')

  • 位置插入：

    $('#l2').before('<li>李東宇</li>')
$('<li>李東宇222</li>').insertBefore('#l2')    #在l2上方位置插入

$('#l2').after('<li>鄧帥</li>')
$('<li>鄧帥222</li>').insertAfter('#l2')       #在l2下方位置插入

    ​

  • 刪除 修改 克隆

    #刪除 : remove detach empty
    remove : 刪除標籤和事件,被刪掉的對象作返回值
        $("li").remove()
      var obj = $('button').remove()
      obj是button標籤,可是事件已經被刪除了

    detach : 刪除標籤,保留事件,被刪掉的對象作返回值
        $("li").detach()

    empty : 清空內容標籤,本身被保留
        $("li").empty()

#修改 : replaceWith replaceAll，注意標籤以前元素
    $(".dada").replaceWith('<li>海洋</li>')  用b替換a
    $('<li>俊麗</li>').replaceAll(".dada")   用a替換b

#複製 : clone
    var btn = $(this).clone()       //克隆標籤但不能克隆事件
    var btn = $(this).clone(true)   //克隆標籤和事件

    ​

標籤的屬性操做

  • 通用屬性

    #示例
<body>
    <a href="" title="baidu">百度一下</a>
    <input type="checkbox" name="hobby">
    <input type="checkbox" name="hobby" checked>
    <input type="checkbox" name="hobby">
    <input type="checkbox" name="hobby">
</body>

attr獲取屬性的值
$('a').attr('href')
設置/修改屬性的值
$('a').attr('href','http://www.baidu.com')
設置多個屬性值
$('a').attr({'href':'http://www.baidu.com','title':'baidu'})

removeAttr
$('a').removeAttr('title') //刪除title屬性
    若是一個標籤只有true和false兩種狀況,適合用prop處理
若是設置/獲取的結果是true表示選中,false表示取消選中

$(':checkbox').prop('checked')  # 獲取當前選擇狀態
$(':checkbox:checked').prop('checked',true)  # 表示選中
$(':checkbox:checked').prop('checked',false) # 表示取消選中

```

​

類的操做

  • 類操做示例：

    ```js
    添加類 addClass
    $('div').addClass('red') //添加一個類，全部的div標籤所有都會添加
    $('div').addClass('red bigger') //添加多個類

    刪除類 removeClass
    $('div').removeClass('bigger') //刪除一個類
    $('div').removeClass('red bigger')

    轉換類 toggleClass //有即刪 無即加
    $('div').toggleClass('red')
    $('div').toggleClass('red bigger')

```

​

value值

  • 值得操做：

    $('input').val()           #獲取輸入框的值
$(':text').val('值')       #向輸入框內輸入值
$(':password').val('值')   #沒有

對於選擇框 : 單選 多選 下拉選擇
設置選中的值須要放在數組中 : 
  $(':radio').val([1])     
  $(':radio').val([1,2,3])  #默認選擇哪一個

    ​

css樣式

  • 樣式示例：

    css('樣式名稱','值')
css({'樣式名1':'值1','樣式名2':'值2'})

#示例：
$('div').css('background-color','red')             # 設置一個樣式
$('div').css({'height':'100px','width':'100px'})   # 設置多個樣式

    <script src="jquery.3.4.1.js"></script>
  <style>
        div{
            height: 20000px;
            width : 20000px;
            overflow: scroll;}
    </style>

<body>
    <div>
        皇家賭場開業,性感荷官在線發牌
        皇家賭場開業,性感荷官在線發牌
        皇家賭場開業,性感荷官在線發牌
    </div>
</body>

    ​

滾動條

  • 滾動條示例：

    scrollLeft()    
scrollTop()

$(window).scrollLeft()   #頁面水平滾動
$(window).scrollTop()    #頁面上下滾動

    ​

盒子模型

  • 盒子示例：

    內容寬高 : width和height
  $('div').width(100)
  $('div').height(100)

內容+padding : innerWidth和innerHeight
  $('div').innerWidth(200)
  $('div').innerHeight(200)

#內邊距的距離：$('div').css('padding','30')

內容+padding+border : outerWidth和outerHeight
  $('div').outerWidth(350)
  $('div').outerHeight(350)

#外邊距的距離：$('div').css('border','blue solid 10px')

內容+padding+border+margin : outerWidth(true)和outerHeight(true)
設置值：變得永遠是content的值

#代碼示例：



胡海洋

```

​

表單操做

  • 表單示例：

    ```js






若是返回false不提交
若是返回true不提交

```

​

做業練習

  • 表格全選和反選示例：

    <body>
<table border="1">
    <thead>
        <tr>
            <th>#</th>
            <th>姓名</th>
            <th>愛好</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td><input type="checkbox"></td>
            <td>胡海洋</td>
            <td>抽菸、喝酒、燙頭</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>俊麗</td>
            <td>吃</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>俊丹丹</td>
            <td>吃</td>
        </tr>
    </tbody>
</table>

<script>
    $(".quanxuan").click(function () {
        $(':checkbox').prop('checked',true)
    })

    $(".quxiao").click(function () {
        $(':checkbox').prop('checked',false)    #將全部選擇的狀態取消
    })

    $(".fanxuan").click(function () {
        var input_count = $("input:checkbox")   #獲取當前勾選框的列表

        for(i=0; i<input_count.length ;i++){    #進行for循環
            var status = $(input_count[i]).prop('checked')  #或許每一個i選擇框的狀態
            $(input_count[i]).prop('checked',!status)       #修改反向狀態
    }
    })
</script>
</body>

    ​

動畫

  • 動畫方法：

    show系列
  顯示動畫：show 
    隱藏動畫：hide 
    開關顯示動畫：toggle

slide滑動系列
   滑入動畫：slideDown 
   滑出動畫：slideUp 
   滑入滑出動畫：slideToggle(時間,回調函數)

fade淡入淡出系列
   淡入動畫：fadeIn
   淡出動畫：fadeOut  
   淡入淡出動畫：fadeToggle

動畫的中止
   stop 永遠在動畫開始以前,中止動畫

#示例：
    <style>
        .container{
            position: relative;
            float: right;
            height: 40px;
            width: 120px;
            background-color: lightgray;
        }
        .car{
            position: absolute;
            line-height: 40px;
            width: 120px;
            text-align: center;
            top: 0;
            right: 0;
        }
        .box{
            position: absolute;
            top: 40px;
            right: 0;
            height: 100px;
            width: 300px;
            background-color: #00F7DE;
            display: none;
        }
    </style>


<body>
<div class="container">
    <div class="car">購物車(<span>0</span>)</div>
    <div class="box"></div>
</div>
</body>                      
<script>
    $('.container').mouseenter(
        function () {
            $('.box').stop()
            $('.box').slideDown(400)
        })
    $('.container').mouseleave(
        function () {
            $('.box').stop()         #中止動畫
            $('.box').slideUp(400)
        })

    // $('.container').hover(        #鼠標懸停
    //     function () {
    //         $('.box').stop()
    //         $('.box').slideToggle(400)   #滑入滑出
    //     })
</script>

  • 動畫特效示例：

    <style>
        div{
            height: 200px;
            width: 200px;
            background-color: red;
            display: none;}
    </style>
    <script src="jquery-3.4.1.js"></script>

</head>
<body>
    <button>顯示</button>
    <div></div>
</body>
<script>
    // fadeIn fadeOut
    $('button').click(
        function () {
            $('div').stop()
            if($('button').text()==='顯示'){
                $('button').text('隱藏')
            }else{
                $('button').text('顯示')
            }
            $('div').fadeToggle(2000)
        })

    // show hide toggle
    // $('button').click(
    //     function () {
    //         $('div').stop()
    //         if($('button').text()==='顯示'){
    //             $('button').text('隱藏')
    //         }else{
    //             $('button').text('顯示')
    //         }
    //         $('div').toggle(2000)
    //         // $('div').toggle(2000,fn)
    //     })
</script>

    ​

事件

  • 事件綁定

    # bind 參數都是選傳的,接收參數e.data
    $('button').bind('click',{'a':'b'},fn) #{'a':'b'} 發送參數
    function fn(e) {                     #e 接受參數
        console.log(e.data)
        console.log(e.data.a)
    }

    $('button').bind('click',fn)
    function fn(e) {
        console.log('wahaha')
    }

# 簡寫的事件名稱當作方法名
    $('button').click({'a':'b'},fn)
    function fn(e) {
        console.log(e.data)
        console.log(e.data.a)
    }

    $('button').click(fn)
    function fn(e) {
        console.log('wahaha')
    }
  $('button').unbind('click')         #解鎖

    ​

  • 解除綁定

    $('button').unbind('click')

    ​

  • 各類事件

    click(function(){...})   // 單機事件

blur(function(){...})    // 失去焦點
focus(function(){...})   // 得到焦點

change(function(){...})  // input框鼠標離開時內容改變觸發

keyup(function(){...})   // 按下的鍵盤觸發事件 27對應的是esc鍵 獲取鍵盤編號 e.keyCode
mouseover/mouseout       // 若是給父元素綁定了over事件,那麼這個父元素若是有子元素,每一次進入子元素也                              觸發父元素的over事件
mouseenter/mouseleave = hover(function(){...})  //鼠標的懸浮

    ​

    • blur focus change示例：**

      <body>
    <input type="text">
    <select name="" id="">
        <option value="">北京</option>
        <option value="">上海</option>
    </select>
</body>

<script>
    $('input').focus(
        function () {
            console.log('得到焦點了')
        })
    $('input').blur(
        function () {
            console.log('失去焦點了')
        })
    $('select').change(
        function () {
            console.log('內容改變了')
        })
</script>

      ​

    • keyup-鍵盤控制：

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

    <style>
        .mask{
            position: absolute;
            background-color:rgba(0,0,0,0.5) ;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;}
        .t{
            position: absolute;
            background-color: white;
            width: 400px;
            height: 300px;
            top: 50%;
            left: 50%;
            margin-left: -200px;
            margin-top: -150px;}
    </style>
    <script src="jquery-3.4.1.js"></script>
</head>
    <body>
        <h1>皇家賭場</h1>
        <div class="mask">
            <div class="t"></div>
        </div>
    </body>

<script>
    $(window).keyup(function (e) {
        // console.log(arguments) //幫助你查看想不起來的函數參數都有哪些
        if(e.keyCode===27){
            $('.mask').css('display','none')
        }
    })
</script>
</html>

      ​

    • out_over

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color: forestgreen;
        }
    </style>
    <script src="jquery-3.4.1.js"></script>

</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
<script>
    $('.outer').mouseout(
        function () {
            console.log('out')})
</script>
</html>

      ​

  • 事件冒泡

    #冒泡就是點擊子節點，會向上觸發父節點，可使用一下兩種方法進行處理
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer{
            width: 300px;
            height: 300px;
            background-color: red;}
        .inner{
            width: 100px;
            height: 100px;
            background-color: forestgreen;}
    </style>
    <script src="jquery-3.4.1.js"></script>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
<script>
    $('.outer').click(
        function () {
            alert('outer')
        })
    $('.inner').click(
        function (e) {
            alert('inner')
            // e.stopPropagation() //阻止事件冒泡方法1
            return false    //阻止事件冒泡方法2
        })
</script>
</html>

    ​

  • 事件委託

    $('div').on('click','button',{'a':'b'},function (event) {
        console.log(event.data)
        alert('不準點')
    })

至關於把button元素的點擊事件委託給了父元素div
後添加進來的button也能擁有click事件

#示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        $(window).ready(
            function () {
                alert('123')
        })
    </script>
    <script src="jquery-3.4.1.js"></script>

</head>
<body>
    <div>
        <button>按鍵1</button>
    </div>
</body>
<script>
    $('div').on('click','button',{'a':'b'},function (event) {
        console.log(event.data)
        alert('不準點')
    })
    var btn = document.createElement('button')  #添加新的標籤自帶button事件
    $(btn).text('按鍵2').appendTo('div')
</script>
</html>

    ​

頁面的加載

  • 示例：

    document.onload = function(){
   //js 代碼 
}

window.onload = function () {
            $('button').click(function () {
            alert('不準點')
            })}
onload要等到全部的文檔 音視頻都加在完畢才觸發
onload只能綁定一次

//jquery的方式,只等待文檔加載完畢以後就能夠執行,在同一個html頁面上能夠屢次使用
$(document).ready(
     function () {
       //文檔加在完畢以後能作的事情 
})

//jquery的方式(簡寫)*****
$(function () {
  //文檔加在完畢以後能作的事情        
  })

//示例
$(function () {
     $('button').click(function () {
          alert('不準點')
     })
})

//jquery中等待全部的資源包括視頻 音頻都加載完才執行function中的代碼,可使用屢次
$(window).ready(
      function () {
           alert('123')
})

    ​

each

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.js"></script>
</head>
<body>
    <ul>
        <li>選項一</li>
        <li>選項二</li>
        <li>選項三</li>
    </ul>
</body>
<script>
    $('li').each(
        function (ind,dom) {   //主動傳ind是每項的索引,dom是每一項的標籤對象
            console.log(ind,dom)
        })
</script>
</html>

​

練習

1.form表單的驗證提示信息用focus和blur事件完成

2.表格操做 使用事件委託

3.小米購物車

4.模態對話框

​

bootstrap

  • bootstrap框架：

    • bootstrap框架提供樣式和組件，能夠快速搭建網站頁面的開源項目，並且支持自適應

      ​

  • bootstrap組件樣式地址：

    • https://v3.bootcss.com/components/

      ​

  • 矢量圖地址：

    • http://www.fontawesome.com.cn/examples/

    • https://www.iconfont.cn/search/index

      ​

  • js的代碼 :

    • 選項卡 輪播圖

      ​

bootstrap框架示例：

  • 導入bootstrap：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css"> 
</head>

    ​

全局CSS樣式：

柵格系統：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <style>
        .col-md-1,.col-md-8,.col-md-4,.col-md-6{
            border: solid 1px;}
    </style>
</head>
<body>
    <div class="row">
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
    </div>
    <div class="row">
      <div class="col-md-8">.col-md-8</div>
      <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
      <!--<div class="col-md-4">.col-md-4</div>-->
      <div class="col-md-4 col-md-offset-4">.col-md-4</div>   #列偏移
      <!--<div class="col-md-4">.col-md-4</div>-->
    </div>
    <div class="row">
      <div class="col-md-6">.col-md-6</div>
      <div class="col-md-6">.col-md-6</div>
    </div>
</body>
</html>

​

嵌套列：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <style>
        .col-sm-9,.col-sm-6{
            border: solid 1px;}
    </style>
</head>
<body>
    <div class="row">
      <div class="col-sm-9">
        Level 1: .col-sm-9
        <div class="row">
          <div class="col-xs-8 col-sm-6">
            Level 2: .col-xs-8 .col-sm-6
          </div>
          <div class="col-xs-4 col-sm-6">
            Level 2: .col-xs-4 .col-sm-6
          </div>
        </div>
      </div>
    </div>
</body>
</html>

​

表格:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <style>
        .col-md-9,.col-md-3{
            border: solid 1px;}
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <table class="table table-bordered table-hover">
                    <tr class="success">
                        <td>第一列</td>
                        <td>第二列</td>
                        <td>第三列</td>
                    </tr>
                    <tr>
                        <td>第二.一列</td>
                        <td>第二.二列</td>
                        <td>第二.三列</td>
                    </tr>
                    <tr  class="danger">
                        <td>第三.一列</td>
                        <td>第三.二列</td>
                        <td>第三.三列</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

​

表單：

#表單這裏還有單選框多選框和禁用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <style>
        .col-md-9,.col-md-3{
            border: solid 1px;}
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6">
            <form>

              <div class="form-group has-success has-feedback">
                <label for="exampleInputEmail1">Email address</label>
                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
              </div>
              <div class="form-group">
                <label for="exampleInputPassword1">Password</label>
                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
              </div>
              <div class="form-group">
                <label for="exampleInputFile">File input</label>
                <input type="file" id="exampleInputFile">
                <p class="help-block">Example block-level help text here.</p>
              </div>
              <div class="checkbox">
                <label>
                  <input type="checkbox"> Check me out
                </label>
              </div>
              <button type="submit" class="btn btn-default">Submit</button>
            </form>
            </div>
        </div>
    </div>
</body>
</html>

​

按鈕框刪除：

 

 

選項卡：
 

# 每點擊一個按鈕就是一個頁面
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">

</head>

<body>
    <div>
      <!-- Nav tabs -->
      <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
        <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
        <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
      </ul>

      <!-- Tab panes -->
      <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home">111</div>
        <div role="tabpanel" class="tab-pane" id="profile">222</div>
        <div role="tabpanel" class="tab-pane" id="messages">333</div>
        <div role="tabpanel" class="tab-pane" id="settings">444</div>
      </div>
    </div>

    <script>
        $('#myTabs a').click(function (e) {
              e.preventDefault()
              $(this).tab('show')
            })
    </script>
</body>
</html>
 

​
 

可消失的彈出提示框：
 

#鼠標懸浮在框上，彈出提示框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">

</head>

<body>
  <div style="padding:100px">

    <a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="hover" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">可消失的彈出框</a>
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left" data-trigger="click">Tooltip on left</button>
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

  </div>
    <script>
            $(function () {
            $('[data-toggle="tooltip"]').tooltip()
        })
          $(function () {
          $('[data-toggle="popover"]').popover()
        })
    </script>
</body>
</html>
 

​
 

輪播圖：
 

# 輪播圖，輪流播放圖片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
</head>

<body>

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/447da720833aa8f7c5ea7980464cac3d.jpg?thumb=1&w=1226&h=460&f=webp&q=90" alt="...">
      <div class="carousel-caption">
        ....
      </div>
    </div>
    <div class="item">
      <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0bf2f06a3b16b37c83a5991838e3e4c7.jpg?thumb=1&w=1226&h=460&f=webp&q=90" alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/64070c0d2b1e6b69316c7b9fc9d3ec50.jpg?thumb=1&w=1226&h=460&f=webp&q=90" alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

</body>
</html>
 

組件
 

bootstrap矢量圖示例：
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <style>
        span{
            font-size: 50px;}   #設置矢量圖大小，矢量圖也是數字不會失真
    </style>
</head>

<body>
<span class="glyphicon glyphicon-flash" aria-hidden="true"></span>  #選擇矢量圖樣式
</body>
</html>
 

​
 

下拉菜單：
 

#給按鈕添加多個擴展功能
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
</head>

<body>
    <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        Dropdown
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>
</body>
</html>
 

​
 

按鈕/分裂時按鈕下拉菜單：
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <style>
    </style>
</head>

<body>
    <div class="btn-group btn-group-sm" role="group" aria-label="...">
      <button type="button" class="btn btn-default">Left</button>
      <button type="button" class="btn btn-default">Middle</button>
      <button type="button" class="btn btn-default">Right</button>
    </div>
        <script>
    </script>
</body>
</html>
 

輸入框組：
 

# 輸入框能夠用在網頁登陸輸入帳號密碼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <style>
        .dada{
            width: 300px;
            height: 300px;
        }
    </style>
</head>
                
<body>
<div class="dada">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="輸入帳號" aria-describedby="basic-addon2">
      <span class="input-group-addon" id="basic-addon2">輸入帳號</span>
    </div>
    <div class="input-group">
      <input type="text" class="form-control" placeholder="輸入密碼" aria-describedby="basic-addon2">
      <span class="input-group-addon" id="basic-addon3">輸入密碼</span>
    </div>
</div>
</body>
</html>
 

標籤：
 

#可變的字體
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
 

徽章：
 

#隱藏顯示未讀的消息
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">

</head>
<body>
<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>
</body>
</html>
 

巨幕：
 

# 將數字放大展現在頁面上
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">

</head>
<body>
    <div class="jumbotron">
      <h1>俊麗</h1>
      <p>...</p>
      <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
            </div>
</body>
</html>
 

頁頭：
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">

</head>
<body>
    <div class="page-header">
      <h1> 俊麗 <small>海洋</small></h1>
    </div>
</body>
</html>
 

縮略圖：
 

# 縮略圖加圖片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">

</head>
<body>
    <div class="row">
      <div class="col-sm-6 col-md-4">
        <div class="thumbnail">
          <img src="111.jpg" alt="圖">
          <div class="caption">
            <h3>Thumbnail label</h3>
            <p>嘟嘟嘟</p>
            <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
          </div>
        </div>
      </div>
    </div>
</body>
</html>
 

警告框：
 

# 可關閉的警告框，警告框內還能夠添加連接
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">

</head>
<body>
    <div class="alert alert-warning alert-dismissible" role="alert">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <strong>Warning!</strong> Better check yourself, you're not looking too good.
    </div>
</body>
</html>
 

帶動畫的進度條
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">

</head>
<body>
    <div class="progress">
      <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
        <span class="sr-only">45% Complete</span>
      </div>
    </div>
</body>
</html>


        

            

        	





    

		

            
相關文章

            

                

                

                    

                

            


            
相關標籤/搜索

            
        


    

        

            

        

        

        
        

        

        

    




	

    





    

    	

    

        每日一句
    

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







    

    


    



    

        本站公眾號
    

    

           歡迎關注本站公眾號,獲取更多信息

        
    




    

    




	


	







    

        聯繫我們
        最近搜索
        最新文章
        
        沪ICP备13005482号-10

            MyBatis教程
            SQL 教程
            MySQL教程
            Java 教程
            Thymeleaf 教程
            Hibernate教程
            Spring教程 
            Redis教程