2. 程式人生 > 其它 >深入精通JavaScript外掛

深入精通JavaScript外掛

阿新 • • 發佈：2021-08-10

匯入的連結

<link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
    <script src="jquery-3.3.1.slim.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script>
    <script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script>

1 摺疊

1.1 定義摺疊

摺疊的結構看起來很複雜，但呼叫起來是很簡單的。具體分為以下2個步驟：
（1）定義摺疊的觸發器，使用<a>或者<button>標籤。在觸發器中新增觸發屬性data-toggle="collapse"，並在觸發器中使用id或class來指定觸發的內容。如果使用的是<a>標籤，可以讓href屬性值等於id或class值；如果是<button>標籤，在<button>中新增data-target屬性，屬性值為id或class值。
（2）定義摺疊包含框，摺疊內容包含在摺疊框中。然後在包含框中設定id或class值，該值等於觸發器中對應的id或class值。最後還需要在摺疊包含框中新增下面三個類中的一個類：
 .collapse：隱藏摺疊內容。
 .collapsing：隱藏摺疊內容，切換時帶動態效果。
 .collapse.show：顯示摺疊內容。

<h2 class="mb-4">定義摺疊</h2>
<p>
    <!--用herf屬性來定位他們的id-->
    <a class="btn btn-primary" data-toggle="collapse" href="#collapse">&lt; a &gt;觸發摺疊</a>
    <button class="btn btn-danger" type="button" data-toggle="collapse" data-target="#collapse1">&lt; button &gt;觸發摺疊</button>
</p>

<div class="collapsing" id="collapse">
    <div class="card card-body">
        這是&lt; a &gt;觸發的摺疊內容
    </div>
</div>
<div class="collapse" id="collapse1">
    <div class="card card-body">
        這是&lt; button &gt;觸發的摺疊內容
    </div>
</div>

1.2 控制多目標

在觸發器上，可以通過選擇器來顯示和隱藏多個摺疊包含框（一般使用class值），也可以多個觸發器來控制顯示或隱藏一個摺疊包含框。

<h3 class="mb-4">一個觸發器切換多個目標</h3>
<p>
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse">切換下面2個目標</button>
</p>
<div class="collapse multi-collapse">
    <div class="card card-body"> <!--card-body也是框架自帶的屬性-->
        摺疊內容一
    </div>
</div>
<div class="collapse multi-collapse">
    <div class="card card-body">
        摺疊內容二
    </div>
</div>
<hr class="my-4">
<h3 class="mb-4">多個觸發器切換一個目標</h3>
<p>
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multi-collapse">觸發器1</button>
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multi-collapse">觸發器2</button>
</p>
<div class="collapse" id="multi-collapse">
    <div class="card card-body">
        多個觸發器觸發的內容
    </div>
</div>

1.3 設計手風琴

本節使用摺疊元件並結合卡片元件來實現手風琴案例。

<h4 class="">個人簡歷</h4>
<div id="Example">
    <div class="card">
        <div class="card-header">
            <!--data-toggle="collapse"前3個例子主要是應用data-toggle="collapse"-->
            <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#one">教育經歷</button>
                    <!-- .btn-link是框架提供的一個class btn-link{font-weight:400;color:#007bff;}-->
        </div>
        <div id="one" class="collapse show" data-parent="#Example">
            <div class="card-body">
                畢業於加利福尼亞大學，學習的專業為電腦科學與技術。
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header">
            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#two">工作經驗</button>
        </div>
        <div id="two" class="collapse" data-parent="#Example">
            <div class="card-body">
                做過一年的軟體開發
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header">
            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#three">興趣愛好</button>
        </div>
        <!--data-parent="#Example"確保在某個時間內只能顯示一個子專案-->
        <div id="three" class="collapse" data-parent="#Example">
            <div class="card-body">
                籃球，足球，街舞，表演
            </div>
        </div>
    </div>
</div>

1.4 呼叫摺疊

呼叫摺疊元件的方法有兩種。
1.通過Data屬性
2. JavaScript呼叫
除了使用data屬性呼叫外，還可以使用JavaScript指令碼形式進行呼叫，呼叫方法如下：
$('.collapse').collapse()

配置引數 型別 預設值 說明
parent 選擇器 false 所有新增該屬性的摺疊項，在其中某一項顯示時，其餘的將自動關閉。
toggle 布林值 true 是否切換摺疊呼叫。

1.5 新增使用者行為

Bootstrap4中為摺疊外掛提供了4個事件，通過它們，可以監聽使用者的動作和摺疊元件的狀態。說明如下：
 show.bs.collapse：當觸發開啟動作時立即觸發此事件。
 shown.bs.collapse：當摺疊元素對使用者完全可見時觸發此事件。
 hide.bs.collapse：當用戶觸發摺疊動作時立即觸發此事件。
 hidden.bs.collapse：當摺疊元素完全摺疊後觸發此事件。

<body class="container">
<h3 class="mb-4">摺疊事件</h3>
<div class="accordion" id="accordionExample"><!--"accordion" id="accordionExample"這兩個屬性在這沒什麼作用-->
    <div class="card">
        <div class="card-header">
            <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#one">摺疊</button>
        </div>
        <div id="one" class="collapse">
            <div class="card-body">
                摺疊的內容
            </div>
        </div>
    </div>
</div>
</body>
<script>
    //js指令碼呼叫  $('.collapse').collapse()包含一個配置物件，該物件包含2個配置引數
    $(function(){
        $('.collapse').on("shown.bs.collapse",function(){
            $("body").css("background","#36ee23");
            $('[data-toggle="collapse"]').html("摺疊內容顯示完成")
        })
        $('.collapse').on("hidden.bs.collapse",function(){
            $("body").css("background","#fdff62");
            $('[data-toggle="collapse"]').html("摺疊內容隱藏完成")
        })
    })
</script>

2 工具提示

2.1 定義工具提示

使用data-placement=""屬性設定工具提示的顯示方向，可選值有四個：left、right、top和bottom，分別表示向左、向右、向上和向下。
在工具提示中，title屬性中可以新增一些修飾的標籤，例如在下面程式碼中，在title提示內容中新增<em>、<b>、<u>等標籤。

2.2 工具提示方向

<button type="button" class="btn btn-lg btn-danger ml-5" data-toggle="tooltip" data-placement="left" data-trigger="click" title="工具提示">向左</button>
<button type="button" class="btn btn-lg btn-danger ml-5" data-toggle="tooltip" data-placement="right" data-trigger="click" title="工具提示">向右</button>
<div class="mt-5 mb-5"><hr></div>
<button type="button" class="btn btn-lg btn-danger ml-5 " data-toggle="tooltip" data-placement="top" data-trigger="click" title="工具提示">向上</button>
<button type="button" class="btn btn-lg btn-danger ml-5" data-toggle="tooltip" data-placement="bottom" data-trigger="click" title="工具提示">向下</button>
</body>
<script>
    $(function () {
        //使用data-toggle屬性觸發工具提示
        $('[data-toggle="tooltip"]').tooltip();
    })
</script>

2.3 呼叫工具提示

使用JavaScript指令碼觸發工具提示：
$('#example').tooltip(options);
$('#example')表示匹配的頁面元素，options是一個引數物件，可以設定工具提示的相關配置引數，說明如表所示：

名稱 型別 預設值 說明
animation boolean true 提示工具是否應用CSS淡入淡出過渡特效
container string element false
delay number object 0
delay:{show:1000,hide:500}
html boolean false 是否插入HTML字串。如果為true，工具提示標題中的HTML標記將在工具提示中呈現；如果設定為false，則使用jQuery的text()方法插入內容，就不用擔心XSS攻擊。
placement string function top
selector string false 設定一個選擇器字串，則具體提示針對選擇器匹配的目標進行顯示。
title string element function
trigger string click 設定工具提示的觸發方式，包括單擊（click）、滑鼠經過（hover）、獲取焦點（focus）或者手動（manual）。可以指定多種方式，多種方式之間通過空格進行分割。
offset number string 0 
body class="container">
<h3 class="mb-4">呼叫工具提示</h3><!--工具提示和彈窗呼叫的是同一個例子-->
<button type="button" class="btn btn-lg btn-danger ml-5" data-toggle="tooltip">工具提示</button>
<script>
    $(function () {//該函式的作用是延遲1秒顯示；在推遲1秒隱藏
        $('[data-toggle="tooltip"]').tooltip({
            animation:true,                    //應用CSS淡入淡出過渡特效
            html:true,                        //支援HTML字串
            offset:"200px",                    //設定偏移位置
            title:"<img src='image/008.png' width='300' class='img-fluid'>",  //提示內容
            placement:"right",                  //顯示位置
            trigger:"click",                     //滑鼠單擊時觸發
            delay:{show:1000,hide:1000}           //顯示和延遲的時間
        });
    })
</script>
</body>

2.4 新增使用者行為

Bootstrap4為工具提示外掛提供了5個事件，說明如表所示。

事件型別 描述
show.bs.tooltip 當呼叫show方法時，此事件立即觸發
shown.bs.tooltip 當工具提示對使用者可見時觸發此事件
hide.bs.tooltip 當呼叫hide方法時，將立即觸發此事件
hidden.bs.tooltip 當工具提示對使用者隱藏完成時，將觸發此事件
inserted.bs.tooltip 這個事件在show.bs.tooltip事件結束後被觸發。 
<h2 class="mb-5">工具提示事件</h2>
<button type="button" class="btn btn-info ml-5" data-toggle="myTooltip" id="myTooltip">工具提示</button>
<script>
    $(function () {
        $('#myTooltip').tooltip({
            title:"工具提示",     //提示內容
            trigger:"click",      //滑鼠單擊時觸發
        });
        $('#myTooltip').on('show.bs.tooltip', function () {
            alert("show.bs.tooltip");
            $(this).removeClass("btn-info").addClass("btn-primary");
        })
        $('#myTooltip').on('inserted.bs.tooltip', function () {
            alert("inserted.bs.tooltip");
            $(this).removeClass("btn-primary").addClass("btn-danger");
        })
        $('#myTooltip').on('shown.bs.tooltip', function () {
            alert("shown.bs.tooltip");
            $(this).removeClass("btn-danger").addClass("btn-info");
        })
        $('#myTooltip').on('hide.bs.tooltip', function () {
            alert("hide.bs.tooltip");
            $(this).removeClass("btn-info").addClass("btn-success");
        })
        $('#myTooltip').on('hidden.bs.tooltip', function () {
            alert("hidden.bs.tooltip");
            $(this).removeClass("btn-success").addClass("btn-info");
        })
    })
</script>

3 彈窗

3.1 定義彈窗

使用data-toggle="popover"屬性對元素新增彈窗，使用title屬性設定彈窗的標題內容，使用data-content屬性設定彈窗的內容。
出於效能原因的考慮，bootstrap沒有支援彈窗外掛通過data屬性啟用，因此必須手動通過JavaScript指令碼方式呼叫。呼叫方法是通過popover()建構函式來實現的：
使用data-toggle屬性初始化彈窗：

<script>
    $(function () {
         $('[data-toggle="popover"]').popover()
    })
</script>
使用選擇器初始化彈窗，例如id或者class：
$(function () {
  $('class或id').popover()
})

3.2 彈窗方向

與工具提示預設的顯示位置不同，彈窗預設顯示位置在目標物件的右側。通過data-placement屬性可以設定提示資訊的顯示位置，取值包括top、right、bottom和left。

<body class="container">
<h3 class="mb-5">彈窗方向</h3>
    <button type="button" class="btn btn-lg btn-danger ml-5" data-toggle="popover" data-placement="left" title="彈窗標題" data-content="彈窗內容">向左</button>
    <button type="button" class="btn btn-lg btn-danger ml-5" data-toggle="popover" data-placement="right" title="彈窗標題" data-content="彈窗內容">向右</button>
    <div class="mt-5 mb-5"><hr></div>
    <button type="button" class="btn btn-lg btn-danger ml-5 " data-toggle="popover" data-placement="top" title="彈窗標題" data-content="彈窗內容">向上</button>
    <button type="button" class="btn btn-lg btn-danger ml-5" data-toggle="popover" data-placement="bottom" title="彈窗標題" data-content="彈窗內容">向下</button>

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

3.3 呼叫彈窗

使用JavaScript指令碼觸發彈窗：
$('#example').popover(options)
$(‘#example’)表示匹配的頁面元素，options是一個引數物件，可以配置彈窗的相關引數。
可以通過data屬性或JavaScript傳遞引數。對於data屬性，將引數名附著到data-後面即可，例如data-container=""。也可以針對單個工具提示指定單獨的data屬性。

<h3 class="mb-4">呼叫彈窗</h3>
<button type="button" class="btn btn-lg btn-danger ml-5" data-toggle="popover">彈窗</button>
<script>
    $(function () {
        $('[data-toggle="popover"]').popover({
            animation:true,                                 //應用CSS淡入淡出過渡特效
            html:true,                                     //支援HTML字串
            offset:"200px",                                 //設定偏移位置
            title:"展翅飛翔的鷹",                           //顯示標題
            content:"<img src='image/008.png' class='img-fluid'>",     //顯示內容
            trigger:"click",                                 //滑鼠單擊時觸發
            delay:{show:1000,hide:1000}                      //顯示和延遲的時間
        });
    })
</script>
</body>

3.4 新增使用者行為

Bootstrap4為彈窗外掛提供了5個事件，具體說明如表所示。

事件型別 描述
show.bs.popover 當呼叫show方法時，此事件立即觸發。
shown.bs.popover 當彈窗對使用者可見時觸發此事件。
hide.bs.popover 當呼叫hide方法時，將立即觸發此事件。
hidden.bs.popover 當彈窗對使用者隱藏完成時，將觸發此事件。
inserted.bs.popover 這個事件在show.bs.popover事件結束後被觸發。 
<h2 class="mb-5">彈窗事件</h2>
<button type="button" class="btn btn-info ml-5" data-toggle="popover" id="myPopover">彈窗</button>
<script>
    $(function () {
        /*
        繫結5個監聽事件，然後啟用工具提示互動行為；彈出框，然後再重置按鈕的顏色
        
        */
        $('#myPopover').popover({
            title:"彈窗標題",     //彈窗標題
            content:"彈窗內容",   //顯示內容
            trigger:"click",      //滑鼠單擊時觸發
        });
        $('#myPopover').on('show.bs.popover', function () {
            $(this).removeClass("btn-info").addClass("btn-primary");
            alert("show.bs.popover");
        })
        $('#myPopover').on('inserted.bs.popover', function () {
            $(this).removeClass("btn-primary").addClass("btn-danger");
            alert("inserted.bs.popover");
        })
        $('#myPopover').on('shown.bs.popover', function () {
            $(this).removeClass("btn-danger").addClass("btn-info");
            alert("shown.bs.popover");
        })
        $('#myPopover').on('hide.bs.popover', function () {
            $(this).removeClass("btn-info").addClass("btn-success");
            alert("hide.bs.popover");
        })
        $('#myPopover').on('hidden.bs.popover', function () {
            $(this).removeClass("btn-success").addClass("btn-info");
            alert("hidden.bs.popover");
        })
    })
</script>

4 輪播（重點，未掌握）

4.1. 定義輪播

輪播是一個幻燈片效果，內容迴圈播放，使用CSS 3D變形轉換和JavaScript構建。它適用於一系列影象、文字或自定義標記，還包括對上一個、下一個圖的瀏覽控制和指令支援。
bootstrap輪播外掛有3個部分構成：標識圖示、幻燈片和控制按鈕。
提示：bootstrap輪播，可以根據自己的需要去掉一些“東西”，例如圖示指示、控制按鈕和圖片說明等，以達到相應的效果。

<div id="Carousel" class="carousel slide" data-ride="carousel">
    <!--slide用來設定切換圖片的過渡和動畫效果-->
    <!--標識圖示-->
    <ol class="carousel-indicators">
        <li data-target="#Carousel" data-slide-to="0" class="active"></li>
        <li data-target="#Carousel" data-slide-to="1"></li>
        <li data-target="#Carousel" data-slide-to="2"></li>
    </ol>
    <!--幻燈片-->
    <div class="carousel-inner">
        <div class="carousel-item "><!--將active類新增到其中一個幻燈片中，非則輪播不可見-->
            <img src="image/002.png" class="d-block w-100" alt="">
            <!--修正瀏覽器預設的影象對齊帶來的影響-->
            <div class="carousel-caption"><!--carousel-caption圖片說明框-->
                <h5>圖片一</h5>
                <p>說明文字</p>
            </div>
        </div>
        <div class="carousel-item active"><!--active展示的是輪播的首頁-->
            <img src="image/003.png" class="d-block w-100" alt="">
            <div class="carousel-caption">
                <h5>圖片二</h5>
                <p>說明文字</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="image/004.png" class="d-block w-100" alt="">
            <div class="carousel-caption">
                <h5>圖片三</h5>
                <p>說明文字</p>
            </div>
        </div>
    </div>
    <!--控制按鈕-->
    <a class="carousel-control-prev" href="#Carousel" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#Carousel" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>

4.2. 設計輪播風格

前面介紹可以新增slide類來實現圖片切換的動畫，本節來介紹一下圖片的交叉淡入淡出以及圖片自動迴圈間隔時間。
1.交叉淡入淡出
2.設定自動迴圈間隔時間

<!--carousel-fade交叉淡入淡出類-->
<div id="Carousel" class="carousel slide carousel-fade">
    <!--標識圖示-->
    <ol class="carousel-indicators">
        <li data-target="#Carousel" data-slide-to="0" class="active"></li>
        <li data-target="#Carousel" data-slide-to="1"></li>
        <li data-target="#Carousel" data-slide-to="2"></li>
    </ol>
    <!--幻燈片-->
    <div class="carousel-inner">
        <div class="carousel-item active" data-interval="1000">
            <!--data-interval="1000"設定自動迴圈間隔時間-->
            <img src="image/002.png" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item" data-interval="2000">
            <img src="image/003.png" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item" data-interval="3000">
            <img src="image/004.png" class="d-block w-100" alt="">
        </div>
    </div>
    <!--控制按鈕-->
    <a class="carousel-control-prev" href="#Carousel" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#Carousel" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>
</body>

<script>
    $(function(){
        $('.carousel').carousel({
            interval:3000,
            keyboard:true
        });
    })
</script>

4.3. 呼叫輪播

呼叫輪播外掛的方法有兩種，具體說明如下。
1.通過data屬性
2.使用JavaScript呼叫
在指令碼中使用carousel()方法呼叫輪播：
$('.carousel').carousel()

4.4. 新增使用者行為

<div id="indicators" class="carousel slide" data-ride="carousel">
    <!--data-ride="carousel"屬性用於定義輪播在頁面載入時就開始動畫播放-->
    <ol class="carousel-indicators">
        <li data-target="#indicators" data-slide-to="0" class="active"></li>
        <li data-target="#indicators" data-slide-to="1"></li>
        <li data-target="#indicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="image/01.png" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item">
            <img src="image/02.png" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item">
            <img src="image/03.png" class="d-block w-100" alt="">
        </div>
    </div>
    <a class="carousel-control-prev" href="#indicators" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#indicators" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>

</body>
<script>
    $(function(){
        $('.carousel').on("slide.bs.carousel",function(e){
            e.target.style.border="solid 10px #FF1493"
        })
        $('.carousel').on("slid.bs.carousel",function(e){
            e.target.style.border="solid 10px #9C9C9C"
        })
    })
</script>

5 滾動監聽

5.1 定義滾動監聽

Bootstrap4支援HTML和JavaScript兩種方法呼叫滾動監聽外掛。
1.通過data屬性
2.通過JavaScript指令碼
待補

列表組實列

 <style>
        .Scrollspy{
            width: 500px;      /*定義寬度*/
            height: 500px;     /*定義高度*/
            overflow: scroll;   /*定義當內容溢位元素框時，瀏覽器顯示滾動條以便檢視其餘的內容*/
        }
    </style>
</head>
<body>
<h3 class="mb-4">列表組示例</h3>
<div class="row">
    <div class="col-3">
        <div id="list" class="list-group">
            <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
            <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
            <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
            <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
            <a class="list-group-item list-group-item-action" href="#list-item-5">Item 5</a>
        </div>
    </div>
    <div class="col-9">
        <div class="Scrollspy">
            <h4 id="list-item-1">Item 1</h4>
            <p><img src="image/001.jpg" alt="" class="img-fluid"></p>
            <h4 id="list-item-2">Item 2</h4>
            <p><img src="image/002.jpg" alt="" class="img-fluid"></p>
            <h4 id="list-item-3">Item 3</h4>
            <p><img src="image/003.jpg" alt="" class="img-fluid"></p>
            <h4 id="list-item-4">Item 4</h4>
            <p><img src="image/004.jpg" alt="" class="img-fluid"></p>
            <h4 id="list-item-5">Item 5</h4>
            <p><img src="image/005.jpg" alt="" class="img-fluid"></p>
        </div>
    </div>
</div>
</body>
<script>
    $(function(){
        $('.Scrollspy').scrollspy({
            offset:200
        })
    })
</script>

5.2 呼叫滾動監聽

Bootstrap4支援HTML和JavaScript兩種方法呼叫滾動監聽外掛。
1.通過data屬性
2.通過JavaScript指令碼
待補

5.3 新增使用者行為

滾動監聽外掛定義了一個事件：activate.bs.scrollspy。每當新專案被滾動啟用時，該事件就會在滾動元素上觸發。下面利用activate事件跟蹤當前選單項，當新專案被滾動啟用時，標籤的背景色變為黃色。

<style>
    .Scrollspy{
        width: 500px;      /*定義寬度*/
        height: 400px;     /*定義高度*/
        overflow: scroll;   /*定義當內容溢位元素框時，瀏覽器顯示滾動條以便檢視其餘的內容*/
    }
</style>
<body class="container">
<nav id="navbar" class="navbar navbar-light bg-light">
    <ul class="nav nav-pills">
        <li class="nav-item">
            <a class="nav-link" href="#list1">列表1</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#list2">列表2</a>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">下拉選單</a>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#menu1">選單1</a>
                <a class="dropdown-item" href="#menu2">選單2</a>
                <a class="dropdown-item" href="#menu3">選單3</a>
            </div>
        </li>
    </ul>
</nav>
<div data-spy="scroll" data-target="#navbar" data-offset="80" class="Scrollspy">
    <h4 id="list1">列表1</h4>
    <p><img src="image/002.png" alt="" class="img-fluid"></p>
    <h4 id="list2">列表2</h4>
    <p><img src="image/004.png" alt="" class="img-fluid"></p>
    <h4 id="menu1">選單1</h4>
    <p><img src="image/003.png" alt="" class="img-fluid"></p>
    <h4 id="menu2">選單2</h4>
    <p><img src="image/008.png" alt="" class="img-fluid"></p>
    <h4 id="menu3">選單3</h4>
    <p><img src="image/003.png" alt="" class="img-fluid"></p>
</div>
</body>
<script>
    $(function(){
        $("body").on("activate.bs.scrollspy",function(e){
            $("body").css("background","yellow")
        })
    })
</script>

6 實戰實訓1——設計摺疊搜尋框

待補

7 實戰實訓2——仿小米內容展示

待補

努力拼搏吧，不要害怕，不要去規劃，不要迷茫。但你一定要在路上一直的走下去，儘管可能停滯不前，但也要走。

相關推薦

深入精通JavaScript外掛

匯入的連結 <link rel=\"stylesheet\" href=\"bootstrap-4.2.1-dist/css/bootstrap.css\"> <link rel=\"stylesheet\" href=\"font-awesome-4.7.0/css/font-awesome.css\">

深入淺析JavaScript中的in關鍵字和for-in迴圈

1.in關鍵字 屬性名 in 物件，用來判斷某個屬性在物件中是否存在與其嚴格相等的屬性名，返回boolean值

深入分析JavaScript 事件迴圈(Event Loop)

事件迴圈（Event Loop），是每個JS開發者都會接觸到的概念，但是剛接觸時可能會存在各種疑惑。

深入學習JavaScript資料型別

資料型別是我們學習JavaScript時最先接觸的東西，它是JavaScript中最基礎的知識，這些知識看似簡單，但實則有著許多初學者甚至是部分學習了多年JavaScript的老手所不瞭解的知識。

深入瞭解JavaScript詞法作用域

JavaScript並不是傳統的塊級作用域，而是函式作用域！ 一、作用域 JavaScript引擎在程式碼執行前會對其進行編譯，在這個過程中，像var a = 2 這樣的宣告會被分解成兩個獨立的步驟：

深入理解JavaScript的執行機制（同步和非同步）

同步的任務沒有優先順序之分，非同步執行有優先順序，先執行微任務（microtask佇列），再執行巨集任務（macrotask佇列），同級別按順序執行

深入理解JavaScript中的淺拷貝和深拷貝

淺拷貝和深拷貝 一、資料型別 我們都知道JavaScript資料型別分為基本資料型別（String、Number、Boolean、Null、Undefined、Symbol，未來還會有BigInt）和引用資料型別（Object），當然Object還包括Date、function、

構建一個JavaScript外掛系統

本文譯自 https://css-tricks.com/designing-a-javascript-plugin-system/ 外掛是庫和框架的常見功能，並且有一個很好的使用它的理由：它們允許開發人員以安全，可擴充套件的方式新增功能。這就使核心專案更具價值

“+”號運算子的深入理解(javascript)

這個符號相信我們大家都不陌生，但是在面試中很容易遇到這個符號的各種騷操作問題，接下來我們就來深入理解分析下這個運算子是怎麼考倒我們的。

深入理解JavaScript之 new 原理及模擬實現

1.定義 new 運算子建立一個使用者定義的物件型別的例項或具有建構函式的內建物件的例項

深入理解JavaScript作用域和作用域鏈

1.什麼是作用域 作用域是在執行時程式碼中的某些特定部分中變數，函式和物件的可訪問性。換句話說，作用域決定了程式碼區塊中變數和其他資源的可見性。可能這兩句話並不好理解，我們先來看個例子：

淺析如何設計一個JavaScript外掛系統

　　外掛是庫和框架的常見功能，並且有一個很好的理由：它們允許開發人員以安全，可擴充套件的方式新增功能。這使核心專案更具價值，並建立了一個社群——所有這些都不會增加額外的維護負擔。那麼如何去構建一個外掛

建立與框架無關的JavaScript外掛

JavaScript 中的外掛使我們能夠擴充套件語言，以實現所需的某些強大（或不夠強大）的功能。外掛/庫本質上是打包的程式碼，可以使我們免於一遍又一遍地編寫相同的東西（功能）。

深入理解 JavaScript 執行上下文和執行棧

前言 如果你是一名 JavaScript 開發者，或者想要成為一名 JavaScript 開發者，那麼你必須知道 JavaScript 程式內部的執行機制。執行上下文和執行棧是 JavaScript 中關鍵概念之一，是 JavaScript 難點之一。 理解執行

深入理解javascript中的this

深入理解Js中的this JavaScript作用域為靜態作用域static scope，但是在Js中的this卻是一個例外，this的指向問題就類似於動態作用域，其並不關心函式和作用域是如何宣告以及在何處宣告的，只關心它們從何處呼叫，thi

深入理解JavaScript中的語法和程式碼結構

概述 所有程式設計語言都必須遵守特定的規則才能執行。 確定程式語言的正確結構的這組規則稱為語法。 許多程式語言主要由具有語法變化的類似概念組成。

10款每個Web 開發人員都應該知道的JavaScript 外掛

本文轉發來自：https://blog.csdn.net/KH_FC/article/details/118960830 那些從事 Web 開發工作的人肯定會注意到 JavaScript 的多功能性。與 ASP 或 PHP 不同，這種客戶端程式語言為開發人員提供了多種可應用於專案

快速認識Javascript外掛

11.1.1外掛分類 Bootstrap4內建了許多外掛，這些外掛在Web應用開發中應用頻率比較高，下面列出bootstrap外掛支援的檔案以及各種外掛對應的js檔案：

閉包原來並沒有那麼難！一文帶你深入理解JavaScript的閉包

對於那些有一點 JavaScript 使用經驗但從未真正理解閉包概念的人來說，理解閉包可以看作是某種意義上的重生，但是需要付出非常多的努力和犧牲才能理解這個概念。

深入理解JavaScript的事件執行機制

目錄前言瀏覽器非同步執行的原理瀏覽器中的事件迴圈執行棧與任務佇列巨集任務和微任務Async/await的執行順序特點示例個人分析前言