Bom编程·事件编程·Dom编程学习

本文链接：https://blog.csdn.net/smithliang1996/article/details/74115504

前记：我学习前端部分的时候使用的是sublime这个编译软件，总体来说虽然他有很多不提示，而且由于弱语言的原因吧，错误不好找，所以导致了我学习的时候有很多bug要处理，但大多数发现bug是一些很小的拼写错误。这就提醒了我必须要细心。所以总体上来讲的话，必须细心，你出错的概率才会小。其次，这里面最重要的是必须掌握Dom编程的用法。

1.BOM编程
什么是BOM编程？（画图讲解，将浏览器的各个部分封装成了不同的对象）
这里写图片描述
BOM是（Broswer Object Model）浏览器对象模型编程

1.window对象
 open(): 在一个窗口中打开页面
 参数一： 打开的页面
 参数二：打开的方式。 _self: 本窗口  _blank: 新窗口（默认）
 参数三： 设置窗口参数。比如窗口大小

 setInterval(): 设置定时器（执行n次）
 setTimeout(): 设置定时器(只执行1次)
 定时器： 每隔n毫秒调用指定的任务（函数）
 参数一：指定的任务（函数）
 参数二：毫秒数

 clearInterval(): 清除定时器
 clearTimeout(): 清除定时器
 清除任务
 参数一：需要清除的任务ID

 alert(): 提示框
 仅仅有确定按钮

 confirm(): 确认提示框
 返回值就是用户操作
 true: 点击了确定
 false： 点击了取消

 propmt(): 输入提示框
 返回值就是用户操作
 true: 点击了确定
 false： 点击了取消

 注意：
    因为window对象使用非常频繁，所以当调用js中的window对象的方法时，可以省略对象名不写。



2.location对象
href属性： 代表的是地址栏的URL，可以获取和设置URL。URL表示统一资源定位符
reload方法： 刷新当前页面    
需求：实现每隔一秒刷新一次页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
/*
    2.location对象
    href属性： 代表的是地址栏的URL，可以获取和设置URL。URL表示统一资源定位符
    reload方法： 刷新当前页面

    需求：实现每隔一秒刷新一次页面

*/

    //获取地址栏中的url
    function getHref(){
        //获取当前的地址栏中的url
        var url = window.location.href;
        alert(url);
        }

    //设置地址中的url
    function setHref(){
        window.location.href="1.广告.html";
        }

    //reload方法： 刷新当前页面,需求：实现每隔一秒刷新一次页面
    function refresh2(){
        window.location.reload();
        }

    window.setTimeout("refresh2()",1000);

</script>
</head>

<body>
<input type="button" value="getHref" onclick="getHref()" />
<input type="button" value="setHref" onclick="setHref()" />
<input type="button" value="refresh" onclick="refresh2()" />
</body>
</html>

3.history对象
forward(): 前进到下一页
back(): 后退上一页
go(): 跳转到某页（正整数：前进  负整数：后退）  1   -2


4.screen对象（学习四个属性）
availHeight和availWidth
是排除了任务栏之后的高度和宽度
width和height
是整个屏幕的像素值

2 事件编程
javascript事件编程的三个要素：
（以单击事件为例讲解事件编程三要素）
1）事件源：html标签
2）事件：click dblclick mouseover。。。。
3）监听器：函数

        javascript事件分类：
            点击相关的：
                 单击： onclick
                 双击： ondblclick

            焦点相关的：（获得焦点输入框内提示内容消失，失去焦点验证用户名信息并且在输入框内提示）
                聚焦：  onfocus
                失去焦点： onblur

            选项相关的：（select选项改变，做一个籍贯选项）
                改变选项： onchange

            鼠标相关的：（画一个div区块进行演示）
                鼠标经过： onmouseover
                鼠标移除： onmouseout

            页面加载相关的：（一般用在body标签中，用于网页加载完毕后还需执行什么操作进行触发）
                页面加载： onload

DOM编程
3.1 概念（写一个网页demo,画图讲解javascrip对网页上每一个标签的封装，对象的层次结构体系）
DOM（document Object Model）文档对象模型编程。
这里写图片描述
3.2 查询标签对象
通过document对象获取，document代表一个html页面

#通过document对象的集合
作用： 获取多个或者同类的标签对象
all: 获取所有标签对象
forms： 获取form标签对象
images: 获取img标签对象
links: 获取a标签对象
var nodeList = document.all; //返回标签对象数组 
var nodeList = document.forms; //返回标签对象数组
var nodeList = document.images; //返回对象数组
var nodeList = document.links;//返回对象数组


#通过关系查找标签对象
父节点： parentNode属性
子节点： childNodes属性
第一个子节点： firstChild属性
最后一个子节点： lastChild属性
下一个兄弟节点： nextSibling属性
上一个兄弟节点： previousSibling属性 

#通过document方法查询标签对象
    document.getElementById("id属性值");   最常用
    注意：
    1）使用该方法获取的标签一定要有id属性
    2）在同一个html页面中不要出现两个同名的id

    documetn.getElementsByName("name属性值");  获取同name属性名的标签列表
    注意：
    1）使用该方法获取的标签一定要有name属性

    document.getElementsByTagName("标签名")  获取相同标签名的标签列表

3.3 修改标签对象属性
常用的需要修改的属性：
    innerHTML属性：修改标签体内容 <span>xxxxxx</span> <div></div> <select></select>
                innerHTML : 设置的标签内的html 

    value属性： 修改value属性值。 input type="text"
    src属性： 修改图片的src属性。 <img src=""/> 点击按钮更换图片
    案例：两张图片不断自动切换

    checked属性：修改单选或多项的默认值。   <input type="radio/checked" checked=""/>  爱好全选
    （课堂练习）案例：制作一个多选反选列表，价格统计（主要练习两个属性，innerHTML,checked）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<input type="checkbox" id="all"  onclick="checkAll()"/>全选<br />
<input type="checkbox"  name="cmp" value="4000"/>神州电脑4000元<br />
<input type="checkbox"  name="cmp" value="10000"/>苹果电脑10000元<br />
<input type="checkbox"  name="cmp" value="5000"/>戴尔电脑5000元<br />
<input type="checkbox"  name="cmp" value="5000"/>华硕电脑5000元<br />
<input type="button" value="计算总价" onclick="sumPrice()"/><span id="allPrice"></span>
</body>
<script type="text/javascript">
    function checkAll(){
        //获取所有的电脑的input标签对象,将他们的checked属性选中变不选中,不选中变选中
        var cmps = document.getElementsByName("cmp");
        for(var i=0;i<cmps.length;i++){
            if(cmps[i].checked){
                cmps[i].checked=false;
                }else{
                    cmps[i].checked=true;
                    }

            }
        };

    //定义一个总价
    function sumPrice(){
        var res=0;
        //获取选中的input标签对象,将他们的所有的价格加起来
        var cmps = document.getElementsByName("cmp");
        //获取sapn标签
        var allPriceSpan = document.getElementById("allPrice");

        for(var i=0;i<cmps.length;i++){
            if(cmps[i].checked){
                //说名这个标签对象是一个选中的状态
                var price = cmps[i].value;
                //将上面获取到的price转换成number类型
                price = parseInt(price);
                res+=price;
                }
            }
        //将计算出的总价,设置到span标签中
        allPriceSpan.innerHTML=res+"元";
        }


</script>

</html>

4 正则表达式

    4.1 正则表达式的书写规则
        创建正则表达式： var 变量 = /正则规则/;

        [a-z]: 表示匹配字母
         *  :  0或多个元素
         +:   1个或多个元素   
         ? :   0或1个元素
         {n,m} 大于n,小于m的个数

        正则方法： 
            test（）： 用于匹配指定的字符串. true：表示匹配成功 ； false; 表示匹配失败

        注意：
            在js的正则表达式中，如果遇到了符合规则的内容，就代表匹配成功！
            如果需要和java一样完全匹配，需要添加边界符号

            开始标记： ^
            结束标记： $


    4.2 案例：利用正则表达式写一个表单验证
    用户名：10-15位的数字或者字母
    密码：10-15位的数字或字母
    确认密码：判断两次输入的密码是否一致
    邮箱：xxx@xxx.(com/cn/net)
    提交按钮：必须全部验证成功的情况下，才能成功提交，只要有一个验证失败无法提交

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<!--
        4.2 案例：利用正则表达式写一个表单验证
        用户名：10-15位的数字或者字母
        密码：10-15位的数字或字母
        确认密码：判断两次输入的密码是否一致
        邮箱：xxx@xxx.(com/cn/net)
        提交按钮：必须全部验证成功的情况下，才能成功提交，只要有一个验证失败无法提交
-->
<body>
<form action="8.提交成功.html" onsubmit="return checkAll()">
用户名:<input type="text" id="username" onblur="testUsername()"/><span id="usenameTip"></span><br />
密码:<input type="password" id="password" onblur="testPassword()" /><span id="passwordTip"></span><br />
确认密码:<input type="password" id="rePassword" onblur="testRepassword()" /><span id="rePasswordTip"></span><br />
邮箱:<input type="text" id="email" onblur="testEmail()" /><span id="emailTip"></span><br />
<input type="submit" value="提交" /><br />
</form>
</body>
<script type="text/javascript">
    //检测用户名和密码,并给出提示
    function testUsername(){
        //定义正则表达式,用户名：10-15位的数字或者字母
        var reg = /^[a-zA-Z0-9]{10,15}$/;
        //获取username和usernameTip这两个标签
        var usernameValue = document.getElementById("username").value;
        var usenameTip = document.getElementById("usenameTip");
        //使用正则表达式进行匹配
        if(reg.test(usernameValue)){
            //说明匹配成功
            usenameTip.innerHTML="用户名可用".fontcolor("green");
            return true;
            }else{
                usenameTip.innerHTML="用户名不可用".fontcolor("red");
                return false;
                }

        }



    //使用正则表达式检测密码是否符合规则并给提示
    function testPassword(){
        //获取密码的值,还需要获取passwordTip这个对象
        //定义正则
        var reg = /^[a-zA-Z0-9]{10,15}$/;
        var passwordValue = document.getElementById("password").value;
        var passwordTip = document.getElementById("passwordTip");
        //使用正则表达式进行匹配
        if(reg.test(passwordValue)){
            passwordTip.innerHTML="密码符合规则".fontcolor("green");
            return true;
            }else{
                passwordTip.innerHTML="密码不符合规则".fontcolor("red");
                return false;
                }

        }


    //给确认密码写一个监听,检测两次输入的密码是否一致
    function testRepassword(){
        //获取两个密码的输入值
        var passwordValue = document.getElementById("password").value;
        var rePasswordValue = document.getElementById("rePassword").value;
        var rePasswordTip = document.getElementById("rePasswordTip");
        if(passwordValue==rePasswordValue){
            //两次民嘛输入一致
            rePasswordTip.innerHTML="两次密码输入一致".fontcolor("green");
            return true;
            }else{
                rePasswordTip.innerHTML="两次密码输入不一致".fontcolor("red");
                return false;
                }

        }



    //给检测邮箱写一个方法
    function testEmail(){
        //获取用户输入的邮箱的值
        var emailValue = document.getElementById("email").value;
        var emailTip = document.getElementById("emailTip");

        //写一个匹配邮箱的正则规则
        //7667@234.com    jsck#sina.com   tom123@163.com.cn
        //根据以上的举例写出正则规则
        var reg = /^[a-zA-Z0-9]+@[a-zA-Z0-9]+(\.[a-z]{2,3}){1,2}$/;
        if(reg.test(emailValue)){
            emailTip.innerHTML="邮箱符合规则".fontcolor("green");
            return true;
            }else{
                emailTip.innerHTML="邮箱符合规则".fontcolor("red");
                return false;
                }
        }



    //通过检测用户的所有的输入,返回该组数据是否可以提交
    function checkAll(){
        if(testUsername()&&testPassword()&&testRepassword()&&testEmail()){
            return true;
            }else{
                return false;
                }

        }

</script>
</html>