jquery点击按钮显示及隐藏元素

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <style type="text/css">
            ul {
                width: 250px;
                height: 290px;
                font-size: 16px;
                font-family: "Blackadder ITC";
                color: #22dddd;
                background-color: #123456;
            }
           
            .highlight {
                color: red;
            }
           
            #btn {
                width: 60px;
                height: 20px;
                font-size: 13px;
                text-align: center;
                position: absolute;
                margin: 0 0 0 30px;
            }
        </style>
        <script type="text/javascript" src="jquery.min.js">
        </script>
        <script type="text/javascript">
            $(function(){
                $all=$("#all li:gt(5)");
                $("#btn").click(function(){
                    if($all.is(":hidden")){
                        $all.hide().show("fast");
                        $("#btn").val("big");
                        $("#all li").filter(":contains('canno'),:contains('microsoft')").addClass("highlight");
                    }else{
                        $all.show().hide("fast");
                        $("#btn").val("small");
                        $("#all li").filter(":contains('canno'),:contains('microsoft')").removeClass("highlight");
                    }
                });
            })  ;                         
                               
                   
        </script>
    </head>
    <body>
        <ul id="all">
            <li>
                lenovo
            </li>
            <li>
                dell
            </li>
            <li>
                hp
            </li>
            <li>
                microsoft
            </li>
            <li>
                sun
            </li>
            <li style="display:none;">
                cisco
            </li>
            <li style="display:none;">
                intel
            </li>
            <li style="display:none;">
                amd
            </li>
            <li style="display:none;">
                canno
            </li>
            <li style="display:none;">
                apple
            </li>
            <li style="display:none;">
                ibm
            </li>
            <li style="display:none;">
                acer
            </li>
            <li style="display:none;">
                sony
            </li>
            <li style="display:none;">
                toshiba
            </li>
            <li style="display:none;">
                sumsung
            </li>
        </ul>
        <input type="button" id="btn" value="small"/>
    </body>
</html>






<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <style type="text/css">
            ul {
                width: 250px;
                height: 290px;
                font-size: 16px;
                font-family: "Blackadder ITC";
                color: #22dddd;
                background-color: #123456;
            }
           
            .highlight {
                color: red;
            }
           
            #btn {
                width: 60px;
                height: 20px;
                font-size: 13px;
                text-align: center;
                position: absolute;
                margin: 0 0 0 30px;
            }
        </style>
        <script type="text/javascript" src="jquery.min.js">
        </script>
        <script type="text/javascript">
            $(function(){
                $all = $("#all li:gt(5)");
                $("#btn").toggle(function(){
                    $all.hide().show("fast");
                    $("#btn").val("big");
                    $("#all li").filter(":contains('canno'),:contains('microsoft')").addClass("highlight");
                }, function(){
                    $all.show().hide("fast");
                    $("#btn").val("small");
                    $("#all li").filter(":contains('canno'),:contains('microsoft')").removeClass("highlight");
                });
            });
        </script>
    </head>
    <body>
        <ul id="all">
            <li>
                lenovo
            </li>
            <li>
                dell
            </li>
            <li>
                hp
            </li>
            <li>
                microsoft
            </li>
            <li>
                sun
            </li>
            <li style="display:none;">
                cisco
            </li>
            <li style="display:none;">
                intel
            </li>
            <li style="display:none;">
                amd
            </li>
            <li style="display:none;">
                canno
            </li>
            <li style="display:none;">
                apple
            </li>
            <li style="display:none;">
                ibm
            </li>
            <li style="display:none;">
                acer
            </li>
            <li style="display:none;">
                sony
            </li>
            <li style="display:none;">
                toshiba
            </li>
            <li style="display:none;">
                sumsung
            </li>
        </ul>
        <input type="button" id="btn" value="small"/>
    </body>
</html>




toggle()方法的效果就是切换元素的可见状态;即如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。

下面说一下toggle(fn,fn)方法的使用,效果是:每次点击后依次调用函数;如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一 元素时,则触发指定的第二个函数,如果有更多函数,则再次触发,直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。注意这里本身已经有点击触发 调用函数的功能,不需要另外.click(fn)了


你可能感兴趣的:(JavaScript,jquery,Microsoft,HP,Cisco)