文章目錄
- 題外話
- 前言
- 一. jQuery效果
- 1. jQuery隱藏/顯示
- 2. jQuery淡入淡出
- 3. 滑動
- 4. 影片
- 結語
題外話
📢 博客主頁：?布小禪?
📢 作者專欄：
?Python?
?Java?
前言
身為一個合格的后端開發人員
前端的基礎知識也是需要了解的
一. jQuery效果
隱藏、顯示、切換，滑動，淡入淡出，以及影片
1. jQuery隱藏/顯示
顧名思義
隱藏函式為hide()
顯示函式為show()
切換兩個函式的函式，也就是同時具有著兩個效果的函式：toggle()
代碼顯示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function (){
$("#hide").click(function (){
$("p").hide();
});
$("#show").click(function (){
$("p").show();
});
$("#toggle").click(function (){
$("p").toggle();
});
});
</script>
</head>
<body>
<p>
無憂無慮，無欲無求
</p>
<button id="hide">點擊隱藏</button>
<button id="show">點擊顯示</button>
<button id="toggle">單擊隱藏，再單擊顯示</button>
</body>
</html>
2. jQuery淡入淡出
jQuery fadeIn() 用于淡入已隱藏的元素，
jQuery fadeOut() 方法用于淡出可見元素，
jQuery fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換，
jQuery fadeTo() 方法允許漸變為給定的不透明度（值介于 0 與 1 之間），
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function (){
$("p").hide();
$("#fadeTo").show();
$("#in").click(function () {
$("#fadeIn").fadeIn();
});
$("#out").click(function () {
$("#fadeOut").show().fadeOut();
});
$("#to").click(function () {
$("#fadeTo").fadeTo("show", 0.1);
});
$("#toggle").click(function () {
$("#fadeToggle").fadeToggle();
});
});
</script>
</head>
<body>
<p id="fadeIn">我將為你展示fadeIn函式</p>
<p id="fadeOut">我將為你展示fadeOn函式</p>
<p id="fadeTo">我將為你展示fadeTo函式</p>
<p id="fadeToggle">我將為你展示fadeToggle函式</p>
<button id="in">fadeIn</button>
<button id="out">fadeOut</button>
<button id="to">fadeTo</button>
<button id="toggle">fadeToggle</button>
</body>
</html>
3. 滑動
jQuery slideDown() 方法用于向下滑動元素，
jQuery slideUp() 方法用于向上滑動元素，
jQuery slideToggle() 方法可以在 slideDown() 與 slideUp() 方法之間進行切換，
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
$("#button").click(function () {
$("#xg").slideUp();
});
$("#button").dblclick(function () {
$("#xg").slideDown();
});
$("#button").click(function () {
$("#xg1").slideToggle();
});
});
</script>
</head>
<body>
<p id="button">點擊隱藏</p>
<div id="xg">
<p>我是第一行，</p>
<p>我是第二行，</p>
<p>我是第三行，</p>
<p>我是第四行，</p>
<p>我是第五行，</p>
</div>
<p>
下面是slideToggle
</p>
<div id="xg1">
<p>我是第一行，</p>
<p>我是第二行，</p>
<p>我是第三行，</p>
<p>我是第四行，</p>
<p>我是第五行，</p>
</div>
</body>
</html>
4. 影片
jQuery animate() 方法用于創建自定義影片，
語法：
$(selector).animate({params},speed,callback);
代碼：將段落字體右移變大
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
$("#dw").click(function () {
$("p").animate({
left: '150px',
fontSize: '50px'
});
});
});
</script>
</head>
<body>
<button id="dw">點我</button>
<p style="position: absolute">點上面的按鈕，我就跑了</p>
</body>
</html>
需要把你將要動的標簽的position屬性設定為： relative、fixed 或 absolute
因為html標簽默認是不動的
結語
興趣是最好的老師，堅持是不變的真理，
學習不要急躁，一步一個腳印，踏踏實實的往前走，
每天進步一點點，榷訓月累之下，你就會發現自己已經變得很厲害了，
我是布小禪，一枚自學萌新，跟著我每天進步一點點吧！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/293377.html
標籤：其他
上一篇：JavaScript入門第十八章（js作用域及變數預決議 ）
下一篇：什么是Node.js