jQuery选择器

parent()寻找父节点

jQuery选择器_第1张图片

如果页面结构是这样

jQuery选择器_第2张图片

取到的是上一级的元素

那如果要取类名为a的元素呢?下面

parents()寻找所有父节点


jQuery选择器_第3张图片

页面结构如上

jQuery选择器_第4张图片

这次取到4个元素,类名为a的div,类名为b的div,还有body,html。

那如果我只要一个类名为b的div呢?

jQuery选择器_第5张图片

只需在parents选择器中添加你需要的类名就可以了。(类名,id,标签名都可以)

那如果要取类名为bb的div呢?下面

siblings()寻找兄弟节点

jQuery选择器_第6张图片

页面结构如上

jQuery选择器_第7张图片

b类名的元素寻找到4个兄弟元素,ba,bb,bc,bd。

而要获取类名为bb的div就和上面的parent()大同小异了。

jQuery选择器_第8张图片

在选择器里写上你需要获取的类名就可以了。

prev()取上一个兄弟元素,prevAll()取所有前面的兄弟元素

jQuery选择器_第9张图片

还是延用上次的图,取到了上一个类名为bb的p标签。

jQuery选择器_第10张图片

取到了类名为b的div之前所有的p标签。

next(),nextAll()同上,就不多说了

find()遍历寻找元素

jQuery选择器_第11张图片

find可以寻找a类名下的任何元素,以类名,标签名寻找都可以。

jQuery选择器_第12张图片
以类名寻找
jQuery选择器_第13张图片
以标签名寻找

那如果只想找下一层的类名呢?(上图div有三层,就是只找第二层)

jQuery选择器_第14张图片

在div前面加个 号就行了。ps:> 这个就是找直接元素,很多地方都能使用,并不局限与find()。

eq()以索引寻找元素

jQuery选择器_第15张图片

还是上图(假如无法加类名寻找的情况下),比如我要找第二个p标签,就是类名bb。(还有下标从0开始)

jQuery选择器_第16张图片

prefect!

first(),last()顾名思义,第一个元素,最后个元素

就拿第一个p标签和最后一个p标签吧。

jQuery选择器_第17张图片

没毛病,类名ba第一个p标签,类名pd最后一个p标签。(怕太多红框标出)

最后讲一个今天碰到的吧。

not()除了某某元素以外的选择器!!!

如果,有100个元素,其中第一个和第50个要排除,怎么办?

jQuery选择器_第18张图片

我不要bb,对。然后我就没选到它。这样就很好的解决的100里挑掉两个的麻烦事儿了。

你可能感兴趣的:(jQuery选择器)