jquery的隐藏和显示 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>点我就会消失测试</title>
        <script src="js/jquery-1.4.2.js"></script>
        <!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
            谷歌的jquery的地址
        -->
        <!--
            <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
            Microsoft的jquery的地址。
        -->
        <script>
            //jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 库。
            $(document).ready(//读取全局的变化函数
                function(){//函数入口
                    $("p").click(function(){//如果p发生了点击事件，进入点击事件函数的入口
                    $(this).hide();//对这个点击事件的文本进行隐藏
                    });
                    
                    //下面是如果点击button按钮实现隐藏的函数
                    $("button").click(function(){
                        $("p").hide();//通过点击按钮一次性的隐藏所有的<p>的标签文档。
                    });
                    
                    //下面是一个通过id的标识，然后点击按钮实现按钮的消失
                    $("#btn").click(function(){
                        $(this).hide();
                    });
            });
        </script>
    </head>
    <body>
        <p style="color: red; size: a5;">点我就会消失</p>
        <p style="color: yellow; size: a3;">点我也会消失</p>
        <p style="color: red; size: a5;">点我就会消失</p>
        <p style="color: yellow; size: a3;">点我也会消失</p>
        <button type="button">Click me</button>
        <button type="button" id="btn">点我实现这个按钮的消失</button>
    </body>
</html>

 

 

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>通过点击按钮让clss类选择器的内容消失</title>
        <script src="js/jquery-1.4.2.js"></script>
        <script>
           //jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 库。
           /*
            * $(this).hide() - 隐藏当前元素
            * $("p").hide() - 隐藏所有段落
            * $(".test").hide() - 隐藏所有 class="test" 的所有元素
            * $("#test").hide() - 隐藏所有 id="test" 的元素
            * 
            * 
            * jQuery 使用 CSS 选择器来选取 HTML 元素。
            * $("p") 选取 <p> 元素。
            * $("p.intro") 选取所有 class="intro" 的 <p> 元素。
            * $("p#demo") 选取所有 id="demo" 的 <p> 元素。
            * 
            * 
            * jQuery 函数位于一个 document ready 函数中
            * $(document).ready(function(){
            *     --- jQuery functions go here ----
            * });
            */
           $(document).ready(function(){
                   $("#btn").click(function(){
                       $(".test").hide();//让class=test的内容消失
                   });
                   
                   //jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
                //下面的例子把所有 p 元素id=change的背景颜色更改为红色
                $("button#btn1").click(function(){
                    $("p#change").css("background-color","red");//对<p> id=change的段落css
                    $("button#btn1").css("background-color","aqua");//....
                });
                
           });
        </script>
    </head>
    <body>
        <h2 class="test">This is a heading</h2>
        <p class="test">This is a paragraph.</p>
        <p>This is another paragraph.</p>
        <button type="button" id="btn">Click me</button><br />
        <!--改变颜色的实验-->
        <p id="change">这块的颜色会变成红色</p>
        <button id="btn1">点击我对上面的颜色进行改变</button>
    </body>
</html>

 

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>隐藏和显示</title>
        <script src="../js/jquery-1.4.2.js"></script>
        <script>
            /*
             * $(selector).hide(speed,callback);
             * $(selector).show(speed,callback);
             * 
             * 可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
             * 可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
             */
            $(document).ready(function(){
                $("#hide").click(function(){
                    $("#p1").hide(1000);//1000ms
                });
                $("#show").click(function(){
                    $("#p1").show(1000);//1000ms
                });
            });
        </script>
    </head>
    <body>
        <p id="p1">如果点击“隐藏”按钮，我就会消失。</p>
        <button id="hide" type="button">隐藏</button>
        <button id="show" type="button">显示</button>
    </body>
</html>

 

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>toggle的切换功能</title>
        <script src="../js/jquery-1.4.2.js"></script>
        <script>
            //jQuery toggle()
            /*
             * 通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
             * 显示被隐藏的元素，并隐藏已显示的元素：
             */
            $(document).ready(function(){
                $("button").click(function(){
                    $("p").toggle(1000);
                });
            });
        </script>
    </head>
    <body>
        <button type="button">切换</button>
        <p>这是一个段落。</p>
        <p>这是另一个段落。</p>
    </body>
</html>

 

posted @ 2019-07-15 23:57  薄眠抛却陈年事。  阅读(784)  评论(0)  编辑  收藏  举报