通過 JQuery 節(jié)點操作的辦法來實現(xiàn)交互，減少手動添加類名操作田晚。優(yōu)點是能夠減少重復(fù)功能代碼，缺點是如果模板類名調(diào)整或者結(jié)構(gòu)調(diào)整會導(dǎo)致功能交互出現(xiàn)問題。
1 父級節(jié)點
$.parent(selector)
當沒有指定父級節(jié)點類型時滤淳，會默認為所有。
例如:
<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,則默認為當前對象的第一個子元素節(jié)點屁擅。
3 同級節(jié)點
- 3.1 $.next(selector)
- 3.2 $.nextAll(selector)
- 3.3 $.prev(selector)
- 3.4 $.prevAll(selector)
$.next(selector)
獲取當前對象的下一個同級元素節(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)中匾嘱，盡量先多花時間考慮整個頁面功能，提取出公共部分功能代碼減少代碼冗余稽物，提供效率奄毡。
