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

<script src="jquery-1.8.1.js"></script>
<title>无标题文档</title>
</head>
<style>
.d3{
    width:60px;
    height:60px;
    border:1px solid red;
    }
    .d2{    
    width:40px;
    height:40px;
    border:1px solid red;
    }
    .d1{
    width:20px;
    height:20px;
    border:1px solid red;
    }
</style>
<body>
 <div class="d3">
     <div class="d2">
     <div class="d1"></div>
    </div>
 </div>
 <form action="test.html">
   用户名：<input type="text" id="username"/><br/>
   <input type="submit" value="提交" id="sub"/>
  </form>
  <div id="msg"></div>
</body>
<script type="text/javascript">
    $(".d1").bind("click",function(event){//event时间对象 当点击元素时 事件对象被创建 事件处理函数执行完后 事件对象被销毁
        $(this).css("background","yellow");
         event.stopPropagation();//停止事件冒泡 或者return false;
        })
    $(".d2").bind("click",function(event){
        $(this).css("background","pink")
        event.stopPropagation();
        })
    $(".d3").bind("click",function(event){
        $(this).css("background","#000")
        event.stopPropagation();
        })
</script>
<script type="text/javascript">
    $(function(){
        $("#sub").bind("click",function(event){
             var username=$("#username").val();
             if(username==""){
                 $("#msg").html("<p>文本框的值不能为空</p>");
                 event.preventDefault();//阻止默认行为 或者用return false;
                
                 }
            })
        })
</script>
</html>