Day05-JavaScript03
js的剩余问题和注意要点
1)节点问题:
DOM树的节点关系:
对于一个节点,它的属性是和这个节点是平行关系,它的文本才能够算作是这个节点的子节点。
2)this关键字
this关键字代表的是触发该时间的标签和元素,哪个标签触发了这个事件,this就代表哪个标签。
for(var i=0;i<right_select.length;i++){
right_select[i].ondblclick = function(){
left_select.appendChild(this);
setLeftEvent();
}
}
上述例子的this是表示right_selecti[i];
3)尖括号的写法:
右尖括号 >
左尖括号 <
4)关于remove需要注意的要点
for(var i=0;i<oldOption.length;){
addCity.removeChild(oldOption[i]);
}
下述是错误的理解:
这个地方的for循环中没有加上i++,因为在做了remove操作之后,指针会自动往下移动的。加上了i++就会出现删除原来节点不完全的情况。
正解:
因为移除了之后,oldOption.length 会改变,导致不能完全移除其中的元素。下一个元素上移,同时i++,那么就会导致跳过了被删除元素的下一个元素,导致删除不完全。
5)排除bug方法要点:
案例:
左右选择案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>左右选择案例</title>
<script>
window.onload = function(){
left_select = document.getElementById("selectLeft");
right_select = document.getElementById("selectRight");
var add_a = document.getElementById("add");
var addAll_a = document.getElementById("addAll");
var remove_a = document.getElementById("remove");
var removeAll_a = document.getElementById("removeAll");
//双击把左边的option移动到右边去
for(var i=0;i<left_select.length;i++){
left_select[i].ondblclick = function(){
right_select.appendChild(this);
setRightEvent();
}
}
//双击把右边的option移动到左边去
for(var i=0;i<right_select.length;i++){
right_select[i].ondblclick = function(){
left_select.appendChild(this);
setLeftEvent();
}
}
//点击添加按钮,把左边选中的项添加到右边去
add_a.onclick = function(){
for(var i=0;i<left_select.length;i++){
if(left_select[i].selected){
right_select.appendChild(left_select[i]);
setRightEvent();
i--;
}
}
}
//点击删除按钮,把右边选中的选项移动到左边
remove_a.onclick = function(){
for(var i=0;i<right_select.length;i++){
if(right_select[i].selected){
left_select.appendChild(right_select[i]);
setLeftEvent();
i--;
}
}
}
//点击全部添加按钮,把左边的所有选项全部添加到右边去
addAll_a.onclick = function(){
for(var i=0;i<left_select.length;i++){
right_select.appendChild(left_select[i]);
setRightEvent();
i--;
}
}
//点击全部删除按钮,把右边的所有选项全部添加到左边去。
removeAll_a.onclick = function(){
for(var i=0;i<right_select.length;i++){
left_select.appendChild(right_select[i]);
setLeftEvent();
i--;
}
}
}
//当其中的选项改变的时候,重新设置每一个option的点击函数
function setLeftEvent(){
for(var i=0;i<left_select.length;i++){
left_select[i].ondblclick = function(){
right_select.appendChild(this);
}
}
}
//当其中的选项改变的时候,重新设置每一个option的点击函数
function setRightEvent(){
for(var i=0;i<right_select.length;i++){
right_select[i].ondblclick = function(){
left_select.appendChild(this);
}
}
}
</script>
</head>
<body>
<table border="1" width="400" align="center">
<tr>
<td>
分类名称
</td>
<td>
<input type="text" name="cname" value="手机数码"/>
</td>
</tr>
<tr>
<td>
分类描述
</td>
<td>
<textarea name="cdesc" rows="4" cols="20">手机数码类商品</textarea>
</td>
</tr>
<tr>
<td>
分类商品
</td>
<td>
<span style="float: left;">
已有商品<br/>
<select id="selectLeft" multiple>
<option>IPhone6s</option>
<option>小米4</option>
<option>锤子T2</option>
</select>
<p><a href="#" id="add">>></a></p>
<p><a href="#" id="addAll">>>></a></p>
</span>
<span style="float: right;">
未有商品<br/>
<select id="selectRight" multiple="multiple">
<option>三星Note3</option>
<option>华为6s</option>
</select>
<p><a href="#" id="remove"><<</a></p>
<p><a href="#" id="removeAll"><<<</a></p>
</span>
</td>
</tr>
<tr>
<td colspan="2">
<input type='submit' value="修改"/>
</td>
</tr>
</table>
</body>
</html>