你好javascript day12

1）BOM

window BOM的根元素

使用window的方法时可以不用加window

window.open();

window.alert();

open();

alert();

视口宽高

innerWidth

innerHeight

浏览器宽高

outerWidth

outerHeight

// 只能获取，不能设置

// console.log(screenLeft,screenTop);//这两个是相同的，都是指当前窗口相对屏幕的坐标

// console.log(screenX,screenY);

location 本地

location.reload();重载

location.href():跳转页面也可以获取当前页面

location.assign();跳转页面

location.replace(): 替换新页面

// screen 屏幕

// console.log(screen.width,screen.height); //全屏幕宽高

// console.log(screen.availWidth,screen.availHeight);//不带任务栏的屏幕宽高

// navigator 浏览器信息

// 用户浏览器信息

// console.log(navigator.userAgent);

2)事件基础

IE8以上支持

给DOM元素添加一个事件侦听（监听）,只能收到对应事件类型的消息，

当收到这个消息，执行事件回调函数

DOM.addEventListener(事件类型,事件回调函数);

click这个消息是系统消息

document.addEventListener("click",clickHandler);

        /* 
            事件回调函数
            e  有且仅有一个参数e
            e 是一个事件对象,侦听事件收到消息时获得的事件对象
        
         */
        function clickHandler(e){
            console.log(e);
        }

3）事件原理

div0.addEventListener(事件类型,事件回调函数,是否捕获时执行);

事件类型必须是字符串，可以设置为任意字符串，但是部分字符串是系统事件类型

事件回调函数指向一个函数，当收到事件时执行该函数，如果没有收到不执行函数，写侦听事件时不执行函数

是否捕获时执行默认值是false，在冒泡时执行，捕获时不执行，

如果设置为true，在捕获时执行

div0.addEventListener("click",clickHandler0,true);
        div1.addEventListener("click",clickHandler1);
        div2.addEventListener("click",clickHandler2,true);

        function clickHandler0(e){
            console.log("点击div0")
        }

        function clickHandler1(e){ console.log("点击div1") } function clickHandler2(e){ console.log("点击div2") // console.log(e); // 停止冒泡  e.stopPropagation(); // 仅适用在IE8及以下 // e.cancelBubble=true;  }

4）事件委托

    </style>
</head>
<body>
    <ul id="menu">
        <li>北京
            <ul>
                <li>海淀</li>
                <li>昌平
                    <ul>
                        <li>沙河</li>
                        <li>回龙观</li>
                        <li>龙泽</li>
                        <li>定福皇庄</li>
                        <li>天通苑</li>
                    </ul>
                </li>
                <li>朝阳</li>
                <li>东城</li>
                <li>西城</li>
            </ul>
        </li>
        <li>河北</li>
        <li>陕西</li>
        <li>河南</li>
        <li>山西</li>
    </ul>
    <script>
// 将子元素的侦听事件全部委托给最外层的父元素,这种情况叫做事件委托

       /*  var list;
        init();
        function init(){
            list=Array.from(document.getElementsByTagName("li"));
            list.forEach(function(item){
                item.addEventListener("click",clickHandler);
            })
        }

        function clickHandler(e){
            e.stopPropagation();
            // this 是被点击的元素
            if(this.firstElementChild){
                if(!this.bool){
                    this.firstElementChild.style.display="none";
                }else{
                    this.firstElementChild.style.display="block";
                }
                this.bool=!this.bool;
            }
        } */








        // _______________________2




    
        init();
        function init(){
            var menu=document.querySelector("#menu");
            menu.addEventListener("click",clickHandler) } function clickHandler(e){ // console.log(this,e.target);//this在事件函数中是被点击的对象(暂时), // 实际上this是侦听事件的对象,也就是外面执行addEventListener方法的对象menu // e.target 事件的目标 真实点击到最终得目标对象 // e.currentTarget 和this相同,都是事件侦听的对象  e.stopPropagation(); // this 是被点击的元素 if(e.target.nodeName!=="LI") return; if(e.target.firstElementChild){ if(!e.target.bool){ e.target.firstElementChild.style.display="none"; }else{ e.target.firstElementChild.style.display="block"; } e.target.bool=!e.target.bool; } } </script>

5）轮播图

    <style>
        .crousel
        {
            width:1500px;
            height: 500px;
            margin: auto;
            position: relative;
            overflow: hidden;
        }
        .imgCon{
            width:7500px;
            height: 500px;
            position: absolute;
            font-size: 0;
            transition: all 0.5s;
            left:0;
        }
        .imgCon>img{
            width:1500px;
            height: 500px;
        }
        .leftBn,.rightBn{
            position: absolute;
            top:220px;
        }
        .leftBn{
            left:50px;
        }
        .rightBn{
            right: 50px;
        }
        ul{
            list-style: none; position: absolute; margin: 0; padding: 0; bottom: 50px; left:640px; } li{ width: 28px; height: 28px; border: 2px solid #FF0000; float: left; border-radius: 50%; margin-left: 20px; } li:nth-child(1){ margin-left: 0; } .clear::after { content: ""; height: 0; display: block; visibility: hidden; clear: both; } .clear{ zoom: 1; } </style> </head> <body> <div class="crousel"> <div class="imgCon"> <img src="./img/a.jpeg"> <img src="./img/b.jpeg"> <img src="./img/c.jpeg"> <img src="./img/d.jpeg"> <img src="./img/e.jpeg"> </div> <img src="./img/left.png" class="leftBn"> <img src="./img/right.png" class="rightBn"> <ul class="clear"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <script> var imgCon,leftBn,rightBn,list,prevDot; var pos=0; init(); function init(){ // 获取所有图片容器，左右按钮 imgCon=document.querySelector(".imgCon"); leftBn=document.querySelector(".leftBn"); rightBn=document.querySelector(".rightBn"); // 将所有li获取并且转换为数组 list=Array.from(document.querySelectorAll("li")); // 给左右按钮增加点击事件 leftBn.onclick=clickHandler; rightBn.onclick=clickHandler; // list是所有小圆点的数组，遍历这个数组 list.forEach(function(item){ // 给每个小圆点增加点击事件 item.onclick=dotClickHandler; }); changeDot(); } function clickHandler(){ // 如果点击左边的按钮 if(this===leftBn){ pos--; if(pos<0) pos=0; }else{ // 如果点击了右边的按钮 pos++; if(pos>4) pos=4; } imgCon.style.left=pos*-1500+"px"; changeDot(); } function dotClickHandler(){ // this就是被点击的元素，list是所有小圆点的数组 // 查找当前点击小圆点是数组中第几个，这个第几个正好就是我们要显示第几张图片 pos=list.indexOf(this); imgCon.style.left=pos*-1500+"px"; changeDot(); } function changeDot(){ // 如果上一个小圆点变量存在时 if(prevDot){ // 设置上一个小圆点的背景色透明 prevDot.style.backgroundColor="rgba(255,0,0,0)"; } // list是小圆点的数组，pos是当前应该显示第几张图 // 将上一个小圆点变量设置为当前这个小圆点数组中对应的那个小圆点 prevDot=list[pos]; // 并且设置当前这个小圆点背景色为红色 prevDot.style.backgroundColor="rgba(255,0,0)"; } </script>

猜你喜欢