JQuery节点操作

通过 JQuery 节点操作的办法来实现交互，减少手动添加类名操作。优点是能够减少重复功能代码，缺点是如果模板类名调整或者结构调整会导致功能交互出现问题。

1 父级节点

$.parent(selector)

当没有指定父级节点类型时，会默认为所有。

例如:

<div id="par_div">
    <a id="href_fir" href="#">href_fir</a>
    <a id="href_sec" href="#">href_sec</a>
    <a id="href_thr" href="#">href_thr</a>
</div>
<span id="par_span">
    <a id="href_fiv" href="#">href_fiv</a>
</span>

<script type="text/javascript">
    $(document).ready(function(){
        $("a").parent().addClass('a_par');
    });
</script>

2 子级节点

• 2.1 $.find(selector, object, element)

• 2.2 $.children(selector)
  _parent.find('img').attr('src');

    $(this).children("input[name='content']").val();
  

通过上面的例子可以看到， find() 和 children() 在功能实现上面效果一致，但是 find() 效果更加灵活，但是也有必填的限制就是需要 selector，而 children() 可以省略 selector,则默认为当前对象的第一个子元素节点。

3 同级节点

• 3.1 $.next(selector)
• 3.2 $.nextAll(selector)
• 3.3 $.prev(selector)
• 3.4 $.prevAll(selector)
  $.next(selector)
  获取当前对象的下一个同级元素节点
  $.nextAll(selector)
  获取指定元素后边的所有同级元素,可以通过 selector 来确定具体的同级元素
  $.prev(selector)
  获取指定元素的上一个同级元素
  $.prevAll(selector)
  获取指定元素的前边所有的同级元素，可以通过 selector 来具体对应的同级元素

4 总结

元素节点的操作，在重复功能代码中，可以节省很多重复操作和功能代码，但是在功能出现问题也需要花费相对多的时间来检查问题，所以根据具体业务功能需求来考虑是否使用这种方式实现功能。同时建议在功能实现中，尽量先多花时间考虑整个页面功能，提取出公共部分功能代码减少代码冗余，提供效率。