需求说明:

  获取当前节点左节点或者右节点(兄弟节点);

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的下一个节点方法的更多相关文章

  1. javascript 获取下一个节点

    下一个节点: nextElementSibling 上一个节点 previousElementSibling <div> <select onchange="alert(t ...

  2. javascript 获取dom书的下一个节点。

    利用javascript 写一个在页面点击加减按钮实现数字的累加.. 简略的html大概如此.看得懂就好不要在意这些细节啊 <input type="button" valu ...

  3. JavaScript与DOM(下)

    介绍 上一章我们介绍了JavaScript的基本内容和DOM对象的各个方面,包括如何访问node节点.本章我们将讲解如何通过DOM操作元素并且讨论浏览器事件模型. 本文参考:http://net.tu ...

  4. 深入理解JavaScript系列(24):JavaScript与DOM(下)

    介绍 上一章我们介绍了JavaScript的基本内容和DOM对象的各个方面,包括如何访问node节点.本章我们将讲解如何通过DOM操作元素并且讨论浏览器事件模型. 本文参考:http://net.tu ...

  5. JavaScript的DOM编程--11--插入节点

    插入节点: 1). insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面 var reference = element.insertBefore(newNode,t ...

  6. JS获取DOM元素的八种方法

    JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...

  7. 剑指offer25:复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点),结果返回复制后复杂链表的head。

    1 题目描述 输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点),返回结果为复制后复杂链表的head.(注意,输出结果中请不要返回参数中的节点引用 ...

  8. JavaScript获取数组最小值和最大值的方法

    本文实例讲述了JavaScript获取数组最小值和最大值的方法.分享给大家供大家参考.具体如下: ? 1 2 3 4 5 6 var arr = new Array(); arr[0] = 100; ...

  9. 剑指offer-二叉树的下一个节点

    题目描述   给定一个二叉树和其中的一个结点,请找出中序遍历顺序的下一个结点并且返回.注意,树中的结点不仅包含左右子结点,同时包含指向父结点的指针.   解题思路 分情况考虑如下: 若该节点为空,则直 ...

随机推荐

  1. 杭电多校第八场-A-Character Encoding

    题目描述 In computer science, a character is a letter, a digit, a punctuation mark or some other similar ...

  2. MyBatis 系列五 之 延迟加载、一级缓存、二级缓存设置

    MyBatis的延迟加载.一级缓存.二级缓存设置 首先我们必须分清延迟加载的适用对象 延迟加载 MyBatis中的延迟加载,也称为懒加载,是指在进行关联查询时,按照设置延迟加载规则推迟对关联对象的se ...

  3. 【洛谷 T47488】 D:希望 (点分治)

    题目链接 看到这种找树链的题目肯定是想到点分治的. 我码了一下午,\(debug\)一晚上,终于做到只有两个点TLE了. 我的是不完美做法 加上特判\(A\)了这题qwq 记录每个字母在母串中出现的所 ...

  4. Desert King(POJ2728+最优比率生成树+二分)

    题目链接:http://poj.org/problem?id=2728 题目: 题意:求一颗生成树,使得费用与距离的比值最小,其中距离等于两点之间的平面欧拉距离,费用为z坐标之差. 思路: 由上图我们 ...

  5. C#利用WebClient 两种方式下载文件

    WebClient client = new WebClient(); 第一种 string URLAddress = @"http://files.cnblogs.com/x4646/tr ...

  6. 排序中topK那点事(转)

    问题描述:有 N (N>1000000)个数,求出其中的前K个最小的数(又被称作topK问题). 这类问题似乎是备受面试官的青睐,相信面试过互联网公司的同学都会遇到这来问题.下面由浅入深,分析一 ...

  7. linux驱动基础系列--Linux下Spi接口Wifi驱动分析

    前言 本文纯粹的纸上谈兵,我并未在实际开发过程中遇到需要编写或调试这类驱动的时候,本文仅仅是根据源码分析后的记录!基于内核版本:2.6.35.6 .主要是想对spi接口的wifi驱动框架有一个整体的把 ...

  8. python基础===利用PyCharm进行Python远程调试(转)

    原文链接:利用PyCharm进行Python远程调试 背景描述 有时候Python应用的代码在本地开发环境运行十分正常,但是放到线上以后却出现了莫名其妙的异常,经过再三排查以后还是找不到问题原因,于是 ...

  9. C C++ 常被人问的问题分析

    正文  -  开始了, 直接扯淡 以下都是自己面试中遇到的常见的问题.如有不妥的地方就当见笑了. 哈哈 1. 谈谈你们服务器的架构吧. 分析: 假如这是第一个问题, 你可以走了. 可能各方面原因他不想 ...

  10. Python爬虫数据处理

    一.首先理解下面几个函数 设置变量 length()函数 char_length() replace() 函数 max() 函数1.1.设置变量 set @变量名=值 set @address='中国 ...