努力成为一名合格的前端开发工程师!!!

闻达有先后,术业有专攻,努力,加油ing!!!!

导航

JavaScript基础视频教程总结(091-100章)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>091-100章总结</title>
    <link rel="stylesheet" type="text/css" href="css/base.css"/>
    <link rel="stylesheet" type="text/css" href="css/css.css"/>
</head>
<body>

<pre>
091. DOM简介
什么是DOM
• DOM,全称Document Object Model文档对象模型。
• JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。
• 文档– 文档表示的就是整个的HTML网页文档
• 对象– 对象表示将网页中的每一个部分都转换为了一个对象。
• 模型– 使用模型来表示对象之间的关系,这样方便我们获取对象(倒树模型)。
节点
• 节点Node,是构成我们网页的最基本的组成部分,网页中的每一个部分都可以称为是一个节点。
• 比如:html标签、属性、文本、注释、整个文档等都是一个节点。
• 虽然都是节点,但是实际上他们的具体类型是不同的。
• 比如:标签我们称为元素节点、属性称为属性节点、文本称为文本节点、文档称为文档节点。
• 节点的类型不同,属性和方法也都不尽相同。
• 常用节点分为四类
– 文档节点:整个HTML文档
– 元素节点:HTML文档中的HTML标签
– 属性节点:元素的属性
– 文本节点:HTML标签中的文本内容
节点的属性

文档节点(document)
• 文档节点document,代表的是整个HTML文档,网页中的所有节点都是它的子节点。
• document对象作为window对象的属性存在的,我们不用获取可以直接使用。
• 通过该对象我们可以在整个文档访问内查找节点对象,并可以通过该对象创建各种节点对象。
元素节点(Element)
• HTML中的各种标签都是元素节点,这也是我们最常用的一个节点。
• 浏览器会将页面中所有的标签都转换为一个元素节点,我们可以通过document的方法来获取元素节点。
• 比如:
– document.getElementById()
– 根据id属性值获取一个元素节点对象。
属性节点(Attr)
• 属性节点表示的是标签中的一个一个的属性,这里要注意的是属性节点并非是元素节点的子节点,而是元素节点的一部分。
• 可以通过元素节点来获取指定的属性节点。
• 例如:
– 元素节点.getAttributeNode("属性名");
• 注意:我们一般不使用属性节点。
文本节点(Text)
• 文本节点表示的是HTML标签以外的文本内容,任意非HTML的文本都是文本节点(包括换行和空格)。
• 它包括可以字面解释的纯文本内容。
• 文本节点一般是作为元素节点的子节点存在的。
• 获取文本节点时,一般先要获取元素节点。在通过元素节点获取文本节点。
• 例如:
– 元素节点.firstChild;
– 获取元素节点的第一个子节点,一般为文本节点。
</pre>
<button id="btn001">我是一个按钮</button>
<script type="text/javascript">
    console.log("第091");
    
    /*
     * 浏览器已经为我们提供 文档节点 对象这个对象是window属性
     *  可以在页面中直接使用,文档节点代表的是整个网页
     */
    console.log(document);
    //获取到button对象
    var btn001 = document.getElementById("btn001");
    //修改按钮的文字
    btn001.innerHTML = "I'm Button";
</script>

<pre>
092. 事件的简介
• 事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间。
• JavaScript 与 HTML 之间的交互是通过事件实现的。
• 对于 Web 应用来说,有下面这些代表性的事件:点击某个元素、将鼠标移动至某个元素上方、按下键盘上某个键,等等。
事件发生以后要处理这个事件(比如你亲了某人一下,某人有什么反应)。
</pre>
<!--
    我们可以在事件对应的属性中设置一些js代码,这样当事件被触发时,这些代码将会执行
    这种写法我们称为结构和行为耦合,不方便维护,不推荐使用 
-->
<button id="btn" onclick="alert('讨厌,你点我干嘛!');">我是一个按钮点我</button>
<button id="btn002">我是一个按钮点我</button>
<script type="text/javascript">
    console.log("第092");
    
    /*
     * 事件,就是用户和浏览器之间的交互行为,
     *  比如:点击按钮,鼠标移动、关闭窗口。。。
     */
    //获取按钮对象
    var btn002 = document.getElementById("btn002");
    /*
     * 可以为按钮的对应事件绑定处理函数的形式来响应事件
     *  这样当事件被触发时,其对应的函数将会被调用
     */
    
    //绑定一个单击事件
    //像这种为单击事件绑定的函数,我们称为单击响应函数
    btn002.onclick = function(){
        alert("你还点~~~");
    };
    
</script>

<pre>
093. 文档的加载
浏览器在加载一个页面时,是按照自上向下的顺序加载的,读取到一行就运行一行,如果将script标签写到页面的上边,在代码执行时,页面还没有加载,页面没有加载DOM对象也没有加载,会导致无法获取到DOM对象。
onload事件会在整个页面加载完成之后才触发,为window绑定一个onload事件,该事件对应的响应函数将会在页面加载完成之后执行,这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了。
注意:window.onload一个页面只能写一个,多个一起会执行最后一个,可以写个方法解决。
</pre>
<script type="text/javascript">
    console.log("第093");
    
    function btn003(){
        //获取id为btn的按钮
        var btn003 = document.getElementById("btn003");
        //为按钮绑定一个单击响应函数
        btn003.onclick = function(){
            alert("hello");
        };
    };
</script>
<button id="btn003">我是一个按钮</button>

<pre>
094. DOM查询
获取元素节点
• 通过document对象调用
1. getElementById()
– 通过id属性获取一个元素节点对象
2. getElementsByTagName()
– 通过标签名获取一组元素节点对象,伪数组
3. getElementsByName()
– 通过name属性获取一组元素节点对象
</pre>

<pre>
095. DOM查询2
获取元素节点的子节点
• 通过具体的元素节点调用
1. getElementsByTagName()
– 方法,返回当前节点的指定标签名后代节点
2. childNodes
– 属性,表示当前节点的所有子节点
3. firstChild
– 属性,表示当前节点的第一个子节点
4. lastChild
– 属性,表示当前节点的最后一个子节点
</pre>

<pre>
096. DOM查询3
获取父节点和兄弟节点
• 通过具体的节点调用
1. parentNode
– 属性,表示当前节点的父节点
2. previousSibling
– 属性,表示当前节点的前一个兄弟节点
3. nextSibling
– 属性,表示当前节点的后一个兄弟节点
</pre>

<div class="clearfix">
    <div id="total">
        <div class="inner">
            <p>你喜欢哪个城市?</p>
            <ul class="clearfix" id="city">
                <li id="bj">北京</li>
                <li>上海</li>
                <li>东京</li>
                <li>首尔</li>
            </ul>
            <p>你喜欢哪款单机游戏?</p>
            <ul class="clearfix" id="game">
                <li id="rl">红警</li>
                <li>实况</li>
                <li>极品飞车</li>
                <li>魔兽</li>
            </ul>
            <p>你手机的操作系统是?</p>
            <ul id="phone"> <li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
        </div>
        <div class="inner">
            <p>gender:</p>
            <p>
                <span>
                    <input class="hello" id="male" type="radio" name="gender" value="male"/>
                    <label for="male">male</label>
                </span>
                <span>
                    <input class="hello" id="female" type="radio" name="gender" value="female"/>
                    <label for="female">female</label>
                </span>
            </p>
            <p>name:<input type="text" name="name" id="username" value="abcde"/></p>
        </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>
</div>
<script type="text/javascript">
    console.log("第094,095,096");
    
    // 定义一个通用点击事件函数
    function myClick(btn,fun){
        var btn = document.getElementById(btn);
        btn.onclick = fun;
    };
    myClick("btn01",function(){
        var bj = document.getElementById('bj');
        alert(bj.innerHTML);
    });
    myClick("btn02",function(){
        var lis = document.getElementsByTagName("li"); //一组元素节点对象
        //alert(lis[0]);
        for(var i=0 , liLen = lis.length; i<lis.length; i++){
            console.log(lis[i].innerHTML);
        }
    });
    myClick("btn03",function(){
        var names = document.getElementsByName("gender");//一组元素节点对象
        /*
         * innerHTML用于获取元素内部的HTML代码的
         *  对于自结束标签,这个属性没有意义
         */
        //alert(inputs[i].innerHTML);
        /*
         * 如果需要读取元素节点属性,
         *  直接使用 元素.属性名
         *      例子:元素.id 元素.name 元素.value
         *      注意:class属性不能采用这种方式,
         *          读取class属性时需要使用 元素.className
         */
        for(var i=0;i<names.length;i++){
            alert(names[i].value);
        }
    })
    myClick("btn04",function(){
        var city = document.getElementById('city');
        var lis = city.getElementsByTagName('li'); //返回当前节点的指定标签名后代节点
        //alert(lis[0]);
        for(var i=0;i<lis.length;i++){
            alert(lis[i].innerHTML);
        }
    });
    myClick("btn05",function(){
        var city = document.getElementById('city');
        var cns = city.childNodes;
        /*
         * childNodes属性会获取包括文本节点在内的所有节点
         * 根据DOM标签标签间空白也会当成文本节点
         * 注意:在IE8及以下的浏览器中,不会将空白文本当成子节点,
         *  所以该属性在IE8中会返回4个子元素而其他浏览器是9个
         */
        //alert(cns.length);
        for(var i=0;i<cns.length;i++){
            alert(cns[i]);
        }
        /*
         * children属性可以获取当前元素的所有子元素
         */
        var cns2 = city.children;
        alert(cns2.length);
    });
    myClick("btn06",function(){
        var phone = document.getElementById('phone');
        var fir = phone.firstChild; // 获取到当前元素的第一个子节点(包括空白文本节点)
        alert(fir);
        //firstElementChild获取当前元素的第一个子元素
        /*
         * firstElementChild不支持IE8及以下的浏览器,
         *  如果需要兼容他们尽量不要使用
         */
        fir = phone.firstElementChild;
        alert(fir);
    });
    myClick("btn07",function(){
        var bj = document.getElementById('bj');
        var pn = bj.parentNode;
        alert(pn.innerHTML);
        /*
         * innerText
         *  - 该属性可以获取到元素内部的文本内容
         *  - 它和innerHTML类似,不同的是它会自动将html标签去除
         */
        alert(pn.innerText);
    });
    myClick("btn08",function(){
        var android = document.getElementById('android');
        var ps = android.previousSibling; //前一个兄弟节点(也可能获取到空白的文本)
        alert(ps);
        //previousElementSibling获取前一个兄弟元素,IE8及以下不支持
        var ps = android.previousElementSibling;
        
        alert(ps);
    });
    myClick("btn09",function(){
        var username = document.getElementById('username');
        var um = username.value;
        alert(um);
    });
    myClick("btn10",function(){
        var username = document.getElementById('username');
        username.value = "今天天气真好。";

    });
    myClick("btn11",function(){
        var bj = document.getElementById('bj');
        alert (bj.innerHTML);
        alert (bj.innerText);
        alert(bj.firstChild.nodeValue);
    });
</script>

<pre>
097. 图片切换的练习
</pre>
<div class="img-exercise">
    <p id="infor"></p>
    <img src="images/1.jpg" alt="1" />
    <button id="prev">上一个</button>
    <button id="next">下一个</button>
</div>
<script type="text/javascript">
    console.log("第097");
    
    var prev = document.getElementById('prev');
    var next = document.getElementById('next');
    var img = document.getElementsByTagName('img')[0];
    var imgArray = ["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg"];
    var imgArrayLength = imgArray.length;
    var infor = document.getElementById('infor');
    var index = 0;
    infor.innerHTML = "一共"+imgArrayLength+"张图片,当前是第"+(index+1)+"张。";
    prev.onclick = function(){
        index--;
        if(index <0 ){
            index = imgArrayLength -1;
        }
        img.src = imgArray[index];
        infor.innerHTML = "一共"+imgArrayLength+"张图片,当前是第"+(index+1)+"张。";
    }
    next.onclick = function(){
        index++;
        if(index > imgArrayLength -1 ){
            index = 0;
        }
        img.src = imgArray[index];
        infor.innerHTML = "一共"+imgArrayLength+"张图片,当前是第"+(index+1)+"张。";
    }
</script>

<pre>
098. 全选练习1
</pre>
<pre>
099. 全选练习2
</pre>
<pre>
100. 全选练习3
</pre>
<form method="post" action="">
    <p>你爱好的运动是?<input type="checkbox" id="checkedAllBox" />全选/全不选 </p>
    <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="sendBtn" value="提 交" />
</form>
<script type="text/javascript">
    console.log("第098,099,100");
    
    function inClick(inBtn,fun){
        var inBtn = document.getElementById(inBtn);
        inBtn.onclick = fun;
    };
    
    function moreSelect(){
        var items = document.getElementsByName('items');
        var itemsLength = items.length;
        var checkedAllBox = document.getElementById('checkedAllBox');
        // 全选
        inClick('checkedAllBtn',function(){
            for(var i=0;i<itemsLength;i++){
                items[i].checked = true;
            }
            checkedAllBox.checked = true;
        })
        // 全不选
        inClick('checkedNoBtn',function(){
            for(var i=0;i<itemsLength;i++){
                items[i].checked = false;
            }
            checkedAllBox.checked = false;
        })
        // 反选
        inClick('checkedRevBtn',function(){
            for(var i=0;i<itemsLength;i++){
                /*if(items[i].checked){
                    items[i].checked = false;
                }else{
                    items[i].checked = true;
                }*/
                items[i].checked = !items[i].checked;
            }
            checkedAllBox.checked = !checkedAllBox.checked;
        })
        // 提交
        inClick('sendBtn',function(){
            for(var i=0;i<itemsLength;i++){
                if(items[i].checked){
                    alert(items[i].value);
                }
            }
        })
        // 全选/全不选
        inClick('checkedAllBox',function(){
            for(var i=0;i<itemsLength;i++){
                items[i].checked = this.checked;
            }
        })
        // items点击
        /*
         * 如果四个多选框全都选中,则checkedAllBox也应该选中
         * 如果四个多选框没都选中,则checkedAllBox也不应该选中
         */
        for(var i=0;i<itemsLength;i++){
            items[i].onclick = function(){
                checkedAllBox.checked = true;
                for (var j=0; j<items.length; j++) {
                    if(!items[j].checked){
                        checkedAllBox.checked = false;
                        break;
                    }
                }
            }
        }
    }
</script>

<pre>
附加:window.onload 加载多个函数的的两种方法
</pre>
<script type="text/javascript">
    function a(){
        console.log("a");
    }
    function b(){
        console.log("b");
    }
    function c(){
        console.log("c");
    }
    //1
    window.onload =function() { 
        a();
        b(); 
        c();
    }
    //2
    function addLoadEvent(func) {
      var oldonload = window.onload;
      if (typeof window.onload != 'function') {
        window.onload = func;
      } else {  
        window.onload = function() {
          oldonload();
          func();
        }
      }
    }
    
    addLoadEvent(a);
    addLoadEvent(b);
    addLoadEvent(c);
    addLoadEvent(btn003);
    addLoadEvent(moreSelect);
</script>

</body>
</html>

所有基础课程链接:


 1.JavaScript基础视频教程总结(001-010章)           2.JavaScript基础视频教程总结(011-020章)          3. JavaScript基础视频教程总结(021-030章)        4. JavaScript基础视频教程总结(031-040章)

5. JavaScript基础视频教程总结(041-050章)           6. JavaScript基础视频教程总结(051-060章)         7. JavaScript基础视频教程总结(061-070章)        8. JavaScript基础视频教程总结(071-080章)

9. JavaScript基础视频教程总结(081-090章)          10. JavaScript基础视频教程总结(091-100章)        11. JavaScript基础视频教程总结(101-110章)      12. JavaScript基础视频教程总结(111-120章)

13. JavaScript基础视频教程总结(121-130章)        14. JavaScript基础视频教程总结(131-140章)


 另外,欢迎关注我的新浪微博

posted on 2019-01-18 15:23  前端小小匠  阅读(538)  评论(2编辑  收藏  举报