javascript获取dom的下一个节点方法

　　需求说明：

　　获取当前节点左节点或者右节点（兄弟节点）；

css:

<style type="text/css">
    a:focus { outline: none; }
.panel { background: #69C7F7; height: 220px; display: none; }
.slide { margin: 0; padding: 0; border-top: solid 4px #F27613;  }
.btn-slide { background: #F27613 url(http://www.goartie.com/images/jstx/white-arrow.gif) no-repeat center -60px; text-align: center; width: 144px; height: 4px; padding: 10px 10px 0 0; margin: 0 auto; display: block;color: #fff; text-decoration: none; }
.active { background-position: center 0px; }
</style>

javascript:

 $(document).ready(function () {
        $("#IsOnloadInfo").click();
        $(".btn-slide").click(function () {
            $(this).parent().prev().slideToggle("slow");
            $(this).toggleClass("active"); return false;
        });

    });

 function fundisp(par) {
        $(par).next().slideToggle("slow");
        $(par).next().next().find('a').toggleClass("active");
    }

 

Body:

 <span class="examine_des">
                       <input style="border: 0" type="button" value="点击详情" onclick="fundisp(this)"/>
                        <div  class="examine_des panel">
                            <ul style="list-style:none">
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                        </div>
                         <p class="slide"><a href="javascript:;" class="btn-slide active"></a></p>
                    </span>

上面是相关页面的代码段；

　　大家，这里需要注意两处：

　　1、Body 的 <input>标签注册了onclick方法，但这个方法，传入了一个参数；

　　这里的 “this”表示当前组件的DOM对象：

　　若将onclick修改成

 <input style="border: 0" type="button" value="点击详情" onclick="fundisp()"/>

　　js中修改成：　　

 function fundisp() {
        $(this).next().slideToggle("slow");
        $(this).next().next().find('a').toggleClass("active");
    }

　　那这里，明确的告诉大家，js中的代码不能执行，因为，找不到DOM对象，

　　当然，有人会说，可以用   “window.event.srcElement” 来代替$(this), 这样完全可以；

　　因为 window.event.srcElement   是指触发事件的对象,当input触发onclick事件，event.srcElement就会指向触发事件的元素<input>

　　2、js 的 fundisp() 方法中 参数的使用；

　　“var” 足够你在js中声明变量类型，javascript方法的参数不需要声明类型，因为，你传什么类型，方法的接受参数就是什么类型；

　　所以在当前实例中，方法onclick传入this代表DOM对象，那么 ，js中的参数，就可以按照DOM的使用方法去使用。

　　3、利用 选择器 注册方法中的 this

 $(document).ready(function () {
        $("#IsOnloadInfo").click();
        $(".btn-slide").click(function () {
            $(this).parent().prev().slideToggle("slow");
            $(this).toggleClass("active"); return false;
        });

    });

　　这里 的this 就表示当前 通过选择器，过滤的DOM对象。