JavaScript50_终篇_编程进阶与BOM编程概览(3k字+)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript50_终篇_编程进阶与BOM编程概览(3k字+)相关的知识,希望对你有一定的参考价值。

12、节点的复制

使用 cloneNode() 方法对节点进行复制时,它会复制节点的所有特点包括各种属性

这个方法默认只会复制当前节点,而不会复制节点的子节点

可以传递一个true作为参数,这样该方法也会将元素的子节点一起复制

在本案例中,像li是一个节点,里面的“孙悟空”是一个子节点,需要使用true来一块复制上

<body>
<button id="btn01">点我一下</button>

<ul id="list1">
<li id="l1">孙悟空</li>
<li id="l2">猪八戒</li>
<li id="l3">沙和尚</li>
</ul>

<ul id="list2">
<li>蜘蛛精</li>
</ul>

<script>
//点击按钮后,将id为l1 的元素添加到list2中
const list2 = document.getElementById(list2)
const l1 = document.getElementById(l1)
const btn01 = document.getElementById("btn01")

btn01.onclick = function()
const new1 = l1.cloneNode(true)//用来对节点进行复制

new1.id = new1;
list2.appendChild(new1)//将一元素添加到父节点的末尾

</script>
</body>

13、直接修改css样式

修改样式的方式:元素.style.样式名 = 样式值

如果样式名中含有-,则需要将样式表修改为驼峰命名法

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1
width: 200px;
height: 200px;
background-color: #bfa;

</style>
</head>
<body>
<button id="btn">点我一下</button>
<hr>
<div class="box1"></div>

<script>
//点击按钮后,修改box1的宽度
const btn = document.getElementById(btn)
const box1 = document.querySelector(.box1)

btn.onclick = function()
//修改box1的样式
//修改样式的方式:元素.style.样式名 = 样式值
//如果样式名中含有-,则需要将样式表修改为驼峰命名法
//background-color ---> backgroundColor
box1.style.width = 400px
box1.style.height = 400px
box1.style.backgroundColor = yellow

</script>
</body>

14、读取css样式

getComputedStyle()

  • 它会返回一个对象,这个对象中包含了当前元素所有的生效的样式
  • 参数:
  1. 要获取样式的对象
  2. 要获取的伪元素
  • 返回值: 返回的一个对象,对象中存储了当前元素的样式
  • 注意: 样式对象中返回的样式值,不一定能来拿来直接计算 所以使用时,一定要确保值是可以计算的才去计算
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1
width: 200px;
background-color: #bfa;


.box1::before
content: hello;
color:red

</style>
</head>
<body>
<button id="btn">点我一下</button>

<hr>

<div class="box1"></div>

<script>
const btn = document.getElementById("btn")
const box1 = document.querySelector(".box1")

btn.onclick = function()
const styleObj = getComputedStyle(box1)

console.log(styleObj.width)
console.log(styleObj.left)

console.log(parseInt(styleObj.width) + 100 + px)
console.log(styleObj.backgroundColor)

const beforeStyle = getComputedStyle(box1,::before)
console.log(beforeStyle.color)//返回的是rgb数值

console.log(box1.firstElementChild)

</script>
</body>

【JavaScript】50_终篇_编程进阶与BOM编程概览(3k字+)_子节点

15、其他读取样式的方式

元素.clientHeight

元素.clientWidth

  • 获取元素内部的宽度和高度(包括内容区和内边距)

元素.offsetHeight

元素.offsetWidth

  • 获取元素的可见框的大小(包括内容区、内边距和边框)
元素.scrollHeight

元素.scrollWidth

- 获取元素滚动区域的大小
元素.offsetParent
  • 获取元素的定位父元素
  • 定位父元素:离当前元素最近的开启了定位的祖先元素, 如果所有的元素都没有开启定位则返回body
元素.offsetTop

元素.offsetLeft

- 获取元素相对于其定位父元素的偏移量
元素.scrollTop

元素.scrollLeft

- 获取或设置元素滚动条的偏移量
<style>
#box1
width: 200px;
height: 200px;
padding: 50px;
margin: 50px;
border: 10px red solid;
background-color: #bfa;
overflow: auto;


#box2
width: 100px;
height: 500px;
background-color: orange;

</style>
</head>
<body>
<button id="btn">点我一下</button>
<hr>
<div>
<div id="box1">
<div id="box2"></div>
</div>
</div>

<script>
const btn = document.getElementById(btn)
const box1 = document.getElementById(box1)

btn.onclick = function()
console.log(box1.scrollHeight)
console.log(box1.scrollWidth)

console.log(box1.offsetParent)

console.log(box1.offsetLeft)
console.log(box1.offsetTop)

console.log(box1.scrollTop)

</script>
</body>

16、间接修改css样式

除了直接修改样式外,也可以通过修改class属性来间接的修改样式

通过class修改样式的好处:

  1. 可以一次性修改多个样式
  2. 对JS和CSS进行解耦

元素.classList

是一个对象,对象中提供了对当前元素的类的各种操作方法

元素.classList.add() :向元素中添加一个或多个class

元素.classList.remove(): 移除元素中的一个或多个class

元素.classList.toggle() :切换元素中的class

元素.classList.replace(): 替换class

元素.classList.contains() :检查class

<style>
.box1
width: 200px;
height: 200px;
background-color: #bfa;



.box2
background-color: yellow;
width: 300px;
height: 500px;
border: 10px greenyellow solid;

</style>
</head>
<body>
<button id="btn">点我一下</button>
<hr>
<div class="box1 box3 box4"></div>

<script>
//点击按钮后,修改box1的宽度
const btn = document.getElementById("btn")
const box1 = document.querySelector(".box1")

btn.onclick = function()
//除了直接修改样式外,也可以通过修改class属性来间接的修改样式
// box1.className += box2

// box1.classList.add(box2,box3,box4)
// box1.classList.add(box1)

// box1.classList.remove(box2)
box1.classList.toggle(box2)
// box1.classList.replace(box2)

let result = box1.classList.contains(box3)
console.log(result)

</script>
</body>


17、事件对象

event 事件

  • 事件对象
  • 事件对象是有浏览器在事件触发时所创建的对象, 这个对象中封装了事件相关的各种信息
  • 通过事件对象可以获取到事件的详细信息 比如:鼠标的坐标、键盘的按键..
  • 浏览器在创建事件对象后,会将事件对象作为响应函数的参数传递, 所以我们可以在事件的回调函数中定义一个形参来接收事件对象
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1
width: 300px;
height: 300px;
border: 10px greenyellow solid;

</style>
</head>
<body>
<div id="box1"></div>

<script>
const box1 = document.getElementById("box1")

box1.onmousemove = event =>
console.log(event)


box1.addEventListener("mousemove",event =>
console.log(event.clientX,event.clientY)
box1.textContent = event.clientX + , + event.clientYs
)
</script>
</body>

18、事件的冒泡

在DOM中存在着多种不同类型的事件对象

多种事件对象有一个共同的祖先 Event

  • event.target 触发事件的对象
  • event.currentTarget 绑定事件的对象(同this)
  • event.stopPropagation() 停止事件的传导
  • event.preventDefault() 取消默认行为

事件的冒泡(bubble)

  • 事件的冒泡就是指事件的向上传到
  • 当元素上的某个事件被触发后,其祖先元素上的相同事件也会同时被触发
  • 冒泡的存在大大的简化了代码的编写,但是在一些场景下我们并不希望冒泡存在 不希望事件冒泡时,可以通过事件对象来取消冒泡

在事件的响应函数中:

event.target :

表示的是触发事件的对象

this 绑定事件的对象

event.stopPropagation()

取消事件的传导

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1
width: 300px;
height: 300px;
background-color: greenyellow;


#box2
width: 250px;
height: 250px;
background-color: #ff0;


#box3
width: 200px;
height: 200px;
background-color: orange;

</style>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>

<a id="chao" href="https://lilichao.com">超链接</a>

<script>
const box1 = document.getElementById("box1")
const box2 = document.getElementById("box2")
const box3 = document.getElementById("box3")
const chao = document.getElementById("chao")

chao.addEventListener(click,(event) =>
event.preventDefault();
alert(被点了一下)
)

box1.addEventListener(click,function (event)
alert(event)
console.log(event.target)//event.target 表示的是触发事件的对象
console.log(this)//this 绑定事件的对象
console.log(event.currentTarget)

alert("hello 我是box1")
)

box2.addEventListener(click,function(event)
event.stopPropagation()
alert(我是box2)
)

box3.addEventListener(click,function(event)
event.stopPropagation()//取消事件的传导
alert(我是box3)
)
</script>
</body>

BOM编程

1、初识BOM

BOM

  • 浏览器对象模型
  • BOM为我们提供了一组对象,通过这组对象可以完成对浏览器的各种操作
  • BOM对象:
  • Window —— 代表浏览器窗口(全局对象)
  • Navigator —— 浏览器的对象(可以用来识别浏览器)
  • Location —— 浏览器的地址栏信息
  • History —— 浏览器的历史记录(控制浏览器前进后退)
  • Screen —— 屏幕的信息
  • BOM对象都是作为window对象的属性保存的,所以可以直接在JS中访问这些对象
<script>
console.log(history)
</script>

【JavaScript】50_终篇_编程进阶与BOM编程概览(3k字+)_JavaScript_02

2、navigator

  • Navigator —— 浏览器的对象(可以用来识别浏览器)

userAgent

返回一个用来描述浏览器信息的字符串

<script>
console.log(navigator.userAgent)

let sBrowser
const sUsrAg = navigator.userAgent

if (sUsrAg.indexOf("Firefox") > -1)
sBrowser = "Mozilla Firefox"
// "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0"
else if (sUsrAg.indexOf("SamsungBrowser") > -1)
sBrowser = "Samsung Internet"
// "Mozilla/5.0 (Linux; android 9; SAMSUNG SM-G955F Build/PPR1.180610.011) AppleWebKit/537.36 (Khtml, like Gecko) SamsungBrowser/9.4 Chrome/67.0.3396.87 Mobile Safari/537.36
else if (
sUsrAg.indexOf("Opera") > -1 ||
sUsrAg.indexOf("OPR") > -1
)
sBrowser = "Opera"
// "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 OPR/57.0.3098.106"
else if (sUsrAg.indexOf("Trident") > -1)
sBrowser = "Microsoft Internet Explorer"
// "Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; Zoom 3.6.0; wbx 1.0.0; rv:11.0) like Gecko"
else if (sUsrAg.indexOf("Edge") > -1)
sBrowser = "Microsoft Edge (Legacy)"
// "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299"
else if (sUsrAg.indexOf("Edg") > -1)
sBrowser = "Microsoft Edge (Chromium)"
// Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36 Edg/91.0.864.64
else if (sUsrAg.indexOf("Chrome") > -1)
sBrowser = "Google Chrome or Chromium"
// "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/66.0.3359.181 Chrome/66.0.3359.181 Safari/537.36"
else if (sUsrAg.indexOf("Safari") > -1)
sBrowser = "Apple Safari"
// "Mozilla/5.0 (iPhone; CPU iPhone OS 11_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.0 Mobile/15E148 Safari/604.1 980x1306"
else
sBrowser = "unknown"


alert(`You are using: $sBrowser`)
</script>

3、location

location 表示的是浏览器地址栏的信息

  • 可以直接将location的值修改为一个新的地址,这样会使得网页发生跳转
  • location.assign() 跳转到一个新的地址
  • location.replace() 跳转到一个新的地址(无法通过回退按钮回退)
  • location.reload() 刷新页面,可以传递一个true来强制清缓存刷新
  • location.href 获取当前地址
<body>
<button id="btn">点我一下</button>
<input type="text" name="username" id="">

<script>
const btn = document.getElementById("btn")
btn.addEventListener(click,() =>
console.log(location.href)//当前地址
// location = https://www.lilichao.com//使得点击按钮后,发生跳转,实现标签a的功能,通过javascript
// location.assign(https://www.lilichao.com)
location.replace(https://www.lilichao.com)
)
</script>
</body>

4、history

history.back()

  • 回退按钮

history.forward()

  • 前进按钮

history.go()

  • 可以向前跳转也可以向后跳转
<body>
<button id="btn">点我一下</button>

<script>
const btn = document.getElementById(btn)

btn.onclick = () =>
console.log(history.length)
history.back()
history.forward()
history.go(-1)

</script>
</body>

5、定时器

通过定时器,可以使代码在指定时间后执行

  • 设置定时器的方式有两种:

setTimeout()

  • 参数:
  1. 回调函数(要执行的代码)
  2. 间隔的时间(毫秒)
  • 关闭定时器

clearTimeout()

setInterval()

每间隔一段时间代码就会执行一次

  • 参数:
  1. 回调函数(要执行的代码)
  2. 间隔的时间(毫秒)
  • 关闭定时器

clearInterval()

<body>
<h1 id="num"></h1>

<script>
// const timer = setTimeout(()=>
// alert(我是定时器中的代码)
// ,3000)//只执行一次

// clearTimeout(timer)

const numH1 = document.getElementById(num)

let num = 0
const timer = setInterval(() =>
num++
numH1.textContent = num

if(num === 200)
clearInterval(timer)

,3000)
</script>
</body>

6、深入理解定时器

定时器的本质

就是在指定时间后将函数添加到消息队列中

setInterval() 没间隔一段时间就将函数添加到消息队列中

但是如果函数执行的速度比较慢,它是无法确保每次执行的间隔都是一样的

<script>
console.time()

setTimeout(function()
console.timeEnd()
console.log(定时器执行了)
,3000)

//使程序卡6s
const begin = Date.now()
while(Date.now() - begin < 6000)


console.time("间隔")
setInterval(function()
console.timeEnd(间隔)

console.log(定时器执行了~)
alert(定时器执行~)

console.time(间隔)
,3000)


/*
希望可以确保函数每次执行都有相同间隔
*/

// console.time("间隔")
// setTimeout(function fn()
// console.timeEnd("间隔")
// alert("哈哈")

// console.time("间隔")
// // 在setTimeout的回调函数的最后,在调用一个setTimeout
// setTimeout(fn, 3000)
// , 3000)


setTimeout(()=>
console.log(11111)
, 0)

console.log(222222)
</script>

7、事件循环

事件循环(event loop)

  • 函数在每次执行时,都会产生一个执行环境
  • 执行环境负责存储函数执行时产生的一切数据
  • 问题:函数的执行环境要存储到哪里呢?
  • 函数的执行环境存储到了一个叫做调用栈的地方
  • 栈,是一种数据结构,特点 后进先出
  • 队列,是一种数据结构,特点 先进先出

调用栈(call stack)

- 调用栈负责存储函数的执行环境
- 当一个函数被调用时,它的执行环境会作为一个栈帧
插入到调用栈的栈顶,函数执行完毕其栈帧会自动从栈中弹出

```html
<script>
function fn()
let a = 10
let b = 20

function fn2()
console.log(fn2)


fn2()

console.log(fn~)


fn()

console.log(1111)
</script>
```

【JavaScript】50_终篇_编程进阶与BOM编程概览(3k字+)_前端_03

  • 队列,是一种数据结构,特点 先进先出

消息队列

  • 消息队列负责存储将要执行的函数
  • 当我们触发一个事件时,其响应函数并不是直接就添加到调用栈中的。
  • 因为调用栈中有可能会存在一些还没有执行完的代码
  • 事件触发后,JS引擎是将事件响应函数插入到消息队列中排队
<body>
<button id="btn">点我一下</button>
<button id="btn02">点我一下2</button>

<script>
function fn()
let a = 10
let b = 20

function fn2()
console.log(fn2)


fn2()

console.log(fn~)


fn()

console.log(1111)

const btn = document.getElementById("btn")
const btn02 = document.getElementById("btn02")

btn.onclick = function()
alert(1111)
const begin = Date.now()

while(Date.now() - begin < 3000)



btn02.onclick = function ()
alert(2222)

</script>
</body>

Javascript初学篇章_6(BOM)

BOM 浏览器对象模型
BOM (浏览器对象模型),它提供了与浏览器窗口进行交互的对象

一、window对象

Window对 象表示整个浏览器窗口。
1.系统消息框 alert()

alert(\'hello world!\');

2.确认对话框 confirm() 

该方法返回一个boolean值,如果点击ok返回true,点击cancel返false;

if(confirm("确定要删除吗?")){

  //删除 
}

3.输入对话框 prompt()

如果点击ok将文本框中的值作为函数值返回,如果点击cancel返回null

//如果用户不输入任何值或点击取消,那么脚本会一直弹出对话框
function
requiredPrompt() { while(true) { var name = prompt("ssss"); if(name != null && name != "") { console.log(name); break; } } }

4. 打开新窗口 window.open()

window.open("http://www.baidu.com","_blank","width=300, height=200");

5.定时器setInterva() 、 setTimeout() 

定时器可以说是js前端最常用的工具,几乎所有的逐渐变化的动态效果都会使用到定时器,比如 说图片滚动,渐隐渐现,拖拽等等.定时器分两种分别是settimeout和setinterval. 

window.setInterval(); //设置循环定时器 
var T = window.setInterval(test,1000); // test:执行的代码串或函数 设置1000毫秒 
window.clearInterval(); //清除循环定时器
window.clearInterval(T); 
window.setTimeout(); //设置单次定时器 
var T = setTimeout(test,1000); // test:执行的代码串或函数 设置1000毫秒
window.clearTimeout() // 清除单次定时器
clearTimeout();

二、history对象

history对象是window对象的子对象,对应于浏览器的 历史记录。

window.history.go(-1);//跳转前一个页面
window.history.go(1);//跳转下一个页面
history.back();//跳转前一个页面 
history.forward();//跳转下一个页面

三、Location对象

Location对象也是window对象的子对象,通过它可以获取或设置浏览器的当前地址。
1.跳转到其它页面

window.location.href = "http://www.163.com";
location.href = "http://www.163.com";

2.重新载入页面(刷新) 

location.reload(); 

四、navigator对象 

Navigator对象包含着有关web浏览器的信息,它也是window的属性,可以用 window.navigator 引用它,也可以用navigator引用
例:获取浏览器内部代号,名称,操作系统等信息

var info = navigator.userAgent; 
alert(info);

效果图如下

 

以上是关于JavaScript50_终篇_编程进阶与BOM编程概览(3k字+)的主要内容,如果未能解决你的问题,请参考以下文章

Java Web学习之JavaScript_BOM和DOM学习(javaScript学习终篇)

网站前端_JavaScript-BOM编程.0001.JavaScriptWindow对象

Javascript初学篇章_6(BOM)

JavaScript进阶知识(BOM)-快速入门篇

Javascript进阶---编写类

03JavaScript程序设计修炼之道_2019-07-07_14-33-54 BOM