jQuery 對基本選擇符的運用

蓯芯開矢發表於2024-10-21
jQuery

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-3.7.1.js" ></script>
<script>
$(document).ready(function(){ 　　　　　　　　　　 /*準備執行的檔案*/
$(".ycq").click(function(){ 　　　　　　　　　　　　 /*對該檔案進行點選操作*/
$("h1").hide(); 　　　　　　　　　　 /*對該檔案進行隱藏*/
}) 　　　　　　　　　　 /*結束第一句*/
})　　　　　　　　　　 /*結束第二句*/

$(document).ready(function(){ 　　　　　　　　　　 /*準備執行的檔案*/
$(".ycw").click(function(){　　　　　　　　　　 /*對該檔案進行點選操作*/
$(".di").hide(); 　　　　　　　　　　 /*對該檔案進行隱藏*/
}) 　　　　　　　　　　 /*結束第一句*/
}) 　　　　　　　　　　 /*結束第二句*/

$(document).ready(function(){ /*準備執行的檔案*/
$(".yce").click(function(){ /*對該檔案進行點選操作*/
$("#de").hide(); /*對該檔案進行隱藏*/
}) 　　　　　　　　　　 /*結束第一句*/
}) 　　　　　　　　　　 /*結束第二句*/
　　
$(document).ready(function(){ 　　　　　　　　　　 /*準備執行的檔案*/
$(".ycm").click(function(){ 　　　　　　　　　　 /*對該檔案進行點選操作*/
$(".di,#de").hide(); 　　　　　　　　　　 /*對該檔案進行隱藏*/
}) 　　　　　　　　　　 /*結束第一句*/
}) 　　　　　　　　　　 /*結束第二句*/

$(document).ready(function(){ 　　　　　　　　　　 /*準備執行的檔案*/
$(".ycl").click(function(){　　　　　　　　　　 /*對該檔案進行點選操作*/
$("*").hide(); 　　　　　　　　　　 /*對所有檔案進行隱藏*/
}) 　　　　　　　　　　 /*結束第一句*/
}) 　　　　　　　　　　 /*結束第二句*/
</script>
<style> 　　　　　　　　　　 /*樣式編輯關鍵詞*/
h1{color: blueviolet;} 　　　　　　　　　　 /*對h1進行樣式編輯*/
.di{color: aquamarine; font-size: x-large;}
/*對di進行樣式編輯 第一句是編輯字型顏色第二句是編輯字型大小*/
#de{color: cadetblue;} 　　　　　　　　　　 /*對de進行樣式編輯*/


</style>
</head>
<body>
<h1>玉溪農業職業技術學院</h1>
<p class="di">資訊電氣工程學院</p>
<p id="de">計應2151班</p>
<button class="ycq">隱藏1</button>
<button class="ycw">隱藏2</button>
<button class="yce">隱藏3</button>
<button class="ycm">隱藏4</button>
<button class="ycl">隱藏5</button>
</body>
</html>

相關文章