zoukankan html css js c++ java

7.jQuery 的基本绑定事件操作

主要讲On方法还有可以做一个选项卡：

on() 方法
语法: 元素集合.on(事件类型, 事件处理函数)
隐式迭代: 元素集合内有多少元素, 就会给多少元素绑定事件

记住事件类型哪里不要加 on 啊直接写事件名！

配合添加class 和移除class 再加 siblings方法即可：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
             600px;
            height: 400px;
            margin: 50px auto;
            border: deeppink 9px solid;
            background: deepskyblue;

        }

        ul{
           list-style: none;
            overflow: hidden;
             100%;
            height: 60px;
        }

        ul>li{
             200px;
            height: 100%;

            text-align: center;
            line-height: 60px;
            font-size: 40px;
            background: sandybrown;
            float: left;
            cursor: pointer;
        }

        ul>li.select{
            background: white;
        }

    </style>

</head>
<body>
<script type="text/javascript" src="jqsourse.js"></script>


<div class="box">
    <ul>

        <li class="select">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>

<script type="text/javascript">
$('li').on('mouseover',function (){
   $(this).addClass('select').siblings().removeClass('select');
});


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

写了个简单的热点选择器之后自己补全即可

本文来自博客园，作者：咸瑜，转载请注明原文链接：https://www.cnblogs.com/bi-hu/p/14797157.html

查看全文

相关阅读:
Beta 冲刺（5/7）
Beta 冲刺（4/7）
Beta 冲刺（3/7）
软件产品案例分析（团队）
Beta 冲刺（2/7）
Beta 冲刺（1/7）
BETA 版冲刺前准备
 Alpha事后诸葛（团队）
设计模式——访问者模式
 设计模式——命令模式

原文地址：https://www.cnblogs.com/bi-hu/p/14797157.html

7.jQuery 的 基本绑定事件操作

7.jQuery 的基本绑定事件操作