jQuery链式操作如何实现以及为啥要用链式操作

Posted 2023-03-19

链式操作就是分步骤地对jQuery对象实现各种操作，举个栗子：

$("#Test").css('color','red').show(200).removeClass('style');

上面的例子就是链式操作，在一行代码里，对id为Test的对象进行了三项操作：先设置其字体颜色为红色，再显示对象，最后移除对象的“style”这个样式。再炒个板栗：

$("#Test").addClass('style').find("div").eq(0).fadeOut(200);

上面的例子意为：先为id为Test的对象添加"style"这个样式，再找寻其下的第一个div标签，并使其淡出。

通过上面的两个例子不难看出链式操作就是围绕一个jQuery对象进行的，很简单吧？

为什么要用链式操作呢？原因有两个：

代码更精简。链式操作能大大精简代码量，多项操作一行代码一气呵成，搞定；

优化性能。使用链式操作，所有操作代码共享一个jQuery对象，省去了逐步查询DOM元素的性能损耗。

参考技术A

链式操作就是分步骤地对jQuery对象实现各种操作，举个栗子：

1$("#Test").css('color','red').show(200).removeClass('style');

上面的例子就是链式操作，在一行代码里，对id为Test的对象进行了三项操作：先设置其字体颜色为红色，再显示对象，最后移除对象的“style”这个样式。再炒个板栗：

1$("#Test").addClass('style').find("div").eq(0).fadeOut(200);

上面的例子意为：先为id为Test的对象添加"style"这个样式，再找寻其下的第一个div标签，并使其淡出。

通过上面的两个例子不难看出链式操作就是围绕一个jQuery对象进行的，很简单吧？

为什么要用链式操作呢？原因有两个：

代码更精简。链式操作能大大精简代码量，多项操作一行代码一气呵成，搞定；

优化性能。使用链式操作，所有操作代码共享一个jQuery对象，省去了逐步查询DOM元素的性能损耗。

参考技术B 链式操作就是分步骤地对jQuery对象实现各种操作，举个栗子：
$("#Test").css('color','red').show(200).removeClass('style');

上面的例子就是链式操作，在一行代码里，对id为Test的对象进行了三项操作：先设置其字体颜色为红色，再显示对象，最后移除对象的“style”这个样式。再炒个板栗：
$("#Test").addClass('style').find("div").eq(0).fadeOut(200);

上面的例子意为：先为id为Test的对象添加"style"这个样式，再找寻其下的第一个div标签，并使其淡出。