JavaScript知识点梳理

安乃玩家

已于 2023-05-10 11:14:20 修改

阅读量369

点赞数

分类专栏：前端文章标签： javascript 前端开发语言

于 2022-12-22 14:44:20 首次发布

本文链接：https://blog.csdn.net/jbkouohb/article/details/128408517

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JavaScript简介

由网景（Netscape）公司推出
是一门面向对象的，清亮的，弱类型解释型脚本语言。
弱类型：没有数据的限制。
解释型：无需编译，只要是特定的单词，浏览器就可以翻译。

JavaScript写在哪里

1. 写在某个标签当中

例如：

<button onclick="document.write('hello JS')">点击一下 </button>

2.写在Script标签当中

script 标签可以放在内容当中，标签通常写在<head></head>中或者body结束之前
自己写的话最好写在页面中

<script></script>

3.写在单独的文件当中，在通过script标签导入

JS中的输出语句

<!-- 通过浏览器自带的消息提示框输出 -->
        <button onclick="alert('hello javaScript')">点击一下</button>

<!-- 通过控制台输出日志信息 -->
        <button onclick="console.log('hello JavaScript')">再点击一下</button>

<!-- 将输出类容放到页面上 -->
        <button onclick="document.write('hello JS')">点击一下 </button>

JS中的注释

1.单行注释

//单行注释
<!--多行注释-->

/**/

JS的组成

ECMAScript 是一种标准

ECMAScript定义了JavaScript的基本语法。

ECMAScript核心语法

** 数据类型 **

原始类型

JS中的原始类型	说明
数值型number	整数，小数为数值型
字符串型string	单双引号的都是字符串类型
布尔型boolean	true/false
空类型null	通过null赋值
未定义类型undefined	未声明或没有值

引用类型

对象，数组，函数等

定义类型

var name = "张三";
        var age;
        age=18;
        console.log("name:"+name+"age:"+age);

运算符

JS中的boolean可以用true/1，false/0来表示；

所以可以将true和false当作数来运算

算术

+ - * / %
除了+号外 ，其余都可以做字符运算

关系

> < >= <= == !=关系符号得到的结果是 true 或者 false
'==='比较的是两边的类型和内容是否相同，同为true才是true
'!=='比较值和数据类型

逻辑

&& || |

赋值和符合数值

= += -= *= /= %=
如a*=b+c相当于a=a(b+c)

自增自减

++ --

符号在前，先+1或-1后使用 反之；

条件

表达式1？表达式2：表达式3

//java中的while(true)在这里可以写作
while(1){
//表达式
}

条件语句

if语句

单分支语句

if(判断条件){
...
}

双分支语句

if(条件语句){
...
}else{
...
}

多分支语句

if(条件语句）{
...
}else if(条件语句){
...
}...
else{
...
}

嵌套语句

if(条件){
if(条件语句）{
...
}
}

switch语句

switch(n)
{
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        与 case 1 和 case 2 不同时执行的代码
}

注意：JS里的switch里的case后的数据类型可以是不同的，java中的必须是相同类型的case语句；

循环语句

for循环

循环代码块一定的次数

for (var i=0;i<cars.length;i++)
{ 
    document.write(cars[i] + "<br>");
}

for/in循环

循环遍历对象的属性

while (条件)
{
    需要执行的代码
}

while循环

当指定的条件为true时循环指定的代码块

do
{
    需要执行的代码
}
while (条件);

do/wihle循环

同while,指定true时执行指定代码块类容；

javaScript break和continue语句

break

跳出当前循环体，会执行接下来的代码

for (i=0;i<10;i++)
{
    if (i==3)
    {
        break;
    }
    x=x + "The number is " + i + "<br>";
}

continue

它会中断当前循环体，直接结束本次循环，继续下一次迭代循环

while (i < 10){
  if (i == 3){
    i++;    //加入i++不会进入死循环
    continue;
  }
  x= x + "该数字为 " + i + "<br>";
  i++;
}

JS中的数组

js中的数组类似于java中的集合数组

他是一个可变的数组且可以存放不同类型

定义数组的方式

var 数组名 = new Array();
var 数组名 = [];

默认没有初始化的位置，用undefined填充
最大下标决定了数组长度
可以保存不同类型的数据

遍历数组的两种方式

for循环遍历

for(var i=0;i<arr.length;i++){
   console.log(arr[i]);
}

增强for循环

for(var index in list){
   console.log(list[index])
}

初始化数组

var list =[123,"asd",true,"qwe"];
var list = new Array(123,"asd",true,"qwe");

数组常用方法

以下方法在调用时都会影响数组本身

方法名	作用	返回值
sort()	将数组升序排序	排序后的数组
reverse()	将数组的元素倒序保存	倒叙后的数组
pop()	移除最后一个元素	被去除的元素
push(参数)	添加一个元素到数组的末尾	更新后的数组的长度
unshift()	添加元素到数组头	更新后的数组的长度
shift(参数)	移除数组头的元素	被移除的元素
fill(参数)	使用指定参数填充数组	填充后的数组
splice(index)	从指定位置分割元素	截取后的新元素
splice(index , length)	指定位置长度的截取数组	截取到的数组
trim() [trimLeft() , trimRight()]	去除字符串前后的空格	去除空格后的字符串

以下方法不会影响原数组

方法名	作用	返回值
indexOf(元素)	得到某个元素第一次出现的索引	索引
lastindexOf(元素)	得到元素最后一次出现的索引	索引
concat(元素)	将指定元素添加到数组末尾	添加后的数组
join(字符)	拼接字符到数组中	拼接后的数组
slice(start,end)	截取start到end之间的数组	截取后的数组
map(方法名)	让数组执行指定方法	执行方法后的新数组

JavaScript练习

1.分解质因子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <p id="id"></p>
        <script>
            let n = Number(prompt('输入一个正整数'));
            var m = n;
            var arr = [];
            var flag = 0;
            for (var i = 2; i <= n; i++) {
                if (n % i == 0) {
                    arr.push(i)
                    n /= i;
                    i--;
                    flag++;
                }
            }
            let arrNum = arr.join('*');
            if (flag < 2) {
                console.log(m + "就是一个质数");
            } else {
                document.getElementById('id').innerHTML = m + "=" + arrNum;
            }
        </script>
    </body>

</html>

2.java版分解质因子

import java.util.Scanner;

public class Main {
    public static void main(String[] args) {
        System.out.println("输入所求正整数:");
        Scanner sc = new Scanner(System.in);
        Long n = sc.nextLong();
        long m=n;
        int flag = 0;
        String[] str = new String[50];
        for (long i = 2; i <= n; i++) {
            if (n % i == 0) {
                str[flag] = Long.toString(i);
                flag++;
                n = n / i;
                i--;
            }
        }
        if (flag < 2)
            System.out.println(m + "为质数");
        else {
            System.out.print(m + "=" + str[0]);
            for (int k = 1; k < flag; k++) {
                System.out.print("*" + str[k]);
            }
            System.out.println("\n"+m+"共有"+flag+"个质因数.");
        }
        sc.close();
    }
}

3.输入某一年的某一月，计算这个月有多少天

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <p id="id"></p>
        <script>
            var y = Number(prompt("请输入年份："));
            var m = Number(prompt("请输入月份："));
            var d;
            if (y % 4 == 0 || y % 100 == 0);
            switch (m) {
                case 1:
                    d = 31;
                    break;
                case 2:
                    if (y % 4 == 0 && y % 100 != 0 || y % 400 == 0) {
                        d = 28;
                    } else {
                        d = 29;
                    }
                    break
                case 3:
                    d = 31;
                    break;
                case 4:
                    d = 30;
                    break;
                case 5:
                    d = 31;
                    break;
                case 6:
                    d = 30;
                    break;
                case 7:
                    d = 31;
                    break;
                case 8:
                    d = 31;
                    break;
                case 9:
                    d = 30;
                    break;
                case 10:
                    d = 31;
                    break;
                case 11:
                    d = 30;
                    break;
                case 12:
                    d = 31;
                    break;
                default:
                    console.log("没有这一天")
            }
            document.getElementById("id").innerHTML = y + "年的" + m + "月有" + d + "天";
        </script>
    </body>
</html>

4.冒泡排序

<script>
            var flag = 0;
            var arr = new Array(12, 15, 65, 54, 33);
            for (var i = 0; i < arr.length; i++) {
                for (var j = 0; j < arr.length; j++) {
                    if (arr[j - 1] > arr[j]) {
                        flag = arr[j - 1];
                        arr[j - 1] = arr[j];
                        arr[j] = flag;
                    }
                }
            }
            for (var i = 0; i < arr.length; i++) {
                console.log(arr[i]);
            }
        </script>

JavaScript正则表达式

Regular Expression

什么是正则表达式？

正则表达式是由字符序列形成的一类搜索模式，它可以通过自定义的一些列符号来搜索你要查询的内容，它可以是一个简单的符号，也可以是一连串的复杂的模式，他常常用来搜索或者替代文本的操作。

语法

定义一个正则表达式

直接量语

/正则表达式主体/修饰符（可有可无）

var patt = /runoob/i

创建对象
```
var reg = new RegExp("ceshi");
```

注：如果表达式返回的结果为true则说明表达式的格式正确，反之则不正确！

       //字符串校验
         <script>
            var reg = new RegExp("cheshi");
            var result = reg.test('ceshi');
             //返回的结果为false
            console.log(result);
        </script>
        //数字校验
        <script>
            var reg = /[0-9]/;
            var result = reg.test('1');
             //返回的结果为true
            console.log(result)
        </script>

正则表达式修饰符

修饰符在全局搜索中不分大小

表达式	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配

正则表达式模式

方括号用于查找某个范围的字符：

表达式	描述
[abc]	查找方括号之间的任何字符
[0-9]	查找0-9之间的所有数字
(x\|y)	查找任何以\|分割的选项(两者其一)

元字符是拥有特殊含义的字符：

元符号	描述
\d	查找数字
\s	查找空白字符
\b	匹配单词边界
\uxxxx	查找以i6进制xxxx规定的Unicode字符

量词：

量词	描述
n+	匹配任何包含至少一个n的字符串
n*	匹配任何包含零个或多个n的字符串
n?	匹配任何包含零个或一个n的字符串
n{X}	匹配含X个n的序列字符串
n$	匹配任何结尾为n的字符串
^n	匹配任何开头为 n的字符串
?=n	匹配任何其后紧接指定字符串n的字符串
?!n	匹配任何其后没有紧接指定字符串n的字符串

注：当^置于[ ]当中时意味着取反，如[^abc]为除了abc之外的其他字符。

正则表达式常用方法

RegExp对象方法

方法名	作用	返回值
test()	检索表达式是否匹配某个模式	true/fase
esec()	检索字符串中的正则表达式的匹配	返回匹配结果的数组
toString()	转换表达式为字符串	转换后的字符串

“其他详情可以查阅jsRegExp手册”

支持正则表达式的 String 对象的方法

方法	描述
search	检索与正则表达式相匹配的值
match	找到一个或多个正则表达式的匹配
replace	替换与正则表达式匹配的子串
split	把字符串分割为字符串数组

RegExp对象属性

属性	描述
constructor	返回一个函数，该函数是一个创建RegExp对象的原型
global	判断是否设置了”g"修饰符
ignoreCase	判断是否设置了’‘i’修饰符
lastIndex	用于判断规定下次的起始位置
multiline	判断是否设置了"m"修饰符
source	返回正则表达式的匹配模式

例子1：QQ号的正则表达式

/* qq号大于5小于10位
第一位不能为零且每一位都为数字 */
var regqq=/^[1-9]{1}\d{4,9}$/;

例子2：手机号正则表达式

//简易版本

var phoneReg = /^[1]([3-9])[0-9]{9}$/;

//严谨版本

var phoneReg = /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/;

测试：

   var telStr = /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/;
    var inputStr = "18810998988";
    if (!(telStr.test(inputStr))) {
      flag = '手机号码输入不规范';
    }else{
      msg = "手机号码规范";
    }

JavaScript对象

数学运算

常数学函数（方法）：

函数名	作用	返回值
floor	向下取整	返回整数部分的值
ceil	向上取整	小数部分大于零向上取整，为零则为整数部分
round	四舍五入	返回四舍五入后的值
abs	取绝对值	返回元素的绝对值
sqrt	开平方	返回开平方后的值
cbrt	开立方	返回开立方后的值
pow	幂运算	返回运算结果
random	产生[0,1)的随机数	产生的随机数

//计算m到n的随机数,包含[m,n];
Math.floor(Math.random()*（n-m+1）+m);

函数function

一段能够实现某一特定功能的代码，可以被重复的被调用

函数的定义

//函数的参数有就写，没有 就不用写
function 函数名(参数1 ，参数2 ，，，){
    //当有返回值的时候可以使用return，没有的时候可以不写
     return 返回值;
}

函数调用

1、作为函数被调用

function 函数名(参数1 ，参数2 ，，，){
     return 返回值;
}//但函数被定义后，就可以使用函数名调用函数
var value = 函数名(参数1，参数2，，，);
//利用value来接收函数返回的参数，没有返回值就可以不用接收


2、作为方法被调用

var obj ={
   name:"bob";
   age:15;
   last:function(){
    return this.name + " " + this.age;
     }, 
};
//通过对象obj调用，函数作为方法被调用
obj.last();


3、使用构造函数调用函数


function f(a,b){
    this.a=a;
    this.b=b;
}
var T = new f("a","b"){
    console.log(T.b,T.a);
}

注：函数的调用一定是在函数被定义之后才可以被调用，没有定义的函数被调用会报错

全局函数

parseInt()
- 将传入的参数转换成一个整数
- 字符或字符串无法转为整数，但不会报错，得到的结果是（NaN)
- 能够识别数字开头的字符串，取数字部分，后面的丢弃。
parseFloat()
- 无法识别字符，同样可以截取数字开头部分
- 将一个字符串转换成一个浮点数
isNaN()
- 判断是不是一个数
- 返回一个boolean值
Number()
- 对象转数字 new Number(“123”)得到一个对象
eval()
- 可执行字符中可执行的内容当作命令执行
- 如：eval(“3+2”)得到的值是5；

匿名函数

function(){
    函数体;
}

JavaScriptBOM

Browser Object Model

浏览器对象模型

可以通过js获取浏览器信息的控制浏览器行为

弹框

警告框

//带有提示文字和确认按钮，没有返回值
alert("提示文字")

输入框

//带有提示文字，输入框和确认按钮，有返回值
prompt("提示文字")

确认框

//有返回值，提示文字
confirm("提示文字")

例子：猜数字游戏

<script>
            alert("欢迎来到猜数字游戏");
            var r = Math.floor( Math.random()*100+1)
            while(true){
                var num  = prompt("请输入数字");
            if(num>r){
                alert("太大了!");
            }else if(num<r){
                alert("太小了!");
            }else{
                alert("恭喜你答对了!");
            }
    }
        </script>

window对象

表示浏览器窗口对象，可以获取浏览器的相关信息，调用其行为

常用属性和行为	作用
window.innerWidth	获取当前浏览器窗口可视区域的宽度
window.innerHeight	获取当前浏览器窗口可视区域的高度
window.screen	获取屏幕对象
window.localtion	获取本地对象
window.history	获取历史对象
window.open	打开一个页面
window.close	关闭一个页面（默认关闭自身）谁调用关闭谁
window.setTimeout	设置延时操作（执行一次结束）
window.clearTimeout	清除倒计时
window.setInterval	设置时间间隔（执行无限次）
window.clearInterval	清除时间间隔

//通过window.open()来打开一个窗口展示百度页面
<body>
        <button id="btn">点击一下</button>
        <script>
            var opens = document.getElementById("btn");
            opens.onclick = function() {
            window.open("http://www.baidu.com");
            }

        </script>
    </body>

//添加一个按钮，在点击时弹出输入密码框，如果密码正确，3秒后关闭页面，如果错误
//不做任何操作
<body>
        <button id="btn">点击一下</button>
        <button id="clear">取消</button>
        <script>
            var opens = document.getElementById("btn");
            var pwd;
            var time;
            opens.onclick = function() {
                pwd = prompt("请输入密码");
                if (pwd === "123456") {
                     time = window.setTimeout(function() {
                        alert("3秒后关闭当前页面");
                        window.close();
                    }, 3000);
                }
            }
            document.getElementById("clear").onclick = function(){
                window.clearTimeout(time);
            }
        </script>
</body>

//随机点名练习
<script>
            var h1 = document.getElementById("h1");
            var s;
            var nameList = ['刘希莲', '陈宜源', '吴泰恭', '张孝南', '陈嘉华', '陈志桦', '王佩桦', '强兰义', '李志伯'];
            document.getElementById("start").onclick = function() {
                s = window.setInterval(function() {
                    var r = Math.floor(Math.random() * nameList.length);
                    h1.innerText = nameList[r];
                }, 80)
            }
            document.getElementById("end").onclick = function() {
                window.clearInterval(s);
            }
        </script>

screen对象

用于获取屏幕相关信息

属性	作用
[window]screen.width	获取当前屏幕设置的宽度
[window]screen.height	获取当前屏幕设置的高度
[window]screen.availWidth	获取当前屏幕除导航栏外设置的宽度
[window]screen.availHeight	获取当前屏幕除导航栏外设置的高度

location对象

用于设置或获取地址栏相关信息

常用方法和属性	作用
[window]location.href	获取或设置当前页面地址(可后退)
[window]location.assign（“url”）	改变当前地址（可后退）
[window]location.replace(“url”)	替换当前页面地址（不可后退）
[window]location.reload()	刷新当前页面

histroy对象

方法	作用
[window]history.back()	回退
[window]history,forward()/go()	前进

JavaScriptDOM

Document Object Model

文档模型

每个页面都是一个文档树（document tree）
每一个标签都是一个节点node
根节点就是html
document对象表示当前页面对象，表示当前页面对象
DOM用于操作（获取设置内容，样式等）

获取节点（获取HTML元素）

获取节点的方式	作用
document.getElementById(“标签的id”)	根据id获取页面中的节点
document.getElementByClassName("标签的class名“)	根据标签的class名获取页面中的所有对应的节点，返回一个节点数组
document.getElementByTagName(“标签名”)	通过标签名获取节点，得到的还是一个数组，不管有几个。
document.getElementByName(“属性name”)	通过属性name获取节点

获取节点文本

innerText:不能识别标签
innerHtml:可以识别到标签

练习

//判断输入内容是否是小于6位，并且显示不同的提示效果
<body>
        <input type="text" placeholder="账号" name="name" /><span id="warning"></span><br />
        <input type="password" placeholder="密码" name="pwd" />
        <script>
            var names = document.getElementsByName("name")[0];
            names.onblur = function() {
                if (names.value.length < 6) {
                    document.getElementById("warning").innerHTML = "<span style='color:red;'>密码不能小于6位</span>";
                } else {
                    document.getElementById("warning").innerHTML = "<span style='color:green;'>√</span>";
                }
            }
        </script>
    </body>

获取节点属性

常用属性	作用
节点src	获取或设置资源路径，如img的src
节点value	获取或设置节点的value属性，如表单的value
节点checked	获取或设置单选按钮和复选按钮的选中状态
节点className	获取或设置标签的class属性值
节点href	获取或设置标签的跳转路径值如a标签

修改节点样式

单个节点样式

节点style.样式名=“值”；

样式名需要使用驼峰命名法比如background-color=>backgroundColor
多个节点样式

节点style,cssText=“正常的css写法”

值里面的内容不可以换行

只能获取到通过该方式设置过的css样式

练习(随机点名)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            table {
                width: 500px;
                box-sizing: border-box;
                border: 1px solid #000000;
                text-align: center;
                border-collapse: collapse;
            }

            td {
                width: 100px;
                box-sizing: border-box;
                border: 1px solid #000000;
            }

            .hover {
                background-color: rgba(0, 255, 255, 0.5);
            }

            div {
                width: 500px;

                text-align: center;
            }

            .start,
            .end {
                background-color: aqua;
                margin-left: 15px;
                margin-right: 15px;
                border: none;
                margin-bottom: 5px;
            }
        </style>
    </head>
    <body>
        <div>
            <table cellpadding="10px">
                <tr>
                    <td>张纬祯</td>
                    <td>罗南扬</td>
                    <td>陈建玟</td>
                    <td>侯胜学</td>
                    <td>李妙峰</td>
                </tr>
                <tr>
                    <td>穆彦君</td>
                    <td>杜威柔</td>
                    <td>林家皓</td>
                    <td>李佩康</td>
                    <td>刘怡雨</td>
                </tr>
                <tr>
                    <td>潘坚昀</td>
                    <td>沈嘉玲</td>
                    <td>杨恭乔</td>
                    <td>王茹蓁</td>
                    <td>许婉婷</td>
                </tr>
                <tr>
                    <td>张惠忠</td>
                    <td>杨冠廷</td>
                    <td>叶彦博</td>
                    <td>郑紫智</td>
                    <td>刘丽雯</td>
                </tr>
                <button class="start">开始</button>
                <button class="end">结束</button>
            </table>
        </div>
        <script>
            var tdlist = document.querySelectorAll("td");
            var btns = document.querySelector(".start");
            var btne = document.querySelector(".end");
            var table = document.querySelector("table");
            var setTime;

            btns.addEventListener('click', function() {
                    clearInterval(setTime);
                    setTime = setInterval(change, 200);
                }

            );
            btne.addEventListener('click', function() {
                clearInterval(setTime);
            });

            function change() {
                var num = Math.floor(Math.random() * 20);
                // 将所有td背景颜色初始化
                for (var i = 0; i < tdlist.length; i++) {
                    tdlist[i].className = "";
                }
                tdlist[num].className = "hover";
            }
        </script>
    </body>
</html>
[i].className = "";
                }
                tdlist[num].className = "hover";
            }
        </script>
    </body>
</html>

练习(动态添加表格)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            table {
                width: 500px;
                box-sizing: border-box;
                border: 1px solid #000000;
                text-align: center;
                border-collapse: collapse;
            }

            tr,
            th,
            td {
                width: 100px;
                box-sizing: border-box;
                border: 1px solid #000000;
            }
        </style>
    </head>
    <body>
        <input type="text" name="singer" placeholder="输入歌手名" />
        <input type="text" name="song" placeholder="输入歌曲" /><button id="btn">添加</button>
        <table id="mtable">
            <tr>
                <th>歌手</th>
                <th>作品</th>
                <th>操作</th>
            </tr>
        </table>
        <script>
            document.getElementById("btn").onclick = function() {
                var table = document.getElementById("mtable");
                var singer = document.getElementsByName("singer")[0].value;
                var song = document.getElementsByName("song")[0].value;
                if (singer.length == 0 || song.length == 0) {
                    alert("输入不能为空");
                    return;
                }
                var tr = document.createElement("tr");
                var td1 = document.createElement("td");
                td1.innerText = singer;
                var td2 = document.createElement("td");
                td2.innerText = song;
                var td3 = document.createElement("td");
                td3.innerHTML = "<a>删除</a>";

                td3.children[0].onclick = function() {
                    table.removeChild(tr);
                }

                tr.appendChild(td1);
                tr.appendChild(td2);
                tr.appendChild(td3);

                table.appendChild(tr);
            }
        </script>
    </body>
</html>

事件

某个节点的行为

给节点添加事件

<button onclick="事件"></button>

<script>
节点.事件=function(){
    事件内容;
}
</script>

常用事件

事件	作用
onclick	鼠标点击事件
ondblclick	鼠标双击事件
onblur	文本框失去焦点
onfocus	文本聚焦事件
onmouseenter/onmouseover	鼠标移入
onmouseout/onmouseleave	鼠标移出
onmousemove	鼠标移动
onmousewheel	鼠标滚轮滚动
onmousedown/onmouseup	鼠标按下松开
onsubmit	表单提交
onchange	HTML改变

event对象

在莫个函数中传一个参数，通常为e或event,就可以监听对应的事件，

如在onmouse相关事件中，加入event，就能监听鼠标状态

节点.事件=function（e）{}

event对象常用属性和方法	作用
event.clientX	获取当前鼠标水平位置
event.clientX	获取当前鼠标垂直位置
event.preventDefault	阻止默认事件
event.stopPropagation	阻止事件冒泡

事件冒泡

文档中有重叠现象，并且有相同事件，在触发事件时就会有多个相同的事件被触发

JavaScript表单

表单

输入框

文本框 type=“text”
密码框 type=“password”
文本域 textarea

获取输入框中的值

//使用普通的后去id,class,name,标签名的方式
var v = document.getElementByName("name").value;
//获取表单的forms数组
document.forms[0].onsubmit=function(){
    //这样可以阻止表单的提交事件，只需要return false;即可
}

表单提交

一定要使用表单的提交事件（onsubmit()），不能用普通的单击事件

表单元素

select 下拉列表元素

<label for="os">OS</label>
        <select name="os">
            <option>os</option>
            <optgroup label="windows">
                <option value="home">home</option>
                <option value="pre">pre</option>
                <option value="pro">pro</option>
                <option value="ult">ult</option>
        </select>

可以通过value属性获取选择的值

var data  = document.getElementById('元素id').value;

//select也可以设置多选，多选的时候就需要将选择遍历才能得到相应的值
var selected = [];
for (var i = 0, count = elem.options.length; i < count; i++) {
  if (elem.options[i].selected) {
    selected.push(elem.options[i].value);
  }
}

checkbox 多选框控件

//多选框只有两种状态，一种是选中状态，另外一种时未选中状态
<input type="checkbox" name="toggle" id="toggle" value="toggle">

checked属性得到的只是一个boolean类型的值，表示是否被选中。

radio 单选框控件

<input type="radio" name="gender" value="Female"> Female </input>
<script>
var radios = document.getElementsByName('gender');
var selected;
for (var i = 0; i < radios.length; i++) {
  if (radios[i].checked) {
    selected = radios[i].value;
    break;
  }
}
if (selected) {
  // 用户选中了某个选项
}
</script>