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

  • 相关阅读:
    notepad++的使用
    windows下的ubuntu
    VMware Tools安装
    Terminal命令
    Linux文件操作
    vim学习
    Windows桌面美化
    求解移动字符串问题
    求解回文序列问题
    用Git命令把本地项目,提交到远程仓库
  • 原文地址:https://www.cnblogs.com/bi-hu/p/14797157.html
Copyright © 2011-2022 走看看