冯娜_20210114冯娜

知识点总结

一、定位

1、静态定位

position:staitc;<!--默认静态定位-->

2、相对定位

position:relative;<!--相对其正常的位置定位-->

3、绝对定位

position:absolute;<!--脱离正常的文档流,相对于<html>元素或staitc以外的第一个父元素进行定位-->

4、固定定位

position:fixed;<!--脱离正常的文档流,相对于浏览器视口本身进行定位-->

5、z-index

用于提升元素的层级

6、粘性定位

position:stucky;<!--相对定位和固定定位的混合体,当达到某一个阈值时固定到页面上-->
二、样式优先级

1、样式冲突:同一个元素有多个相同css属性来适配,这个时候就会发生样式冲突

2、样式优先级

​ 内联样式>内部样式>外部样式>默认样式

​ id选择器>class选择器>元素选择器

3、改变优先级

​ 使用!important提高优先级

三、JavaScript

1、BOM:核心对象是window,书写时可以省略window.

(1)window对象

window.alert("xxxx");//弹出的窗口有文字
window.prompt("xxxx");//弹出的窗口中有一段提示文字及输入框,有“确定”“取消”按钮
window.confirm("xxxx");//弹出询问窗口,有“确定”“取消”按钮,返回一个布尔类型的值
window.location;//其href属性,表示浏览器的地址,可以对其进行修改
window.history;//访问浏览器已经访问过的页面,forword()函数,表示前进一页,back()函数,表示后退一页,go(1)表示前进一页,go(-1)表示后退一页
window.document;//获取元素

(2)获取元素

document.getElementById();//根据id获取一个元素,所以id值不可以有相同的
document.getElementsByClassName();//根据class获取一(多)个元素,得到的数据类型是数组,具体的某一个元素可以用数组下标来寻找
document.getElementsByName();//根据name获取一(多)个元素,得到的数据类型是数组,具体的某一个元素可以用数组下标来寻找
document.getElementsByTagName();//根据标签名获取元素
document.querySelector();//根据选择器获取元素 (与css选择器的规则一样)
document.querySelectorAll();//根据选择器选择一(多)个元素,返回的是数组

(3)修改内容

元素.innerHTML;//修改html内容,内容中的html标签会被浏览器渲染
元素.innerText;//修改文本内容

(4)获取时间

 var now1 = new Date(2020,01,14)
    now1.setDate(10)
    console.log(now1)//改变之后的日期
    now1.setYear(119)
    console.log(now1)
    now1.setHours()//设置小时
    now1.setMilliseconds()//设置毫秒
    now1.setMinutes()//设置分钟
    now1.setMonth()//设置月份
    now1.setSeconds()//设置秒
    now1.setTime()//设置时间戳

(5)定时器

setTimeout(函数名,间隔毫秒数)//一次性定时器
setInterval(函数名,间隔毫秒数)//循环定时器
clearInterval(函数名,间隔毫秒数)//清除定时器

案例:获取当前时间,设置按钮开始与暂停显示时间

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="t">
            时间
        </div>
        <button type="button" onclick="ks()">开始</button>
        <button type="button" onclick="js()">暂停</button>
        <script type="text/javascript">
            var timer;
            //获取当时时间对象
            function time(){
                var t=document.getElementById("t")
                var date=new Date();
                var d=date.toLocaleString();
                t.innerText=d;
            }
            //开始按钮事件
            function ks(){
                //若已经开始,先清除之前的
                clearInterval(timer);
                timer=setInterval(time,1000);
            }
            // 暂停按钮事件
            function js(){
                clearInterval(timer);
            }
        </script>
    </body>
</html>

(6)综合案例

设置倒计时自动跳转页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="zd">
            <span id="num">3</span>秒后跳转到<a href="http://www.baidu.com">百度</a>
        </div>
        <script type="text/javascript">
            //定义定时器
            setInterval(n,1000);
            //倒计时函数
            function n(){
                var num=document.getElementById("num");
                number=num.innerText=num.innerText-1;
                console.log(number)
                if(number==1){
                    //跳转页面
                    location.href="http://www.baidu.com"
                }
            }
        </script>
    </body>
</html>

心得体会

​ 今天结束了CSS的学习,开始了JavaScript的学习,这对我来说是个学习的好机会,之前对于BOM的学习非常的薄弱,要把握好这次机会,好好学习js。今天明白了如何获取元素,修改元素,以及定时器的用法,明天继续。

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1