JAVA保姆式上手教程之免费JAVA 案例day02-js高级
Posted 云和数据张老师
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JAVA保姆式上手教程之免费JAVA 案例day02-js高级相关的知识，希望对你有一定的参考价值。
一.Bom对象
bom: browser object model 浏览器对象模型 js希望和浏览器有一定的交互能力
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5r8tveWE-1677607234278)(images/image-20210705113343304.png)]
window对象
所有的浏览器都支持window对象。它表示的浏览器窗口
window对象是js中的顶层对象，所有的js函数，变量等都是window对象成员
甚至Dom的document也是window对象的属性之一
frameset
可以把window页面进行分割, 是一个框架标签，把页面引入或者进行割，最大的缺点就不能body一块使用
分割的标签 标签 引入其他页面<frameset rows="20%,*">
<frame src="hear.html" />
<frameset cols="20%,*">
<frame src="left.html" />
<frame src="rigth.html" />
</frameset>
</frameset>
iframe
可以把window页面进行分割， 是一个框架标签，可以和body一块使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<iframe src="index.html"></iframe>
可以书写自己的东东
</body>
</html>
confrim确认框
confrim两个值 确定（true） 取消(false) var con = window.confrim(消息); 返回的类型为boolean
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
右
<input type="button" value="删除" id="del"/>
<script>
window.onload=function()
//删除按钮绑定单击事件
let del_btn= document.getElementById("del");
del_btn.onclick=function()
//弹出提示框，是否要删除
let rel= window.confirm("确定要删除吗？");//boolean true/false
if(rel)
alert("删除成功");
else
alert("就知道你不忍心删我~~~");
</script>
</body>
</html>
时间周期
| clearInterval() | 取消由setInterval()设置的timeout |
|---|---|
| clearTimeout() | 取消setTimeout()设置的timeout |
| setInterval() | 指定时间周期 |
| setTimeout() | 在指定的毫秒数后调期函数或者计算表达式 |
案例让时间走动，进行开始或者停止控制
<!DOCTYPE html>
<html lang="en">
<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>动态时钟</title>
</head>
<body>
<span id="clock"></span>
<!-- 点击按钮，时间停止走动 -->
<input type="button" value="停止" id="stop">
<input type="button" value="开始" id="start">
<script>
window.onload=function()
//span标签中显示当前时间
setTime();
//每隔一秒，重新设置span标签时间
let timeid=setInterval("setTime()",1000);
//点击 停止按钮
document.getElementById("stop").onclick=function()
//取消 周期函数 clearInterval(时间周期id)
clearInterval(timeid);
//点击 开始按钮
document.getElementById("start").onclick=function()
//继续时间走动 再次设置周期函数
timeid=setInterval("setTime()",1000);
function setTime()
//1.得到当前时间
let now =new Date();
let now_str= now.toLocaleString();//当前时间字符串
//2.设置span标签
let span_el=document.getElementById("spanid");
span_el.innerHTML = now_str;
</script>
</body>
</html>
倒记时案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<span style="font-size:40px;color:orange;font-weight:bold" id="spanid">10</span>
秒后跳转至<a href="http://www.baidu.com">百度</a>首页
<script>
window.onload=function()
setInterval("sett()",1000);
let index =10;
//定义函数，修改页面span标签中数字 每秒减一
function sett()
index --;
document.getElementById("spanid").innerHTML = index;
//倒计时 为0 时
if(index==0)
//跳转页面
location.href = "http://www.baidu.com";
</script>
</body>
</html>
关闭，打开浏览器
| close() | 关闭浏览器 |
|---|---|
| open() | 打开浏览器 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function open_Browser()
//打开浏览器窗口
window.open("04-让时间动起来.html");
</script>
</head>
<body>
<input type="button" value="打开浏览器" onclick="open_Browser()" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//关闭浏览器
function close_Browser()
window.close();
</script>
</head>
<body>
<input type="button" value="关闭浏览器" onclick="close_Browser()" />
</body>
</html>
history对象
history对象包含用户访问过的url, 注意： 一定是访问过的历史url
history是window对象的一部份，可以通过window.history属性进行访问
| back() | 加载history列表中的前一个URL |
|---|---|
| forward() | 加载history列表中的下一个URL |
| go(数字) | 加载hitory列表中的某一个具体的页面 |
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WhAVmheB-1677607234280)(images/image-20210705144632357.png)]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
我是01html
<a href="02.html">去02html</a>
</body>
</html>
<script>
//返回上一页
function backPage()
history.back();
//跳到下一页
function forwardPage()
history.forward();
//指定跳转
function goPage()
/*
负数是指定上一个页（左边）
正数是指定下一个页（右边）
*/
history.go(1);
</script>
</head>
<body>
<input type="button" value="返回上一页" onclick="backPage()" />
<input type="button" value="跳到下一页" onclick="forwardPage()" />
<input type="button" value="指定跳转" onclick="goPage()" />
我是02html
<a href="03.html">去03html</a>
</body>
<script>
//指定跳转
function goPage()
history.go(-2);//跳转到01
</script>
</head>
<body>
<input type="button" value="指定跳转" onclick="goPage()" />
我是03html
<a href="01.html">去01html</a>
</body>
Location对象
Location对象是window对象的一部份，可以通过window.location属性来访问
location表示是当前浏览器的地址对象。浏览器的地址中主要保存的是访问某个网站的url地址。
例：把用户带到一个新的地址
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function order()
location.href = "http://www.baidu.com";
</script>
</head>
<body>
<input type="button" value="查询订单" onclick="order()"/>
<a href="http://www.baidu.com">查询订单</a>
</body>
</html>
二.Dom对象
Dom对象: Document Object Model 文档对象模型
W3C组织规定：
当浏览器把一个html文件加载到内存中之后，这个html文件，就是一个Document对象。并且在浏览器加载html文件中的所有标签时，把html文件中的所有标签页加载成不同的标签对象，以及标签中的属性，也加载成属性对象，标签中的文本也加载成文本对象。
浏览器在加载某个标签时，标签的文本数据，被加载成当前标签的一个子标签。当我们把一个html文件加载完成之后，他们就得到这个html文件中的所有标签，属性，文本对象。可以使用js技术结合Document对象，对html文件中的所有标签，进行各种操作。
在浏览器把html文件加载完成之后，标签被称作标签对象（元素节点），标签中的文件称为文本节点（文本对象），标签的属性称为属性节点（属性对象）。
节点信息：
nodeName(节点名称) nodeVale(节点值) nodeType(节点类型)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-de9wWHZ6-1677607234282)(images/image-20210705155311598.png)]
document对象
Document对象代表整个html文档，可用来访问页面中的所有元素
快速获取html中的页面的标签对象
| document.getElementById() | 返回指定id对象的引用 |
|---|---|
| document.getElementsByName() | 返回指定带有名称的对象集合 |
| document.getElementsTagName() | 返回指定带有标签名的对象集合 |
| document.getElementsByClassName() | 根据Class属性值获取元素对象们。返回值是一个数组 |
| document.querySelector(id选择器) | 根据id选择器，获取元素 |
| document.querySelectorAll(css选择器) | 根据css选择器获取元素，返回是一个数组 |
getElementById()
<script>
function demo()
//方式一，获取元素id
//var inputid = document.getElementById("inputid");
//方式二，获取元素id
var inputid = document.querySelector("#inputid");
if(inputid.type == "text")
inputid.type ="password";
else if(inputid.type == "password")
inputid.type ="text";
</script>
</head>
<body>
<input type="text" name="pwd" id="inputid"/>
<input type="button" onclick="demo()" value="显示/隐藏密码" />
</body>
getElementsByTagName()
<script>
function demo1()
//方式一，getElementsByTagName("img"); 返回的是数组
// var _img = document.getElementsByTagName("img");
//方式二，querySelectorAll("img") 可以根据css选择器选中
var _img = document.querySelectorAll("img");
_img[0].width += 30;
function demo2()
var _img = document.getElementsByTagName("img");
_img[0].width -= 30;
</script>
</head>
<body>
<img src="img/404.jpg" width="450px"/>
<input type="button" onclick="demo1()" value="放大" />
<input type="button" onclick="demo2()" value="缩小" />
</body>
getElementsByName()
<script>
function demo()
//方式一， getElementsByName("hobby");
// var hobbys = document.getElementsByName("hobby");
//方式二，querySelectorAll("input[name='hobby']") css选择器
var hobbys = document.querySelectorAll("input[name='hobby']")
for (var i = 0; i < hobbys.length; i++)
if(hobbys[i].checked == true)
alert(hobbys[i].value);
</script>
</head>
<body>
<input type="checkbox" name="hobby" value="悠悠球"/>悠悠球
<input type="checkbox" name="hobby" value="乒乓球"/>乒乓球
<input type="checkbox" name="hobby" value="足足球"/>足足球
<input type="button" value="提交" onclick="demo()" />
</body>
getElementsByClassName()
<script>
function demo()
//方式一，getElementsByClassName("hobby"
// var hobbys = document.getElementsByClassName("hobby");
//方式二,querySelectorAll(".hobby") css选择器
var hobbys = document.querySelectorAll(".hobby");
for (var i = 0; i < hobbys.length; i++)
if(hobbys[i].checked == true)
alert(hobbys[i].value);
</script>
</head>
<body>
<input type="checkbox" name="hobby" class="hobby" value="悠悠球"/>悠悠球
<input type="checkbox" name="hobby" class="hobby" value="乒乓球"/>乒乓球
<input type="checkbox" name="hobby" class="hobby" value="足足球"/>足足球
<input type="button" value="提交" onclick="demo()" />
</body>
操作内容
相关属性
| 属性名 | 描述 |
|---|---|
| element.innerText | 获取或者修改元素的纯文本内容 |
| element.innerHTML | 获取或者修改元素的html内容 |
| element.outerHTML | 获取或者修改包含自身的html内容 |
代码演示
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
#myDiv
border: 1px solid red;
</style>
</head>
<body>
<div id="myDiv">
<h4>注释</h4>
程序猿最讨厌自己写注释，
同时也最讨厌别人不写注释
</div>
<script>
//获取id
let myDiv = document.getElementById('myDiv');
//innerHTML 获取标签中所有内容，包括标签；从对象的起始位置到终止位置的全部内容
console.info(myDiv.innerHTML);
console.info(myDiv.innerHTML="拉出去");
console.info(myDiv.innerHTMLJAVA保姆式JDBC数据库免费教程之02-连接池技术
人工智能AI想要搭建“真本地”的永远免费-真正属于自己的ChatGPT吗？国产开源版 ChatGLM：保姆级上手教程！