JavaScript gets the next node method of the DOM

　Requirements Description:

Gets the current node left node or right node (sibling node);

Css:

<styletype= "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 (). Find (' a '). Toggleclass ("active");    

Body:

 <spanclass= "Examine_des">                       <inputstyle= "border:0"type= "button"value= "Click Details"onclick= "Fundisp (this)"/>                        <Divclass= "examine_des Panel">                            <ulstyle= "List-style:none">                                <Li></Li>                                <Li></Li>                                <Li></Li>                                <Li></Li>                                <Li></Li>                                <Li></Li>                            </ul>                        </Div>                         <Pclass= "Slide"><ahref= "javascript:;"class= "Btn-slide Active"></a></P>                    </span>

The above is the relevant page code snippet;

Everyone, there are two places to note:

1, the Body of the <input> tag registered the OnClick method, but this method, passed a parameter;

Here the "This" represents the DOM object of the current component:

If the onclick is modified to

<style= "border:0"  type= "button"  value= "click Details"  onclick= "Fundisp ()"/>

JS in the modified into:

function Fundisp () {        $ (this). Next (). Slidetoggle ("slow");        $ (this). Next (). Next (). Find (' a '). Toggleclass ("active");    

　　Well here, it is clear that the code in JS cannot be executed, because the DOM object cannot be found,

of course, some people will say, can use "Window.event.srcElement "to replace $ (this), it is perfectly possible;

Because window.event.srcElement refers to the object that triggered the event, when input triggers the onclick event, Event.srcelement points to the element that triggered the event <input>

2, JS Fundisp () method of the use of parameters;

"Var" is sufficient for you to declare the variable type in JS, the parameters of the JavaScript method do not need to declare the type, because, what type you pass, the method accepts the parameter is what type;

So in the current instance, the method onclick passed in this represents the DOM object, then, the parameters in JS can be used in accordance with the DOM use method.

3. Use the This in the Selector registration method

$ (document). Ready (function () {        $ ("#IsOnloadInfo"). Click ();        $ (". Btn-slide"). Click (function () {            $ (this). Parent (). Prev (). Slidetoggle ("slow");            $ (this). Toggleclass ("active"); return false;        });    

This here represents the currently filtered DOM object through the selector.

　　

JavaScript gets the next node method of the DOM