day28-JavaScript对象

作者: xdxh | 来源:发表于2018-11-06 20:43 被阅读0次

一、浏览器中的JavaScript

1.JavaScript的对象

浏览器中的JavaScript主要包含三个要点：

1.ECMAScript:JavaScript语法规范。
2.BOM:浏览器对象模型(Browser Object Model)，把浏览器当成一个对象(window)，通过这个对象可以操控浏览器。
3.DOM:文档对象模型(Document Object Model)，把整个页面当成一个对象(document)，通过这个对象可以操作整个页面。

二、延时跳转

1.location属性

window对象的location属性代表浏览器地址栏。

2.arguments对象

a.arguments是函数中的隐含对象。
b.arguments.callee代表正在被调用的函数。
c.通过arguments.callee可以获得正在被调用的函数。

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>延时跳转</title>
    </head>
    <body>
        <h3><span id="counter">5</span>秒钟以后自动跳转到百度</h3>
        <script type="text/javascript">
            /*
            function add(){
                // 对象 -> 伪数组
                window.alert(arguments.callee)
                return arguments[0] + arguments[1];
            }
            
            window.alert(add(1,2));
            */


            var countDown = 5;
            var span = document.getElementById('counter');
            //设置超时
            window.setTimeout(function() {
                countDown -= 1;
                if (countDown ==0){
                    //window对象的location属性代表浏览器地址栏
                    window.location.href = 'https://www.baidu.com';
                }else{
                    span.textContent = countDown;
                    arguments.callee
                    window.setTimeout(arguments.callee,1000)
                }
            },1000);
        </script>
    </body>
</html>

测试结果

1.PNG

三、轮播图

1.通过document对象获取页面元素的常用方法

a.document.getElementById('id') -> 通过ID获取单个元素
b.document.getElementsByTagName('标签名') -> 通过标签名获取元素的列表
c.document.getElementsByClassName('类名') -> 通过类名获取元素的列表
d.document.querySelector('') -> 通过样式表选择器获取单个元素
e.document.querySelectorAll('') -> 通过样式表选择器获取元素的列表

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>轮播图</title>
        <style type="text/css">
            #adv{
                width:940px;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <div id="adv">
            <img src="img/image1.jpg" alt="" width="940px" height="430px"/>
        </div>
        <script type="text/javascript">
            
            var index = 0;
            var images = ['image1.jpg','image2.jpg','image3.jpg','image4.jpg']
            
            var div =  document.querySelector('#adv');
            div.addEventListener('mouseover',stopIt);
            div.addEventListener('mouseout',startIt);
            
            function startIt(){
                timerId = window.setInterval(function() {
                    index += 1;
                    index %= images.length; 
                    img.src = 'img/'+ images[index];
                },2000);
            }
            
            function stopIt(){
                window.clearInterval(timerId);
            }
        </script>
    </body>
</html>

测试结果

3.PNG

四、绑定事件

1.绑定事件的运用

a.当你知道事件发生时要做什么，但是你不知道事件什么时候发生，在这种情况下通常的处理方式都是绑定一个事件回调函数(callback)。
b.closeWindow以及下面的匿名函数都属于事件发生时才执行的回调函数。
c.给okButton绑定click事件的回调函数。

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>绑定事件</title>
    </head>
    <body>
        <button id="ok">确定</button>
        
        <script type="text/javascript">
            var okButton = document.querySelector('#ok');
            
            /*okButton.onclick = function(){
                window.alert('hello,world!');
            };
            
            okButton.onclick = function(){
                if(window.confirm('Close the window?')){
                    window.close();
                }
            };*/

            function closeWindow(){
                if (window.confirm('Close the window?')){
                    //close() -> window.close()
                    window.close();
                }
            }
            
//          okButton.addEventListener('click',closeWindow);

            okButton.addEventListener('click',function(){
                window.alert('hello,world!');
                //okButton.removeEventListener('click',closeWindow);
                okButton.removeEventListener('click',arguments.callee);
            });
            
        </script>
    </body>
</html>

测试结果

4.PNG

五、绑定冒泡捕获事件

1.添加监听事件

addEventListener方法的第一个参数是事件名。
第二个参数是事件发生时需要执行的回调函数。
第三个参数是一个布尔值。

如果是true 表示事件捕获 -> 从外层向内层传递事件
如果是false 表示事件冒泡 -> 从内层向外层传递事件
一般情况下我们事件处理的方式都是事件冒泡(默认行为)。
如果想阻止事件的传播行为可以调用事件对象的stopPropagation方法。

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>绑定冒泡捕获事件</title>
        <style type="text/css">
            #div1{
                width: 400px;
                height: 400px;
                background-color: red;
                position: relative;
                margin: 60px auto;
            }
            
            #div2{
                width: 300px;
                height: 300px;
                background-color: green;
                position: relative;
                top:50px;
                left: 50px;
            }
            
            #div3{
                width: 200px;
                height: 200px;
                background-color: blue;
                position: relative;
                top:50px;
                left: 50px;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2">
                <div id="div3"></div>
            </div>
        </div>
        
        <script type="text/javascript">
            var div1 = document.querySelector('#div1');
            var div2 = document.querySelector('#div2');
            var div3 = document.querySelector('#div3');
            
            //冒泡事件
            div1.addEventListener('click',function(){
                window.alert('I am one!')
            });
            div2.addEventListener('click',function(){
                window.alert('I am two!')
            });
            
            //事件回调函数中的第一个参数是事件对象(封装了和事件相关的信息)
            div3.addEventListener('click',function(evt){
                window.alert('I am three!')
                evt.stopPropagation();
            });
            
            
            /*
            捕获事件
            div1.addEventListener('click',function(){
                window.alert('I am one!')
            },true);
            div2.addEventListener('click',function(){
                window.alert('I am two!')
            },true);
            
            div3.addEventListener('click',function(evt){
                window.alert('I am three!')
            },true);
            */
        </script>
    </body>
</html>

测试结果

5.PNG

六、按钮事件

1.获取时间源

evt.target -> 选中事件源
通过事件对象的target属性可以获取事件源(谁引发了事件)。
但是有的浏览器是通过srcElement属性获取事件源的。
可以通过短路或运算来解决这个兼容性问题。

2.元素获取它的父元素、子元素以及兄弟元素

当获取到一个元素之后可以通过它的属性来获取它的父元素、子元素以及兄弟元素parentNode -> 父元素
firstChild / lastChild / children -> 第一个子元素/最后一个子元素/所有子元素
previousSibling / nextSibling -> 前一个兄弟元素 / 后一个兄弟元素

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>按钮事件</title>
        <style type="text/css">
            #buttons{
                width: 1000px;
                height: 50px;
                margin: 100px auto;
                background-color: papayawhip;
                position: relative;
            }
            
            #buttons button{
                width: 80px;
                height: 30px;
                background-color: coral;
                color: white;
                border: none;
                position: relative;
                left: 80px;
                top: 10px;
            }
            
        </style>
    </head>
    <body>
        <div id="buttons">
            <button><input type="checkbox"/>苹果</button>
            <button><input type="checkbox"/>香蕉</button>
            <button><input type="checkbox"/>草莓</button>
            <button><input type="checkbox"/>蓝莓</button>
            <button><input type="checkbox"/>榴莲</button>
            <button><input type="checkbox"/>西瓜</button>
            <button><input type="checkbox"/>芒果</button>
            <button><input type="checkbox"/>柠檬</button>
            <button><input type="checkbox"/>山楂</button>
            <button><input type="checkbox"/>葡萄</button>
        </div>
        
        <script type="text/javascript">
            var buttons = document.querySelectorAll('#buttons>button');
            for (var i=0; i < buttons.length; i++ ){
                buttons[i].firstChild.addEventListener('click',function(evt){
                    var checkbox = evt.target || evt.srcElement;
                    if(checkbox.checked){
                        checkbox.parentNode.style.backgroundColor = 'lightseagreen';
                    }else{
                        checkbox.parentNode.style.backgroundColor = 'coral';
                    }
                    //阻止冒泡事件
                    evt.stopPropagation();
                });
                
                
                buttons[i].addEventListener('click',function(evt){

                    var button = evt.target || evt.srcElement;
                    
                    var checkbox = button.firstChild;
                    
                    checkbox.checked = !checkbox.checked;
                    if(checkbox.checked){
                        button.style.backgroundColor = 'lightseagreen';
                    }else{
                        button.style.backgroundColor = 'coral';
                    }
                });
            }
        </script>
    </body>
</html>

测试结果

6.PNG

七、作业

作业1

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>作业</title>
        <style type="text/css">
            #box{
                width: 400px;
                height: 350px;
                margin: 0 auto;
                margin-top: 100px;
            }
            
            #images{
                width: 200px;
                height: 50px;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <div id="image">
                <img src="img/picture-1.jpg"/>
            </div>
            <div id="images">
                <img id="img1" src="img/thumb-1.jpg"/>
                <img id="img2" src="img/thumb-2.jpg"/>
                <img id="img3" src="img/thumb-3.jpg"/>
            </div>
        </div>
        
        <script type="text/javascript">
            var img1 = document.querySelector('#img1');
            img1.addEventListener('click',function(){
                var img = document.querySelector('#image img');
                img.src = 'img/picture-1.jpg'
            });
            
            var img2 = document.querySelector('#img2');
            img2.addEventListener('click',function(){
                var img = document.querySelector('#image img');
                img.src = 'img/picture-2.jpg'
            });
            
            var img3 = document.querySelector('#img3');
            img3.addEventListener('click',function(){
                var img = document.querySelector('#image img');
                img.src = 'img/picture-3.jpg'
            });
        </script>
    </body>
</html>

测试结果

1.PNG

作业2

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>作业2</title>
        <style type="text/css">
            #adv{
                width:1240px;
                position: relative;
                margin: 0 auto;
            }
            
            ul{
                float: left;
                position: relative;
                top: 380px;
                left: 500px;    
            }
            
            ul li{
                list-style: none;
                float: left;
                font-size:20px;
                color:lightslategray;
            }
            
            #li1{
                color:lightgray;
            }
        </style>
    </head>
    <body>
        <div id="adv">
            <img src="img/image1.jpg" alt="" width="940px" height="430px"/>
            <ul>
                <li id="li1">●</li>
                <li id="li2">●</li>
                <li id="li3">●</li>
                <li id="li4">●</li>
            </ul>
        </div>
        
        <script type="text/javascript">
            
            var index = 0;
            var images = ['image1.jpg','image2.jpg','image3.jpg','image4.jpg']

            var img = document.querySelector('img');
            var timerId;
            
            startIt();
            
            var div =  document.querySelector('#adv');
            var buttons = document.querySelectorAll('li');
            
            function startIt(){
                timerId = window.setInterval(function() {
                    buttons[index].style.color = 'lightslategray';
                    index += 1;
                    index %= images.length; 
                    img.src = 'img/'+ images[index];
                    
                    buttons[index].style.color = 'lightgray';
                },2000);
            }
            
            function stopIt(){
                window.clearInterval(timerId);
                
            }
            
                var button1 = document.querySelector('#li1');
                var button2 = document.querySelector('#li2');
                var button3 = document.querySelector('#li3');
                var button4 = document.querySelector('#li4');
                
                button1.addEventListener('mouseover',function(){
                    button1.style.cursor = 'pointer';
                    stopIt();
                    img.src = 'img/'+ images[0];
                    button1.style.color='lightgray';
                    button2.style.color='lightslategray';
                    button3.style.color='lightslategray';
                    button4.style.color='lightslategray';
                });
                button1.addEventListener('mouseout',startIt);


                button2.addEventListener('mouseover',function(){
                    button2.style.cursor = 'pointer';
                    stopIt();
                    img.src = 'img/'+ images[1];
                    button1.style.color='lightslategray';
                    button2.style.color='lightgray';
                    button3.style.color='lightslategray';
                    button4.style.color='lightslategray';
                });
                button2.addEventListener('mouseout',startIt);
                
                
                button3.addEventListener('mouseover',function(){
                    button3.style.cursor = 'pointer';
                    stopIt();
                    img.src = 'img/'+ images[2];
                    button1.style.color='lightslategray';
                    button2.style.color='lightslategray';
                    button3.style.color='lightgray';
                    button4.style.color='lightslategray';
                });
                button3.addEventListener('mouseout',startIt);
                
                
                button4.addEventListener('mouseover',function(){
                    button4.style.cursor = 'pointer';
                    stopIt();
                    img.src = 'img/'+ images[3];
                    button1.style.color='lightslategray';
                    button2.style.color='lightslategray';
                    button3.style.color='lightslategray';
                    button4.style.color='lightgray';
                });
                button4.addEventListener('mouseout',startIt);
        </script>
    </body>
</html>

测试结果

2.PNG

day28-JavaScript对象

一、浏览器中的JavaScript

1.JavaScript的对象

二、延时跳转

1.location属性

2.arguments对象

代码

测试结果

三、轮播图

1.通过document对象获取页面元素的常用方法

代码

测试结果

四、绑定事件

1.绑定事件的运用

代码

测试结果

五、绑定冒泡捕获事件

1.添加监听事件

代码

测试结果

六、按钮事件

1.获取时间源

2.元素获取它的父元素、子元素以及兄弟元素

代码

测试结果

七、作业

作业1

代码

测试结果

作业2

代码

测试结果

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读