day03 - jQuery
學習目標：
能夠說出4種常見的註冊事件
能夠說出 on 綁定事件的優勢
能夠說出 jQuery 事件委派的優點以及方式
能夠說出綁定事件與解綁事件
能夠說出 jQuery 對象的拷貝方法
能夠說出 jQuery 多庫共存的2種方法
能夠使用 jQuery 插件
1.1. jQuery 事件註冊
jQuery 爲我們提供了方便的事件註冊機制，是開發人員抑鬱操作優缺點如下：
- 優點: 操作簡單，且不用擔心事件覆蓋等問題。
- 缺點: 普通的事件註冊不能做事件委託，且無法實現事件解綁，需要藉助其他方法。
語法
演示代碼
<body>
<div></div>
<script>
$(function() {
// 1. 單個事件註冊
$("div").click(function() {
$(this).css("background", "purple");
});
$("div").mouseenter(function() {
$(this).css("background", "skyblue");
});
})
</script>
</body>
1.2. jQuery 事件處理
因爲普通註冊事件方法的不足，jQuery又開發了多個處理方法，重點講解如下：
- on(): 用於事件綁定，目前最好用的事件綁定方法
- off(): 事件解綁
- trigger() / triggerHandler(): 事件觸發
1.2.1 事件處理 on() 綁定事件
因爲普通註冊事件方法的不足，jQuery又創建了多個新的事件綁定方法bind() / live() / delegate() / on()等，其中最好用的是: on()
語法
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-m8MphJuy-1592183621336)(images/on1.png)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20200615091555132.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgyNzQxOA==,size_16,color_FFFFFF,t_70)
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-l6eivlYN-1592183621338)(images/on2.png)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20200615091604180.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgyNzQxOA==,size_16,color_FFFFFF,t_70)
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-r1T68tEN-1592183621340)(images/on3.png)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20200615091612355.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgyNzQxOA==,size_16,color_FFFFFF,t_70)
演示代碼
<body>
<div></div>
<ul>
<li>我們都是好孩子</li>
<li>我們都是好孩子</li>
<li>我們都是好孩子</li>
</ul>
<ol></ol>
<script>
$(function() {
// (1) on可以綁定1個或者多個事件處理程序
// $("div").on({
// mouseenter: function() {
// $(this).css("background", "skyblue");
// },
// click: function() {
// $(this).css("background", "purple");
// }
// });
$("div").on("mouseenter mouseleave", function() {
$(this).toggleClass("current");
});
// (2) on可以實現事件委託（委派）
// click 是綁定在ul 身上的，但是 觸發的對象是 ul 裏面的小li
// $("ul li").click();
$("ul").on("click", "li", function() {
alert(11);
});
// (3) on可以給未來動態創建的元素綁定事件
$("ol").on("click", "li", function() {
alert(11);
})
var li = $("<li>我是後來創建的</li>");
$("ol").append(li);
})
</script>
</body>
1.2.2. 案例：發佈微博案例
1.點擊發布按鈕， 動態創建一個小li，放入文本框的內容和刪除按鈕， 並且添加到ul 中。
2.點擊的刪除按鈕，可以刪除當前的微博留言。
代碼實現略。(詳情參考源代碼)
1.2.3. 事件處理 off() 解綁事件
當某個事件上面的邏輯，在特定需求下不需要的時候，可以把該事件上的邏輯移除，這個過程我們稱爲事件解綁。jQuery 爲我們提供 了多種事件解綁方法：die() / undelegate() / off() 等，甚至還有隻觸發一次的事件綁定方法 one()，在這裏我們重點講解一下 off() ;
語法
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Gz4tPl6k-1592183621341)(images/off.png)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/2020061509162877.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgyNzQxOA==,size_16,color_FFFFFF,t_70)
演示代碼
<body>
<div></div>
<ul>
<li>我們都是好孩子</li>
<li>我們都是好孩子</li>
<li>我們都是好孩子</li>
</ul>
<p>我是一個P標籤</p>
<script>
$(function() {
// 事件綁定
$("div").on({
click: function() {
console.log("我點擊了");
},
mouseover: function() {
console.log('我鼠標經過了');
}
});
$("ul").on("click", "li", function() {
alert(11);
});
// 1. 事件解綁 off
// $("div").off(); // 這個是解除了div身上的所有事件
$("div").off("click"); // 這個是解除了div身上的點擊事件
$("ul").off("click", "li");
// 2. one() 但是它只能觸發事件一次
$("p").one("click", function() {
alert(11);
})
})
</script>
</body>
1.2.4. 事件處理 trigger() 自動觸發事件
有些時候，在某些特定的條件下，我們希望某些事件能夠自動觸發, 比如輪播圖自動播放功能跟點擊右側按鈕一致。可以利用定時器自動觸發右側按鈕點擊事件，不必鼠標點擊觸發。由此 jQuery 爲我們提供了兩個自動觸發事件 trigger() 和 triggerHandler() ;
語法
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-JA1BtBhh-1592183621343)(images/t1.png)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20200615091641488.png)
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-sJgWOT4o-1592183621344)(images/t2.png)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20200615091650577.png)
演示代碼
<body>
<div></div>
<input type="text">
<script>
$(function() {
// 綁定事件
$("div").on("click", function() {
alert(11);
});
// 自動觸發事件
// 1. 元素.事件()
// $("div").click();會觸發元素的默認行爲
// 2. 元素.trigger("事件")
// $("div").trigger("click");會觸發元素的默認行爲
$("input").trigger("focus");
// 3. 元素.triggerHandler("事件") 就是不會觸發元素的默認行爲
$("input").on("focus", function() {
$(this).val("你好嗎");
});
// 一個會獲取焦點，一個不會
$("div").triggerHandler("click");
// $("input").triggerHandler("focus");
});
</script>
</body>
1.3. jQuery 事件對象
jQuery 對DOM中的事件對象 event 進行了封裝，兼容性更好，獲取更方便，使用變化不大。事件被觸發，就會有事件對象的產生。
語法
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-w0iDKO8p-1592183621345)(images/event.png)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20200615091707112.png)
演示代碼
<body>
<div></div>
<script>
$(function() {
$(document).on("click", function() {
console.log("點擊了document");
})
$("div").on("click", function(event) {
// console.log(event);
console.log("點擊了div");
event.stopPropagation();
})
})
</script>
</body>
注意：jQuery中的 event 對象使用，可以借鑑 API 和 DOM 中的 event 。
1.4. jQuery 拷貝對象
jQuery中分別爲我們提供了兩套快速獲取和設置元素尺寸和位置的API，方便易用，內容如下。
語法
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-OuuK566D-1592183621346)(images/extend.png)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/2020061509171829.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgyNzQxOA==,size_16,color_FFFFFF,t_70)
演示代碼
<script>
$(function() {
// 1.合併數據
var targetObj = {};
var obj = {
id: 1,
name: "andy"
};
// $.extend(target, obj);
$.extend(targetObj, obj);
console.log(targetObj);
// 2. 會覆蓋 targetObj 裏面原來的數據
var targetObj = {
id: 0
};
var obj = {
id: 1,
name: "andy"
};
// $.extend(target, obj);
$.extend(targetObj, obj);
console.log(targetObj);
})
</script>
1.5. jQuery 多庫共存
實際開發中，很多項目連續開發十多年，jQuery版本不斷更新，最初的 jQuery 版本無法滿足需求，這時就需要保證在舊有版本正常運行的情況下，新的功能使用新的jQuery版本實現，這種情況被稱爲，jQuery 多庫共存。
語法
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-sQNlbN0H-1592183621347)(images/noconfig.png)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20200615091728202.png)
演示代碼
<script>
$(function() {
// 讓jquery 釋放對$ 控制權 讓用自己決定
var suibian = jQuery.noConflict();
console.log(suibian("span"));
})
</script>
1.6. jQuery 插件
補充：
1.自定義jQuery插件：
$ .extend（）拓展工具方法，可以通過$.xxx（) $.yyy（）來調用
$ .fn.extend（）拓展j0uery方法，可以通過$().xxx() $().yyy()來調用
j0uery插件方法，如果我們想要給J0新增函數，通過上述兩個插件方法拓展函數庫。
$.extend({
aaa:function() {
alert("這是一個工具方法");
}
})
$.fn.extend({
aaa:function() {
alert("這是一個jQuery方法");
}
案例：自定義drag()插件方法，實現鼠標拖拽元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="./js/jquery-3.5.0.js"></script>
<title></title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
}
p,h1 {
position: absolute;
}
</style>
<script type="text/javascript">
$.extend({
aaa:function() {
alert("這是一個工具方法");
}
})
$.fn.extend({
aaa:function() {
alert("這是一個jQuery方法");
},
drag:function() {
// this 誰調用this，this就指向誰
// this = $("div")
// 鼠標按下事件mousedown
$(this).mousedown(function(e) {
var offsetX = e.clientX - $(this).offset().left;
var offsetY = e.clientY - $(this).offset().top;
var _this = this;// 用_this變量來暫時保存this
// 添加鼠標移動事件
$(document).mousemove(function(e) {
$(_this).css({
left:e.clientX - offsetX,
top:e.clientY - offsetY
})
})
})
// 鼠標鬆開時，取消鼠標移動事件
$(document).mouseup(function() {
$(document).off("mousemove");
})
return this;// 加上這句話就可以實現鏈式調用了
}
})
$(function() {
// $("div").aaa();
// $.aaa();
$('div,p,h1').drag().css("background-color",'pink').mouseover(function() {
//鼠標移入時變成黃色
$(this).css("background-color","yellow");
});
})
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<p>1111</p>
<h1>2222</h1>
</body>
</html>
2. JS自執行函數：
(function(){
//這裏爲調用的其它代碼
})();
- Jquery立即執行函數：
$(function(){
//這裏爲要調用的其它代碼
})
區別：第一個(JS自執行函數)爲順序執行，即如果要調用其它的js方法，則需要置於代碼末尾。否則無法調用。
第二個(Jquery立即執行函數)可以爲全部代碼加載後再執行，因此，如果第一個放在代碼末尾，兩者功能一樣。
案例2： 自定義bgColor插件
bgColor插件.html文件:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.0.js"></script>
<script src="js/bgColor.js"></script>
<script src="js/jQuery-add.js"></script>
<script type="text/javascript">
$(function() {
// $('div').width(100).height(100).css('background-color','red');
// 自己封裝一個bgColor方法
// $('div').width(100).height(100).bgColor('red');
$('div').bgColor('green').width(100).height(100);
// 1. 如何自己封裝插件：
// 1.1 給jQuery的原型添加方法
// 1.2 給jQuery直接添加方法
console.log($.add(10,20));
})
</script>
</head>
<body>
<div></div>
<p></p>
</body>
</html>
bgColor.js文件:
// (function ($){
// // 需要給jQuery的原型添加方法
// $.fn.bgColor = function(yanse) {
// console.log(this); // this是調用這個bgColor方法的jQuery對象
// this.css('background-color',yanse);
// // 返回調用這個方法的jQuery本身
// return this;
// }
// })(jQuery);
$(function() {
// 需要給jQuery的原型添加方法
$.fn.bgColor = function(yanse) {
console.log(this); // this是調用這個bgColor方法的jQuery對象
this.css('background-color', yanse);
// 返回調用這個方法的jQuery本身
return this;
}
})
jQuery-add.js文件:
// $(function() {
// // 直接給$添加方法
// $.add = function(num1,num2) {
// return num1 + num2;
// }
// })
(function($) {
// 直接給$添加方法
$.add = function(num1,num2) {
return num1 + num2;
}
})(jQuery)
案例3 自定義表格插件table.js：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table 插件</title>
<style type="text/css">
#c {
height: 500px;
}
table{
text-align: center;
border-collapse: collapse;
}
th {
background-color: deepskyblue;
color: #fff;
}
#c table td,
#c table th {
width: 100px;
border: 1px solid black;
}
</style>
<script src="js/jquery-3.5.0.js"></script>
<script src="js/jQuery-table.js"></script>
<script type="text/javascript">
$(function() {
$('#c').table(['序號','姓名','年齡','工資'],[
{name:"zep",age:30,salary:4000},
{name:"Tom",age:22,salary:2000},
{name:"Lily",age:18,salary:8000}
])
})
</script>
</head>
<body>
<div id="c">
</div>
</body>
</html>
(function($) {
// 給$的原型添加方法
// arrTableHead 生成表頭的數組
// arrTableBody 生成表格主體部分的數組
$.fn.table = function(arrTableHead,arrTableBody) {
// console.log(this); // 這裏的this是一個jQuery對象，是調用這個table方法的jQuery對象
var list = [];
list.push('<table>');
// 生成表頭
list.push('<thead>');
list.push('<tr>');
for(var i=0;i<arrTableHead.length;i++) {
list.push('<th>');
list.push(arrTableHead[i]);
list.push('</th>');
}
list.push('</tr>');
list.push('</thead>');
// 生成表格主體部分
for(var j=0;j<arrTableBody.length;j++) {
list.push('<tr>');
//生成一個序號td
list.push('<td>'+(j+1)+ '</td>');
// 遍歷arrTableBody的一個個對象
for(var key in arrTableBody[j] ) {
list.push('<td>');
list.push(arrTableBody[j][key]);
list.push('</td>');
}
list.push('</tr>');
}
list.push('</table>');
console.log(list.join("")); //join方法可以用符不同的分隔符來構建這個字串。join方法值接受一個參數，即用作分隔符的字符串，然後返回所有數組項的字符串。
this.html(list.join(""));
}
})(window.jQuery)
jQuery 功能比較有限，想要更復雜的特效效果，可以藉助於 jQuery 插件完成。 這些插件也是依賴於jQuery來完成的，所以必須要先引入jQuery文件，因此也稱爲 jQuery 插件。
jQuery 插件常用的網站：
- jQuery 插件庫 http://www.jq22.com/
- jQuery 之家 http://www.htmleaf.com/
jQuery 插件使用步驟：
- 引入相關文件。（jQuery 文件 和 插件文件）
- 複製相關html、css、js (調用插件)。
1.4.1. 瀑布流插件（重點講解）
我們學習的第一個插件是jQuery之家的開源插件，瀑布流。我們將重點詳細講解，從找到插件所在網頁，然後點擊下載代碼，到插件的使用等，後面的插件使用可參考瀑布流插件的使用。
下載位置
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-kzkmDLwM-1592183621347)(images/water.png)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20200615091804124.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgyNzQxOA==,size_16,color_FFFFFF,t_70)
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-NmSJx8K9-1592183621348)(images/download.png)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20200615091813504.png)
代碼演示
插件的使用三點： 1. 引入css. 2.引入JS 3.引入html。 （有的簡單插件只需引入html和js，甚至有的只需引入js）
- 1.引入css.
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/default.css">
<!-- 下面的樣式代碼爲頁面佈局，可以引入，也可以自己寫，自己設計頁面樣式，一般爲直接引入，方便 -->
<style type="text/css">
#gallery-wrapper {
position: relative;
max-width: 75%;
width: 75%;
margin: 50px auto;
}
img.thumb {
width: 100%;
max-width: 100%;
height: auto;
}
.white-panel {
position: absolute;
background: white;
border-radius: 5px;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
padding: 10px;
}
.white-panel h1 {
font-size: 1em;
}
.white-panel h1 a {
color: #A92733;
}
.white-panel:hover {
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
margin-top: -5px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
</style>
- 2.引入js.
<!-- 前兩個必須引入 -->
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/pinterest_grid.js"></script>
<!-- 下面的爲啓動瀑布流代碼，參數可調節屬性，具體功能可參考readme.html -->
<script type="text/javascript">
$(function() {
$("#gallery-wrapper").pinterest_grid({
no_columns: 5,
padding_x: 15,
padding_y: 10,
margin_bottom: 50,
single_column_breakpoint: 700
});
});
</script>
- 3.引入html.
<!-- html結構一般爲事先寫好，很難修改結構，但可以修改內容及圖片的多少（article標籤） -->
<section id="gallery-wrapper">
<article class="white-panel">
<img src="images/P_000.jpg" class="thumb">
<h1><a href="#">我是輪播圖片1</a></h1>
<p>裏面很精彩哦</p>
</article>
<article class="white-panel">
<img src="images/P_005.jpg" class="thumb">
<h1><a href="#">我是輪播圖片1</a></h1>
<p>裏面很精彩哦</p>
</article>
<article class="white-panel">
<img src="images/P_006.jpg" class="thumb">
<h1><a href="#">我是輪播圖片1</a></h1>
<p>裏面很精彩哦</p>
</article>
<article class="white-panel">
<img src="images/P_007.jpg" class="thumb">
<h1><a href="#">我是輪播圖片1</a></h1>
<p>裏面很精彩哦</p>
</article>
</section>
總結：jQuery插件就是引入別人寫好的：html 、css、js （有時也可以只引入一部分，讀懂後也可以修改部分內容）
1.4.2. 圖片懶加載插件
圖片的懶加載就是：當頁面滑動到有圖片的位置，圖片才進行加載，用以提升頁面打開的速度及用戶體驗。（下載略）
代碼演示
懶加載只需引入html 和 js操作 即可，此插件不涉及css。
- 1.引入js
<script src="js/EasyLazyload.min.js"></script>
<script>
lazyLoadInit({
showTime: 1100,
onLoadBackEnd: function(i, e) {
console.log("onLoadBackEnd:" + i);
},
onLoadBackStart: function(i, e) {
console.log("onLoadBackStart:" + i);
}
});
</script>
- 2.引入html
<img data-lazy-src="upload/floor-1-3.png" alt="">
1.4.3. 全屏滾動插件
全屏滾動插件比較大，所以，一般大型插件都會有幫助文檔，或者網站。全屏滾動插件介紹比較詳細的網站爲：
http://www.dowebok.com/demo/2014/77/
代碼演示
全屏滾動因爲有多重形式，所以不一樣的風格html和css也不一樣，但是 js 變化不大。所以下面只演示js的引入，html和css引入根據自己實際
項目需要使用哪種風格引入對應的HTML和CSS。
<script src="js/jquery.min.js"></script>
<script src="js/fullpage.min.js"></script>
<script>
$(function() {
$('#dowebok').fullpage({
sectionsColor: ['pink', '#4BBFC3', '#7BAABE', '#f90'],
navigation: true
});
});
</script>
注意：實際開發，一般複製文件，然後在文件中進行修改和添加功能。
1.4.4. bootstrap組件
Bootstrap是 Twitter 公司設計的基於HTML、CSS、JavaScript開發的簡潔、直觀、強悍的前端開發框架，他依靠jQuery實現，且支持響應式
佈局，使得 Web 開發更加方便快捷。
凡是在軟件開發中用到了軟件的複用，被複用的部分都可以稱爲組件，凡是在應用程序中已經預留接口的組件就是插件。Bootstrap組件使
用非常方便: 1.引入bootstrap相關css和js 2.去官網複製html
代碼演示
- 引入bootstrap相關css和js
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
- 去官網複製html的功能模塊
<div class="container">
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<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>
</div>
1.4.5. bootstrap插件（JS）
bootstrap中的js插件其實也是組件的一部分，只不過是需要js調用功能的組件，所以一般bootstrap的js插件一般會伴隨着js代碼（有的也可以
省略js，用屬性實現）。
步驟： 1.引入bootstrap相關css和js 2.去官網複製html 3.複製js代碼，啓動js插件。
模態框的用法：
代碼演示
- 引入bootstrap相關css和js
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
- 去官網複製html的功能模塊
<!-- 模態框 -->
<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
裏面就是模態框
</div>
</div>
</div>
- 複製js代碼，啓動js插件。
<script>
// 當我們點擊了自己定義的按鈕，就彈出模態框
$(".myBtn").on("click", function() {
// alert(11);
$('#btn').modal()
})
</script>
完整代碼演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--要求當前網頁使用IE瀏覽器最高版本的內核來渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--視口的設置：視口的寬度和設備一致，默認的縮放比例和PC端一致，用戶不能自行縮放-->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<!--[if lt IE 9]>
<!--解決ie9以下瀏覽器對html5新增標籤的不識別，並導致CSS不起作用的問題-->
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<!--解決ie9以下瀏覽器對 css3 Media Query 的不識別 -->
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<!--[endif]-->
<!-- Bootstrap 核心樣式-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
<!--<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script> -->
<script src="./js/jquery-3.5.0.js"></script>
<!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script> -->
<script src="./bootstrap/js/bootstrap.min.js"></script>
<title>js插件的使用</title>
<style type="text/css">
</style>
</head>
<body>
<div class="container">
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<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>
<!-- // 導航欄組件 -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首頁 <span class="sr-only">(current)</span></a></li>
<li><a href="#">公司簡介</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown
<span class="caret"></span></a>
<ul class="dropdown-menu">
<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>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown
<span class="caret"></span></a>
<ul class="dropdown-menu">
<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>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- 大模態框 -->
<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
大模態框
</div>
</div>
</div>
<!-- 自己定義模態框 通過data屬性調用-->
<button data-toggle="modal" data-target="#myModal">點擊顯示模態框(通過data屬性調用)</button>
<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- 自己定義模態框 通過JavaScript調用-->
<button type="button" class="myBtn">點擊顯示模態框(通過JavaScript調用)</button>
<!-- tab欄切換 -->
<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">手機</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">電視</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">手機相關的內容</div>
<div role="tabpanel" class="tab-pane" id="profile">電視相關的內容</div>
</div>
</div>
<!-- 輪播圖 -->
<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="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." 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>
</div>
<script type="text/javascript">
// 當我們點擊了自己定義的按鈕，就彈出模態框
$('.myBtn').on("click", function() {
// alert(111);
$('#myModal').modal();
})
</script>
</body>
</html>
1.4.6. bootstrap案例-阿里百秀
1.通過調用組件實現導航欄
2.通過調用插件實現登錄
3.通過調用插件標籤頁實現 tab 欄
代碼實現略。(詳情參考源代碼)
1.7. 綜合案例: toDoList案例分析（代碼略）
1.7.1 案例：案例介紹
// 1. 文本框裏面輸入內容，按下回車，就可以生成待辦事項。
// 2. 點擊待辦事項複選框，就可以把當前數據添加到已完成事項裏面。
// 3. 點擊已完成事項複選框，就可以把當前數據添加到待辦事項裏面。
// 4. 但是本頁面內容刷新頁面不會丟失。
1.7.2 案例：toDoList 分析
// 1. 刷新頁面不會丟失數據，因此需要用到本地存儲 localStorage
// 2. 核心思路： 不管按下回車，還是點擊複選框，都是把本地存儲的數據加載到頁面中，這樣保證刷新關閉頁面不會丟失數據
// 3. 存儲的數據格式：var todolist = [{ title : ‘xxx’, done: false}]
// 4. 注意點1： 本地存儲 localStorage 裏面只能存儲字符串格式 ，因此需要把對象轉換爲字符串 JSON.stringify(data)。
// 5. 注意點2： 獲取本地存儲數據，需要把裏面的字符串轉換爲對象格式JSON.parse() 我們才能使用裏面的數據。
1.7.3 案例：toDoList 按下回車把新數據添加到本地存儲裏面
// 1.切記： 頁面中的數據，都要從本地存儲裏面獲取，這樣刷新頁面不會丟失數據，所以先要把數據保存到本地存儲裏面。
// 2.利用事件對象.keyCode判斷用戶按下回車鍵（13）。
// 3.聲明一個數組，保存數據。
// 4.先要讀取本地存儲原來的數據（聲明函數 getData()），放到這個數組裏面。
// 5.之後把最新從表單獲取過來的數據，追加到數組裏面。
// 6.最後把數組存儲給本地存儲 (聲明函數 savaDate())
1.7.4 案例：toDoList 本地存儲數據渲染加載到頁面
// 1.因爲後面也會經常渲染加載操作，所以聲明一個函數 load，方便後面調用
// 2.先要讀取本地存儲數據。（數據不要忘記轉換爲對象格式）
// 3.之後遍歷這個數據（$.each()），有幾條數據，就生成幾個小li 添加到 ol 裏面。
// 4.每次渲染之前，先把原先裏面 ol 的內容清空，然後渲染加載最新的數據。
1.7.5 案例：toDoList 刪除操作
// 1.點擊裏面的a鏈接，不是刪除的li，而是刪除本地存儲對應的數據。
// 2.核心原理：先獲取本地存儲數據，刪除對應的數據，保存給本地存儲，重新渲染列表li
// 3.我們可以給鏈接自定義屬性記錄當前的索引號
// 4.根據這個索引號刪除相關的數據----數組的splice(i, 1)方法
// 5.存儲修改後的數據，然後存儲給本地存儲
// 6.重新渲染加載數據列表
// 7.因爲a是動態創建的，我們使用on方法綁定事件
1.7.6 案例：toDoList 正在進行和已完成選項操作
// 1.當我們點擊了小的複選框，修改本地存儲數據，再重新渲染數據列表。
// 2.點擊之後，獲取本地存儲數據。
// 3.修改對應數據屬性 done 爲當前複選框的checked狀態。
// 4.之後保存數據到本地存儲
// 5.重新渲染加載數據列表
// 6.load 加載函數裏面，新增一個條件,如果當前數據的done爲true 就是已經完成的，就把列表渲染加載到 ul 裏面
// 7.如果當前數據的done 爲false， 則是待辦事項，就把列表渲染加載到 ol 裏面
1.7.7 案例：toDoList 統計正在進行個數和已經完成個數
// 1.在我們load 函數裏面操作
// 2.聲明2個變量 ：todoCount 待辦個數 doneCount 已完成個數
// 3.當進行遍歷本地存儲數據的時候， 如果 數據done爲 false， 則 todoCount++, 否則 doneCount++
// 4.最後修改相應的元素 text()
1.8. 今日總結
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Sg8JNcjP-1592183621348)(images/總結.png)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20200615091857166.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgyNzQxOA==,size_16,color_FFFFFF,t_70)