JavaScript基础知识_笔记_02

DOM

Document Object Model

文档对象模型,通过DOM可以来任意来修改网页中各个内容

  • 文档

    文档指的是网页,一个网页就是一个文档
    
  • 对象

      对象指将网页中的每一个节点都转换为对象
      转换完对象以后,就可以以一种纯面向对象的形式来操作网页了
    
  • 模型

      模型用来表示节点和节点之间的关系,方便操作页面
    
  • 节点(Node)

      节点是构成网页的最基本的单元,网页中的每一个部分都可以称为是一个节点
      虽然都是节点,但是节点的类型却是不同的
    
    • 常用的节点

        1.文档节点 (Document),代表整个网页
        2.元素节点(Element),代表网页中的标签
        3.属性节点(Attribute),代表标签中的属性
        4.文本节点(Text),代表网页中的文本内容
      
  • DOM操作

      1. DOM查询
      	在网页中浏览器已经为我们提供了document对象,
      	它代表的是整个网页,它是window对象的属性,可以在页面中直接使用。
      	(1)document查询方法:
      	- 根据元素的id属性查询一个元素节点对象:
      		- document.getElementById("id属性值");
      	- 根据元素的name属性值查询一组元素节点对象:
      		- document.getElementsByName("name属性值");
      	- 根据标签名来查询一组元素节点对象:
      		- document.getElementsByTagName("标签名");
      		
      2.元素的属性:
      	(1)读取元素的属性:
      		语法:元素.属性名
      		例子:ele.name  
      			  ele.id  
      			  ele.value 
      			  ele.className
      			  
      	(2)修改元素的属性:
      		语法:元素.属性名 = 属性值
      		
      	- innerHTML
      		- 使用该属性可以获取或设置元素内部的HTML代码
    
  • 事件(Event)

      事件指的是用户和浏览器之间的交互行为。比如:点击按钮、关闭窗口、鼠标移动。。。
      我们可以为事件来绑定回调函数来响应事件。
      
      绑定事件的方式:
      	1.可以在标签的事件属性中设置相应的JS代码
      		例子:
      			<button onclick="js代码。。。">按钮</button>
      	2.可以通过为对象的指定事件属性设置回调函数的形式来处理事件
      		例子:
      			<button id="btn">按钮</button>
      			<script>
      				var btn = document.getElementById("btn");
      				btn.onclick = function(){
      				
      				};
      			</script>
    
  • 文档的加载

      浏览器在加载一个页面时,是按照自上向下的顺序加载的,加载一行执行一行。
      如果将js代码编写到页面的上边,当代码执行时,页面中的DOM对象还没有加载,
      此时将会无法正常获取到DOM对象,导致DOM操作失败。
      解决方式一:
      	 可以将js代码编写到body的下边
      	<body>
      		<button id="btn">按钮</button>
      		<script>
      			var btn = document.getElementById("btn");
      			btn.onclick = function(){
      			
      			};
      		</script>
      	</body>
      	
       解决方式二:
      	 将js代码编写到window.onload = function(){}中
      	 window.onload 对应的回调函数会在整个页面加载完毕以后才执行,
      		所以可以确保代码执行时,DOM对象已经加载完毕了
      	<script>
      		window.onload = function(){
      			var btn = document.getElementById("btn");
      			btn.onclick = function(){
      			
      			};
      		};
      	
      	</script>	
    

  1. DOM查询

    通过具体的元素节点来查询
    	元素.getElementsByTagName()
    通过标签名查询当前元素的指定后代元素
    	 元素.childNodes
    		- 获取当前元素的所有子节点
    		- 会获取到空白的文本子节点
    
    	 元素.children
    		- 获取当前元素的所有子元素
    
       元素.firstChild
    		- 获取当前元素的第一个子节点
    
    	 元素.lastChild
    		- 获取当前元素的最后一个子节点
    
    	 元素.parentNode
    		- 获取当前元素的父元素
    
    	 元素.previousSibling
    		- 获取当前元素的前一个兄弟节点
    
    	 元素.nextSibling
    		- 获取当前元素的后一个兄弟节点
    

    innerHTMLinnerText

    这两个属性并没有在DOM标准定义,但是大部分浏览器都支持这两个属性
    两个属性作用类似,都可以获取到标签内部的内容,
    	不同是innerHTML会获取到html标签,而innerText会自动去除标签
     如果使用这两个属性来设置标签内部的内容时,没有任何区别的	
    
  • 读取标签内部的文本内容

     <h1>h1中的文本内容</h1>
     元素.firstChild.nodeValue
    
    • document对象的其他的属性和方法
      document.all

        获取页面中的所有元素,相当于document.getElementsByTagName("*");
      

      document.documentElement

        获取页面中html根元素
      

      document.body

        获取页面中的body元素
      

      document.getElementsByClassName()

        根据元素的class属性值查询一组元素节点对象
        这个方法不支持IE8及以下的浏览器
      

      document.querySelector()

        根据CSS选择器去页面中查询一个元素
        如果匹配到的元素有多个,则它会返回查询到的第一个元素	
      

      document.querySelectorAll()

        根据CSS选择器去页面中查询一组元素
        会将匹配到所有元素封装到一个数组中返回,即使只匹配到一个
      

    2.DOM修改
    document.createElement()

    可以根据标签名创建一个元素节点对象

    document.createTextNode()

    可以根据文本内容创建一个文本节点对象

    父节点.appendChild(子节点)

    向父节点中添加指定的子节点

    父节点.insertBefore(新节点,旧节点)

    将一个新的节点插入到旧节点的前边

    父节点.replaceChild(新节点,旧节点)

    使用一个新的节点去替换旧节点

    父节点.removeChild(子节点)

     删除指定的子节点
     推荐方式:子节点.parentNode.removeChild(子节点)
    

DOM对CSS的操作
  • 读取和修改内联样式
    使用style属性来操作元素的内联样式

    • 读取内联样式:

      语法:元素.style.样式名
      例子:
      元素.style.width
      元素.style.height
      注意:如果样式名中带有-,则需要将样式名修改为驼峰命名法
      -去掉,然后-后的字母改大写
      比如:background-color --> backgroundColor
      border-width —> borderWidth

    • 修改内联样式:
      语法:元素.style.样式名 = 样式值
      通过style修改的样式都是内联样式,由于内联样式的优先级比较高,
      所以我们通过JS来修改的样式,往往会立即生效,
      但是如果样式中设置了!important,则内联样式将不会生效。

    • 读取元素的当前样式

      • 正常浏览器

        • 使用getComputedStyle()
        • 这个方法是window对象的方法,可以返回一个对象,这个对象中保存着当前元素生效样式
        • 参数:
          1.要获取样式的元素
          2.可以传递一个伪元素,一般传null
        • 例子:
          获取元素的宽度
          getComputedStyle(box , null)["width"];
        • 通过该方法读取到样式都是只读的不能修改
      • IE8

        • 使用currentStyle
        • 语法:
          元素.currentStyle.样式名
        • 例子:
          box.currentStyle["width"]
        • 通过这个属性读取到的样式是只读的不能修改
    • 其他的样式相关的属性
      注意:以下样式都是只读的

      clientHeight

        元素的可见高度,指元素的内容区和内边距的高度
      

      clientWidth

        元素的可见宽度,指元素的内容区和内边距的宽度
      

      offsetHeight

        整个元素的高度,包括内容区、内边距、边框
      

      offfsetWidth

        整个元素的宽度,包括内容区、内边距、边框
      

      offsetParent

        当前元素的定位父元素
        离它最近的开启了定位的祖先元素,如果所有的元素都没有开启定位,则返回body
      

      offsetLeft
      offsetTop

        当前元素和定位父元素之间的偏移量
        offsetLeft水平偏移量  offsetTop垂直偏移量
      

      scrollHeight scrollWidth

        获取元素滚动区域的高度和宽度
      

      scrollTop scrollLeft

        获取元素垂直和水平滚动条滚动的距离
      

      判断滚动条是否滚动到底

      • 垂直滚动条
        scrollHeight - scrollTop = clientHeight

      • 水平滚动
        scrollWidth - scrollLeft = clientWidth

    事件(Event)
    • 事件对象

当响应函数被调用时,浏览器每次都会将一个事件对象作为实参传递进响应函数中,
这个事件对象中封装了当前事件的相关信息,比如:鼠标的坐标,键盘的按键,鼠标的按键,滚轮的方向。

 可以在响应函数中定义一个形参,来使用事件对象,但是在IE8以下浏览器中事件对象没有做完实参传递,而是作为window对象的属性保存
	- 例子:
		元素.事件 = function(event){
			event = event || window.event;
			
		};
		
		元素.事件 = function(e){
			e = e || event;
			
		};
  • 事件的冒泡(Bubble)
    • 事件的冒泡指的是事件向上传导,当后代元素上的事件被触发时,将会导致其祖先元素上的同类事件也会触发。
    • 事件的冒泡大部分情况下都是有益的,如果需要取消冒泡,则需要使用事件对象来取消
    • 可以将事件对象的cancelBubble设置为true,即可取消冒泡
      • 例子:
	元素.事件 = function(event){
			event = event || window.event;
			event.cancelBubble = true;
		};
  • 事件的委派

指将事件统一绑定给元素共同的祖先,这样当后代元素上的事件触发,会一直冒泡到祖先元素,从而通过祖先元素的响应函数来处理事件

事件的委派利用了冒泡,通过委派可以减少事件绑定的次数,提高程序的性能
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>事件的委派</title>
<style>
    

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

	window.onload = function(){

        /* 
            点击按钮以后添加超链接
         */
        var btn01 = document.getElementById("btn01");
        btn01.onclick = function(){
            var u1 = document.getElementById("u1");
            //alert("添加一个超链接");
            var li = document.createElement("li");
            li.innerHTML = "<a href='#'>超链接四</a>";
            
            u1.appendChild(li);


        };

        /* 
            为每一个超链接绑定单击响应函数
         */
         //获取所有a
         var allA = document.getElementsByTagName("a");
         //遍历
         /* 
            for循环里 为每一个超链接绑定单击响应函数,但是新添加的超链接必须重新绑定
          */
        /*  for(var i=0; i<allA.length; i++)
         {
             allA[i].onclick = function(){
                alert("aaaa");

             };
         } */
         /* 
            我们希望,只绑定一次超链接即可应用到多个元素上,即使元素是后添加的
            我们可以尝试将其绑定给元素共同的祖先ul

            事件的委派
                指将事件统一绑定给元素共同的祖先,这样当后代元素上的事件触发,会一直冒泡到祖先元素
                从而通过祖先元素的响应函数来处理事件
            事件的委派利用了冒泡,通过委派可以减少事件绑定的次数,提高程序的性能
          */
          //为ul绑定单击响应函数
          u1.onclick = function () {  
              event = event || window.event;
              /* 
                target
                    event中的target表示触发事件的对象
               */
               alert(eval.target);
              /* 
                如果触发事件的对象是我们期望元素则执行否则不执行

               */
               if(event.target.className == "link")
               {
                    alert("aaa");
               }
                
          };

	};

	
</script>
</head>
<body>
    <button id="btn01">添加超链接</button>
  <ul id="u1">
      <li ><a href="#" class="link">超链接一</a>
      <li ><a href="#">超链接二</a>
      <li ><a href="#">超链接三</a>
    
  </ul>
</body>
</html>

  • 事件的绑定
 //为btn01绑定一个单击响应函数
        /* 
            使用对象.事件 = 函数的形式绑定响应函数
            它只能同时为一个元素的一个事假绑定一个响应函数
             btn01.onclick = function(){
            alert(1);
         };
         btn01.onclick = function(){
            alert(2);
        };  

        第二个会覆盖第一个
addEventListener()
通过这个方法也可以为元素绑定事件响应函数
     参数:
           第一个:事件的字符串,不要on,如click
           第二个:回调函数,当事件触发时,该函数会调用
           第三个:是否在捕获阶段触发事件,需要一个布尔值,一般都传false
        使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数
        这样当事件触发时,响应函数将会按照函数的绑定顺序执行
btn01.addEventListener("click", function(){
            alert(this);
        }, false);
attachEvent()
在IE8中可以使用attachEvent()来绑定事件
            参数:
                第一个:事件的字符串,要on
                第二个:回调函数
        这个方法也可以同时为一个事件绑定多个处理函数,
        不同的是它是后绑定先执行,执行顺序和 addEventListener()相反 
 //适用于IE8
         btn01.attachEvent("onclick",function(){
            alert(this);
         });

addEventListener()中的this,是绑定事件的对象
attachEvent()中的this,是window
需要统一两个方法的this

/* 
            定义函数,用来指定为元素绑定响应函数
            参数:
            obj:要绑定事件的对象
            eventStr:事件的字符串 (不要on)
            callback:回调函数
          */

    function bind(obj, eventStr, callback){
        if(onj.addEventListener)
        {
            //大部分浏览器兼容的方式
            obj.addEventListener(eventStr, callback, false);
        }
        else
        {
            //this是谁由调用方式决定
            //callback.call(obj);
            //IE8及以下
            obj.attachEvent("on"+eventStr, function(){
                callback.call(obj);//将this的指向改为obj
            });
        }
    }
  • 事件的传播
    W3C将事件的传播分为三个阶段

       1.捕获阶段
             在捕获阶段是从最外层的祖先元素,向目标元素进行事件的捕获,但是默认此时不会触发事件
       2.目标阶段
              事件捕获到目标元素,捕获结束开始在目标元素上触发事件
       3.冒泡阶段
               事件从目标元素向祖先元素传递,依次触发祖先元素上的事件
    
      如果希望在捕获阶段就触发事件,可以将addEventListener()的第三个参数设置为true
          一般情况下我们不会希望在捕获阶段触发事件,所以这个参数一般都是false
    
      在IE8及以下浏览器中没有捕获阶段
    
  • 拖拽
    拖拽的流程
    1.挡鼠标在拖拽元素按下时,开始拖拽 onmousedown
    2.当鼠标移动时,拖拽元素跟随鼠标移动 onmousemove
    3.当鼠标松开时,被拖拽元素固定在当前位置 onmouseup

	var box1 = document.getElementById("box1");
        box1.onmousedown = function(){
            //alert("鼠标按下,开始拖拽");
            //为document绑定一个onmousemove
            document.onmousemove = function(event){
                event = event || window.event;
                //获取鼠标坐标
                var left = event.clientX;
                var top = event.clientY;
                //修改box1位置
                box1.style.left = left + "px";
                box1.style.top = top + "px";
                

            };
           //当鼠标松开时,被拖拽元素固定在当前位置    onmouseup
           document.onmouseup = function(){
                //取消document的onmousemove事件
                document.onmousemove = null;
                document.onmouseup = null;
           };
        };

  • 滚轮事件
    当鼠标滚轮向下滚动时,box1边长,当滚轮向上滚动时,box1变短
var box1 = document.getElementById("box1");
        //为box1绑定滚轮滚动事件,但火狐里不支持该属性
        /* 
            在火狐里需要使用DOMMouseScroll来绑定滚动事件
            注意该事件需要通过addEventListener()函数来绑定
         */
        box1.onmousewheel = function(event){
            event = event || window.event;
            //alert("滚了~~");
            /* 
                判断鼠标滚动方向
            */
            //event.wheelDate可以获取鼠标滚轮滚动的方向
            //wheelDate这个值只看正负,不看大小,正:往上滚 120,负:往下滚 -120
            //wheelDate这个属性火狐不支持,在火狐中使用event.detail来获取滚动的方向
            //alert(event.wheelDate);
            //alert(event.detail);
            if(event.wheelDate > 0 || event.detail < 0)
            {
                //向上滚,box1变短
                box1.style.height = box1.clientHeight - 10 + "px";
            }
            else{
               //向下滚,box1变长
               box1.style.height = box1.clientHeight + 10 + "px";
            }
            /* 
                使用addEventListener()方法绑定响应函数,取消默认行为是不能使用return false
                需要使用event来取消默认行为
                event.preventDefault();//但是IE8里不能用
             */
             event.preventDefault && event.preventDefault();//如果有这个属性则使用这个方法
            /* 
                当滚轮滚动时,如果浏览器有滚动条,滚动条会随之滚动
                这是浏览器的默认行为,如果不希望发生则可以取消return false

             */
             return false;
        };
  • 键盘事件
    键盘事件
    onkeydown : 按键被松开,一直按着某个按键不松手,则事件会一直触发
    当onkeydown连续触发时,第一次和第二次间隔稍微长一点,之后会很快
    这种设计是为了防止误操作的发生
    onkeyup : 按键被松开

         键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document
    

    可以一个keyCode来获取按键的编码
    通过它可以判断哪个按键被按下
    除了keyCode,事件对象中还提供了几个属性
    altKey ctrlKey shiftKey
    这三个用来判断alt、ctrl、shift是否被按下,如果按下则返回true,否则返回false

      在文本框中输入内容,属于onkeydown的默认行为
      如果在onkeydown中取消了默认行为,则输入的内容不会出现在文本框中
    
window.onload = function(){
        /* 
           键盘事件
           onkeydown : 按键被松开,一直按着某个按键不松手,则事件会一直触发
                        当onkeydown连续触发时,第一次和第二次间隔稍微长一点,之后会很快
                        这种设计是为了防止误操作的发生
           onkeyup : 按键被松开

           键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document
        */
        document.onkeydown = function(event){
            event = event || window.event;
            /* 
                可以一个keyCode来获取按键的编码
                通过它可以判断哪个按键被按下
                除了keyCode,事件对象中还提供了几个属性
                    altKey
                    ctrlKey
                    shiftKey
                    这三个用来判断alt、ctrl、shift是否被按下,如果按下则返回true,否则返回false
            */
            //判断y是否被按下
           /*  if(event.keyCode == 89  )
            {
                console.log("y被按下了~~");
            } */
            //判断y和ctrl是否同时被按下
            
            if(event.keyCode == 89 && event.ctrlKey)
            {
                console.log("y和ctrl被按下了~~");
            }
             console.log(event.keyCode);//按下a 会出现65
        };
       /*  document.onkeyup = function(){

        };
         */
         //获取Input
         var input = document.getElementsByTagName("input")[0];
         input.onkeydown = function (event) {  
             //使文本框中不能输入数字
             event = event || window.event;
             //数字的keyCode是48 - 57
             if(event.keyCode >= 48 && event.keyCode <= 57)
             {
                 return false;
             }

            /* 
                在文本框中输入内容,属于onkeydown的默认行为
                如果在onkeydown中取消了默认行为,则输入的内容不会出现在文本框中
             */
             //return false;
         };
	};

键盘练习事件:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>键盘事件练习</title>
<style>
    
    #box1{
        width: 100px;
        height: 100px;
        background-color:red;
        position: absolute;
    }

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

	window.onload = function(){
    /* 
        使div可以根据不同的方向键向不同的方向移动
        
        
        左:37
        上:38
        右:39
        下:40
    */
    var box1 = document.getElementById("box1");
        //为document绑定按键事件
        document.onkeydown = function(event){
            event = event || window.event;

            //定义一个变量表示移动速度
            var speed = 10;

            //当用户按了ctrl以后,速度加快
            if(event.ctrlKey )
            {
                speed = 50;
            }
           // console.log(event.keyCode);
           switch(event.keyCode){
                case 37:
                    //alert("向左");left值减小
                    box1.style.left = box1.offsetLeft - speed +"px";
                   
                    break;              
                case 39:
                    box1.style.left = box1.offsetLeft + speed +"px";
                    break;
                case 38:
                    //alert("向上");
                    box1.style.Top = box1.offsetTop - speed +"px";
                    break;
                case 40:
                    box1.style.Top = box1.offsetTop + speed +"px";
                        //alert("向下");
                    break;
           }


        };
	};
    

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

BOM

  • BOM
    浏览器对象模型
    BOM可以使我们通过JS来操作浏览器
    在BOM中为我们提供了一组对象,用来完成对浏览器的操作

  • BOM对象:
    Window

     代表的是整个浏览器窗口,同时window也是网页中的全局对象
    

    Navigator

      代表的是当前浏览器的信息,提供该对象可以识别不同的浏览器;
      可以通过userAgent获取到的信息来判断浏览器的不同
    

    Location

      代表当前浏览器的地址栏信息。提供Location可以获取地址栏信息,或者操作浏览器跳转页面
    

    History

    代表浏览器的历史记录,可以通过该对象来操作浏览器的历史记录
    由于隐私的原因,该对象不能获取到具体的历史记录,只能操作浏览器向前或向后翻页, 而且该操作只在当次访问时有效
    

Screen

代表用户屏幕的信息,通过该对象可以获取用户显示器的相关信息
这些BOM对象在浏览器中都是作为window对象的属性保存的,可以通过window对象来使用,也可以直接使用
console.log(location);
console.log(window.navigator);

	
		
		//如果通过userAgent不能判断,还可以通过浏览器中特有的对象来判断浏览器的信息
        比如:ActiveXObject

	var ua = navigator.userAgent;

     console.log(ua);
     if(/chrome/i.test(ua))//判断浏览器是否为chrome浏览器
     {
         alert("我是谷歌");
     }
     else if(/firefox/i.test(uua))
     {
         alert("我是火狐");
     }
     else if(/msie/i.test(ua))
     {
        alert("我是IE");
     }
     else if("ActiveXObject" in window){//检查ActiveXObject是否存在于浏览器中,存在则为true,否则为false
         alert("我是IE11");
     }
     
  1. History

     对象可以用来操作浏览器向前或者向后翻页
    
 alert(history.length);
length
    属性:可以获取到当前访问链接的数量

back()
    方法:可以用来回退到上一个页面,作用和浏览器的回退按钮一样
forward()
    可以跳转到下一个页面,作用和浏览器的前进按钮一样
go()
    可以用来跳转到指定页面
     它需要一个整数作为参数
         1:表示向前跳转一个页面,相当于forward()
         2:表示向前跳转两个页面
        -1:向后跳转一个页面
  1. Location
    该对象中封装浏览器的地址栏的信息
如果直接打印location,可以直接获取到地址栏的信息(当前页面的完整的路径)
alert(location);//http://127.0.0.1:5500/Day4/Location.html
如果直接将location修改为一个完整的路径或一个相对路径,则页面会自动跳转至该路径,并且会生成相应的历史记录
	location = "BOM.html";//跳转到此页面
assign():用来跳转到其他的页面,作用和直接修改location一样
	location.assign("BOM.html");
replace():可以使用新的页面替换当前页面,调用完毕会跳转页面,不会生成历史记录,不能使用回退按钮回退
	location.replace("BOM.html");
reload():刷新,重新加载当前页面,如果在方法中传递一个true作为参数,则会强制清空缓存
	location.reload();

定时器

setInterval():定时调用

 可以将一个函数每隔一段时间执行一次
  参数:
     1.回调函数,该函数会每每隔一段时间被调用一次
     2.每次调用间隔的时间,单位是毫秒
        
     返回值
        返回一个Number类型的数据,这个数字用来作为定时器的唯一标识
	var num = 1;
    var timer = setInterval(function(){
        count.innerHTML = num++;
        if(num == 11)
        {
            //关闭定时器
            clearInterval(timer);
        }
    }, 500);

    //可以用来关闭浏览器
    //方法中需要一个定时器的标识作为参数,这样讲关闭标识对应的定时器
    //clearInterval();//可以用来关闭浏览器

图片切换练习

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>切换图片练习</title>

<script type="text/javascript">
  
    window.onload = function(){
        
        /* 
            使图片可以自动切换
         */
         var img1 = document.getElementById("img1");
         //创建一个数组,保存图片路径
         var imgArr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"];
         //创建变量保存当前图片的索引
         var index = 0;

        //定义变量用来保存定时器的标识
         var timer;

         var btn01 = document.getElementById("btn01");
         btn01.onclick = function(){
             /* 
                目前我们每点击一次按钮,就会开启一个定时器
                点击多次就会开启多个定时器,这就导致图片的切换速度过快,
                并且我们只能关闭最后一次开启的定时器
              */
              //在开启定时器之前,需要将当前元素上的其他定时器关闭
              clearInterval(timer);
             /* 
                开启一个定时器,来自动切换图片
            */
             timer = setInterval(function(){
                //使索引自增
                index++;
                
                //判断索引是否超过最大索引
                /* if(index >= imgArr.length)
                {
                    index = 0;
                } */
                index %= imgArr.length;
                img1.src = imgArr[index];
            }, 600);

        
         };

        var btn02 = document.getElementById("btn02");
        btn02.onclick = function(){
            //点击按钮之后停止图片的自动切换,关闭定时器
            /* 
                clearInterval()可以接收任意参数
                如果参数是一个有效的定时器标识,则停止对应的定时器,反之则什么也不动
             */
            clearInterval(timer);

        };

    };
   

	
</script>
</head>
<body>
   <img id = "img1" src="img/1.jpg">
   <br><br>
   <button id="btn01">开始</button>
   <br><br>
   <button id="btn02">停止</button>
</body>
</html>

移动div练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
			
			
		</style>
		
		<script type="text/javascript">
			
			//使div可以根据不同的方向键向不同的方向移动
			/*
			 * 按左键,div向左移
			 * 按右键,div向右移
			 * 。。。
			 */
			window.onload = function(){
				
			
					
				//定义一个变量,来表示移动的速度
				var speed = 10;
				
				//创建一个变量表示方向
				//通过修改dir来影响移动的方向
				var dir = 0;
				
				//开启一个定时器,来控制div的移动
				setInterval(function(){
					/*
					 * 37 左 65A
					 * 38 上 87W
					 * 39 右 68D
					 * 40 下 83S
					 因为方向右键坏了,所以这里用WASD代替上左下右
					 */
					switch(dir){
						case 65:
							//alert("向左"); left值减小
							box1.style.left = box1.offsetLeft - speed + "px";
							break;
						case 68:
							//alert("向右");
							box1.style.left = box1.offsetLeft + speed + "px";
							break;
						case 87:
							//alert("向上");
							box1.style.top = box1.offsetTop - speed + "px";
							break;
						case 83:
							//alert("向下");
							box1.style.top = box1.offsetTop + speed + "px";
							break;
					}
				},30);
				
				
				
				//为document绑定一个按键按下的事件
				document.onkeydown = function(event){
					event = event || window.event;
					
					//当用户按了ctrl以后,速度加快
					if(event.ctrlKey){
						speed = 500;
					}else{
						speed = 10;
					}
					
					//使dir等于按键的值
					dir = event.keyCode;
				};
				
				//当按键松开时,div不再移动
				document.onkeyup = function(){
					//设置方向为0
					dir = 0;
				};
				
			};
			
			
		</script>
	</head>
	<body>
		<div id="box1"></div>
	</body>
</html>

延时调用

  • 一个函数不马上执行,而是隔一段时间以后再执行,而且只会执行一次
  • 延时调用(setTimeoutclearTimeout)和定时调用(setIntervalclearInterval)的区别
    • 定时调用会执行多次,延时调用只会执行一次
    • 延时调用和定时调用实际上是可以互相代替的,在开发中可以根据自己需要去选择
var timer = setTimeout(function(){
				console.log(num++);
			},3000);
			
			//使用clearTimeout()来关闭一个延时调用
			clearTimeout(timer);
JSON
  • JS中的对象只有JS自己认识,其他的语言都不认识
    JSON就是一个特殊格式的字符串,这个字符串可以被任意的语言所识别,
    并且可以转换为任意语言中的对象,JSON在开发中主要用来数据的交互
    JSON
    JavaScript Object Notation JS对象表示法
    JSON和JS对象的格式一样,只不过JSON字符串中的属性名必须加双引号
    其他的和JS语法一致
    • JSON分类:
	1.对象 {}
	2.数组 []
  • JSON中允许的值:
		1.字符串
		2.数值
		3.布尔值
		4.null
		5.对象
		6.数组
JSON字符串转换为JS中的对象
		在JS中,为我们提供了一个工具类,就叫JSON
		这个对象可以帮助我们将一个JSON转换为JS对象,也可以将一个JS对象转换为JSON
 json --> js对象
		`JSON.parse()`
		- 可以将以JSON字符串转换为js对象
		- 它需要一个JSON字符串作为参数,会将该字符串转换为JS对象并返回
		var o = JSON.parse(json);
		var o2 = JSON.parse(arr);
JS对象 ---> JSON
		`JSON.stringify()`
		 - 可以将一个JS对象转换为JSON字符串
		 - 需要一个js对象作为参数,会返回一个JSON字符串
		var str = JSON.stringify(obj3);
注:JSON这个对象在IE7及以下的浏览器中不支持,所以在这些浏览器中调用时会报错
eval()
这个函数可以用来执行一段字符串形式的JS代码,并将执行结果返回
如果使用eval()执行的字符串中含有{},它会将{}当成是代码块
如果不希望将其当成代码块解析,则需要在字符串前后各加一个()
eval()这个函数的功能很强大,可以直接执行一个字符串中的js代码,
但是在开发中尽量不要使用,首先它的执行性能比较差,然后它还具有安全隐患	
<!--
	如果需要兼容IE7及以下的JSON操作,则可以通过引入一个外部的js文件来处理
-->
<script type="text/javascript" src="js/json2.js"></script>
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页