欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-02 17:00:06
091-100章总结 091. DOM简介 什么是DOM • DOM,全称Document Object Model文档对象模型。 • JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。 • 文档– 文档表示的就是整个的HTML网页文档 • 对象– 对象表示将... ......
<!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>