12月24日jQuery事件-jQuery动画-九期线上班

jQuery事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery事件</title>
    <script src="jquery-3.4.1.min.js"></script>
    <style>
        #phpcn{
            background-color: #0C9A9A;
            border-radius: 2px;
            padding: 20px;
        }
        button{
            background-color: #0E9A00;
            border: 0;
            border-radius: 2px;
            padding: 10px;
            margin-top: 5px;
        }
    </style>
</head>
<body>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3" onclick="offw()">移除button所有事件</button>
<button id="btn4" onclick="onew()">ONE</button>
</body>
<script>
    //one 第一次点击先添加元素 第二次点击时执行
    function onew(){
        $('button').one('click',function () {
            $('#btn4').after('<p id="phpcn">php</p>');
        })
    }
    //移除指定类元素事件
    function offw(){
        $('button').off()
    }
    $('#btn1').on('click',function () {
        alert('按钮1被点击了')
    });
    $('#btn2').on( "click", function() {
        alert($( this ).text() + '666' );
        });
</script>
</html>

jQuery动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery动画</title>
    <script src="jquery-3.4.1.min.js"></script>
    <style>
        #phpcn{
            background-color: #0C9A9A;
            border-radius: 2px;
            padding: 20px;
        }
        button{
            background-color: #0E9A00;
            border: 0;
            border-radius: 2px;
            padding: 10px;
            margin-top: 5px;
        }
    </style>
</head>
<body>
<div id="nav">
    <p>AA</p>
    <p>BB</p>
    <p>CC</p>
</div>
<button onclick="hidet()">隐藏#NAV</button>
<button onclick="showt()">显示#NAV</button>
<button onclick="slideUpt()">滑动隐藏#NAV</button>
<button onclick="slideDownt()">滑动显示#NAV</button>
<button onclick="slideTogglet()">滑动显示+隐藏#NAV</button>
<button onclick="fadeInt()">淡入显示#NAV</button>
<button onclick="fadeOutt()">淡出隐藏#NAV</button>
</body>
<script>
    //淡出隐藏 fadeOut
    function fadeOutt() {
        $('#nav').fadeOut(1000);
    }
    //淡入显示 fadeIn
    function fadeInt() {
        $('#nav').fadeIn(1000);
    }
    //滑动显示+隐藏 slideTogglet
    function slideTogglet() {
        $('#nav').slideToggle();
    }
    //滑动显示 slideDownt
    function slideDownt() {
        $('#nav').slideDown();
    }
    //滑动隐藏 slideUp
    function slideUpt() {
        $('#nav').slideUp();
    }
    //隐藏 hide
    function hidet() {
        $('#nav').hide();
    }
    //显示 show
    function showt() {
        $('#nav').show();
    }
</script>
</html>

jQuery事件

jQuery动画

相关文章