Dom

祝愿墙

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            margin: 0 auto;
            padding: 0px;
            font-size: 12px;
            background: url(image/bg.gif) repeat center 36px;
            text-align: center;
            background-color: #c30230;
        }
        #content {
            margin: 0 auto;
            width: 960px;
            background: url(image/content_bg.jpg) no-repeat left top;
            height: 627px;
            position: relative;
        }

        #content .tip1, #content .tip2, #content .tip3, #content .tip4, #content .tip5, #content .tip6, #content .tip7, #content .tip8 {
            position: absolute;
            width: 227px;
            left: 200px;
            top: 100px;
        }

        #content .tip1 .tip_h {
            background: url(image/tip1_h.gif) no-repeat left top;
        }

        #content .tip1 .tip_h, #content .tip2 .tip_h, #content .tip3 .tip_h, #content .tip4 .tip_h, #content .tip5 .tip_h, #content .tip6 .tip_h, #content .tip7 .tip_h, #content .tip8 .tip_h {
            width: 227px;
            padding-top: 45px;
            height: 23px;
            text-align: left;
            cursor: move;
        }
        #content .tip1 .tip_c {
            background: url(image/tip1_c.gif) repeat-y;
        }

        #content .tip1 .tip_c, #content .tip2 .tip_c, #content .tip3 .tip_c, #content .tip4 .tip_c, #content .tip5 .tip_c, #content .tip6 .tip_c, #content .tip7 .tip_c, #content .tip8 .tip_c {
            width: 200px;
            padding-left: 12px;
            padding-right: 15px;
            min-height: 40px;
            text-align: left;
            line-height: 20px;
            max-height: 160px;
            word-wrap: break-word;
            word-break: break-all;
            overflow: hidden;
        }

        #content .tip1 .tip_f {
            background: url(image/tip1_f.gif) no-repeat left top;
        }

        #content .tip1 .tip_f, #content .tip2 .tip_f, #content .tip3 .tip_f, #content .tip4 .tip_f, #content .tip5 .tip_f, #content .tip6 .tip_f, #content .tip7 .tip_f, #content .tip8 .tip_f {
            width: 227px;
            height: 53px;
            padding-top: 20px;
        }
        #content .close, #content .close2 {
            float: left;
            font-size: 12px;
            cursor: pointer;
            color: #000000;
        }
        .clr {
            clear: both;
            overflow: auto;
            display: block;
            height: 0px;
        }
        #content .icon {
            float: left;
            width: 35px;
            padding-left: 15px;
            height: 35px;
            text-align: center;
        }
        #content .name {
            float: right;
            padding-right: 15px;
            text-align: right;
            font-size: 14px;
            line-height: 35px;
            color: #C0F;
        }
        #content .num {
            float: left;
            padding-left: 7px;
            width: 195px;
        }
    </style>
</head>
<body>
<!--纸条墙-->
<div id="content">
    <!--纸条-->
    <div class="tip1" id="tip" >
        <div class="tip_h" title="双击关闭纸条">
            <div class="num">第[49568]条 2016-07-7 22:51:52</div>
            <div class="close" title="关闭纸条" >×</div>
            <div class="clr"></div>
        </div>
        <div class="tip_c">
            普天同庆,天下大同!
        </div>
        <div class="tip_f">
            <div class="icon">
                <img src="image/bpic_1.gif" alt="" title="">
            </div>
            <div class="name">不愿意透露姓名的吕先生</div>
            <div class="clr"></div>
        </div>
    </div>
</div>

<script>
    //需求:克隆盒子,然后随机位置,点击纸条的时候压住其他的纸条。
    //思路:获取纸条,克隆,随机数值绑定到纸条上,添加到父盒子中,然后绑定事件层级最高。
    //步骤:
    //1.获取纸条,克隆
    //2.随机数值绑定到纸条上
    //3.添加到父盒子中
    //4.然后绑定事件层级最高

    //0.创建多张纸条
    for(var i=1;i<=10;i++){
        //1.获取纸条,克隆
        var tip = document.getElementById("tip");
        var content = document.getElementById("content");
        var newTip = tip.cloneNode(true);
        //问题:id问题。
        newTip.id = newTip.id+i;
        //2.随机数值绑定到纸条上(top不要超过400,left不要超过700)
        var topValue = parseInt(Math.random()*400);//(取值是0-1,那么乘以400,取值就是0-400)
        var leftValue = parseInt(Math.random()*700);//小数取整
        newTip.style.top = topValue+"px";
        newTip.style.left = leftValue+"px";
        //3.添加到父盒子中
        content.appendChild(newTip);

        //4.然后绑定事件层级最高
        newTip.onclick = fn;
    }
    //tip本身有问题,没有绑定事件。(1.删除。   2.在绑定一次)
    tip.onclick = fn;
//    tip.parentNode.removeChild(tip);
    //获取所有类名叫做的tip1标签,然后绑定事件。
    var index = 1;
    function fn() {
        //计数器
        this.style.zIndex = index;
        index++;
    }

</script>



</body>
</html>

元素的操作

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<ul>
    <li id="li1">我是参照标签</li>
</ul>

<script>
    //document.write();不常用,因为容易覆盖原来的页面。
    //innerHTML;用的比较多。绑定属性和内容比较方便。(节点套节点)
    //document.createElement;也是比较多的,指定数量的时候一般用它。

    var ul = document.getElementsByTagName("ul")[0];
    var li1 = document.getElementById("li1");

    //创建,添加,删除,替换
    var li2 = document.createElement("li");
    li2.innerText = "我是createElement创建的标签,用的是appendChild的方法添加的";
    ul.appendChild(li2);
    //用insertBefore添加
    var li3 = document.createElement("li");
    li3.innerText = "我是createElement创建的标签,用的是insertBefore的方法添加的"
    //父节点.insertBefore(新节点,参照节点);
    ul.insertBefore(li3,li1);


    //删除,替换
    ul.removeChild(li3);
    //父节点.replaceChild(newNode,oldNode);
    ul.replaceChild(li3,li2);

    //克隆node.cloneNode(true);深层复制。
    for(var i=0;i<=3;i++){
        var newLi = li3.cloneNode(true);
        ul.appendChild(newLi);
    }


</script>
</body>
</html>

创建列表高亮显示美女

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        li {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <button>创建列表</button>
    <ul></ul>

    <script>
        //需求:点击列表,添加四大美女,然后鼠标放到谁上面,谁高亮显示。
        //思路:创建一个数组,添加内容。利用for循环穿件li标签在添加内容,高亮显示。
        //步骤:(指定多少个元素的创建最好用for循环)
        //老三步
        var btn = document.getElementsByTagName("button")[0];
        //获取相关元素并定义内容
        var arr = ["昭君出塞","西施浣纱","贵妃醉酒","貂蝉拜月"];
        var ul = document.getElementsByTagName("ul")[0];
        btn.onclick = function () {
//            ul.innerHTML = "";
            for(var i=0;i<arr.length;i++){
                //创建li元素
                var newLi = document.createElement("li");
//                newLi.innerHTML += "<li>"+arr[i]+"</li>";
                //添加到ul中
                ul.appendChild(newLi);
            }
            //获取所有的li标签然后,为他绑定事件,排他思想,高亮显示
            var liArr = ul.children;
            //为所有的li绑定事件
            for(var i=0;i<liArr.length;i++){
                liArr[i].onmouseover = function () {
                    //排他思想,高亮显示
                    for(var j=0;j<liArr.length;j++){
                        liArr[j].style.backgroundColor = "";
                    }
                    this.style.backgroundColor = "red";
                }
            }
        }


    </script>


</body>
</html>

选择水果

选择水果

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        select {
            width: 170px;
            height: 200px;
            font-size: 16px;
            background-color: #a4ff43;
        }
    </style>
</head>
<body>
    <select name="" id="sel1" size="10" multiple>
        <option value="0">香蕉</option>
        <option value="1">苹果</option>
        <option value="2">鸭梨</option>
        <option value="3">葡萄</option>
    </select>
    <input type="button" value=">>>"/>
    <input type="button" value="<<<"/>
    <input type="button" value=">"/>
    <input type="button" value="<"/>
    <select name="" id="sel2" size="10" multiple>

    </select>

    <script>
        //需求1:点击>>>和<<<两个按钮,所有的子元素都跑到对方的标签中。

        var sel1 = document.getElementById("sel1");
        var sel2 = document.getElementById("sel2");
        var inpArr = document.getElementsByTagName("input");

        //如果不带参数,我们可以直接绑定一个函数名。但是因为带有参数,所以我们需要匿名函数去调用这个函数。
        inpArr[0].onclick = function () {
            fn1(sel1,sel2);
        }
        inpArr[1].onclick = function () {
            fn1(sel2,sel1);
        }
        inpArr[2].onclick = function () {
            fn2(sel1,sel2);
        }
        inpArr[3].onclick = function () {
            fn2(sel2,sel1);
        }
        //封装的时候要注意,第一个按钮先获取的是sel1,第二个按钮先获取的是sel2;
        function fn1(ele1,ele2) {
            var arr = ele1.children;
            for(var i=arr.length-1;i>=0;i--){
                ele2.appendChild(arr[0]);
            }
        }
        //把sel1和sel2设置成两个形参,通过调用的时候先后传递达成不一样的需求
        function fn2(ele1,ele2) {
            var arr = ele1.children;
            for(var i=arr.length-1;i>=0;i--){
                if(arr[i].selected === true){
                    arr[i].selected = false;
                    ele2.appendChild(arr[i]);
                }
            }
        }


    </script>


</body>
</html>




<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        select {
            width: 150px;
            height: 200px;
            background-color: #7bff68;
        }
    </style>
</head>
<body>
<select size="10" name="aaa" id="sel1" multiple="multiple">
    <option value="0">1香蕉</option>
    <option value="1">2苹果</option>
    <option value="2">3大鸭梨</option>
    <option value="3">4草莓</option>
</select>

<input type="button" value=">>>"/>
<input type="button" value="<<<"/>
<input type="button" value=">"/>
<input type="button" value="<"/>

<select size="10" name="bbb" id="sel2" multiple="multiple">

</select>

<script>
    //需求:点击按钮把对应的选中项移动到另一侧。
    //技术点:如果移动单一的选项,那么看看哪个选项是有selected的。
            //如果移动所有的选项,那么直接把sel1中的所有选项放入sel2中。

    //步骤:
    //1.获取事件源和相关元素
    //2.绑定事件
    //3.书写事件驱动程序

    //步骤:
    //1.获取事件源和相关元素
    var sel1 = document.getElementById("sel1");
    var sel2 = document.getElementById("sel2");
    var inpArr = document.getElementsByTagName("input");

    //2.绑定事件(push和appendChild用法相似:但是一个是控制数组,一个是控制元素节点)
    inpArr[0].onclick = function () {
        var optArr = sel1.children;
        for(var i=0;i<optArr.length;){
            sel2.appendChild(optArr[i]);
        }
    }

    //为第二个按钮绑定事件
    inpArr[1].onclick = function () {
        var optArr = sel2.children;
        for(var i=0;i<optArr.length;){
            sel1.appendChild(optArr[i]);
        }
    }
    inpArr[2].onclick = function () {
        var optArr = sel1.children;
        for(var i=optArr.length-1;i>=0;i--){
            if(optArr[i].selected==true){
                optArr[i].selected=false;
                sel2.appendChild(optArr[i]);
            }
        }
        //获取sel2中的子元素变成真数组,然后排序
        var aaa = Array.from(sel2.children).sort(function (a,b) {
            return a.value-b.value;
        });
        //删除素有子元素
        for(var i=0;i<sel2.children.length;i++){
            sel2.removeChild(sel2.children[i]);
        }
        //把排好序的数组添加到sel2中
        for(var i=0;i<aaa.length;i++){
            sel2.appendChild(aaa[i]);
        }
    }
    inpArr[3].onclick = function () {
        var optArr = sel2.children;
        for(var i=optArr.length-1;i>=0;i--){
            if(optArr[i].selected==true){
                optArr[i].selected=false;
                sel1.appendChild(optArr[i]);
            }
        }
        var aaa = Array.from(sel1.children).sort(function (a,b) {
            return a.value-b.value;
        });
        for(var i=0;i<sel1.children.length;i++){
            sel1.removeChild(sel1.children[i]);
        }
        for(var i=0;i<aaa.length;i++){
            sel1.appendChild(aaa[i]);
        }
    }
</script>

</body>
</html>

在线用户

在线用户

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            word-wrap: break-word;
        }
        .wp {
            width: 730px;
            margin: 0px auto;
        }
        .mtn {
            margin-top: 5px!important;
        }
        #ct .frame {
            margin: 0;
            border: none;
        }

        .xfs_2 .frame-title, .xfs_2 .frametitle, .xfs_2 .tab-title {
            background-color: #A90000;
            background-position: 0 -99px;
        }
        .xfs .frame-title, .xfs .frametitle, .xfs .tab-title, .xfs .frame-title a, .xfs .frametitle a, .xfs .tab-title a {
            color: #FFF!important;
        }

        .xfs .frame-title, .xfs .frametitle, .xfs .tab-title {
            border: none;
            background: transparent url(images/mu.png) repeat-x 0 95;
        }

        .title {
            padding: 0 10px;
            height: 32px;
            font-size: 14px;
            font-weight: 700;
            line-height: 32px;
            overflow: hidden;
        }
        .block {
            margin: 10px 10px 0;
        }
        ul, menu, dir {
            display: block;
            list-style: none;
            -webkit-margin-before: 1em;
            -webkit-margin-after: 1em;
            -webkit-margin-start: 0px;
            -webkit-margin-end: 0px;
            -webkit-padding-start: 25px;
        }
        .mls li {
            padding: 0 0 5px;
            width: 66px;
            height: 85px;
        }
        .ml li {
            float: left;
            text-align: center;
            overflow: hidden;
        }
        a {
            color: #333;
            text-decoration: none;
            font: 12px/1.5 Tahoma,'Microsoft Yahei','Simsun';
        }
        .mls p {
            margin-top: 5px;
        }
        .ml p, .ml span {
            display: block;
            width: 100%;
            height: 20px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .mls img {
            width: 48px;
            height: 48px;
        }
        .ml img {
            display: block;
            margin: 0 auto;
        }
        a img {
            border: none;
        }
    </style>
</head>
<body>

    <div class="wp mtn">
        <div id="diy3" class="area"><div id="frameipq7f2" class="xfs xfs_2 frame move-span cl frame-1"><div
                class="title frame-title"><span class="titletext">当前在线用户</span></div><div id="frameipq7f2_left"
                                                                                          class="column frame-1-c"><div
                id="frameipq7f2_left_temp" class="move-span temp"></div><div id="portal_block_695"
                                                                             class="block move-span"><div
                id="portal_block_695_content" class="dxb_bc">
            <div class="module cl ml mls" id="users">
                <ul>
                    <!--<li>-->
                        <!--<a href="#" target="_blank"><img src="images/noavatar_small.gif" width="48" height="48" alt="沉眠楚人"></a>-->
                        <!--<p><a href="#" title="沉眠楚人" target="_blank">沉眠楚人</a></p>-->
                    <!--</li>-->

                </ul>
            </div>
        </div></div></div></div></div>
    </div>

<script>
        //模拟从服务器获取数据
        var users = [
            {"name": "tdxy01","icon":"images/noavatar_small.gif"},
            {"name": "沉眠楚人","icon":"images/noavatar_small.gif"},
            {"name": "爱上karina","icon":"images/75_avatar_small.jpg"},
            {"name": "tdxy01","icon":"images/89_avatar_small.jpg"},
            {"name": "today","icon":"images/noavatar_small.gif"},
            {"name": "hlg","icon":"images/noavatar_small.gif"},
            {"name": "itcast","icon":"images/noavatar_small.gif"},
            {"name": "heima","icon":"images/noavatar_small.gif"},
            {"name": "nima","icon":"images/noavatar_small.gif"},
            {"name": "gege","icon":"images/noavatar_small.gif"},
            {"name": "nimei","icon":"images/noavatar_small.gif"},
            {"name": "goodman","icon":"images/noavatar_small.gif"},
            {"name": "haoren","icon":"images/noavatar_small.gif"},
            {"name": "yuanxiaojie","icon":"images/noavatar_small.gif"},
            {"name": "zhengyue","icon":"images/noavatar_small.gif"},
            {"name": "qishi","icon":"images/noavatar_small.gif"},
            {"name": "qqtang","icon":"images/noavatar_small.gif"},
            {"name": "wawawa","icon":"images/noavatar_small.gif"},
            {"name": "haha","icon":"images/noavatar_small.gif"},
            {"name": "robot","icon":"images/noavatar_small.gif"},
            {"name": "XFlute","icon":"images/noavatar_small.gif"},
            {"name": "lovmilan","icon":"images/noavatar_small.gif"},
            {"name": "johnny670","icon":"images/noavatar_small.gif"},
            {"name": "xiaobinbin02","icon":"images/noavatar_small.gif"},
            {"name": "axxxxx","icon":"images/noavatar_small.gif"}
        ];


        //需求:页面显示所有的在线用户。
        //思路:模拟服务器获取数据(数组中装着json).获取ul,把ul的innerHTML属性获取到,然后不间断的往innerHTML属性中赋值。
                //赋值要求:li标签的内容。
        //步骤:(获取元素)
        var div = document.getElementById("users");
        var ul = div.firstElementChild || div.firstChild;
//        var ul = div.children[0];

        //1.模拟服务器获取数据(定义数组),通过循环添加元素(定义for)
        //数组中有多少元素,我们就创建多少个li标签
        for(var i=0;i<users.length;i++){
            //2.模拟实验的操作方式。
            ul.innerHTML += '<li>'+
                                '<a href="#" target="blank"><img src="'+users[i].icon+'" width="48" height="48" alt="'+users[i].name+'"></a>'+
                                '<p><a href="#" title="'+users[i].name+'" target="_blank">'+users[i].name+'</a></p>'+
                            '</li>';
        }


//       var str = "b";
//        var str2 = "a"+str+"c";
        //实验;
        //获取ul
//    var div = document.getElementById("users");
//    var ul = div.firstElementChild || div.firstChild;
//    var ul = div.children[0];

    //往ul中添加li元素以及li元素中的内容
//        ul.innerHTML += '<li>'+
//                        '<a href="#" target="_blank"><img src="images/noavatar_small.gif" width="48" height="48" alt="沉眠楚人"></a>'+
//                        '<p><a href="#" title="沉眠楚人" target="_blank">沉眠楚人</a></p>'+
//                    '</li>';
//        ul.innerHTML += '<li>'+
//                '<a href="#" target="_blank"><img src="images/noavatar_small.gif" width="48" height="48" alt="沉眠楚人"></a>'+
//                '<p><a href="#" title="沉眠楚人" target="_blank">沉眠楚人</a></p>'+
//                '</li>';
//        ul.innerHTML += '<li>'+
//                '<a href="#" target="_blank"><img src="images/noavatar_small.gif" width="48" height="48" alt="沉眠楚人"></a>'+
//                '<p><a href="#" title="沉眠楚人" target="_blank">沉眠楚人</a></p>'+
//                '</li>';
// str = 'a'+
//          'b'+
//          'c'+
//       'd';

    </script>
</body>
</html>

模拟百度搜索

模拟百度所搜

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .box {
            width: 500px;
            margin: 200px auto;
        }
        ul {
            width: 392px;
            padding: 5px;
            list-style: none;
            border: 1px solid red;
        }
        li:hover {
            background-color: red;
        }
        input {
            width: 400px;
        }
        button {
            width: 70px;
        }
    </style>
</head>
<body>
    <div class="box">
        <input type="text"/>
        <button>索搜</button>
        <!--<ul>-->
            <!--<li>aaaa</li>-->
            <!--<li>bbb</li>-->
            <!--<li>ccc</li>-->
        <!--</ul>-->
    </div>

    <script>
        //需求:输入内容(输入事件,键盘弹起事件),模拟服务器获取内容,创建ul,并在其中显示。
        //步骤:
        //1.获取事件源
        //2.绑定事件
        //3.书写事件驱动程序



        //1.获取事件源
        //模拟服务器获取内容
        var arr = ["a","ab","abc","abcd","aa","aaa"];
        var box = document.getElementsByTagName("div")[0];
        var inp = box.children[0];
//        var inp = document.getElementsByTagName("input")[0];

        //2.绑定事件(输入内容(输入事件,键盘弹起事件))
        inp.onkeyup = function () {
            //创建一个字符串,里面添加满了li和对应的内容。
            var newArr = [];
            //我要从数组中查询以input中输入内容为开头的信息,然后添加到li中,转换成字符串。
            //遍历老数组,然后判断每一项,哪项是以input内容为开头的穿件一个li,塞进去。
            for(var i=0;i<arr.length;i++){
                //判断当前项,是否已input内容为开头
                //获取输入内容input标签的value属性值。
                var val = this.value;
                if(arr[i].indexOf(val)===0){
                    newArr.push("<li>"+arr[i]+"</li>");
                }
            }
            var str = newArr.join("");

            //Bug1.每次创建新的ul之前,先删除旧的ul
            //只有ul存在我们才能删除ul
//            var aaa = box.getElementsByTagName("ul")[0];
            if(box.children[2]){
                 //只要存在,那么就是object,object类型的数据,只要不是null,对应的boolean值都是true;
                box.removeChild(box.children[2]);
            }

            //Bug2.如果input中内容为空,那么久不能在生成ul了。
            //如果input为空,那么切断函数

            //Bug3.如果arr数组中没有以input为开头的元素。那么切断函数
            //newArr的长度为0,就能证明以input内容为开头的元素,在arr中不存在
            if(this.value.length === 0 || newArr.length === 0){
                //切断函数(不在产生新的ul)
                return;
            }

            //3.书写事件驱动程序
            var ul = document.createElement("ul");
            //把创建好的内容添加到ul中。
            ul.innerHTML = str;
            box.appendChild(ul);
        }





    </script>


</body>
</html>

判断字符以某个字符串开头


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


<script>

    var str = "abcdefg";

    //判断str是否以a为开头?(给定字符串然后他的索引值为0)
    var num = str.indexOf("ab");
    //只有返回值为0,那么字符串才是以参数为开头
    //如果查询不到,返回值为-1;
    alert(num);

</script>

</body>
</html>

表格操作

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <table>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>

    <script>

//        rows:返回值是数组    (只读,table和textarea能用)
        var tab = document.getElementsByTagName("table")[0];

////        insertRow()         (只有table能调用)
////        var tr = document.createElement("tr");
//        var aaa = tab.insertRow(2);//指定索引值之前插入
////        deleteRow()       (只有table能调用)
//        tab.deleteRow(2);
//
////        console.log(aaa == tr);
//        console.log(aaa);
//        console.log(tab.rows);

////        cells                 (只读,tr和textarea能用)
//        var ce = tab.children[0];
//        console.log(ce.children[0].cells);
////        insertCell()        (只有tr能调用)
//        ce.children[0].insertCell(0);
//
////        deleteCell()        (只有tr能调用)
//        ce.children[0].deleteCell(0);




    </script>


</body>
</html>


window对象操作


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>

    //window是bom的顶级对象。通常情况下,可以省略
//    window.alert(1);
//    alert(2);
//    prompt();
//    confirm();


//    //成员变量也是window的一个属性而已
//    var aaa = 1;
//    alert(aaa);
//    alert(window.aaa);
//    alert(aaa === window.aaa);

    //自定义函数也是window的一个方法
    function fn(){
        console.log(1);
        console.log(1);
        console.log(1);
        console.log(1);
    }

    console.log(window.fn);


</script>
</body>
</html>

BOM的内置方法对象


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <a href="javascript:;">点击我可以穿件一个新的页面</a>
    <a href="javascript:;">点击我可以关闭本页面</a>
    <div>点击我跳转到百度</div>
    <script>
        //新窗口 = window.open(地址,是否开新窗口,新窗口的参数);
        var a1 = document.getElementsByTagName("a")[0];
//        var a2 = document.getElementsByTagName("a")[1];
        a1.onclick = function () {
//            window.open("http://www.jd.com","_blank");
            var json = {"name":"helloworld","fullscreen":"no","location":"no","width":"100px","height":"100px","top":"100px","left":"100px"};
//            var newWin = window.open("demo.html","_self",json);
            var newWin = window.open("demo.html","_blank",json);
            newWin.moveTo(500,500);

//            name:新窗口的名称,可以为空
//            featurse:属性控制字符串,在此控制窗口的各种属性,属性之间以逗号隔开。
//        fullscreen= { yes/no/1/0 } 是否全屏,默认no
//        channelmode= { yes/no/1/0 } 是否显示频道栏,默认no
//        toolbar= { yes/no/1/0 } 是否显示工具条,默认no
//        location= { yes/no/1/0 } 是否显示地址栏,默认no
//        directories = { yes/no/1/0 } 是否显示转向按钮,默认no
//        status= { yes/no/1/0 } 是否显示窗口状态条,默认no
//        menubar= { yes/no/1/0 } 是否显示菜单,默认no
//        scrollbars= { yes/no/1/0 } 是否显示滚动条,默认yes
//        resizable= { yes/no/1/0 } 是否窗口可调整大小,默认no
//        width=number 窗口宽度(像素单位)
//        height=number 窗口高度(像素单位)
//        top=number 窗口离屏幕顶部距离(像素单位)
//        left=number 窗口离屏幕左边距离(像素单位)
        }
//
//        //关闭本页面
//        a2.onclick = function () {
//            window.close();
//        }


    var div = document.getElementsByTagName("div")[0];
        div.onclick = function () {
            location.href = "http://www.baidu.com";
//            window.open("http://www.baidu.com","_blank");
        }
//        console.log(location.href    )    //
//        console.log(location.hash    )    //    返回url中#后面的内容,包含#
//        console.log(location.host    )    // 主机名,包括端口
//        console.log(location.hostname)    // 主机名
//        console.log(location.pathname)    // url中的路径部分
//        console.log(location.protocol)    // 协议 一般是http、https
//        console.log(location.search   )     // 查询字符串


        //navigator
//        console.log(navigator.userAgent);
//        console.log(navigator.platform);

        //回退
        //history.go(-1);
//        history.back();


    </script>

</body>
</html>

体验定时器


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>

    //setInterval();   setTimeout();
//    var num = 0;
//    setInterval(function () {
//        console.log(num);
//        num++;
//    },1000);


    //用途:setInterval()循环定时器;周而复始的执行(循环执行)
    //用途:setTimeout() 炸弹定时器;用完以后立刻报废(只执行一次)


    //定义方法1(匿名函数)
//    setInterval(function () {
//        console.log(1);
//    },1000);


//    //定义方法2
//    setInterval(fn,1000);
//    function fn(){
//        console.log(2);
//    }

    //定义方法3
//    setInterval("fn(3)",1000);
//    function fn(aaa){
//        console.log(aaa);
//    }

</script>
</body>
</html>

定时器的高级


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <script>
        //返回值,清除定时器。
        var num = 1;

        //setInterval他的返回值就是定时器的名字
        var timer = setInterval(function () {
            console.log(num);
            num++
            if(num===10){
                //如何停止定时器呢???
                clearInterval(timer);
            }
        },500);


    </script>
</body>
</html>

5秒钟关闭广告


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            height: 5000px;
        }
        img {
            position: fixed;
            top: 50%;
            margin-top: -220px;
        }
        .img1 {
            left: 10px;
        }
        .img2 {
            right: 10px;
        }
        div {
            width: 800px;
            margin: 150px auto;
            color: red;
            text-align: center;
            font: 700 40px/50px "simsun";
        }
    </style>
    <script>
        window.onload = function () {
            //获取相关元素
            var imgArr = document.getElementsByTagName("img");
            //设置定时器
            setTimeout(fn,5000);
            function fn(){
                imgArr[0].style.display = "none";
                imgArr[1].style.display = "none";
            }
        }
    </script>
</head>
<body>
    <img class="img1" src="images/1.gif" alt=""/>
    <img class="img2" src="images/2.gif" alt=""/>
    <div>
        我为党国流过血,我为抗战立过功,我要见委座,我要见委座,我要见委座!!!啪...<br>
        我为党国流过血,我为抗战立过功,我要见委座,我要见委座,我要见委座!!!啪...<br>
        我为党国流过血,我为抗战立过功,我要见委座,我要见委座,我要见委座!!!啪...<br>
        我为党国流过血,我为抗战立过功,我要见委座,我要见委座,我要见委座!!!啪...<br>
        我为党国流过血,我为抗战立过功,我要见委座,我要见委座,我要见委座!!!啪...<br>
        我为党国流过血,我为抗战立过功,我要见委座,我要见委座,我要见委座!!!啪...<br>
        我为党国流过血,我为抗战立过功,我要见委座,我要见委座,我要见委座!!!啪...<br>
        我为党国流过血,我为抗战立过功,我要见委座,我要见委座,我要见委座!!!啪...<br>
    </div>

</body>
</html>

模拟京东关闭广告


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .site-nav {
            height: 30px;
            background-color: #ccc;
        }
        .top-banner {
            background-color: blue;
        }
        .w {
            width: 1210px;
            height: 80px;
            background-color: pink;
            margin: 0 auto;
            position: relative;
        }
        .search {
            width: 1210px;
            height: 80px;
            background-color: red;
            margin: 0 auto;
        }
        a {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 25px;
            height: 25px;
            text-align: center;
            line-height: 25px;
            background-color: #000;
            color: #fff;
            text-decoration: none
        }
    </style>
</head>
<body>
    <div class="site-nav"></div>
    <div class="top-banner" style="opacity: 1">
        <div class="w">
            <a href="#">×</a>
        </div>
    </div>
    <div class="search">

        <script>
            //需求:点击关闭按钮,先让top-banner这个盒子透明度变为0,紧接着display:none;
            //步骤:
            //1.获取事件源
            //2.绑定事件
            //3.书写事件驱动程序(定时器,透明度变为0,清除定时器,并隐藏盒子)


            //1.获取事件源
            var topBaner = document.getElementsByClassName("top-banner")[0];
            var a = topBaner.children[0].firstElementChild || topBaner.children[0].firstChild ;
            //定义定时器
            var timer = null;
            //2.绑定事件
            a.onclick = function () {
                //3.书写事件驱动程序(定时器,透明度变为0,清除定时器,并隐藏盒子)
                timer = setInterval(function () {
                    topBaner.style.opacity -= 0.1;
                    if(topBaner.style.opacity<0){
                        topBaner.style.display = "none";
                        clearInterval(timer);
                    }
                },50);
            }


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

Date定义和体验

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    //第一种
    var date1 = new Date();
    console.log(date1);

    //第二种
    var date2 = new Date("2016/09/06 00:00:00");
    console.log(date2);


    //后两种兼容性不好,不推荐使用
    //第三种
    var date3 = new Date('Wed Jan 27 2016 12:00:00 GMT+0800 (中国标准时间)');

    //第四种
    var date4 = new Date(2016, 1, 27);



    console.log(date1.getDate()          )       //获取日 1-31
    console.log(date1.getDay ()          )       //获取星期 0-6(0代表周日)
    console.log(date1.getMonth ()        )       //获取月 0-11(1月从0开始)
    console.log(date1.getFullYear ()     )      //获取完整年份(浏览器都支持)
    console.log(date1.getHours ()        )       // 获取小时 0-23
    console.log(date1.getMinutes ()      )     //获取分钟 0-59
    console.log(date1.getSeconds ()      )     //获取秒  0-59
    console.log(date1.getMilliseconds () )       //获取毫秒 (1s = 1000ms)
    console.log(date1.getTime ()         )      //返回累计毫秒数(从1970/1/1午夜)




    //获取当前时间距离1970/01/01的毫秒值

//    var date11 = Date.now();
//    var date22 = +new Date();
//    var date33 = new Date().getTime();
//    var date44 = new Date().valueOf();
//
//    console.log(date11);
//    console.log(date22);
//    console.log(date33);
//    console.log(date44);

</script>
</body>
</html>

模拟日历

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 800px;
            margin: 200px auto;
            color: red;
            text-align: center;
            font: 600 30px/30px "simsun";
        }
    </style>
</head>
<body>
    <div></div>

    <script>
        //模拟日历
        //需求:每天打开这个页面都能定时显示年月日和星期几
        //步骤:(创建一个当前日期的日期对象,然后获取其中的年月日和星期,赋值给div)
        //1.创建一个当前日期的日期对象
        //2.然后获取其中的年月日和星期
        //3.赋值给div


        //1.创建一个当前日期的日期对象
        var date = new Date();
        //2.然后获取其中的年月日和星期
        var year = date.getFullYear();
        var month = date.getMonth();
        var hao = date.getDate();
        var week = date.getDay();
//        console.log(year+" "+month+" "+hao+" "+week);
        //3.赋值给div
        var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
        var div = document.getElementsByTagName("div")[0];
        div.innerText = "今天是:"+year+"年"+(month+1)+"月"+hao+"日 "+arr[week];


    </script>


</body>
</html>

苹果发布会倒计时

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 1210px;
            margin: 200px auto;
            color: red;
            text-align: center;
            font: 600 30px/30px "simsun";
        }
    </style>
</head>
<body>
    <div></div>

<script>
    var div=document.getElementsByTagName("div")[0];
    var timer = setInterval(fn,1);
    function fn(){
        var nowtime = new Date();
        var future = new Date("2016/09/05 18:23:15");
        var timeSum = future.getTime() - nowtime.getTime();
        var day = parseInt(timeSum/1000/60/60/24);
        var hour = parseInt(timeSum/1000/60/60%24);
        var minu = parseInt(timeSum/1000/60%60);
        var sec = parseInt(timeSum/1000%60);
        var millsec = parseInt(timeSum%1000);
        day=day<10?"0"+day:day;
        hour=hour<10?"0"+hour:hour;
        minu=minu<10?"0"+minu:minu;
        sec=sec<10?"0"+sec:sec;
        if(millsec<10){
            millsec="00"+millsec;
        }else if(millsec<100){
            millsec="0"+millsec;
        }
//
//        console.log(day);
//        console.log(parseInt(timeSum/1000/60/60/24));
        if(timeSum<0){
            div.innerHTML="距离苹果发布会还有00天00小时00分00秒000毫秒";
            clearInterval(timer);
            return;
        }
        div.innerHTML="距离苹果发布会还有"+day+"天"+hour+"小时"+minu+"分"+sec+"秒"+millsec+"毫秒";
    }

</script>
</body>

</html>

string内置对象

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>

    //简单数据类型无法绑定属性和方法
    var str = "abc";

    var strObj = new String("abc");
    strObj.aaa = 111;
    console.log(strObj);
    console.log(typeof strObj);
    console.log(strObj.aaa);

    str.aaa = 111;
    console.log(str.aaa);
    console.log(str.length);
    console.log(str.indexOf("c"));


</script>
</body>
</html>

给索引查字符

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>

    var str = new String("abcd");

//    console.log(str);
//    for(var i=0;i<str.length;i++){
//        console.log(str.charAt(i));
//    }
//    console.log(str.charAt(0));
//    console.log(str.charAt(1));
//    console.log(str.charAt(2));
//    console.log(str.charAt(3));

    //返回unicode中的码表值。
    console.log(str.charCodeAt(0));





</script>
</body>
</html>

打印字符串的占位长度

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
//    sort();   底层用到了charCodeAt();

    var str = "I love my country!我你爱中国!";
    //"我爱你":一汉字占两个字符位。
    //需求:求一个字符串占有几个字符位。
    //思路;如果是英文,站一个字符位,如果不是英文占两个字符位。
    //技术点:判断该字符是否在0-127之间。(在的话是英文,不在是非英文)
    alert(getZFWlength(str));
    alert(str.length);

    function getZFWlength(string){
        //定义一个计数器
        var count = 0;
        for(var i=0;i<string.length;i++){
            //对每一位字符串进行判断,如果Unicode编码在0-127,计数器+1;否则+2
            if(string.charCodeAt(i)<128 && string.charCodeAt(i)>=0 ){
                count++;
            }else{
                count+=2;
            }
        }
        return count;
    }


</script>
</body>
</html>

给字符查索引

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>

    var str = "abcdea";

    //给字符查索引(索引值为0,说明字符串以查询的参数为开头)
    console.log(str.indexOf("c"));
    console.log(str.lastIndexOf("c"));

    console.log(str.indexOf("a"));
    console.log(str.lastIndexOf("a"));


    //了解;数据传递的时候经常需要通过编码后在传递,接收后还需要反编译回来。
    var url = "http://www.itcast.cn?username='aaa'&password='123'";
    console.log(encodeURIComponent(url));
    console.log(decodeURIComponent(encodeURIComponent(url)));


</script>
</body>
</html>

字符串连接和截取


   <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>

    //concat 连接两个字符串返回一个新字符串,并且不会被修改
//    var str1 = "abc";
//    var str2 = "123";
//    var str3 = str1.concat(str2);
//    console.log(str1);
//    console.log(str2);
//    console.log(str3);

    var str = "I love my family!";
    console.log(str);

//    //slice();   跟剧索引值和索引值截取字符串
//    console.log(str.slice(2));//从索引截取到最后
//    console.log(str.slice(2,5));//从索引截,包左不包右
//    console.log(str.slice(-3));//后几个
//    console.log(str.slice(5,2));//空字符串



//    //substr();   跟剧索引值和长度值截取字符串
//    console.log(str.substr(2));//从索引截取到最后
//    console.log(str.substr(2,6));//从索引截,长度个字符串
//    console.log(str.substr(-3));//后几个


//    //substring();   跟剧索引值和索引值截取字符串
//    console.log(str.substring(2));  //从索引截取到最后
//    console.log(str.substring(2,5));//从索引截,长度个字符串
//    console.log(str.substring(-1)); //全部截取
//    console.log(str.substring(5,2));//只能调换

</script>
</body>
</html> 



特殊方法

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>

    //去除前后空格,trim();
//    var str1 = "   a   b   c   ";
//    console.log(str1);
//    console.log(str1.trim());


    //replace()替换
//    var str2 = "Today is fine day,today is fine day a!!!"
//    console.log(str2);
//    console.log(str2.replace(/today/gi,"tomorrow"));


    //字符串变数组split();  无参,是把字符串作为一个元素添加进数组中。空字符串,分隔字符串中每一个字符,分别添加进入数组中
            //指定字符分隔数组:特殊符号将不会出现在数组的任意一个元素中

    var str3 = "关羽|张飞|刘备";

    console.log(str3);
    console.log(str3.split("|"));

</script>
</body>
</html>

大小写和创建标签

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<input type="file"/>

<script>

    var str = "abcdEFG";

    //转换成小写
    console.log(str.toLowerCase());
    //转换成大写
    console.log(str.toUpperCase());

    //校验上传文件格式(图片img/png/jpg/gif)(查找最后一个.截取到最后,判断value属性值)
//    document.getElementsByTagName("input")[0].onchange = function () {
//        alert(this.value);
//    }

    var str = "你好";

    console.log(str.anchor())
    console.log(str.big())
    console.log(str.sub())
    console.log(str.sup())
    console.log(str.link("http://www.baidu.com"));
    console.log(str.bold())


</script>


</body>
</html>

字符串案例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>

//    截取字符串"我爱你中国,我亲爱的母亲",中的"中国,我亲爱的";
    var str1 = "我爱你中国,我亲爱的母亲";
    var index1 = str1.indexOf("中");
    var index2 = str1.indexOf("的");
    console.log(str1.slice(index1,index2+1));

//    "abcoefoxyozzopp"查找字符串中所有o出现的位置
    var str2 = "abcoefoxyozzopp";
    for(var i=0;i<str2.length;i++){
        //如果指定位置的符号=== "o"
        //str2[i]
        if( str2.charAt(i)==="o"){
            console.log(i);
        }
    }

//    把字符串中所有的o替换成!
    console.log(str2);
    console.log(str2.replace(/o/g,"!"));


//    判断一个字符串中出现次数最多的字符,统计这个次数
    //定义一个json,然后判断json中是够有该属性,如果有该属性,那么值+1;否则创建一个该属性,并赋值为1;
    var json = {};
    for(var i=0;i<str2.length;i++){
        //判断:如果有该属性,那么值+1;否则创建一个该属性,并赋值为1;
        var key = str2.charAt(i);
        if(json[key] === undefined){
            json[key] = 1;
        }else{
            json[key] += 1;
        }
    }
    console.log(json);



    //获取json中属性值最大的选项
//    var maxKey = "";
//    var maxValue = 0;
//    for(var k in json){
////        if(maxKey == ""){
////            maxKey = k;
////            maxValue = json[k];
////        }else{
//            if(json[k]>maxValue){
//                maxKey = k;
//                maxValue = json[k];
//            }
////        }
//    }
//    console.log(maxKey);
//    console.log(maxValue);

</script>
</body>
</html>

获取节点元素的封装

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 5px;
        }
    </style>
</head>
<body>

    <div></div>
    <div class="box"></div>
    <div id="box"></div>
    <div class="box"></div>
    <div></div>



<script>
    //需求:一个方法,包含三种获取元素节点的功能。通过传递参数的不同,来决定使用哪种获取方法。
        //例如: "ibox":  getElementById();
        //例如: "cbox":  getElementsByClassName();
        //例如: "tbox":  getElementsByTagName();
                //化简:使用类似css获取的方式表明使用哪种方式来获取:
                    //   "#box"  getElementById();
                    //   ".box"  getElementsByClassName();
                    //   "div"   getElementsByTagName();
    //验证:
    getEle("#box").style.backgroundColor = "red";

    var claArr = getEle(".box");
    for(var i=0;i<claArr.length;i++){
        claArr[i].style.backgroundColor = "yellow";
    }

    var divArr = getEle("div");
    for(var i=0;i<divArr.length;i++){
        divArr[i].style.border = "2px solid #000";
    }

    //思路:封装一个方法,然后判断第一个字符,如果是#用id,如果是.用className,否则用tagName
    //步骤:
    //1.封装一个方法,获取参数的第一个字符
    //2.判断第一个字符是#走第一个逻辑,是.走第二个逻辑,如果都不是那么走最后一个逻辑
    //3.隐藏:

    //1.封装一个方法,获取参数的第一个字符
    function getEle(str){
        //2.判断第一个字符是#走第一个逻辑,是.走第二个逻辑,如果都不是那么走最后一个逻辑
        var str1 = str.charAt(0);
        if(str1==="#"){
            //3.隐藏:
            //返回获取的元素。(因为传递过来的值带有#,所以我们要从第二项开始截取并搜索)
            return document.getElementById(str.slice(1));
        }else if(str1 === "."){
            return document.getElementsByClassName(str.slice(1));
        }else{
            return document.getElementsByTagName(str);
        }
    }

</script>
</body>
</html>

获取节点元素的封装

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 5px;
        }
    </style>
</head>
<body>

    <div></div>
    <div class="box"></div>
    <div id="box"></div>
    <div class="box"></div>
    <div></div>



<script>
    //需求:一个方法,包含三种获取元素节点的功能。通过传递参数的不同,来决定使用哪种获取方法。
        //例如: "ibox":  getElementById();
        //例如: "cbox":  getElementsByClassName();
        //例如: "tbox":  getElementsByTagName();
                //化简:使用类似css获取的方式表明使用哪种方式来获取:
                    //   "#box"  getElementById();
                    //   ".box"  getElementsByClassName();
                    //   "div"   getElementsByTagName();
    //验证:
    getEle("#box").style.backgroundColor = "red";

    var claArr = getEle(".box");
    for(var i=0;i<claArr.length;i++){
        claArr[i].style.backgroundColor = "yellow";
    }

    var divArr = getEle("div");
    for(var i=0;i<divArr.length;i++){
        divArr[i].style.border = "2px solid #000";
    }

    //思路:封装一个方法,然后判断第一个字符,如果是#用id,如果是.用className,否则用tagName
    //步骤:
    //1.封装一个方法,获取参数的第一个字符
    //2.判断第一个字符是#走第一个逻辑,是.走第二个逻辑,如果都不是那么走最后一个逻辑
    //3.隐藏:

    //1.封装一个方法,获取参数的第一个字符
    function getEle(str){
        //2.判断第一个字符是#走第一个逻辑,是.走第二个逻辑,如果都不是那么走最后一个逻辑
        var str1 = str.charAt(0);
        if(str1==="#"){
            //3.隐藏:
            //返回获取的元素。(因为传递过来的值带有#,所以我们要从第二项开始截取并搜索)
            return document.getElementById(str.slice(1));
        }else if(str1 === "."){
            return document.getElementsByClassName(str.slice(1));
        }else{
            return document.getElementsByTagName(str);
        }
    }

</script>
</body>
</html>

Math对象

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>

    //
//    var num = 1.4;
    var num = -0.6;

    console.log(Math.abs(num));        //取绝对值
    console.log(Math.floor(num));      //向下取整      //向小取
    console.log(Math.ceil(num));       //向上取整      //向大取
    console.log(Math.round(num));      //四舍五入取整   //正数四舍五入,负数五舍六入
    console.log(Math.random());        //随机数0-1





</script>
</body>
</html>

事件的概述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <button>赋诗</button>


<script>

    var btn = document.getElementsByTagName("button")[0];

    //第一种事件绑定的方法容易被层叠。
//    btn.onclick = function () {
//        console.log("九尺龙泉万卷书,上天生我意何如。");
//    }
//
//    btn.onclick = function () {
//        console.log("不能报国平天下,枉为男儿大丈夫。");
//    }


    //addEventListener: 事件监听器。 原事件被执行的时候,后面绑定的事件照样被执行
    //第二种事件绑定的方法不会出现层叠。(更适合团队开发)
    btn.addEventListener("click",fn1);
    btn.addEventListener("click",fn2);
    function fn1(){
        console.log("九尺龙泉万卷书,上天生我意何如。");
    }
    function fn2(){
        console.log("不能报国平天下,枉为男儿大丈夫。");
    }

    //调用这是事件源,参数1事件名(不带on) ,参数2事件名(执行函数)           参数3事件名(捕获或者冒泡)


</script>
</body>
</html>

事件的监听原理

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <button>赋诗</button>


<script>

    var btn = document.getElementsByTagName("button")[0];

//    btn.addEventListener("click",fn1);
//    btn.addEventListener("click",fn2);
    fn("click",fn1,btn);
    fn("click",fn2,btn);
    fn("click",fn3,btn);


    function fn1(){
        console.log("九尺龙泉万卷书,上天生我意何如。");
    }
    function fn2(){
        console.log("不能报国平天下,枉为男儿大丈夫。");
    }
    function fn3(){
        console.log("111111。");
    }

    //原理(了解)(自己封装一个)(click)
    function fn(str,fn,ele){
        //判断位置要注意:如果进入绑定事件本身,那么该事件已经本绑定了
        //所以获取旧的事件必须在新的事件绑定之前
        var oldEvent = ele["on"+str];
        ele["on"+str] = function () {
            //不能直接执行函数,因为我们还不知道以前有没有绑定我同样的事件
            //进行判断,如果以前有过绑定事件,那么把以前的执行完毕在执行现在的事件,如果没有就直接执行
            //如果没有被定义过事件该事件源的该事件属性应该是null对应的boolean值是false
            //如果已经定义过事件该事件源的该事件属性应该是function本身对应的boolean值是true
            if(oldEvent){
                //因为oldEvent本身他就是函数本身,那么后面加一个();就是执行函数
                oldEvent();
                fn();
            }else{
                //没有绑定过事件
                fn();
            }
        }
    }

</script>
</body>
</html>

事件添加的兼容写法

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <button>赋诗</button>


<script>

    var btn = document.getElementsByTagName("button")[0];

    //火狐谷歌IE9+支持addEventListener
//    btn.addEventListener("click",fn1);
//    btn.addEventListener("click",fn2);

    //IE678支持attachEvent
//    btn.attachEvent("onclick",fn1);
//    btn.attachEvent("onclick",fn2);

    //兼容写法
    EventListen = {
        addEvent: function (ele,fn,str) {
            //通过判断调用的方式兼容IE678
            //判断浏览器是否支持该方法,如果支持那么调用,如果不支持换其他方法
            if(ele.addEventListener){
                //直接调用
                ele.addEventListener(str,fn);
            }else if(ele.attachEvent){
                ele.attachEvent("on"+str,fn);
            }else{
                //在addEventListener和attachEvent都不存在的情况下,用此代码
                ele["on"+str] = fn;
            }
        }
    }


    EventListen.addEvent(btn,fn1,"click")
    EventListen.addEvent(btn,fn2,"click")



    function fn1(){
        console.log("九尺龙泉万卷书,上天生我意何如。");
    }
    function fn2(){
        console.log("不能报国平天下,枉为男儿大丈夫。");
    }

</script>
</body>
</html>

事件绑定的兼容写法

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <button>赋诗</button>


<script>

    var btn = document.getElementsByTagName("button")[0];

    EventListen = {
        addEvent: function (ele,fn,str) {
            //通过判断调用的方式兼容IE678
            //判断浏览器是否支持该方法,如果支持那么调用,如果不支持换其他方法
            if(ele.addEventListener){
                //直接调用
                ele.addEventListener(str,fn);
            }else if(ele.attachEvent){
                ele.attachEvent("on"+str,fn);
            }else{
                //在addEventListener和attachEvent都不存在的情况下,用此代码
                ele["on"+str] = fn;
            }
        },
        removeEvent: function (ele,fn,str) {
            if(ele.removeEventListener){
                ele.removeEventListener(str,fn);
            }else if(ele.detachEvent){
                ele.detachEvent("on"+str,fn);
            }else{
                ele["on"+str] = null;
            }
        }
    }

//    btn.addEventListener("click",fn);
    EventListen.addEvent(btn,fn,"click");

    EventListen.removeEvent(btn,fn,"click");

    function fn(){
        alert(1);
    }
    //第一种
//    btn.onclick = function () {
//        alert(1);
//    }


//    btn.addEventListener("click",fn);
//    btn.attachEvent("onclick",fn);


//    btn.onclick = null;

    //第二种
//    btn.removeEventListener("click",fn);
//    btn.detachEvent("onclick",fn);
</script>
</body>
</html>

推荐阅读更多精彩内容

  • DOM DOM内容主要分为四部分: 什么是DOM和节点; 获取节点; 节点操作(3种); 属性操作(3种)。 什么...
    magic_pill阅读 467评论 0 1
  • DOM创建节点及节点属性 通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作。但实际上...
    阿r阿r阅读 762评论 0 9
  • 第1章 简介 第2章 DOM节点的创建 2-1 DOM创建节点及节点属性 通过JavaScript可以很方便的获...
    mo默22阅读 545评论 0 8
  • 事情起源于今天中午,和朋友在校外吃完午饭,她在水果摊前买哈密瓜,我在等她。一对情侣站在我后面,男生抱怨道:“风...
    苏予宁阅读 72评论 0 2
  • 01 “爹爹,您说的那个才智过人,玉树临风的护国大将军什么时候来啊?” “阿瑜啊,你一个女孩子家家,整天不学女孩子...
    珍澈儿阅读 118评论 0 1
  • 8月19日,滴滴宣布与多点Dmall跨界合作在七夕联手推出“滴滴全民12点,浪漫多点到家”活动。20日是七夕,情侣...
    f11015f29d83阅读 193评论 0 1
  • 有时候心, 就像娇羞的水莲花, 骄阳时分, 跃跃欲试的彼此袒露, 而后, 花瓣凋零紧锁散落。 夜里, 暗自漂流在荷...
    特别的猫呢阅读 222评论 6 6