jquery中hide、show、slideUp、slideDown、animate应用
jquery中hide、show、slideUp、slideDown、animate应用
闵开慧
发布于 2018-03-30 13:53:18
发布于 2018-03-30 13:53:18
<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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读