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>
<!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使用时需要引入本地库文件,或者使用那个网址也可以