2.注释

3.数据类型

1.原始数据类型（基本数据类型）

2.引用数据类型：对象

4.变量

5.运算符

1.typeof(变量名）：查看变量类型

2.一元运算符：只有一个运算数的运算符 e.g:a++ 、+3

3.二元运算符：a+b

4.三元运算符：?：、表达式：简化if...else:

5.算术运算符：+、-、*、/、%...

6.赋值运算符：=、+=、*=、/=

7.比较与运算符：>、<、>=、<=、==、===(全等于）：例子：

一、基本语法

1.与html结合方式：

1.内部js:可以写在html的任意位

2.外部js：用src加载外部js文件

注意：<script>标签在一个html页面内可以定义多个。

2.注释

3.数据类型

1.原始数据类型（基本数据类型）

2.引用数据类型：对象

4.变量

例子：

5.运算符

1.typeof(变量名）：查看变量类型

2.一元运算符：只有一个运算数的运算符 e.g:a++ 、+3

3.二元运算符：a+b

4.三元运算符：?：、表达式：简化if...else:

5.算术运算符：+、-、*、/、%...

6.赋值运算符：=、+=、*=、/=

7.比较与运算符：>、<、>=、<=、==、===(全等于）：
例子：

8.逻辑运算符：&&、||、！

1.&&：与（短路）：如果左边你能得出答案是true，则就不进行右边表达式的判断，直接真个表达是就是true，不管右边是false还是什么都不进行判断。

2. || ：或（短路）：与上同理，不过这里是false

3.其他类型转boolean:

6.流程控制语句

例子：

7.特殊语法

二、基本对象

1.function:函数（方法）对象

2.Array:数组对象

1.创建：3种方法，如果只有一个参数，那么就是代表数组的长度

2.特点：
1.js中，数组元素的类型是可变的
2.js中，数组的长度是可变的，没有赋值的arr[i]显示undefined

3.方法：
1.join(参数）：将数组中的元素按照指定的分隔符拼接成字符串

结果：

2.push(要添加元素值):向数组中添加元素
3.pop(要抛出数组中的元素的下标）：弹出数组中的元素

3.Date对象

1.创建：var date=new Date(); //显示当前日期

结果：

2.方法
1.toLocaleString():返回当前date对象对应的时间本地字符串格式

结果：

2.getTimme(）：获取毫秒值，返回当前如期对象描述的时间到1970年1月1日零点的毫秒时差

4.Math：数学对象

1.创建：
*特点：math对象不需要创建直接调用即可
2.方法：

1.属性圆周率PI

2.random() :返回0.0~1.0之间的随机数：[0，1）
3.ceil(x) :对数进行上舍入（向上取整）
4.floor(x) ：对数进行下舍入（向下取整）
5.round(x) : 把数四舍五入为接近的整数

例子：

5.RegExp:正则表达式对象

         1.正则表达式：定义字符串的组成规则。
1.单个字符：[]
如：[a] [ab] [a-zA-z0-9_]
*特殊符号代表特殊含义的单个字符：
\d:单个数字字符[0-9]
\w:单个单词字符[a-za-z0-9_]
2.量词符号：
？：表示出现0次或1次
*：表示出现0次或多次
                         +：表示出现1次或多次
{m,n} :表示m<=数量 <=n
* m如果缺省：{,n}:最多n次
* n如果缺少：{m,}：最少m次
3.开始结束符号：
* ^：开始
* $:结束
2.正则表达式对象：
1.创建：推荐使用第二种

2.方法
1.test(参数）：验证指定的字符串是否符合正则定义的规范
注意：只要是符合正则定义规则，就返回true
解释下面图：reg2正则对象是由单个单词字符组成的字符串，而且长度最小是6，最大是12，如果username也是reg2正则定义的规则，就是如果不是由单个单词字符组成的字符串或者是长度小于6或者大于6，那么就代表了username违法了reg2的正则规范，那么就返回false，否则false。
用途：表单校验依赖于正则表达式，可以使用test来判断用户填写的信息是否符合你定义的规则，如果不是则返回false.

6. Global

1.特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用。
调用方法：方法名();
2.方法：

例子：

三、事件

1.概念：某些组件被执行了某些操作后，触发某些代码的执行

2.事件：某些操作，如：单击、双击、键盘按下、鼠标移动

3.事件源：组件。如：按钮、文本输入框

4.注册监听器：将事件、事件源、监听器结合在一起。当事件源上发生了某个事件，则触发执行某个监听器的代码。
6.常见的事件：
1.点击事件：
1.onclick:单击事件
2.ondbclick:双击事件
        2.焦点事件：
1.onblur:失去焦点
2.onfocus:元素获得焦点
3.加载事件：
1.onload:一张页面或一幅图像完成加载
         4.鼠标事件：
1.onmousedown:鼠标按钮被按下
2.onmouseup:鼠标按键被松开
3.onmousemove:鼠标被移动
4.onmouseover:鼠标移到某元素之上
5.onmouseout:鼠标从某元素移开
         5.键盘事件：
1.onkeydown:某个键盘按键被按下
2.onkeyup:某个按键被松开
3.onkeypress:某个键盘按键被按下并松开
6.选择和改变：
1.onchange:域的内容被改变
2.onselect:文本被选中
7.表单事件：
1.onsubmit:确认按钮被点击
2.onreset:重置按钮被点击

例子：
1.失去焦点事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见事件</title>
</head>
<body>
<input id="username">

//注意：是按代码顺序执行的，因此先执行文本框在失去焦点时可以的
//注意：只要获得焦点后才能失去焦点

<script>
      document.getElementById("username").onblur=function(){
           alert("失去焦点了....");
        }
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见事件</title>
</head>


<script>
      document.getElementById("username").onblur=function(){
           alert("失去焦点了....");
        }

</script>

<body>


//注意：是按代码顺序执行的，因此这里先执行了js,后执行body里面的文本框，这样时获取不到id="username"的，会报错。
//注意：只要获得焦点后才能失去焦点


<input id="username">
</body>
</html>

2.事件用法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见事件</title>
</head>

<body>

<form action="#"  id="form" >
<form action="#" onclick="return CheckForm()"> //第二种表单事件方法

//注意：是按代码顺序执行的，因此这里先执行了js,后执行body里面的文本框，这样时获取不到id="username"的，会报错。
     <input name="username" id="username">
     <select id="city">
            <option>请选择</option>
            <option>北京</option>
            <option>上海</option>
            <option>浙江</option>
      </select>
      <input type="submit" value="提交">
</form>
</body>

<script>

  //加载完成事件：当所有页面加载完成后再触发或加载js代码
    window.onload=function(){
     
          document.getElementById("username").onblur=function(){ 
             //失去焦点事件
            //注意：只要获得焦点后才能失去焦点
                      alert("失去焦点了....");
             }

          document.getElementById("username").onmouseover=function(){  
            //绑定鼠标事件，当鼠标移到元素之上，就弹出
                      alert("鼠标来了。。。");
             }

 
           document.getElementById("username").onmousedown=function(){ 
            //绑定鼠标点击事件，当鼠标点击与元素时就弹出
                      alert("鼠标点击了。。。");
             }
 
        
           document.getElementById("username").onmousedown=function(event){ 
          //这里定义方法时，定义一个形参，接收event对象，event对象的button属性可以 获取鼠标哪个按钮键被点击
            //绑定鼠标点击事件，当鼠标点击与元素时就弹出
               alert(event.button);//鼠标从左到右数字为0，1，2（左键，滑轮，右键）
             }
  

           document.getElementById("username").onkeydown=function(event){ 
            //绑定键盘点击事件，当键盘时就弹出
             //keyCode是知道哪个键盘键被按下了，虽然选择已经不推荐使用了，但是浏览器还是能支持
                  if(event.keyCode==13){
                      alert("提交表单");    //13是回车
                        
             }

             document.getElementById("username").onchange=function(){ 
          
            //选择和改变事件，当文本框内容改变了就弹出
               alert("改变了。。");
             }
  
           document.getElementById("city").onchange=function(){ 
            //选择和改变事件，当下拉选择框内容改变了就弹出
               alert("改变了。。");）
             }
 
         document.getElementById("form").onsubmit=function(){ 
          //表单事件onsubmit,可以阻止表单的提交，方法返回false则表单被阻止提交
           //用于校验用户名格式是否正确
               var flag=false;//假设校验通过

                return flag;
             }
          //表单事件第二种方法
            function CheckForm(){
                return false;
                //或 return true;
            }
          

    }
</script>

</html>

（1）表单全选例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            table{
                border:1px solid;
                width:500px;
                margin-left:30%;
            }

            td,th{
                text-align:center;
                border:1px solid;
            }
            div{
                margin-top:10px;
                margin-left: 30%;
            }
            .out{  
                    background-color:aliceblue
            }
            .over{
                background-color:blue;
            }
        </style> 
        <script>
/*
（1）.js中的getElementByName是根据name属性获取一组元素节点对象
（2）.js中的getElementByTagName是寻找有着标签名的所有元素
*/

            //1.在页面加载完成后执行下面操作
            window.onload=function(){


                
               // 2.给全选按钮
               document.getElementById("selectAll").onclick=function(){
                   //全选
                   var cbs=document.getElementsByName("cb");//获取所有的checkbox 
                   for (var i=0;i<cbs.length;i++){//遍历
                       cbs[i].checked=true;//设置每一个cb的状态为选中checked
                   }
               }



               document.getElementById("unselectAll").onclick=function(){
                   //全不选
                   var cbs=document.getElementsByName("cb");//获取所有的checkbox 
                   for (var i=0;i<cbs.length;i++){//遍历
                       cbs[i].checked=false;//设置每一个cb的状态为选中checked
                   }
               }



               document.getElementById("selectRev").onclick=function(){
                   //反选
                   var cbs=document.getElementsByName("cb");//获取所有的checkbox 
                   for (var i=0;i<cbs.length;i++){//遍历
                    //注意：反选不应该去判断他，应该直接取反
                    //    if(cb[i]==true){
                    //      cbs[i].checked=false;//设置每一个cb的状态为选中checked
                    //    }
                        
                         cbs[i].checked= ! cbs[i].checked;
                   }
               }



                   document.getElementById("safirst").onclick=function(){
                   //全选第一个框框
                   var cbs=document.getElementsByName("cb");//获取所有的checkbox 
                   for (var i=0;i<cbs.length;i++){//遍历
                     //或  cbs[i].checked=safirst.checked;//设置每一个cb的状态于sa状态一样的checked
                       cbs[i].checked=this.checked;
                    }
               }

              

                    //给所有tr绑定移到元素之上和移除元素之上的鼠标事件
                        var trs=document.getElementsByTagName("tr");//获取tr
                        for(var j=0;j<trs.length;j++){

                            //移到元素之上
                             trs[j].onmouseover=function(){
                                this.className="over"; //改变属性背景色
                             }

                             //移出元素
                             trs[j].onmouseout=function(){
                                this.className="out";
                            }

                        }
            }
        </script>
    </head>
    <body>
         <table>
             <caption>学生信息表</caption>
            <tr>
                <td><input type="checkbox" name="cb" id="safirst"></td>
                <td>编号</td>
                <td>姓名</td>
                <td>性别</td>
                <td><a href="javascript:void(0);">删除</a></td>
            </tr>
             <tr>
                 <td><input type="checkbox" name="cb"></td>
                 <td>1</td>
                 <td>岳一鹏</td>
                 <td>男</td>
                 <td><a href="javascript:void(0);">删除</a></td>
             </tr>
             <tr>
                <td><input type="checkbox" name="cb"></td>
                <td>2</td>
                <td>岳二鹏</td>
                <td>男</td>
                <td><a href="javascript:void(0);">删除</a></td>
            </tr>
            <tr>
                <td><input type="checkbox" name="cb"></td>
                <td>3</td>
                <td>岳三鹏</td>
                <td>男</td>
                <td><a href="javascript:void(0);">删除</a></td>
            </tr>
            <tr>
                <td><input type="checkbox" name="cb"></td>
                <td>4</td>
                <td>岳四鹏</td>
                <td>男</td>
                <td><a href="javascript:void(0);">删除</a></td>
            </tr>
         </table>
         <div>
             <input type="button" id="selectAll" value="全选">
             <input type="button" id="unselectAll" value="全不选">
             <input type="button" id="selectRev" value="反选">
         </div>
    </body>
</html>

表单全选效果：

（2）表单验证：
分析：1.给表单绑定onsubmit事件。监听器中判断每一个方法校验的结果。
如果都为true，则监听器方法返回true.
如果有一个为false,则监听器方法返回false
2.定义一些方法分别校验各个表单项
3.给各个表单项绑定onblur事件

表单校验例子（这里只写了用户名的，因为其他也是同理的）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册页面（表单验证）</title>
</head>
<style>
    body{
        background-color: aquamarine ;
        background-repeat:repeat;
        text-align: center;
    }
    .content{
        width:600px;
        height:650px;
        background-color: rgb(255,255,255,50%);
        /*margin-left:20%;*/
        /*margin-right: 50%;*/
        /*margin-top:20%;*/
        /*margin-bottom:50% ;*/
        margin:auto;/*让盒子居中*/
        /*padding:10px;内边距*/
    }
    #title{
        background-color: rgb(0,0,250,50%);
        text-align: center;
        padding: 20px;
    }
    .login{
        width:600px;
        height:500px;
    }
    #footer p a{
         color:red;
    }
    #footer{
        margin-top:40px;
    }

    .td_left{
        width:200px;
        text-align: right;
        height:50px;
        font-size: large;
    }
    .td_right{
        /*margin-right:50px;*/
        width:600px;
        padding-right : 100px;

    }
    #username,#phone,#email,#department,#password,#sure_password{
        width:250px;
        height:30px;
        border:1px ;
        solid:#A66A6A6;
        border-radius:5px;
        padding-left:20px;
    }
    #verification_code{
        width:150px;
        height:30px;
        border:1px ;
        solid:#A66A6A6;
        border-radius:5px;//圆角
        padding-left:20px;//左外边距
    }
    #img_verification_code{
        width:90px;
        height:30px;
        vertical-align: middle;//垂直居中展示
    }
    #sex1,#sex2{
        width:50px;
        height:30px;
    }
    #submit{
        width:100px;
        height:40px;
        background-color:rgb(0,0,250,30%);
        font-size: medium;
        margin-top: 10px;
    }

    .error{
        color:red;
    }
</style>
<script>
    //表单校验：
    window.onload=function(){

        //1.给表单绑定onsubmit事件
        document.getElementById("form").onsubmit=function(){
            //调用用户名校验方法  checkUsername()；
            //调用密码校验方法    checkPassword()；
            //return  checkUsername() && checkPassword()
            return checkUsername();
        }
            //给元素绑定离开焦点事件
            //当鼠标输入完名字后离开了文本框，自动校验输入的用户名是否正确
            //当页面加载完后才会执行
            document.getElementById("username").onblur=checkUsername;
        
    }

    //校验用户名
    function  checkUsername(){
        //1.获取用户名的值
       var username= document.getElementById("username").value;
        //2.定义正则表达式
        var reg_username= /^\w{6,12}$/ ;
        //3.判断值是否符合表单定义时正则规则
        var flag=reg_username.test(username);
        //4.不符合或符合则提示信息
        var s_username=document.getElementById("s_username");
        if(flag){
            //提示用户名无误
            s_username.innerHTML="通过";
        }
        else{
            //提示用户名有误
            s_username.innerHTML="不通过";
        }
        return flag;
    }

</script>
</head>
<body>
<div class="content">
    <h2 id="title">注册</h2>
    <div  class="login">
        <form action="#" method="post" id="form">
             <table>
                <tr>
                    <td class="td_left">
                        <label for="username">姓名:</label>
                    </td>
                    <td class="td_right">
                        <input type="text" name="姓名" id="username" placeholder="请输入您的真实姓名">
                        <span id="s_username" class="error"></span>
                    </td>
                </tr>

                <tr>
                    <td class="td_left">
                        <label for="sex1" for="sex2" >性别:</label>
                    </td>
                    <td class="td_right">
<!--这里的checked的作用是默认选中--->
              <input type="radio" name="sex" value="male"  id="sex1" checked>男
                    <input type="radio" name="sex" value="female"  id="sex2">女
                    </td>
                </tr>
                <tr>
                    <td class="td_left">
                        <label for="phone">电话:</label>
                    </td>
                    <td class="td_right"><input type="text" name="电话" id="phone"></td>
                </tr>
                <tr>
                    <td class="td_left">
                        <label for="department">所在部门:</label>
                    </td>
                    <td class="td_right"><input type="text" name="所在部门" id="department"></td>
                </tr>
                <tr>
                    <td class="td_left">
                        <label for="email">邮箱:</label>
                    </td>
                    <td class="td_right"><input type="text" name="邮箱" id="email" ></td>
                </tr>
                 <tr>
                     <td class="td_left">
                         <label for="password">密码:</label>
                     </td>
                     <td class="td_right">
                         <input type="password" name="邮箱" id="password" >
                         <span id="s_password"></span>
                    </td>
                 </tr>
                 <tr>
                     <td class="td_left">
                         <label for="sure_password">确认密码:</label>
                     </td>
                     <td class="td_right"><input type="password" name="邮箱" id="sure_password" ></td>
                 </tr>
                 <tr>
                     <td class="td_left">
                         <label for="verification_code">验证码:</label>
                     </td>
                     <td class="td_right">
                         <input type="text" name="验证码" id="verification_code" >
                         <img src="../img/verification_code.jpg" id="img_verification_code">
                     </td>
                 </tr>
                <tr>
                    <td colspan="2" td_right >
                        <input type="submit" value="立即注册" id="submit">
                    </td>
                </tr>

            </table>
        </form>
        <div id="footer">
            <p>已有账号?<a href="login.html">立即登录</a></p>
        </div>
    </div>

</div>
</body>
</html>

例子运行效果：

四、DOM事件

1.DOM的简单学习

         *功能：控制html文档的内容 :增上改查内容
*代码：获取页面标签（元素）对象Element :
                document.getElementById("id值"); ：通过元素id获取元素对象
*操作Element对象：
1.设置属性值：设置的属性值要对应元素对象有才可以，因此借助API文档（如下举例）
*注意.图片路径使用的是反斜杠，使用正斜杠会出现图片无法显示的问题。
                        *明确过去的对象是哪一个？
*查看API文档，查找其中有哪些属性可以设置

举例src例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>DOM事件简单学习</title>
    </head>
    
    <body>
       <img id="light" src="F:/桌面文件/HTML+CSS/img/turn_off_the_light.png">
       <!-- <img id="light" src="F:\桌面文件\HTML+CSS\img\open_the_light.png"> -->

       <script>
        //通过id获取元素对象
        var light=document.getElementById("light");
        alert("我要换图片了。。。。");
        light.src="F:/桌面文件/HTML+CSS/img/open_the_light.png";
        //弹不出对象，因为script定义再元素对象上面，图片还没加载完成，因此弹出窗口显示null
        //要是想获取到则将script放在要获取元素的下方
        //这里要点击弹出窗口的确定按钮，如果不点是不会显示下面的图片的
      
        // light.setAttribute("src","F:\桌面文件\HTML+CSS\img\open_the_light.png");
    </script>
    </body>
</html>

运行效果如图：
（说明：一开始为关灯图片，当点击了弹出窗口的确定按钮，图片换成了开灯图片）

2.修改标签内容：

1.属性：innerHTML,设置标签体内容
(注意：一般如果没有修改，都是应为获取的元素对象是空的原因，可以通过弹出窗口中显示是否元素对象是空）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>DOM事件简单学习</title>
    </head>
    
    <body>
       <img id="light" src="F:/桌面文件/HTML+CSS/img/turn_off_the_light.png">
       <h1 id="title">哇哈哈哈哈哈</h1>

    </body>
    <script>
        //通过id获取元素对象
        var title=document.getElementById("title"); 
        alert("我要换内容啦。。。");
        //修改内容
        title.innerHTML= "喜羊羊5555 "; 
    </script>
</html>

事件简单学习：

*功能：某些组件被执行了某些操作后，触发了某些代码的执行功能
*如何绑定事件：
1.直接在html标签上，指定事件的属性（操作），属性值就是js代码
1.onclick:单击事件
（注意：这个是直接在html标签上指定属性onclick，当点击图片后就弹出对话框显示我被点击了）（缺点：因为位置有限，这里写只能写一个）

 <body>
       <img id="light" src="F:/桌面文件/HTML+CSS/img/turn_off_the_light.png" onclick="alert('我被点击了');">
       <h1 id="title">哇哈哈哈哈哈</h1>

    </body>

使用方式：
（写在js的函数里，可以写很多弹出内容）
（缺点:html标签和事件绑定在一起，耦合与过高）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>事件的简单学习</title>
    </head>
    
    <body>
       <img id="light" src="F:/桌面文件/HTML+CSS/img/turn_off_the_light.png" onclick="fun()">
       <h1 id="title">哇哈哈哈哈哈</h1>

    </body>
    <script>
       function fun(){
           alert("我被点击了");
           alert("我又被点击了");
       }
    </script>
</html>

2.通过js获取于是怒对象，指定事件属性，设置一个函数:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>事件的简单学习</title>
    </head>
    
    <body>
       <img id="light" src="F:/桌面文件/HTML+CSS/img/turn_off_the_light.png" >
       <h1 id="title">哇哈哈哈哈哈</h1>

    </body>
    <script>

       function fun2(){
           alert("咋老点我");
           
       }
       var light2=document.getElementById("light");
       light2.onclick=fun2;
    </script>
</html>

案例：电灯开关：

分析：1.获取图片对象
2.绑定单击事件
3.每次点击切换图片
*规则：如果灯是开的on，切换图片为of，否则反之：使用标记flag来完成

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>案例：电灯开光</title>
    </head>
    
    <body>
       <img id="light" src="F:/桌面文件/HTML+CSS/img/turn_off_the_light.png" >
       <h1 id="title">哇哈哈哈哈哈</h1>

    </body>
    <script>

        var light2=document.getElementById("light");
        var test=false;
    
       function fun2(){
      
          if(test){
             light2.src="F:/桌面文件/HTML+CSS/img/turn_off_the_light.png";
             test=false;
          }
          else{
            light2.src="F:/桌面文件/HTML+CSS/img/open_the_light.png";
            test=true;
        }
    }
       light2.onclick=fun2;
    </script>
</html>

BOM对象

1.概念：browesr object model 浏览器对象模型
*.将浏览器的各个组成部分封装成对象。
2.组成：
*.window:窗口对象（重要）
*.Navigator:浏览器对象
*.Screen：显示器屏幕对象
*.History:历史记录对象（重要）
*.Location:地址栏对象（重要）

1.window窗口对象：
1.创建：
2.方法：
1.与弹出框有关的方法
*.alert（）：显示带有一段消息和一个确认按钮的警告框。
*confirm() ：显示带有一段消息以及确认按钮和取消按钮的对话框。
*prompt() : 显示可提示用户输入的对话框。
2.与打开和关闭有关的方法：
*.close() ：关闭浏览器窗口
*.open() :打开一个新的浏览器窗口
3.与定时器有关的方法：
*.setTimeout() ：在指定的毫秒数后调用函数或计算表达式
*参数：
1.js代码或者方法对象
2.毫秒值：即到什么时间就执行代码
*.clearTimeout() : 取消由setTimeout() 方法设置的timeout
*.setInterval() : 循环定时器，按照指定周期（以毫秒计）来调用函数或计算表达式
*.clearInterval() :取消由setInterval（）设置的timout
3.属性：
第一类方法（获取其他BOM对象）：
*. history
*. location
*. Navigator
*. Screen
第二类方法：获取DOM对象：
*. document对象
用法：
1.window.document.getElementById();
2.dicument.getElementById();
4.特点：
*.window对象不需要创建可以直接使用，直接用window.方法名即可
*.window引用可以省略，直接方法名（）即可

1.与弹出框有关的方法：

1.alert()方法：
（说明，alert()方法可以使用这两种方式调用）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>BOM对象</title>
    </head>
    <script>
        alert("hello window");//正确
        window.alert("hello a");//正确
       
    </script>
    <body>

    </body>
</html>

2.confirm()方法：
用户点击确定按钮，返回true；点击取消按钮，返回false。
（说明：获取用户的选择后（用户点击了确定还是取消按钮），可以利用该值进行其他操作，如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>BOM对象</title>
    </head>
    <script>
    
        var flag=confirm("您确定要退出嘛？");//获取用户的选择
        // alert(flag);

        if(flag){
            //退出操作
            alert("欢迎再次光临");
        }
        else{
            //提示：收别抖
            alert("手别抖。。");
        }
    </script>
    <body>

    </body>
</html>

3. prompt()方法：
（返回值获取用户输入的值）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>BOM对象</title>
    </head>
    <script>
//第三种：prompt()方法
            var result=prompt("请输入用户名");//输入框
            alert(result);

    </script>
    <body>

    </body>
</html>

2.打开与关闭的方法：

1.open()和close()方法：
（说明：对于open()方法会返回一个新的window对象）

!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>BOM对象</title>
    </head>
    <body>
        <input  id="openBtn" type="button" value="打开窗口">
        <input  id="closeBtn" type="button" value="关闭窗口">
    </body>
</html>
<script>
     var openBtn=document.getElementById("openBtn");
     var newwindow;
     openBtn.onclick=function(){
        //  open();//打开新窗口，将要打开的窗口网址放在括号（）里面
        newwindow=open("http://www.baidu.com");//获取新窗口对象
     }

     var closeBtn=document.getElementById("closeBtn");
     closeBtn.onclick=function(){
        //  open();//关闭新窗口，将要打开的窗口网址放在括号（）里面
        newwindow.close();//关闭的是调用者的窗口，即谁调用关闭谁
     }
</script>

3.与定时器有关的方法：
1.setTimeout()方法：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>BOM对象</title>
    </head>
    <body>
        
    </body>
</html>
<script>
   
    // 第一种写法： setTimeout("alert('Boom~');",3000);

//第二种写法：
     setTimeout("fun();",2000);
//第三种写法：setTimeout(fun,2000);
     function fun(){
         alert('booom~');
     }
</script>

2.setInterval()方法：循环定时器
（说明：在例子中是每2秒弹出一次，用法和setTimeout用法是一样的）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>BOM对象</title>
    </head>
    <body>
        <input  id="openBtn" type="button" value="打开窗口">
        <input  id="closeBtn" type="button" value="关闭窗口">
    </body>
</html>
<script>

    setInterval(fun,2000);
     function fun(){
         alert('booom~');
     }

</script>

3. clearTimeout()方法：取消定时器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>BOM对象</title>
    </head>
    <body>
        <input  id="openBtn" type="button" value="打开窗口">
        <input  id="closeBtn" type="button" value="关闭窗口">
    </body>
</html>
<script>
   var id= setTimeout(fun,2000);//第一个参数位置直接写函数对象，setTimeout会返回它对象
    clearTimeout(id);//参数放取消定时器的对象
     function fun(){
         alert('booom~');
     }

</script>

案例：轮播图

分析：
1.在页面上使用img标签展示图片
2.定义一个方法，修改图片对象的src属性
3.定义一个定时器，每个3秒调用方法一次

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>轮播图</title>
        <style>
            body{
                /* width:984px;
                height:500px;
                /* padding:2px; */
                /* margin:0 auto; */
                background-color: antiquewhite;
                display:flex;
                margin:auto;
                justify-content: center;
                align-items: center;
                padding-top: 200px;
            }
            #img{
                width:100px;
                height:200px;
            }
        </style>
    </head>
    <body>
        <div id="img">
            <img id="photos" src="F:/桌面文件/HTML+CSS/img/轮播图/light_1.png">
        </div>
    </body>
    <script>
        //修改图面属性的方法
        var number=1;
        function fu(){
            number++;
            if (number >2){  //判断number是否大于3
                number=1;
            }
            var pho=document.getElementById("photos");
            pho.src="F:/桌面文件/HTML+CSS/img/轮播图/light_"+number+".png"; 
 //通过number数字来切换对应编号的图片
        }
            //2.定义定时器
            setInterval(fu,2000);//2000毫秒等于2秒
      
    </script>
</html>

window 属性：
1.第一类方法： window属性可以获取DOM和BOM对象：
1.history()方法：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>window属性</title>
     
    </head>
    <body>
        <script>
         //获取history
         var h1=window.history;
         var h2=history;
         alert(h1);
         alert(h2);
        </script>
    </body>

</html>

2.location（）方法：
1.方法：
*.reload() ：重新加载当前文档（刷新）
2.属性：
*. href : 设置或返回完整的URL

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Location</title>
        
    </head>
    <body>
      
        <input type="button" id="btn" value="刷新">
        <input type="button" id="gobaidu" value="去百度">

        <script>
            //reload方法，定义ige按钮，点击按钮，刷新当前页面
            //1.获取按钮
            var btn=document.getElementById("btn");
            btn.onclick=function(){//绑定单击事件
                location.reload();//刷新页面
            }


            //获取href路径
            var href=location.href;
            //alert(href);
            //点击去百度按钮，访问百度网站
            //1.获取按钮
            var gobaidu=document.getElementById("gobaidu");
            gobaidu.onclick=function(){//绑定单击事件
                location.href="http://www.baidu.com";//如果这里不加http协议，会出现找不到文件
            }

        </script>
    </body>

</html>

案例：自动跳转首页

分析：1.显示页面效果<p>标签
2.倒计时读秒效果实现
2.1 定义一个方法，获取span标签，修改标签体内容，修改时间--
2.2 定义一个定时器，1秒执行一次该方法
2.3 在方法中判断时间，如果<0，则跳转到首页

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>自动跳转首页</title>
        <style>
            p{
                text-align: center;
            }
            span{
                color:red;
            }
        </style>
        <script>
            //倒计时读秒效果实现
            var second=5;
            var time =document.getElementById("time");
            function showtime(){
               second--;
               if (second<=0){
                   location.href="http:www.baidu.com";
               }

        
               time.innerHTML=second+"";
            }

            //设置定时器,1秒执行一次
            setInterval(showtime,1000);
        </script>
    </head>
    <body>
       <p>
           <span id="time">5</span>秒之后，自动跳转到首页....
       </p>
    </body>
  
</html>

3.Hostory（）方法：历史记录对象
1.创建（获取）：
1.window.history
2.history
2.方法：
*. back() : 加载history列表的前一个URL
*. forward() : 加载history列表中的下一个 URL
*. go(参数) : 加载history列表中的某个页面
*.参数：
*.正数：前进几个历史记录
*. 负数：后退几个历史记录
3.属性：
*. length : 返回当前窗口历史列表中的URL数量

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>history对象</title>
        
    </head>
    <body>
         <input type="button" id="btn" value="获取历史记录个数">
         <a href="F:\桌面文件\HTML练习\js\轮播图.html">轮播图</a>
         <input type="button" id="forward" value="前进">
         <input type="button" id="back" value="后退">
        <script>
            var  btn=document.getElementById("btn");
            btn.onclick=function(){
                var length=history.length;   //length属性
                alert(length);
            }
 
        

//forward()方法和go（）方法
            var  forward=document.getElementById("forward");
            forward.onclick=function(){
            //    history.forward();//前进，回到前一个网页 
               history.go(-1);
            }


//back()方法
            var  back=document.getElementById("back");
            back.onclick=function(){
               history.back();//后退，回到后一个网页
               
            }

           


        </script>
    </body>

</html>

DOM对象

*概念：Document Object Model 文档对象模型
*.将标记语言文档的各个组成部分，封装为对象，可以使用这些对象，对标记语言文档进行CRUD（增删改查的）动态操作。

1.核心DOM：
*.Document : 文档对象（重点）
*.Element : 元素对象（重点）
*.Attribute : 属性对象
*.Text : 文本对象
*. Comment ：注释对象
.Node : 节点对象，其他5个的父对象（重点）
2.XML DOM：针对XML文档的标准模型
3.HTML DOM ：针对html文档的标准模型

核心DOM模型
*. Document : 文档对象
1.创建(获取）：在html dom模型中可以使用window对象来获取
*.window.document
*.document
2.方法：
1.获取Element对象：
*.getElementById() : 根据id属性值获取元素对象，id属性值一般唯一
*.getElementsByTagName() : 根据元素名称获取元素对象们，返回值是一个数组
*.getElementsByClassName() : 根据Class的属性值获取元素对象们，返回值是一个数组
*.getElementsByName() :根据name书写纸获取元素对象们
2.创建其他dom对象：
*. createAttribute(name) :
                              *. createComment() :
  *. createElement() :
  *. createTextNode() :
3.属性：
         *. Element : 元素对象
1.创建/获取：通过document来获取和创建
2.方法：
*. removeAttribute() : 删除属性
*.setAttribute() : 设置属性
*. Node : 节点对象，其他5个的父对象
1.特点：所有dom对象都可以被认为是一个节点
2.方法：
*CRUD dom 树：
*. appendChild() : 向节点的子节点列表的结尾添加新的子节点。
*. removeChild() : 删除（并返回）当前节点的指定子节点。
*. replaceChild() : 用新节点替换一个子节点。
3.属性：
*.parentNode:返回节点的父节点

一、获取element对象方法：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>DOM</title>
    </head>
    <body>
        <div id="div1">div1</div>
        <div id="div2">di2</div>
        <div id="div3">div3</div>
        <div class="clas1">div4</div>
        <div class="clas1">div5</div>
        <input  type="text" name="username">
    
    </body>
    <script>
        //2.根据元素名称获取对象们，返回值是一个数组
       var divs =document.getElementsByTagName("div");//参数放标html签名称
      alert(divs.length);

      //3.根据Class属性来获取
      var div_cs =document.getElementsByClassName("clas1");//参数放标html签名称
      alert(div_cs.length);

      //通过name属性值来获取
      var ele_username =document.getElementsByName("username");//参数放标html签名称
      alert(ele_username.length);
    </script>
</html>

二、创建其他dom对象：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>DOM</title>
    </head>
    <body>
    <script>
      var table=document.createElement("table");//创建一个html table对象
      alert(table);
      
    </script>
</html>

Element元素对象：
1. removeAttribute() : 删除属性和 setAttribute() : 设置属性：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>element对象</title>
    </head>
    <body>
        <a>点我</a>
        <input type="button" id="btn_set" value="设置属性">
        <input type="button" id="btn_set2" value="删除属性">
    </body>
    <script>
        var btn_set=document.getElementById("btn_set");
        btn_set.onclick=function(){
            //获取a标签
            var e_a= document.getElementsByTagName("a")[0];
            e_a.setAttribute("href","http://ww.baidu.com");
        }


        var btn_set2=document.getElementById("btn_set2");
        btn_set2.onclick=function(){
            //获取a标签
            var e_a= document.getElementsByTagName("a")[0];
            e_a.removeAttribute("href","http://ww.baidu.com");
        }
    </script>
</html>

2.Node节点对象：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>DOM</title>
        <style>
            div{
                border: 1px solid red;
            }
            #div1{
                width:200px;
                height:200px;
            }
            #div2{
                width:100px;
                height:100px;
            }
            #div3{
                width:50px;
                height:50px;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2">div2</div>
            div1
        </div>
       <input type="button" id="createbtn" value="添加子节点">
    </body>
    <script>
       var div2=document.getElementById("div2");
       var div1=div2.parentNode;  //element属性
       alert(div1);
    </script>
</html>

案例：动态表格（增加、删除）

分析：
1.添加：
1.给添加按钮绑定单击事件
2.获取文本框内容
3.创建tr,td,设置td的文本为文本框内容
4.创建
5.将td添加到tr中
6.获取table,将tr添加到table中
2.删除：
1.确定点击的是哪一个超链接：给每一个超链接添加一个单击事件：
*. <td><a href="javascript:void(0);" οnclick="delTr(this);">删除</a></td>
2.怎么删除？：
*. removeChild():通过父节点删除子节点
方法一：动态添加：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>动态表格添加、删除</title>
        <style>
            table{
                border:1px solid;
                margin:auto;
                width:500px;
            }

            td,th{
                text-align:center;
                border:1px solid;
            }

            div{
                text-align:center;
                margin:50px;
            }
        </style>
    </head>
    <body>
      <div>
        <input type="text" id="id" name="id" placeholder="请输入编号">
        <input type="text" id="name"  placeholder="请输入姓名">
        <input type="text" id="gender"  placeholder="请输入性别">
        <input type="button" id="btn_add"  value="添加">
    </div>
        <!--html中的表格-->
        <!--table是独占一行的,其中的border是边框，不设置或者为0则表示没有边框-->
        <!--一个tr代表表格中的一行-->
        <!--其中th是表格的表头，字体为粗体-->
        <!---其中caption是表格的标题-->
        <!--其中colspan代表的是横向跨2格，2代表跨越的格数，rowspan="2"代表垂直跨2格--><!--跨行、列-->
        <!--其中cellpadding是表格的边距大小，即表格内的文字与表格的边框的距离的大小-->
        <table>
            <caption>这是html的一个练习</caption>
             <tr>
                 <th >编号</th>
                 <th>名称</th>
                 <th>日期</th>
                 <th>操作</th>
                
             </tr>
             <tr>
                  <td>04201</td>
                  <td>12345</td>
                  <td>佩大奇</td>
                  <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
           <!-- this代表当前超链接的对象 -->
                </tr>
             <tr>
                 <td>04202</td>
                 <td>67891</td>
                 <td>乔大治</td>
                 <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
             </tr>
             <tr>
                 <td>23456</td>
                 <td>34567</td>
                 <td>34567</td>
                 <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>  
             </tr>
        </table>
      

    </body>
   <script>


//方法一：动态表格的添加
        var btn_add=document.getElementById("btn_add");
        //1.给按钮绑定单击事件
        btn_add.onclick=function(){
            //2.获取文本框的内容
            var id=document.getElementById("id").value;
            var name=document.getElementById("name").value;
            var gender=document.getElementById("gender").value;

            //3.创建td，赋值td的标签体
            //id的td
            var td_id=document.createElement("td");
            // td_id=appendChild(id);//不能把字符串当作子节点直接添加
            var text_id=document.createTextNode(id);
            td_id.appendChild(text_id);
             // name的td
             var td_name=document.createElement("td");
             var text_name=document.createTextNode(name);
            td_name.appendChild(text_name);
             //gender的td
             var td_gender=document.createElement("td");
             var text_gender=document.createTextNode(gender);
             td_gender.appendChild(text_gender);
             //删除标签
             var td_a=document.createElement("td");
             var ele_a=document.createElement("a");
             ele_a.setAttribute("href","javascript:void(0);");
             ele_a.setAttribute("onclick","delTr(this)");//只要是单击了超链接就可以进行删除操作
             var text_a=document.createTextNode("删除");
             ele_a.appendChild(text_a);
             td_a.appendChild(ele_a);
             

            //4.创建tr
            var tr=document.createElement("tr");

            //5.添加td到tr中
            tr.appendChild(td_id);
            tr.appendChild(td_name);
            tr.appendChild(td_gender);
            tr.appendChild(td_a);

            //6.获取table
            var table=document.getElementsByTagName("table")[0];
            table.appendChild(tr)
        }


//动态表格的删除
       //删除方法
       function delTr(obj){
        //    alert(obj);
        var table=obj.parentNode.parentNode.parentNode;
        var tr=obj.parentNode.parentNode;
        table.removeChild(tr);//通过父节点删除子节点，父节点table，子节点tr;
       }
   </script>
</html>

方法二：使用innerHTML动态添加：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>动态表格添加、删除</title>
        <style>
            table{
                border:1px solid;
                margin:auto;
                width:500px;
            }

            td,th{
                text-align:center;
                border:1px solid;
            }

            div{
                text-align:center;
                margin:50px;
            }
        </style>
    </head>
    <body>
      <div>
        <input type="text" id="id" name="id" placeholder="请输入编号">
        <input type="text" id="name"  placeholder="请输入姓名">
        <input type="text" id="gender"  placeholder="请输入性别">
        <input type="button" id="btn_add"  value="添加">
    </div>
        <!--html中的表格-->
        <!--table是独占一行的,其中的border是边框，不设置或者为0则表示没有边框-->
        <!--一个tr代表表格中的一行-->
        <!--其中th是表格的表头，字体为粗体-->
        <!---其中caption是表格的标题-->
        <!--其中colspan代表的是横向跨2格，2代表跨越的格数，rowspan="2"代表垂直跨2格--><!--跨行、列-->
        <!--其中cellpadding是表格的边距大小，即表格内的文字与表格的边框的距离的大小-->
        <table>
            <caption>这是html的一个练习</caption>
             <tr>
                 <th >编号</th>
                 <th>名称</th>
                 <th>日期</th>
                 <th>操作</th>
                
             </tr>
             <tr>
                  <td>04201</td>
                  <td>12345</td>
                  <td>佩大奇</td>
                  <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
           <!-- this代表当前超链接的对象 -->
                </tr>
             <tr>
                 <td>04202</td>
                 <td>67891</td>
                 <td>乔大治</td>
                 <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
             </tr>
             <tr>
                 <td>23456</td>
                 <td>34567</td>
                 <td>34567</td>
                 <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>  
             </tr>
        </table>
      

    </body>
   <script>

//方法二：使用innerHTML追加表格
            var btn_add=document.getElementById("btn_add");
            //1.给按钮绑定单击事件
            btn_add.onclick=function(){
            //2.获取文本框的内容
            var id=document.getElementById("id").value;
            var name=document.getElementById("name").value;
            var gender=document.getElementById("gender").value;

            //获取table
            var table=document.getElementsByTagName("table")[0];
            
            //追加一行
            table.innerHTML +="<tr>\n"+
                                 " <td>"+id+"</td> \n"+
                                 " <td>"+name+"</td>\n"+
                                  "<td>"+gender+"</td>\n"+
                                 ' <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td> \n'+
                                  "</tr>";
            }

//动态表格的删除
       //删除方法
       function delTr(obj){
        //    alert(obj);
        var table=obj.parentNode.parentNode.parentNode;
        var tr=obj.parentNode.parentNode;
        table.removeChild(tr);//通过父节点删除子节点，父节点table，子节点tr;
       }
   </script>
</html>

HTML DOM:

说明：html DOM 定义了所有HTML元素的对象和属性，以及访问它们的方法，简单说：html DOM是关于如何让获取、修改、添加或删除HTML元素的标准。
1.标签体的设置和获取： innerHTML :
2.使用html元素对象的属性
3.控制样式
2.使用html元素对象的属性：innerHTML使用方法：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UUTF-8">
        <title>HTML_DOM</title>
    </head>
    <body>
        <div id="div1">
            div
        </div>
        <script>
            var div=document.getElementById("div1");
            var innerHTML=div.innerHTML;//获取innerHTML
            // alert(innerHTML);
            // div.innerHTML="<input type='text'>";//修改innerHTML
            div.innerHTML +="<input type='text'>";//追加innerHTML内容
        </script>
    </body>
</html>

3.控制样式：
1. 修改样式方式一：使用元素的style设置样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UUTF-8">
        <title>HTML_DOM</title>
    </head>
    <body>
        <div id="div1">
            div1
        </div>
        <div id="div2">
            div2
        </div>
        <script>

            var div=document.getElementById("div1");
            var innerHTML=div.innerHTML;//获取innerHTML
            // alert(innerHTML);
            // div.innerHTML="<input type='text'>";//修改innerHTML
            div.innerHTML +="<input type='text'>";//追加innerHTML内容

            var div1=document.getElementById("div1");
            div1.onclick=function(){
                //修改样式方式一：使用元素的style设置样式
                div1.style.border="1px solid red";//当我点击后div出现红色样式边框
                div1.style.width="500px";
                //font-size--->fonSize
                div1.style.fontSize="20px";
            }
        </script>
    </body>
</html>

2.方法二：提前定义好类选择器的样式，通过元素的className属性来设置器class属性值，修改样式：使用className="d2"修改：(说明d2是style设置的class样式）。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UUTF-8">
        <title>HTML_DOM</title>
        <style>
            .d1{
                border:1px solid red;
                width:100px;
                height:100px;
            }

            .d2{
                border:1px solid blue;
                width:500px;
                height:100px;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            div1
        </div>
        <div id="div2">
            div2
        </div>
        <script>


                 //修改样式方式二：使用元素的style设置样式
                 var div2=document.getElementById("div2");
                 div2.onclick=function(){
                 div2.className="d2";
            }
        </script>
    </body>
</html>

方法一和二的效果：

一、基本语法

1.与html结合方式：

1.内部js:可以写在html的任意位

2.外部js：用src加载外部js文件

2.注释

3.数据类型

1.原始数据类型（基本数据类型）

2.引用数据类型：对象

4.变量

5.运算符

1.typeof(变量名） ：查看变量类型

2.一元运算符：只有一个运算数的运算符 e.g:a++ 、+3

3.二元运算符：a+b

4.三元运算符：?：、表达式 ：简化if...else:

5.算术运算符：+、-、*、/、%...

6.赋值运算符：=、+=、*=、/=

7.比较与运算符：>、<、>=、<=、==、===(全等于）： 例子：

8.逻辑运算符：&&、||、！

6.流程控制语句

7.特殊语法

二、基本对象

1.function:函数（方法）对象

2.Array:数组对象

3.Date对象

4.Math：数学对象

5.RegExp:正则表达式对象

6. Global

三、事件

四、DOM事件

1.DOM的简单学习

2.修改标签内容：

事件简单学习：

案例：电灯开关：

BOM对象

案例：轮播图

案例：自动跳转首页

DOM对象

案例：动态表格（增加、删除）

HTML DOM:

1.typeof(变量名）：查看变量类型

4.三元运算符：?：、表达式：简化if...else:

7.比较与运算符：>、<、>=、<=、==、===(全等于）：
例子：