jquery代码的编写

最新推荐文章于 2025-06-19 10:56:21 发布

我真想闪现过去给你一套伤害

最新推荐文章于 2025-06-19 10:56:21 发布

阅读量3.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： jquery学习文章标签： jquery

本文链接：https://blog.youkuaiyun.com/zhongyouda/article/details/79653559

jquery学习专栏收录该内容

1 篇文章

订阅专栏

首先下载最新版本的jquery文件。点击打开链接

下载开发版，主要用于测试、学习和开发。

jquery下载好的文件放在项目的scripts中，在页面直接引用就可使用。

default.jsp的代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		alert("hello world");
	});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery的引用</title>
</head>
<body>
	<p>你好啊！</p>
</body>
</html>

jquery代码风格

1 链式操作风格

index.jsp的代码如下所示：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery1测试</title>
<!-- 引入jQuery -->
<script type="text/javascript" src="scripts/jquery.js"></script>

<script type="text/javascript">
	//等待dom元素加载完毕
$(document).ready(function(){
	$(".level1 > a").click(function(){
		$(this).addClass("current")              //给当前元素添加“current”样式
			.next().show()							 //下一个元素显示
			.parent().siblings().children("a").removeClass("current")
													 //父元素的同辈元素的子元素<a>移除“current”样式
			.next().hide();							 //他们的下一个元素隐藏
		return false;
	});
});
</script>
</head>
<body>
<p>第一步：初始化：</p>
	<div class="box">
		<ul class="menu">
			<li class="level1">
				<a href="#none">衬衫</a>
				<ul class="level2">
					<li><a href="#none">短袖衬衫</a></li>
					<li><a href="#none">长袖衬衫</a></li>
					<li><a href="#none">短袖T恤</a></li>
					<li><a href="#none">长袖T恤</a></li>
				</ul>
			</li>
			<li class="level1">
				<a href="#none">卫衣</a>
				<ul class="level2">
					<li><a href="#none">开襟卫衣</a></li>
					<li><a href="#none">套头卫衣</a></li>
					<li><a href="#none">运动卫衣</a></li>
					<li><a href="#none">童装卫衣</a></li>
				</ul>
			</li>
			<li class="level1">
				<a href="#none">裤子</a>
				<ul class="level2">
					<li><a href="#none">短裤</a></li>
					<li><a href="#none">休闲裤</a></li>
					<li><a href="#none">牛仔裤</a></li>
					<li><a href="#none">免烫卡其裤</a></li>
				</ul>
			</li>
		</ul>
	</div>
</body>
</html>

以上代码总结代码格式优化三种情况：

（1）对于同一个对象不超过3个操作的，可以直接写成一行。代码如下：

$("li").show().unbind("click");

（2）对于同一个对象的较多操作，建议每行写一个操作。代码如下：

$(this).removeClass("mouseout")
        .addClass("mouseover")
	.stop()
	.fadeTo("fast",0.6)
	.fadeTo("fast",1)
	.unbind("click")
	.click(function(){	
	});

（3）对于多个对象的少量操作，可以每个对象写一行，如果涉及子元素，可以考虑适当的缩进。例如上面提到的代码：

$(this).addClass("highlight")
	.children("li").Show().end()
.siblings().removeClass("highlight")
	.children("li").hide();

程序块严格采用锁紧风格书写，能保证代码清晰易读，风格一致。

为代码添加注释

jquery以其强大的选择器主城，有哦时候很复杂的问题用一行选择器就可以轻松解决。但是使用jQuery进行代码编写时应该注意一个问题，就是必要的注释。请看下面的例子，代码如下：

$("#table>tbody>tr:has(td:has(:checkbox:enabled))").css("background","red");

这行代码即使是经验丰富的jQuery开发者也不能立刻看懂。

这行代码的作用是，在一个id为table的表格的tbody元素中，如果每行的一列中的checkbox没有被禁用，则把这一行的背景色设为红色。

jquery的选择器很强大，能够省去使用普通的javascript必须编写的很多行代码。但是，在编写一个有写的选择起的时候，千万不要忘记给这段代码加上注释，这很重要。无论是自己日后阅读还是与他人分享、合作开发，注释都能起到良好的效果。在上段代码片段中加上注释就能提高其易读性，如下所示：

//在一个id为table的表格的tbody元素中，如果每行的一列中的checkbox没有被禁用，则把这一行的背景色设为红色。
$("#table>tbody>tr:has(td:has(:checkbox:enabled))").css("background","red");

通过类似有意义的注释，能够培养良好的编码习惯和风格，提高开发效率。