欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery 事件

程序员文章站 2022-07-06 12:40:41
事件注册单个事件注册语法: $('div').click(function () { 处理的事情 })$('div').click(function () { $(this).css('backgroundColor', 'red') });$('div').mouseenter(function ... ......

事件注册

  • 单个事件注册

语法: $('div').click(function () { 处理的事情 })

$('div').click(function () {
   $(this).css('backgroundcolor', 'red') });

$('div').mouseenter(function () {
    $(this).css('backgroundcolor', 'black')  })

事件处理

on 绑定事件

因为普通注册事件方法的不足,jquery又创建了多个新的事件绑定方法bind() / live() / delegate() / on()等,其中最好用的是: on()

  • 可以绑定1个或者多个事件
$('div').on({
    click: function () {
      pass},

    mouseenter: function () {
      pass }
 })
  • 如果处理的事件是相同的
$('div').on("mouseenter mouseleave", function () {
    $(this).toggleclass('current') })
  • on 实现事件委托(委派)
$('ul').on('click', 'li', function () {
    alert('111') })
  • on 可以动态给未来创建的元素添加事件
$('ol').on('click', 'li', function () {
    alert(222)
})
var li = $('<li>lo的li</li>')
$('ol').prepend(li)
jQuery 事件
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        .current {
            background-color: purple;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div></div>
    <ul>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
    </ul>
    <ol>

    </ol>
    <script>
        $(function () {
            // 1. 单个事件
            $('div').click(function () {
                $(this).css('backgroundcolor', 'red')
            });
            $('div').mouseenter(function () {
                $(this).css('backgroundcolor', 'black')
            })

            $('div').on({
                click: function () {
                    pass
                },
                mouseenter: function () {
                    pass
                }
            })

            // 2. 事件处理, 可以绑定1个或者多个
            $('div').on({
                click: function () {
                    $(this).css('backgroundcolor', 'red')
                },
                mouseenter: function () {
                    $(this).css('backgroundcolor', 'blue')
                },
                mouseleave: function () {
                    $(this).css('width', '300px')
                }
            })

            // 2.1 如果处理程序相同
            $('div').on("mouseenter mouseleave", function () {
                $(this).toggleclass('current')
            })

            // 2.2 on可以实现事件委托(委派)
            $('ul').on('click', 'li', function () {
                alert('111')
            })

            // 2.3 on 可以给为来动态创建的的元素绑定事件
            $('ol').on('click', 'li', function () {
                alert(222)
            })
            var li = $('<li>lo的li</li>')
            $('ol').prepend(li)

        })


    </script>
</body>

</html>
jQuery 事件
<!doctype html>
<html>

<head lang="en">
    <meta charset="utf-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        ul {
            list-style: none
        }

        .box {
            width: 600px;
            margin: 100px auto;
            border: 1px solid #000;
            padding: 20px;
        }

        textarea {
            width: 450px;
            height: 160px;
            outline: none;
            resize: none;
        }

        ul {
            width: 450px;
            padding-left: 80px;
        }

        ul li {
            line-height: 25px;
            border-bottom: 1px dashed #cccccc;
            display: none;
        }

        input {
            float: right;
        }

        ul li a {
            float: right;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>

        $(function () {
            $('.btn').on('click', function () {
                var li = $('<li></li>')
                li.html($('.txt').val() + "<a href='javascript:;'> 删除</a>")
                $("ul").prepend(li);
                li.slidedown(); // 下滑
                $('.txt').val('')
            })

            $('ul').on('click', 'a', function () {
                $(this).parent().slideup(function () {  // 上滑
                    $(this).remove();
                });
            })

        })

    </script>
</head>

<body>

    <div class="box" id="weibo">
        <span>微博发布</span>
        <textarea name="" class="txt" cols="30" rows="10"></textarea>
        <button class="btn">发布</button>
        <ul>
        </ul>
    </div>
</body>

</html>