day-14 定位 js dom操作

1. 权重

/*权重：数数 id class 标签*/

/*1000 > 100 > 010 > 001*/
/*行内 > id > 类 > 标签*/
/*1 0 0*/
#box{
200px;
height: 200px;
background-color: red;
}
/*0 1 0*/
.box{
200px;
height: 200px;
background-color: green;
}
/*001*/
div{
200px;
height: 200px;

2. background

#box{
     200px;
    height: 200px;
    /*默认是水平和垂直都平铺*/
    border: 1px solid red;
    background-image: url("./timg.jpg");
    background-repeat: no-repeat;
    /*background-position-x: -638px;*/
    /*background-position-y: -264px;*/
    /*background-position: -20px 50px;*/
    background-attachment: fixed;
}
.box2{
     24px;
    height: 33px;
    background:url("taobao.png") no-repeat 0 -265px;
    background-attachment: fixed;
}
3.定位

*{
padding: 0;
margin: 0;
}
.box{
200px;
height: 200px;
background-color: red;
/*做子绝父相得参考
不要用相对定位做压盖现象
*/
/*参考点：原来的位置 */
position: relative;
top: 30px;
left: 40px;
/*margin-top: 30px;*/
}
.box2{
200px;
height: 200px;
background-color: green;
}

4.绝对定位

*{
padding: 0;
margin: 0;
}
.father{
500px;
height: 500px;
border: 1px solid yellow;
}
.box{
200px;
height: 200px;
background-color: red;

/*单独设置绝对定位
参考点：是以页面的左上角为参考点
特点：脱标不占位置
*/
position: absolute;
top: 30px;
}
.box2{
200px;
height: 300px;
background-color: green;
}

默认都是静态定位
position:static;

1.相对定位
position:relative;

2.绝对定位
position:absolute;

3.固定定位
position:fixed;

5.子绝父相

*{
padding: 0;
margin: 0;
}
.father{
500px;
height: 500px;
border: 1px solid yellow;
/*父相对定位*/
position: relative;
margin-left: 50px;
}
.box{
200px;
height: 200px;
background-color: red;

/*如果是嵌套盒子
参考点：是以最近父辈盒子的左上角为参考点

*/
position: absolute;
top: 40px;
left: 30px;

}
.box2{
200px;
height: 300px;
background-color: green;
}

6. 轮播图定位

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin:0;
}
.header{
100%;
height: 100px;

}
ul{
list-style: none;
}
.header .list{

100%;
height: 100px;
background-color: red;
position: relative;
}
.list .site-category{
position: absolute;
234px;
height: 460px;
background-color: rgba(0,0,0,.6);
top: 100px;
left: 0;
z-index: 10;
}
.slider{
100%;
height: 460px;
}
.container{
1226px;
margin: 0 auto;
height: 100%;
}
.slider .lunbo{
100%;
height: 460px;
background: url("小米.jpg") no-repeat 0 0;
position: relative;
}
.lunbo span{
position: absolute;
41px;
height: 69px;
background: url("icon-slides.png") no-repeat 0 0;

}

.lunbo span.prev{
background-position: -83px 0;
left: 234px;
top: 50%;
}
.lunbo span.next{
background-position: -128px 0;
right: 0;
top: 50%;
}
.lunbo span.prev:hover{
background-position: 0 0;
}
.lunbo span.next:hover{
background-position: -42px 0;
}
.lunbo .circle{
position: absolute;
bottom: 30px;
right: 50px;
6px;
height: 6px;
background-color: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,.3);
border-radius: 10px;
}
.lunbo .circle:hover{
background: #fff;
border: 1px solid #757575;
}
</style>
</head>
<body>

</body>
</html>

7.固定定位

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.top{
200px;
height: 200px;
background-color: red;
/*固定定位盒子脱标
参考点：以浏览器的左上角
*/
position: fixed;
bottom: 10px;
right: 30px;
text-align: center;
line-height: 200px;
color: #fff;
font-size: 18px;
}
</style>
</head>
<body style="height: 2000px;">

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>

console.log($);

$('.top').click(function () {
// alert(1)
$('html,body').animate({
scrollTop:'0'
},1000);
});
</script>

</body>
</html>

8.固定导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            padding-top: 80px;
        }
        .header{
             100%;
            height: 80px;
            background-color: red;
            position: fixed;
            top:0;
            z-index: 99999;
        }
        .wrap{
             100%;
            height: 500px;
            background-color: green;
            color: #fff;
        }
        .wrap p{
            position: relative;
            z-index: 3;
        }

    </style>
</head>
<body style="height: 2000px;">

    <div class="header"></div>

    <div class="wrap">

        <p>内容区域</p>
    </div>

</body>
</html>
9. z-index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .father{
             300px;
            height: 300px;
            border: 1px solid red;
            position: relative;
            z-index: 12;

        }
        .sendie{
             100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 270px;
            left: 320px;
            /*z-index: 10;*/
        }
        .father2{
             300px;
            height: 300px;
            border: 1px solid green;
            position: relative;
            z-index: 11;
        }
        .tailiang{
             100px;
            height: 100px;
            background-color: green;
            position: absolute;
            top: -30px;
            left: 320px;
            /*z-index: 5;*/
        }
    </style>
</head>
<body style="height: 2000px">



<div class="father">

    <div class="sendie">

    </div>

</div>

<div class="father2">
    <div class="tailiang"></div>
</div>

</div>
</body>
</html>
10. js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="index.js"></script>
</body>
</html>

11.流程控制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>


    /*
    var a = 1;
    var c = a++;
    //2 1  先赋值 后++
    console.log(a);
    console.log(c);
    */
    /*
    var a = 1;
    var c = ++a;
    //2 1  先++ 后赋值
    console.log(a);
    console.log(c);
    */

    var num = 400;

    /*
    if(num>300){
        console.log('走不进来');
    } else{
        console.log('走进来了');
    }
    */

    /*
     if(num<300){
        console.log('走不进来');
    } else if(num < 500){
        console.log('走进来了');
    }else{
         console.log('哈哈哈');
    }
    */

    //不管有没有满足while中的条件do里面的代码都会走一次
// var i = 3;//初始化循环变量
// do{
//
//     console.log(i);
//     i++;//更新循环条件
//
// }while (i<10) //判断循环条件
    
  var gameScore = 'better2';

switch(gameScore){

//case表示一个条件 满足这个条件就会走进来 遇到break跳出。break终止循环。如果某个条件中不写 break，那么直到该程序遇到下一个break停止
    case 'good':
    console.log('玩的很好')
    //break表示退出
    break;
    case  'better':
    console.log('玩的老牛逼了')
    break;
    case 'best':
    console.log('恭喜你 吃鸡成功')
    break;

    default:
    console.log('很遗憾')

}





    </script>
</body>
</html>
12.数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>

    // var arr = [1,2,3];
    // var arr2 = [4,5,6];
    //
    // arr = arr.concat(arr2);
    // console.log(arr);
    //
    // var score = [98,78,76,100,0];
    // //toString() 直接转换为字符串  每个元素之间使用逗号隔开
    //
    // var str = score.toString();
    // console.log(str);//98,78,76,100,0
    //

    var arr = ['张三','李四','王文','赵六'];
    var popStr  = arr.pop();
    console.log(popStr);//["张三", "李四"，"王文"]
    console.log(arr);


    var arr2 = ['张三','李四','王文','赵六'];
    //返回值 是该索引
    var num  = arr2.push('小马哥');
    console.log(arr2);//["张三", "李四"，"王文"，"赵六"，"小马哥"]
    var isArr = Array.isArray(arr2);
    console.log(isArr);
</script>

</body>
</html>

13. date

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>

    var date = new Date();
    console.log(date.getDate());
    console.log(date.getMonth());
    console.log(date.getDay());
    console.log(date.toLocaleString())

    var a = 123.267;
    console.log(Math.ceil(a));
    console.log(Math.floor(a));

//    200~500之间 min-max  min +Math.random()*(max-min)
//      console.log(200+Math.random()*(500-200));

</script>

</body>

14.函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>

    // def add()：

       // add()

//    声明函数
    function add(a,b){
        return a+b;
    };
    console.log(add(1,2));

    function hao() {

        //伪数组
        for(var i = 0; i < arguments.length;i++){
            console.log(arguments[i]);


        };


        console.log(arguments);
        console.log([]);
        // arguments.push('帅哥');
    };
    hao('美女','红酒')

    document.write("*");


    var a = 3;

</script>
</body>
</html>
15.DOM操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
             100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box" id="box">alex</div>
<script>
   //DOM Docuemnt Object Model
    console.log(window);
    //文档对象
    console.log(document);
    //html对象
    console.log(document.documentElement);
    //body对象
    console.log(document.body);
    var oDiv = document.getElementById('box');
    console.log(oDiv);
    console.dir(oDiv);



//    1. 找 获取DOM对象
//    2.事件
//    3.驱动程序 执行的动作
   var isGreen = true;
    oDiv.onclick = function () {
    //    驱动程序

        console.log(oDiv.style);
        //样式操作


        if (isGreen) {
                oDiv.style.backgroundColor = 'red';
                isGreen = false;
        }else{
              oDiv.style.backgroundColor = 'green';
                isGreen = true;
        }
        // oDiv.style.width = '300px';
        // oDiv.style.display = 'none';

    };
</script>

</body>
</html>
16.属性操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
             100px;
            height: 100px;
            background-color: red;
        }
        .active{
            display: none;
        }
        button{
            /*cursor: text;*/
            cursor: pointer;
        }
    </style>
</head>
<body>
    <button>隐藏</button>

    <div class="box"></div>
    <img src="" alt="美女出不来了">
    <a href=""></a>
    <input type="text" name="" value="113">

    <a href="javascript:void(0);">百度1</a>
    <a href="javascript:void(0);">百度2</a>
    <a href="javascript:void(0);">百度3</a>
    <a href="javascript:void(0);">百度4</a>
    <script>

        var oA = document.getElementsByTagName('a');


        for(var i = 0;i<oA.length;i++){
            oA[i].onmouseover = function () {
                console.log(this.innerText);
            }
             oA[i].onmouseout = function () {
                console.log(this.innerText);
            }
        }

        //数据驱动视图
       var oBtn = document.getElementsByTagName('button')[0];

       //data 数据
       oBtn.innerText = '显示';

       var oDiv = document.getElementsByClassName('box')[0];
       // oDiv.innerText = '<h2>alex</h2>';
       oDiv.innerHTML = '<h2>alex</h2>';
       var oImg = document.getElementsByTagName('img')[0];
        var oInput = document.getElementsByTagName('input')[0];
        oInput.value = 'alex';
       console.log(oBtn);
       var isHide = true;
       oBtn.onclick = function () {
           oImg.src = './tim.jpg';
            if (isHide) {
                console.log( oDiv.className);
                // oDiv.style.display = 'none';
                oDiv.className += ' active';
                oDiv.id  = 'box';

                isHide = false;
        }else{
              // oDiv.style.display = 'block';
                oDiv.className = 'box';
                isHide = true;
                  oDiv.title = '哈哈哈';
        }
       }




       //
    </script>
</body>
</html>

相关阅读:
linq to entity group by 时间
Entity Framework Core for Console
EF Core 多个DbContext迁移命令
.net for TCP服务端 && 客户端
创建Windows Service
EF Code First 快速创建
在Docker中创建Mongo容器的后续设置
Docker入门
Python之collections.defaultdict
Hough transform(霍夫变换)

原文地址：https://www.cnblogs.com/junyingwang/p/9528418.html