編寫第一個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()