ready方法事件和事件切換

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>ready方法事件和事件切換</title>
    <script type="text/javascript" src="jquery.min.js"></script>
    <style type="text/css">
        #out{
            width: 300px;
            height: 400px;
            background-color: #c0c0c0;
        }
        input{
            width: 250px;
        }
    </style>
</head>
<body>

jQuery 的事件處理（一）
目標：
    1、理解jQuery 的ready()方法
    2、熟悉使用jQuery 事件方法
    3、熟悉jQuery事件切換
大綱
    1、ready()方法
         1）舉例
           $(document)。ready（function{
           //我們的代碼
           }）;
        2）ready()和window.load的區別
           (1)ready()在DOM結構加載完成之后馬上執行；window.load在網頁上的所有元素全部載入陳恭候才執行 例如 圖片展示網站 可能存在CSS文件、js文件 和大量的圖片文件  建議使用ready()方法
           (2)同一個網頁中，可以寫多個ready()，但是只能有一個生效的window.load
           (3)ready（）方法的簡寫方式
           $(function（）{
                //寫我們的代碼
           });
     2、jQuery事件方法
           blur([[data],fn])  當元素失去焦點時觸發 blur 事件
           change([[data],fn]) 當元素的值發生改變時，會發生 change 事件。
           click([[data],fn])
           dblclick([[data],fn])
           error([[data],fn])
           focus([[data],fn])
           focusin([data],fn)
           focusout([data],fn)
           keydown([[data],fn])
           keypress([[data],fn])
           keyup([[data],fn])
           mousedown([[data],fn])
           mouseenter([[data],fn])
           mouseleave([[data],fn])
           mousemove([[data],fn])
           mouseout([[data],fn])
           mouseover([[data],fn])
           mouseup([[data],fn])
           resize([[data],fn])
           scroll([[data],fn])
           select([[data],fn])
           submit([[data],fn])
           unload([[data],fn])
     3、jQuery事件切換
         hover([over,]out)  
         toggle([spe],[eas],[fn])
    -->

<div id="in">
    <input type="text" name="in" value="請輸入用戶名">
     <button>按鈕</button>
</div>
<div id="out">

</div>
<script>
    $(document).ready(function () {
          /*$(':text').blur(function () {
             alert('###');
          });*/

         /* $('#in input').change(function () {
             $('#out').text($(this).val());
          });*/

      /*   $(':text').keyup(function () {
             var value = $.trim($(this).val());
             if(value=='laodai'){
                 $('#out').text('我是PHPChina的老戴');
             }else{
                 $('#out').text('*');
             }
         });*/
   /*   $('div:eq(1)').click(function () {
          $(this).css('background','red');
      });*/
/*   $('div:last').mousemove(function () {
       $(this).css('background','red');
   });*/
/*$('div:last').hover(function () {
    $(this).css('background','red');
},function () {
    $(this).css('background','black');
});*/
$('#out').toggle(function () {
    $(this).css('background','green');
},function () {
    $(this).css('background','black');
},function () {
    $(this).css('background','yellow');
},function () {
    $(this).css('background','none');
});
    });

</script>
</body>
</html>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容