Web开发网站-05
目录
1 BOM
- 概念：Browser Object Model 浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装为对象。
- 组成：
- Window：浏览器窗口对象
- Navigator：浏览器对象
- Screen：屏幕对象
- History：历史记录对象
- Location：地址栏对象
Window
- 介绍：浏览器窗口对象。
- 获取：直接window.，其中window.可以省略。
- 属性
- history：对History对象的只读引用。
- location：用于窗口或框架的Location对象。
- navigator：对Navigator对象的只读引用。
- 方法
- alert():显示带有一段消息和一个确认按钮的警告框。
- confirm():显示待有一段消息以及确认按钮和取消按钮的对话框。
- setInterval():按照指定的周期（以毫秒计）来调用函数或计算表达式。
- setTimeout():在指定的毫秒数后调用函数或计算表达式。
//获取
window.alert("Hello BOM")
alert("Hello BOM")
//方法
//confirm - 对话框 ---确认：true，取消：false
var flag = confirm("您确认删除改记录吗？")
alert(flag);
//定时器 -setInterval --周期性的执行某一个函数
var i = 0;
setInterval(function(){
i++;
console.log("定时器执行了"+i+"次");
},2000);
//定时器 --setTimeout --延迟指定时间执行一次
setTimeout(function(){
alert("js")
},3000)Location
- 介绍：地址栏对象。
- 获取：使用window.location获取，其中window.可以省略。
- 属性：
- href：设置或返回完整的url。
//location
alert(location.href);//拿到当前地址
location.href = "https://www.baidu.com";//跳转到指定的域名2 DOM
- 概念：Document Object Model，文档对象模型。
- 将标记语言的各个组成部分封装为对应的对象：
- Document：整个文档对象（html）。
- Element：元素对象（标签）。
- Attribute：属性对象（标签中的属性）。
- Text：文本对象（标签中文本）。
- Comment：注释对象（注释）。
- JavaScript通过DOM,就能够对HTML进行操作：
- 改变HTML元素内容
- 改变HTML元素的样式（css）
- 对HTML DOM事件做出反应
- 添加和删除HTML元素
- DOM是W3C（万维网联盟）的标准，定义类访问HTML和XML文档的标准，分为3个不同的部分：
-
Core(核心） DOM-所有文档类型的标准模型
- Document：整个文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
- XML DOM-XML文档的标准模型
-
HTML DOM-HTML 文档的标准模型
- image：<img>
- Button:<input type='button'>
-
Core(核心） DOM-所有文档类型的标准模型
- HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。
- Document对象中提供了以下获取Element元素对象的函数：
1、根据id属性值获取，返回单个Element对象
var h1 = document.getElementById('h1');
2、根据标签名称获取，返回Element对象数组
var divs = document.getElementByTagName('div');
3、根据name属性值获取，返回Element对象数组
var hobbys = document.getElementsByName('hobby');
4、根据class属性值获取，返回Element对象数组
var clss = document.getElementByClassName（'cls'）;
<script>
//1.获取Element元素
//1.1 获取元素 -根据id获取
var img = document.getElementById("h1");
alert(img);
//1.2 获取元素-根据标签获取
var divs = document.getElementsByTagName('div');
for (let i = 0; i < divs.length; i++) {
alert(divs[i]);
}
//1.3 获取元素-根据name属性获取
var ins = document.getElementsByName('hobby');
for (let i = 0; i < ins.length; i++) {
alert(ins[i]);
}
//1.4 或取元素-根据class属性获取
var divs = document.getElementsByClassName('cls');
for (let i = 0; i < divs.length; i++) {
alert(divs[i]);
}
//2.查询参考手册，属性、方法
var divs = document.getElementsByClassName('cls');
var div1 = divs[0];
div1.innerHTML = '小兔子666';
</script>3 js事件监听
-
事件：HTML事件是放生在HTML元素上的“事情”。比如：
- 按钮被点击
- 鼠标移动到元素上
- 按下键盘按键
- 事件监听：JavaScript可以在事件被侦测到时执行代码。
事件绑定
方式一：通过html标签中的事件属性进行绑定
方式二：通过DOM元素属性绑定
<body>
<input type="button" id="btn1" value="事件绑定1" onclick="on()">
<input type="button" id="btn2" value="事件绑定2">
</body>
<script>
function on(){
alert("按钮1被点击了...")
}
document.getElementById('btn2').onclick = function(){
alert("按钮2被点击了...")
}
</script>常见事件
| 事件名 | 说明 |
| onclick | 鼠标单击事件 |
| onblur | 元素失去焦点 |
| onfocus | 元素获取焦点 |
| onload | 某个页面或图像被完成加载 |
| onsubmit | 当表单提交时触发该事件 |
| onkeydown | 某个键盘的键被按下 |
| onmouseover | 鼠标被移到某元素之上 |
| onmouseout | 鼠标从某元素移开 |
<body onload="load()">
<form action="" style="text-align: center;" onsubmit="subfn()">
<input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()">
<input id ="b1" type="submit" value="提交">
<input id="b1" type="button" value="单击事件" onclick="fn1()">
</form>
<br><br><br>
<table width="800px" border ="1" cellspacing="0" align="center" onmouseover="over()" onmouseout="out()">
<tr>
<th>学号</th>
<th>姓名</th>
<th>分数</th>
<th>评语</th>
</tr>
<tr align="center">
<td>01</td>
<td>张三</td>
<td>90</td>
<td>很优秀</td>
</tr>
<tr align="center">
<td>02</td>
<td>李四</td>
<td>93</td>
<td>很优秀</td>
</tr>
<tr align="center">
<td>03</td>
<td>王五</td>
<td>80</td>
<td>良好</td>
</tr>
</table>
</body>
<script>
//onload：页面/元素加载完成后触发
function load(){
console.log("页面加载完成...")
}
//onclick:鼠标点击事件
function fn1(){
console.log("我被点击了...");
}
//onblur:失去焦点事件
function bfn(){
console.log("失去焦点...");
}
//onfocus:获得焦点事件
function ffn(){
console.log("获得焦点...");
}
//onkeydown:某个键盘被按下
function kfn(){
console.log("键盘按下了");
}
//onmouseover:鼠标移动到元素之上
function over(){
console.log("鼠标移入了..");
}
//onmouseout:鼠标移出某元素之上
function out(){
console.log("鼠标移出了..");
}
//consubmit:提交表单事件
function subfn(){
alert("表单被提交了..");
}
</script>4 灯亮灯灭案例
1.点击“点亮”按钮，点亮灯泡，点击“熄灭”按钮，熄灭灯泡；--onclick
2.输入框聚焦后，展示消息；输入框离焦后，显示大写；
3.点击“全选"按钮使所有复选框呈现选择状态；点击”反选“按钮使所有的复选框呈现取消勾选状态；--onclick
</head>
<img id="light" src="img/off.png" > <br>
<input type="button" value="点亮" onclick="on()">
<input type="button" value="熄灭" onclick="off()">
<br><br>
<input type="text" id="name" value="ITCAST" onfocus="lower()" onblur="upper()">
<br><br>
<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<br>
<input type="button" value="全选" onclick="checkAll()">
<input type="button" value="反选" onclick="reverse()">
<body>
<script>
//1.点击“点亮”按钮，点亮灯泡，点击“熄灭”按钮，熄灭灯泡；--onclick
function on(){
//a.获取img元素对象
var img = document.getElementById("light");
//b.设置src属性
img.src = "img/out.png"
}
function off(){
//a.获取img元素对象
var img = document.getElementById("light");
//b.设置src属性
img.src = "img/off.png"
}
//2.输入框聚焦后，展示消息；输入框离焦后，显示大写；
function lower(){
//a.获取输入框元素对象
var input = document.getElementById("name");
//b.将值转为小写
input.value = input.value.toLowerCase();
}
function upper(){
//a.获取输入框元素对象
var input = document.getElementById("name");
//b.将值转为大写
input.value = input.value.toUpperCase();
}
//3.点击“全选"按钮使所有复选框呈现选择状态；点击”反选“按钮使所有的复选框呈现取消勾选状态；--onclick
function checkAll(){
//a.获取所有复选框的元素对象
var hobbys = document.getElementsByName("hobby");
//b.设置选中状态
for (let i = 0; i < hobbys.length; i++) {
const element = hobbys[i];
element.checked = true;
}
}
function reverse(){
//a.获取所有复选框的元素对象
var hobbys = document.getElementsByName("hobby");
//b.设置选中状态
for (let i = 0; i < hobbys.length; i++) {
const element = hobbys[i];
element.checked = false;
}
}
</script>