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