JavaScript与jQuery关于鼠标点击事件

即实现鼠标点击其中一个菜单发生样式的改变，当点击下一个菜单时，当前菜单样式改变，其他菜单均变为之前样式。

用JavaScript，jQuery都可以实现，只是后者是封装的JavaScript库，具有sibling()方法，可以直接使其同胞元素取消样式，而JavaScript需要使用循环来使其上一菜单样式取消，当前菜单加上样式。

实现代码：

1.JavaScript：

当点击当前菜单时，上一菜单样式取消，当前菜单增加该样式，为了下一菜单的实现，须将：onum = this;将当前li对象赋予onum。

this相当于是当前li对象。

<script>
  var arr = document.getElementsByTagName("li");
  var i,num = 0;
  onum = arr[num];
  
  for(i in arr){
    arr[i].onclick = function(){
      onum.className = ' ';
      this.className = "active";
      onum = this;
    }
  }
      
</script>

2.jQuery：

使用sibling()方法来使当前元素的同胞元素都取消该样式。

this表示当前元素。

<script>
  $("li").click(function(){
    $(this).addClass("active").siblings().removeClass("active");
  });
</script>

如此看来，jQuery是要比JavaScript简便一些，但jQuery思想还是使用的JavaScript思想，并未改变。

完整代码：

<!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>
    *{
        padding:0px;margin:0px;
        list-style:none;
    }
    .box{
        width: 400px;
        height: 50px;
        background-color: antiquewhite;
    }
    .box ul li{
        height: 50px;
        width: 25%;
        line-height: 50px;
        display: block;
        float: left;
        text-align: center;
    }
    ul li:hover{
        cursor: pointer;
    }
    .active{
        background:red;
    }
    </style>
</head>
<body>
    <div class="box">
        <ul>
           <li>1</li>
           <li>2</li>
           <li>3</li>
           <li>4</li>
        </ul>
    </div>
    <script>
        var arr = document.getElementsByTagName("li");
        var i,num = 0;
        onum = arr[num];
        
        for(i in arr){
            arr[i].onclick = function(){
                onum.className = ' ';
                this.className = "active";
                onum = this;
            }
        }
            
    </script>
</body>
</html>

JavaScript

<!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>
    *{
        padding:0px;margin:0px;
        list-style:none;
    }
    .box{
        width: 400px;
        height: 50px;
        background-color: antiquewhite;
    }
    .box ul li{
        height: 50px;
        width: 25%;
        line-height: 50px;
        display: block;
        float: left;
        text-align: center;
    }
    ul li:hover{
        cursor: pointer;
    }
    .active{
        background:red;
    }
    </style>
</head>
<body>
    <div class="box">
        <ul>
           <li>1</li>
           <li>2</li>
           <li>3</li>
           <li>4</li>
        </ul>
    </div>
    <script>
        var arr = document.getElementsByTagName("li");
        var i,num = 0;
        onum = arr[num];
        
        for(i in arr){
            arr[i].onclick = function(){
                onum.className = ' ';
                this.className = "active";
                onum = this;
            }
        }
            
    </script>
</body>
</html>

jQuery

注意：

在jQuery使用时需要引入本地库文件，或者使用那个网址也可以