jq(事件)

2024-03-21 14:45:46

绑定方法

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<button id="d1">A</button>
<button id="d2">B</button>
<script>
    //第一种
    $('#d1').click(function (){alert('AAAAAAAAAAAA')})
    //第二种
    $('#d2').on('click',function (){alert('BBBBBBBBBBBBBB')})
</script>
</body>

　　克隆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <style>
        #d1{
            height: 100px;width: 100px;border-radius: 50%;
            background: red;
            border: 2px solid green;
        }
    </style>
</head>
<body>
<button id="d1">A</button>
<button id="d2">B</button>
<script>
    $('#d1').on('click',function (){
        //默认只克隆css、html，不克隆csript
        // $('#d1').clone().insertBefore($('#d2'))
        //加参数克隆script
        $('#d1').clone(true).insertBefore($('#d2'))
    })
</script>
</body>
</html>

clone

模态框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <style>
        .cover{
            position: fixed;
            background: rgba(75, 71, 71, 0.6);
            z-index: 99;
            top:0;left: 0;right: 0;bottom: 0;
        }
        .modal{
            background: white;
            border: 1px solid black;
            height: 130px;width: 200px;
            position: fixed;top:40%;left: 40%;
            z-index: 100;
        }
        .hide{display: none}
    </style>
</head>
<body>
<div>我是底层</div>
<div id="d1" class="cover hide"></div>
<button id="b1">login</button>
<div id="d2" class="modal hide">
    name:<input type="text">
    pwd:<input type="password">
    <button id="b2">ok</button>
    <button id="b3">cencel</button>
</div>
<script>
    $d1Ele = $('#d1')
    $d2Ele = $('#d2')
    $b1Ele = $('#b1')
    $b2Ele = $('#b2')
    $b3Ele = $('#b3')
    $b1Ele.click(function (){
        $d1Ele.removeClass('hide');
        $d2Ele.removeClass('hide')}
    )
    $b3Ele.on('click',function (){
        $d1Ele.addClass('hide');
        $d2Ele.addClass('hide')
    })

</script>
</body>
</html>

modal

菜单栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <style>
        body{margin: 0}
        .menu{
            float: left;
            height: 100%;width: 10%;
            background: yellow;
            position: fixed;
        }
        .title{
            font-size: 20px;
            text-align: center;

        }
        .items{
            display: block;
        }
        .hide{display: none}
    </style>
</head>
<body>
    <div class="menu">menu
        <div class="title">一一一
            <span class="items" >111</span>
            <span class="items" >222</span>
            <span class="items" >333</span>
        </div>
        <div class="title">二二二
            <div class="items" >111</div>
            <div class="items" >222</div>
            <div class="items" >333</div>
        </div>
        <div class="title">三三三
            <div class="items" >111</div>
            <div class="items" >222</div>
            <div class="items" >333</div>
        </div>
    </div>
</body>
<script>
    $('.title').click(function (){
        $('.items').addClass('hide')
        $(this).children().removeClass('hide')
    })
</script>
</html>

美化菜单栏

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <style>
        body{margin: 0}
        #d1{background: yellow;
            height: 20px;width: 20px;
            position: fixed;
            left: 100px;top: 100px;
        }
        .items{
            width: 50px;height: 20px;
            background: red;
            position: absolute;
        }
        #d11{top: 20px}
        #d12{top: 40px}
        #d13{top: 60px}
        .hide{display: none}
    </style>
</head>
<body>
    <div id="d1">
        <div id="d11" class="items hide">首页</div>
        <div id="d12" class="items hide">管理</div>
        <div id="d13" class="items hide">顶部</div>
    </div>
</body>
<script>
    $('#d1').mouseenter(function (){
        $('.items').removeClass('hide')
    })
    $('#d1').mouseleave(function (){
        $('.items').addClass('hide')
    })
</script>

美化menu

scroll

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <style>
        .hide{display: none}
        #a1{
            width: 30px;
            height: 30px;
            position: fixed;
            left: 50px;
            bottom: 50px;
            background: black;
        }
        div{height: 50000px}

    </style>
</head>
<body>
<div>
    <a href="" id="a1" class="hide"></a>
</div>>
</body>
<script>
    $(window).scroll(function (){
        if($(window).scrollTop()>300){$('a').removeClass('hide')}
        else{$('#a1').addClass('hide')}
    })
    $('#a1').click(function (){
        $(window).scroll(0)
    })
</script>

scroll

登录框

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <style>

    </style>
</head>
<body>
<div>
    name:<input type="text" id="name">
    <span style="color: red"></span>
    pwd:<input type="password" id="pwd">
    <span style="color: red"></span>
    <button id="ok">ok</button>
</div>
</body>
<script>
    $('#ok').click(function (){
        let nameEle = $('#name').val()
        let pwdEle = $('#pwd').val()
        if (!nameEle){$('#name').next().text('请输入用户名')}
        if (!pwdEle){$('#pwd').next().text('请输入密码')}
    })
    $('input').focus(function (){
        $(this).next().text('')
    })
</script>

input框实时检测

<body>
    <input type="text" id="i1">
</body>
<script>
    $('#i1').on('input',function (){console.log(this.value)})
</script>

input框实时检测

阻止后续事件执行

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<form action="">
    <span></span>
    <input type="submit">
    <script>
        //第一种
        $('input').click(function (){
            $('span').text('aaaaaaaaaaa')
        return false
        })
        //第二种
        // $('input').click(function (e){$('span').text('bbbbbb')
        // e.preventDefault()
        // })
    </script>
</form>
</body>

阻止后续事件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <div>div
        <p>div>p
            <span>
                div>p>span
            </span>
        </p>
    </div>
    <script>
        //第一种
        $('span').click(function (){alert('span');return false})
        $('p').click(function (){alert('p');return false})
        $('div').click(function (){alert('div')})
        //第二种
        // $('span').click(function (e){alert('span');e.stopPropagation()})
        // $('p').click(function (e){alert('p');e.stopPropagation()})
        // $('div').click(function (){alert('div')})
    </script>
</body>

阻止事件冒泡

动画效果

$('div').hide(3000)
$('div').show(3000)
$('div').slideUp(3000)
$('div').slideDown(3000)
$('div').fadeOut(2000)
$('div').fadeIn(2000)
$('div').fadeTo(2000,0.4)

动画效果

each

$('div').each(function(index){console.log(index)})
$('div').each(function(index,obj){console.log(index,obj)})
$.each([111,222,333,],function(index,obj){console.log(index,obj)})

each

码农公寓

绑定方法

克隆

模态框

菜单栏

阻止后续事件执行

动画效果

each

相关文章

　　克隆