这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 javascript 获取 dom 的下一个节点方法, 实现在页面点击加减按钮数字的累加,需要的朋友可以参考下
利用 javascript 写一个在页面点击加减按钮实现数字的累加。
简略的 html 大概如此。看得懂就好不要在意这些细节啊
- <input type="button" value="+" onclick="jia(this)" />
- <label class="num">
- 0
- </label>
- <input type="button" value="-" onclick="jian(this)" />
样子是这样的
javascript 代码如下
- <script type="text/javascript">
- function jia(a)
- {
- var nextnode = a.nextElementSibling;//获取下一个节点
- alert(nextnode.innerHTML);
- var a = parseInt(nextnode.innerHTML)
- a += 1;
- nextnode.innerHTML = a;
- }
- function jian(a) {
- var previousnode = a.previousElementSibling;
- var a = parseInt(previousnode.innerHTML)
- a -= 1;
- a = a > 0 ? a : 0;
- previousnode.innerHTML = a;
- }
- </script>
解释一下:
function jian(a)和
function jia(a) 就是当前点击的对象了。在 onclick 事件接的方法里加了 this;
- nextElementSibling 获取当前节点的下一个节点 (获得下一个兄弟节点) - previousElementSibling 获取当前节点的上一个节点
注意: IE 将跳过在节点之间产生的空格文档节点(如:换行字符),而 Mozilla 不会这样——FF 会把诸如空格换行之类的排版元素视作节点读取,因此,在 ie 中用 nextSibling 便可读取到的下一个节点元素,在 FF 中就需要这样写:nextElementSibling 了。
上面的解释的意思的使用 nextElementSibling 和 previousElementSibling 获得下一个兄弟节点和上一个兄弟节点,可以去掉换行,空格上面之类的,直接找到我们标签元素。但是下面的两个
nextSibling previousSibling 也是得下一个兄弟节点和上一个兄弟节点的,只是在 IE 中好用 -------------------- 关键字解释
parseInt 转化功能。
a = a > 0 ? a : 0;---- 三元表达式。
来源: http://www.phperz.com/article/17/0419/274859.html