jQuery事件

最新推荐文章于 2024-03-20 08:53:45 发布

Annaluo

最新推荐文章于 2024-03-20 08:53:45 发布

阅读量470

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/Annaluo/article/details/61926011

版权

jQuery 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标焦点和失去焦点</title>
<script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("input").focus(function(){ //当鼠标聚焦在input的时候，背景颜色变为红色
$(this).css("background-color","red");
});
$("input").blur(function(){ //当鼠标离开input的时候，背景颜色变为绿色
$(this).css("background-color","green");
});
});
</script>

</head>
<body>

Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">

</body>

</html>

运行效果如图所示，此时鼠标在name上

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<title>hide()和show()方法隐藏和显示</title>
<script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>如果你点击“隐藏” 按钮，我将会消失。</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
</body>
</html>