show,hide, slideToggle
<script type="text/javascript"> $(document).ready(function(){$("a").addClass("test").show().html("cssrain");//对比:$("a").addClass("test").html("cssrain");}); </script>
显示隐藏的匹配元素。html("cssrain"):设置每一个匹配元素的html内容我们发现超连接里面的内容已经被替换了.
<script type="text/javascript">$(document).ready(function() {$("a").click(function() { $(this).hide("slow", function() { alert("hello world"); }); return false; }); }); </script>
现在,只要你点击超链接,超链接就会慢慢的消失。“return false"表示保留默认行为,因此页面不会跳转。并且弹出hello world。
<script type="text/javascript"> $(document).ready(function(){$("#head").click(function(){$("#content").slideToggle("slow",function(){ alert("Hello,cssrain.."); } );});}); </script> 通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式隐藏或显示。返回值jQuery参数speed (String|Number): (可选) 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000) callback (Function): (可选) 在动画完成时执行的函数实际是对元素添加了style="display: block/none的属性;
<script type="text/javascript"> $(document).ready(function(){$("#head2").click(function(){$("<input type='text' name='ddd' id='ddd' value='hello ,cssrain..' ><br>").appendTo("#ccc");});$("#head1").click(function(){$("#rain").append("<input type='text' name='ddd' id='ddd' value='hello ,cssrain..' ><br>");});}); </script>
appendTo和append
appendTo将内容传给相应的元素。append相应的元素附加上内容。例如:
<script type="text/javascript">
$(document).ready(function() {
$("#head").click(function() {
$("<input type='text' name='dd1' id='dd1' value='1111111111111'><br>").appendTo("#content");
});
$("#head1").click(function() {
$("#content1").append("<input type='text' name='dd1' id='dd1' value='22222222222'><br>");
});
});
</script>
下面是简单的代码:<p id="head">111111111111111</p>
<div id="content"></div>
<p id="head1">2222222222222222</p>
<div id="content1"></div>
p的隐藏显示切换。
例1:
<script type="text/javascript">
$(document).ready(function() {
$("#Button1").toggle(
function() {
$("p").show();
},
function() {
$("p").hide();
});
});
</script>
<p>这里本来是 显示的。</p>
<Button id="Button1">33333333333333333</Button>
<p style="display: none">这里本来是隐藏的</p>
例2:
<script type="text/javascript">
$(document).ready(function() {
$("#Button1").click(function() {
$("p").toggle();
});
});
</script>
<p>这里本来是 显示的。</p>
<p style="display: none">这里本来是隐藏的</p>
<input id="Button1" type="button" value="button" />