利用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;----三元表達式。