1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="UTF-8">
6 <title>01_初识jQuery</title>
7
8 <!--使用原生DOM-->
9 <script type="text/javascript">
10 window.onload = function() {
11 var btn1 = document.getElementById('btn1')
12 btn1.onclick = function() {
13 var username = document.getElementById('username').value
14 alert(username)
15 }
16 }
17 </script>
18
19 //---------------------------------------------------------------------------------------------------------
20
21 <!--使用jQuery实现-->
22 <script type="text/javascript" src="js/jquery-1.12.3.js"></script>
23 <script type="text/javascript">
24 //绑定文档加载完成的监听
25 //写法1
26 $(function() {
27 $('#btn2').click(function() {
28 var username = $('#username').val()
29 alert(username)
30 })
31 })
32 //写法2
33 jQuery(function() {
34 var $btn2 = $('#btn2')
35 $btn2.click(function() { // 给btn2绑定点击监听
36 var username = $('#username').val()
37 alert(username)
38 })
39 })
40
41 /*
42 1. 使用jQuery核心函数: $/jQuery
43 2. 使用jQuery核心对象: 执行$()返回的对象
44 */
45 </script>
46 </head>
47
48 <body>
49
50 <!--
51 需求: 点击"确定"按钮, 提示输入的值
52 -->
53 用户名: <input type="text" id="username">
54 <button id="btn1">确定(原生版)</button>
55 <button id="btn2">确定(jQuery版)</button>
56
57 </body>
58
59 </html>