JS学习笔记

Sun白

已于 2022-03-04 16:10:58 修改

阅读量214

点赞数

分类专栏：前端文章标签： javascript 前端 html5

于 2022-03-04 15:39:36 首次发布

本文链接：https://blog.csdn.net/weixin_41929941/article/details/122862366

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

DOM

DOM即Document Object Model 文档对象模型
JS通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面了
文档
– 文档表示的就是整个的HTML网页文档
对象
– 对象表示将网页中的每一个部分都转换为了一个对象
模型
– 使用模型来表示对象之间的关系，这样方便我们获取对象

节点

节点Node，是构成我们网页的最基本的组成部分，网页中的每一个部分都可以称为是一个节点
比如：html标签、属性、文本、注释整个文档等都是一个节点
虽然都是节点，但是实际上他们的具体类型是不同的
比如：标签我们称为元素节点、属性我们称为属性节点、文本称为文本节点、文档称为文档节点
节点的类型不同，属性和方法也都不尽相同
常用的节点分为四类：
– 文档节点：整个HTML文档
– 元素节点：HTML文档中的HTML标签
– 属性节点：元素的属性
– 文本节点：HTML标签中的文本内容

	nodeName	nodeType	nodeValue
文档节点	#document	9	null
元素节点	标签名	1	null
属性节点	属性名	2	属性值
文本节点	#text	3	⭐文本内容

JS通过获取节点操作网页动作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button id="btn">我是一个按钮</button>
    <script type="text/javascript">

        /**
         * 浏览器已经为我们提供文档节点对象，这个对象是windows属性
         *  可以在页面中直接使用，文档节点代表的是整个网页
         */
        //获取到button对象
        var btn = document.getElementById("btn");

        //修改按钮的文字
        btn.innerText = "修改后的按钮";
    </script>
</body>
</html>

事件

事件，就是用户和浏览器之间的交互行为
比如：点击按钮、鼠标移动、关闭窗口等等
我们可以在事件对应的属性中设置一些JS代码，这样当事件触发时，这些代码将会执行
元素的事件可以参考w3school
通过对应事件的JS代码对事件做出响应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- 这种写法称之为结构与行为耦合，不方便维护，不推荐使用 -->
    <!--<button id="btn" οnclick="alert('讨厌，你点我干嘛')">我是一个按钮</button>-->
    <button id="btn" >点我一下</button>
    <script type="text/javascript">

        /**
         * 浏览器已经为我们提供文档节点对象，这个对象是windows属性
         *  可以在页面中直接使用，文档节点代表的是整个网页
         */
        //获取到button对象
        var btn = document.getElementById("btn");

        /** 可以为按钮的对应事件绑定处理函数的形式来响应事件 */
        var onc = function a(){
            alert('不是叫你别点吗？？');
        };
        //绑定单击事件
        btn.onclick = onc;

        //绑定鼠标进入区域事件
        btn.onmouseenter = function (){
            btn.innerText = "别点了";
        };

        //绑定鼠标离开事件
        btn.onmouseout = function (){
            btn.innerText = "点我一下";
        };
    </script>
</body>
</html>

加载顺序与onload事件

加载顺序
– 浏览器在加载一个页面时，是按照自上而下的顺序加载的，读取到一行就运行一行
– 如果将script标签写道页面上边，在代码执行时，页面还没有加载，页面没有加载DOM对象也就没有加载，会导致无法获取到DOM对象
onload事件
– onload事件会在整个页面加载完成之后才触发
– 为window绑定一个onload事件
– 该事件对应的响应函数将会在页面加载完成之后执行
– 这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        /**
         * 浏览器在加载一个页面时，是按照自上而下的顺序加载的，
         * 读取到一行就运行一行，如果将script标签写道页面上边，
         * 在代码执行时，页面还没有加载，页面没有加载DOM对象也就没有加载
         * 会导致无法获取到DOM对象
         */

        /**
         * onload事件会在整个页面加载完成之后才触发
         * 为window绑定一个onload事件
         * 该事件对应的响应函数将会在页面加载完成之后执行
         * 这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
         */
        window.onload = function (){
            var btn = document.getElementById("btn");
            btn.onclick=function (){
                alert("hello");
            }
        }


    </script>
</head>
<body>
    <button id="btn">点我一下</button>
</body>
</html>

获取元素节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <script type="text/javascript">

        /**
         * 定义一个函数，专门用来为指定函数来绑定单击响应函数
         */
        function myClick(id,fun){
            //为指定id的按钮绑定一个单击响应函数
            var btn = document.getElementById(id);
            btn.onclick = fun;
        }

        window.onload = function (){

            //为id为btn01的按钮绑定一个单击响应函数
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function (){
                //查找#bj节点
                var bj = document.getElementById("bj");
                //innerHTML,通过这个属性获取到元素内部HTML代码
                alert(bj.innerHTML);
            };



            //为id为btn02的按钮绑定一个单击响应函数
            var btn02 = document.getElementById("btn02");
            btn02.onclick = function (){
                //查找所有的li节点
                //这个方法会给我们返回要给类数组对象，所有查询到的元素都会封装到对象中
                var lis = document.getElementsByTagName("li");
                //打印lis
                // alert(lis.length);
                //遍历lis
                for (var i = 0; i< lis.length; i++){
                    alert(lis[i].innerHTML);
                }
            };

            //为id为btn03的按钮绑定一个单击响应函数
            var btn03 = document.getElementById("btn03");
            btn03.onclick = function (){
                //查找name=gender的所有节点
                var inputs = document.getElementsByName("gender");
                //打印inputs
                // alert(inputs.length);
                for (var i=0;i<inputs.length;i++){
                    /**
                     * innerHTML用于获取元素内部的HTML代码的
                     * 对于自结束标签，这个元素没有意义
                     */
                    // alert(inputs[i].innerHTML);
                    /**
                     * 如果需要读取一个元素节点的属性，直接使用元素.属性名
                     *  例子: 元素.id  元素.name  元素.value
                     *  注意: class属性不能采用这种方式
                     *       读取class属性时需要使用 元素.className
                     */
                    alert(inputs[i].className);
                }
            };

            //为id为btn04的按钮绑定一个单击响应函数
            var btn04 = document.getElementById("btn04");
            btn04.onclick = function (){
                //查找#city下所有li节点
                var city = document.getElementById("city");
                var lis = city.getElementsByTagName("li");
                for (let i = 0; i < lis.length; i++) {
                    alert(lis[i].innerHTML);
                }
            };

            //为id为btn05的按钮绑定一个单击响应函数
            var btn05 = document.getElementById("btn05");
            btn05.onclick = function (){
                //查找#city的所有子节点
                /**
                 * childNodes属性会获取包括文本节点在内的所有节点（包括空白的符号如换行符等）
                 * 根据DOM标准标签间的空白也会当作节点
                 * 注意：在IE8及一下的浏览器中不会将空白文本当成子节点
                 *      所以该属性在IE8中会返回4个子元素而其他浏览器是9个
                 */
                var city = document.getElementById("city");
                // var childNode = city.childNodes;
                // for (let i = 0; i < childNode.length; i++) {
                //     alert(childNode[i]);    //9次弹框
                // }

                /**
                 * children属性能返回当前节点的所有子元素
                 * @type {HTMLCollection}
                 */
                var cns = city.children;
                alert(cns.length);
            };

            //为id为btn06的按钮绑定一个单击响应函数
            var btn06 = document.getElementById("btn06");
            btn06.onclick = function (){
                //返回#phone的第一个子节点
                var phone = document.getElementById("phone");
                //firstChild可以获取到当前元素的第一个子节点（包括空白文本节点）
                var first = phone.firstChild;
                //firstElementChild返回当前节点第一个子元素
                /**
                 * 浏览器兼容问题，不建议使用
                 * firstElementChild不支持IE8及以下的浏览器
                 * @type {Element}
                 */
                // first = phone.firstElementChild;
                alert(first);
            };

            //为id为btn07的按钮绑定一个单击响应函数
            myClick("btn07",function (){
                //获取id为bj的节点
                var bj = document.getElementById("bj");
                //查找#bj的父节点
                var parentNode = bj.parentNode;
                // alert(parentNode.innerHTML);

                /**
                 * innerText
                 *  - 该属性可以获取到元素内部的文本内容
                 *  - 它和innerHTML类似，不同的是它会自动将html标签去除
                 */
                alert(parentNode.innerText);

            });

            //为id为btn08的按钮绑定一个单击响应函数
            myClick("btn08",function (){
                //获取id为欸android的节点
                var android = document.getElementById("android");
                //返回#android的前一个兄弟节点节点
                var ps = android.previousSibling;
                alert(ps.innerHTML);
                //获取前一个兄弟元素，IE8及以下不支持
                // var pe = android.previousElementSibling;
                // alert(pe);
            })

            //为id为btn09的按钮绑定一个单击响应函数
            myClick("btn09",function (){
                //读取#username的value属性值
                var username = document.getElementById("username");
                alert(username.value);
            })

            //为id为btn10的按钮绑定一个单击响应函数
            myClick("btn10",function (){
                //设置#username的value属性值
                var username = document.getElementById("username");
                username.value = "sunbai";
            })

            //为id为btn11的按钮绑定一个单击响应函数
            myClick("btn11",function (){
                //返回#bj的文本值
                // var bj = document.getElementById("bj");
                // alert(bj.innerText);

                //用子节点的方式
                var fc = bj.firstChild;
                alert(fc.nodeValue);
            })

        }

    </script>
</head>
<body>
    <div id="total">
        <div class="inner">
            <p>
                你喜欢哪个城市？
            </p>
            <ul id="city">
                <li id="bj">北京</li>
                <li>上海</li>
                <li>东京</li>
                <li>首尔</li>
            </ul>

            <br>
            <br>

            <p>
                你喜欢哪款单机游戏？
            </p>
            <ul id="game">
                <li id="rl">红警</li>
                <li>实况</li>
                <li>极品飞车</li>
                <li>魔兽</li>
            </ul>

            <br>
            <br>

            <p>
                你手机的操作系统是？
            </p>

            <ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
        </div>

        <div class="inner">
            gender:
            <input class="hello" type="radio" name="gender" value="male"/>
            Male
            <input class="hello" type="radio" name="gender" value="female"/>
            Female
            <br>
            <br>
            name:
            <input type="text" name="name" id="username" value="abcde"/>
        </div>


    </div>
    <div id="btnList">
        <div><button id="btn01">查找#bj节点</button></div>
        <div><button id="btn02">查找所有li节点</button></div>
        <div><button id="btn03">查找name=gender的所有节点</button></div>
        <div><button id="btn04">查找#city下所有li节点</button></div>
        <div><button id="btn05">查找#city的所有子节点</button></div>
        <div><button id="btn06">返回#phone的第一个子节点</button></div>
        <div><button id="btn07">查找#bj的父节点</button></div>
        <div><button id="btn08">返回#android的前一个兄弟节点节点</button></div>
        <div><button id="btn09">读取#username的value属性值</button></div>
        <div><button id="btn10">设置#username的value属性值</button></div>
        <div><button id="btn11">返回#bj的文本值</button></div>
    </div>
</body>
</html>

图片切换练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }

        #outer{
            width: 500px;
            margin: 0 auto;
            background-color: greenyellow;
            padding: 10px;
            /* 设置文本居中 */
            text-align: center;
        }
    </style>
    <script type="text/javascript">

        window.onload = function (){

            /**
             * 点击按钮切换图片
             */
            //获取两个按钮
            var prev = document.getElementById("prev");
            var next = document.getElementById("next");
            var img = document.getElementById("img");
            var tip = document.getElementById("tip");
            var index = 1;

            //分别为两个按钮绑定单击响应函数
            prev.onclick = function (){
                if(index === 1){
                    alert("没有上一张了");
                    return;
                }
                img.src = "img/"+(--index)+".jpeg";
                tip.innerText = "一共6张图片，当前第"+index+"张";
            }
            next.onclick = function (){
                if(index === 6){
                    alert("没有下一张了");
                    return;
                }
                img.src = "img/"+(++index)+".jpeg";
                tip.innerText = "一共6张图片，当前第"+index+"张";
            }
        }

    </script>
</head>
<body>
    <div id="outer">

        <p id="tip">一共6张图片，当前第1张</p>

        <img id="img" src="img/1.jpeg" alt="冰棍" width="500" height="400"/>

        <button id="prev">上一张</button>
        <button id="next">下一张</button>

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

全选练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选练习</title>
    <script type="text/javascript">

        function myClick(id,fun){
            var btn = document.getElementById(id);
            btn.onclick = fun;
        }

        function checkedAllBoxChange(checked){
            var items = document.getElementsByName("items");
            for (let i = 0; i < items.length; i++) {
                items[i].checked = checked;
            }
        }

        function changeCheckedAllBox(){
            var allCheck = true;
            var items = document.getElementsByName("items");
            for (let i = 0; i < items.length; i++) {
                if(!items[i].checked){
                    allCheck = false;
                    break;
                }
            }
            var checkedAllBox = document.getElementById("checkedAllBox");
            checkedAllBox.checked = allCheck;
        }

        window.onload = function (){

            //1.#checkedAllBtn
            myClick("checkedAllBtn",function (){
                var checkedAllBox = document.getElementById("checkedAllBox");
                checkedAllBox.checked = true;
                checkedAllBoxChange(true);
            });
            //2.#checkedNoBtn
            myClick("checkedNoBtn",function (){
                var checkedAllBox = document.getElementById("checkedAllBox");
                checkedAllBox.checked = false;
                checkedAllBoxChange(false);
            });
            //3.#checkedRevBtn
            myClick("checkedRevBtn",function (){
                var items = document.getElementsByName("items");
                for (let i = 0; i < items.length; i++) {
                    items[i].checked = !items[i].checked;
                }
                changeCheckedAllBox();
            });
            //4.#sendBtn
            var items = document.getElementsByName("items");
            myClick("senBtn",function (){
                for (let i = 0; i < items.length; i++) {
                    if(items[i].checked){
                        alert(items[i].value);
                    }
                }
            });
            //5.#checkedAllBox
            var checkedAllBox = document.getElementById("checkedAllBox");
            checkedAllBox.onchange = function (){
                checkedAllBoxChange(this.checked);
            };
            //6.items
            for (let i = 0; i < items.length; i++) {
                items[i].onchange = changeCheckedAllBox;
            }
        };

    </script>
</head>
<body>
    <form method="post" action="">
        你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选

        <br>
        <input type="checkbox" name="items" value="足球" />足球
        <input type="checkbox" name="items" value="篮球" />篮球
        <input type="checkbox" name="items" value="羽毛球" />羽毛球
        <input type="checkbox" name="items" value="乒乓球" />乒乓球
        <br>
        <input type="button" id="checkedAllBtn" value="全 选" />
        <input type="button" id="checkedNoBtn" value="全不选" />
        <input type="button" id="checkedRevBtn" value="反 选" />
        <input type="button" id="senBtn" value="提 交" />
    </form>
</body>
</html>

dom查询的剩余方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom查询的剩余方法</title>
    <script type="text/javascript">

        window.onload = function (){

            //获取body标签
            // var body = document.getElementsByTagName("body");

            /**
             * 在document中有一个属性body，它保存的是body的引用
             */
            var body = document.body;

            /**
             * documentElement保存的是html根标签
             */
            var html = document.documentElement;

            /**
             * document.all代表页面所有的元素
             */
            var all = document.all;

            // for (let i = 0; i < all.length; i++) {
            //     console.log(all[i]);
            // }

            //查询所有元素
            all = document.getElementsByTagName("*");

            /**
             * 根据元素的class属性值查询一组元素节点对象
             * getElementsByClassName可以根据class属性值获取一组元素节点对象
             * 但是该方法不支持IE8及以下的浏览器
             */
            var box1 = document.getElementsByClassName("box1");

            // console.log(box1.length);

            //获取页面中所有的div
            var divs = document.getElementsByTagName("div");

            //获取class为box1中的所有div
            //css选择器的做法 .box1 div
            /**
             * document.querySelector()
             *  - 需要一个选择器的字符串作为参数，可以根据一个css选择器来查询一个元素节点对象
             *  - 虽然在IE8中没有getElementsByClassName()但是可以使用querySelector()代替
             *  - 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个
             */
            var div = document.querySelector(".box1 div");
            // console.log(div);
            var box1 = document.querySelector(".box1");
            console.log(box1);

            /**
             * document.querySelectorAll()
             *  - 该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回
             *  - 即使符合条件的元素只有一个，也会返回一个数组
             * @type {NodeListOf<Element>}
             */
            var box1s = document.querySelectorAll(".box1");
            var box2s = document.querySelectorAll("#box2");
            console.log(box2s);
        };

    </script>
</head>
<body>
    <div id="box2"></div>
    <div class="box1">
        我是第一个个box1
        <div>我是box1中的div</div>
    </div>
    <div class="box1">
        <div>我是box1中的div</div>
    </div>
    <div class="box1">
        <div>我是box1中的div</div>
    </div>

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

dom增删改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <script type="text/javascript">

        /**
         * 定义一个函数，专门用来为指定函数来绑定单击响应函数
         */
        function myClick(id,fun){
            //为指定id的按钮绑定一个单击响应函数
            var btn = document.getElementById(id);
            btn.onclick = fun;
        }

        window.onload = function (){

            //创建一个"广州"节点,添加到#city下
            myClick("btn01",function (){
                //创建广州节点 <li>广州</li>
                //创建li元素节点
                /**
                 * document.createElement()
                 * 可以用于创建一个元素节点对象，它需要一个标签名作为参数，将会根据该标签名创建元素节点对象
                 * 并将创建好的对象作为返回值返回
                 * @type {HTMLLIElement}
                 */
                var li = document.createElement("li");
                // alert(li);
                //创建广州文本节点
                /**
                 * document.createTextNode()
                 * 可以用来创建一个文本节点对象
                 * 需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
                 * @type {Text}
                 */
                var text = document.createTextNode("广州");
                // alert(text);
                //将广州的文本设置为li标签的子节点
                /**
                 * appendChild()
                 *  - 向一个父节点中添加一个子节点
                 *  - 用法： 父元素.appendChild(子节点);
                 */
                li.appendChild(text);
                // alert(li.innerHTML);
                var city = document.getElementById("city");
                city.appendChild(li);
            });

            //将"广州"节点插入到#bj前面
            myClick("btn02",function (){
                //创建一个"广州"节点
                var li = document.createElement("li");
                var gzText = document.createTextNode("广州");
                li.appendChild(gzText);

                //获取id为bj的节点
                var bj = document.getElementById("bj");
                if(bj == null) return;

                //将"广州"节点插入到#bj前面
                var city = document.getElementById("city");
                city.insertBefore(li,bj);
            });

            //使用"广州"节点替换#bj节点
            myClick("btn03",function (){
                //创建一个"广州"节点
                var li = document.createElement("li");
                var gzText = document.createTextNode("广州");
                li.appendChild(gzText);

                //获取北京节点
                var bj = document.getElementById("bj");

                //获取city节点
                var city = document.getElementById("city");

                //使用"广州"节点替换#bj节点
                /**
                 * replaceChild(li,bj)
                 *  - 可以使用指定的子节点替换已有的子节点
                 *  - 语法：父节点.replaceChild(新节点，旧节点);
                 */
                city.replaceChild(li,bj);
            });

            //删除#bj节点
            myClick("btn04",function (){
               var city = document.getElementById("city");
               var bj = document.getElementById("bj");
               // city.removeChild(bj);

                bj.parentNode.removeChild(bj);
            });

            //读取#city内的HTML代码
            myClick("btn05",function (){
                var city = document.getElementById("city");
                alert(city.innerHTML);
            });

            //设置#bj内的HTML代码
            myClick("btn06",function (){
               var bj = document.getElementById("bj");
               bj.innerHTML = "昌平";
            });

            //创建一个"广州"节点,添加到#city下
            myClick("btn07",function (){
               var city = document.getElementById("city");

                /**
                 * 使用innerHTML也可完成DOM的一些增删改的相关操作
                 * 这种方式改动比较大
                 * 一般我们会两种方式结合使用
                 */
                // city.innerHTML += "<li>广州</li>";

                /**
                 * 折中的方式
                 */
                //创建一个li
                var li = document.createElement("li");
                li.innerHTML = "广州";
                //将li添加到city中
                city.appendChild(li);

            });
        }

    </script>
</head>
<body>
    <div class="inner">
        <p>
            你喜欢哪个城市？
        </p>
        <ul id="city">
            <li id="bj">北京</li>
            <li>上海</li>
            <li>东京</li>
            <li>首尔</li>
        </ul>
    </div>
    <div id="btnList">
        <div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div>
        <div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
        <div><button id="btn03">使用"广州"节点替换#bj节点</button></div>
        <div><button id="btn04">删除#bj节点</button></div>
        <div><button id="btn05">读取#city内的HTML代码</button></div>
        <div><button id="btn06">设置#bj内的HTML代码</button></div>
        <div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div>
    </div>
</body>
</html>

增加删除记录练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>增加删除记录练习</title>
    <style type="text/css">
        #employeeTable{
            background-color: deeppink;
            margin: auto;
        }
        #formDiv{
            text-align: center;
            align-items: center;
            margin: 0 auto;
        }
        #addFormTable{
            background-color: gold;
            margin: auto;
        }
    </style>
    <script type="text/javascript">

        window.onload = function (){
            /**
             * 点击超链接以后，删除一个员工的信息
             */
            //获取所有的超链接
            var allA = document.getElementsByTagName("a");

            function myClick(){
                //点击超链接以后，删除对应行数据

                //这里点击超链接，this就是谁
                var tr = this.parentNode.parentNode;
                //删除之前先确认
                var result = confirm("确认删除"+tr.getElementsByTagName("td")[0].innerHTML+"的数据吗？");
                if (!result) return false;

                tr.parentNode.removeChild(tr);

                /**
                 * 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为，
                 *  但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为
                 */
                return false;
            }

            //为每个超链接都绑定一个单击响应函数
            for (let i = 0; i < allA.length; i++) {
                allA[i].onclick = myClick;
            }

            //添加记录
            var addEmpButton = document.getElementById("addEmpButton");
            addEmpButton.onclick = function (){
                //获取table
                var employeeTable = document.getElementById("employeeTable");
                //获取employeeTable里的tbody
                var tbody = employeeTable.getElementsByTagName("tbody")[0];
                var tr = document.createElement("tr");
                var empName = document.getElementById("empName");
                var email = document.getElementById("email");
                var salary = document.getElementById("salary");
                var a = document.createElement("a");
                a.href = "javascript:;";
                a.innerHTML = "Delete";
                a.onclick = myClick;
                tr.innerHTML = "<td>"+empName.value+"</td><td>"+email.value+"</td><td>"
                    +salary.value+"</td>";
                var td = document.createElement("td");
                td.appendChild(a);
                tr.appendChild(td);
                tbody.appendChild(tr);
            }
        };

    </script>
</head>
<body>
    <table id="employeeTable">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <td>Tom</td>
            <td>tom@tom.com</td>
            <td>5000</td>
            <td><a href="javascript:;">Delete</a></td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>bob@bob.com</td>
            <td>8000</td>
            <td><a href="deleteEmp?id=002">Delete</a></td>
        </tr>
        <tr>
            <td>Jerry</td>
            <td>jerry@jerry.com</td>
            <td>10000</td>
            <td><a href="deleteEmp?id=003">Delete</a></td>
        </tr>
    </table>

    <div id="formDiv">

        <h4>添加新员工</h4>

        <table id="addFormTable">
            <tr>
                <td class="word">name:</td>
                <td class="inp">
                    <input type="text" name="empName" id="empName"/>
                </td>
            </tr>
            <tr>
                <td class="word">email:</td>
                <td class="inp">
                    <input type="text" name="email" id="email"/>
                </td>
            </tr>
            <tr>
                <td class="word">salary:</td>
                <td class="inp">
                    <input type="text" name="salary" id="salary"/>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <button id="addEmpButton" value="abc">
                        Submit
                    </button>
                </td>
            </tr>
        </table>

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

JS操作元素样式CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作内联样式</title>
    <style type="text/css">

        #box1{
            width: 200px;
            height: 200px;
            background-color: red !important;

        }

    </style>

    <script type="text/javascript">

        window.onload = function (){

            var box1 = document.getElementById("box1");
            //为按钮绑定单击响应函数
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function (){

                //修改box1的宽度
                /**
                 * 通过JS修改元素的样式
                 *  语法：元素.style.样式名 = 样式值
                 *
                 * 注意：如果CSS的样式名中含有-，
                 *  这种名称在JS中是不合法的，比如background-color
                 *  需要将这种样式名修改为驼峰命名法
                 *  去掉-，然后将-后的字母大写
                 *
                 * 我们通过style属性设置的样式都是内联样式
                 *  而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示
                 *
                 * 但是如果在样式中写了！important，则此时样式会有最高的优先级
                 *  即使通过JS也不能覆盖样式，此时将会导致JS修改样式失效
                 *  所以尽量不要为样式添加！important
                 */
                box1.style.width = "300px";
                box1.style.height = "300px";
                box1.style.backgroundColor = "yellow";

            };

            //点击按钮2以后，读取元素的样式
            var btn02 = document.getElementById("btn02");
            btn02.onclick = function (){
                //读取box1的样式
                /**
                 * 语法：元素.style.样式名
                 *
                 * 通过style属性设置和读取的都是内联样式
                 *  无法读取样式表中的样式
                 */
                alert(box1.style.width);

            };
        }

    </script>
</head>
<body>

    <button id="btn01">点我一下</button>
    <button id="btn02">读取元素样式</button>

    <br><br>

    <div id="box1"></div>

</body>
</html>

JS读取元素的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        #box1{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }

    </style>

    <script type="text/javascript">

        window.onload = function (){

            //点击按钮以后读取box1的样式
            var box1 = document.getElementById("box1");
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function (){
                //读取box1的宽度
                /**
                 * 获取元素当前显示的样式
                 *  语法：元素.currentStyle.样式名
                 * 它可以用来读取当前元素正在显示的样式
                 *
                 * currentStyle只有IE浏览器支持，其他浏览器都不支持
                 */
                // alert(box1.currentStyle.width);  //IE8用currentStyle
                //box1.currentStyle.width = "500px";  //不支持修改

                /**
                 * 在其他浏览器中可以使用
                 *  getComputedStyle()这个方法来获取元素当前的样式
                 *  这个方法是window的方法，可以直接使用
                 * 需要两个参数
                 *  第一个：要获取样式的元素
                 *  第二个：可以传递一个伪元素，一般都传null
                 *
                 * 该方法会返回一个对象，对象中封装了当前元素对应的样式
                 *  可以通过对象.样式名来读取样式
                 *  如果获取的样式没有设置，则会获取到真实的值，而不是默认值
                 *  比如：没有设置width，它不会获取到auto，而是一个长度
                 *
                 * 但是该方法不支持IE8及以下的浏览器
                 *
                 * 通过currentStyle和getComputedStyle()读取到的样式都是只读的，
                 *  不能修改，如果要修改必须通过style属性
                 */
                // var obj = getComputedStyle(box1,null);
                // alert(obj.backgroundColor);     //正常浏览器的方式

                alert(getStyle(box1,"width"));

            };
        };

        /**
         * 定义一个浏览器，用来获取指定元素的当前样式
         * 参数：
         *      element 要获取样式的元素
         *      name 要获取的样式名
         */
        function getStyle(element, name){
            if(window.getComputedStyle){
                //普通浏览器的方式
                return getComputedStyle(element,null)[name];
            }else {
                //IE8浏览器的方式
                return element.currentStyle[name];
            }

            // if(element.currentStyle){
            //     //IE8浏览器的方式
            //     return element.currentStyle[name];
            // }else {
            //     //普通浏览器的方式
            //     return getComputedStyle(element,null)[name];
            // }
        }
    </script>
</head>
<body>

    <button id="btn01">点我一下</button>
    <br><br>
    <div id="box1"></div>

</body>
</html>

其他样式操作的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        #box1{
            width: 100px;
            height: 100px;
            background-color: red;
            padding: 10px;
            border: 10px solid yellow;
        }
        
        #box2{
            padding: 100px;
            background-color: yellowgreen;
        }

        #box4{
            width: 200px;
            height: 300px;
            background-color: #bfa;
            overflow: auto;
        }

        #box5{
            width: 450px;
            height: 600px;
            background-color: yellow;
        }

    </style>
    <script type="text/javascript">

        window.onload = function (){
            var box1 = document.getElementById("box1");
            var btn01 = document.getElementById("btn01");
            var box4 = document.getElementById("box4");

            btn01.onclick = function (){
                /**
                 * clientWidth
                 * clientHeight
                 *  - 这两个属性可以获取元素的可见宽度和高度
                 *  - 这些属性都是不带px的，返回的都是一个数字，可以直接进行计算
                 *  - 会获取元素宽度和高度，包括内容区和内边距
                 *  - 这些属性都是只读的，不能修改
                 */
                // alert(box1.clientWidth+","+box1.clientHeight);
                //box1.clientHeight = 300;

                /**
                 * offsetWidth
                 * offsetHeight
                 *  - 获取元素的整个的宽度和高度，包括内容区、内边距和边框
                 */
                // alert(box1.offsetWidth+","+box1.offsetHeight);

                /**
                 * offsetParent
                 *  - 可以用来获取当前元素的定位父元素
                 *  - 会获取到离当前元素最近的开启了定位的祖先元素
                 *  - 如果所有的祖先元素都没有开启定位，则返回body
                 */
                // var op = box1.offsetParent;
                // alert(op.id);

                /**
                 * offsetLeft
                 *  - 当前元素相对于其定位的水平偏移量
                 * offsetTop
                 *  - 当前元素相对于其定位元素的垂直偏移量
                 */
                // alert(box1.offsetLeft);

                /**
                 * scrollHeight
                 * scrollWidth
                 *  - 可以获取元素整个滚动区域的宽/高度
                 */
                // alert(box4.clientHeight);    //可见高度
                // alert(box4.scrollHeight);       //滚动的高度
                // alert(box4.scrollWidth);        //滚动的宽度

                /**
                 * scrollLeft
                 *  - 可以获取水平滚动条滚动的距离
                 * scrollTop
                 *  - 可以获取垂直滚动条滚动的距离
                 */
                // alert(box4.scrollLeft);
                // alert(box4.scrollTop);

                // alert(box4.clientHeight);   //283

                /**
                 * 当满足scrollHeight - scrollTop == clientHeight时
                 * 说明垂直滚动条滚动到底了
                 * 当满足scrollWidth - scrollLeft == clientWidth时
                 * 说明水平滚动条滚动到底了
                 */
                alert(box4.scrollHeight - box4.scrollTop);

            };
        };

    </script>
</head>
<body>
    <button id="btn01">点我一下</button>
    <br/><br/>
    <div id="box4">
        <div id="box5"></div>
    </div>
    <br/><br/>
    <div id="box3">
        <div id="box2" style="position: relative;">
            <div id="box1"></div>
        </div>
    </div>
</body>
</html>

滚动条监听判断已读练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        #info{
            width: 600px;
            height: 300px;
            background-color: #bbffaa;
            overflow: auto;
        }

    </style>

    <script type="text/javascript">

        window.onload = function (){

            /**
             * 当垂直滚动条滚动到使表单项可用
             * onscroll
             *  - 该事件会在元素的滚动条滚动时触发
             */
            var info = document.getElementById("info");

            //为info绑定一个滚动条滚动的事件
            info.onscroll = function (){
                //检查垂直滚动条是否滚动到底
                if(info.scrollHeight - info.scrollTop - info.offsetHeight < 1){
                    //使表单项可用
                    var checkbook = document.getElementById("checkbook");
                    var register = document.getElementById("register");
                    /**
                     * disabled属性可以设置一个元素是否禁用
                     *  - 如果设置为true,则元素禁用
                     *  - 如果设置为false,则元素可用
                     */
                    checkbook.disabled = false;
                    register.disabled = false;
                }
            };

        }

    </script>

</head>
<body>
    <h3>亲爱的用户</h3>
    <p id="info">
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册<br/>
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册<br/>
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册<br/>
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册<br/>
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册<br/>
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册<br/>
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册<br/>
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册<br/>
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册<br/>
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册<br/>
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册<br/>
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册<br/>
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册<br/>
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册<br/>
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册<br/>
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册<br/>
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册<br/>
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册<br/>
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册<br/>
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册<br/>
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册<br/>
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册<br/>
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册<br/>
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册<br/>
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册<br/>
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册<br/>
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册<br/>
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册<br/>
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册<br/>
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册<br/>
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册<br/>
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册<br/>
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册<br/>
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册<br/>
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册<br/>
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册<br/>
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册<br/>
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册<br/>
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册<br/>
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册<br/>
    </p>
    <!-- 如果为表单项添加disabled="disabled" 则表单项将变成不可用的状态 -->
    <input id="checkbook" type="checkbox" disabled="disabled" />我已仔细阅读协议，一定遵守
    <input id="register" type="submit" value="注册" disabled="disabled" />
</body>
</html>

事件对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #areaDiv{
            width: 300px;
            height: 300px;
            background-color: #bbffaa;
        }
        #showMsg{
            width: 300px;
            height: 100px;
            background-color: gold;
        }
    </style>
    <script type="text/javascript">

        window.onload = function (){
            /**
             * 当鼠标在areaDIV中移动时， 在showMsg中来显示鼠标的坐标
             */
            //获取两个div
            var areaDiv = document.getElementById("areaDiv");
            var showMsg = document.getElementById("showMsg");

            /**
             * onmousemove
             *  - 该事件将会在鼠标元素中移动时被触发
             *
             *  事件对象
             *  - 当事件响应函数被响应时，浏览器每次都会将一个事件对象作为实参传递进响应函数
             *      在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标 键盘哪个按键被按下 鼠标滚轮滚动的方向
             */
            areaDiv.onmousemove = function (event){
                // alert(event);
                // alert("我动了！~~");
                //在showMsg中显示点的坐标
                /**
                 * 在IE8中，响应函数被触发时，浏览器不会传递事件对象
                 *  在IE8及以下的浏览器中，是将事件对象
                 */

                if(!event){
                    event = window.event;
                }

                /**
                 * clientX
                 * clientY
                 * 可用获取鼠标指针的位置
                 */
                showMsg.innerText = "x:"+event.clientX + ",y"+event.clientY;
                // console.log("x:"+event.clientX + ",y"+event.clientY);
            }
        };

    </script>
</head>
<body>
    <div id="areaDiv"></div>
    <div id="showMsg"></div>
</body>
</html>

事件对象练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #box1{
            width: 100px;
            height: 100px;
            background-color: red;
            /**
            开启box1的绝对定位
             */
            position: absolute;
        }

    </style>
    <script type="text/javascript">

        window.onload = function (){

            /**
             * 使div可用跟随鼠标移动
             */

            //获取box1
            var box1 = document.getElementById("box1");
            document.onmousemove = function (event){
                //解决兼容问题
                event = event||window.event;

                /**
                 * 获取滚动条滚动的距离
                 *  - chrome认为滚动条是属于body的
                 *  - 其他浏览器认为滚动条是HTML的
                 */
                var st = document.documentElement.scrollTop || document.body.scrollTop;
                var sl = document.documentElement.scrollLeft || document.body.scrollLeft;
                // console.log(st);

                //获取到鼠标的坐标
                /**
                 * clientX,clientY
                 *  - 用于获取鼠标在可见窗口的坐标
                 * div的偏移量，是相对于整个页面的
                 *
                 * pageX和pageY可以获取鼠标相对于当前页面的坐标
                 *  但是这两个属性在IE8中不支持，所以如果需要兼容IE8，则不要使用
                 */
                // var top = event.clientY;
                // var left = event.clientX;

                // var top = event.pageY;
                // var left = event.pageX;

                var top = event.clientY + st;
                var left = event.clientX + sl;

                //设置div的坐标
                box1.style.left = left + "px";
                box1.style.top = top + "px";


            };
        }

    </script>
</head>
<body style="height: 1000px">
    <div id="box1">

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

冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>冒泡</title>
    <style type="text/css">
        #box1{
            width: 200px;
            height: 200px;
            background-color: greenyellow;
        }

        #s1{
            background-color: yellow;
        }
    </style>
    <script type="text/javascript">

        window.onload = function (){

            /**
             * 事件的冒泡（Bubble）
             *  - 所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同的事件也会被触发
             *  - 在开发中大部分情况冒泡都是有用的，如果不希望发生事件冒泡可以通过事件对象来取消冒泡
             */

            //为s1绑定一个单击响应函数
            var s1 = document.getElementById("s1");
            s1.onclick = function (event){
                event = event || window.event;
                alert("我是span的单击响应函数");

                //取消冒泡
                //可以将事件对象的cancelBubble设置为true，即可取消冒泡
                event.cancelBubble = true;
            };

            var box1 = document.getElementById("box1");
            box1.onclick = function (event){
                event = event || window.event;
                alert("我是div的单击响应函数");

                event.cancelBubble = true;
            };

            document.body.onclick = function (){
                alert("我是body的单击响应函数");
            };

        };

    </script>
</head>
<body>

    <div id="box1">
        我是box1
        <span id="s1">我是span</span>
    </div>

</body>
</html>

事件的委派

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件的委派</title>
    <script type="text/javascript">

        window.onload = function (){

            //点击按钮以后添加超链接
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function (){
                //创建一个li
                var li = document.createElement("li");
                li.innerHTML = "<a href=\"javascript:;\" class='link'>新建的超链接</a>";

                //将li添加到u1中
                var u1 = document.getElementById("u1");
                u1.appendChild(li);
            };

            /**
             * 为每一个超链接都绑定一个单击响应函数
             * 这里我们为每一个超链接都绑定了一个单击响应函数，这种操作比较麻烦，
             * 而且这种操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定
             */
            //获取所有的a
            var allA = document.getElementsByTagName("a");
            //遍历
            // for (let i = 0; i < allA.length; i++) {
            //     allA[i].onclick = function (){
            //         alert("我是a的单击响应函数");
            //     };
            // }

            /**
             * 我们希望，只绑定一次事件，即可应用到所有的元素上，即使元素是后添加的
             * 我们可以尝试将其绑定给元素的共同的祖先元素
             *
             * 事件的委派
             *  - 指将事件统一绑定给共同的祖先元素，当后代元素上的事件触发时，会一直冒泡到祖先元素
             *      从而通过祖先元素的响应函数来处理事件
             *  - 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
             */
            //为ul绑定一个单击响应函数
            u1.onclick = function (event){

                //如果触发事件的对象我们期望的对象则执行，否则不执行
                event = event || window.event;
                /**
                 * event.target 返回触发此事件的元素
                 */
                var target = event.target;
                if(!/\blink\b/.test(target.className)) return;

                alert("我是ul的单击响应函数");
            };

        };

    </script>
</head>
<body>

    <button id="btn01">添加超链接</button>

    <ul id="u1" style="background-color: #bfa">
        <li><a href="javascript:;" class="link hello">超链接一</a></li>
        <li><a href="javascript:;" class="links">超链接二</a></li>
        <li><a href="javascript:;" class="link">超链接三</a></li>
    </ul>

</body>
</html>

事件的绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件的绑定</title>
    <script type="text/javascript">

        window.onload = function (){

            /**
             * 点击按钮以后弹出一个内容
             */
            //获取按钮对象
            var btn01 = document.getElementById("btn01");

            /**
             * 使用 对象.事件 = 函数 的形式绑定响应函数，
             *  它只能同时为一个元素的一个事件绑定一个响应函数，
             *  不能绑定多个，如果绑定了多个，则后边的会覆盖前边的
             */

            // //为btn01绑定第一个单击响应函数
            // btn01.onclick = function (){
            //     alert(1);
            // };
            //
            // //为btn01绑定第二个单击响应函数
            // var btn01 = document.getElementById("btn01");
            // btn01.onclick = function (){
            //     alert(2);
            // };

            /**
             * addEventListener()
             *  - 通过这个方法也可以为元素绑定响应函数
             *  - 参数：
             *      1.事件的字符串，不要on
             *      2.回调函数，当事件被触发时该函数会被调用
             *      3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false
             *
             * 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，
             *  这样当事件被触发时，响应函数将会按照函数的绑定顺序执行
             *
             * 这个方法不支持IE8及以下的浏览器
             */
            // btn01.addEventListener("click",function (){
            //     alert(1);
            // },false);
            // btn01.addEventListener("click",function (){
            //     alert(2);
            // },false);
            // btn01.addEventListener("click",function (){
            //     alert(3);
            // },false);

            /**
             * attachEvent()
             *  - 在IE8中可以使用attachEvent()来绑定事件
             *  - 参数：
             *      1.事件的字符串，但是要on
             *      2.回调函数
             *
             *  - 这个方法也可以同时为一个事件绑定多个处理函数，
             *      不同的是它是后绑定先执行，执行顺序和addEventListener()相反
             */
            // btn01.attachEvent("onclick",function (){
            //     alert(1);
            // });
            // btn01.attachEvent("onclick",function (){
            //     alert(2);
            // });
            // btn01.attachEvent("onclick",function (){
            //     alert(3);
            // });

            bind(btn01,"click",function (){
                alert(this);
            });

            // bind(btn01,"click",function (){
            //     alert(1);
            // });
            // bind(btn01,"click",function (){
            //     alert(2);
            // });
            // bind(btn01,"click",function (){
            //     alert(3);
            // });
        };

        //定义一个函数用来为指定函数绑定响应函数
        /**
         * addEventListener()中的this是绑定事件的对象
         * attachEvent()中的this是window
         *  需要统一两个方法this
        /**
         * @param obj 要绑定事件的对象
         * @param eventStr 事件的字符串（不要on）
         * @param callback 回调函数
         */
        function bind(obj,eventStr,callback) {
            if (obj.addEventListener) {
                //大部分浏览器兼容的方式
                obj.addEventListener(eventStr, callback, false);
            }else {
                /**
                 * this是谁由调用方式决定
                 *  - callback.call(obj)指定主调对象为obj
                 */
                //IE8及以下
                obj.attachEvent("on" + eventStr, function (){
                    callback.call(obj);
                });
            }
        }

    </script>
</head>
<body>
    <button id="btn01">点我一下</button>
</body>
</html>

事件的传播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        #box1{
            width: 300px;
            height: 300px;
            background-color: yellowgreen;
        }

        #box2{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }

        #box3{
            width: 150px;
            height: 150px;
            background-color: skyblue;
        }

    </style>

    <script type="text/javascript">

        window.onload = function (){

            /**
             * 分别为三个div绑定单击响应函数
             */
            var box1 = document.getElementById("box1");
            var box2 = document.getElementById("box2");
            var box3 = document.getElementById("box3");

            /**
             * 事件的传播
             * - 关于事件的传播网景公司和微软公司有不同的理解
             * - 微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，
             *      然后再向当前元素的祖先元素上传播，也就是说事件应该在冒泡阶段执行
             * - 网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应当先触发当前元素的最外层的祖先元素的事件，
             *      然后再向内传播给后代元素
             * - W3C综合了两个公司的方案，将事件传播分成了三个阶段
             *      1.捕获阶段
             *          - 在捕获阶段时从最外层的祖先元素向目标元素进行事件的捕获，但是默认此时不会不会触发事件
             *      2.目标阶段
             *          - 事件捕获到目标元素，捕获结束开始在目标元素上执行事件
             *      3.冒泡阶段
             *          - 事件从目标元素向祖先元素传递，依次触发祖先元素上的事件
             *
             *      - 如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true,
             *          一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false
             *
             * - IE8及以下的浏览器中没有捕获阶段
             */

            bind(box1,"click",function (){
               alert("我是box1的响应函数");
            });
            bind(box2,"click",function (){
                alert("我是box2的响应函数");
            });
            bind(box3,"click",function (){
                alert("我是box3的响应函数");
            });

        };

        function bind(obj,eventStr,callback) {
            if (obj.addEventListener) {
                //大部分浏览器兼容的方式
                obj.addEventListener(eventStr, callback, true);
            }else {
                /**
                 * this是谁由调用方式决定
                 *  - callback.call(obj)指定主调对象为obj
                 */
                //IE8及以下
                obj.attachEvent("on" + eventStr, function (){
                    callback.call(obj);
                });
            }
        }

    </script>
</head>
<body>

    <div id="box1">
        <div id="box2">
            <div id="box3"></div>
        </div>
    </div>

</body>
</html>

拖拽练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽练习</title>
    <style type="text/css">

        #box1{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }

        #box2{
            width: 100px;
            height: 100px;
            left: 200px;
            top: 200px;
            background-color: yellow;
            position: absolute;
        }

    </style>

    <script type="text/javascript">

        window.onload = function (){
            /**
             * 拖拽box1元素
             *  - 拖拽的流程
             *      1.当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
             *      2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
             *      3.当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
             */
            var box1 = document.getElementById("box1");
            var box2 = document.getElementById("box2");
            var img = document.getElementById("img");

            drag(box1);
            drag(box2);
            drag(img);

        };

        function drag(obj){

            obj.onmousedown = function (event) {

                //设置box1捕获所有的鼠标按下的事件
                /**
                 * setCapture()
                 *  - 只有IE支持，但是在火狐中调用时不会报错
                 *      而如果使用chrome调用，会报错
                 */
                // if (box1.setCapture) {
                //     box1.setCapture();
                // }

                obj.setCapture && obj.setCapture();

                var startLeft = obj.offsetLeft;
                var startTop = obj.offsetTop;
                event = event || window.event;
                var startX = event.clientX;
                var startY = event.clientY;

                document.onmousemove = function (event){
                    event = event || window.event;
                    var endX = event.clientX;
                    var endY = event.clientY;
                    obj.style.left = startLeft + (endX - startX) + "px";
                    obj.style.top = startTop + (endY - startY) + "px";
                };

                document.onmouseup = function (){
                    document.onmousemove = null;
                    document.onmouseup = null;
                    //当鼠标松开时，取消对事件的捕获
                    if(obj.releaseCapture) {
                        obj.releaseCapture();
                    }
                };

                /**
                 * 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，
                 *  此时会导致拖拽功能的异常，这个是浏览器提供的默认行为
                 *  如果不希望发生这个行为，则可以通过return false来取消默认行为
                 *
                 * 但是这招对IE8不起作用
                 */
                return false;
            };
        }

    </script>

</head>
<body>
    我是一段文字
    <div id="box1"></div>

    <div id="box2"></div>

    <img src="img/1.jpeg" id="img" style="position: absolute; height: 150px; width: 150px;">
</body>
</html>

滚轮事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚轮事件</title>
    <style type="text/css">

        #box1{
            width: 100px;
            height: 100px;
            background-color: red;
        }

    </style>

    <script type="text/javascript">

        window.onload = function (){
            /**
             * 当鼠标滚轮向下滚动时，box1变长
             * 当滚轮向上滚动时，box1变短
             */
            //获取id为box1的元素
            var box1 = document.getElementById("box1");

            //为box1绑定一个鼠标滚轮滚动的事件
            /**
             * onmousewheel鼠标滚轮滚动事件，会在滚轮滚动时触发，
             *  但是火狐不支持该属性
             *
             * 在火狐中需要使用DOMMouseScroll 来绑定滚动事件
             *  注意该事件需要通过addEventListener()函数来绑定
             */
            function fun(event){

                event = event || window.event;

                /**
                 * event.wheelDelta 可以获取鼠标滚轮滚动的方向
                 * 向上滚>0 向下滚<0
                 * wheelDelta 火狐中不支持
                 */
                // alert(event.wheelDelta);

                /**
                 * 在火狐中使用event.detail来获取滚动的方向
                 * 向上滚<0 向下滚>0
                 */
                // alert(event.detail);

                if(event.wheelDelta > 0 || event.detail < 0){
                    //向上滚,box1变短
                    box1.style.height = box1.offsetHeight - 10 + "px";
                }else {
                    //向下滚,box1变长
                    box1.style.height = box1.offsetHeight + 10 + "px";
                }

                /**
                 * 使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false
                 * 需要使用event来取消默认行为
                 * 但是IE8不支持event.preventDefault，直接调用会报错
                 */
                event.preventDefault && event.preventDefault();

                /**
                 * 当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动
                 * 这是浏览器的默认行为，如果不希望发生，则可以取消这个行为
                 */
                return false;

            }

            box1.onmousewheel = fun;

            bind(box1,"DOMMouseScroll",box1.onmousewheel);
        };

        function bind(obj,eventStr,callback) {
            if (obj.addEventListener) {
                //大部分浏览器兼容的方式
                obj.addEventListener(eventStr, callback, true);
            }else {
                /**
                 * this是谁由调用方式决定
                 *  - callback.call(obj)指定主调对象为obj
                 */
                //IE8及以下
                obj.attachEvent("on" + eventStr, function (){
                    callback.call(obj);
                });
            }
        }

    </script>
</head>
<body style="height: 2000px">

    <div id="box1"></div>

</body>
</html>

键盘事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘事件</title>
    <script type="text/javascript">

        window.onload = function (){

            /**
             * 键盘事件
             * onkeydown
             *  - 按键被按下
             *  - 对于onkeydown来说如果一直按着某个键不松手，则事件会一直触发
             *  - 当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快
             *      这种设计是为了防止误操作的发生
             * onkeyup
             *  - 按键被松开
             *
             * 键盘事件一般都会绑定给可以获取到焦点的对象，或者是document
             *
             */

            document.onkeydown = function (event){
                event = event || window.event;

                /**
                 * 可以通过keyCode来获取按键的编码
                 *  通过它可以判断那个按键被按下
                 *
                 * 可以通过key获取按键对应的字符
                 *  通过它可以判断那个按键被按下
                 *
                 * 除了keyCode，事件对象中还提供了几个属性
                 *  altKey
                 *  ctrlKey
                 *  shiftKey
                 *      - 这三个用来判断alt ctrl 和 shift是否被按下
                 *          如果按下则返回true，否则返回false
                 */

                //判断一个y是否被按下
                // if(event.key === "y"){
                //     alert("按下了y键");
                // }

                //判断y和Ctrl是否同时被按下
                if(event.key === "y" && event.ctrlKey){
                    console.log("y和Ctrl同时被按下");
                }
            };

            document.onkeyup = function (){
                console.log("按键被松开了");
            };

            //获取input
            var input = document.getElementsByTagName("input")[0];

            input.onkeydown = function (event){
                // console.log("按键被按下了");

                //使文本框中不能输入数字
                event = event || window.event;
                var key = event.key;

                //在文本框中输入内容，属于onkeydown的默认行为
                //如果在onkeydown中取消默认行为，则输入的内容不会出现在文本框中
                if(/\d/.test(key)) {
                    return false;
                }
            };

        };

    </script>
</head>
<body>

    <input type="text" />

</body>
</html>

键盘移动DIV练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘移动div练习</title>
    <style type="text/css">

        #box1{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }

    </style>
    <script type="text/javascript">

        /**
         * 使div可以根据不同的方向键向不同的方向移动
         *  -
         */
        window.onload = function (){

            var box1 = document.getElementById("box1");

            var speed = 10;

            //为document绑定一个按键按下的事件
            document.onkeydown = function (event){
                event = event || window.event;

                if(event.ctrlKey){
                    speed += 5;
                }else {
                    if(speed >= 10){
                        speed -= 5;
                    }
                }

                var left = box1.offsetLeft;
                var top = box1.offsetTop;
                switch (event.key) {
                    case "ArrowLeft":
                        box1.style.left = left - speed + "px";
                        break;
                    case "ArrowRight":
                        box1.style.left = left + speed + "px";
                        break;
                    case "ArrowUp":
                        box1.style.top = top - speed + "px";
                        break;
                    case "ArrowDown":
                        box1.style.top = top + speed + "px";
                        break;
                }
            };

        };

    </script>
</head>
<body>
    <div id="box1"></div>
</body>
</html>

BOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BOM</title>
    <script type="text/javascript">
        /**
         * BOM
         *  - 浏览器对象模型
         *  - BOM可以使我们通过JS来操作浏览器
         *  - 在BOM中为我们提供了一组对象，用来完成对浏览器的操作
         *  - BOM对象
         *      Window
         *          - 代表的是整个浏览器的窗口，同时也是网页中的全局对象
         *      Navigator
         *          - 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
         *      Location
         *          - 代表当前浏览器的地址栏信息，通过Location可以获取地址信息，或者操作浏览器跳转页面
         *      History
         *          - 代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录
         *              由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页
         *              而且该操作只在当次访问时有效
         *      Screen
         *          - 代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关信息
         *
         *      这些BOM对象在浏览器中都是作为window对象属性保存的
         *          可以通过window对象来使用，也可以直接使用
         */

        /**
         * Navigator
         *  - 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
         *  - 由于历史原因，Navigator对象中的大部分属性都已经不能帮我们识别浏览器了
         *  - 一般我们只会使用userAgent来判断浏览器的信息
         *      userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容，
         *      不同的浏览器会有不同的userAgent
         *
         * Chrome的userAgent
         *  Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36
         * Edge的userAgent
         *  Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36 Edg/98.0.1108.62
         * IE8
         *  Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; systeccloud 3.5.1)
         * IE9
         *  Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; systeccloud 3.5.1)
         * IE10
         *  Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; systeccloud 3.5.1)
         * IE11
         *  Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; systeccloud 3.5.1; rv:11.0) like Gecko
         *  - 在IE11中已经将微软和IE相关的标识都已经去掉了，所以我们基本已经不能通过UserAgent来识别一个浏览器是否是IE了
         */
        var ua = navigator.userAgent;

        console.log(ua);

        // if(/firefox/i.test(ua)){
        //     alert("您正在使用的是火狐浏览器");
        // }
        //
        // if(/Chrome/i.test(ua) && !/edg/i.test(ua)){
        //     alert("您正在使用的是谷歌浏览器");
        // }
        //
        // if(/edg/i.test(ua)){
        //     alert("您正在使用edge浏览器");
        // }
        //
        // if(/MSIE/i.test(ua)){
        //     alert("您正在使用的是IE 11以下的浏览器");
        // }

        /**
         * 如果通过userAgent不能判断，还可以通过一些浏览器中特有的对象来判断浏览器的信息
         * 比如： ActiveXObject
         */
        // if(window.ActiveXObject){
        //     alert("您正在使用的是IE浏览器");
        // }else {
        //     alert("您使用的不是IE浏览器");
        // }

        //alert(!!window.ActiveXObject);

        if("ActiveXObject" in window){
            alert("您正在使用的是IE浏览器");
        }else if(/firefox/i.test(ua)){
            alert("您正在使用的是火狐浏览器");
        }else if(/Chrome/i.test(ua) && !/edg/i.test(ua)){
            alert("您正在使用的是谷歌浏览器");
        }else if (/edg/i.test(ua)){
            alert("您正在使用edge浏览器");
        }

    </script>
</head>
<body>

</body>
</html>

History

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>History</title>
    <script type="text/javascript">

        /**
         * History
         *  - 对象可用用来操作浏览器向前或向后翻页
         */

        window.onload = function (){
            var btn = document.getElementById("btn");

            btn.onclick = function (){
                /**
                 * length
                 *  - 属性，可用获取到当次访问的链接的数量
                 */
                // alert(history.length);

                /**
                 * back()
                 *  - 可用用来回退到上一个页面，作用和浏览器的回退按钮一样
                 */
                // history.back();

                /**
                 * forward()
                 *  - 可用跳转到下一个页面，作用和浏览器的前进按钮一样
                 */
                // history.forward();

                /**
                 * go()
                 *  - 可用用来跳转到指定的页面
                 *  - 它需要一个整数作为参数
                 *      1：表示向前跳转一个页面
                 *      2：表示向前跳转两个页面
                 *      -1：向后跳转一个页面
                 *      -2：向后跳转两个页面
                 */
                history.go(-1);
            }
        }
    </script>
</head>
<body>
    <h1>History</h1>

    <button id="btn">点我一下</button>

    <a href="29.BOM.html">去BOM</a>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test01</title>
</head>
<body>
    <h1>TEST01</h1>
    <a href="test02.html">去test02.html</a>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test02</title>
</head>
<body>
    <h1>TEST02</h1>
    <a href="30.History.html">去30.History.html</a>
</body>
</html>

Location

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Location</title>
    <script type="text/javascript">
        /**
         * Location
         *  - 该对象中封装了浏览器的地址栏的信息
         */
        window.onload = function (){

            //获取按钮对象
            var btn = document.getElementById("btn");

            btn.onclick = function (){
                //如果直接打印location，则可用获取到地址栏的信息（当前页面的完整路径）
                // alert(location);

                /**
                 * 如果直接将location属性修改为一个完整的路径或相对路径则我们页面将会
                 * 跳转到该路径，并且会生成相应的历史记录
                 */
                // location = "http://www.baidu.com";
                // location = "29.BOM.html";

                /**
                 * assign()
                 *  - 用来跳转到其他的页面，作用和直接修改location一样
                 */
                // location.assign("http://www.baidu.com");

                /**
                 * reload()
                 *  - 重新加载当前文档
                 *  - 如果再方法中传入一个true作为参数，则会强制清空缓存刷新页面
                 */
                // location.reload(true);

                /**
                 * replace()
                 *  - 可用使用一个新的页面替换当前页面，调用完毕也会跳转页面
                 *      不会生成历史记录，不能使用回退按钮回退
                 */
                location.replace("29.BOM.html");
            }

        }
    </script>
</head>
<body>
    <h1>Location</h1>
    <button id="btn">点我一下</button>
    <a href="29.BOM.html">去BOM</a>
    <input type="text"/>
</body>
</html>

定时调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时调用</title>
    <script type="text/javascript">

        window.onload = function (){

            //获取count
            var count = document.getElementById("count");

            //使count中的内容自动切换
            /**
             * JS的程序的执行速度是非常快的
             *  如果希望一段程序可用每间隔一段时间执行一次，可以使用定时调用
             */
            /**
             * setInterval()
             *  - 定时调用
             *  - 可以将一个函数，每隔一段时间执行一次
             *  - 参数：
             *      1.回调函数，该函数会每隔一段时间被调用一次
             *      2.每次调用间隔的时间，单位是毫秒
             *
             *  - 返回值：
             *      返回一个Number类型的数据
             *      这个数字用来作为定时器的唯一标识
             */
            var number = 1;
            var timer = setInterval(function (){
                count.innerHTML = number++;
                //clearInterval()可以用来关闭一个定时器
                if(number === 11){
                    clearInterval(timer);
                }
            },1000);

            // console.log(timer);
        }

    </script>
</head>
<body>
    <h1 id="count"></h1>
</body>
</html>

定时器调用练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时调用练习</title>

    <script type="text/javascript">

        window.onload = function (){
            //获取img标签
            var img = document.getElementById("img");

            var imgArr = ["img/1.jpeg","img/2.jpeg","img/3.jpeg","img/4.jpeg","img/5.jpeg","img/6.jpeg"];

            var index = 0;

            var start = document.getElementById("start");
            var end = document.getElementById("end");

            start.onclick = function (){
                //如果已经开启了定时器，则不能再开启新的定时器
                if(end.onclick) return;
                var timer = setInterval(function (){
                    index = (index + 1) % imgArr.length;
                    img.src = imgArr[index];
                },1000);

                end.onclick = function (){
                    /**
                     * clearInterval()可以接收任意参数，
                     *  如果参数是一个有效的定时器标识，则停止对应的定时器
                     *  如果参数不是一个有效的标识，则什么也不做
                     */
                    clearInterval(timer);
                    this.onclick = null;
                }
            };

        };

    </script>

</head>
<body>
    <img id="img" width="600px" height="300px" src="img/1.jpeg"/>
    <br/>
    <button id="start">开始</button>
    <button id="end">停止</button>
</body>
</html>

延时调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>延时调用</title>
    <script type="text/javascript">

        var num = 0;

        /**
         * 延时调用
         *  延时调用一个函数不马上执行，而是隔一段时间以后再执行，而且只会执行一次
         *
         * 延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一次
         *
         * 延时调用和定时调用实际上是可以互相代替的，在开发中可以根据自己的需要去执行
         */
        var timer = setTimeout(function (){
            console.log(num++);
        },3000);

        //使用clearTimeout()来关闭一个延时调用
        clearTimeout(timer);

    </script>
</head>
<body>

</body>
</html>

延时调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>延时调用</title>
    <script type="text/javascript">

        var num = 0;

        /**
         * 延时调用
         *  延时调用一个函数不马上执行，而是隔一段时间以后再执行，而且只会执行一次
         *
         * 延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一次
         *
         * 延时调用和定时调用实际上是可以互相代替的，在开发中可以根据自己的需要去执行
         */
        var timer = setTimeout(function (){
            console.log(num++);
        },3000);

        //使用clearTimeout()来关闭一个延时调用
        clearTimeout(timer);

    </script>
</head>
<body>

</body>
</html>

Sun白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS学习笔记

DOMDOM即Document Object Model 文档对象模型JS通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面了文档– 文档表示的就是整个的HTML网页文档对象– 对象表示将网页中的每一个部分都转换为了一个对象模型– 使用模型来表示对象之间的关系，这样方便我们获取对象节点节点Node，是构成我们网页的最基本的组成部分，网页中的每一个部分都可以称为是一个节点比如：html标签、属性、文本、注释整个文档等都是一个节点虽然都是节点，但是实
复制链接

扫一扫

专栏目录