JavaScript基础插曲—元素样式，正则表达式，全局模式，提取数组

JavaScript基础学习

学习js的基础很重要，可以让自己有更多的技能。我相信这个以后就会用到。

Eg：点击选择框，在div中显示出选择的数量

1. window.onload = function() {
2.     var inputs = document.getElementById('div1').getElementsByTagName('input');
3.     for (var i = 0; i < inputs.length; i++) {
4.         inputs[i].onclick = function () {
5.             var inputss = document.getElementById('div1').getElementsByTagName('input');
6.             var arroy = [];
7.             for (var j = 0; j <inputss.length; j++) {
8.                 if (inputss[j].checked) {
9.                     arroy[arroy.length] = inputss[j].value; //将选择的项放到数组中，循环的放置。
10.                 }
11.             }
12.             document.getElementById('div2').innerHTML = '共选中'+arroy.length+'项：'+arroy.toString()+'';
13.         };
14.     }
15. };

Eg:图标跟随鼠标移动

注意：需要将图片脱离文档流，我们需要设置其css中的position:absolute;这样就可以了。还有我们的body是有一个宽度，不代表整个页面。

1. <style type="text/css">
2.     img {
3.         position: absolute;
4.     }
5. </style>
6. <script type="text/javascript">
7.     window.onload = function() {
8.         document.onmousemove = function (event) {
9.             var s = window.event || event;
10.             var img = document.getElementById('imgAhui');
11.             img.style.left = s.clientX+'px';
12.             img.style.top = s.clientY + 'px';
13.         };
14.     };
15. </script>

元素的position样式值

à:static，无定位显示在默认位置。

à:absolute，绝对定位。

à:fixed，相对于窗口固定定位，位置不会跟随浏览器的滚动而变化。

à:relative,相对元素默认位置定位。

1：Onmouseover和onmouseout事件

Onmouseover和onmouseout事件，可以用于用户的鼠标移至html元素上方或移出的时候触发函数

1. window.onload = function () {
2.             //+onmouseover鼠标
3.             document.getElementById('aaa').onmouseover = function () {
4.                 //获取层对象
5.                 var sss = document.getElementById('div1');
6.                 //显示层
7.                 sss.style.display = 'block ';
8.                 //使层脱离文档流
9.                 sss.style.position = 'absolute';
10.                 sss.style.left = this.offsetLeft + 'px';
11.                 sss.style.top = this.offsetTop + 'px';
12.             };
13.             //+onmouseout鼠标移动开
14.             document.getElementById('aaa').onmouseout = function() {
15.                 var ssss = document.getElementById('div1');
16.                 ssss.style.display = 'none';
17.             };
18.         };

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

1. var div11 = document.getElementById('div1').offsetHeight;
2. var div1 = document.getElementById('div1').currentStyle.height;

onfocus事件：获得焦点事件。onclick事件：点击事件。

1. window.onload = function () {
2.     //onfocus+获得焦点事件
3.     document.getElementById('dd').onfocus = function() {
4.         if (this.value == '请输入内容' && this.className == 'inter') {
5.             //清空内容和样式
6.             this.value = ' ';
7.             this.className = '';
8.         }
9.     };
10.     //onblur+失去焦点事件
11.     document.getElementById('dd').onblur = function() {
12.         if (this.value==' ') {
13.             this.value = '请输入内容';
14.             this.className = 'inter';
15.         }
16.     };
17. };

3:js提交表单的方法

找到submit按钮并点击它的点击事件,或者可以直接调用表单对象的submit()方法实现提交。

JS中使用正则表达式

1:Js中创建正则表达式的方法

*一*：第一种方法

//判断邮箱是否合法。

1. var regex=/^[0-9]{6}$/;

就是把正则表达式写在我们常写的注释里面，但是对于正则表达式来说不是这样子的。

*二：*第二种方法

这种写法用于动态生成正则表达式的情况下。

1. var regex2 = new
   RegExp('^[0-9]{6}$');

我们在使用的时候推荐使用第一种方法，因为第一种方法使用起来方便。不需要管转义字符。

2:eg，利用正则表达式提供的test()方法来进行匹配

1. <script type="text/javascript">
2.     window.onload = function() {
3.         document.getElementById('btn').onclick = function() {
4.             var txt = document.getElementById('txt').value;
5.             //js中正则表达式的声明
6.             var regex = /^[0-9]{6}$/;
7.             //调用正则表达式对象的test()方法来测试是否匹配
8.             var isno = regex.test(txt);
9.             alert(isno);
10.         };
11.     };
12. </script>

3：使用正则表达式进行提取。

利用正则表达式的exec()方法来提取。这个的使用方法和test()一样。

这个方法的提取每次只能提取出来一个数据。

1. <script type="text/javascript">
2.     var msg = 'ahui1193451014小辉18694597894你好11599874857';
3.     window.onload = function () {
4.         //申明,定义正则表达式，用于提取数字，\d表示匹配数字，+表示一次或多次。
5.         var regex = /\d+/;
6.         var result = regex.exec(msg);
7.         alert(result);
8.          result = regex.exec(msg);
9.         alert(result);
10.     };
11. </script>

当我们需要提取多个数据的时候，我们需要在定义正则的时候加上g(全局模式

),这样提取出来是个集合，我们接着在使用就可以了。

1. <script type="text/javascript">
2.     var msg = 'ahui1193451014小辉18694597894你好11599874857';
3.     window.onload = function () {
4.         //申明,定义正则表达式，用于提取数字，\d表示匹配数字，+表示一次或多次。
5.         var regex = /\d+/g;
6.         //进行全局模式后，那么反复调用exec()方法，就可以提取出来每个匹配了。
7.         var result = regex.exec(msg);
8.         while (result) {
9.             alert(result);
10.             result = regex.exec(msg);
11.         }
12.     };
13. </script>

G(全局模式):加上这个是因为每次查找的时候记住了个数(index)，每次找的时候从之前查找的后面进行查找。

4:js中如何提取组。

还是和C#中的一样，是使用()来进行分组。当我们使用提取组，那个exec()方法返回的提取到的结果就不是一个简单的匹配字符串，而是一个数组，该组第一个元素是包含的字符串，第二个是提取到第一组的内容，三个是提取到第二组的内容。

1. <script type="text/javascript">
2.     var msg = 'ahui1193451014小辉18694597894你好11599874857';
3.     window.onload = function () {
4.       //这里使用(）来进行来组的划分
5.         var regex=/(\d{3})\d{4}(\d{4})/;
6.         var result = regex.exec(msg);
7.         while (result) {
8.             alert(result);
9.             result = regex.exec(msg);
10.         }
11.     };
12. </script>

5：字符串的match()方法和replace()方法来操作正则表达式。

Match():是匹配正则，replace():实现替换

1. <script type="text/javascript">
2.     var msg = 'ahui1193451014小辉18694597894你好11599874857';
3.     window.onload = function () {
4.         var datas = msg.match(/\d+/g);//正则要加全局模式
5.         for (var i = 0; i < datas.length; i++) {
6.             alert(datas[i]);
7.         }
8.     };
9. </script>