jQuery练习--隐藏和显示效果

最新推荐文章于 2020-06-23 16:22:56 发布
最新推荐文章于 2020-06-23 16:22:56 发布
阅读量723 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Geek_ymv/article/details/37772885
版权 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>click.html</title>
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
		<script type="text/javascript">
			$( function() {
				$("#hide").click( function() {
					//$("#content").hide();	
					$("#content").hide(1000); //规定隐藏的速度
				});
		
				$("#show").click( function() {
					//$("#content").show();
					$("#content").show(1000, test);
				});
			});

			/*
				$(selector).hide(speed,callback);
				$(selector).show(speed,callback);
				可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
				可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
			 */
			function test() {
				alert("hello,world");
			}
		</script>

	</head>

	<body>
		<p id="content">
			如果点击隐藏按钮，会消失。再次点击显示按钮，会显示。
		</p>

		<button id="hide">隐藏</button>
		<button id="show">显示</button>

	</body>
</html>


Geek_ymv
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[JQuery 学习笔记] 隐藏和显示 hide() 和 show()
GYK0812的博客
09-20 1206
hide() 和 show() 方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>6-1 显示与隐藏 </title> <script src..
jQuery简单实现列表隐藏和显示效果示例
10-21
主要介绍了jQuery简单实现列表隐藏和显示效果,结合实例形式分析了jQuery中slideToggle动态操作页面元素切换的相关技巧,需要的朋友可以参考下
jquery中显示与隐藏元素代码
09-30 133
一.元素的显示与隐藏 1.show().hide()方法 $("#div1").show()； //div 显示 $("#div1").hide()； //div 隐藏 二.渐入渐出的变幻 1.show(),hide()方法 ...
jQuery隐藏和显示效果实现
10-22
主要介绍了jQuery隐藏和显示效果实现的相关资料,需要的朋友可以参考下
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
10-22
主要介绍了jQuery基于toggle实现click触发DIV的显示与隐藏,结合实例形式分析了toggle方法用于切换页面元素样式的相关使用技巧,需要的朋友可以参考下
可展开和收缩的jquery FAQ问答列表特效
07-10
可展开和收缩的jquery FAQ问答列表特效
Python+selenium 实现不定位元素，输入enter键
xvpeipei123的博客
06-23 5935
Python+selenium 实现不定位元素，输入enter键 在写自动化测试代码的过程中，遇到了某些操作无需定位到元素，直接输入enter键，传统的方法都是 driver.find_element_by_id(“kw”).send_keys(Keys.ENTER) 不适用。 以下是实现不定位元素，输入enter键的方法 from selenium.webdriver.common.action_chains import ActionChains from selenium.webdriver.com
jQuery之标题与内容的显示与隐藏
gyueh的博客
05-14 890
需求：页面中有多条系统消息列表，点击其中一条消息时显示相应的消息内容而标题隐藏。 默认第一条消息显示内容不显示标题，如图： 点击第3条消息时，显示第三条信息的内容而标题隐藏 html部分代码如下： <div class="hx-bottom_content"> <div class="hx-news_item"> <div class="row hx-news_title"> <div class="col-lg-8 col-md-8 col-sm
jQuery效果之显示与隐藏
bboyjoe的博客
08-09 1001
hide([duration][,complete])——目标元素的隐藏； show([duration][,complete])——目标元素的显示； toggle([duration][,complete])——当目标元素隐藏时则显示，否则隐藏； 注：可选参数[duration]为方法执行的时间间隔；[,complete]为回调函数。 显示与隐藏
jQuery练习--隐藏与显示效果之间的切换
Geek_ymv的专栏
07-14 1132
toggle.html $( function() { $("button").click(function(){ $("p").toggle(1000); //通过jQuery可以使用toggle方法来切换hide()与show()方法。 }); }); /* $(selector).toggle(speed,c
jquery-migrate-1.2.1.js文件
10-23
jquery-migrate-1.2.1.js文件，处理jQuery和jqprint插件的版本不兼容问题
jQuery 效果- 隐藏和显示
12-13
div.panel,p.flip { width:90%; margin:auto; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; } div.panel { height:100px; display:none; } jQuery 效果- 隐藏和显示 隐藏、显示、切换，滑动，淡入淡出，以及动画，哇哦！ 点击 显示/隐藏面板 因为时间是宝贵的，我们提供快捷方便的学习方法。 在软件开发网,你可以学习需要的知识。 实例 简单的jQuery hide()方法演示。 另一个hide(
jquery-migrate
03-05
例如jQuery版本用的是1.x，计划升级到3.x，就可以在页面删除1.x版本，换成3.x版本，如果有脚本错误，就引入jquery-migrate插件用于兼容低版本，同时也显示低版本方法替换成新版本方法的方案。 jQuery migrate（转移...
使用js实现tab页签切换效果
热门推荐
Geek_ymv的专栏
10-23 5万+
效果图如下： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ...
使用jQuery实现select级联效果
Geek_ymv的专栏
10-28 1万+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> New Web Project $(function(){ var anhui_city = ["合肥", "芜湖", "蚌埠"];
使用js的定时器setTimeout()实现加载进度条效果
Geek_ymv的专栏
10-23 7900
效果图如下：
JS中定义对象方式三： 使用构造函数方式创建对象
Geek_ymv的专栏
03-13 7193
function Person(username, password) { //在执行第一行代码之前，js引擎会为我们生成一个对象。 this.username = username; this.password = password; this.getInfo = function() { alert(this.username +":"
JS中定义对象方式二： 使用工厂方式创建对象（传递参数，及其改进方法）
Geek_ymv的专栏
03-12 4392
//工厂方式创建对象 function createObject(username, password) { var object = new Object(); object.username = username; object.password = password; object.getInfo = function() {
js定时器setInterval()的使用
Geek_ymv的专栏
10-23 3038
效果图如下：
jQuery事件-div的显示隐藏及鼠标的移入移出
最新发布
06-11
好的，我可以帮你解答这个问题。要实现div的显示隐藏及鼠标的移入移出，可以使用jQuery的事件绑定和操作DOM元素的方法。以下是一个简单的示例代码： HTML代码： ``` <div id="myDiv">这是一个div</div> ``` CSS代码： ``` #myDiv { display: none; width: 200px; height: 200px; background-color: gray; } ``` jQuery代码： ``` $(document).ready(function() { // 鼠标移入事件 $('#myDiv').mouseenter(function() { $(this).css('background-color', 'red'); }); // 鼠标移出事件 $('#myDiv').mouseleave(function() { $(this).css('background-color', 'gray'); }); // 按钮点击事件 $('#myBtn').click(function() { // 切换div的显示和隐藏 $('#myDiv').toggle(); }); }); ``` 解释一下这段代码的逻辑： 1. 鼠标移入事件：当鼠标移入div元素时，将其背景色改为红色。 2. 鼠标移出事件：当鼠标移出div元素时，将其背景色改为灰色。 3. 按钮点击事件：当按钮被点击时，切换div元素的显示和隐藏状态。 其中，`mouseenter`、`mouseleave`和`click`都是jQuery的事件绑定方法，`toggle`是操作DOM元素的方法，用于切换元素的显示和隐藏状态。 希望这个示例能够帮到你，如果还有其他问题，请随时提出。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值