<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../jquery-3.3.1.min.js"></script>
//這裡特别提示一下，這裡引入jQuery的時候千萬不是寫成<script src="../jquery-3.3.1.min.js"/>，這樣寫的話，網頁裡面會沒有内容，變成空白。
</head>
<body>
<input id="in" type="text"/>
<button id="btn1" type="button" >原生版</button>
<button id="btn2" type="button" >jQuery</button>
<!--javascript-->
<script type="text/javascript">
//綁定文檔完成時的監聽事件
var btn1 = document.getElementById('btn1');
var inin = document.getElementById('in');
btn1.onclick = function(){
alert(inin.value);
};
</script>
<!--jQuery-->
<script>
//綁定文檔完成時的監聽事件
$(function(){
//通過id選擇器來擷取元素
$('#btn2').click(function(){
alert("fdas");
})
})
</script>
jQuery核心函數：$ 也可以寫成 jQuery
jQuery核心對象：執行$() 或jQuery()傳回的對象
</body>
</html>
對比了一下javascript和jQuery語言，jQuery( Write Less Do more)
![用jQuery實作一個簡易的聊天框[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)