jquery代码规范让代码越来越好看

2024-05-06 15:01:48

字体：大中小

来源：转载

供稿：网友

最近学了jQuery,感觉这个jQuery是真的挺不错的，果然像他说的那样，少些多做！刚一入手感觉真是不错。但是写多了，就会发现这个代码一行居然能写那么长。而且可读性还不好。有幸自己买了一本锋利的jQuery这本书。我就整理了下。到底在实际应用中怎么让自己的jQurey的代码看起来可读性强，而且还有美感。我就用了了本书中的一个小例子。来教教大家代码应该怎么写菜好看！

废话不多说，想把这个demo代码奉上。各位爷！您瞧好啊~

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>菜单栏</title> <style> *{  margin: 0;  padding: 0; } .box{  width: 400px;  height: 280px;  background-color: red;  margin: 50px auto;  border: 1px solid #000; } .box .menu{  width: 100%;  height: 100%;  background-color: gold;  list-style: none; } .box .menu>.level1{  width: 100%;  height: auto;  line-height: 40px;  list-style: none; } .box .menu>.level1>a.current{  background-color: green;  color: #0a0a0a;  text-decoration: none; } .box .menu>.level1>a{  display: inline-block;  background-color: gray;  width: 100%;  text-align: center;  text-decoration: none; } .box .menu>.level1>.level2{  width: 100%;  height: 160px;  background-color: white;  display: none;  float: left; } .box .menu>.level1:nth-of-type(1)>.level2{  display: block; } .box .menu>.level1>.level2 li{  width: 100%;  height: 40px;  list-style: none;  background-color: gainsboro;  text-align: center; } </style> <script src="//www.vevb.com/uploads/allimg/190905/1HJWK3-0.jpg"></script> <script> $(function () {  $(".level1>a").click(function () {  $(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next().hide();  return false;  }); }); </script></head><body><div class="box"> <ul class="menu"> <li class="level1">  <a href="#one" class="current">衬衫</a>  <ul class="level2">  <li>短袖衬衫</li>  <li>长袖衬衫</li>  <li>短袖衬衫</li>  <li>短袖衬衫</li>  </ul> </li> <li class="level1">  <a href="#one">卫衣</a>  <ul class="level2">  <li>开襟卫衣</li>  <li>开襟卫衣</li>  <li>开襟卫衣</li>  <li>开襟卫衣</li>  </ul> </li> <li class="level1">  <a href="#one">裤子</a>  <ul class="level2">  <li>短袖衬衫</li>  <li>裤子衬衫</li>  <li>短袖衬衫</li>  <li>裤子衬衫</li>  </ul> </li> </ul></div></body></html>

童鞋们。请看这段代码

 $(".level1>a").click(function () {  $(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next().hide();  return false;  });

上一篇：js实现文本上下来回滚动

下一篇：JS Select下拉框(支持输入模糊查询)