05_jsDom 操作表单元素 使用正则表达式

层的操作

1）  元素的position样式值：static（无定位，显示在默认位置）、absolute（绝对定位：定义横纵坐标，原点在父容器的左上角。）、fixed(相对于窗口的固定定位，位置不会随浏览器的滚动而变化，IE6不支持)、relative（相对定位：相对于自己原来的位置。）。如果要通过代码元素的修改坐标则一般用absoulte,然后修改元素的top(上边缘距离)，left(左边缘距离).left、top是指层的左上角的坐标

2）  获取鼠标的位置：通过window.event的clientX、clientY属性
vare=window.event||evt;

3）  鼠标移动事件：onmousemove      鼠标进入控制事件：onmouseover      
鼠标离开事件：onmouseout

动态设置元素2016年10月16日主位置大小

1）  通过dom读取元素的top、left、width、height等取到值不是数字，而是”10px”这样的数字；为这些属性设值的时候IE可以是80、90这样的数字，FF、Chrome必须是”80px”、”90px”等字符串形式，为了兼容统一用字符串形式。Top/left需要设置position

2）  易错：不要写成div1.style.width=80px;而是div1.style.widty=’80px’;

3）  如果要修改元素的大小（宽度加1），则首先要取出元素的宽度，然后要将parseInt将宽度转换成数字（parseInt可以将“20px”这样的数字开头的包含其它内容的字符串解析为20,         parseInt(‘20px’,10)也就是解析尽可能多的部分）；然后加上一个值，再加上一个px赋值回去

4）  CSS 将层内的内容隐藏掉：overflow:hidden

5）  inputs[i].checked用来判断checkbox是否别选中

6）  简单往数组添加一个元素： 数组名[数组名.length]=value

IE中body的事件范围

1）  IE中如果在body上添加onclick、onmousemove等事件响应，那么如果页面没有满，则“body最后一个元素以下（横向不限制）”的部分是无法响应事件的，发须使用代码在document上监听那些事件，比如document.οnmοusemοve=MovePic；
body有一个范围问题，不要为body注册mousemove事件，为整个document注册

2）  document.body.οnmοusedοwn=function(){ }

3）  document.οnmοusedοwn=function(){ }

4）  如果为整个文档注册事件可以使用：document.onxxxx事件

问题

1）  易错：不要写成div1.style.width=80px;而是div1.style.width=’80px’;

2）  修改元素样式不能this.style=’background-color:red’，哪怕可以的话也是把以前的样式全部都冲掉了。技巧，随便给一个元素设定id，然后在js就能id.style.出来能用的属性

3）  createElement的两种用法，注意innerText的问题（下面的写法，不推荐，只兼容IE）

4）  Lable.setAttribute(‘for’,’username’);
//设定dom元素属性特殊的属性，写成label.for=’username’会有问题。Label.setAttribute(‘xuehao’,’33333’)
  //getAttribute(‘name’)      获取属性的值     //removeAttribute(‘name’)   移除属性

5）  alert(this.getAttribute('src'));//不是弹出相对站点的alert(this.src)，而是弹出当前短的路径

6）  backgroundPosition ='0 -47px';设置背景图片位置，结合宽度高度使用来更改背景图片在固定大小下的显示

补充问题

1）  当设置了层的边框，margin,padding等问题的时候通过offsetHeight获取高度问题

2）  document.getElementById(‘div1’).offsetHeight;
//获取实际层的高，height+margin+padding+border

3）  document.getElementById(‘div1’).currentStyle.height;  //IE

4）  window.getComputedStyle(document.getElementById(‘div1’),null).height;  //FF，建议

form对象

1）  document.getElementById(‘btn1’).click(). 搜索引擎的，只能提示，点击后相当与点击了‘搜索’按钮

2）  常用：click(),focus(),blur();//相当于通过程序来触发元素的单击、获取焦点以及失去焦点的事件

3）  Form对象是表单的Dom对象

4）  方法：submit()提交表单，但是不会触发onsubmit事件

5）  实现autoposot，也就是焦点离开控件后页面立即提交，而不是只有提交submit按钮以后才提交，当光标离开的时候触发onblur事件，在onblur中调用form的submit方法

6）  在点击submit后form的onsubmit事件被触发，在onsubmit中可以进行数据校验，如果数据有问题，返回false即可取消提交

7）  <form name=”form1” action=”a.aspx” methos=”get” onsubmit="if(document.getElementById('txtname').value.length==0){alert('姓名必填');return false;}">form>    

不同浏览器的差异

1）  不同浏览器中对DOM支持的方法不一样
1. 获取网页中那个元素触发了事件，IE里使用srcElement;在火狐里使用target
2. 使用dom获取和更改网页标签元素内文本，在ie使用innerText在火狐里使用textContent
3. 动态为元素绑定事件：在ie中绑定事件的方法时attachEvent；在火狐中绑定事件的方法时addEventListener（类似于多多类委托）

2）  不同浏览器中对css的支持不一样：哀悼网页中使用css只有ie支持，ff不支持。filter：gray

3）  jQuery之类的框架进行了封装，将不同浏览器的差异帮开发人员处理了，开发人员只要调用jQuery的方法，jQ会帮助在不同浏览器中进行翻译。用jq就可以决解不同浏览器Dom的不同，对于css的不同是美工的事

 

JS中正则表达式

1）  javaScript中创建正则表达式类的方法：
1.  var regex=new RegExp(‘\\d{5}’) （这种写法仅用于动态生成正则表达式的情况下）
2.  或者 var regex=/^\d{5}$/（推荐）
3.  /表达式/是javascript中专门为简化正则表达式编写而提供的语法，写在//中的正则表达式就不用管转义符了

RegExp对象的方法：
1.  test(str) 判断字符串str是否匹配正则表达式，相当于IsMatch
    var regex=/.+@+/;  //所有的正则表达式都要写到//里
    alert(regex.text(‘[email protected]’));
    alert(regex.text(‘ab.com’));
2.  exec(str)进行搜索匹配，返回值为匹配结果（*），相当于C#中match()和matches()
   1. 如果exec（）中找到匹配的文本，则返回一个结果数组（完全匹配的字符串以及提取组的结果）。否则，返回null。要提取多个需要反复调用exec()类似于matches()方法。//注意假全局模式/…../g，如果使用提取的时候，同时要提取组，那么建议使用正则表达式的exec（）方法来提取
   2. 在非全局模式下，调用一次exec（）相当于match()；在全局模式下连续多次调用相当于matches（）

可参考

http://www.w3school.com.cn/jsref/jsref_obj_regexp.asp

String的正则表达式方法

1）string对象中提供了一些与正则表达式相关的方法，相对于RegExp类的包装，简化调用
    match(regexp),非全局模式下相当于调用exec()，全局模式下相当于C#的matches(),返回数组中是所有的匹配结果（不含提取组的信息）
       var s=’[email protected]’;
       var regex=/(.+)@(.+)/;
       var match=s.match(regex);
       var msg = '杨中科12790063629苏坤表83202421504蒋坤表4018008164赵晓虎15219106773';

     msg = msg.replace(/(\d{3})(\d{4})(\d{4})+/g, '$1****$3'); //试下'$1*$$2*$3'

     alert(msg);

在字符串替换的时候，通过$$转义$符号：$$2*

获取键盘输入的按键

document.body.οnkeydοwn= function (evt) {  var e = window.event || evt; if(e.keyCode == 13){   e.keyCode = 9;  } };

 

checkbox反选代码：chks[i].checked =!chks[i].checked;

下拉菜单select子元素为option，option改变的事件为onchange，select中那个option选中对应哪个value   为select添加子元素document.getElementByTagName(‘select’).options[i] = new Option(myValue); document.getElementByTagName(‘select’).options[i].value =myValue;