获取元素对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取元素对象</title>
</head>
<body>
<!--<input id="username" type="text">-->
<!--<img id="light" src="img/off.gif" width="109">-->
<div id="div01">你好呀</div>
<script>
//通过id值获取元素
// var ele_input = document.getElementById("username");
// alert(ele_input);
//===================================================
//获取元素，更改属性值
//var ele_light = document.getElementById("light");
//alert("中断...");
//更改属性值
//ele_light.src = "img/on.gif";
//===================================================
//更改标签体内容
var ele_div = document.getElementById("div01");
alert("暂停....");
//ele_div.innerHTML = "只要你过的比我好，我就受不了！！";
ele_div.innerHTML += "<input id=\"username\" type=\"text\">"
</script>
</body>
</html>
单击事件onclick
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单击事件onclick</title>
</head>
<body>
<!--
1. 在html标签上写onclick事件属性，值就是js代码(调用函数)
2. 获取html元素对象，然后指定元素对象的属性，值就是调用函数 派发事件
-->
<img src="img/on.gif" id="light" onclick="fun()">
<img src="img/off.gif" id="light2">
<script>
function fun() {
alert('被jiji了！！！');
}
//获取html元素对象
var ele_light = document.getElementById("light2");
ele_light.onclick = fun;//直接给名
</script>
</body>
</html>
切换灯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单击事件onclick</title>
</head>
<body>
<img src="img/off.gif" id="light">
<script>
/*
1.获取img元素对象
2.派发事件onclick
3.绑定函数
4.
*/
var flag = false;
var ele_img = document.getElementById("light");
ele_img.onclick = function(){
if(flag){
ele_img.src="img/off.gif";
flag = false;
}else{
ele_img.src="img/on.gif";
flag = true;
}
}
</script>
</body>
</html>
window对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>window对象</title>
</head>
<body>
<input type="button" id="btn_open" value="打开窗口">
<input type="button" id="btn_close" value="关闭窗口">
<script>
/*
1. 与弹出框有关的方法：
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
* 如果用户点击确定按钮，则方法返回true
* 如果用户点击取消按钮，则方法返回false
prompt() 显示可提示用户输入的对话框。
* 确定。返回值：获取用户输入的值
* 取消。返回值：null
*
close() 关闭浏览器窗口。
* 谁调用我 ，我关谁
open() 打开一个新的浏览器窗口
* 返回新的Window对象
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
* 参数：
1. js代码或者方法对象
2. 毫秒值
* 返回值：唯一标识，用于取消定时器
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
属性：
history
location
*/
//var result = window.confirm("您确认删除吗？");
//alert(result);
//var text = prompt("你有对象吗?");
//alert(text);
//===============================================
//获取按钮
var new_window;
var btn_open = document.getElementById("btn_open");
btn_open.onclick=function(){
//open("https://www.baidu.com");
new_window = open();
}
var btn_close = document.getElementById("btn_close");
btn_close.onclick=function(){
//new_window.close();
close();
}
// function fun(){
// alert('一次定时器')
// }
//var id_timeOut = setTimeout(fun,3000);
//取消定时器
//clearTimeout(id_timeOut);
//var id_interval = setInterval(fun,2000);
//clearInterval(id_interval);
//var history_ = window.history;
//alert(history_);
//设置地址栏url
//location.href = "https://www.baidu.com";
//获取地址栏url
//var dizhi = location.href;
//alert(dizhi);
</script>
</body>
</html>
案例2轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
</head>
<body>
<img id="banner" src="../img/banner_1.jpg" width="100%">
<script>
//更换图片
var img_ele = document.getElementById("banner");
var number = 1;
function fun(){
number++;
if(number>3) number = 1;
img_ele.src="../img/banner_"+number+".jpg";
}
setInterval(fun,2000);
</script>
</body>
</html>
案例——几秒后跳转到首页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自动跳转首页</title>
<style>
p{
text-align : center;
}
span{
color:red;
}
</style>
</head>
<body>
<p>
<span id="time">5</span>秒之后,自动跳转首页...
</p>
<script>
var time_ele = document.getElementById("time");
var second = 5;
function fun(){
second--;
if(second<=0)
location.href = "https://www.baidu.com";
time_ele.innerHTML = second;
}
setInterval(fun,1000);
</script>
</body>
</html>
获取标题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM_获取</title>
</head>
<body>
<div>北京</div>
<div class="div1">北京1</div>
<div class="div1">北京2</div>
<span name="spanName">北京3</span>
<script>
/*
1. 获取Element对象：
1. getElementById() ： 根据id属性值获取元素对象。id属性值一般唯一
2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
*/
var divs = document.getElementsByTagName("div");
//alert(divs.length);//数组length
var divs_cls = document.getElementsByClassName("div1");
//alert(divs_cls.length);
var div_span = document.getElementsByName("spanName");
alert(div_span.length);
</script>
</body>
</html>
DOM创建对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM_创建</title>
</head>
<body>
<script>
/*
createAttribute(name)
createComment()
createElement()
createTextNode()
*/
var table = document.createElement("table");
var tr = document.createElement("tr");
var td = document.createElement("td");
var text = document.createTextNode("xxx");
alert(table);
</script>
</body>
</html>
Element对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ELEMENT对象</title>
</head>
<body>
<a>超链接</a>
<input type="button" value="添加属性" id="btn_add">
<input type="button" value="删除属性" id="btn_del">
<script>
/*
Element：元素对象
1. 获取/创建：通过document来获取和创建
2. 方法：
1. removeAttribute()：删除属性
2. setAttribute()：设置属性
*/
var a_ele = document.getElementsByTagName("a")[0];
//2. setAttribute()：设置属性
document.getElementById("btn_add").onclick=function(){
a_ele.setAttribute("href","https://www.baidu.com");
}
//1. removeAttribute()：删除属性
document.getElementById("btn_del").onclick=function(){
a_ele.removeAttribute("href");
}
</script>
</body>
</html>
Node对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Node节点对象</title>
<style>
div{
border: 1px solid;
}
#div1{
background-color: red;
width: 200px;
height: 200px;
}
#div2{
background-color: yellow;
width: 100px;
height: 100px;
}
#div3{
background-color: yellowgreen;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">海淀区</div>
</div>
<input type="button" value="删除按钮" id="btn_del">
<input type="button" value="添加按钮" id="btn_add">
<script>
/*
方法：
* CRUD dom树：
* appendChild()：向节点的子节点列表的结尾添加新的子节点。
* removeChild() ：删除（并返回）当前节点的指定子节点。
* replaceChild()：用新节点替换一个子节点。
* 属性：
* parentNode 返回节点的父节点。
*/
var div1_node = document.getElementById("div1");
var div2_node = document.getElementById("div2");
var div3_node = document.createElement("div3");
div3_node.setAttribute("id","div3");
var text = document.createTextNode("丰台区");
div3_node.appendChild(text);
document.getElementById("btn_del").onclick=function(){
div1_node.removeChild(div2_node);
}
document.getElementById("btn_add").onclick=function(){
div1_node.appendChild(div3_node);
}
</script>
</body>
</html>
轮播图setInterval用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图练习</title>
</head>
<body>
<img src="../img/banner_1.jpg" id="a">
<script>
var img=document.getElementById("a");
var num=1;
function f() {
num++;
if(num>3){
num=1;
}
img.src="../img/banner_"+num+".jpg";
}
setInterval(f,2000);
setInterval(fun,2000);
</script>
</body>
</html>
综合案例动态表格
动态表格
<style>
table{
border: 1px solid;
margin: auto;
width: 500px;
}
td,th{
text-align: center;
border: 1px solid;
}
div{
text-align: center;
margin: 50px;
}
</style>
<!--
添加：
1.获取输入框的数据 元素对象.value
2.创建相应td,然后数据填充td appendChild
3.创建tr,将td填充
4.获取table,填充tr
删除：
<a href="javascript:void(0);" onclick="delTr(this);">删除</a>
href: # 刷新页面
有点击效果，但不跳转
a标签.parentNode.parentNode.parentNode
a标签.parentNode.parentNode
-->
<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>
<tr>
<td>2</td>
<td>任我行</td>`
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>岳不群</td>
<td>?</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
</tr>
</table>
<script>
document.getElementById("btn_add").onclick=function(){
//输入框数据获取
var id_text = document.getElementById("id").value;
var name_text = document.getElementById("name").value;
var gender_text = document.getElementById("gender").value;
//创建td节点
var td_id = document.createElement("td");
var id_text_node = document.createTextNode(id_text);
td_id.appendChild(id_text_node);
var td_name = document.createElement("td");
var name_text_node = document.createTextNode(name_text);
td_name.appendChild(name_text_node);
var td_gender = document.createElement("td");
var gender_text_node = document.createTextNode(gender_text);
td_gender.appendChild(gender_text_node);
//删除按钮
var td_del = document.createElement("td");
var a = document.createElement("a");
a.setAttribute("href","javascript:void(0);");
a.setAttribute("onclick","delTr(this);");
//<a href="javascript:void(0);" onclick="delTr(this);">删除</a>
var a_text = document.createTextNode("删除");
a.appendChild(a_text);
td_del.appendChild(a);
//创建tr
var tr = document.createElement("tr");
tr.appendChild(td_id);
tr.appendChild(td_name);
tr.appendChild(td_gender);
tr.appendChild(td_del);
document.getElementsByTagName("table")[0].appendChild(tr);
}
// document.getElementById("btn_add").onclick=function() {
// //输入框数据获取
// var id_text = document.getElementById("id").value;
// var name_text = document.getElementById("name").value;
// var gender_text = document.getElementById("gender").value;
//
// var table = document.getElementsByTagName("table")[0];
//
//
// table.innerHTML+="<tr>\n" +
// "<td>"+id_text+"</td>\n" +
// "<td>"+name_text+"</td>\n" +
// "<td>"+gender_text+"</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>
72
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
