1、JS对象-自定义对象
let 对象名 = {
属性名1:属性值1,
属性名2:属性值2,
属性名3:属性值3,
函数名称:function(形参列表){},
函数名称(形参列表){}
};
2、JS对象-JSON对象
JSON概念:本质是通过JavaScript对象标记法书写的文本。
使用场景:现多用于作为数据载体,在网络中进行数据传输。
- JSON定义
//两种定义
let 变量名 = {"key":value, "key":value, "key":value,...}
let json = [value,value,value];
value的数据类型为:数字、字符串、逻辑值、数组、对象、null。
- js对象转为JSON字符串
let str = JSON.stringify(json);
- JSON字符串转为js对象
let json = JSON.parse(str);
3、JS对象-BOM对象
- 概念:BOM浏览器对象模型,指的是JS将浏览器的各个组成部分封装为对象,使用对象可以操作浏览器。
- 组成:
- Window:浏览器窗口对象
- Navigator:浏览器对象
- Screen:屏幕对象
- History:历史记录对象
- Location:地址栏对象
- Window对象:浏览器窗口对象,可以直接使用,使用的时候也可以省略不写。
- alert(msg):显式带有一段消息和一个确认按钮的警告框。
- confirm(msg) - 对话框 -- 确认:true,取消:false
- setInterval(function,毫秒值) - 定时器 --按照指定的周期(以毫秒计)循环调用函数
- setTimeout(function,毫秒值) - 定时器 -- 在指定的毫秒数后调用函数
- location对象:地址栏对象,获取或者设置地址栏地址,设置地址栏地址可以实现页面跳转效果。
// confirm(msg) - 对话框 -- 确认:true,取消:false
let flag=confirm("您确定要删除吗?");
if(flag){
alert("开始删除数据...");
}
//setInterval(function,毫秒值) - 定时器 --按照指定的周期(以毫秒计)循环调用函数
setInterval(function(){
console.log("循环定时器执行");
},2000);
//setTimeout(function,毫秒值) - 定时器 -- 在指定的毫秒数后调用函数
setTimeout(function(){
console.log("一次定时器执行");
},2000);
//获取地址栏地址
let href=location.href;
location.href="http://www.baidu.com"//效果:会页面跳转
console.log(href);
4、JS对象-DOM对象
1、概念
DOM是文档对象模型,将HTML的各个组成部分封装为对应的对象:
- Document:整个文档对象
- Element:元素对象
- Attribute:属性对象
- Text:文本对象
- Comment:注释对象
JavaScript通过DOM,就能够对HTML进行操作:
- 改变HTML元素的内容
- 改变HTML元素的属性
- 改变HTML元素的样式(CSS)
- 对HTML DOM事件作出反应
2、DOM操作-获取元素对象
- HTML中的Element对象可以通过Document对象获取,而Document对象是通过window对象获取的。
- 获取:使用Document对象的方法来获取(ES5提供的方法)
- document.getElementById:根据id属性值获取,返回一个Element对象
- document.getElementsByTagName:根据标签名获取,返回Element对象数组
- document.getElementsByName:根据name属性值获取,返回Element对象数组
- document.getElementsByClassName:根据class属性值获取,返回Element对象数组
- 获取:使用Document对象的方法来获取(ES6提供的方法)
- document.querySelector("css选择器"):根据css选择器获取一个Element对象
- document.querySelectorAll("css选择器"):根据css选择器获取一个Element对象数组
3、DOM操作-使用元素对象
- Element:元素对象的使用(查阅文档)
- 常用操作:
- 访问内容体:元素对象.innerHTML h2.innerHTML="scc";
- 访问输入框内容:元素对象.value console.log(usernameInput.value);
- 访问属性:元素对象.属性名 img.src="img/on.gif";
- 访问样式:元素对象.style.样式属性名 h2.style.color="red";
- 步骤:
- 获取元素对象
- 操作内容、属性、样式
<div class="cls">教育</div>
<div class="cls">程序员</div>
<input type="checkbox" name="hobby" class="hobby">电影
<input type="checkbox" name="hobby" class="hobby">旅游
<input type="checkbox" name="hobby" class="hobby">游戏
<script>
// 将所有div标签的内容后面加上:very good(红色字体)
let divs=document.querySelectorAll(".cls");
for (let div of divs) {
div.innerHTML+="<font color='red'>very good</font>";
}
// 使所有复选框呈现选中状态
let checkboxs=document.querySelectorAll(".hobby");
for (let checkbox of checkboxs) {
checkbox.checked=true;
}
</script>
5、JS事件-事件介绍和绑定
- 事件:HTML事件是发生在HTML元素上的“事情”。比如:按钮被点击、鼠标移到元素上、按下键盘按键等。
- 事件监听:JavaScript可以在事件被侦测到时执行代码。
- 事件绑定
- 方式一:通过HTML标签中的事件属性进行绑定
- 方式二:通过DOM元素属性绑定
<input type="button" id="btn1" value="事件绑定1" onclick="on()">
<input type="button" id="btn2" value="事件绑定2">
<script>
// 方式一:通过HTML标签中的事件属性进行绑定
function on(){
alert("事件1被点击了");
}
// 方式二:通过DOM元素属性绑定
document.querySelector("#btn2").onclick=function(){
alert("事件2被点击了");
}
</script>
6、JS事件-常见事件
事件名 | 说明 |
onclick | 鼠标单击事件 |
onblur | 元素失去焦点 |
onfocus | 元素获得焦点 |
onload | 某个页面或图像被完成加载 |
onsubmit | 当表单提交时触发该事件 |
onkeydown | 某个键盘的键被按下 |
onmouseover | 鼠标被移到某元素之上 |
onmouseout | 鼠标从某元素移开 |
- 事件和DOM操作结合使用的步骤:
- 给标签绑定事件(有两种方式)
- 在事件函数中获取元素(标签)对象
- 通过元素(标签)对象操作内容体、属性、样式
- JS事件案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS学习</title>
</head>
<body>
<img src="../resource/image/dhimg2.png" alt="" id="img">
<br>
<input type="button" value="点亮" onclick="on()">
<input type="button" value="熄灭" onclick="off()">
<br>
<input type="text" value="ITCAST" id="txt" onfocus="fc()" onblur="br()">
<br>
<input type="checkbox" name="box" id="box">电影
<input type="checkbox" name="box" id="box">旅游
<input type="checkbox" name="box" id="box">游戏
<br>
<input type="button" value="全选" onclick="on1()">
<input type="button" value="反选" onclick="on2()">
<script>
function on(){
let i = document.querySelector("#img");
i.src="../resource/image/dhimg3.png";
}
function off(){
let i = document.querySelector("#img");
i.src="../resource/image/dhimg2.png";
}
function fc(){
let i = document.querySelector("#txt");
i.value=i.value.toLowerCase();
}
function br(){
let i = document.querySelector("#txt");
i.value=i.value.toUpperCase();
}
function on1(){
let i = document.querySelectorAll("#box");
for (let s of i) {
s.checked=true;
}
}
function on2(){
let i = document.querySelectorAll("#box");
for (let s of i) {
s.checked=false;
}
}
</script>
</body>
</html>