JavaEE笔记——前端基础之JS事件，内置对象与BOM和DOM操作

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <script>
        //1.使用原始的方式创建对象
        var obj = new Object();
        obj.name='zhangsan';
        obj.age = 20;
        obj.say = function () {
            console.log(this.name,":",this.age);
        }

        //测试
        console.log(obj.name);
        console.log(obj.age);
        obj.say();

        //2.使用工厂模式创建对象
        function createObject(name,age) {
            var obj = new Object();
            obj.name = name;
            obj.age = age;
            obj.say = function () {
                console.log(this.name, ":", this.age);
            }
            return obj;
        }

        //测试
        var ob1 = createObject('lisi',20);
        console.log(ob1.name);
        ob1.say();

        var ob2 = createObject('wangwu',25);
        console.log(ob2.name);
        ob1.say();
        console.log("===============");

        //3.使用自定义构造函数创建对象
        function Stu(name,age) {
            this.name = name;
            this.age = age;
            this.say = function () {
                console.log(this.name,":",this.age);
            }
        }

        //测试
        var s1 = new Stu("zhaoliu",28);
        var s2 = new Stu("xiaoli",21)
        s1.say();
        s2.say();
        console.log("===============");

        //4.直接创建自定义对象
        var ob = {name:'qq',age:25}
        console.log(ob.name);
        console.log(obj.age);

        var obj={};
        obj.name="小白";
        obj.say=function () {
            console.log("我叫: "+this.name);
        };
        obj.say();

        var obj2={
            name:"小明",
            age:20,
            say:function () {
                console.log("我叫: "+this.name+"; 年龄: "+this.age);
            },
        };
        obj2.say();

        var a = [10,20,30];
        console.log(typeof a); //结果为object类型
        console.log(a.constructor == Array); // 使用constructor方法判断具体的数值类型
        console.log(s1 instanceof Stu);//判断s1是否为STU类的实例

    </script>
    <body>
        <h1>JavaScript语言实例--对象的定义和使用</h1>
    </body>
</html>

JavaScript内置对象

Array(数组)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            //内置对象--Array数组
            var a1 = new Array(); //定义一个空数组
            var a2 = new Array(10);//定义一个长度为10（值：undefined）
            var a3 = new Array(10,20,30);//定义一个指定数值的数组

            console.log(a1.length);
            console.log(a2.length);
            console.log(a3.length);

            var a4 = [10,20,30,40,50] // 快捷定义数组

            //数组的遍历
            for(var i=0;i<a4.length;i++){
                console.log(i,"=>",a4[i]);
            }

            //以for...in的方式遍历
            for(var i in a4){
                console.log(i,"=>",a4[i]);
            }

            //以foreach的方式进行遍历
            a4.forEach(function (v) {
                console.log(v);
            })

            //数组的方法：
            console.log(a4.toString());//数组转字符串
            console.log(a4.join(":"))//以：为分割符来合并字符串

            //数组合并
            var a = [1,2,3];
            console.log(a.concat(4,5));

            var b = [10,50,30,20,70,40];
            console.log(b.join(":"));
            console.log(b.sort().join(":")); //数组排序
            console.log(b.reverse().join(":")); //数组反序

            var aa = new Array(10,20,30);
            console.log(aa.join(":"));
            aa.push(50);//往数组内加值
            aa.push(40);
            console.log(aa.join(":"));
            aa.pop(); //从数组的尾部删除一个值
            console.log(aa.join(":"));

            //清空
            console.log(b.join("："));
            b.length=3
            console.log(b.join("："));
            b = [];
            console.log(b.join("："));
        </script>
    </head>
    <body>
        <h1>数组对象</h1>
    </body>
</html>

Date日期

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <h1>JavaScript语言实例--内置对象</h1>
    </body>
    <script>
        //内置对象--Date日期对象

        function formatDate (d) {
            if (!d instanceof  Date){
                return;
            }
            var y = d.getFullYear(),
                m = d.getMonth()+1,
                day = d.getDate(),
                hh = d.getHours(),
                mm = d.getMinutes(),
                ss = d.getSeconds();

            //判断单位数字前补零操作
            m = m<10?'0'+m:m;
            day = day<10?'0'+day:day;
            hh = hh<10?'0'+hh:hh;
            mm = mm<10?'0'+mm:mm;
            ss = ss<10?'0'+ss:ss;

            return y+"-"+m+"-"+day+" "+hh+":"+mm+":"+ss;
        }

        var dd = new Date();
        //从1970年1月1日零时零分0秒至今的毫秒数
        document.write("时间戳："+dd.valueOf());
        document.write("<h2>"+formatDate(dd)+"</h2>");
    </script>
</html>

String字符串

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <h1>JavaScript语言实例--内置对象</h1>
    </body>
    <script>
        //内置对象--String字符串对象
        var s1 ="ZhangSanFeng";
        document.write(s1+"<br/>");
        document.write(s1[5]+"<br/>");
        document.write(s1.charAt(5)+"<br/>");//查找指定位置上的字符
        document.write(s1.substr(5,3)+"<br/>");//substr(5,3):从第5个字符开始，截取3个字符
        document.write(s1.substring(5,8)+"<br/>");//substring(5,8):截取第5-7个字符。(5,8):左闭右开
        document.write("小写："+s1.toLowerCase()+"<br/>");
        document.write("大写："+s1.toUpperCase()+"<br/>");
        //字符串查找
        document.write(s1.indexOf("an")+"<br/>");//从首字母开始查找，查找an的位置
        document.write(s1.lastIndexOf("an")+"<br/>");//从最后的字母开始查找，查找an的位置
        //替换
        document.write(s1.replace("SanFeng","WuJi")+"<br/>");
        //全部替换
        document.write("10,20,30,40".replace(/,/g,":"));//   replace(/,/g,":")：把所有的,替换成：

        var str = "10:23:45:67:87:65";
        console.log(str);
        console.log(str.split(":"));

        var s2 = " zhangsan "
        console.log("#"+s2+"#");
        console.log("#"+s2.trim()+"#");  //trim():删除字符串的头尾空格。
    </script>
</html>

Math

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <h1>JavaScript语言实例--内置对象</h1>
    </body>
    <script>
        //内置对象--Math对象
        console.log(Math.abs(-20));
        console.log(Math.ceil(10.00000001));//进一取整
        console.log(Math.floor(10.9999999));//舍去求整
        console.log(Math.round(10.5));//四舍五入取整
        console.log(Math.max(10,20));//最大值
        console.log(Math.min(10,20))//最小

        console.log(Math.random());//0~1的随机数
        console.log(Math.ceil(Math.random()*1000000)%10+1);//1~10的随机数


    </script>
</html>

JavaScript事件

单击事件与元素操作

<h1 id="hid">JavaScript语言实例--单击事件</h1>
    <!--按钮称为事件源,单击称为事件,双引号里的内容称为事件处理程序-->
    <button οnclick="fun()">点击我</button>
    <ul id="uid">
        <li>AAAAA</li>
        <li>BBBBB</li>
        <li>CCCCC</li>
        <li>DDDDD</li>
    </ul>
    <ol>
        <li>1111111</li>
        <li>2222222</li>
    </ol>
</body>
<script>
    function fun() {
        console.log('hello js');
        //获取id属性为hid的元素标签
        var hid = document.getElementById("hid");
        //输出元素标签之间的文本内容
        console.log(hid.innerHTML);
        hid.innerHTML = "JavaScript语言实例--元素操作事件";
        //改变HTML 元素的样式
        hid.style.color = "red";
        //在js的命名规范中，是不允许有-出现的，但是css样式里很多样式都含有-，
        // 我们需要把-去掉，然后第二个单词的首字母大写，这样就可以在JS内使用CSS样式
        hid.style.backgroundColor="#ddd";
    }

    //获取当前网页中的所有li元素标签
    /*var mlist = document.getElementsByTagName("li");*/
    var mlist = document.getElementById("uid").getElementsByTagName("li");
    //遍历输出
    for (var i in mlist){
        if (!isNaN(i))
        console.log(mlist[i].innerHTML);
        mlist[i].style.color="red";
    }
</script>

Timing定时事件

 <h1 >JavaScript语言实例--定时器</h1>
    <h2 id="hid">计数器：0</h2>
    <button οnclick="doStop()">停止</button>
</body>
<script>
    var m=0,mytime=null;
    function doRun() {
        m++;
        document.getElementById("hid").innerHTML="计数器："+m;
        mytime = setTimeout(doRun,1000); //以递归的方式调用一次性定时函数从而实现周期性定时
    }
    doRun();

    function doStop() {
    clearTimeout(mytime);
    }
   /* m=0;
    var mytime = setInterval(function () {
        m++;
        document.getElementById('hid').innerHTML = "计数器："+m;
    },1000)

    function doStop() {
        clearInterval(mytime);
    }*/
    /*//一次性定时3秒后执行参数中的函数
    setTimeout(function () {
        console.log("Hello JS!")
    },3000);

    //周期性定时，每隔1秒执行参数回调函数一次
    var m = 0;
    setInterval(function () {
        m++
        console.log("Hello"+m);
    },1000)*/
</script>

简单计算器的实例

<script>
    //事件处理函数
    function doFun(num) {
        var m1 = parseInt(document.myform.num1.value);
        var m2 = parseInt(document.myform.num2.value);
        switch (num) {
            case 1:
                var res = m1+"+"+m2+"="+(m1+m2);
                break;
            case 2:
                var res = m1+"-"+m2+"="+(m1-m2);
                break;
            case 3:
                var res = m1+"*"+m2+"="+(m1*m2);
                break;
            case 4:
                var res = m1+"/"+m2+"="+(m1/m2);
                break;
        }
        //将结果放置在第三个输入框中
        document.myform.res.value = res;
    }
</script>

简单操作元素标签

<body>
    <h1>JavaScript语言实例--js操作元素标签属性(放大和缩小)</h1>
    <button οnclick="dofun(1)">放大</button>
    <button οnclick="dofun(2)">缩小</button>
    <button οnclick="dofun(3)">隐藏</button>
    <br><br/>
    <div style="width: 200px;height: 200px;background-color: #ddd;" id="did"></div>
</body>
<script>
    var width = 200,height = 200;
    var did = document.getElementById("did");
    function dofun(num) {
        switch (num) {
            case 1:
                width+=10;
                height+=10;
                did.style.width = width+"px";
                did.style.height = height+"px";
                break;
            case 2:
                width-=10;
                height-=10;
                did.style.width = width+"px";
                did.style.height = height+"px";
                break;
            case 3:
                did.style.display = "none";
                break;
        }
    }
</script>

事件绑定方式

事件源：网页可见的标签

事件：如onclick就是一个单击事件

事件处理程序:写在Js内的事件的响应程序

<body>
    <h1>JavaScript语言实例--事件处理（事件绑定方式）</h1>
    <button οnclick="fun()">按钮1</button><!--主动绑定-->
    <button id="bid">按钮2</button> <!--被动绑定，通过id来绑定-->
</body>
<script>
    function fun() {
        console.log("按钮1被点击了");
    }
    document.getElementById("bid").onclick = function () {
        console.log("按钮2被点击了");
    }
</script>

获取事件源对象

<body>
    <h1>JavaScript语言实例--获取事件源对象</h1>
    <h2 οnclick="fun(this)">2级标题1</h2>
    <h2 id="hid">2级标题2</h2>
</body>
<script>
    function fun(ob) {
        console.log("aaaaaaa");
        ob.style.color="green";
    }
    document.getElementById("hid").onclick = function () {
        console.log("bbbbbbbb");
        //此种事件绑定方式，this就表示当前事件源对象
        this.style.color="red";
    }
</script>

dbclick双击事件

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            ul,li{margin: 0px;padding: 0px;}
            ul{list-style:none;}
            ul li{height: 30px;margin-top: 4px;background-color: #ddd;}
            ul li:hover{background-color: #fc0;}
        </style>
    </head>
    <body>
        <h1>JavaScript语言实例--dblcilck双击事件</h1>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </body>
    <script>
        //获取上面所有的li元素节点
        var mlist = document.getElementsByTagName("li");
        //遍历绑定事件
        for (var i=0;i<mlist.length;i++){
            mlist[i].ondblclick = function () {
                //设置背景颜色
                this.style.backgroundColor = "#f0c";
            };
        }
    </script>
</html>

context鼠标右击事件

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript语言实例</title>
    </head>
    <style>
        ul,li{margin: 0px;padding: 0px;}
        ul{list-style:none;width: 100px;text-align: center;position: absolute;display: none}
        ul li{height: 30px;line-height:30px;margin-top: 4px;background-color: #ddd;}
        ul li:hover{background-color: #fc0;}
    </style>
    <body>
        <h1>JavaScript语言实例--contextmenu右击事件</h1>
        <ul id="uid">
            <li>剪切</li>
            <li>复制</li>
            <li>粘贴</li>
        </ul>
    </body>
    <script>
        document.oncontextmenu = function (ent) {
            //获取兼容的事件对象
            var event = ent || window.Event;//window.Event:兼容低版本的浏览器

            //获取鼠标在网页中的点击位置
            var x = event.clientX;
            var y = event.clientY;
            console.log(x,y);

            var uid = document.getElementById("uid");
            uid.style.top = y+"px";
            uid.style.left = x+"px";
            uid.style.display = "block";
            return false;//拦截平时鼠标右击能够显示的菜单
        }
    </script>
</html>

mouse鼠标移入移出事件——onmouseover和onmouseout

优酷首页图片轮播实现

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript语言实例</title>
    </head>
    <style>
        div,img,ul,li{margin: 0px;padding: 0px;}
        #did{width: 384px;height: 240px;}
        #did img{display: none}
        #did img:first-child{display:block} /*显示第一张*/
    </style>
    <body>
        <h1>JavaScript语言实例--mouse鼠标移入和移出事件</h1>
        <div id="did" οnmοuseοver="doStop()" οnmοuseοut="doStart()">
            <img src="./images/11.jpg" width="384"/>
            <img src="./images/22.jpg" width="384"/>
            <img src="./images/33.jpg" width="384"/>
            <img src="./images/44.jpg" width="384"/>
        </div>
    </body>
    <script>
        var m=1;
        var mytime = null;

        //定义函数展示对应的图片
        function show(x) {
           var mlist = document.getElementById("did").getElementsByTagName("img");
           for (var i=0;i<mlist.length;i++){
               if (x==i+1){
                   mlist[i].style.display = "block";
               }else {
                   mlist[i].style.display = "none";
               }
           }
        }

        //开启定时轮播图片
        function doStart() {
            if (mytime == null) {
                mytime = setInterval(function () {
                    m++;
                    show(m);
                    if (m >= 4) {
                        m = 0;
                    }
                }, 2000)
            }
        }

        //停止轮播图片
        function doStop() {
            if (mytime != null)
            clearTimeout(mytime);
            mytime=null;
        }

        doStart();
    </script>
</html>

图片切换

淘宝京东某商品详情页的图片切换

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript语言实例</title>
        <style>
            div,img,ul,li{margin: 0px;padding: 0px;}
            #did{width: 384px;height: 240px;}
            #list img{width: 85px;border: 2px solid #fff;margin-right: 2px;}
            #list img:hover{border:2px solid red}
        </style>
    </head>
    <body>
       <h1>JavaScript语言实例--onmouseovaer鼠标移入事件</h1>
        <div id="did">
            <img id="mid" src="./images/11.jpg" width="384"/>
        </div>
        <div id="list">
            <img src="./images/11.jpg" width="384"/>
            <img src="./images/22.jpg" width="384"/>
            <img src="./images/33.jpg" width="384"/>
            <img src="./images/44.jpg" width="384"/>
        </div>
    </body>
    <script>
        //获取所有小图列表
        var mlist = document.getElementById("list").getElementsByTagName("img");
        //遍历这些图片
        for (var i=0;i<mlist.length;i++){
            mlist[i].onmouseover = function () {
                document.getElementById("mid").src =this.src;
            }
        }
    </script>
</html>

放大镜效果

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript语言实例</title>
        <style>
            div,img,ul,li{margin: 0px;padding: 0px;}
            #did{width: 300px;height: 300px;overflow: hidden;display: none;position: absolute;}
        </style>
    </head>
    <body>
        <h1>JavaScript语言实例--图片的放大镜效果</h1>
        <br/><br/><br/>
        <img id="mid" src="./images/33.jpg" width="384" height="240"/>
        <div id="did">
            <img src="./images/33.jpg"/>
        </div>
    </body>
    <script>
        //获取被放大图片和放大镜图片对象
        var mid = document.getElementById("mid"); //被放大图片
        var did = document.getElementById("did"); //放大镜图片

        //为图片添加鼠标移入和移出事件
        mid.onmouseover = function () {
            //对放大镜进行定位
            did.style.top = this.offsetTop+"px"; //offsetTop:获取当前对象距离上面多大的尺寸  //相当于上对齐
            did.style.left = this.offsetLeft+this.offsetWidth+10+"px"; //offsetWidth:本身宽度
            did.style.display="block";
        }
        mid.onmouseout = function () {
            did.style.display="none";
        }

        //添加鼠标移动事件
        mid.onmousemove = function (ent) {
            //先获取兼容的鼠标事件对象
            var event = ent || window.Event;

            //获取鼠标在图片上的位置
            var x = event.clientX - this.offsetLeft;
            var y = event.clientY - this.offsetTop;

            //定位放大镜位置
            did.scrollTop = y*5 -150;
            did.scrollLeft = x*5 -150;
        }
    </script>
</html>

拖动效果

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript语言实例</title>
        <style>
            div{margin: 0px;padding: 0px;}
            #did{width: 200px;height: 200px;background-color: #ddd;cursor: move;position: absolute}
        </style>
    </head>
    <body>
        <h1>JavaScript语言实例--拖动效果</h1>
        <div id="did"></div>
    </body>
    <script>
        //获取div层对象
        var did = document.getElementById("did");
        //绑定鼠标按下事件
        did.onmousedown = function (ent) {
            //获取兼容的事件对象
            var event = ent || window.Event;

            //获取鼠标在div层上的位置
            var x = event.clientX - this.offsetLeft;
            var y = event.clientY - this.offsetTop;

            this.style.backgroundColor = "blue";

            //绑定鼠标移动事件
            /*如果用did来绑定鼠标事件的话,当鼠标速度过快时移动的图片会丢失*/
            document.onmousemove = function (e) {
                var myevent = e || window.Event;
                //定位
                did.style.top = myevent.clientY-y +"px";
                did.style.left = myevent.clientX-x +"px";
            }

        }
        //绑定鼠标松开事件
        did.onmouseup = function () {
            this.style.backgroundColor = "#ddd";
            //取消移动事件
            document.onmousemove = null;
        }
    </script>
</html>

JavaEE笔记——前端基础之JS事件，内置对象与BOM和DOM操作

keydown键盘事件

<script>
    document.onkeydown = function (ent) {
        //获取兼容的事件对象
        var event = ent||window.Event;

        //输出键盘值
        console.log(event.keyCode);

    }
</script>

load事件

作用:当页面加载完了才执行JS程序。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript语言实例</title>
        <script>
            //当页面加载完成后才自动执行的程序
            window.onload = function () {
                var hid = document.getElementById("hid");
                hid.style.color = "red";
            }
        </script>
    </head>
    <body>
        <h1 id="hid">JavaScript语言实例--onload事件</h1>
    </body>

</html>

表单事件

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript语言实例</title>
    </head>
    <body>
        <h1 id="hid">JavaScript语言实例--表单事件</h1>
        <!--οnsubmit="return false"表示不跳转页面-->
        <form action="mouse.html" name="myform" method="post" οnsubmit="return doSubmit()">
            <!--οnblur="checkUname()":当鼠标离开名字输入框时就验证输入是否正确-->
            帐号:<input type="text" name="uname" οnblur="checkUname()"/><br/><br/>
            密码:<input type="password" name="upass" οnblur="checkUpass()"/><br/><br/>
            邮箱:<input type="text" name="email"/><br/><br/>
            <input type="submit" name="提交"/>
        </form>
    </body>
    <script>
        //表单提交事件处理程序
        function doSubmit() {
            return checkUname()&&checkUpass();
        }
        
        //验证帐号
        function checkUname() {
            var name = document.myform.uname.value;
            if (name.length<=0){
                alert("帐号不可以为空")
                return false
            }
            return true;
        }
        //验证密码
        function checkUpass() {
            var password = document.myform.upass.value;
            if (password.length<6){
                alert("密码必须大于等于6位")
                return false
            }
            return true;
        }
    </script>
</html>

change事件

功能：下拉框操作

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript语言实例</title>
    </head>
    <body>
        <h1 id="hid">JavaScript语言实例--change事件</h1>
        <select name="sid" id="sid">
            <option value="">-请选择-</option>
            <option value="1">-北京-</option>
            <option value="2">-河北-</option>
            <option value="3">-天津-</option>
            <option value="4">-河南-</option>
            <option value="5">-山西-</option>
        </select>
        <select id="cid"></select>
    </body>
    <script>
        var data = new Array();
        data[1] = ["海淀区","朝阳区","丰台区","昌平区"];
        data[2] = ["石家庄","保定","邯郸","邢台"];
        data[3] = ["河东区","河西区","河北区","南开区"];
        data[4] = ["郑州区","洛阳区","开封","驻马店"];
        data[5] = ["太原","大同","吕梁","运城"];


        //获取两个下拉框元素对象
        var sid = document.getElementById("sid");
        var cid = document.getElementById("cid");

        //绑定change事件
        sid.onchange = function () {
            //获取下拉框中的值
            var v = this.value;
            cid.length = 0; //删除cid的下拉项
            //判断并循环对应城市信息
            if (v != ""){
                for (var i=0;i<data[v].length;i++){
                    //创建一个下拉项并添加到cid下拉框中
                    cid.add(new Option(data[v][i],i));
                }
            }
        }
    </script>
</html>

scroll事件

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript语言实例</title>
    </head>
    <body>
        <h1 id="hid">JavaScript语言实例--滚动条事件</h1>
        <div id="aid" style="height: 500px;width: 700px;background-color: #ddd"></div>
        <div id="bid" style="height: 500px;width: 700px;background-color: #eee"></div>
    </body>
    <script>
        window.onscroll = function () {
            var scrollTop = 0;
            if (document.documentElement && document.documentElement.scrollTop){
                scrollTop = document.documentElement.scrollTop;
            }else if (document.body){
                scrollTop = document.body.scrollTop;
            }
            document.getElementById("bid").innerHTML = scrollTop;
        }
    </script>
</html>

JavaScript BOM操作

BOM（浏览器对象模型Browser Object Model(BOM)）

作用：允许JS与浏览器对话，比如一些前进后退的操作。

BOM的window

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript语言实例</title>
    </head>
    <body>
        <h1>JavaScript中的BOM--window</h1>
        <iframe src="../Event/mouse.html" width="500" height="500"></iframe>
        <button οnclick="window.open('../Event/mouse.html','aa',width=200,height=200);">打开一个新窗口</button>
    </body>
    <script>
        document.write(window.frames.length);

        window.alert("ok");
        b = window.confirm("确定要删除吗?")
        if(b){
            alert("yes");
        }else {
            alert("no");
        }
        var mstr = window.prompt("请输入你的邮箱？") //prompt:代表输入框
        alert(mstr);
    </script>
</html>

BOM的navigator

<script>
    with(document){
        write("你的浏览器信息：<ul>");
        write("<li>代码："+navigator.appCodeName+"</li>");
        write("<li>名称："+navigator.appName+"</li>");
        write("<li>版本："+navigator.appVersion+"</li>");
        write("<li>语言："+navigator.language+"</li>");
        write("<li>编译平台："+navigator.platform+"</li>");
        write("<li>用户表头："+navigator.userAgent+"</li>");

    }
</script>

BOM的Screen

<script>
    document.write("屏幕宽度："+screen.width+"px<br>");
    document.write("屏幕高度："+screen.width+"px<br>");
    document.write("屏幕可用宽度："+screen.availWidth+"px<br>");
    document.write("屏幕可以高度："+screen.availHeight+"px<br>");
    document.write("宽度："+window.innerWidth+"px<br>");
    document.write("高度："+window.innerHeight+"px<br>");
</script>

BOM的history

<h1>JavaScript中的BOM--history对象</h1>
<button οnclick="window.history.back();">后退一步</button>
<button οnclick="window.history.go(-1);">后退一步</button>
<button οnclick="window.history.go(-2);">后退二步</button><br>
<button οnclick="window.history.forward();">前进一步</button>
<button οnclick="window.history.go(1);">前进一步</button>
<button οnclick="window.history.go(2);">前进尾部</button><br>
<a href="http://www.baidu.com">百度</a><br>

BOM的location

<body>
    <h1>JavaScript中的BOM--location对象</h1>
    <button οnclick="window.location.href='http://baidu.com'">点击跳转到百度</button>
    <button οnclick="window.location.reload()">刷新</button>
    <script>
        document.write("<br>当前地址："+window.location.href);
    </script>

JavaScript DOM操作

当页面被加载时，浏览器会创建页面的文档对象模型DOM(Document Object Model)

JavaEE笔记——前端基础之JS事件，内置对象与BOM和DOM操作

通过HYML DOM，JS能够访问和改变HTML文档的所有元素

HTML DOM模型被结构化为对象数：

对象的HTML DOM树

JavaEE笔记——前端基础之JS事件，内置对象与BOM和DOM操作

什么是HTML DOM

JavaEE笔记——前端基础之JS事件，内置对象与BOM和DOM操作

DOM 节点

在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点

节点父、子和同胞

节点树中的节点彼此拥有层级关系。

父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

在节点树中，顶端节点被称为根（root）
每个节点都有父节点、除了根（它没有父节点）
一个节点可拥有任意数量的子
同胞是拥有相同父节点的节点

下面的图片展示了节点树的一部分，以及节点之间的关系：

JavaEE笔记——前端基础之JS事件，内置对象与BOM和DOM操作

节点类型

JavaEE笔记——前端基础之JS事件，内置对象与BOM和DOM操作

获取节点实例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript中的DOM</title>
    </head>
    <body>
        <h1>JavaScript语言中HTML DOM</h1>
        <h3>我们重点学习HTML DOM的什么操作</h3>

        <ul>
            <li class="cc">JS 能改变页面中的所有 HTML 元素</li>
            <li>JS 能改变页面中的所有 HTML 属性</li>
            <li>JS 能改变页面中的所有 CSS 样式</li>
            <li class="cc">JS 能删除已有的 HTML 元素和属性</li>
            <li>JS 能添加新的 HTML 元素和属性</li>
            <li>JS 能对页面中所有已有的 HTML 事件作出反应</li>
            <li>JS 能在页面中创建新的 HTML 事件</li>
        </ul>

        <h3>我们重点学习HTML DOM的什么操作:</h3>
        <ul>
            <li>如何改变 HTML 元素的内容</li>
            <li>如何改变 HTML 元素的样式(CSS)</li>
            <li>如何对 HTML DOM 事件作出反应</li>
            <li>如何添加和删除 HTML 元素</li>
        </ul>

        <h3>W3C DOM 标准被分为3个不同的部分</h3>
        <ol id="oid">
            <li>Core DOM - 所有文档类型的标准模型</li>
            <li>XML DOM - XML文档类型的标准模型</li>
            <li>HTML DOM - HTML文档类型的标准模型</li>
        </ol>

        <a id="aid"  href="http://www.baidu.com" title="百度链接"></a>
    </body>
    <script>
        var aa = document.getElementById("aid");
        console.log(aa);
        console.log(aa.href);
        console.log(aa.title);
        aa.title = "百度22";//修改属性

        var h1 = document.getElementsByTagName("h1");
        console.log(h1[0]);
        h1[0].style.color = "red";

        var clist = document.getElementsByClassName("cc");
        for (var i=0;i<clist.length; i++){
            console.log(clist[i]);
        }

        var ol = document.getElementById("oid");
        var olist = ol.childNodes;
        console.log(olist.length);
        for (var i=0;i<olist.length;i++){
            console.log(olist[i]);
        }
    </script>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript中的DOM</title>
    </head>
    <body>
        <h1>JavaScript语言中HTML DOM</h1>
        <h3 id="hid">我们重点学习HTML DOM的什么操作</h3>
        <ul id="uid">
            <li>如何改变 HTML 元素的内容</li>
            <li>如何改变 HTML 元素的样式(CSS)</li>
            <li>如何对 HTML DOM 事件作出反应</li>
            <li>如何添加和删除 HTML 元素</li>
        </ul>
    </body>
   <script>
       //获取h3元素节点对象
       var hid = document.getElementById("hid");
       //输出当前节点的名字，值和类型
       console.log(hid.nodeName); //H3
       console.log(hid.nodeValue); //null
       console.log(hid.nodeType); //1
       //获取当前节点对象的第一个子节点的值和类型
       console.log(hid.childNodes[0].nodeValue); //就是内容
       console.log(hid.childNodes[0].nodeType); //3
   </script>
</html>

DOM之a链操作

<body>
    <h1>JavaScript语言中 DOM 操作</h1>
    <ul>
        <li><a href="https://www.baidu.com">百度</a> </li>
        <li><a href="https://www.163.com">网易</a> </li>
        <li><a href="https://www.sina.com">新浪</a> </li>
        <li><a href="https://www.qq.com">腾讯</a> </li>
    </ul>
</body>
<script>
    //获取当前页面中的所有链接
    //var alist = document.getElementsByTagName("a");
    var alist = document.links;
    for (var i=0;i<alist.length;i++) {
        console.log(alist[i].href,alist[i].innerHTML);
        alist[i].title = alist[i].innerHTML+"的链接";
    }
</script>

DOM之img图片操作

<body>
    <h1>JavaScript语言中HTML DOM 操作--图片延迟加载</h1>
    <img src="./images/HLL-11_xuandong.gif" res="./images/11.jpg"/>
    <img src="./images/HLL-11_xuandong.gif" res="./images/22.jpg"/>
    <img src="./images/HLL-11_xuandong.gif" res="./images/33.jpg"/>
    <img src="./images/HLL-11_xuandong.gif" res="./images/44.jpg"/>
</body>
<script>
    setTimeout(function () {
        //获取网页中所有的图片
        var mlist = document.images;
        //遍历
        for(var i=0;i<mlist.length;i++){
            //res不是img本身固有的属性，而是我们自己创造的属性名字,只能通过getAttribute()的方式进行获取
            mlist[i].src = mlist[i].getAttribute("res");
            mlist[i].width=100;
        }
    },3000);
</script>

DOM之form表单操作

<body>
    <h1>JavaScript语言中HTML DOM 操作</h1>
    <form></form>
    <form action="img.html" method="post" name="myform">
        账号：<input type="text" name="uname" value="wangwu7"/><br/>
    </form>
    <button οnclick="doSubmit()">点击提交</button>
</body>
<script>
    console.log(document.forms.length);
    //获取上面form表单中账号信息
    console.log(document.forms[1].uname.value);
    console.log(document.forms.item(1).uname.value);
    console.log(document.myform.uname.value);
    console.log(document['myform'].uname.value);
    console.log(document.forms.myform.uname.value);
    console.log(document.forms['myform'].uname.value);

    function doSubmit() {
        document.myform.action = "introduction.html";
        document.myform.method = "get"; //get：使输入的参数在网页地址栏可见
        document.myform.submit(); //获取form表单并执行提交
    }
</script>

DOM之input多选框操作

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript中的DOM</title>
    </head>
    <body>
        <h1>JavaScript语言中HTML DOM 操作</h1>
        <ul>
            <li><input type="checkbox" name="likes[]" value="篮球">篮球</li>
            <li><input type="checkbox" name="likes[]" value="足球">足球</li>
            <li><input type="checkbox" name="likes[]" value="羽毛球">羽毛球</li>
            <li><input type="checkbox" name="likes[]" value="乒乓球">乒乓球</li>
            <li><input type="checkbox" name="likes[]" value="棒球">棒球</li>
        </ul>
        <button οnclick="dofun()">获取</button>
    </body>
    <script>
        function dofun() {
            //获取网页中所有input标签
            var list = document.getElementsByTagName("input");
            var res = new Array();
            //遍历
            for (var i=0;i<list.length;i++){
                //判断是否是多选框并且已选中
                if(list[i].type == "checkbox" && list[i].checked){
                    res.push(list[i].value);
                }
            }
            alert(res);
        }
    </script>
</html>

DOM之select多选下拉框操作

功能：下拉框选项的移入移出。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript中的DOM</title>
        <style>
            select{width: 100px;height: 200px;border: 1px solid #ddd;float: left;}
            div{width: 100px;height: 200px;float: left;text-align: center;padding-top: 50px;}
        </style>
    </head>
    <body>
        <h1>JavaScript语言中HTML DOM 操作</h1>
        <select id="sid1" size="10" multiple>
            <option value="0">邓丽君</option>
            <option value="1">张国荣</option>
            <option value="2">梅艳芳</option>
            <option value="3">黄家驹</option>
            <option value="4">迈克尔.杰克逊</option>
            <option value="5">姚贝娜</option>
            <option value="6">张雨生</option>
        </select>
        <div>
            <button οnclick="doMove('sid1','sid2')">>></button>
            <br><br><br><br>
            <button οnclick="doMove('sid2','sid1')"><<</button>
        </div>
        <select id="sid2" size="10" multiple></select>
    </body>
    <script>
        function doMove(d1,d2) {
            //分别获取两个下拉框的元素节点对象
            var select1 = document.getElementById(d1);
            var select2 = document.getElementById(d2);
            //获取第一个下拉框中所有的下拉项
            var olist = select1.options;
            //遍历
            for (var i=0;i<olist.length;i++){
                //console.log(olist[i].value);
                //判断当前新是否被选中
                if (olist[i].selected){
                    olist[i].selected = false;//取消选中
                    var ob = olist[i];
                    select1.remove(i);//从选项框中移除第i个下拉项内容
                    select2.add(ob);//往选项框中添加下拉项内容
                    i--;
                }
            }
        }
    </script>
</html>

DOM之table表格操作

功能：表格的增删

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavaScript中的DOM</title>
        <style>
            select,option,div,button{margin:0px;padding:0px;}
            #lid,#rid,div{
                width:80px;
                height:260px;
                float:left;
            }
            div{
                text-align:center;
                padding-top:60px;
            }
        </style>
    </head>
    <body>
        <h1>JavaScript语言中HTML DOM 操作-table对象</h1>
        <table id="tid" width="500" border="1">
            <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>1001</td>
                <td>张三</td>
                <td>男</td>
                <td>20</td>
                <td><button οnclick="dodel(this)">删除</button></td>
            </tr>
            <tr>
                <td>1002</td>
                <td>李四</td>
                <td>女</td>
                <td>21</td>
                <td><button οnclick="dodel(this)">删除</button></td>
            </tr>
            <tr>
                <td>1003</td>
                <td>王五</td>
                <td>男</td>
                <td>22</td>
                <td><button οnclick="dodel(this)">删除</button></td>
            </tr>
            </tbody>
        </table>
        <br/><br/><br/>
        <h2>添加学生信息</h2>
        <form action="#" name="myform" οnsubmit="return doAdd()">
            学号：<input type="text" name="sno"/><br/><br/>
            姓名：<input type="text" name="name"/><br/><br/>
            性别：<input type="text" name="sex"/><br/><br/>
            年龄：<input type="text" name="age"/><br/><br/>
            <input type="submit" value="添加"/>
        </form>
    </body>
    <script>
        //执行数据删除操作
        function dodel(bt) {
            //获取当前表格元素节点对象
            var tab = document.getElementById("tid");
            tab.deleteRow(bt.parentNode.parentNode.rowIndex);
        }
        function doAdd() {
            //获取输入框的内容
            var sno = document.myform.sno.value;
            var name = document.myform.name.value;
            var sex = document.myform.sex.value;
            var age = document.myform.age.value;

            //获取当前表格对象并申请添加一行
            var row = document.getElementById("tid").insertRow();
            //为当前行添加一个个字段信息
            row.insertCell(0).innerHTML = sno;
            row.insertCell(1).innerHTML = name;
            row.insertCell(2).innerHTML = sex;
            row.insertCell(3).innerHTML = age;
            row.insertCell(4).innerHTML = '<button οnclick="dodel(this)">删除</button>';

            //情况form表单
            document.myform.reset();
            
            return false;//不让表单跳转
        }
    </script>
</html>

XML DOM

JavaEE笔记——前端基础之JS事件，内置对象与BOM和DOM操作

什么是XML DOM

XML DOM 定义了访问和处理 XML 文档的标准方法。

XML DOM 是 XML Document Object Model 的缩写，即 XML 文档对象模型。

XML DOM 是：

用于 XML 的标准对象模型
用于 XML 的标准编程接口
中立于平台和语言
W3C 的标准

XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法（接口）。

nodeName 属性

nodeName 属性规定节点的名称。

nodeName 是只读的
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 是属性的名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document

nodeValue 属性

nodeValue 属性规定节点的值。

元素节点的 nodeValue 是 undefined
文本节点的 nodeValue 是文本自身
属性节点的 nodeValue 是属性的值

XML DOM节点的遍历

<body>
    <h1>XML DOM:节点的遍历</h1>
    <ul id="uid">
        <li>成龙</li>
        <li>甄子丹</li>
        <li>李连杰</li>
        <li>宋小宝</li>
    </ul>
</body>
<script>
    //获取ul中的所以li节点
    var list = document.getElementById("uid").getElementsByTagName("li");
    console.log("节点数量:",list.length);

    //通过子节点获取
    var list2 = document.getElementById("uid").childNodes;
    console.log("节点数量：",list2.length);

    //节点的遍历
    for(var i=0;i<list2.length;i++){
        //判断是否为元素节点
        if (list2[i].nodeType == 1) {
            //console.log(list2[i].innerHTML);//HTML DOM获取内容
            console.log(list2[i].firstChild.nodeValue);//XML DOM获取内容
        }
    }
</script>

XML DOM节点的删除

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavaScript中的XML DOM</title>
        <style>
            ul{list-style:none;}
            ul li{line-height:30px;background-color:#ddd;margin-top:2px;}
            ul li:hover{background-color:#fc0;}
            ul li.cc{background-color:#f0c;}
        </style>
    </head>
    <body>
        <h1>XML-DOM：节点的删除</h1>
        <ul id="uid">
            <li>成龙</li>
            <li>甄子丹</li>
            <li>李连杰</li>
            <li>宋小宝</li>
            <li>成龙</li>
            <li>甄子丹</li>
            <li>李连杰</li>
            <li>宋小宝</li>
        </ul>
        <button οnclick="doDel()">删除</button>
    </body>
    <script>
        //获取所有ul中的li节点并绑定点击事件
        var list = document.getElementsByTagName("li");
        for (var i=0;i<list.length;i++){
            list[i].onclick = function () {
                this.setAttribute("class","cc")  //鼠标点击了之后就会更改属性
            }
        }
        
        //执行节点删除函数
        function doDel() {
            var list2 = document.getElementsByTagName("li");
            //遍历
            for (var i=0;i<list2.length;i++){
                //判断当前li是否有class属性值为cc的
                if(list2[i].getAttribute("class")=="cc"){
                    //执行删除
                    list2[i].parentNode.removeChild(list2[i]);
                    i--;
                }
            }
        }
    </script>
</html>

XML DOM节点属性操作

<body>
    <h1>XML-DOM:改变节点的属性 </h1>
    <a id="aid" href="http://www.baidu.com">百度</a>
</body>
<script>
    //获取上面超链接a元素节点
    var a = document.getElementById("aid");
    //通过已知的HTML DOM操作a节点属性
    console.log(a.href);
    a.title = "百度网址";
   // a.aa="bb";//添加aa属性值为bb  无效的操作

    //使用XML DOM操作节点a的属性
    console.log(a.getAttribute("href"));
    a.setAttribute("aa","bb");  //通过XML DOM可以添加任何属性和值
</script>

XML DOM节点的创建

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavaScript中的XML DOM</title>
        <style>
            ul{list-style:none;}
            ul li{line-height:30px;background-color:#ddd;margin-top:2px;width:100px;}
        </style>
    </head>
    <body>
        <h1>XML-DOM：节点的创建</h1>
        <ul id="uid">
            <li>成龙</li>
            <li>甄子丹</li>
            <li>李连杰</li>
            <li>宋小宝</li>
        </ul>
        名称：<input id="nid" type="text" size="10" name="name"/>
        <button οnclick="doAdd()">添加</button>
    </body>
    <script>
        function  doAdd() {
            //获取输入框中的信息
            var name = document.getElementById("nid").value;
            //获取ul元素节点对象
            var ul = document.getElementById("uid");
            //创建一个文本节点
            var tt = document.createTextNode(name);
            //创建一个元素节点
            var li = document.createElement("li"); //相当于创建了一个<li><li>
            //将文本节点添加到li元素节点中
            li.appendChild(tt);
            //将li节点添加到ul中
            //ul.appendChild(li); //后追加
            ul.insertBefore(li,ul.firstChild);//前插入
        }
    </script>
</html>

XML DOM节点的克隆

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavaScript中的XML DOM</title>
        <style>
            #did{width:400px;height:300px;border:1px solid blue;}
            img{width:80px;border:2px solid #fff;margin:2px;}
            img:hover{border:2px solid red;}
        </style>
    </head>
    <body>
        <h1>XML-DOM：节点的克隆</h1>
        <div id="did"></div>
        <div id="mid">
            <img src="./images/11.jpg"/>
            <img src="./images/22.jpg"/>
            <img src="./images/33.jpg"/>
            <img src="./images/44.jpg"/>
        </div>
        <h4>双击图片可实现图片的添加</h4>
    </body>
    <script>
        //获取mid中的所有图片节点
        var list = document.getElementById("mid").getElementsByTagName("img");
        //遍历添加鼠标双击事件
        for (var i =0;i<list.length;i++){
            list[i].ondblclick = function () {
                //获取did节点
                var did = document.getElementById("did");
                //将当前图片节点克隆一份添加到did元素节点中
                did.appendChild(this.cloneNode());
            }
        }
    </script>
</html>

XML DOM节点的替换

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavaScript中的XML DOM</title>
        <style>
            #did{width:400px;border:1px solid blue;}
            #did img{width:400px;}
            #mid img{width:80px;border:2px solid #fff;margin:2px;}
            #mid img:hover{border:2px solid red;}
        </style>
    </head>
    <body>
        <h1>XML-DOM：节点的替换</h1>
        <div id="did"><img src="./images/11.jpg"/></div>
        <div id="mid">
            <img src="./images/11.jpg"/>
            <img src="./images/22.jpg"/>
            <img src="./images/33.jpg"/>
            <img src="./images/44.jpg"/>
        </div>
        <h4>双击图片可实现图片的替换</h4>
    </body>
    <script>
        //获取id属性值为did的节点对象
        var did = document.getElementById("did");
        //获取id属性值为mid节点中的所有图片img元素节点
        var list = document.getElementById("mid").getElementsByTagName("img");
        //遍历图片节点，并绑定鼠标双击事件
        for (var i=0;i<list.length;i++){
            list[i].ondblclick = function () {
                did.replaceChild(this.cloneNode(),did.firstChild); //子节点替换
            }
        }
    </script>
</html>

XML DOM操作select选项

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavaScript中的XML DOM</title>
        <style>
            select{width:100px;height:200px;border:1px solid #ddd;float:left;}
            div{width:100px;height:200px;float:left;text-align:center;padding-top:50px;}
        </style>
    </head>
    <body>
        <h1>XML DOM 操作-select对象</h1>
        <select id="sid1" size="10" multiple>
            <option value="0">邓丽君</option>
            <option value="1">张国荣</option>
            <option value="2">梅艳芳</option>
            <option value="3">黄家驹</option>
            <option value="4">迈克尔.杰克逊</option>
            <option value="5">姚贝娜</option>
            <option value="6">张雨生</option>
        </select>
        <div>
            <button οnclick="doMove('sid1','sid2')">>></button>
            <br/><br/><br/><br/>
            <button οnclick="doMove('sid2','sid1')"><<</button>
        </div>
        <select id="sid2" size="10" multiple></select>
    </body>
    <script>
        function doMove(d1,d2) {
            //获取对应的下拉框节点对象
            var selece1 = document.getElementById(d1);
            var selece2 = document.getElementById(d2);
            //获取第一个下拉框中的所有option下拉项节点对象
            var list = selece1.getElementsByTagName("option");
            //遍历并判断是否选中
            for (var i=0;i<list.length;i++){
                if (list[i].selected){
                    list[i].selected = false;
                    selece2.appendChild(list[i]);//使用XML DOM移动下拉项
                    i--;
                }
            }
        }
    </script>
</html>