• 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对象。

      

  • 相关阅读:
    在markdown中使用html
    乘车路线
    渔民的烦恼
    GEDIT外部工具
    模板匹配,以图找图(九)
    SpringBoot起飞系列-国际化(六)
    [Lyndon分解] HDU 6761 Minimum Index
    [数论]HDU 6750 Function 百度之星2020初赛第一场H题
    【雅思】【口语】描述一个可笑的场合
    面试回答数据库优化问题-数据库优化思路八点
  • 原文地址:https://www.cnblogs.com/zychengzhiit1/p/4421138.html
Copyright © 2020-2023  润新知