04javascript02
1.BOM
1.1概念
Browser Object Model 浏览器对象模型
将浏览器的各个组成部分封装成对象。
1.2.组成
Window:窗口对象
Navigator:浏览器对象
Screen:显示器屏幕对象
History:历史记录对象
Location:地址栏对象
1.3Window窗口对象
1. 创建
2. 方法
1. 与弹出框有关的方法:
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
如果用户点击确定按钮,则方法返回true
如果用户点击取消按钮,则方法返回false
prompt() 显示可提示用户输入的对话框。
返回值:获取用户输入的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
alert("hello world");
window.alert("你好世界");
var flag = confirm("确定退出吗?");
alert(flag)
if(flag){
alert("再见");
}else {
alert("欢迎再次光临");
}
var name = prompt("请输入用户名");
alert(name);
</script>
</head>
<body> </body>
</html>
2. 与打开关闭有关的方法:
close() 关闭浏览器窗口。
谁调用我 ,我关谁
open() 打开一个新的浏览器窗口
返回新的Window对象3. 与定时器有关的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="openBtn" type="button" value="打开窗口">
<input id="closeBtn" type="button" value="关闭窗口">
<script>
var openBtn = document.getElementById("openBtn");
var newWindow;
openBtn.onclick = function () {
newWindow = open("https://www.baidu.com");
}; var closeBtn = document.getElementById("closeBtn");
closeBtn.onclick = function () {
newWindow.close();
};
</script>
</body>
</html>
3.与定时器有关的方法
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
参数:
1. js代码或者方法对象
2. 毫秒值
返回值:唯一标识,用于取消定时器
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//一次性定时器
// setTimeout("fun();",3000);
//或者下面这种写法
var timeout = setTimeout(fun,3000);
function fun() {
alert("boom~~~");
} //循环定时器
var interval = setInterval(fun,2000); //取消定时器
clearTimeout(timeout); //取消循环定时器
clearInterval(interval);
</script>
</body>
</html>
4.案例:轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body>
<img id="img" src="img/banner_1.jpg" width="100%"> <script>
/*分析
1.在页面上使用img标签展示图片
2.定义一个方法修改图片的src
3.定义一个定时器,每隔三秒调用方法一次
*/ //修改图片src属性
var number = 1; function fun() {
number++;
//判断number是否大于3
if (number > 3)
number = 1;
var img = document.getElementById("img");
img.src = "img/banner_" + number + ".jpg";
} //定义定时器
setInterval(fun,3000); </script>
</body>
</html>
3. 属性:
1. 获取其他BOM对象:
history
location
Navigator
Screen:
2. 获取DOM对象
document
4. 特点
Window对象不需要创建可以直接使用 window使用。 window.方法名();
window引用可以省略。 方法名();
1.4Location:地址栏对象
1. 创建(获取):
1. window.location
2. location
2. 方法:
reload()重新加载当前文档。刷新
3. 属性
href设置或返回完整的 URL。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" id="btn" value="刷新">
<input type="button" id="goBaidu" value="去百度">
<script>
//reload方法,定义一个按钮,点击按钮,刷新当前页面
//1.获取按钮
var btn = document.getElementById("btn");
//2.绑定单击事件
btn.onclick = function () {
//3.刷新页面
location.reload();
}; //获取href
var href = location.href;
// alert(href);
var goBaidu = document.getElementById("goBaidu");
goBaidu.onclick = function () {
location.href = "https://www.baidu.com";
}; </script>
</body>
</html>
案例倒数数秒定时跳转:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
text-align: center;
} span {
color: red;
}
</style> </head>
<body>
<p>
<span id="time">5</span>秒之后,自动跳转到首页...
</p> <script>
/*
分析:
1.显示页面效果 <p>
2.秒数倒计时
2.1定义一个方法,获取span标签,获取span标签体内容,time--;
2.2定义一个定时器,一秒执行一次该方法。
3.在方法中判断,时间如果小于0,则跳转到首页
*/
var second = 5;
var time = document.getElementById("time"); function showTime() {
second--;
if (second <= 0) {
location.href = "https://www.baidu.com";
}
time.innerHTML = second + "";
} //设置定时器,1秒执行一次该方法
setInterval(showTime, 1000); </script>
</body>
</html>
1.5History:历史记录对象
1. 创建(获取):
1. window.history
2. history
2. 方法:
back()加载 history 列表中的前一个 URL。
forward()加载 history 列表中的下一个 URL。
go(参数)加载 history 列表中的某个具体页面。
参数:
正数:前进几个历史记录
负数:后退几个历史记录
3. 属性:
length返回当前窗口历史列表中的 URL 数量。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" id="btn" value="获取历史记录个数">
<input type="button" id="forward" value="前进">
<a href="06自动跳转案例.html">06页面</a>
<script>
//1.获取按钮
var btn = document.getElementById("btn");
//2.绑定单机事件
btn.onclick = function () {
//3.获取当前窗口历史记录个数
var length = history.length;
alert(length);
}; //1.获取按钮
var forward = document.getElementById("forward");
//2.绑定单机事件
forward.onclick = function () {
history.forward();
} </script>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1.BOM编程
1.1入门
BOM就是浏览器对象模型编程,通过javascript引擎提供的四个浏览器对象,操作浏览器,这叫BOM编程。
1.2window对象(重点)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>window对象</title>
<script type="text/javascript">
/*
open(): 在一个窗口中打开页面 setInterval(): 设置定时器(执行n次)
setTimeout(): 设置定时器(只执行1次)
clearInterval(): 清除定时器
clearTimeout(): 清除定时器 alert(): 提示框
confirm(): 确认提示框
propmt(): 输入提示框 注意:
因为window对象使用非常频繁,所以当调用js中的window对象的方法时,可以省略对象名不写。
*/
function testOpen() {
/*
参数一: 打开的页面
参数二:打开的方式。 _self: 本窗口 _blank: 新窗口(默认)
参数三: 设置窗口参数。比如窗口大小,是否显示任务栏
*/
window.open("http://www.baidu.com", "width=300px;height=300px;toolbar=0")
} let taskId; function testInterval() {
/*
定时器: 每隔n毫秒调用指定的任务(函数)
参数一:指定的任务(函数)
参数二:毫秒数
*/
taskId = window.setInterval("testOpen()", 3000)
} function testClearInterval() {
/*清除任务
参数一:需要清除的任务ID
*/
window.clearInterval(taskId);
} let toId; function testTimeout() {
/*设置定时任务*/
toId = window.setTimeout("testOpen()", 3000);
} function testClearTimeout() {
window.clearTimeout(toId);
} function testAlert() {
window.alert("提示框");
} function testConfirm() {
/*
返回值就是用户操作
true: 点击了确定
false: 点击了取消
*/
let flag = window.confirm("确认删除吗?一旦删除不能恢复,请慎重!");
if (flag) {
alert("确定删除,正在删除中....");
} else {
alert("取消了操作");
}
}
function testPrompt(){
/*
输入提示框
*/
let flag = window.prompt("请输入你的U顿密码");
if(flag){
alert("密码正确,转账中...");
}else{
alert("取消了操作");
}
}
</script>
</head>
<body>
<input type="button" value="open()" onclick="testOpen()"/>
<input type="button" value="setInteval()" onclick="testInterval()"/>
<input type="button" value="clearInteval()" onclick="testClearInterval()"/>
<input type="button" value="setTimeout()" onclick="testTimeout()"/>
<input type="button" value="clearTimeout()" onclick="testClearTimeout()"/>
<input type="button" value="alert()" onclick="testAlert()"/>
<input type="button" value="confirm()" onclick="testConfirm()"/>
<input type="button" value="prompt()" onclick="testPrompt()"/> </body>
</html>
1.3location对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>location对象</title>
<script type="text/javascript">
/*
href属性: 代表的是地址栏的URL,可以获取和设置URL。URL表示统一资源定位符 reload方法: 刷新当前页面 */
function testHref(){
//alert(window.location.href);
/*
通过修改location对象的href属性来实现页面的跳转
*/
window.location.href="http://www.baidu.com";
} function testReload(){
//刷新当前页面
window.location.reload();
} // function testRefresh(){
//定时刷新
window.setTimeout("testReload()",1000);
// } </script>
</head>
<body>
<input type="button" value="跳转" onclick="testHref()"/>
<input type="button" value="实现定时刷新" onclick="testRefresh()"/> </body>
</html>
1.4history对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>history对象</title>
<script type="text/javascript">
/*
forward(): 前进到下一页
back(): 后退上一页
go(): 跳转到某页(正整数:前进 负整数:后退) 1 -2
*/
function testForward(){
//window.history.forward();
window.history.go(1);
}
</script>
</head>
<body>
<a href="17history对象2.html">跳转到下一个页面</a>
<br/>
<input type="button" value="前进" onclick="testForward()"/>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>history对象</title>
<script type="text/javascript">
function testBack(){
//window.history.back();
window.history.go(-1);
}
</script>
</head>
<body>
目标页面<br/>
<input type="button" value="后退" onclick="testBack()"/>
</body>
</html>
1.5screen对象
screen对象代表是一个屏幕
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>screen对象</title>
<script type="text/javascript">
/*
availHeight和availWidth是排除了任务栏之后的高度和宽度
*/
document.write(window.screen.availWidth + "<br/>");
document.write(window.screen.availHeight + "<br/>");
document.write(window.screen.width + "<br/>");
document.write(window.screen.height + "<br/>"); </script>
</head>
<body> </body>
</html>
2.事件编程
2.1 回顾javase的事件编程
GUI编程事件三个要素:
事件源: 按钮JButton JFrame
事件:KeyEvent WindowEvent
监听器:KeyListener WindowListener
GUI编程具体的步骤:
1)创建事件源
2)编程监听器
3)在事件源上注册监听器
javascript事件编程的三个要素:
1)事件源:html标签
2)事件 :click dblclick mouseover。。。。
3)监听器: 函数
javascript事件分类:
点击相关的:
单击: onclick
双击: ondblclick
焦点相关的:
聚焦: onfocus
失去焦点: onblur
选项相关的:
改变选项: onchange
鼠标相关的:
鼠标经过: onmouseover
鼠标移除: onmouseout
页面加载相关的:
页面加载: onload
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件编程</title>
<!-- 2)编程监听器(函数) -->
<script type="text/javascript">
function test() {
alert("触发了事件");
}
</script>
</head> <body>
<!-- 1)事件源-->
<input type="button" value="按钮" onclick="test()"/><!-- 3)注册监听器(函数)-->
</body>
</html>
2.2事件分类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件分类</title>
<style type="text/css">
#div1 {
width: 100px;
height: 100px;
background: #00F;
}
</style>
<script type="text/javascript">
/*
点击相关的:
单击: onclick
双击: ondblclick 焦点相关的:
聚焦: onfocus
失去焦点: onblur 选项相关的:
改变选项: onchange 鼠标相关的:
鼠标经过: onmouseover
鼠标移除: onmouseout 页面加载相关的:
页面加载: onload 这个事件是在加载完标签后再触发。通用用在body标签中,所以加载完body标签的内容触发。
*/
function testClick() {
alert("触发了单击事件");
} function testDblClick() {
alert("触发了双击事件");
} function testFocus() {
userName = document.getElementById("userName");
userName.value = "";
} function testBlur() {
//获取用户输入内容
userName = document.getElementById("userName").value;
//检查用户是否存在
//显示内容到span
//获取到span
userNameTip = document.getElementById("userNameTip");
if (userName == "eric") {
userNameTip.innerHTML = "用户已经被占用,请更改!".fontcolor("red");
} else {
userNameTip.innerHTML = "恭喜你,该用户可用!".fontcolor("green");
}
} function testChange() {
//alert("选项改变了");
//获取选中的内容
jiguan = document.getElementById("jiguan").value;
//alert(jiguan);
city = document.getElementById("city");
//每次先清空城市select的内容
city.innerHTML = "";
if (jiguan == "广东") {
//把一些option选项放入到城市的select中
arr = ["广州", "珠海", "深圳"]; for (let i = 0; i < arr.length; i++) {
city.innerHTML += "<option value='" + arr[i] + "'>" + arr[i] + "</option>";
}
}
if (jiguan == "广西") {
//把一些option选项放入到城市的select中
arr = ["柳州", "桂林", "南宁"];
for (i = 0; i < arr.length; i++) {
city.innerHTML += "<option value='" + arr[i] + "'>" + arr[i] + "</option>";
}
}
if (jiguan == "湖南") {
//把一些option选项放入到城市的select中
arr = ["长沙", "湘潭", "郴州"];
for (i = 0; i < arr.length; i++) {
city.innerHTML += "<option value='" + arr[i] + "'>" + arr[i] + "</option>";
}
}
} function testOver() {
alert("鼠标经过了div");
} function testOut() {
alert("鼠标移除了dvi");
} // function testLoad() {
// alert("触发了onload方法");
// }
</script>
</head>
<body>
<input type="button" value="单击" onclick="testClick()"/>
<input type="button" value="双击" ondblclick="testDblClick()"/>
<hr/>
请输入用户名:<input type="text" id="userName" value="4-12位字母或数字"
onfocus="testFocus()" onblur="testBlur()"/><span id="userNameTip"></span>
<hr/>
请选择籍贯
<!--onchange :表示这个select中的选项发送改变 -->
<select onchange="testChange()" id="jiguan">
<option value="广东">广东</option>
<option value="广西">广西</option>
<option value="湖南">湖南</option>
</select>
城市
<select id="city">
</select>
<hr/>
<div id="div1" onmouseover="testOver()" onmouseout="testOut()"></div>
</body>
</html>
3.DOM和事件简单学习
3.1DOM
功能:控制html文档的内容
代码:获取页面标签(元素)对象:Element
document.getElementById("id值"):通过元素的id获取元素对象
操作Element对象:
1.设置属性值
1. 明确获取的对象是哪一个?
2. 查看API文档,找其中有哪些属性可以设置
2.修改标签体内容
属性:innerHTML
1. 获取元素对象
2. 使用innerHTML属性修改标签体内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- <img id="light" src="img/1.jpg">
<script>
var light = document.getElementById("light");
alert("我要换图片了。。");
light.src="img/2.jpg";
</script>--> <img id="light" src="img/1.jpg">
<h1 id="title">你哈哈哈哈</h1> <script>
//1.获取标签对象
var title = document.getElementById("title");
alert("我要换内容了");
title.innerHTML = "个人头像";
</script> </body>
</html>
3.2概念
Document Object Model 文档对象模型
将标记语言文档的各个组成部分,封装为对象。可以使用这些对象,对标记语言文档进行CRUD的动态操作
W3C DOM 标准被分为 3 个不同的部分:
核心 DOM - 针对任何结构化文档的标准模型
Document:文档对象
Element:元素对象
Attribute:属性对象
Text:文本对象
Comment:注释对象
Node:节点对象,其他5个的父对象
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型
3.3核心DOM模型
Document:文档对象
1. 创建(获取):在html dom模型中可以使用window对象来获取
1. window.document
2. document
2. 方法:
1. 获取Element对象:
1. getElementById() : 根据id属性值获取元素对象。id属性值一般唯一
2. getElementsByTagName():根据元素名称获取元素对象们。返回值是一个数组
3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div> <div class="cls1">div4</div>
<div class="cls1">div5</div> <input type="text" name="username">
<script>
//2.根据元素名称获取元素对象们
var divs = document.getElementsByTagName("div");
// alert(divs.length);
//3.根据class属性获取元素对象们
var div_cls = document.getElementsByClassName("cls1");
// alert(div_cls.length);
//4.根据name属性获取元素对象们
var div_name = document.getElementsByName("username");
// alert(div_name.length); </script>
</body>
</html>
2. 创建其他DOM对象:
createAttribute(name)
createComment()
createElement()
createTextNode()
3. 属性
Element:元素对象
1. 获取/创建:通过document来获取和创建
2. 方法:
1. removeAttribute():删除属性
2. setAttribute():设置属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a>点我一下试试</a>
<input type="button" id="btn_set" value="设置属性">
<input type="button" id="btn_remove" value="删除属性">
<script>
var btn_set = document.getElementById("btn_set");
btn_set.onclick=function () {
//1.获取a标签
var element_a = document.getElementsByTagName("a")[0];
element_a.setAttribute("href","https://www.baidu.com");
}; var btn_remove = document.getElementById("btn_remove");
btn_remove.onclick=function () {
//1.获取a标签
var element_a = document.getElementsByTagName("a")[0];
element_a.removeAttribute("href");
} </script>
</body>
</html>
Node:节点对象,其他5个的父对象
特点:所有dom对象都可以被认为是一个节点
方法:
CRUD dom树:
appendChild():向节点的子节点列表的结尾添加新的子节点。
removeChild() :删除(并返回)当前节点的指定子节点。
replaceChild():用新节点替换一个子节点。
属性:
parentNode 返回节点的父节点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
border: 1px solid red;
} #div1 {
width: 200px;
height: 200px;
} #div2 {
width: 100px;
height: 100px;
} #div3 {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">div2</div>
div1
</div> <!--超链接功能:
1.可以被点击:样式
2.点击后跳转到href指定的url
需求:保留1功能,去掉2功能
实现:href="javascript:void(0);"-->
<a href="javascript:void(0)" id="del">删除子节点</a>
<a href="javascript:void(0)" id="add">添加子节点</a>
<!--<input type="button" id="del" value="删除子节点">--> <script>
var element_a = document.getElementById("del");
element_a.onclick = function () {
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div1.removeChild(div2);
}; var element_add = document.getElementById("add");
element_add.onclick = function () {
var div1 = document.getElementById("div1");
//给div1添加子节点
//创建div节点
var div3 = document.createElement("div");
div3.setAttribute("id","div3");
div1.appendChild(div3);
}; //获取父节点
var div2 = document.getElementById("div2");
var div1 = div2.parentNode;
alert(div1);
</script> </body>
</html>
3.4案例:动态添加删除表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table {
border: 1px solid;
margin: auto;
width: 500px;
} td, th {
text-align: center;
border: 1px solid;
} div {
text-align: center;
margin: 50px;
} </style>
</head>
<body>
<div>
<input type="text" id="id" placeholder="请输入编号">
<input type="text" id="name" placeholder="请输入姓名">
<input type="text" id="gender" placeholder="请输入性别">
<input type="button" id="btn_add" value="添加">
</div> <table>
<caption>学生信息表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr> <tr>
<td>1</td>
<td>小明</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td>
</tr> </table> <script>
/*
分析
1.添加
1.给添加按钮绑定单击事件
2.获取文本框的内容
3.创建td,设置td的文本框内容
4.创建tr
5.将td添加到tr中
6。获取table,将tr添加到table中
2.删除
1.确定点击的是哪一个超链接
<td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td>
2.怎么删除
removeChild():通过父标签删除子节点
*/
//1.获取按钮
document.getElementById("btn_add").onclick = function () {
//2.获取文本框的内容
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value; //3.创建td,设置td的文本框内容
var td_id = document.createElement("td");
var text_id = document.createTextNode(id);
td_id.appendChild(text_id); var td_name = document.createElement("td");
var text_name = document.createTextNode(name);
td_name.appendChild(text_name); var td_gender = document.createElement("td");
var text_gender = document.createTextNode(gender);
td_gender.appendChild(text_gender);
//a标签的td
var td_a = document.createElement("td");
var element_a = document.createElement("a");
element_a.setAttribute("href", "javascript:void(0);");
element_a.setAttribute("onclick", "delTr(this);");
var text_a = document.createTextNode("删除");
element_a.appendChild(text_a);
td_a.appendChild(element_a); //4.创建tr
var tr = document.createElement("tr");
tr.appendChild(td_id);
tr.appendChild(td_name);
tr.appendChild(td_gender);
tr.appendChild(td_a);
//6。获取table,将tr添加到table中
var table = document.getElementsByTagName("table")[0];
table.appendChild(tr);
}; //删除方法
function delTr(obj) {
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);
} </script>
</body>
</html>
3.5HTML的DOM
1. 标签体的设置和获取:innerHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1">
div
</div> <script>
var div = document.getElementById("div1");
// var innerHTML = div.innerHTML;
// alert(innerHTML);
div.innerHTML +="<input type='text'>" </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table {
border: 1px solid;
margin: auto;
width: 500px;
} td, th {
text-align: center;
border: 1px solid;
} div {
text-align: center;
margin: 50px;
} </style>
</head>
<body>
<div>
<input type="text" id="id" placeholder="请输入编号">
<input type="text" id="name" placeholder="请输入姓名">
<input type="text" id="gender" placeholder="请输入性别">
<input type="button" id="btn_add" value="添加">
</div> <table>
<caption>学生信息表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr> <tr>
<td>1</td>
<td>小明</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td>
</tr> </table> <script>
//使用innerHTML添加
// 1.获取按钮
document.getElementById("btn_add").onclick = function () {
//2.获取文本框的内容
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value; var table = document.getElementsByTagName("table")[0];
table.innerHTML += " <tr>\n" +
" <td>" + id + "</td>\n" +
" <td>" + name + "</td>\n" +
" <td>" + gender + "</td>\n" +
" <td><a href=\"javascript:void(0);\" onclick=\"delTr(this)\">删除</a></td>\n" +
" </tr>"
}; //删除方法
function delTr(obj) {
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);
} </script>
</body>
</html
2. 使用html元素对象的属性
3. 控制元素样式
1. 使用元素的style属性来设置
如:
//修改样式方式1
div1.style.border = "1px solid red";
div1.style.width = "200px";
//font-size--> fontSize
div1.style.fontSize = "20px";
2. 提前定义好类选择器的样式,通过元素的className属性来设置其class属性值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.d1 {
border: 1px solid red;
width: 100px;
height: 100px;
} .d2 {
border: 1px solid blue;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="div1">
div
</div> <div id="div2">
div2
</div> <script>
var div1 = document.getElementById("div1");
div1.onclick = function () {
//修改样式方式1
div1.style.border = "1px solid red";
div1.style.width = "200px"; div1.style.fontSize = "30px";
}; var div2 = document.getElementById("div2");
div2.onclick = function () {
div2.className = "d1";
}
</script>
</body>
</html>
3.2事件
功能: 某些组件被执行了某些操作后,触发某些代码的执行。
如何绑定事件:
1. 直接在html标签上,指定事件的属性(操作),属性值就是js代码
1. 事件:onclick--- 单击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function fun() {
alert("我被点击了");
alert("我被点击了2222");
}
</script>
</head>
<body> <img id="light" src="img/1.jpg" onclick="fun();"> </body>
</html>
2. 通过js获取元素对象,指定事件属性,设置一个函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body> <img id="light" src="img/1.jpg"> <script>
function fun() {
alert("我被点击了");
alert("我被点击了2222");
}
var light = document.getElementById("light");
light.onclick = fun;
</script>
</body>
</html>
概念:某些组件被执行了某些操作后,触发某些代码的执行。
事件:某些操作。如: 单击,双击,键盘按下了,鼠标移动了
事件源:组件。如: 按钮 文本输入框...
监听器:代码。
注册监听:将事件,事件源,监听器结合在一起。 当事件源上发生了某个事件,则触发执行某个监听器代码。
常见的事件:
1. 点击事件:
1. onclick:单击事件
2. ondblclick:双击事件
2. 焦点事件
1. onblur:失去焦点
一般用于表单校验
2. onfocus:元素获得焦点。
3. 加载事件:
1. onload:一张页面或一幅图像完成加载。
4. 鼠标事件:
1. onmousedown鼠标按钮被按下。
2. onmouseup 鼠标按键被松开。
3. onmousemove鼠标被移动。
4. onmouseover鼠标移到某元素之上。
5. onmouseout 鼠标从某元素移开。
5. 键盘事件:
1. onkeydown某个键盘按键被按下。
2. onkeyup某个键盘按键被松开。
3. onkeypress某个键盘按键被按下并松开。
6. 选择和改变
1. onchange域的内容被改变。
2. onselect文本被选中。
7. 表单事件:
1. onsubmit确认按钮被点击。
2. onreset重置按钮被点击。
案例:表格全选和全不选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table {
border: 1px solid;
margin: auto;
width: 500px;
} td, th {
text-align: center;
border: 1px solid;
} div {
margin-left: 32%;
margin-top: 10px;
} .out {
background-color: white;
} .over {
background-color: pink;
}
</style> <script>
window.onload = function () {
//1.全选
document.getElementById("selectAll").onclick = function () {
var cbs = document.getElementsByName("cb");
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked = true;
}
}; //2.全不选
document.getElementById("unSelectAll").onclick = function () {
var cbs = document.getElementsByName("cb");
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked = false;
}
}; //3.反选
document.getElementById("selectRev").onclick = function () {
var cbs = document.getElementsByName("cb");
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked = !cbs[i].checked;
}
}; //4.第一个cb
document.getElementById("firstcb").onclick = function () {
var cbs = document.getElementsByName("cb");
for (var i = 0; i < cbs.length; i++) {
//和第一个cb的状态相同
cbs[i].checked = this.checked;
}
}; //5.给所有tr绑定鼠标移动到元素之上事件
var trs = document.getElementsByTagName("tr");
for (var i = 0; i < trs.length; i++) {
trs[i].onmouseover = function () {
this.className = "over";
}; trs[i].onmouseout = function () {
this.className = "out";
}
}
}
</script>
</head>
<body>
<table>
<caption>学生信息表</caption>
<tr>
<th><input type="checkbox" name="cb" id="firstcb"></th>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr> <tr>
<td><input type="checkbox" name="cb"></td>
<td>1</td>
<td>小明</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="cb"></td>
<td>2</td>
<td>小红</td>
<td>女</td>
<td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="cb"></td>
<td>3</td>
<td>小刚</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td>
</tr>
</table> <div>
<input type="button" id="selectAll" value="全选">
<input type="button" id="unSelectAll" value="全不选">
<input type="button" id="selectRev" value="反选">
</div> </body>
</html>
案例:切换图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img id="light" src="img/1.jpg">
<script>
//1.获取图片对象
var light = document.getElementById("light");
var flag = false;
//2.绑定单击事件
light.onclick = function () {
if(flag){
light.src = "img/2.jpg";
flag = false;
}else {
light.src = "img/1.jpg";
flag = true;
}
} </script>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
3.DOM编程
3.1 概念
DOM(document Object Model)文档对象模型编程。
3.2 查询标签对象
通过document对象获取,document代表一个html页面
3.2.1通过document对象的集合
作用: 获取多个或者同类的标签对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通过document的集合获取标签对象</title> </head>
<body>
<a href=""></a>
<form><img src=""/><a href=""></a><img src="" /></form>
<form><img src=""/><a href=""></a></form>
<script type="text/javascript">
/*
all: 获取所有标签对象
forms: 获取form标签对象
images: 获取img标签对象
links: 获取a标签对象
*/
nodeList = document.all; //返回标签对象数组
nodeList2 = document.forms; //返回标签对象数组
nodeList3 = document.images; //返回对象数组
nodeList4 = document.links;//返回对象数组 // alert(nodeList.length);
//遍历标签对象 //nodeName:获取标签名称
for (let i = 0; i < nodeList.length; i++) {
document.write(nodeList[i].nodeName + " ");
}
for (let i = 0; i < nodeList2.length; i++) {
document.write(nodeList2[i].nodeName + " , ");
}
for (let i = 0; i < nodeList3.length; i++) {
document.write(nodeList3[i].nodeName + " : ");
}
for (let i = 0; i < nodeList4.length; i++) {
document.write(nodeList4[i].nodeName + " ! ");
} </script>
</body>
</html>
3.2.2通过关系查找标签对象
父节点: parentNode属性
子节点: childNodes属性
第一个子节点: firstChild属性
最后一个子节点: lastChild属性
下一个兄弟节点: nextSibling属性
上一个兄弟节点: previousSibling属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>查询标签对象方法</title>
<!--
父节点: parentNode属性
子节点: childNodes属性
第一个子节点: firstChild属性
最后一个子节点: lastChild属性
下一个兄弟节点: nextSibling属性
上一个兄弟节点: previousSibling属性 注意:
1)childNodes属性,firstChild属性,lastChild属性获取的子节点包含了以下的元素:
a)标签 1
b)空格换行 3
c)html注释 8 在子节点中筛选出标签出来呢? 可以使用 nodeType属性: 节点类型
取出nodeType值为1的节点,就是标签对象
-->
</head>
<body>
<form><a href="">超链接</a><!--html注释 --><input type="text"/><input type="button"/></form>
<form><a href="">超链接</a><input type="type"/></form>
</body>
<script type="text/javascript">
//得到a标签(获取第一个a标签对象)
aNode = document.links[0];
document.write(aNode.nodeName + "</br>"); //得到父标签
formNode = aNode.parentNode;
document.write("父标签:" + formNode.nodeName + "</br>"); //得到form的子节点,返回数组
nodeList = formNode.childNodes;
document.write("子节点的个数:" + nodeList.length); for (let i = 0; i < nodeList.length; i++) {
//筛选出标签对象
document.write(nodeList[i].nodeName + ",节点类型:" + nodeList[i].nodeType + "<br/>");
}
document.write("<br/>");
for (let i = 0; i < nodeList.length; i++) {
//筛选出标签对象
if (nodeList[i].nodeType == 1) {
document.write(nodeList[i].nodeName + ",节点类型:" + nodeList[i].nodeType + "<br/>");
}
} //第一个子节点
firstChild = formNode.firstChild;
document.write("第一个子节点:" + firstChild.nodeName + "<br/>"); //最后一个子节点
lastChild = formNode.lastChild;
document.write("最后一个子节点: " + lastChild.nodeName + "<br/>"); aNode = document.links[1];
//得到下一个兄弟节点
next = aNode.nextSibling;
document.write("下一个兄弟节点: " + next.nodeName + "<br/>"); //得到上一个兄弟节点
previous = next.previousSibling;
document.write("上一个兄弟节点: " + previous.nodeName);
</script>
</html>
3.2.3通过document方法查询标签对象
document.getElementById("id属性值"); 最常用
documetn.getElementsByName("name属性值"); 获取同name属性名的标签列表
document.getElementsByTagName("标签名") 获取相同标签名的标签列表
3.3 修改标签对象属性
常用的需要修改的属性:
innerHTML属性:修改标签体内容 <span>xxxxxx</span> <div></div> <select></select>
innerHTML : 设置的标签内的html
innerText: 设置标签内容的文本
value属性: 修改value属性值。 input type="text"
src属性: 修改图片的src属性。 <img src=""/>
checked属性:修改单选或多项的默认值。 <input type="radio/checked" checked=""/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置标签对象的属性</title>
<!--
经常修改的属性:
innerHTML属性:修改标签体内容 <span>xxxxxx</span> <div></div> <select></select>
innerHTML : 设置的标签内的html代码 value属性: 修改value属性值。 input type="text"
src属性: 修改图片的src属性。 <img src=""/>
checked属性:修改单选或多项的默认值。(选择的当前状态) <input type="radio/checked" checked=""/>
false: 没选中 true: 已选中
-->
</head>
<body>
<span id="mySpan"></span>
<hr/>
<input type="text" id="userName" value="4-12位字母或数字"/>
<hr/>
<img src="../picture/1.jpg" width="300px" height="200px"/><input type="button" value="切换图片" onclick="changeImg()"/>
<hr/>
<input type="button" value="全选" onclick="quanxuan()"/>
<input type="checkbox" value="篮球" name="hobit"/>篮球
<input type="checkbox" value="足球" name="hobit"/>足球
<input type="checkbox" value="羽毛球" name="hobit"/>羽毛球
</body>
<script type="text/javascript">
//获取span标签对象
mySpan = document.getElementById("mySpan");
//设置标签内的HTML内容, 在IE和火狐可以
mySpan.innerHTML = "<h3>标题</h3>";
/*innerText在IE可以,在火狐不行*/
// mySpan.innerText="标签"; //获取input对象
userName = document.getElementById("userName");
userName.value = ""; function changeImg() {
//得到标签对象
img = document.getElementsByTagName("img")[0];
img.src = "../picture/qq.jpg";
} function quanxuan() {
// lq = document.getElementsByName("hobit")[0];
//alert(lq.checked);
//设置状态
// lq.checked = true; hList = document.getElementsByName("hobit");
for (i = 0; i < hList.length; i++) {
hList[i].checked = true;
} } </script>
</html>
3.4 标签对象方法
添加相关的:
document.createElement("标签名") 创建节点对象
setAttribute("name","value"): 设置节点的属性
插入相关的:
appendChild("标签对象") ; 添加子节点对象
insertBefore("新标签对象","指定的对象") 在指定的对象前面添加子节点对象
删除:
removeChild("标签对象"); 删除子节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签对象的方法</title>
<!--
添加相关的:
document.createElement("标签名") 创建节点对象
setAttribute("name","value"): 设置节点的属性 插入相关的:
appendChild("标签对象") ; 添加子节点对象
insertBefore("新标签对象","指定的对象") 在指定的对象前面添加子节点对象 删除:
removeChild("标签对象"); 删除子节点 -->
<script type="text/javascript">
//添加按钮
function addItem() {
//1.创建一个按钮对象
let input = document.createElement("input"); // <input />
//2.设置属性
input.setAttribute("type", "button"); // <input type="button"/>
input.setAttribute("value", "新按钮"); // <input type="button" value="新按钮"/> //3.在html页面中插入这个新建的按钮对象
//3.1 得到body对象
let bodyNode = document.getElementsByTagName("body")[0];
//3.2 把新的按钮对象加入到body对象的子节点中(加到最后一个)
bodyNode.appendChild(input); /*
//3.3 把新的按钮对象加入到btn按钮的前面
var btn = document.getElementById("btn");
//参数一: 新的对象 参数二: 插入到前面的对象
bodyNode.insertBefore(input,btn);
*/
} function delItem() {
//找到需要删除的节点对象
//获取最后一个子标签
let bodyNode = document.getElementsByTagName("body")[0];
let lastChild = bodyNode.lastChild;
//删除子标签
bodyNode.removeChild(lastChild);
}
</script>
</head>
<body>
<input type="button" value="添加" onclick="addItem()"/><input type="button" value="删除" onclick="delItem()"/><input
id="btn" type="button" value="按钮"/> </body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态表格</title>
<script type="text/javascript">
let count = 2;
function addItem(){
/*
<tr>
<td>1</td>
<td><input type="text"/></td>
<td><input type="password"/></td>
</tr> */
//1.创建tr对象
let tr = document.createElement("tr"); //2.创建三个td对象
let td1 = document.createElement("td");
td1.innerHTML = count; let td2 = document.createElement("td");
let input1 = document.createElement("input");
input1.setAttribute("type","text");
//把input放入td中
td2.appendChild(input1); let td3 = document.createElement("td");
let input2 = document.createElement("input");
input2.setAttribute("type","password");
//把input放入td中
td3.appendChild(input2); //3.把三个td放入tr中
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3); //4.把tr放在tbody的子节点
let tbody = document.getElementsByTagName("tbody")[0];
tbody.appendChild(tr); count++;
} function delItem(){
if(count>2){
//查找需要删除的节点
//tbody最后一个子节点
let tbody = document.getElementsByTagName("tbody")[0];
let lastChild = tbody.lastChild;
tbody.removeChild(lastChild); count--;
}
}
</script>
</head>
<body>
<table border="1" align="center" width="400px">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>密码</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><input type="text"/></td>
<td><input type="password"/></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3"><input type="button" value="添加一行" onclick="addItem()"/><input type="button" value="删除一行" onclick="delItem()"/></td>
</tr>
</tfoot>
</table>
</body>
</html>
04javascript02的更多相关文章
随机推荐
- Oracle JET 单页面应用程序Router 使用(上)
单页面应用程序:使用一个进加载一次的网页,如果页面由于用户的交互而改变,则仅绘制更改的页面部分. 要创建单页面应用程序需要使用 oj.Router 的虚拟导航来支持,ojModule 用来响应页面的重 ...
- JavaScript中this的一些坑
我们经常在回调函数里面会遇到一些坑: var obj = { name: 'qiutc', foo: function() { console.log(this); }, foo2: function ...
- 【flask_sqlalchemy】模糊查询
flask_sqlalchemy的查询方法有filter()和filter_() 这2个方法的主要区别如下: 模块 语法 ><(大于和小于)查询 and_和or_查询 filter_by( ...
- 设计模式(2): 响应store中数据的变化
概述 最近最近做项目的时候总会思考一些大的应用设计模式相关的问题,我把自己的思考记录下来,供以后开发时参考,相信对其他人也有用. store里面响应数据变化 通常情况下,我们会把数据存在store里面 ...
- Django开启https(不用nginx)
首先安装需要用到的包 pip install django-extensions pip install django-werkzeug-debugger-runserver pip install ...
- :hover 鼠标同时触发两个元素变化
HTML代码: <li> <span>4</span> <a href="#">巨型一号丝瓜水320ML</a>< ...
- 常用获取Android崩溃日志和IOS崩溃日志的几种方法
一:前言 在日常测试app时,经常会遇到崩溃问题,测试快速抓取到崩溃日志可以有效方便开发进行定位,快速解决问题所在测试做到测试分析,定位是非常重要的,这也是判断一个测试能力指标的一大维度. 二:And ...
- web端测试的测试点和注意事项
工作中接触了不同类型的web端系统,内容不同,需求不同,测试关注点也存在些许的不同,但是总体测试思路和关注的点都类似,下面是总结自己所接触的web端系统测试的一些测试点,不尽全面,以后接触新的业务系统 ...
- 【ABAP系列】SAP ABAP 控制ALV单元格编辑后获取新的数值
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP 控制ALV单元 ...
- python每日一练:0000题
**第 0000 题:**将你的 QQ 头像(或者微博头像)右上角加上红色的数字,类似于微信未读信息数量那种提示效果. 类似于图中效果 示例代码: from PIL import Image,Imag ...