02_初識jQuery

ZHOU_VIP發表於2018-07-24
jQuery
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>01_初識jQuery</title>

  <!--
  方式一: 使用原生JS實現功能
  -->
  <script type="text/javascript">
    window.onload = function () {
      var btn = document.getElementById('btn1')
      btn.onclick = function () {
        alert(document.getElementById('username').value)
      }
    }
  </script>
  <!--
  方式二: 使用jQuery實現功能
    1. 引入jQuery庫
      * 本地引入
      * 遠端引入
    2. 使用jQuery函式和jQuery物件編碼
  -->
  <script type="text/javascript" src="js/jquery-1.10.1.js"></script>
  <script type="text/javascript">
    $(function () {
      $('#btn2').click(function  () {
        alert($('#username').val())
      })
    })
  </script>
</head>
<body>
	
<!--
需求: 點選"確定"按鈕, 提示輸入的值
-->

使用者名稱: <input type="text" id="username">
<button id="btn1">確定(原生版)</button>
<button id="btn2">確定(jQuery版)</button>
</body>

</html>

 

相關文章