在JQuery文件中下載，並將其引入html文件。在使用jQuery之前，我們需要到jQuery的官方網站：「
https://jquery.com/download/」
把下載好的文件放到工程根目錄下，然後在這個根目錄下創建index.html文件。最後，將下載的JQuery文件引入index.html文件，其代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.5.1.min.js"></script>
</head>
<body>
</body>
</html>
1234567891011121314151617181920212223242526272829複製代碼類型：[html]通過引入script標籤，JQuery被引入到subject的subject中，subject是：
接下來，我們將研究JQuery的基本語法，並對其進行一些介紹。
示例1:$(“div”).hide()；此行表示隱藏div元素；
例子2:$(“.box1”).hide()；這行代碼意味著class屬性隱藏在box1的元素中；
示例3:$(“#wrap”).hide()；這行代碼表示隱藏元素id的值為wrap；
示例4:$(“hide.box1”).hide()；這一行代碼意味著，隱藏帶有box1的cycle屬性的hv元素；
從上面的例子中可以看出，JQuery語法非常簡單，只需要一個美元符號$，後面跟著一個html的元素選擇符(與我們之前學到的css選擇符高度一致)，然後在後面加上JQuery的方法，例如hide(show等等)。
無論顯示或隱藏元素時，都需要一個事件來觸發該動作，我們常用的觸發方式是滑鼠點擊，比如你用滑鼠點擊一個按鈕，然後頁面上就會彈出一個提示框，通過點擊來觸發效果，我們稱之為「事件」。點擊JQuery中事件的書寫方式為：$(“div”).click(function(){…})，此代碼意味著在div標籤被點擊之後觸發事件，具體事件內容以函數形式寫入。除單擊事件外，JQuery還可以通過滑鼠移動事件、雙擊事件、元素獲取焦點事件等方式進行學習，後面我們將一一介紹，並查看JQuery如何使用。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.5.1.min.js"></script>
</head>
<style>
.box1 {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<body>
<button id="btn1">點我隱藏元素</button>
<div class="box1"></div>
</body>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$(".box1").hide();
})
})
</script>
</html>
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253複製代碼類型：[html]在以上代碼中，我們定義了一個button元素，一個div元素，然後點擊按鈕button，這個div元素就會被隱藏起來，各位同學可以嘗試一下。在代碼的最後一部分，包含了一段script標籤，這段是JavaScript代碼，所有的JavaScript代碼都將被放置在script標籤中以執行。
接下來是代碼的第一句話：$(document).ready(function){…}，這是JQuery的固定寫法，意思是頁面載入後立即執行，執行代碼被寫入function函數的方法中(即{}內)。我們已經看到了這一方法。
$(“#btn1”).click(函數){
$(“.box1”).hide()；
})
這個代碼就是我們前面提到的click事件，當單擊id值為btn1的按鈕時，會引發一個click元素的隱藏事件，click元素的名字叫做box1。
原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/255382.html
微信掃一掃 
支付寶掃一掃 