JQ学习日志02

 　　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" />