12.18Web前端第十三节课练习和笔记

menge2333

已于 2023-12-20 18:24:50 修改

阅读量63

点赞数

文章标签：笔记

于 2023-12-19 16:27:02 首次发布

本文链接：https://blog.csdn.net/menge2333/article/details/135084566

版权

练习（回到顶部练习）

let div=document.querySelector("div")
window.addEventListener("scroll",function(){
    if(document.documentElement.scrollTop>=800){
        div.style.display="block"
    }
    else{
        div.style.display="none"
    }
})
div.addEventListener("click",function(){
    document.documentElement.scrollTop=0
})

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		body{
			height: 2000px;
			background-color: pink;
		}
		div{
			display: none;
			width: 50px;
			height: 50px;
			background-color: brown;
			position: fixed;
			right: 20px;
			bottom: 50px
		}
	</style>
</head>
<body>
	文字
	<div>回到顶部</div>
	<script src="./回到顶部案例.js"></script>
</body>
</html>

笔记

捕获和冒泡

冒泡（从内向外）默认情况

true(捕获)（从外向内）

let father=document.querySelector(".father")
let son=document.querySelector(".son")
father.addEventListener("click",function(){
    console.log("fuqin")
},false)
son.addEventListener("click",function(){
    console.log("erzi")
},false)

document.documentElement.addEventListener("click",function(){
    console.log("666")
},false)

    <style>
        .father{
            width: 80px;
            height: 80px;
            background-color: aquamarine;
        }
        .son{
            width: 40px;
            height: 40px;
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script src="./1.js"></script>
    
</body>
</html>

e.stopPropagation() 阻止冒泡

father.addEventListener("click",function(e){
    console.log("fuqin")
    e.stopImmediatePropagation()
})
son.addEventListener("click",function(e){
    console.log("erzi")
    e.stopImmediatePropagation()
})

document.documentElement.addEventListener("click",function(e){
    console.log("666")
    e.stopImmediatePropagation()
})

事件移除（removeEventListener）

function fn(){
    console.log("666")
}
let btn=document.querySelector("button")
btn.addEventListener("click",fn)
btn.removeEventListener("click",fn)

事件委托(e.target.style.属性=“”)

let ul = document.querySelector("ul")
ul.addEventListener("click",function(e){
    e.target.style.backgroundColor="red"

})

BOM（浏览器对象模型 window）

全局变量,函数会自动存储到window对象里面

function fn(){
    console.log("sds")
}
window.fn()

window常见事件

加载事件（load）

（当script写在前面是要写加载事件）

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.addEventListener("load",function(){
            
        })
    </script>
</head>

DOMContentLoaded (dom加载结束之后执行)

<script>
        window.addEventListener("DOMContentLoaded",function(){
            
        })
    </script>

innerWidth:获取当前屏幕的宽度

结合resize事件

 <style>
        div{
            width: 60px;
            height: 50px;

        }
    </style>
    <script>
        window.addEventListener("load",function(){
            let div=document.querySelector("div")
            window.addEventListener("resize",function(){
                if(window.innerWidth<=800){
                    div.style.backgroundColor = "red"
                }else
                {
                    div.style.backgroundColor="pink"
                }
            })
            
        })
    </script>
</head>
<body>
    <div></div>
</body>
</html>

js的执行机制

js典型的单线程（同步，异步）

js执行机制：同步任务（依次执行）：放在主线程上进行执行，形成执行线异步任务（最后执行）：放在任务队列中 1.事件2.资源加载3.定时器

BOM里的常见对象

location（获取和设置窗体的url（网址）统一资源定位符）

location.href: 返回当前页面的完整的URL地址；
location.search: 返回URL后面的参数(类似于"?name=lc&age=20")；
location.protocol: 返回页面使用的协议(通常是"http:“或"https:”)；
location.host: 返回页面的域名及端口号；
location.hostname: 返回页面的域名；
location.port: 返回页面的端口号；
location.pathname: 返回页面中的路径或文件名；
location.origin: 返回URL源地址；
location.hash: 返回URL 散列值（#后面的内容），如果没有则为空字符串。

//获取和设置窗体的url(网址)
console.log(location.href)
//主机 （域名）
console.log(location.host)
//返回页面的端口号
console.log(location.port)
//返回页面中的路径或文件名；
console.log(location.pathname)
//返回参数
location.search 
//返回URL 散列值（#后面的内容），如果没有则为空字符串。
location.hash
setTimeout(()=>{
    location.href="httpsZ://www.baidu.com"
},3000)

方法

assign() 导航到另一个页面

setTimeout(()=>{
    location.assign="https://www.baidu.com"
},3000)

replace()

setTimeout(()=>{
    location.replace="https://www.baidu.com"
},3000)

reload() 重新加载页面

setTimeout(()=>{
    location.reload="https://www.baidu.com"
},3000)

nacigator

返回浏览器的版本

console.log(navigator.userAgent)

history

history.back() 后退 history.forward() 前进 //history.go(-1/1)

</head>
<body>
    <a href="./1.html">csd</a>
    <button>前进</button>
    <script>
        let btn = document.querySelector("button")
        btn.addEventListener("click",function(){
            history.forward()
        })
    </script>

</body>
</html>

clicent(获取元素的可视区域) [与offset一类]

console.log(div.clientWidth)

clientWidth clientHeight clientTop clientLeft

scroll (内容的高度)[实例回到顶部]

let div=document.querySelector("div")
console.log(div.scrollHeight)
div.addEventListener("scroll",function(){
    if(this.scrollTop==300){
        this.scrollTop=0
    }
})

正则表达

1.RegExp

new RegExp("格式化字符串"，["修饰符"])

let reg = new RegExp("a")
let str = "nanhangjincheng"
console.log(str.match(reg))
console.log(reg.test(str))

2.字面量

let reg2 = /格式化字符串/修饰符

        let reg2 = /a/
        console.log(str.match(reg2))

元字符 \d:数字 \w:数字字母下划线 . 匹配除换行符外的任意字符 \s 匹配空白字符

let reg = /\w/g
console.log("nanhang11".match(reg))

**限定符 * 0~n + :1~n ?:0~1 {n}前一个内容重复n次**

console.log("1302811111111".match(/^\d{5,11}$/)) //5-11位

特殊符号 [abc]:abc中任意一个 [^abc]除了abc以外都可以 a|b|c

^以数字开头$以数字结尾

分组后面必须跟前面一样（123456……）

  let reg3 = /^<([a-zA-Z]+)>(.*)<\/\1>/
  console.log("<a>hdjfeefr</andcdj>".match(reg3))

menge2333

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
12.18Web前端第十三节课练习和笔记

location.href: 返回当前页面的完整的URL地址；location.search: 返回URL后面的参数(类似于"?location.protocol: 返回页面使用的协议(通常是"http:“或"https:”)；location.host: 返回页面的域名及端口号；location.hostname: 返回页面的域名；location.port: 返回页面的端口号；location.pathname: 返回页面中的路径或文件名；
复制链接

扫一扫