<div class="htmlarea"> <textarea id="runcode14500"> <title>jQuery와 javascript의 비교 학습(부모와 자식 전후의 요소 가져오기)</title> <style type="text/css"> .c1{background-color:green;padding:20px;} .c2{background-color:red;padding:20px;} .c1 div{background-color:gray;} </style> <div class="c1" onclick="fChild(this);"> <div id="first" onclick="fNext(this);"> </div> <div id="second" onclick="fPrev(this);">먼저</div> <div id="third" onclick="fParent(this);">두번째</div> </div>부모 </textarea> <br> <input onclick="runEx('runcode14500')" type="button" value="运行代码"><input onclick="doCopy('runcode14500')" type="button" value="复制代码"><input onclick="doSave(runcode14500)" type="button" value="保存代码"> <a href="http://www.jb51.net/article/23421.htm" title="查看具体详情" target="_blank"> </a>[Ctrl A 모두 선택 참고: </div>외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 <script type="text/javascript" src="style/jquery-1.3.2.min.js"></script>]<script type="text/javascript"> function fNext(obj){//许多时候需要元素之间没有间隙才能取到 //alert(obj.nextSibling.id); alert(jQuery(obj).next().attr("id"));//传递this,通过$(obj)转化为jQuery对象 } function fPrev(obj){ //alert(obj.previousSibling.id); alert(jQuery(obj).prev().attr("id")); } function fParent(obj){ //alert(obj.parentNode.className); //alert(jQuery(obj).parent().attr("class")); jQuery(obj).parent().removeClass("c1").addClass("c2") alert(jQuery(obj).parent().attr("className"));//取得className,当成属性来取 } function fChild(obj){ //var childs = obj.childNodes; var childs = jQuery(obj).children(); for(i=0;i<childs.length;i++){ alert(childs[i].id); } //jQuery的each遍历 } </script>