Javascript学习,DOM对象,方法的使用
2024-10-21 10:11:02
JavaScript:
ECMAScript:
BOM:
DOM:
事件
DOM的简单学习
功能:控制html文档内容
代码:获取页面标签(元素)对象和Element
document.getElementById("id值"):通过元素id获取元素对象
操作Element对象
修改属性值
明确获取的对象是那个?
查看api文档,找其中有哪些属性可以设置
修改标签体内容
属性,innerhtml
事件简单学习
功能:某些组件被执行了某些操作后,触发某些代码的执行。
如何绑定事件
直接html标签上,指定事件的属性,属性值就是js代码
事件:onclick..单击事件
通过js获取元素对象,指定事件的属性,设置一个函数
小案例:点击实现图片切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img id="c" src="img/psc2.jpg">
<script>
/*
1.获取图片对象
2.绑定单击事件
3.每次切换图片
规则,
如果灯是开的on,切换为off
*/
var light = document.getElementById("c");
var flag = false;//加入表示判断图片是否是psc2
light.onclick = function () {
if (flag) {
light.src = "img/psc3.jpg";
flag = false;
}else {
light.src = "img/psc2.jpg";
flag = true;
}
}
</script>
</body>
</html>
BOM:
概念:Browser object Model 浏览器对象模型
将浏览器各个组成部分封装成对象
Browser 对象
[Window] 窗口对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>window对象</title>
</head>
<body>
<input id="openBtn" type="button" value="打开新窗口">
<input id="closeBtn" type="button" value="关闭新窗口">
<script>
/*
window窗口对象
1.创建
2.方法
1.与弹出框有关的方法
alert() 弹出一个警告框
confirm()显示带有一段信息以及确认按钮和取消按钮的对话框
如果用户点击确定返回true,点击取消返回false
prompt() 显示提示用户输入的对话框
2.与打开关闭有关的方法
close()关闭浏览器窗口
谁调用我,我关闭谁
open()打开一个新的浏览器窗口
返回新的Window对象
3.与定时器有关的方法
setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
参数:
1.js代码或者方法对象
2.毫秒值
返回值:唯一标识,用于取消定时器
clearInterval() 取消由 setInterval() 设置的 timeout。
cl clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
3.属性
1.获取其他BOM对象
history
location
Screen
document
4.特点
window对象不需要创建可以直接使用,window使用window.方法名
window引用可以省略,方法名()
*/
//alert("hello window");
//window.alert("111");
//var flag = confirm("确定要退出");
//alert(flag);
/* var newWindow;
var openBtn = document.getElementById("openBtn");
openBtn.onclick = function () {
//打开一个新窗口
newWindow = open("http://www.baidu.com");
}
var closeBtn = document.getElementById("closeBtn");
closeBtn.onclick = function () {
//关闭一个新窗口
newWindow.close();
}*/
//一次性定时器
//var id =setTimeout("f1();",2000);
clearTimeout(id);
function f1() {
alert('boom');
}
//循环定时器
var id = setInterval(f1,2000);
</script>
</body>
</html>
轮播图案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
</head>
<body>
<img id="img" src="img/psc2.jpg" width="100%" height="100%">
<script>
/*
分析:
1.在页面上使用img标签
2.定义一个方法修改图片的连接
3.定义定时器,每隔一段时间换一张图片
*/
//修改图片src
var num = 1;
function change() {
num++;
if(num>3){
num = 1;
}
var img1 = document.getElementById("img");
img1.src = "img/psc"+num+".jpg";
}
//2.定义定时器
setInterval(change,3000);
</script>
</body>
</html>[Navigator] 浏览器对象
[Screen]显示器对象
[History]历史记录对象
创建(获取):
window.history
history
方法
back()加载history列表中的前一个url
forward()加载history列表中的下一个url
go()加载history列表中的某个具体页面
正数,前进几个历史记录
负数,后退几个历史记录
属性
length 返回当前窗口的历史列表中的url数量
[Location]地址栏对象
创建
window.location
location
方法
reload()重新加载当前文档,刷新
属性
href 设置或返回完整URL
DOM对象
概念:document object Model 文档对象模型
将标记语言文档的各个组成部分,封装成对象,可以使用这些对象,对标记语言
最新文章
- android raw和assets的区别
- 【JAE】JAE京东云擎部署首个Java应用
- java基础学习总结——基础语法1
- LeetCode之Balanced Binary Tree 平衡二叉树
- 【bug】“Mat map” opencv全局变量不明确
- mongo 1067错误
- 基于Selenium2+Java的UI自动化(5) - 执行JavaScript脚本
- Spring框架简单介绍
- java泛型总结(类型擦除、伪泛型、陷阱)
- Linux记录-jstack采集namenode堆栈信息
- 18-11-01 pandas 学习03
- #6【bzoj4321】queue2 dp
- swift 桥接 Bridging 的创建和使用
- docker build 指定dockerfile
- html &; js 单双引号
- 给所有开发者的React Native详细入门指南
- Git 命令及使用经验
- 在hive中查询导入数据表时FAILED: SemanticException [Error 10096]: Dynamic partition strict mode requires at least one static partition column. To turn this off set hive.exec.dynamic.partition.mode=nonstrict
- POJ - 3662 Telephone Lines (Dijkstra+二分)
- spark-shell与scala生成parquet文件
热门文章
- AtCoder Beginner Contest 182 D - Wandering (前缀和)
- CodeForces - 721C 拓扑排序+dp
- 【论文笔记】AutoML for MCA on Mobile Devices——论文解读与代码解析
- Linux运维博客大全
- 弹性计算服务(Elastic Compute Service) / 云服务器 ECS
- spring再学习之设计模式
- 1076D Edge Deletion 【最短路】
- PAT L2-005. 集合相似度 【stl set】
- Leetcode(3)-无重复字符的最长子串
- Linux 驱动框架---i2c驱动框架