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>