jquery中html、before、after、append、prepend应用

<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 条评论
登录 后参与评论

相关文章

来自专栏deepcc

浏览器的visibilitychange 事件ie10以下不兼容

58460
来自专栏菩提树下的杨过

jquery-barcode:js实现的条码打印

这是一个纯js的jQuery插件,项目地址:http://barcode-coder.com/en/barcode-jquery-plugin-201.html...

32550
来自专栏hbbliyong

WebBrowser引用IE版本问题,更改使用高版本IE

 做了一个Winform的项目。项目里使用了WebBrowser控件。以前一直都以为WebBrowser是直接调用的系统自带的IE,IE是呈现出什么样的页面We...

30140
来自专栏GIS讲堂

Highcharts导出图片

Highcharts是在做项目涉及到统计图的时候大家的首选,同时也会用到highcharts的export功能,将统计图导出为图片,刚好,最近也遇到了这样的事情...

70220
来自专栏IT笔记

SpringBoot开发案例之微信小程序录音上传

书接上回的《SpringBoot开发案例之微信小程序文件上传》,正常的业务流程是,口语测评需要学生通过前端微信小程序录入一段音频,通过调用第三方音频处理服务商进...

1K80
来自专栏IT杂记

Storm客户端提交任务失败原因分析

36800
来自专栏遊俠扎彪

什么是RX和TX

通常使用ifconfig查看网络接口的时候,会显示TX和RX数据,其实很简单:

1.3K70
来自专栏吴伟祥

Linux命令缩写英文对照记忆(〇) 转

13620
来自专栏信安之路

必知必会的安全工具

渗透测试中手工测试固然重要,但是测试工具也是必不可少的,一个好的工具可以让我们在渗透测试中事半功倍,俗话说,工欲善其事必先利其器,所以工具是很重要的,本文就主要...

13600
来自专栏Java学习网

Java 语言版本整理,先到1.8版本,不全请补充

Java 语言版本 JDK 1.1.4 Sparkler 宝石 1997-09-12 JDK 1.1.5 Pumpkin 南瓜 1997-12-13 JDK 1...

28450

扫码关注云+社区

领取腾讯云代金券