JQuery的學習
阿新 • • 發佈：2018-11-14
JQuery是什麼？
JQuery其實是JS的一個類庫，也有人稱作框架，它主要是封裝了開發中常用的功能，這樣就提升了我們開發的效率。也可以理解為JQuery就是對JS的進一步封裝。
為什麼要用JQuery?
1、使用JQuery可以解決js編寫程式碼的相容性問題。
2、可以使程式碼更簡潔，更清晰。
3、體積較小，使用方便
怎麼使用JQuery?
1、引入JQuery檔案
<!--第一步：引入jquery-->
<script src="../js/jquery-1.11.1.min.js"></script>
2、編寫人口函式
/* * 第二步：編寫入口函式，類似於 window.onload = function () {} * 其函式就是當DOM準備好以後執行其中的函式 * */ $(document).ready(function () { })
3、編寫函式中所要執行的程式碼
/* * 第二步：編寫入口函式，類似於 window.onload = function () {} * 其函式就是當DOM準備好以後執行其中的函式 * */ $(document).ready(function () { /* * 第三步：編寫要執行的程式碼 * */ //表示給當前id為btn的標籤設定一個點選事件 $("#btn").click(function () { //將id為text-content-root的標籤顯示出現，並且顯示1000動畫,該動畫是類似於Android的縮放動畫 $("#text-content-root").show(1000); }) })
全部程式碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery的學習</title>
<style>
#text-content-root {
/*預設隱藏d*/
display: none;
}
.text-Content {
height: 300px;
background-color: hotpink;
margin-top: 20px;
margin-left: 10px;
margin-right: 10px;
}
</style>
<!--第一步：引入jquery-->
<script src="../js/jquery-1.11.1.min.js"></script>
<script>
/*
* 第二步：編寫入口函式，類似於 window.onload = function () {}
* 其函式就是當DOM準備好以後執行其中的函式
* */
$(document).ready(function () {
/*
* 第三步：編寫要執行的程式碼
* */
//表示給當前id為btn的標籤設定一個點選事件
$("#btn").click(function () {
//將id為text-content-root的標籤顯示出現，並且顯示1000動畫,該動畫是類似於Android的縮放動畫
$("#text-content-root").show(1000);
})
})
</script>
</head>
<body>
<button id="btn">按鈕</button>
<div id="text-content-root">
<div class="text-Content">
我是文字內容
</div>
<div class="text-Content">
我是文字內容
</div>
<div class="text-Content">
我是文字內容
</div>
</div>
</body>
</html>
效果如下：
