第四篇 jQuery中的事件与应用

4.1 事件中的冒泡现象，ready()方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>事件中的冒泡现象，ready()方法</title>
<style type="text/css">
  body{ font-size:13px;}
  .clsShow{ border:#ccc 1px solid; background-color:#eee; margin-top:15px; padding:5px; width:220px; line-height:1.8em; display:none;}
  .btn{ border:#666 1px solid; padding:2px; width:50px;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
  //事件触发分为：捕获，冒泡
  //冒泡其实质就是事件执行中的顺序。
  $(function(){
    var intI=0;
    $("body,div,#btnShow").click(function(){
        intI++;
        $(".clsShow").show().html("welcome").append("<div>执行次数<b>"+intI+"</b></div>");
        event.stopPropagation();//阻止冒泡过程
        //代码中，除了使用stopPropagation()方法阻止事件的冒泡过程外，还可以通过语句return false实现停止事件的冒泡过程。
        })  
  })
  
  /*
  jQuery中的 ready()方法：在jQuery脚本加载到页面时，会设置一个isReady的标记，用于监听页面加载的进度，当然遇到执行ready()方法时，通过查看isReady值是否被设置，如果未被设置，那么就说明页面并未加载完成，在此情况下，将未完成的部分用一个数组缓存起来，当全部加载完成后，再将未完成的部分通过缓存一一执行。
  
  $(function(){})
  $(document).ready(function(){})
*/
  
</script>
</head>
<body>
  <div><input id="btnShow" type="button" value="点击" class="btn" /></div>
  <div class="clsShow"></div>
</body>
</html>

4.2 方法绑定事件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>方法绑定事件</title>
<style type="text/css">
  .btn{ border:#666 1px solid; padding:2px; width:50px;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
  //bind()
  //bind(type,[data],fn)
  $(function(){
      $("#btnBind").bind("click",function(){
          $(this).attr("disabled","disabled");//按钮不可用
          });
      })
      
  //在一个元素中绑定多个事件
   $(function(){
      $("#btnBind").bind("click mouseout",function(){
          $(this).attr("disabled","disabled");//按钮不可用
          });
      })
</script>
</head>
<body>
  <input id="btnBind" type="button" value="Button" class="btn" />
</body>
</html>

4.3 映射方式绑定不同的事件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>映射方式绑定不同的事件</title>
<style type="text/css">
  body{ font-size:13px;}
  .clsTip{ border:#ccc 1px solid; background-color:#eee; margin-top:15px; padding:5px; width:185px; display:none;}
  .txt{ border:#666 1px solid; padding:3px;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
  
  //bind(type,[data],fn)
  
  $(function(){
      $(".txt").bind({ focus:function(){$("#divTip").show().html("执行的是focus事件");},
      change:function(){$("#divTip").show().html("执行的是change事件");}
      })
  })
  //也可以这么写
  //bind(type,[data],fn)
  $(function(){
      var meaaage_focus='执行的是focus事件';
      $(".txt").bind("focus",{msg:meaaage_focus},function(event){
          $("#divTip").show().html(event.data.msg);
          })
      })
</script>
</head>
<body>
  <div>姓名：<input type="text" class="txt" /></div>
  <div id="divTip" class="clsTip"></div>
</body>
</html>

4.4 切换事件hover

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>切换事件hover</title>
<style type="text/css">
  body{ font-size:13px;}
  .clsFrame{ border:solid 1px #666; width:220px;}
  .clsFrame .clsTitle{ background-color:#eee; padding:5px; font-weight:bold;}
  .clsFrame .clsContent{ padding:5px; display:none;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
  //jQuery事件切换：hover(),toggle()
  //切换事件--既有两个以上的事件绑定于一个元素，在元素的行为动作间进行切换。
  //hover(over,out)  ==> $("a").hover(function(){...},function(){...}) ==> $("a").mouseenter(function(){...})  $("a").mouseleave(function(){...})
  //hover() hover(over,out) ==>当鼠标移动到所选的元素上面时，执行指定的第一个函数；当鼠标移出这个元素时，执行指定的第二个函数。
  
  $(function(){
    $(".clsTitle").hover(function(){
          $(".clsContent").show();
        },function(){
            $(".clsContent").hide();
            });  
  })
  
</script>
</head>
<body>
  <div class="clsFrame">
    <div class="clsTitle">jQuery简介</div>
    <div class="clsContent">XXXXXXXXXXXXXXX</div>
  </div>
</body>
</html>

4.5 切换事件toggle

(有点问题！)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>切换事件toggle</title>
<style type="text/css">
  body{ font-size:13px;}
  img{ border:solid 1px #ccc; padding:3px; width:200px; height:60px;}
  div{ width:200px; height:50px;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
  //toggle(fn,fn2,[fn3,fn4,...]) --参数fn,fn2,...,fnN为单击时被依次调用的函数。
  /*
  $(function(){
      $("img").toggle(function(){
          $(this).attr("src","img/1.png");
          $(this).attr("title","01");
          },function(){
               $(this).attr("src","img/2.png");
               $(this).attr("title","02");
              },function(){
                   $(this).attr("src","img/3.png");
                   $(this).attr("title","03");
                  })
                  
        //$("img").trigger("click");
  })
  */
  
  $(function(){
    $("button").toggle(function(){
        $("#div1").css("background-color","#030");
        },function(){
            $("#div1").css("background-color","#990");
            },function(){
                $("#div1").css("background-color","#C69");
                });            
  })
</script>
</head>
<body>
   <img />
   <div id="div1"></div>
   <button>test1</button>
</body>
</html>

4.6 unbind

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>移除事件unbind</title>
<style type="text/css">
  body{ font-size:13px;}
  .btn{ border:#666 1px solid; padding:2px; width:80px;}
  div{ line-height:1.8em;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
  $(function(){
    function oClick(){
        $("#divTip").append("<div>按钮二的单击事件</div>");
        }  
    $("input:eq(0)").bind("click",function(){
        $("#divTip").append("<div>按钮一的单击事件</div>");
        })
    $("input:eq(1)").bind("click",oClick);
    $("input:eq(2)").bind("click",function(){
        $("input").unbind();
        })
        
    //unbind() --不仅可以删除某些类型的全部事件，还可以删除某个指定的自定义事件
    $("input:eq(2)").bind("click",function(){
        $("input").unbind("click",oClick);
        })
  })
</script>
</head>
<body>
  <div>
    <input id="Button1" type="button" value="按钮一" class="btn" />
    <input id="Button2" type="button" value="按钮二" class="btn" />
    <input id="Button3" type="button" value="按钮三" class="btn" />
  </div>
  <div id="divTip" style="padding-top:10px;"></div>
</body>
</html>

4.7 one事件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>其他事件one</title>
<style type="text/css">
  .btn{ border:#666 1px solid; padding:2px; width:160px;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
  $(function(){
    function btn_Click(){
        this.value = "010-12345678";
        }
    $("input").bind("click",btn_Click);
  })
</script>
</head>
<body>
  <input id="Button1" type="button" value="点击查看联系方式" class="btn" />
</body>
</html>

4.8 事件trigger

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>其他事件trigger</title>
<style type="text/css">
  body{ font-size:13px;}
  .txt{ border:#666 1px solid; padding:3px;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
  //trigger() 方法触发被选元素的指定事件类型。
  $(function(){
    var oTxt=$("input");
    oTxt.trigger("select");
    oTxt.bind("btn_Click",function(){
        var txt = $(this).val();
        $("#divTip").html(txt);
        })
    oTxt.trigger("btn_Click");
    //自动触发的一些事件
    
    //oTxt.triggerHandler("click");--如果不希望页面自动执行，可使用triggerHandler()方法，该方法不会自动执行其包含的事件。
  })
</script>
</head>
<body>
  姓名：<input id="Text1" type="text" class="txt" value="陶国荣" />
  <div id="divTip" style="padding-top:5px"></div>
</body>
</html>

4.9 文本框中的事件应用，验证邮箱格式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文本框中的事件应用，验证邮箱格式</title>
<style type="text/css">
  body{ font-size:13px;}
  /*元素初始状态样式*/
  .divInit{ width:390px; height:55px; line-height:55px; padding-left:20px;}
  .txtInit{ border:#666 1px solid; padding:3px; background-image:url(img/2.png) }
  .spnTip{ width:179px; height:40px; line-height:40px; float:right; margin-top:8px; padding-left:10px; background-repeat:no-repeat;}
  
  /*元素丢失焦点样式*/
  .divBlur{ background-color:#FEEEC2;}
  .txtBlur{ border:#666 1px solid; padding:3px; background-image:url(img/3.png)}
  .spnBlur{ background-image:url(img/4.png);}
  .divFocu{ background-color:#EDFFD5;}
  .spnSucc{ background-image:url(img/6.png);}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
  $(function(){
    //获取焦点事件，页面加载后获取焦点  备注：addClass()是增加某种CSS样式，为了更好地体现设置的样式，应先通过removeClass（），删除已加载过的页面样式
    $("#txtEmail").focus(function(){
          $(this).removeClass("txtBlur").addClass("txtInit");
          $("#email").removeClass("divBlur").addClass("divFocu");
          $("#spnTip").removeClass("spnBlur").removeClass("spnSucc").html("请输入常用邮箱地址！");
        })
    $("#txtEmail").trigger("focus");//
    
    //失去焦点事件  
    $("#txtEmail").blur(function(){
        var $email = $("#txtEmail").val();
        if($email.length ==0)
        {
            //为空
            $(this).removeClass("txtInit").addClass("txtBlur");
            $("#email").removeClass("divFocu").addClass("divBlur");
            $("#spnTip").addClass("spnBlur").html("邮箱地址不能为空！");
        }
        else
        {
            //不为空！ 判断邮箱的格式
            if(checkEmail($email))
            {
                //true
                $(this).removeClass("txtBlur").addClass("txtInit");
                $("#email").removeClass("divFocu");
                $("#spnTip").removeClass("spnBlur").addClass("spnSucc").html("");
            }
            else
            {
                //false
                $(this).removeClass("txtInit").addClass("txtBlur");
                $("#email").removeClass("divFocu").addClass("divBlur");
                $("#spnTip").addClass("spnBlur").html("格式不正确！");
            }
        }
     })
     
     /**/
    function checkEmail(str){
        var re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/
        if(re.test(str))
        {
            return true;
            //alert("正确");
        }else
        {
            return false;
            //alert("错误");
        }
    }
  })  
</script>
</head>
<body>
  <form id="form1" action="#">
    <div id="email" class="divInit">
     邮箱：<span id="spnTip" class="spnInit"></span>
     <input id="txtEmail" type="tex" class="txtInit" />
    </div>
  </form>
</body>
</html>

4.10 列表框的事件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>列表框事件应用</title>
<style type="text/css">
  body{ font-size:13px;}
  .clsInit{ width:435px; height:35px; line-height:35px; padding-left:10px;}
  .clsTip{ padding-top:5px; background-color:#eee; display:none;}
  .btn{ border:#666 1px solid; padding:2px; width:65px; float:right; margin-top:6px; margin-right:6px;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
  
  $(function(){
    //$.each() --对数组遍历的处理
    function objInit(obj){
        return $(obj).html("<option>请选择</option>");
        }
    
    //
    var arrData={
        厂商1:{品牌1_1:"型号1_1_1,型号1_1_2",
               品牌1_2:"型号1_2_1,型号1_2_2"},
        厂商2:{品牌2_1:"型号2_1_1,型号2_1_2",
               品牌2_2:"型号2_2_1,型号2_2_2"},
        厂商3:{品牌3_1:"型号3_1_1,型号3_1_2",
               品牌3_2:"型号3_2_1,型号3_2_2"}
        };
    
    //遍历数据增加厂商项,第一次遍历
    $.each(arrData,function(pF){
        $("#selF").append("<option>"+pF+"</option>");
        })
    
    //
    $("#selF").change(function(){
        objInit("#selT");
        objInit("#selC");
        
        //品牌
        $.each(arrData,function(pF,pS){
            //
            if($("#selF option:selected").text()==pF){
                $.each(pS,function(pT,pC){
                    $("#selT").append("<option>"+pT+"</option>");
                    });
                }
            //型号
            $("#selT").change(function(){
              objInit("selC");
              $.each(pS,function(pT,pC){
                if($("#selT option:selected").text()==pT)
                {
                    $.each(pC.split(","),function(){
                        //alert(this);
                      $("#selC").append("<option>"+this+"</option>");
                    })
                }
              })
            })
        })        
    })
    
    //
    $("#Button").click(function(){
      var strValue="";
      strValue += $("#selF option:selected").text();
      strValue += "&nbsp;您选择的品牌:";
      strValue += $("#selT option:selected").text();
      strValue += "&nbsp;您选择的型号:";
      strValue += $("#selC option:selected").text();
      $("#divTip").show().addClass("clsTip").html(strValue);
    })
    
  })
</script>
</head>
<body>

  <div class="clsInit">
    厂商:<select id="selF"><option>请选择</option></select>
    品牌:<select id="selT"><option>请选择</option></select>
    型号:<select id="selC"><option>请选择</option></select>
     <input id="Button" type="button" value="查询" class="btn" />
  </div>
  <div class="clsInit" id="divTip"></div>
</body>
</html>

4.11

posted @ 2017-05-05 11:03 youguess 阅读(350) 评论(0) 编辑收藏举报

刷新页面返回顶部

youguess

第四篇 jQuery中的事件与应用

公告