ready方法事件和事件切换

作者: 1983年的古董先生 | 来源:发表于2017-08-10 14:06 被阅读0次

ready方法事件和事件切换
面试笔记
jqurey事件 ready用法
替换文本的内容
学习JQuery的$.Ready()与OnLoad事件比较(转)
第 6 章 jQuery 事件与应用
jquery-事件
BingdingSource执行Clear()方法报错超出索引
面试题整理
jQuery事件

<!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>