笔记--十期

1）层的position样式操作  

　　1  static(默认值)  

　　2  absolute：top和left起作用，不过是相对于浏览器来说，不会随着上一个元素位置的变化而变化。  

　　3  fixed：它是相对于真个可以显示的窗体而言，即不会随着滚动条的滚动而变化。  

　　4  relative:top和left起作用，不过是相对于前面 一个元素，上一个元素位置一变，它的位置也会改变。

2）body和document的事件范围；body在document的事件内部。

3）元素大小的单位  

　　1 进行元素大小值改变的运算时，需要取得原有的值，需要用parseInt(div.style.width);转换； 

4）解决英文字母连续不换行的问题 

　　1 <style="word-break:break-all">//强制换行 

　　2  <style="overflow:scroll">//超出范围时，添加滚动条；

5）动态添加和动态移除操作 

　　1  document.body.appendChild(); 

　　2  document.body.removeChild(); 

　　3  setAttribute("name","value");  

　　div1.setAttribute("class","tool");//为对象设置属性；    

　　getAttribute("href");//得到对象的属性； 

　　4  小试身手--点击链接，在当前页面显示对应的图片；  

　　//思路：超链接中有图片的标题和地址；这样监听其onclick事件，当点击时，获得点击对象的地址和标题，然后添加到<img>标签中，注意要将<a>;event.returnValue=false;  // 若要多存其数值，比如说大小，那么就可以自定义属性；然后通过getAttribute();取出属性值。

6）如何在一个标签元素中，获得另一个标签元素的值。  

　　1 onblur="document.getElementById('btn').click()"

7）关于form对象  

　　1 失去text光标时，让其自动提交；  //思路：前提是btn是submit；按钮<text  onblur="document.getElementById(btn).click()">;  //或者是<text  onblur="form1.submit()">  

　　2  进行检查后，阻止提交     <form onsubmit="return check()">  //只有通过提交按钮才能实现；

8）关于正则表达式 

　　1 var regex=new RegExp("\\d{3}");  alert(regex.test(12));  需要转义； 

　　2 也可以不需要转义；那么用  var regex=/\d{3}/; 

　　3  string.match(regex);来判断是否符合        

　　　　function checkMail(mail) {            

　　var reg = /^.+@.+[.].+$/;            

　　if (mail.match(reg)) {                

　　alert("right");            

　　} else {                

　　alert("wrong");            }        }

9）小试身手--省市级联选择  

　　　　1 <select onchange=''>; 要在它onchange事件发生的时候触发，修改市。  

　　　　2  动态添加省的元素时，要为其添加上一个value属性；innerText是要显示的，而value是专门为程序员使用的，这样，在onchange事件发生时，用对象的pro.value来获得选中的对象。  

　　　　3  添加之前，将数据市下拉列表中的数据移除。  

　　　　// 思路：倒着遍历市，然后得到每个对象，接着移除每个对象；            

　　　　for (var i = selectCity.length-1; i >= 0; i--) {                

　　　　var op = selectCity.childNodes(i);                

　　　　selectCity.removeNodes(op);            }

10）小试身手--实现列表框的选择移动功能(childNodes)        

　　　　function ff() {            

　　　　var all = document.getElementById("s1");   //得到左边的列表框            

　　　　var now = document.getElementById("s2");  //得到右边的列表框            

　　　　for (var i = 0; i < all.childNodes.length; i++) {  //得到左列表框的所有子节点的个数                

　　　　var op = all.childNodes[i];   //得到左列表框的所有的子节点                

　　　　if (op.selected) {    //判断该节点是否选中                    

　　　　all.removeChild(op);   //移除子节点                    

　　　　now.appendChild(op);  //添加子节点                    

　　　　op.selected = false;   //使对象选中状态取消                }            }        }