jQuery end()函数示例
时间：2020-02-23 14:46:07 来源:igfitidea点击:
在本文中，我们将讨论jQuery中一种很少使用但功能强大的技术。
jQuery API提供了一种称为end()的强大技术，这是编写jQuery应用程序时非常方便的方法。
jQuery end
end()方法结束当前链中最近的过滤操作，并将匹配的元素集返回其先前状态。
此方法不带任何参数。
这是使用end()的一般语法：
- operation.end()
jQuery end()示例
以下示例演示了jQuery end()的用法。
<!doctype html>
<html>
<head>
<title>jQuery Traversing end</title>
<style>
.highlight{
background: yellow;
}
div{
display: block;
border: 3px solid black;
color: red;
padding: 5px;
margin: 25px;
width:250px;
}
span{
display: block;
border: 3px solid green;
color: black;
padding: 5px;
margin: 25px;
width:200px;
}
</style>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
</head>
<body>
<h2>jQuery find() demo</h2>
<button>Click</button>
<div>div
<span id="span1">Span 1
<span id="span2">Span2
</div>
<script>
$("button").click(function(){
$( "div" ).find( "#span1" ).addClass("highlight").end()
.find("#span2") .css("background-color", "red").end()
.animate({height: 250});
});
</script>
</body>
</html>
在此示例中，请查看此脚本部分，该脚本部分执行以上代码中的预期操作。
<script>
$("button").click(function(){
$( "div" ).find( "#span1" ).addClass("highlight").end()
.find("#span2") .css("background-color", "red").end()
.animate({height: 250});
});
</script>
操作从单击按钮开始。
首先，使用find()方法获取具有" id = span1"的span元素，并将其颜色更改为黄色。
然后调用end()方法，该方法从堆栈中弹出div上的最后一个过滤选项。
现在，它可免费用于其他操作。
然后找到" span2"并将颜色更改为红色。
再次，调用end方法以释放堆栈。
最后，我们使用height属性为div设置动画。
如果不使用end()方法，执行以下操作将看起来像下面的脚本。
<script>
$("button").click(function(){
var div = $( "div" );
div.find( "#span1" ).addClass("highlight");
div.find("#span2") .css("background-color", "red");
div.animate({height: 250});
});
</script>
或者
<script>
$("button").click(function(){
$( "div" ).find( "#span1" ).addClass("highlight");
$( "div" ).find("#span2") .css("background-color", "red");
$( "div" ).animate({height: 250});
});
</script>
这是当您操纵上述代码中使用的div这样的单个元素时，jQuery end()方法所做的事情。
因此，从这里开始尝试使用end方法。
现在，您可以使用end()方法摆脱应用程序中不需要的代码行。
