初识JavaScript05

JavaScript
本文总阅读量:
  1. 1. 练习
  2. 2. 问题
  3. 3. JS中的正则表达式

练习

通过document.getElementById("XXX").style.display隐藏的是真正的使层消失

通过document.getElementById("div1").style.visibility实现的隐藏位置仍然占着，不过没有显示

以下演示了这一过程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<body>
    <input id="btn1" type="button" value="hide div via display" />
    <input id="btn2" type="button" value="hide div via visibility" />
    <div id="div1" style="background-color: black;height: 200px"></div>
    <input type="text" />
</body>
</html>
<script>
    document.getElementById("btn1").onclick = function () {
        if (document.getElementById("div1").style.display !== "none") {
            document.getElementById("div1").style.display = "none";
        } else {
            document.getElementById("div1").style.display = "block";
        }
    }
    document.getElementById("btn2").onclick = function () {
        if (document.getElementById("div1").style.visibility !== "hidden") {
            document.getElementById("div1").style.visibility = "hidden";
        } else {
            document.getElementById("div1").style.visibility = "visible";
        }
    }
</script>

动态添加层

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<a id="a1" href="javascript:void(0)">luox78</a>

 document.getElementById("a1").onmouseover= function() {
        var divObj = document.createElement("div");
        divObj.style.height = "200px";
        divObj.style.backgroundColor = "blue";
        divObj.style.positon = "absolute";
        divObj.style.left = this.offsetLeft + 'px';
        document.body.appendChild(divObj);
        //删除才创建的层
        document.getElementById("a1").onmouseleave = function() {
            document.body.removeChild(divObj);
        }
    }

动态隐藏层

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div id="div1" style="height: 1000px; border: black 3px solid">
？？？？？？？？？？？？、、、、、、、、、、、、、
</div>

 <script>
    var height = document.getElementById("div1").style.height;//记录一开始的高度
    document.getElementById("btn1").onclick = function () {
        var div = document.getElementById("div1");
        div.style.overflow = "hidden";
        //点击时先判断是否隐藏
        if (div.style.display === "none") {
            div.style.display = "block";
            div.style.height = height;
            return;
        }
        var setId = window.setInterval(function () {
                if (parseInt(div.style.height) < 100) {
                    window.clearInterval(setId);
                    //document.body.removeChild(div);
                    div.style.display = "none";//隐藏
                    console.log("div has been removed");
                }
                div.style.height = (div.offsetHeight - 100) + "px";//高度减100px
            },
            100);
    }
</script>

案例：图片跟着鼠标移动

1
2
3
4
5
6
7
8
<img id="img" src="TIM截图20180108210345.png"/>

document.onmousemove= function() {
        var img = document.getElementById("img");
        img.style.position = "absolute";
        img.style.left = window.event.clientX - img.width/2 + "px";
        img.style.top = window.event.clientY - img.height/2 + "px";
    }

问题

给标签设置属性值

label.setAttribute("属性名","属性值");设置属性值

this.getAttribute("属性名")获取属性值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<table>
    <tr>
        <td>1</td>
    </tr>
    <tr>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
    </tr>
</table>

<script>
    var tds = document.getElementsByTagName("td");
    for (var i = 0; i < tds.length; i++) {
        tds[i].setAttribute("innerText", tds[i].innerText);
       tds[i].onclick = function () {
            alert(this.getAttribute("innerText"));
        }
    }
</script>

显示浏览器型号

1
alert(window.navigator.userAgent);//检测浏览器

文本显示

word-break: break-all;实现自动换行

overflow: hidden;超出边框隐藏

1
2
3
<div style="height: 100px; width: 100px; border: black 2px solid; word-break: break-all;overflow: hidden">
luox78luox78luox78luox78luox78luox78luox78luox78luox78luox78luox78luox78luox78luox78luox78luox78luox78luox78luox78luox78luox78luox78luox78luox78
</div>

JS中的正则表达式

  • var reg = new RegExp(/Pattern/);先创建正则对象

    reg.test("string")判断string是否满足pattern

    1
    2
    3
    var reg = new RegExp(/^[0-9]{3}$/);
    console.log(reg.test("122"));//true
    console.log(reg.test("1221"));//false

  • var reg=/pattern/(/pattern/g)全局模式

    var result=reg.exec("string")

    1
    2
    3
    4
    5
    var msg="cmcc 10086;union 10010";
    var pattern=/\d+/;
    while(var res=pattern.exec(msg)){
      alert(res);//10086	10010
    }

  • match(regexp)，非全局模式下相当于调用exec(),全局模式下相当于调用c#的matches()，返回数组中是所有的匹配结果（不包含提取组的信息）

    1
    2
    3
    4
    var s = "aaa@163.com";
    var regex = /(.+)@(.+)/;
    var match = s.match(regex);
    alert(RegExp.$1 + “，服务器：” + RegExp.$2);（$1…$9）

    字符串.replace(/pattern/g,”要替换的字符串$1”);

模拟Trim()方法

1
2
3
4
5
var str = '           aaaaaaaaaaa         ';
alert('---' + exTrim(str) + '-----');
function exTrim(s) {
	return s.replace(/(^\s+)|(\s+$)/g, '');
}

密码强度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<body>
    <input type="text" name="name" value="" id="txt" />
    <table border="1" id="tb">
        <tr>
            <td>
                弱
            </td>
            <td>
                中
            </td>
            <td>
                强
            </td>
        </tr>
    </table>
</body>

<script type="text/javascript">
    window.onload = function () {
        document.getElementById('txt').onkeyup = function () {

            //获取td
            var tds = document.getElementById('tb').getElementsByTagName('td');
            for (var i = 0; i < tds.length; i++) {
                tds[i].style.backgroundColor = '#E6E6E6';
            }

            //获取密码
            var pwd = this.value;
            if (pwd.length > 0) {
                //根据密码验证强度
                var result = getPassWord(pwd);
                //强度设置颜色

                if (result <= 1) {
                    //弱
                    tds[0].style.backgroundColor = 'red';

                } else if (result == 2) {
                    //中
                    tds[0].style.backgroundColor = 'orange';
                    tds[1].style.backgroundColor = 'orange';
                } else if (result == 3) {
                    //强
                    tds[0].style.backgroundColor = 'green';
                    tds[1].style.backgroundColor = 'green';
                    tds[2].style.backgroundColor = 'green';
                }
            }

        };
    };
    function getPassWord(pwdMsg) {
        var lvl = 0;
        //密码中有数字lvl+1
        if (pwdMsg.match(/\d/)) {
            lvl++; //这么写简单
        }
        //密码中有字母lvl+1
        if (pwdMsg.match(/[a-zA-Z]/)) {
            lvl++;
        }
        //密码中有其他符号lvl+1
        if (pwdMsg.match(/[^0-9a-zA-Z]/)) {
            lvl++;
        }
        //密码小于6位lvl-1
        if (pwdMsg.length <= 6) {
            lvl--;
        }
        return lvl;
    }
</script>
jsfoundation
prev： next：