• JQ语法1


    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
    <div class="container">
    <div class="jumbotron">
    <h1>Let's Have fun</h1>
    <button class="btn btn-primary" id="btn1">按钮1</button>
    <button class="btn btn-success" id="btn2">按钮2</button>
    <button class="btn btn-info" id="btn3">按钮3</button>
    <button class="btn btn-warning" id="btn4">按钮4</button>
    </div>

    <div class="row">
    <div class="col-xs-3">
    <div id="panel1" class="panel panel-primary">
    <div class="panel-heading">
    #panel1
    </div>
    <div class="panel-body">
    content
    </div>
    </div>
    </div>

    <div class="col-xs-3">
    <div id="panel2" class="panel panel-primary"style="display: none;">
    <div class="panel-heading">
    #panel2
    </div>
    <div class="panel-body">
    content
    </div>
    </div>
    </div>

    <div class="col-xs-3">
    <div id="panel3" class="panel panel-primary"style="display: none;">
    <div class="panel-heading">
    #panel3
    </div>
    <div class="panel-body">
    content
    </div>
    </div>
    </div>

    <div class="col-xs-3">
    <div id="panel4" class="panel panel-primary">
    <div class="panel-heading">
    #panel4
    </div>
    <div class="panel-body">
    content
    </div>
    </div>
    </div>
    </div>
    </div>
    <!--01-->
    <script type="text/javascript">
    // $()进行取值
    // function $(id){
    // return document.getElementById(id);
    // }

    $(document).ready(function(){
    //拿到panel1让它以300ms隐藏掉,再以1000ms展示出来
    $('#panel1').hide(300).show(1000);
    //拿到panel1让它以1s上去,再延迟1s,再以1s下来;
    $('#panel1').slideUp(1000).delay(1000).slideDown(1000);
    //fadeToggle(1000)渐入 可以获取当前的状态 fadeOut() fadeIn()
    $('#panel1').fadeToggle(1000).fadeToggle(1000);
    // 和.hide() .show()
    $('#panel1').toggle(1000).toggle(1000);

    //使用jQ增加css样式
    $('#panel1').css({
    color:'red',
    fontweight:'bold',
    display:'none'
    });
    $('#panel2').css({
    // 增加透明度
    opacity:'0.5'
    })
    })
    </script>

    </body>
    </html>

  • 相关阅读:
    Linxu指令--date,cal
    Linux指令--diff
    Linux指令--ln
    Linux指令--rcp,scp
    Linux指令--telnet
    Linux指令--traceroute,netstat,ss
    Linux指令--ping
    Linux指令--route
    Linux指令--ifconfig
    Linux指令--性能监控和优化命令相关指令
  • 原文地址:https://www.cnblogs.com/weixin2623670713/p/12985651.html
Copyright © 2020-2023  润新知