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對象。

 

 

　　

javascript擷取dom的下一個節點方法