jQuery學習筆記整理[那就算半隻教程吧(◕ܫ◕)]（二）

1.隱藏和顯示

hide() 和 show() 方法

隱藏和顯示 HTML 元素

$(selector).hide(speed,callback);
$(selector).show(speed,callback);

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
	<script >
		$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
	</script>
</head>
<body>
	<p>如果你點擊“藏起來”按鈕，我就會消失。再點“出現了”就會出現，試試吧！</p>
	<button id="hide">藏起來</button>
	<button id="show">出現了</button>
	
	
</body>
</html>

可選的 speed 參數規定隱藏/顯示的速度

可以取以下值：“slow”、“fast” 或毫秒。

可選的 callback 參數是隱藏或顯示完成後所執行的函數名稱。

<script >
		$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide(1000);
  });
  $("#show").click(function(){
    $("p").show(1000);
  });
});
	</script>

使用回調函數

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
	<style type="text/css">
div{
	width:130px;
	height: 50px;
	padding: 15px;
	margin: 15px;
	background-color: #FFB6C1;
}
 </style>
	<script >
		$(document).ready(function(){
  $(".hidebtn").click(function(){
    $("div").hide(1000,"linear",function(){
      alert("Hide() 方法已完成!");
    });
  });
});
	</script>
</head>
<body>
	<div>隱藏以及設置回調函數</div>
	<button class="hidebtn">點擊隱藏</button>
	
	
</body>
</html>

jQuery toggle()

通過 jQuery，您可以使用 toggle() 方法來切換 hide() 和 show() 方法。

顯示被隱藏的元素，並隱藏已顯示的元素：

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle();
  });
});
</script>

<body>

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

可選的 callback 參數說明

1.$(selector)選中的元素的個數爲n個，則callback函數會執行n次；
當 callback 函數加上括號時，函數立即執行，只會調用一次，如果不加括號，元素顯示或隱藏後調用函數，纔會調用多次。

2.callback函數名後加括號，會立刻執行函數體，而不是等到顯示/隱藏完成後才執行；

3.callback既可以是函數名，也可以是匿名函數；

$(document).ready(function(){
  $(".hidebtn").click(function(){
    $("div").hide(1000, "linear", add());
      
  });
});
    
function  add() {
    alert("Hide() 方法已完成!");
}

add()加上括號 add是執行函數,直接執行
若是 add 那麼則可以理解爲把add當作參數,由click函數調用add函數
只需要記住有括號就先執行括號裏面的,就跟我們數學基礎運算一樣

2.淡入淡出

注意大小寫

jQuery fadeIn() 方法

jQuery fadeIn() 用於淡入已隱藏的元素。

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

可選的 speed 參數規定效果的時長。它可以取以下值：“slow”、“fast” 或毫秒。.
可選的 callback 參數是 fading 完成後所執行的函數名稱。

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(6000);
  });
});
</script>

<button>點擊淡入 div 元素。</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:#FFB6C1;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:#FF00FF;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:#800080;"></div>

jQuery fadeOut() 方法

jQuery fadeOut() 方法用於淡出可見元素。

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

可選的 speed 參數規定效果的時長。它可以取以下值：“slow”、“fast” 或毫秒。
可選的 callback 參數是 fading 完成後所執行的函數名稱。

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
  });
});
</script>

<body>
<button>點擊淡出 div 元素。</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>

jQuery fadeToggle() 方法

jQuery fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換
如果元素已淡出，則 fadeToggle() 會向元素添加淡入效果。
如果元素已淡入，則 fadeToggle() 會向元素添加淡出效果。

$(document).ready(function(){
	$("button").click(function(){
		$("#div1").fadeToggle();
		$("#div2").fadeToggle("slow");
		$("#div3").fadeToggle(3000);
	});
});

jQuery fadeTo()

jQuery fadeTo() 方法允許漸變爲給定的不透明度（值介於 0 與 1 之間）。
必需的 speed 參數規定效果的時長。它可以取以下值：“slow”、“fast” 或毫秒。

fadeTo() 方法中必需的 opacity 參數將淡入淡出效果設置爲給定的不透明度（值介於 0 與 1 之間）。

可選的 callback 參數是該函數完成後所執行的函數名稱。
fadeTo() 沒有默認參數，必須加上 slow/fast/Time

$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeTo("slow",0.15);
    $("#div2").fadeTo("slow",0.4);
    $("#div3").fadeTo("slow",0.7);
  });
});

3.滑動方法

slideDown() 方法

jQuery slideDown() 方法用於向下滑動元素。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
	<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown("slow");
  });
});
</script>
 
<style type="text/css"> 
#panel,#flip
{
	padding:5px;
	text-align:center;
	background-color:#FFB6C1;
	border:solid 1px #c3c3c3;
}
#panel
{
	padding:50px;
	display:none;
}
</style>
</head>
<body>
 
<div id="flip">點我滑下面板</div>
<div id="panel">Hello world!</div>

</html>

slideUp() 方法

jQuery slideUp() 方法用於向上滑動元素

$(document).ready(function(){
  $("#flip").click(function(){

 - List item

    $("#panel").slideUp("slow");
  });
});

slideToggle() 方法

在 slideDown() 與 slideUp() 方法之間進行切換

$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});

4.動畫

animate() 方法

animate() 方法用於創建自定義動畫
$(selector).animate({params},speed,callback);

必需的 params 參數定義形成動畫的 CSS 屬性。
可選的 speed 參數規定效果的時長。它可以取以下值：“slow”、“fast” 或毫秒。
可選的 callback 參數是動畫完成後所執行的函數名稱。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
	<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      opacity:'0.5',
      height:'150px',
      width:'150px'
    });
  });
});
</script>
 
</head>
<body>
	<button>開始動畫</button>
 <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</html>

默認情況下，所有 HTML 元素都有一個靜態位置，且無法移動。
如需對位置進行操作，要記得首先把元素的 CSS position 屬性設置爲 relative、fixed 或 absolute！
開始動畫

默認情況下，所有的 HTML 元素有一個靜態的位置，且是不可移動的。如果需要改變爲，我們需要將元素的 position 屬性設置爲 relative, fixed, 或 absolute!

<div style="background:#98bf21;height:100px;width:100px;position:absolute;">

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

當使用 animate() 時，必須使用 Camel 標記法書寫所有的屬性名，比如，必須使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

同時，色彩動畫並不包含在覈心 jQuery 庫中。

$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      height:'toggle'
    });
  });
});

animate() - 使用隊列功能

$(document).ready(function(){
  $("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");
  });
});

$(document).ready(function(){
  $("button").click(function(){
    var div=$("div");  
    div.animate({left:'100px'},"slow");
    div.animate({fontSize:'3em'},"slow");
  });
});

jquery中有一個Queue隊列的接口，這個模塊沒有單獨拿出來作爲一個章節是因爲這個是內部專門爲動畫服務的，Queue隊列如同data數據緩存與Deferred異步模型一樣，都是jQuery庫的內部實現的基礎設施
Queue隊列

隊列是一種特殊的線性表，只允許在表的前端（隊頭）進行刪除操作（出隊），在表的後端（隊尾）進行出入操作（入隊），隊列的特點是先進先出，最先插入的元素最先被刪除。

5.停止動畫

stop() 方法

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

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

可選的 stopAll 參數規定是否應該清除動畫隊列。默認是 false，即僅停止活動的動畫，允許任何排入隊列的動畫向後執行。

可選的 goToEnd 參數規定是否立即完成當前動畫。默認是 false。

stop() 會清除在被選元素上指定的當前動畫。

<!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>

6.Callback 方法

Callback 函數在當前動畫 100% 完成之後執行。

<!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").hide("slow",function(){
      alert("段落現在被隱藏了");
    });
  });
});
</script>
</head>
<body>
<button>隱藏</button>
<p>我們段落內容，點擊“隱藏”按鈕我就會消失</p>
</body>
</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(){
  $("button").click(function(){
    $("p").hide(1000);
    alert("現在段落被隱藏了");
  });
});
</script>
</head>
<body>
<button>隱藏</button>
<p>這是一個段落，內容很少</p>
</body>
</html>

7.方法鏈接

在相同的元素上運行多條 jQuery 命令，一條接着另一條
瀏覽器就不必多次查找相同的元素。
如需鏈接一個動作，您只需簡單地把該動作追加到之前的動作上。

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

jQuery學習筆記整理[那就算半隻教程吧(◕ܫ◕)]（二）

文章目錄

1.隱藏和顯示

hide() 和 show() 方法

可選的 speed 參數規定隱藏/顯示的速度

使用回調函數

jQuery toggle()

可選的 callback 參數說明

2.淡入淡出

jQuery fadeIn() 方法

jQuery fadeOut() 方法

jQuery fadeToggle() 方法

jQuery fadeTo()

3.滑動方法

slideDown() 方法

slideUp() 方法

slideToggle() 方法

4.動畫

animate() 方法

animate() - 使用隊列功能

5.停止動畫

stop() 方法

6.Callback 方法

7.方法鏈接

AI模型 Llama 3體驗筆記

【面試準備】又一次失敗的面試經歷，題目離譜～資深軟件測試工程師

dotnet 8 版本與銀河麒麟V10和UOS系統的 glibc 兼容性

web前端開發筆記整理（五）

LIUNX自測基礎命令測驗題目+考覈點（三）

Js_Data對象，定時器,腳本化css

jQuery實現tab欄切換（附上代碼）

web前端開發筆記整理（四）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結