jQuery链式操作

最新推荐文章于 2023-03-01 21:59:13 发布

转载最新推荐文章于 2023-03-01 21:59:13 发布 · 96 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lhjit/p/3717120.html

文章标签：

#javascript #前端 #ViewUI

讨论jQuery的文章很多。然而，关于jQuery的链式操作的文章并无多少。好的代码会带来速度的提升。快速渲染和响应意味着更好的用户体验。

下面就来讲讲jQuery的链式操作。

很多时候我们写代码的时候会这样去写:

$("div").css("background","#eee")
$("div").text("关注前端，关注用户体验-冀");

这重复的去获取DIV这个节点非常影响性能，这时你可能会想到这样去写：

var div = $("div")
div.css("background","#eee")
div.text("关注前端，关注用户体验-冀");

不错，这样写也对，也是优化了重复去寻找节点。但是有没有更为简便的方法去写代码呢？

答案就在jQuery链式操作，这是个非常好的减少代码的书写方式，也去优化了性能方面的问题。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
border: 1px solid saddlebrown;
}
</style>
</head>
<body>

<div></div>

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$("div").css("background","#eee").text("关注前端，关注用户体验-冀");
</script>
</body>
</html>