码迷,mamicode.com
首页 > Web开发 > 详细

jQuery-事件

时间:2020-06-08 00:13:29      阅读:83      评论:0      收藏:0      [点我收藏+]

标签:href   ddc   hid   charset   src   需要   child   滚轮   欧美   

jQuery-事件

jQuery绑定事件

<script type="text/javascript">
    // 当页面框架加载完成之后(DOM结构),执行内部代码。
    $(function () {
        // 通过选择器找到指定标签
        $(‘li‘).onclick(function () {
            // 触发事件时,都会执行此匿名函数。  $(this)代表当前触发的标签。
        })
    })
</script>

技术图片

案例:左侧菜单实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery学习</title>
    <style>
        body {
            margin: 0;
        }
        .header {
            height: 48px;
            background-color: #499ef3;
        }
        .body .menu {
            position: fixed;
            top: 48px;
            left: 0;
            bottom: 0;
            width: 220px;
            border-right: 1px solid #dddddd;
            overflow: scroll;
        }
        .body .content {
            position: fixed;
            top: 48px;
            right: 0;
            bottom: 0;
            left: 225px;
            /* 超出范围的话,出现滚轮 */
            overflow: scroll;
        }
        .body .menu .title {
            padding: 8px;
            border-bottom: 1px solid #dddddd;
            background-color: #5f4687;
            color: white;
        }
        .body .menu .child {
            border-bottom: 1px solid #dddddd;
        }
        .body .menu .child a {
            display: block;
            padding: 5px 10px;
            color: black;
            text-decoration: none;
        }
        .body .menu .child a:hover {
            background-color: #dddddd;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>
<div class="header"></div>
<div class="body">
    <div class="menu">
        <div class="item">
            <div class="title" >国产</div>
            <div class="child">
                <a href="#">少年的你</a>
                <a href="#">我不是药神</a>
                <a href="#">我和我的祖国</a>
            </div>
        </div>
        <div class="item">
            <div class="title" >欧美</div>
            <div class="child hide ">
                <a href="#">战争之王</a>
                <a href="#">华尔街之狼</a>
                <a href="#">聚焦</a>
            </div>
        </div>
        <div class="item">
            <div class="title" >韩国</div>
            <div class="child hide">
                <a href="#">坏家伙们</a>
                <a href="#">寄生虫</a>
                <a href="#">燃烧</a>
            </div>
        </div>
    </div>
    <div class="content"></div>
</div>
<script type="text/javascript">
    $(function () {
        // 给所有样式有 title 的标签绑定事件
        $(‘.title‘).click(function () {
            // 当前触发事件的标签
            $(this).next().removeClass(‘hide‘);
            $(this).parent().siblings().find(‘.title‘).addClass(‘hide‘);
        })
    })
</script>
</body>
</html>

jQuery事件委托

jQuery的事件绑定是在页面加载完毕之后,找到相关标签并为其绑定事件,

如果后期通过js代码有新增表现,那么新标签中模式是没有事件的,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery学习</title>
</head>
<body>
<input type="button" id="btn" value="添加元素">
<ul id="greenBoy">
    <li>王宝强</li>
    <li>陈羽凡</li>
    <li>谢霆锋</li>
</ul>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $(‘li‘).click(function () {
            alert($(this).text());
        });
        $(‘#btn‘).click(function () {
            var tag = $(‘<li>‘);
            tag.text(‘alex‘);
            $(‘#greenBoy‘).append(tag);
        })
    })
</script>
</body>
</html>

为了避免类似这种情况的发生,jQuery中引入了事件委托的概念,只需要基于on进行绑定即可:

<script type="text/javascript">
    $(function () {
        // on的第一个参数:事件名称
        // 第二个参数:选择器
        // 第三个参数:事件触发时执行的函数
        $(‘#greenBoy‘).on("click","li",function () {
            alert($(this).text());
        });
        $(‘#btn‘).click(function () {
            var tag = $(‘<li>‘);
            tag.text(‘alex‘);
            $(‘#greenBoy‘).append(tag);
        })
    })
</script>

jQuery-事件

标签:href   ddc   hid   charset   src   需要   child   滚轮   欧美   

原文地址:https://www.cnblogs.com/Hedger-Lee/p/13063106.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!