【jQuery】鼠标点击事件

使用jQuery实现鼠标点击事件,想实现的功能是,点击按钮,出现文字提示
用JavaScript也可以实现,但用jQuery实现更为方便,就用jQuery了。如下图
【jQuery】鼠标点击事件_第1张图片

简而言之,就是用两个样式去控制,初始设置文本为隐藏,点击按钮的时候设置显示,再次点击按钮就讲其设置为隐藏

代码如下:

<html>
<head>
<h1>点击按钮样式</h1>
<style type="text/css">
	.content{
     
		display: none;
	}
</style>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
	$(function(){
     
		$(".btn").click(function(){
     
		var  flg = $(".content").is(":hidden");
		if(flg){
     
			$(".content").show();
		}else{
     
			$(".content").hide();
		}
	});
	})
</script>
</head>
<body>
	
<button class="btn">点击</button>
<span class="content">这里是显示的内容 略略略~</span>
</body>
</html>

完毕~

你可能感兴趣的:(jquery,js)