01_初识jQuery

需求: 点击"确定"按钮, 提示输入的值

用户名: <input type="text" id="username">
<button id="btn1">确定(原生版)</button>
<button id="btn2">确定(jQuery版)</button>

方式一: 使用原生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>

为什么使用 window.onload()?

因为 JavaScript 中的函数方法需要在 HTML 文档渲染完成后才可以使用，如果没有渲染完成，此时的 DOM 树是不完整的，这样在调用一些 JavaScript 代码时就可能报出"undefined"错误。