通過 JQuery 節(jié)點操作的辦法來實現(xiàn)交互，減少手動添加類名操作。優(yōu)點是能夠減少重復(fù)功能代碼，缺點是如果模板類名調(diào)整或者結(jié)構(gòu)調(diào)整會導(dǎo)致功能交互出現(xiàn)問題。

1 父級節(jié)點

$.parent(selector)

當(dāng)沒有指定父級節(jié)點類型時，會默認(rèn)為所有。

例如:

<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 子級節(jié)點

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

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

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

通過上面的例子可以看到， find() 和 children() 在功能實現(xiàn)上面效果一致，但是 find() 效果更加靈活，但是也有必填的限制就是需要 selector，而 children() 可以省略 selector,則默認(rèn)為當(dāng)前對象的第一個子元素節(jié)點。

3 同級節(jié)點

• 3.1 $.next(selector)
• 3.2 $.nextAll(selector)
• 3.3 $.prev(selector)
• 3.4 $.prevAll(selector)
  $.next(selector)
  獲取當(dāng)前對象的下一個同級元素節(jié)點
  $.nextAll(selector)
  獲取指定元素后邊的所有同級元素,可以通過 selector 來確定具體的同級元素
  $.prev(selector)
  獲取指定元素的上一個同級元素
  $.prevAll(selector)
  獲取指定元素的前邊所有的同級元素，可以通過 selector 來具體對應(yīng)的同級元素

4 總結(jié)

元素節(jié)點的操作，在重復(fù)功能代碼中，可以節(jié)省很多重復(fù)操作和功能代碼，但是在功能出現(xiàn)問題也需要花費相對多的時間來檢查問題，所以根據(jù)具體業(yè)務(wù)功能需求來考慮是否使用這種方式實現(xiàn)功能。同時建議在功能實現(xiàn)中，盡量先多花時間考慮整個頁面功能，提取出公共部分功能代碼減少代碼冗余，提供效率。