javascript小结

jluzh00

2019-06-27

一.简介

javascript是一种解释性的脚本语言（代码不进行编译），主要用来向HTML页面添加交互行为，主要由三
部分组成:ECMAScript（JS核心，包含基本语法）,DOM（文档对象模型）,BOM（浏览器对象模型）
js是一种弱类型语言，可用var修饰所有的变量（不加var时是全局变量）

二.js常见事件

onload:页面或图片加载完成时        onsubmit：点击提交按钮时（注意是在form添加）
onclick：鼠标点击对象时            onerror：加载文档或图片错误时
onchange：框内容改变时             oncelect：文本被选择时

三.DOM中的常见方法
javascript小结

DOM常见的对象有Document，element，attribute等

1.Document对象

（1）getElementById（）：返回指定id的第一个对象的引用
       （2）getelementByName（）：返回带有指定名称的对象集合
       （3）getElementByTagName（）：返回带有指定标签名的对象集合
       （4）createTextNode():创建文本节点
       （5）createElement（）：创建元素节点

2.element对象

（1）element.firstChild():返回首个子元素
       （2）element.innerHTML（）：设置或返回元素的内容

3.attribute对象

（1）attr.value   设置或返回属性的值

四.BOM中常见的方法

BOM中常见的对象有Window,History,Location等

1.window对象中的方法

（1）alert() :弹出             （2）setInterval(): 指定周期调用函数   
    （3）clearInterval():取消定时器（4）setTimeOut()：指定事件后执行（只执行一次）
    （5）confirm():弹出确认对话框  （5）prompt（）：弹出一个输入对话框

2.history对象中的方法（history包含用户访问过的url）

（1）back（）：加载history列表中的第一个url
        （2）forward（）:加载history列表的下一个url
        （3）go（）：加载history列表中的摸个具体页面

3.location对象中的方法（包含当前url信息）

（1）href（）：设置或返回完整的url

五.js操作的一般步骤

确定事件并为其绑定一个函数，然后书写绑定的这个函数

六.js实现轮播图（粗糙版）

（1）在body上绑定onload事件 `<body onload="init()">`
（2）书写绑定函数

<script>
        
            function init(){
                window.setInterval("changeImage()",2000);//定时操作
            }
            var i =0;
            function changeImage(){
                i = i+1;
                var image = document.getElementById("image").src="images/"+i+".jpg";
                if(i == 3){
                    i = 0;
                }
            }
        </script>

七.（demo）实现广告的定时弹出

目的：加载页面后三秒弹出广告，三秒后再消失

<script>
        
            function init(){
                window.setInterval("changeImage()",2000);
                show = window.setInterval("showImage()",3000);
        
            }
        
            function showImage(){
                var image = document.getElementById("image").style.display="block";
                clearInterval(show);//清除定时显示图片操作
                time = setInterval("hiddenImage()",3000)
            }
            function hiddenImage(){
                var image = document.getElementById("image").style.display="none";
                clearInterval(time);//清除隐藏广告的定时操作
            }
        </script>

八.（demo）完成全选和全不选

<script>
            function checkAll(){
                //1.获取编号前面的复选框
                var checkAllEle = document.getElementById("checkAll");
                //2.对编号前面复选框的状态进行判断
                if(checkAllEle.checked==true){
                    //3.获取下面所有的复选框
                    var checkOnes = document.getElementsByName("checkOne");
                    //4.对获取的所有复选框进行遍历
                    for(var i=0;i<checkOnes.length;i++){
                        //5.拿到每一个复选框，并将其状态置为选中
                        checkOnes[i].checked=true;
                    }
                }else{
                    //6.获取下面所有的复选框
                    var checkOnes = document.getElementsByName("checkOne");
                    //7.对获取的所有复选框进行遍历
                    for(var i=0;i<checkOnes.length;i++){
                        //8.拿到每一个复选框，并将其状态置为未选中
                        checkOnes[i].checked=false;
                    }
                }
            }
        </script>

element