JavaScript复习

发表于 更新于 分类于 阅读次数： Valine：

JavaScript介绍

  1. 交互性：信息的动态交互
  2. 安全性：不允许直接访问本地硬盘
  3. 跨平台性

………

……..

……..

JS中如何自定义对象

Obiect形式自定义对象

var 变量名=new Obiect（）；

变量名.属性=值；//定义一个属性

变量名.函数名=function（）{

}

对象的访问

变量名.属性名或函数名

1
2
3
var  test={};
test.name="阿华";
alert(test.name);

object的第二种定义方式

var 变量名={}；

1
2
3
4
5
6
7
8
9
var  test={
     name:"阿华",
     age: 13,
     show:function ()
     {
         alert(this.name+this.age)
     }
};
test.show();

JS中的事件

常用的事件

onload

页面加载完成之后，常用于做页面js代码初始化操作

静态

1
2
3
4
5
6
7
8
9
10
<head><!--头部信息，一般包含三部分内容，title，css标签，js代码-->
    <meta charset="UTF-8">
    <title>这是一个标题</title>
    <script src="js01.js"></script>
</head>
<!--可以在外面定义方法，简化操作-->
<body onload="test.show()">
hello

</body>

动态

1
2
3
4
5
6
7
8
9
10
head><!--头部信息，一般包含三部分内容，title，css标签，js代码-->
    <meta charset="UTF-8">
    <title>这是一个标题</title>
    <script src="js01.js"></script>
</head>
<!--可以在外面定义方法，简化操作-->
<body >
hello

</body>
1
2
3
4
5
6
7
8
9
var  test=new Object();
name="阿华";
age=13;
function hi(){
     alert("静态注册")
}
window.onload=function hi(){
     alert("动态注册"+this.name+this.age)
}

onclick

单击事件，常用于鼠标的点击相应操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html><!--约束，声明-->
<html lang="zh_CN"><!--表示html的开始，后面表示语言为中文-->
<head><!--头部信息，一般包含三部分内容，title，css标签，js代码-->
    <meta charset="UTF-8">
    <title>这是一个标题</title>
    <script src="js01.js"></script>
</head>
<!--可以在外面定义方法，简化操作-->
<body >
<button onclick="hi()">静态注册</button>
<!--document是javascript提供的一个对象代表所有的对象
id通过id标签获取属性
-->
<button id="button1">动态注册</button>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
var  test=new Object();
name="阿华";
age=13;
function hi(){
     alert("静态注册")
}
window.onload=function (){
    var button= document.getElementById("button1");
    button.onclick=function (){
         alert("动态调用")
    }
}

onblur

常用于输入框失去焦点后，验证其输入内容是否合法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var  test=new Object();
name="阿华";
age=13;
function hi(){
     //console是控制台对象，由JavaScript专门用来向浏览器的控制器打印输出用于测试
     //log是打印方法
     console.log("检测用户名中");
}
window.onload=function (){
     var txt=document.getElementById("password");
     txt.onblur=function () {
          console.log("动态对象")
     }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html><!--约束，声明-->
<html lang="zh_CN"><!--表示html的开始，后面表示语言为中文-->
<head><!--头部信息，一般包含三部分内容，title，css标签，js代码-->
    <meta charset="UTF-8">
    <title>这是一个标题</title>
    <script src="js01.js"></script>
</head>
<!--可以在外面定义方法，简化操作-->
<body >
用户名：<input type="text" onblur="hi()"><br>
密码：<input type="text" id="password"><br>
</body>
</html>

image-20220328181239182

onchange内容发生改变事件

常用于下拉列表和输入框内容发生改变后的操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var  test=new Object();
name="阿华";
age=13;
function hi(){
     //console是控制台对象，由JavaScript专门用来向浏览器的控制器打印输出用于测试
     //log是打印方法
     alert("国籍已经改变")
}
window.onload=function (){
     var obj=document.getElementById("id01")
     obj.onchange=function (){
          alert("男改变")
     }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html><!--约束，声明-->
<html lang="zh_CN"><!--表示html的开始，后面表示语言为中文-->
<head><!--头部信息，一般包含三部分内容，title，css标签，js代码-->
    <meta charset="UTF-8">
    <title>这是一个标题</title>
    <script src="js01.js"></script>
</head>
<!--可以在外面定义方法，简化操作-->
<body >
请选择你的国籍
<select onchange="hi()">
    <option>中国</option>
    <option>美国</option>
</select><br>
<select id="id01" >
    <option>中国</option>
    <option>美国</option>
</select>
</body>
</html>

onsubmit

表单提交事件，验证表单是否合法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var  test=new Object();
name="阿华";
age=13;
function hi(){
     alert("表单不合法");
     return false;
}
window.onload=function (){
     var obj=document.getElementById("id01")
     obj.onsubmit=function (){
          alert("表单不合法")
          return false;
     }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html><!--约束，声明-->
<html lang="zh_CN"><!--表示html的开始，后面表示语言为中文-->
<head><!--头部信息，一般包含三部分内容，title，css标签，js代码-->
    <meta charset="UTF-8">
    <title>这是一个标题</title>
    <script src="js01.js"></script>
</head>
<!--可以在外面定义方法，简化操作-->
<body >
<!--可以阻止不合法的表单提交，return false 可以阻止表单提交-->
<form action="www.baidu.com" method="get" onsubmit="return hi()">
<input type="submit" value="静态注册">
</form>

<!--可以阻止不合法的表单提交，return false 可以阻止表单提交-->
<form action="www.baidu.com" method="get" id="id01">
    <input type="submit" value="静态注册">
</form>
</body>
</html>

事件的注册

告诉浏览器，当事件相应后要执行那些代码，叫事件注册

静态事件注册

通过html标签的事件属性直接赋予事件相应后的代码

动态事件注册

是指先通过js代码得到标签的dom对象，然后在通过dom对象.事件名=function（）{}这种形式赋予事件响应的代码

Dom模型

把文档中的标签属性文本转换成对象来管理，拥有树形结构

Document对象方法

表示整个html对象

1
document.getElementById
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
<!DOCTYPE html><!--约束，声明-->
<html lang="zh_CN"><!--表示html的开始，后面表示语言为中文-->
<head><!--头部信息，一般包含三部分内容，title，css标签，js代码-->
    <meta charset="UTF-8">
    <title>这是一个标题</title>
    <script >
        function show(){
            var obj=document.getElementById("id01");
            //alert(obj.type)得到对象的类型
            //alert(obj.value)得到值
            var userText=obj.value;
            //定义规则
            var patt=/^\w{5,12}$/;
            /*test方法用于测试某个字符串是否匹配规则，如果匹配返回true*/
            if (patt.test(userText)){
                alert("成功")
            }
        }
    </script>
</head>
<!--可以在外面定义方法，简化操作-->
<body >
<!--可以阻止不合法的表单提交，return false 可以阻止表单提交-->
<form action="www.baidu.com" method="get" >
<input type="text" id="id01" onclick="show()" value="hi">
</form>

</body>
</html>
1
var obj1=document.getElementsByName("name02");//可以得到多个属性值
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
<!DOCTYPE html><!--约束，声明-->
<html lang="zh_CN"><!--表示html的开始，后面表示语言为中文-->
<head><!--头部信息，一般包含三部分内容，title，css标签，js代码-->
    <meta charset="UTF-8">
    <title>这是一个标题</title>
    <script>
        function selectAll(){
            var hobbies=document.getElementsByName("hobby");
            for (var i=0;i<hobbies.length;i++){
                hobbies[i].checked=true;
            }
        }
        function selectNo(){
            var hobbies=document.getElementsByName("hobby");
            for (var i=0;i<hobbies.length;i++){
                hobbies[i].checked=false;
            }
        }
        function selectRev(){
            var hobbies=document.getElementsByName("hobby");
            for (var i=0;i<hobbies.length;i++){
                hobbies[i].checked=!hobbies[i].checked;
            }
        }
    </script>
</head>

<body >
兴趣爱好
<input type="checkbox" name="hobby" value="cpp" > c++
<input type="checkbox" name="hobby" value="java" c> java
<input type="checkbox" name="hobby" value="c"> c
<br>
<button onclick="selectAll()">全选</button>
<button onclick="selectNo()">全不选</button>
<button onclick="selectRev()">反选</button>
</body>
</html>
1
var hobbies=document.getElementsByTagName("input");//按照标签属性，选中input标签的属性进行操作

以上三个方法在优先顺序为id优先，name其次

正则表达式

1
2
3
4
5
6
//定义规则
            //var patt=new RegExp("e");//表示必须含有e
            //var patt=/e/;//表示必须含有e
            //var patt=/[abc]/;//表示是否包含任意一个
            var patt=/[a-z]/;//表示是否包含a-z任意一个小写字母
            var patt=/[0-9]/;//表示是否包含任意数字

元字符

\w,用于查找单个字符

1
var patt=/\w/;

量词

n+，表示是否包含至少一个n

1
var patt=/n+/;

n*，表示字符串中是否包含0个或多个n，最小合格就停止检查

1
var patt=/n*/;

n?，表示字符是否包含0个或1个n

1
var patt=/n?/;

n{3},表示字符是否包含连续三个a

1
var patt=/n{3}/;

n{1，3}，最少1，最多3个连续

1
var patt=/n{1,3}/;

n{1,}，1个以上

1
var patt=/n{1,}/;

n$,以n为结尾

1
var patt=/n$/;

^n,表示以n开头

1
var patt=/^n/;

^n{3,5}$，表示从头到尾都符合

1
var patt=/^n{3,5}$/;

提示效果

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
<!DOCTYPE html><!--约束，声明-->
<html lang="zh_CN"><!--表示html的开始，后面表示语言为中文-->
<head><!--头部信息，一般包含三部分内容，title，css标签，js代码-->
    <meta charset="UTF-8">
    <title>这是一个标题</title>
    <script >
        function show(){
            var obj=document.getElementById("id01");
            var userText=obj.value;
            var patt=/^\w{5,12}$/;
            var obj1=document.getElementById("id02");
            //innerHtml表示起始标签和结束标签的内容
            if (patt.test(userText)){
                obj1.innerHTML="用户名合法";
            }
            else {
                obj1.innerHTML="用户名不合法";
            }
        }
    </script>
</head>
<!--可以在外面定义方法，简化操作-->
<body >
<!--可以阻止不合法的表单提交，return false 可以阻止表单提交-->
<form action="www.baidu.com" method="get" >
    <input type="text" id="id01" onclick="show()" value="hi">
    <span style="color: red" id="id02">
    </span>
</form>

</body>
</html>

image-20220329100109666

也可以插入图片作为提示效果

1
obj1.innerHTML="<img width='18px' height='18px' src=\"D:\\壁纸\\蓝天.png\">";

鼠标悬浮与离开

event表示当前发生的对象，srcElement表示事件源

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
<!DOCTYPE html><!--约束，声明-->
<html lang="zh_CN"><!--表示html的开始，后面表示语言为中文-->
<head><!--头部信息，一般包含三部分内容，title，css标签，js代码-->
    <meta charset="UTF-8">
    <title>水果表格</title>
    <link href="test.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="js01.js"></script>
</head>

<body >
<table border="1" width="800" height="600" id="id01">
    <tr >
        <th>名称</th>
        <th>单价</th>
        <th>数量</th>
        <th>小计</th>
        <th>操作</th>
    </tr>
    <tr >
        <td>苹果</td>
        <td onmouseover="shouHand()">5</td>
        <td>20</td>
        <td>100</td>
        <td>×</td>
    </tr>
    <tr >
        <td>西瓜</td>
        <td onmouseover="shouHand()">3</td>
        <td>10</td>
        <td>30</td>
        <td>×</td>
    </tr>
    <tr >
        <td>菠萝</td>
        <td onmouseover="shouHand()">4</td>
        <td>25</td>
        <td>100</td>
        <td>×</td>
    </tr><tr >
        <td>榴莲</td>
        <td onmouseover="shouHand()">6</td>
        <td>12</td>
        <td>72</td>
        <td>×</td>
    </tr><tr >
        <td>总计</td>
        <td colspan="4" onmouseover="shouHand()">单价</td>
    </tr>
</table>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
table{
    margin-left: auto;
    margin-right: auto;
}
tr{
    text-align: center;
}
body{
    background-color: skyblue;
}
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
//window表示当前窗口的信息,加载完成绑定事件
//使用此方法可以减少html掺杂js代码
window.onload=function (){
    var fruitTable=document.getElementById("id01");
    //调用onmouseover方法，不用小括号，否则会返回值
    var trEvery=fruitTable.rows;
    for (var i=0;i<trEvery.length;i++){
        var tr=trEvery[i];
        tr.onmouseover=changeBgColor;
        tr.onmouseout=clearBgColor;
        var  cells=tr.cells;
        var priceTD=cells[1];
        priceTD.onmouseover=shouHand;
    }
}
//添加背景颜色
function changeBgColor(){
    //event表示当前发生的事件
    //event.srcElement表示事件源
    //event.srcElement.tagName标签名称
    //alert(event.srcElement);
    if (event){
        var td=event.srcElement;
        //获取父元素
        var tr=td.parentElement;
        tr.style.backgroundColor="green";
        tr.style.color="red";
        /*
        *
        * */
    }
}
//去除背景颜色
function clearBgColor(){
    if (event){
        var td=event.srcElement;
        var tr=td.parentElement;
        //还原为原来的颜色
        tr.style.backgroundColor="";
        tr.style.color="";
    }
}
//当鼠标悬浮在单价单元格，显示手势
function shouHand(){
    if (event&&event.srcElement&&event.srcElement.tagName==="TD"){
        var td=event.srcElement;
        //cursor表示光标形式
        td.style.cursor="pointer";
    }
}

image-20220329123839917

更改

点击时，单价可以进行更改

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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
//window表示当前窗口的信息,加载完成绑定事件
//使用此方法可以减少html掺杂js代码
window.onload=function (){
    var fruitTable=document.getElementById("id01");
    //调用onmouseover方法，不用小括号，否则会返回值
    var trEvery=fruitTable.rows;
    for (var i=1;i<trEvery.length-1;i++){
        var tr=trEvery[i];
        tr.onmouseover=changeBgColor;
        tr.onmouseout=clearBgColor;
        var  cells=tr.cells;
        var priceTD=cells[1];
        priceTD.onmouseover=shouHand;
        //绑定鼠标单价点击
        priceTD.onclick=editPrice;

    }
}
//更改单价
function editPrice() {
    if (event){
        var priceTD=event.srcElement;
        //判断如果是属于文本节点，判断是否有子节点，
        if (priceTD.firstChild&&priceTD.firstChild.nodeType===3) {
            //表示设置或者获取当前节点的内部文本
            var oldPrice = priceTD.innerText;
            //表示设置当前节点的内部html
            priceTD.innerHTML = "<input type='text' size='4'/>";
            //第一个子节点
            var input = priceTD.firstChild;
            if (input.tagName === "INPUT") {
                input.value = oldPrice;
                //选输入框内部文本
                input.select();
                //失去焦点后操作
                input.onblur=updatePrice;
            }

        }
    }
}
//失去焦点，更新单价
function updatePrice(){
    if (event){
        var input=event.srcElement;
        var  newPrice=input.value;
        //input节点的父节点表示
        var priceTD=input.parentElement;
        priceTD.innerText=newPrice;
        //更新当前行的小计
        updateXiaoJi(priceTD.parentElement);
    }
}
//更新小计
function updateXiaoJi(tr){
    if (tr&&tr.tagName==="TR"){
        var tds=tr.cells;
        var price=tds[1].innerText;
        var count=tds[2].innerText;
        var xiaoJi=parseInt(price)*parseInt(count);
        tds[3].innerText=xiaoJi;
        var fruitTable=document.getElementById("id01");
        //更新总计
        var rowCount=fruitTable.rows.length;
        var totalCount=0;
        var rows=fruitTable.rows;
        for (var i=1;i<rowCount-1;i++){
            var tr=rows[i];
            var xj=parseInt(tr.cells[3].innerText);
            totalCount=totalCount+xj;
        }
        rows[rowCount-1].cells[1].innerText=totalCount;
    }
}
//添加背景颜色
function changeBgColor(){
    //event表示当前发生的事件
    //event.srcElement表示事件源
    //event.srcElement.tagName标签名称
    //alert(event.srcElement);
    if (event){
        var td=event.srcElement;
        //获取父元素
        var tr=td.parentElement;
        tr.style.backgroundColor="green";
        tr.style.color="red";
    }
}
//去除背景颜色
function clearBgColor(){
    if (event){
        var td=event.srcElement;
        var tr=td.parentElement;
        //还原为原来的颜色
        tr.style.backgroundColor="";
        tr.style.color="";
    }
}
//当鼠标悬浮在单价单元格，显示手势
function shouHand(){
    if (event&&event.srcElement&&event.srcElement.tagName==="TD"){
        var td=event.srcElement;
        //cursor表示光标形式
        td.style.cursor="pointer";
    }
}

删除指定与限制键盘输入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//判断输入的内容
function checkContent(){
    if (event&&event.srcElement&&event.srcElement.tagName==="INPUT"){
        var kc =event.keyCode;
        //0-9对应编码为48-57
        //backspace：8
        //enter： 13
        if ((kc>=48&&kc<=57)||kc===8||kc===13){
            //不满足取消输入
            event.returnValue=true;
        }else{
            event.returnValue=false;
        }
        if (kc===13){
            updatePrice();
        }
    }
}