专栏首页闵开慧jquery中hide、show、slideUp、slideDown、animate应用

jquery中hide、show、slideUp、slideDown、animate应用

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>jquery_slip.html</title><!--一个标签写错网页什么也不显示,查看网页源码格式明显不对-->
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("div.show").click(function(){
					$("div.content").slideToggle("slow");//不写默认为normal,后面函数一致
					// $("div.show").slideUp();
				});
			});
		</script>

		<script type="text/javascript">
		//注意选择标签不能忘记加"",否则动作不起作用
			$(document).ready(function(){
				//hide and show function test
				$("#hide_button").click(function(){
					$("#hide_show_content").hide("slow",function(){
						alert("The content is hided.");
					});					
				});
				$("#show_button").click(function(){
					$("#hide_show_content").show("slow",function(){
						alert("The content is showed.");
					});
				});

				//slideUp and slideDown function test
				$("button.slideUp").click(function(){
					$("p.slide_content").slideUp("slow");
				});
				$("button.slideDown").click(function(){
					$("p.slide_content").slideDown("slow");
				});

				//animate and reset test
				$("button#animate").click(function(){//可以直接用标签名调用id
					$("#box").animate({height:"30px"});
				});
				$("#reset").click(function(){
					$("#box").animate({height:"10px"});
				});

				//html application,其中可以加入内容页可以直接加入html标签内容
				$(".html").click(function(){
					$(".htmlContent").html("The html content.");
				});
				$(".htmlreset").click(function(){
					$(".htmlContent").html("html application into jquery.");
				});
				$(".htmlappend").click(function(){
					$(".htmlContent").append("append content.");
				});
				$(".htmlafter").click(function(){
					$(".htmlContent").after("after content.");
					//这里不能直接用函数
					// $("html.after").after(function(){
					// 	alert("You have add content after html content.");
					// });
				});
				$(this).click(function(){//也可以直接用this
					$(".htmlContent").before("before content",function(){
						alert("You have add content before html content.");
					});
				});
				$(".htmlprepend").click(function(){
					$(".htmlContent").prepend("html prepend content.");
				});
			});
		</script>
	</head>
	<body>
		<div class="content">
			<p>We are friends.</p>
			<p>We can do everything if you want. Do it by yourself.</p>
			<p>Don't tell it can not be done.</p>
		</div>
		<div class="show">
			<p>click here to show content.</p>
		</div>
		<br>
		<div id="hide_show">
			<p id="hide_show_content">There is the function hide and show test.</p>
			<button type="button" id="hide_button">hide</button>
			<button type="button" id="show_button">show</button>
		</div>
		<br>
		<div>
			<p class="slide_content">There is the function slipUp and slipDown test.</p>
			<button class="slideUp" type="button" >slideUp</button>
			<button class="slideDown" type="button">slideDown</button>
		</div>
		<br>
		<div id="box" style="background:#EF23E1;height=10px;width=10px;margin=6px;"></div>
		<button id="animate" type="button">animate</button>
		<button id="reset" type="button">reset</button>
		<br>
		<div>
			<p class="htmlContent">html application into jquery.</p>
			<button type="button" class="html">htmltest</button>
			<button type="button" class="htmlreset">htmlreset</button>
			<button type="button" class="htmlappend">htmlappend</button>
			<button type="button" class="htmlafter">htmlafter</button>
			<button type="button" class="htmlbefore">htmlbefore</button>
			<button type="button" class="htmlprepend">htmlprepend</button>
		</div>
	</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Go语言写Web 应用程序

    介绍 涵盖内容: 为载入和保存方法创建一个数据结构体 引用http包来创建一个web应用 引用template包来处理HTML模板 引用regexp包来验证用户...

    李海彬
  • 分享张戈博客自用的php网址在线转换二维码的API源码

    最新补充:博客已分享性能最好的 js 生成二维码方案==>传送门 去年张戈博客曾分享过一篇与二维码 API 有关的文章:《分享几个可用的二维码 API,以及给博...

    张戈
  • 解决启用wp super cache缓存后,页面追加多个斜杠仍然可以访问的隐患

    昨天一哥们在博客留言告知,启用缓存后,html 文章页面带上斜杠也还可以访问,试了下还真是这样。 ? 其实,想想也是,wp-super-cache 生成的文章缓...

    张戈
  • WordPress评论ajax动态加载,解决静态缓存下评论不更新问题

    这是一个历史遗留问题,自从博客部署了 PHP 纯静态缓存之后,所有页面都是 html 静态内容了,而且在七牛 CDN 静态分离之后,速度更是达到极致! ? 不过...

    张戈
  • HTML 5 视频直播一站式扫盲

    视频直播这么火,再不学就 out 了。 为了紧跟潮流,本文将向大家介绍一下视频直播中的基本流程和主要的技术点,包括但不限于前端技术。 1. H5 到底能不能做视...

    腾讯Bugly
  • 为网站开启Nginx缓存加速,支持html伪静态页面

    上一篇文章分享了如何开启 Nginx 的缩略图功能,也提到了 Nginx 缩略图在完美替代七牛缩略图或 PHP 缩略图的同时,还会带来一定的 CPU 负载消耗。...

    张戈
  • Nginx开启fastcgi_cache缓存加速,支持html伪静态页面

    张戈博客不久前分享过 Nginx 开启缓存为 WordPress 加速的教程,其中分享了 2 种缓存模式:代理模式和本地模式。我一直以为单个 ngx_cache...

    张戈
  • 前端黑魔法之远程控制地址栏

    由于今天看到一篇文章《危险的 target=”_blank” 与 “opener”》,里面提到了一个老知识点,就是target=”_blank”的时候,新打开的...

    FB客服
  • WordPress前端html代码压缩优化,附对应知更鸟主题压缩报错的解决方案

    今天,逛松果博客的时候,看到了他分享的《wordpress 通过代码压缩网页》一文,让我想起了其实张戈博客之前也用过这个功能,当时是在 WP 迷博客看到的纯代码...

    张戈
  • Goroutine(协程)为何能处理大并发?

    简单来说:协程十分轻量,可以在一个进程中执行有数以十万计的协程,依旧保持高性能。 进程、线程、协程的关系和区别: 进程拥有自己独立的堆和栈,既不共享堆,亦不共享...

    李海彬

扫码关注云+社区

领取腾讯云代金券