前端——jQuery

来源:https://www.cnblogs.com/LXP-Never/archive/2020/02/20/11332457.html
-Advertisement-
Play Games

jQuery是JS的工具庫,對原生JS中的DOM操作、事件處理、包括數據處理和Ajax技術等進行封裝,使用 . 鏈式寫法,提供更完善,更便捷的方法。 再使用jquery之前,我們需要先引入jquery文件,才能使用jquery語法,導入jQ文件的方法有兩種。 從 jquery.com 下載 jQue ...


  jQuery是JS的工具庫,對原生JS中的DOM操作、事件處理、包括數據處理和Ajax技術等進行封裝,使用 . 鏈式寫法提供更完善,更便捷的方法。

  再使用jquery之前,我們需要先引入jquery文件,才能使用jquery語法,導入jQ文件的方法有兩種。

  • 從 jquery.com 下載 jQuery 庫,本地導入(比較常用)
  • 從 CDN(內容分髮網絡)中載入 jQuery,Staticfile CDN、百度、新浪、谷歌和微軟的伺服器都存有 jQuery 。
<head>
// 本地導入
<script src="js/jquery.min.js"></script>
// 從 Staticfile CDN 導入
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
// 百度CDN
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</head>

註意:使用CDN有一個很大的優勢,那就是許多用戶在訪問其他站點時,已經從百度、又拍雲、新浪、谷歌或微軟載入過 jQuery。當他們訪問您的站點時,會從緩存中載入 jQuery,這樣可以減少載入時間。同時,大多數 CDN 都可以確保當用戶向其請求文件時,會從離用戶最近的伺服器上返迴響應,這樣也可以提高載入速度。

查看jquery版本:在控制台輸入  $.fn.jquery

基本語法

工廠函數 $()

"$()"函數用於獲取元素節點,創建元素節點或將原生JS對象轉換為jquery對象,返回 jQuery 對象。jQuery 對象實際是一個類數組對象,包含了一系列 jQuery 操作的方法。 例 :

$() 獲取元素節點,需傳入字元串的選擇器

$("h1");
$("#d1");
$(".c1");
$("body,h1,p")

原生JS對象與jQuery對象

$("#tip")    // jq對象
document.getElementById("tip")    // 輸出dom對象

原生JS對象與jQuery對象的屬性和方法不能混用。可以根據需要,互相轉換 :

  1、原生JS轉換jQuery對象:$(原生對象),返回 jQuery 對象

$(document.getElementById("tip"))    // dom對象轉jq對象

  2、jQuery對象轉換原生JS對象

    • 方法一 : 根據下標取元素,取出即為原生對象 var div = $("div")[0];
    • 方法二 : 使用jQuery的get(index)取原生對象 var div2 = $("div").get(0);
$("#tip")[0];      //jq對象轉dom對象

jQuery選擇器

  jquery中所有選擇器都是以美元符號開頭的:$("選擇器"),基於元素的 id、類、類型、屬性、屬性值等"查找"(或選擇)HTML 元素。它基於已經存在的CSS選擇器之外,還有一些自定義的選擇器。

基礎選擇器

標簽選擇器:  $("div")

ID 選擇器:     $("#d1")

類選擇器:      $(".c1")

群組選擇器:  $("body,p,h1")

$("*"):選取所有元素

$(this):選取當前HTML元素

console.log($("#tip").attr("id"));      // tip

層級選擇器

  後代選擇器:   $("div .c1")
  子代選擇器:   $("div>span")
  相鄰兄弟選擇器: $("h1+p") 匹配選擇器1後滿足選擇器2後的第一個兄弟元素
  通用兄弟選擇器: $("h1~h2") 匹配選擇器1後所有滿足選擇器2的兄弟元素

過濾選擇器

  需要結合其他選擇器使用

:first              匹配第一個元素,例:$("p:first")

:last              匹配最後一個元素,例:$("p:last")

:odd         匹配奇數下標對應的元素

:even            匹配偶數下標對應的元素

:eq(index)     匹配指定下標的元素

:lt(index)       匹配下標小於index的元素

:gt(index)      匹配下標大於index的元素

:not(選擇器)  否定篩選,除()中選擇器外,其他元素

:first-child      第一個子元素

:last-child      匹配最後一個子元素

:nth-child(n)  匹配第n個子元素(n從1開始計數)

<ul>
    <li>張三</li>
    <li>李四</li>
    <li>王五</li>
    <li>劉八</li>
    <li>牛九</li>
</ul>
<script>
    $("li:eq(2)").css("font-size","30px");
    $("li:first,li:last").css("color","red");

    $("li:odd").css("background-color","red");
    $("li:even").css("background-color","#ccc");
</script>

屬性選擇器

  屬性選擇器以[ ]為標誌

[attrName]      匹配包含指定屬性的元素

[attrName=value]/[attrName="value"]  匹配屬性名=屬性值的元素

[attrName^=value]  匹配屬性值以指定字元開頭的元素

[attrName$=value]  匹配屬性值以指定字元結尾的元素

[attrName*=value]  匹配屬性值包含指定字元的元素

文檔載入完畢

  所有的jQuery函數基於文檔載入完畢後執行的。這是為了防止在文檔在完全載入之前運行jQuery代碼,即在DOM載入完成後才可以對DOM進行操作。

JS方法:window.onload

JQuery方法:

//語法一 
$(document).ready(function (){
  //文檔載入完畢後執行
})
//語法二 
$().ready(function (){
  //文檔載入完畢後執行
})
//語法三 
$(function(){
  //文檔載入完畢後執行
})

區別 原生onload事件不能重覆書寫,會產生覆蓋問題(寫了多個的話,只會執行最後一個);jquery中對事件做了優化,可以重覆書寫ready方法,依次執行

// 只執行第二個
window.onload = function () {
    alert("原生頁面載入完成")
};
window.onload = function () {
    alert("原生頁面載入完成2")
};
// 依次執行
$(function () {
    alert("頁面載入完成")
});
$(function () {
    alert("頁面載入完成2")
});
View Code

jQuery事件

  事件處理程式指的是當 HTML 中發生某些事件時所調用的方法。

常見的DOM事件:

滑鼠事件鍵盤事件表單事件文檔/視窗事件
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave   blur unload
hover      

在jQuery中,大多數DOM事件都有一個等效的jQuery方法。

// 方法一:on("事件名稱",function)
$("div").on("click",function(){});//新版本使用的多些

// 方法二:bind("事件名稱",function)
$("div").bind("click",function(){});//1.6-1.8間的版本

//方法三:事件名作為方法名
$("div").click(function(){
    // 動作觸發後執行的代碼!!
});  

事件名稱省略 on 首碼

滑鼠事件

  • click():滑鼠單擊元素時,觸發事件
  • dblclick():當雙擊元素時,觸發事件
  • mouseenter():當滑鼠指針穿過元素時,觸發事件
  • mouseleave():當滑鼠指針離開元素時,觸發事件
  • mousedown():當滑鼠指針移動到元素上方,並按下滑鼠按鍵時,觸發事件
  • mouseup ():當在元素上鬆開滑鼠按鈕時,觸發事件
  • hover():當游標停留在元素上時,觸發事件
  • focus():當元素獲取焦點時,觸發事件
  • blur():當元素失去焦點時,觸發事件

鍵盤事件

  • keypress():在鍵盤上按下某鍵時發生,一直按著則會不斷觸發, 它返回的是鍵盤代碼
  • keydown():在鍵盤上按下一個按鍵,並產生一個字元時發生, 返回ASCII碼
  • keyup():用戶鬆開某一個按鍵時觸發, 與keydown相對, 返回鍵盤代碼

案例:keypress事件獲取鍵入字元

$(window).keypress(function(event){
    //event.which是獲取ASCII碼,前面的函數是將ASCII碼轉換成字元,空格鍵和Enter鍵輸出均為空白。
    console.log(String.fromCharCode(event.which));
    //從event對象中key屬性獲取字元,但是Enter鍵的key值為"Enter",空白鍵還是空白" "。
    console.log(event.key);
});

  this表示事件的觸發對象,在jquery中可以使用,註意轉換類型。this為原生對象只能使用原生的屬性和方法,可以使用$(this)轉換為jquery對象,使用jquery方法。

jQuery效果

隱藏和顯示

  通過 jQuery,您可以使用 hide() 和 show() 方法來隱藏和顯示 HTML 元素:

$("#hide").click(function(){
  $("p").hide();
});
 
$("#show").click(function(){
  $("p").show();
});

語法:

// 隱藏
$(selector).hide(speed,callback);
// 顯示
$(selector).show(speed,callback);

參數:

  • speed:規定隱藏/顯示的速度,可以取 "slow"、"fast" 或毫秒(1000毫秒=1秒)。可選參數
  • callback:隱藏或顯示完成後所執行的函數名稱,可選

toggle()方法

顯示被隱藏的元素,並隱藏已顯示的元素,來切換 hide() 和 show() 方法。

$(selector).toggle(speed,callback);

參數同hide()和show()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle();
  });
});
</script>
</head>
<body>

<button>隱藏/顯示</button>
<p>這是一個文本段落。</p>
<p>這是另外一個文本段落。</p>
</body>
</html>
實例

淡入淡出

jQuery 擁有下麵四種淡入淡出 fade 方法:

  • fadeIn():淡入
  • fadeOut():淡出
  • fadeToggle():淡入\淡出 切換
  • fadeTo():設置不透明度(值介於0~1之間)
// 淡入
$(selector).fadeIn(speed,callback);
// 淡出
$(selector).fadeOut(speed,callback);
// 可在淡入淡出之間進行切換
$(selector).fadeToggle(speed,callback);
// 允許漸變為給定的不透明度( opacity 值介於0與1之間)
$(selector).fadeTo(speed,opacity,callback);

參數:

  • speed:效果時長,它可以取以下值:"slow"、"fast" 或毫秒。可選參數
  • callback:完成淡入效果後執行的函數
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeTo("slow",0.15);
    $("#div2").fadeTo("slow",0.4);
    $("#div3").fadeTo("slow",0.7);
  });
});
</script>
</head>

<body>
<p>演示 fadeTo() 使用不同參數</p>
<button>點我讓顏色變淡</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

</body>
</html>
實例

滑動

jQuery 擁有以下滑動方法:

  • slideDown():向下滑動元素
  • slideUp():向上滑動元素
  • slideToggle():向上滑動和向下滑動 之間切換
// 向上滑動元素
$(selector).slideDown(speed,callback);
// 向下滑動元素
$(selector).slideUp(speed,callback);
// 向上滑動和向下滑動 之間切換
$(selector).slideToggle(speed,callback);

參數:

  • speed:效果時長,它可以取以下值:"slow"、"fast" 或毫秒。可選參數
  • callback:完成淡入效果後執行的函數
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});
</script>
 
<style type="text/css"> 
#panel,#flip
{
    padding:5px;
    text-align:center;
    background-color:#e5eecc;
    border:solid 1px #c3c3c3;
}
#panel
{
    padding:50px;
    display:none;
}
</style>
</head>
<body>
 
<div id="flip">點我,顯示或隱藏面板。</div>
<div id="panel">Hello world!</div>

</body>
</html>
實例

動畫

jQuery animate()方法用於創建自定義動畫。

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

參數:

  • params:定義形成動畫的CSS屬性
  • speed:效果時長,它可以取以下值:"slow"、"fast" 或毫秒。可選參數
  • callback:動畫完成後所執行的函數名稱,可選參數

註意:

1、預設情況下,所有 HTML 元素都有一個靜態位置,且無法移動。如需對位置進行操作,要記得首先把元素的 CSS position 屬性設置為 relative、fixed 或 absolute!

2、animate()幾乎可以操作所有的屬性,但是要使用Camel標記法書寫,比如:使用 marginRight 而不是 margin-right

jQuery animate() - 操作多個屬性

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

jQuery animate() - 使用相對值

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

jQuery animate() - 使用預定義的值

$("button").click(function(){
  $("div").animate({
    height:'toggle'  // "show"、"hide" 或 "toggle":
  });
});

jQuery animate() - 使用隊列功能

  但我們寫入多個animate()動畫時,jQuery會逐一運行這些animate。

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    var div=$("div");  
    div.animate({left:'100px'},"slow");
    div.animate({fontSize:'3em'},"slow");
  });
});
</script> 
</head>
 
<body>
<button>開始動畫</button>
<p>預設情況下,所有的 HTML 元素有一個靜態的位置,且是不可移動的。 
如果需要改變為,我們需要將元素的 position 屬性設置為 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>

</body>
</html>
案例

停止動畫

jQuery stop() 方法用於停止動畫或效果,在它們完成之前。

stop() 方法適用於所有 jQuery 效果函數,包括滑動、淡入淡出和自定義動畫。

$(selector).stop(stopAll,goToEnd);

參數:

  • stopAll:是否清除動畫隊列,預設false。可選參數
  • goToEnd:是否立即完成當前動畫,預設false。可選參數
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown(5000);
  });
  $("#stop").click(function(){
    $("#panel").stop();
  });
});
</script>
 
<style type="text/css"> 
#panel,#flip
{
    padding:5px;
    text-align:center;
    background-color:#e5eecc;
    border:solid 1px #c3c3c3;
}
#panel
{
    padding:50px;
    display:none;
}
</style>
</head>
<body>
 
<button id="stop">停止滑動</button>
<div id="flip">點我向下滑動面板</div>
<div id="panel">Hello world!</div>

</body>
</html>
案例

jQuery 鏈(Chaining)

鏈接(chaining)技術,允許我們在相同的元素上運行多條 jQuery 命令,一條接著另一條。

 例如: css()、slideUp() 和 slideDown() 鏈接在一起。"p1" 元素首先會變為紅色,然後向上滑動,再然後向下滑動:

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

jQuery HTML

jQuery能夠操作HTML元素和屬性。

讀取\設置 內容

  括弧中為空時為讀取,括弧中有值時為設置。

  • .html()   設置或讀取標簽內容(包括HTML標記),等價於原生innerHTML
  • .text()    設置或讀取元素的文本內容,等價於innerText,不能識別標簽
  • .val()        設置或讀取表單元素的值,等價於原生value屬性
// 讀取
$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#test1").text("Hello world!");
  });
  $("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
  });
  $("#btn3").click(function(){
    $("#test3").val("RUNOOB");
  });
});
</script>
</head>

<body>
<p id="test1">這是一個段落。</p>
<p id="test2">這是另外一個段落。</p>
<p>輸入框: <input type="text" id="test3" value="菜鳥教程"></p>
<button id="btn1">設置文本</button>
<button id="btn2">設置 HTML</button>
<button id="btn3">設置值</button>
</body>
</html>
設置HTML

讀取/設置 屬性

attr("attrName","value") :設置或讀取標簽屬性

prop("attrName","value") :設置或讀取標簽屬性。註意:在設置或讀取元素屬性時,attr()和prop()基本沒有區別;但是在讀取或設置表單元素(按鈕)的選中狀態時,必須用prop()方法,attr()不會監聽按鈕選中狀態的改變,只看標簽屬性checked是否書寫

removeAttr("attrName"):移除指定屬性

$("button").click(function(){
    $("#runoob").attr({
        "href" : "http://www.runoob.com/jquery",
        "title" : "jQuery 教程"
    });
});

 attr 和 prop 的區別

<input type="checkbox"
       name="marry1"
       checked
       id="marry1">婚否
//獲取jq對象
console.log($("#marry1").attr("checked"));   // checked
console.log($("#marry1").prop("checked"));   // true

<input type="checkbox"
       name="marry2"
       id="marry2">婚否
//獲取jq對象
console.log($("#marry2").attr("checked"));   // undefined
console.log($("#marry2").prop("checked"));   // false 

添加元素

jQuery添加元素有四種方法:

  • append():在被選元素的結尾插入內容
  • prepend():在被選元素的開頭插入內容
  • after():在被選元素之後插入內容
  • before():在被選元素之前插入內容

1)作為子元素添加

$("p").append("追加文本");
$("p").prepend("在開頭追加文本");

2)作為兄弟元素添加

$("img").after("在後面添加文本");
$("img").before("在前面添加文本");

3)移除元素

移除元素有兩種方法:

  • remove():刪除被選元素(及其子元素)
  • empty():從被選元素中刪除子元素
// remove() 方法刪除被選元素及其子元素
$("#div1").remove();
// empty() 方法刪除被選元素的子元素
$("#div1").empty();

  remove() 方法也可接受一個參數,允許您對被刪元素進行過濾。

// 刪除 class="italic" 的所有 <p> 元素
$("p").remove(".italic");

獲取並設置CSS類

jQuery擁有以下操作CSS的方法:

  • addClass()
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 以下是給大家介紹前端開發的填詞,曲子是李聖傑的《最近》,大家喜歡可以試試唱。 點贊關註超過100的平臺,我後續上來發本人原唱視頻(目前正在練習中...),另外大家覺得哪些詞寫得不好的,歡迎評論給與建議,謝謝!! ...
  • /** * 垂直方向是否在可視區域內 */ function isInViewY(element, offset) { const pageYScroll = window.pageYOffset || document.documentElement.scrollTop; const pageHe ...
  • 分頁獲拉取下一頁數據 function loadNextPageData(self, callball) { if (window.IntersectionObserver) { const options = { root: null, threshold: 0 } const handleInt ...
  • 設置cookie function cookie(key, value, options) { let days let time let result // A key and value were given. Set cookie. if (arguments.length > 1 && St ...
  • //獲取url參數 function getUrlParams(name, url) { if (!url) url = location.href; name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]'); var regexS = '[ ...
  • [轉載]https://www.cnblogs.com/codcoe/p/11928267.html ...
  • const getBrowser = () => { const ua = navigator.userAgent; return { trident: ua.indexOf('Trident') > -1, // IE內核 presto: ua.indexOf('Presto') > -1, // ...
  • JQ插件模式開發UI組件 JQ插件開發方法: 1、$.extend() 擴展JQ(比較簡單,功能略顯不足) $.extend({ sayHello:function(){ console.log("hello~"); } }); $.sayHello(); 2、$.fn 向JQ添加新方法(這次選擇這 ...
一周排行
    -Advertisement-
    Play Games
  • GoF之工廠模式 @目錄GoF之工廠模式每博一文案1. 簡單說明“23種設計模式”1.2 介紹工廠模式的三種形態1.3 簡單工廠模式(靜態工廠模式)1.3.1 簡單工廠模式的優缺點:1.4 工廠方法模式1.4.1 工廠方法模式的優缺點:1.5 抽象工廠模式1.6 抽象工廠模式的優缺點:2. 總結:3 ...
  • 新改進提供的Taurus Rpc 功能,可以簡化微服務間的調用,同時可以不用再手動輸出模塊名稱,或調用路徑,包括負載均衡,這一切,由框架實現並提供了。新的Taurus Rpc 功能,將使得服務間的調用,更加輕鬆、簡約、高效。 ...
  • 本章將和大家分享ES的數據同步方案和ES集群相關知識。廢話不多說,下麵我們直接進入主題。 一、ES數據同步 1、數據同步問題 Elasticsearch中的酒店數據來自於mysql資料庫,因此mysql數據發生改變時,Elasticsearch也必須跟著改變,這個就是Elasticsearch與my ...
  • 引言 在我們之前的文章中介紹過使用Bogus生成模擬測試數據,今天來講解一下功能更加強大自動生成測試數據的工具的庫"AutoFixture"。 什麼是AutoFixture? AutoFixture 是一個針對 .NET 的開源庫,旨在最大程度地減少單元測試中的“安排(Arrange)”階段,以提高 ...
  • 經過前面幾個部分學習,相信學過的同學已經能夠掌握 .NET Emit 這種中間語言,並能使得它來編寫一些應用,以提高程式的性能。隨著 IL 指令篇的結束,本系列也已經接近尾聲,在這接近結束的最後,會提供幾個可供直接使用的示例,以供大伙分析或使用在項目中。 ...
  • 當從不同來源導入Excel數據時,可能存在重覆的記錄。為了確保數據的準確性,通常需要刪除這些重覆的行。手動查找並刪除可能會非常耗費時間,而通過編程腳本則可以實現在短時間內處理大量數據。本文將提供一個使用C# 快速查找並刪除Excel重覆項的免費解決方案。 以下是實現步驟: 1. 首先安裝免費.NET ...
  • C++ 異常處理 C++ 異常處理機制允許程式在運行時處理錯誤或意外情況。它提供了捕獲和處理錯誤的一種結構化方式,使程式更加健壯和可靠。 異常處理的基本概念: 異常: 程式在運行時發生的錯誤或意外情況。 拋出異常: 使用 throw 關鍵字將異常傳遞給調用堆棧。 捕獲異常: 使用 try-catch ...
  • 優秀且經驗豐富的Java開發人員的特征之一是對API的廣泛瞭解,包括JDK和第三方庫。 我花了很多時間來學習API,尤其是在閱讀了Effective Java 3rd Edition之後 ,Joshua Bloch建議在Java 3rd Edition中使用現有的API進行開發,而不是為常見的東西編 ...
  • 框架 · 使用laravel框架,原因:tp的框架路由和orm沒有laravel好用 · 使用強制路由,方便介面多時,分多版本,分文件夾等操作 介面 · 介面開發註意欄位類型,欄位是int,查詢成功失敗都要返回int(對接java等強類型語言方便) · 查詢介面用GET、其他用POST 代碼 · 所 ...
  • 正文 下午找企業的人去鎮上做貸後。 車上聽同事跟那個司機對罵,火星子都快出來了。司機跟那同事更熟一些,連我在內一共就三個人,同事那一手指桑罵槐給我都聽愣了。司機也是老社會人了,馬上聽出來了,為那個無辜的企業經辦人辯護,實際上是為自己辯護。 “這個事情你不能怪企業。”“但他們總不能讓銀行的人全權負責, ...