jq获取同级或者下级的dom节点的操作

1.使用find找到对应的class或者其他

var class_dom1 = obj.find('.class名称');

或者

find('span .class名称')

2.使用添加背景颜色来确定当前的查找位置

class_dom1.css('background','red');

3.通过parent来找到它的上级的dom节点

jq获取同级或者下级的dom节点的操作_第1张图片

var parent_li_dom1 = class_dom1.parent('li.parent_li');

4.获取下面的多个li节点

jq获取同级或者下级的dom节点的操作_第2张图片

var ul_li_doms = parent_li_dom1.find(' > ul > li');

5.获取点击的同级别的全部节点,使用siblings

jq获取同级或者下级的dom节点的操作_第3张图片

var siblings_obj = $(this).parent('li.parent_li').siblings('li.parent_li');

6.总结

1.父级:

jQuery.parent(expr) 找父亲节点,比如 ( " s p a n " ) . p a r e n t ( ) 或者 ("span").parent()或者 ("span").parent()或者(“span”).parent(“.class”)

jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素

2.子级:

jQuery.children(expr).返回所有子节点,这个方法只会返回直接的孩子节点,不会返回所有的子孙节点

jQuery.contents(),返回下面的所有内容,包括节点和文本。这个方法和children()的区别就在于,包括空白文本,也会被作为一个jQuery对象返回,children() 则只会返回节点

3.同级:

jQuery.prev(),返回上一个兄弟节点,不是所有的兄弟节点

jQuery.prevAll(),返回所有之前的兄弟节点

jQuery.next(), 返回下一个兄弟节点,不是所有的兄弟节点

jQuery.nextAll(),返回所有之后的兄弟节点

jQuery.siblings(), 返回兄弟姐妹节点,不分前后

4.全部

jQuery.find(expr), 跟jQuery.filter(expr)完全不一样。

你可能感兴趣的:(html,js案例,运用,javascript,jquery,前端)