day21复习
Java-day22学习笔记
一、BOM
1.1 Navigator对象属性
appCodeName 返回浏览器的代码名
appName 返回浏览器的名称
appVersion 返回浏览器的平台和版本信息
platform 返回运行浏览器的操作系统平台
userAgent 返回由客户机发送服务器的 user-agent 头部的值
1.2 Screen对象属性
width 返回显示器屏幕的宽度
height 返回显示器屏幕的高度
1.3 Location对象属性
host 设置或返回主机名和当前 URL 的端口号
port 设置或返回当前 URL 的端口号
href 设置或返回完整的 URL
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-Navigator对象</title>
</head>
<body>
</body>
</html>
<script>
console.log(navigator.appName);
console.log(navigator.appVersion);
console.log(navigator.appCodeName);
console.log(navigator.platform);
console.log(navigator.userAgent);
console.log("------------");
console.log(screen.width);
console.log(screen.height);
console.log("------------");
console.log(location.host);
console.log(location.port);
console.log(location.href);
// location.href="https://www.baidu.com";
</script>
二、DOM
DOM:Document Object Model 文档对象模型。dom是js提供的,用来访问网页上所有的元素(标签、属性、文本)
浏览器在加载的时候,会将网页的内容会生成一个dom对象,这个dom对象是一个树的形状,它将内容按照不同的类型分成了如下几类:
整个网页封装成了Document对象
标签封装成了Element对象
属性封装成了Attribute对象
文本封装成了Text对象
2.1 获取网页元素的方法
getElementById() 返回对拥有指定 id 的第一个对象的引用
getElementsByName() 返回带有指定名称的对象集合 【返回值为数组】
getElementsByTagName() 返回带有指定标签名的对象集合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-获取网页中的元素</title>
</head>
<body>
<p id="bt">背影</p>
<input type="text" id="txt" name="username"> <br>
<input type="text" id="txt2" name="username"> <br>
<input type="button" id="btn" name="password">
</body>
</html>
<script>
var elementById = document.getElementById("bt");
console.log(elementById);
var txt = document.getElementById("txt");
console.log(txt);
var btn = document.getElementById("btn");
console.log(btn);
console.log("--------------------------");
var elementsByName = document.getElementsByName("username");
console.log(elementsByName[2]);
console.log("--------------------------");
var elementsByTagName = document.getElementsByTagName("input");
console.log(elementsByTagName);
console.log(elementsByTagName[0]);
</script>
2.2 对网页中的标签进行操作
innerHTML
功能:获取文本的内容
innerHTML=内容;
功能:
1. 对相应的标签设置文本内容(可以带样式)
2. 会将之前的内容给覆盖掉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-对网页中的标签进行操作</title>
</head>
<body>
<span>Hello World!</span>
<!--<input type="text" id="txt" value="haha">-->
</body>
</html>
<script>
var spans = document.getElementsByTagName("span");
console.log(spans[0].innerHTML);
spans[0].innerHTML="hello <font size='7' color='red'>js</font>!";
// var txt = document.getElementById("txt");
// console.log(txt.innerHTML);
</script>
2.3 对网页中的标签属性进行操作
getAttribute() 返回元素节点的指定属性值 【指定属性的属性值】
setAttribute() 把指定属性设置或更改为指定值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-对网页中的标签属性进行操作</title>
</head>
<body>
<input type="text" id="txt" value="haha">
</body>
</html>
<script>
var txt = document.getElementById("txt");
console.log(txt.getAttribute("value"));
txt.setAttribute("value", "hehe");
console.log(txt.getAttribute("value"));
</script>
练习:
1. 写一个文本输入框和一个普通按钮
2. 点击按钮可以实现显示或隐藏密码(按着按钮是显示密码,松开按钮是加密密码)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-练习</title>
</head>
<body>
<input type="password" id="pwd"> <br>
<input type="button" id="btn" value="按钮" onmousedown="showPassword()" onmouseup="hidePassword()">
</body>
</html>
<script>
function showPassword() {
document.getElementById("pwd").setAttribute("type", "text");
}
function hidePassword() {
document.getElementById("pwd").setAttribute("type", "password");
}
</script>
练习2:
轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05-轮播图</title>
<script>
var count = 0;
//2. 更换图片的方法
function changePic() {
//获取img对象
var pic = document.getElementById("pic");
//通过img对象的src属性给src赋新值
pic.src = "../img/pic" + (++count) + ".jpg";
//如果count>3,那么就将count重置为1
if(count == 3){
count = 0;
}
}
</script>
</head>
<!--1. 页面加载的时候就执行定时器开始每隔2秒调用一下更换图片的方法-->
<body onload="setInterval('changePic()', 2000)">
<img src="../img/pic1.jpg" id="pic">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06-轮播图</title>
<script>
var count = 0;
function changePic() {
var pic = document.getElementById("pic");
pic.setAttribute("src", "../img/pic" + (++count) + ".jpg");
if(count == 3){
count = 0;
}
}
</script>
</head>
<body onload="setInterval('changePic()', 2000)">
<img src="../img/pic1.jpg" id="pic">
</body>
</html>