jQuery基础——使用过滤器—3串联

        jQuery链式语法能够实现在一行代码中完成各种复杂的任务。但是在很多情况下用户希望jQuery方法能够操作不同的jQuery对象，或者前后方法能够互相影响，为此jQuery提供两个串联方法：addBack()和end()。

1、合并jQuery对象

先看一个简单的示例。

		<div id="">
			<p>少时离家老大回，乡音无改鬓毛衰。</p>
			<p>儿童遇见不相识，笑问客家何处来。</p>
		</div>
		<script src="./js/jquery-3.6.0.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$("div").find("p").css({"border":"solid 1px red","margin":"4px"})
			})
		</script>

        在上面的代码中，$("div")匹配文档中<div>标签，然后调用jQuery对象 的find()方法获取<div>标签包含的两个<p>标签，此时$("div").find("p")属性两个不同的jQuery对象。此时在浏览器中预览，可以看到仅<p>标签显示了边框样式。如图所示。

        如果希望同时外围的<div>标签也定义相同的样式，则最简单的方法是重新书写一行代码，单独为div元素定义样式。显然这种做法是与jQuery的链式语法设计原则相违背的。为此jQuery定义了addBack()方法帮助用户把前后jQuery对象合并在一起，形成一个新的jQuery对象。 

$(function(){
				// 在find("p")后面添加addBack()方法，
				// 把$("div")和find("p")两个不同jQuery对象链接在一起，
				// 最后为他们定义统一的样式。
				$("div").find("p").addBack().css({"border":"solid 1px red","margin":"4px"})
			})

效果图： 

 

 对于筛选或查找后的元素，要加入先前所选元素时，使用addBack()方法会很有用。

2、返回jQuery对象

继续以上诉案例进行说明，如果希望先为<p>标签定义边框样式，再为<div>标签定义背景颜色，那么简单的做法就是重新换一行为<div>标签定义样式。不过现在利用jQuery定义的end()方法，可以保持在一行内完成两行任务，即当调用find("p").css()后，在调用end()方法返回$("div")方法匹配的jQuery对象，而不是find()方法所查找的jQuery。

		<script type="text/javascript">
			$(function(){
				$("div").find("p").addBack().css({"border":"solid 1px red","margin":"4px"})
				.end().css({"background":"blue","color":"#fff","padding":"4px"})
			});
		</script>

 

 效果图：