zoukankan      html  css  js  c++  java
  • 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对象。

      

  • 相关阅读:
    2017-2018-1 课表
    所编裴书练习参考解答封面 [购买了书的同志记得一定要邮件联系, 并加我微信, 方便更正错误. 这里更新有时会慢, 或者懒得弄.]
    人工智能图片放大
    猜15个名人
    Excel 当前行高亮
    2014年至今的博文目录(更新至2019年1月7日,2017篇)
    拓扑学中凝聚点的几个等价定义
    江苏省2017年高等数学竞赛本二试题(含解答)
    裴礼文数学分析中的典型问题与方法第4章一元函数积分学练习
    2017年华东师范大学数学竞赛(数学类)试题
  • 原文地址:https://www.cnblogs.com/zychengzhiit1/p/4421138.html
Copyright © 2011-2022 走看看