jq 第五章

来源：互联网发布：练耳大师 mac 破解编辑：程序博客网时间：2024/06/04 22:40

***焦点

<html>

<head>
<base href="<%=basePath%>">

<script type="text/javascript" src="js/jQuery1.11.1.js"></script>
<script type="text/javascript">
$(function(){
//1.获的焦点的时候，将边框变成 5px dashed red;

$("input").focus(function(){
$(this).css("border","5px dashed red");
}).blur(function(){
$(this).css("border","");
});

});
</script>
</head>

<body>
<h1>表单事件</h1>
<input type="text"/>
</body>

</html>

*****************************************************************************************************************

<html>
<head>
<base href="<%=basePath%>">

<script type="text/javascript" src="js/jQuery1.11.1.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.2.0.js"></script>
<script type="text/javascript">
$(function(){

$("[type=button]").bind("click",function(){
alert('呵呵，开玩笑的，随便点');
});
//我写个光棒效果
/* $("li").bind({
mouseover:function(){
$(this).css("background","pink");
},
mouseout:function(){
$(this).css("background","");
}
}); */

//用hover实现光棒
$("li").hover(function(){
$(this).css("background","pink");
},function(){
$(this).css("background","");
});

//卸载单个事件
//$("li").unbind("mouseout mouseover");

});
</script>
</head>

<body>
<h1>bind</h1>
<input type="button" value="点我，点坏了，赔吧"/>
<ul>
<li>5.1 吃土</li>
<li>5.1 吃草</li>
<li>5.1 吃番薯</li>
</ul>
</body>
</html>

*****************************************************************************************************************

<html>
<head>
<base href="<%=basePath%>">
<style type="text/css">
div{
width:300px;
height:300px;
border-color:blue;
border-style: dashed ;
}
</style>
<script type="text/javascript" src="js/jQuery1.11.1.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.2.0.js"></script>
<script type="text/javascript">
$(function(){

/* $("[value=show]").bind("click",function(){
$("ul").show(3000);
});

$("[value=hide]").bind("click",function(){
$("ul").hide(3000);
}); */

/*
$("[type=button]").toggle(function(){
$("ul").hide();
$(this).val("show");
},function(){
$("ul").show();
$(this).val("hide");
}); */

$("#mybtn").bind("click",function(){
$("div").animate({"font-size":"35px"}, 3000)
.animate( { width: "90%"}, { queue: false, duration:3000 } )
.animate( { borderWidth: 100 }, { queue: false, duration:3000 });
});

});
</script>
</head>

<body>
<h1>bind</h1>
<div>人生入戏，全靠演技。</div>
<input type="button" id="mybtn" value="自定义动画"/>
<input type="button" value="hide"/>

<hr/>
</body>
</html>

0 0