本篇内容介绍了“jquery中代码规范的方法是什么”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
代码如下：
<!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="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></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;
});请问你第一眼看着个你能一下子看明白是怎么回事吗？
哪怕是开发过几年的大神。也不能一眼就看出来这行代码要干啥。就是因为这行代码太长了。每读一次都要自讲前面的串联起来看。毫无美感，阅读性。
虽然jQuery做到了行为和内容的分离，但jQuery代码也应该拥有良好的层次结构机规范，这样才能进一步改善代码的可读性和可维护性。
所以代码应该写出这种样式
$(".level1>a").click(function () {
$(this).addClass("current")
.next().show()
.parent().siblings().children("a").removeClass("current")
.next().hide();
return false;
});将每一次对象执行的动作分割成单独一行。这样可读性就大大提高了。
但也不要随意分割，随意分割那你还不如分割呢。所以总结了，以下三点
1.对于同一个对象不超过3个操作的，可以直接写成一行
$(this).addClass("current").show();
2.对于同意对象的较多操作建议，每行写一个操作
$(this).addClass("current")
.show()
.fadeTo("mouseover")
.fadeTo("fast",1)
.unbind("click")
.click(function(){
//do something
});3.对于多个对象的少量操作，可以每一个对象写一行，如果涉及子元素，可以考虑适当的缩进，例如demo中的代码
$(this).addClass("current")
.childer("li").show().end()
.siblings().removeClass()
.children("a").hide();还要强调一点，就是要为代码添加注释；
jQuery 以其强大的选择器著称，有时候很复杂的问题用一行选择器就可以轻松解决，但是很容易写出来下面的代码
$("#table>tbody>tr:has(td:has(:checkbox:enabled))").css("background","red"); 哈哈，你能一眼认出来我吗？
在编写一个优秀的选择器的时候，千万不要忘记给这一段代码加上注释，这很重要，无论是自己日后阅读还是与他人分享、合作开发，注释都能起到良好的效果
//注释：在一个id为table的表格的tbody中，如果每一行的一列中的checkbox没有被禁用，则把这行的背景设为红色
$("#table>tbody>tr:has(td:has(:checkbox:enabled))").css("background","red");
通过类似的有意义的注释，能够培养良好的编码习惯和风格，提高开发效率。
jQuery对象和DOM对象的相互转换
在jQuery对象和DOM对象相互转换之前，先约定好定义变量的风格，如果获取的对象是jQuery对象，那么在变量面前加上$
例如：
var $variable = jQuery对象
如果获取的DOM对象；
var varible = DOM对象。
“jquery中代码规范的方法是什么”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
