JavaScript 组成
DOM 与 BOM 的关系：
DOM 的核心对象document 是 BOM中window对象的子对象
-
BOM 操作
BOM（Browser Object Model）浏览器对象模型，是 JavaScript 与浏览器之间进行交互的接口
BOM 提供了一组对象，这些对象代表着浏览器相关内容，并提供了访问和控制这些对象的方法
以下是一些常见的 BOM 对象：
-
window
-
location
-
history
window 对象
window 对象是 JavaScript 中表示当前浏览器窗口的内置全局对象
它包含了浏览器窗口的所有属性和方法，可以通过该对象来访问和控制当前窗口的各种行为
-
isNaN（变量） 判断变量是否是 NaN
-
parseInt（） 将字符串或小数转成整数
-
parseFloat（） 将字符串转成小数
-
alert（"xxx"） 弹出提示框
-
confirm（"xxx"） 弹出确认框
-
prompt（"xxx"） 弹出输入对话框
<button onclick="alert('警告框')">弹出警告框</button>
<button onclick="confirm('您确认要删除吗?')">弹出确认框</button>
<button onclick="prompt('请输入会员卡号:')">弹出提示输入框</button>location 对象
-
location.href 获取或修改浏览器的请求地址
-
location.reload() 刷新页面
-
location.search 获取查询字符串参数 http://localhost:8080/v1/user?id=219
history 对象
-
history.length 历史页面的数量
-
history.back() 返回上一页面 后退
-
hisotry.forward() 前往下一页面 前进
-
history.go(n) 正值代表前进n个页面 负值代表后退n个页面
-
history.go(0) 表示刷新页面
-
history.go(-1) 表示回退一个页面,注意如果是第一个页面,无法回退
-
history.go(2) 表示前进两个页面,注意如果是最后一个页面,无法前进
-
-
DOM 操作
DOM（Document Object Model）文档对象模型， 包含 W3C 规定的页面相关接口
DOM 把页面规划成节点层级构成的文档，当浏览器加载一个 WEB 页面时，就会创建这个页面的模型，称为 DOM 树。
下面是一个 DOM 树结构示例：
-
常用API
这些接口可以操作网页的结构、内容与样式：
这些接口可以操作网页的结构、内容与样式：
创建元素对象
-
let d = document.createElement("div");
将新元素到某个元素对象里
-
元素对象.append（新元素）；
修改元素的属性值
-
imgE.src = "money.jpg";
通过 id 获取页面中的元素对象
-
let 元素对象 = document.getElementById('d2');
-
h5 中也可以直接使用 id 值代表元素 console.log（id 值）；
通过选择器获取页面中的元素对象
-
let 元素对象 = document.querySelector（"选择器"）；
获取和修改控件的值
-
元素对象.value 获取
-
元素对象.value="xxx" 修改
获取和修改元素的文本内容 例：<div>文本内容</div>
-
元素对象.innerHTML获取
-
元素对象.innerHTML = “xxx” 修改
-
基础练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM操作</title>
</head>
<body>
<!--效果:每点击一次按钮,就会在页面多一张图片-->
<!--1.给按钮绑定点击事件,每点击一次,就调用一次addMoney()-->
<button onclick="addMoney()">点我变富有</button>
<script>
//2.创建addMoney()方法
function addMoney() {
//3.创建一个空的img元素 <img>
let img = document.createElement('img');
//4.设置img元素的属性值 <img src="img/money.jpg" width="200px">
img.src = 'img/money.jpg';
img.width = 200;//注意没有px单位!
//5.获取body元素,将img元素添加到body元素中
let body = document.querySelector('body');
body.append(img);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02DOM练习</title>
</head>
<body>
<h1>我是标题:<span class="s"></span></h1>
<input type="text" id="i1">
<input type="text" id="i2">
<button onclick="f1()">按钮</button>
<button onclick="f2()">按钮2</button>
<script>
function f1(){
//根据类选择器获取span中的元素
let spanE = document.querySelector('.s');
console.log(spanE);
//设置span内的文字
spanE.innerHTML = '哈哈哈';
}
function f2(){
let input1 = document.querySelector('#i1');
let input2 = document.getElementById('i2');
console.log(input1.value);
console.log(typeof input2.value);
let i2 = parseFloat(input2.value);
console.log(i2,typeof i2);
}
</script>
</body>
</html>-
计算器练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06_计算器练习</title>
</head>
<body>
<input type="text" placeholder="请输入数字1" id="i1"> <br>
<input type="text" placeholder="请输入数字2" id="i2"> <br>
<button onclick="calc('+')">加</button>
<button onclick="calc('-')">减</button>
<button onclick="calc('*')">乘</button>
<button onclick="calc('/')">除</button>
<h4>运算结果:<span></span></h4>
<script>
function calc(o){
//1.获取用户在两个输入框中输入的数字
let n1 = document.getElementById('i1').value;
let n2 = document.getElementById('i2').value;
//2.将获取到的输入的值转为数值类型
n1 = parseFloat(n1);
n2 = parseFloat(n2);
//4.需要获取显示结果的span元素
let spanE = document.querySelector('span');
//3.根据用户调用函数时传入的运算符进行对应的计算
switch(o){
case '+':
spanE.innerHTML = n1 + n2;
break;
case '-':
spanE.innerHTML = n1 - n2;
break;
case '*':
spanE.innerHTML = n1 * n2;
break;
case '/':
if(n2!=0){
spanE.innerHTML = n1 / n2;
}else{
alert('除数不能为0!');
}
}
}
</script>
</body>
</html>
-
猜数字练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04猜数字练习</title>
</head>
<body>
<h3>已生成一个1~100的随机数:</h3>
<input type="text" placeholder="请输入您猜的数字!">
<button onclick="guess()">点我验证</button>
<h3>小提示: <span></span> </h3>
<script>
//1.生成一个1~100的随机数 [0,1)*100=[0,100)+1=[1,101)
let n = parseInt(Math.random()*100)+1;
console.log('打个小抄：'+n);
//2.定义一个用来统计次数的变量
var count = 0;
function guess(){
let num = document.querySelector('input').value;
//isNaN()用于判断参数是否为非数字,如果是非数字,结果为true,否则为false
if(isNaN(num)){
alert('请输入数字!');
return;
}
let spanE = document.querySelector('span');
count++;
if(num>n){
spanE.innerHTML = '猜大了!';
}else if(num<n){
spanE.innerHTML = '猜小了!';
}else{
spanE.innerHTML = '恭喜你用了'+count+'次就猜对了!';
}
}
</script>
</body>
</html>
-
员工表格练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05员工表格练习</title>
</head>
<body>
<input type="text" placeholder="请输入员工姓名" id="i1">
<input type="text" placeholder="请输入员工工资" id="i2">
<input type="text" placeholder="请输入员工岗位" id="i3">
<button onclick="addEmp()">添加员工</button>
<hr>
<table border="1px">
<caption>员工表</caption>
<tr>
<th>姓名</th>
<th>工资</th>
<th>岗位</th>
</tr>
</table>
<script>
//8.1 准备一个空数组,用来保存所有的员工数据
let arr = [];
//1.每次点击添加员工按钮,调用此函数
function addEmp(){
//2.获取输入框中输入的三个值
let uName = document.getElementById('i1').value;
let uSalary = document.getElementById('i2').value;
let uJob = document.getElementById('i3').value;
//3.创建1个tr与3个td,都是空的!
let tr = document.createElement('tr');//<tr></tr>
let nameTd = document.createElement('td');//<td></td>
let salaryTd = document.createElement('td');//<td></td>
let jobTd = document.createElement('td');//<td></td>
//4.把收集到输入框数据装入td中
nameTd.innerHTML = uName;
salaryTd.innerHTML = uSalary;
jobTd.innerHTML = uJob;
//5.将3个准备好的td装入tr中
tr.append(nameTd,salaryTd,jobTd);
//6.获取表格元素,将准备好的tr装入table中
let table = document.querySelector('table');
table.append(tr);
//7.表格显示成功后,要清空输入框中的数据
document.getElementById('i1').value="";
document.getElementById('i2').value="";
document.getElementById('i3').value="";
//8.2将本次收集到的员工数据存入员工数组里(后期可以给后端发请求)
arr.push({name:uName,salary:uSalary,job:uJob});
console.log(arr);
}
</script>
</body>
</html>
-
商品表格练习
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06自定义JS对象</title>
</head>
<body>
<table border="1px">
<caption>商品表</caption>
<tr>
<th>商品标题</th>
<th>商品价格</th>
<th>商品库存</th>
</tr>
</table>
<script>
//3.定义一个数组，模拟从服务器请求回来多个商品对象
let productArr = [
{title:'小米14',price:8000,num:200},
{title:'华为Mate60',price:5000,num:100},
{title:'苹果16',price:10000,num:700},
{title:'魅族',price:2000,num:600},
];
console.log(productArr);
console.log(productArr[2]);
/*提示：数组里有几件商品 表格里就有几个tr 遍历数组*/
//获取表格元素
let tableE = document.querySelector('table');
//遍历上方的数组，有几件商品，就生成几个tr
for(let i = 0; i<productArr.length; i++){
let trE = document.createElement('tr');
let titleTd = document.createElement('td');
let priceTd = document.createElement('td');
let numTd = document.createElement('td');
titleTd.innerHTML = productArr[i].title;
priceTd.innerHTML = productArr[i].price;
numTd.innerHTML = productArr[i].num;
trE.append(titleTd,priceTd,numTd);
tableE.append(trE);
}
//1.创建一个自带属性与方法的对象
let p1 = {
name:'张三',
age:18,
say:function(){
console.log('我是'+this.name+',今年'+this.age+'岁了!')
}
};
console.log(p1);
p1.say();
//2.先创建一个空对象，再动态添加其属性与方法
let p2 = {};
p2.name = '李四';
p2.age = 19;
p2.say = function(){
console.log('我是'+this.name+',今年'+this.age+'岁了!')
};
console.log(p2);
p2.say();
</script>
</body>
</html>
-
DOM事件监听
可以使用 addEventListener('事件类型',事件处理函数)为选中的元素添加事件监听器
常见的事件类型:
-
click 点击事件
-
mouseover 鼠标移入事件
-
window.resize 监听修改窗口大小事件
-
window.scroll 监听窗口滚动条滚动事件
window 对象是JS中的一个全局对象，它代表了当前浏览器窗口,属于浏览器环境的一部分,不需要导入或者实例化就可以使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>07事件监听</title>
</head>
<body>
<h4>震惊！奥运开幕式竟然发生了...</h4>
<button>按钮</button>
lorem*50
<script>
/*点击事件*/
let buttonE = document.querySelector('button');
buttonE.addEventListener('click',function () {
alert('按钮被点击了！');
})
/*鼠标移入事件*/
let h4E = document.querySelector('h4');
h4E.addEventListener('mouseover',function () {
console.log('标题被(悬停)了！');
})
/* window是DOM自带的对象,它是一个全局对象，代表了当前浏览器视口 */
window.addEventListener('resize',function(){
// alert('窗口大小被改变了！');
})
window.addEventListener('scroll',function(){
alert('窗口滚动了！');
})
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
