編寫第一個jQuery程序
編寫程式
建立一個html 頁面，引入jQuery 類別庫並且寫如下程式碼：
<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8"/>
<title>Hello World jQuery!</title>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="divMsg">Hello jQuery!</div>
<input id="btnShow" type="button" value="show" />
<input id="btnHide" type="button" value="hidden" /><br/>
<input id="btnChange" type="button" value="change content is Hello World, too!"/>
<script>
$("#btnShow").bind("click", function(event) {
$("#divMsg").show();
});
$("#btnHide").bind("click", function(event) {
$("#divMsg").hide();
});
$("#btnChange").bind("click", function(event) {
$("#divMsg").html("Hello World, too!");
});
</script>
</body>
</html>效果如下：
頁面上有三個按鈕，分別控制Hello World 的顯示、隱藏和修改其內容。
此範例使用了：
（1）jQuery 的ID 選擇器：$("#btnShow") （2）事件綁定函數：bind() （3）顯示與隱藏函數：show()和hide() （4）修改元素內部html 的函數：html()
新建檔案
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>第一个简单的jQuery程序</title>
<style type="text/css">
div{
padding:8px 0px;
font-size:12px;
text-align:center;
border:solid 1px #888;
}
</style>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div").html("在php中文网学习，才是最好的学习途径。");
});
</script>
</head>
<body>
<div></div>
</body>
</html>
預覽
Clear
- 課程推薦
- 課件下載
課件暫不提供下載，工作人員正在整理中，後期請多關注該課程~ 