jQuery基础之事件

jQuery基础之事件方法，如下图：

代码实现：

 1 <script src="JS/jquery-1.12.4.min.js"></script>
 2     <script>
 3         $(function(){
 4             var $btn = $('#btn1');
 5             // 鼠标点击事件
 6             $btn.click(function(){
 7                 alert('使用JS实现鼠标单击事件！');
 8             });
 9             // 元素获取焦点事件
10             var $txt = $('#txt1');
11             $txt.focus(function(){
12                 $txt.val('获取到焦点。')
13             });
14             // 元素失去焦点事件
15             $txt.blur(function(){
16                 $txt.val('元素失去焦点。')
17             });
18             // 鼠标进入范围mouseover()事件
19             var $div = $('.div1');
20             $div.mouseover(function(){
21                 // this表示当前对象
22                 $(this).css({
23                     'width':'200px',
24                     'height':'200px',
25                     'background':'red'
26                 });
27             });
28             // 鼠标离开范围mouseout()事件
29             $div.mouseout(function(){
30                 $(this).css({
31                     'width':'100px',
32                     'height':'100px',
33                     'background':'blue'
34                 }); 
35             });
36         });
37         // ready()DOM加载完成后执行的事件
38         $(document).ready(function(){
39             alert('这是DOM加载完成后执行的事件！')
40         });
41     </script>
42 
43 
44 <body>
45 
46     <input type="button" value="事件按钮" id="btn1">
47     <hr>
48     <input type="text"  id="txt1">
49     <div class="div1">
50             这是事件的范围
51         </div>
52 </body>
该花的钱要花，该吃的饭要吃。