JQ-事件-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>JQ-事件-2</title>
<script src="jquery.min.js" type="text/javascript"></script>
<style>
.hh{
width:100px;
height:100px;
background:#3C0;
}
</style>
</head>

<body>
<div id="ck">点我</div>
<div class="hh" id="hov">飘过来~!</div>
<input name="" type="text" id="textBox" />
<script>
    $(function(){
        //on事件
        $("#ck").on("click",function(){
            $("body").append($(this).clone());
            alert($(this).text());
            });
        //hover事件
        $("#hov").hover(
          function(){
              $(this).css("background","red");
              },
          function(){
              $(this).css("background","blue")
              }
        );
        //focus事件
        $("#textBox").focus(function(){
            $("#hov").text("飘过来")
            })
        //blur事件
        $("#textBox").blur(function(){
            $("#hov").text("飘回去")
            $("#textBox").append("请输入名字!");
            })
        $("#textBox").change(function(){
            $(this).append("请输入名字!");
            })
        })
</script>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值