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的下一个节点方法的更多相关文章
- javascript 获取下一个节点
下一个节点: nextElementSibling 上一个节点 previousElementSibling <div> <select onchange="alert(t ...
- javascript 获取dom书的下一个节点。
利用javascript 写一个在页面点击加减按钮实现数字的累加.. 简略的html大概如此.看得懂就好不要在意这些细节啊 <input type="button" valu ...
- JavaScript与DOM(下)
介绍 上一章我们介绍了JavaScript的基本内容和DOM对象的各个方面,包括如何访问node节点.本章我们将讲解如何通过DOM操作元素并且讨论浏览器事件模型. 本文参考:http://net.tu ...
- 深入理解JavaScript系列(24):JavaScript与DOM(下)
介绍 上一章我们介绍了JavaScript的基本内容和DOM对象的各个方面,包括如何访问node节点.本章我们将讲解如何通过DOM操作元素并且讨论浏览器事件模型. 本文参考:http://net.tu ...
- JavaScript的DOM编程--11--插入节点
插入节点: 1). insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面 var reference = element.insertBefore(newNode,t ...
- JS获取DOM元素的八种方法
JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...
- 剑指offer25:复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点),结果返回复制后复杂链表的head。
1 题目描述 输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点),返回结果为复制后复杂链表的head.(注意,输出结果中请不要返回参数中的节点引用 ...
- JavaScript获取数组最小值和最大值的方法
本文实例讲述了JavaScript获取数组最小值和最大值的方法.分享给大家供大家参考.具体如下: ? 1 2 3 4 5 6 var arr = new Array(); arr[0] = 100; ...
- 剑指offer-二叉树的下一个节点
题目描述 给定一个二叉树和其中的一个结点,请找出中序遍历顺序的下一个结点并且返回.注意,树中的结点不仅包含左右子结点,同时包含指向父结点的指针. 解题思路 分情况考虑如下: 若该节点为空,则直 ...
随机推荐
- Spring知识点复习
Spring知识点复习 一.专业术语 侵入式设计 引入框架,对现有的类的结构有影响,即需要实现或继承某些特定类.如:Struts框架 非侵入式设计 引入框架,对现有的类结构没有影响.如:Hiberna ...
- svn update解决冲突
(p) postpone 暂时推后处理,我可能要和那个和我冲突的家伙商量一番 (df) diff-full 把所有的修改列出来,比比看 (e) edit 直接编辑冲突的文件 (mc) mine-con ...
- Android实现自动定位城市并获取天气信息
定位实现代码: <span style="font-size:14px;">import java.io.IOException; import java.util.L ...
- Packet Tracer 5.0 构建CCNA实验(2)—— 配置VLAN
Packet Tracer 5.0 构建CCNA实验(2)—— 配置VLAN Vlan(Virtual Local Area Network) 即虚拟局域网.VLAN可以把同一个物理网络划分为多个逻辑 ...
- 「6月雅礼集训 2017 Day5」学外语
[题目大意] 给出$\{P_i\}$,求经过以下操作后能够得到的不同序列个数: 第一步,选择$i, j$,交换$P_i,P_j$:第二步,把所有$P_x=i$的$P_x$变为$j$,把所有$P_x=j ...
- 【Zigbee技术入门教程-02】一图读懂ZStack协议栈的核心思想与工作机理
[Zigbee技术入门教程-02]一图读懂ZStack协议栈的核心思想与工作机理 广东职业技术学院 欧浩源 Z-Stack协议栈是一个基于任务轮询方式的操作系统,其任务调度和资源分配由操作系统抽 ...
- GPU硬件加速
现代浏览器大都可以利用GPU来加速页面渲染.每个人都痴迷于60桢每秒的顺滑动画.在GPU的众多特性之中,它可以存储一定数量的纹理(一个矩形的像素点集合)并且高效地操作这些纹理(比如进行特定的移动.缩放 ...
- 去掉每行的特定字符py脚本
百度下载一个脚本的时候遇到那么一个情况.每行的开头多了一个空格.https://www.0dayhack.com/post-104.html 一个个删就不要说了,很烦.于是就有了下面这个脚本. #! ...
- Exception 和 Error 包结构
- MACACA===gradle下载和安装
gradle下载地址: http://services.gradle.org/distributions/ 或者直接点击这个: http://services.gradle.org/distribut ...