即日起在codingBlog上分享您的技术经验即可获得积分,积分可兑换现金哦。

全面性认识JQuery Dom遍历

微信 web前端程序员 13℃ 0评论
本文目录
[隐藏]

Python部落(python.freelycode.com)组织翻译,禁止转载,欢迎转发。

DOM遍历意味着一旦在网页上选择了一个或多个元素,就可以相对于初始选择移动页面元素。在此过程中,您可以将原始选择替换为新的选择,或者从中添加和减去元素。

在本文中,我们将讨论jQuery DOM遍历的可用方法,并了解jQuey库如何为我们提供根据它与页面中其它元素的关系来选择元素的众多方法。

过滤元素

让我们来看看如何更具体的过滤选择。你可以根据众多条件来过滤元素,比如它们相对于其他元素的位置以及它们是否有一个特定的类。大多数时候,你最终会选择比你开始选择的元素更少。

如下列举了不同的过滤方法:

eq — 此方法将匹配元素集合缩减到指定的索引处。索引从0开始计数。因此,要选择第一个元素,就必须使用$(“selector”).eq(0)。从1.4版本开始,您可以提供一个负整数,(如果为负整数)从末尾开始计数元素,而不是开始。

first 和last — first方法将只返回匹配元素集合中的第一个元素,同时last方法返回匹配元素集合中的最后一个元素。同时这两个方法都不接受任何参数。

slice – 如果您要查找索引在给定范围内的集合中的所有元素,则可以使用slice()。此方法接受两个参数。第一个参数指定选择元素的起始索引,第二个参数指定选择应结束的索引。如果省略了第二个参数,会导致初始索引之后的所有元素都会包含在结果集中。

详情参见:http://codepen.io/SitePoint/embed/EZOrNV?height=680&theme-id=6441&slug-hash=EZOrNV&default-tab=result&user=SitePoint&embed-version=2&pen-title=eq%20and%20slice%20methods

filter – 此方法将匹配元素集合缩减为匹配指定选择器的元素,或者在传递给此方法的函数中传递您设置的条件。下面是使用选择器的此方法的一个示例:

您还可以使用以下函数选择相同的元素

您还可以使用该函数执行更复杂的选择,如:

这将只选择具有至少两个span标签的元素。

详情参见:http://codepen.io/SitePoint/embed/JEexEK?height=485&theme-id=6441&slug-hash=JEexEK&default-tab=result&user=SitePoint&embed-version=2&pen-title=filter%20method

map – 您可以使用此方法通过一个函数传递当前选择中的每个元素,最终创建一个包含返回值的新jQuery对象。返回的jQuery对象本身包含一个数组,你可以使用get方法来处理返回的对象以得到基础的数组。

详情参见:http://codepen.io/SitePoint/embed/JEexJR?height=460&theme-id=6441&slug-hash=JEexJR&default-tab=result&user=SitePoint&embed-version=2&pen-title=map%20method

遍历DOM

考虑一下,假设你知道你可以使用这个元素来访问各种元素选择器,但需要和这些父级元素一起做工作的场景。此外,它们有个共同点,父级元素没有特定的类或标签。他们唯一共同的事实是,它们都是你可以访问的父级元素。我已经面临类似的情况好几次了。

在这种情况下,jQuery提供了很多有用的方法来访问父类,子类或兄弟元素。

children – 这个方法允许我们得到匹配元素集合中每个元素的子元素。这些可选参数可通过选择器进行过滤。

find – 此方法将获取由选择器或元素过滤的匹配元素集合中的每个元素的所有后代。在这种情况下,传给选择器参数是不可选的。如果你需要实现对所有后代元素的取回,可以传递通配选择器 “*”作为参数到这个方法。

正如你在Demo中所见,children()仅在段落中的直系子元素加了下划线,但find()在其后代元素及其匹配元素都添加了背景属性。

详情参见:http://codepen.io/SitePoint/pen/YNRBQx

parent – 此方法将获取当前集合中每个元素的父元素。使用选择器来对父节点进行过滤是可选的。

parents – 此方法将获取集合中每个元素的所有祖先元素。还接受一个可选的选择器参数来过滤祖先元素,parent()与parents()两者之间的区别在于,前者沿 DOM 树向上遍历单一层级,而后者则从最近的父元素向上的顺序排列匹配元素集合中每个元素的祖先元素。

nearest – 此方法将通过测试元素本身并在DOM树中遍历来获得与给定选择器匹配的第一个元素。parents()与closest()之间有着显著的差异,前者从元素的父元素开始遍历,后者从自身元素开始遍历。另外一个区别在于,closest()只会遍历DOM树直到找到匹配元素,而parents()会一直往上遍历直到文档根元素。

考虑下面这两行代码:

现在请注意,最后一段中的“italic”一词没有任何带标签的祖先。因此,其背景未发生改变。

类似地,第二行包含我们粗体字的标签的颜色变为蓝色,现在,在最后一种情况下,整个段落是标签的父标签,因此它都变成蓝色。

详情参见:http://codepen.io/SitePoint/pen/JEexyb

siblings – 此方法获取匹配元素集合中每个元素的兄弟元素。您可以选择提供一个选择器作为参数,使用匹配的选择器获取同级。

prev – 这个方法将获得我们集合中每个元素的前一个兄弟元素。如果您提供了一个选择器,该方法将只选择那个匹配的元素。

prevAll – 此方法将获取集合中每个元素的所有前面的兄弟元素。与其他方法一样,您可以提供一个选择器来过滤返回的元素。

next – 此方法将仅获取匹配元素集合中每个元素紧邻的同胞元素。如果提供选择器,则取回匹配该选择器的下一个同胞元素。

nextAll – 这个方法将匹配元素集合中每个元素的所有跟随的同胞元素,它们是我们集合中的元素的后继者。可以通过提供选择器来可选地过滤兄弟元素。

从demo中认识这两行代码:

您将看到列表中的所有项目都不是橙色。这是因为我们的引用项的下一个直接兄弟没有nextall类。

详情参见:http://codepen.io/SitePoint/embed/VPVgzz?height=515&theme-id=6441&slug-hash=VPVgzz&default-tab=result&user=SitePoint&embed-version=2&pen-title=next%2C%20nextAll%2C%20previous%20and%20previousAll%20in%20jQuery

我想再次提醒,当您提供选择器next()和prev() ,他们不会寻找所有下一个和前面的兄弟姐妹元素,来找到匹配给定的选择器的第一个元素。它们将只查看紧临在前面和后面的同级元素,如果这些同级元素没有匹配的选择器,将返回一个空的jQuery对象。

更多与DOM遍历相关的方法

遍历DOM时,您可能会遇到需要向选择中添加与原始集不相关的更多元素的情况,或者需要还原到先前的元素集。jQuery提供了一些可以用来执行所有这些任务的函数。

add – 此方法将创建一个新的jQuery对象,它将包含添加到现有列表中的新元素。请记住,不能保证新元素将按照它们传递到add方法的顺序附加到现有集合。

addBack – jQuery对象维护一个堆栈内部来跟踪匹配的元素集合的变化。当一个DOM遍历方法被调用时,新的元素集合推入到堆栈中。 如果还需要包含先前的元素集合,addBack() 可以提供帮助。

对于addBack使用中的第一种情况,我们通过选取段落然后调用children方法。在第二种情况下,在调用children方法后,我们也调用了addBack方法。调用addBack方法将第二段添加到我们选择的段落,然后我们为其添加了红色边框。

详情参见:http://codepen.io/SitePoint/embed/RKqvZx?height=725&theme-id=6441&slug-hash=RKqvZx&default-tab=result&user=SitePoint&embed-version=2&pen-title=add%20and%20addBack%20in%20jQuery

end – 此方法将结束最近的过滤操作,并将您的元素集返回到其先前的状态。在需要处理与当前元素集相关的一些元素,恢复到原始集,然后处理不同元素集的情况下,它可能非常有用。

在下面的Demo中,我首先使用.find(“b”)选择所有的标签,然后我改变它们的颜色属性为绿色,我调用end方法。当我再次选择所有标,此调用会将我们返回到我之前的选择。

详情参见:http://codepen.io/SitePoint/pen/OWadjw

contents – 如果你想得到所有的子节点,包括集合中所有元素的文本和注释节点,你可以使用该 contents方法。如果是在同一个域中的网页,你也可以使用这个方法得到得到