DOM简单学习
* 功能:控制html文档的内容
*代码:获取页面的标签(元素)对象Element
*document.getElementByid("id值");通过元素的id获取元素对象
*操作Element对象:
1.修改属性值:
1.明确获取的对象是哪一个
2.查看dpi文档,找其中有哪些属性可以设置
2.修改标签体内容:
*属性:innerHTML
1.获取元素对象
2.使用inner HTML修改标签体内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取元素对象</title>
</head>
<body>
<img src="../image/桌面.png" id="images">
<h1 id="title">悔创阿里杰克马</h1>
<script !src="">
//更换属性值
//通过id获取元素对象
var images = document.getElementById("images");
alert("更换图片");
images.src="../image/锁屏.jpg";
</script>
<script !src="">
//修改h1内容
var title = document.getElementById("title");
alert("更换标题");
title.innerHTML = "不识妻美刘强东";
</script>
</body>
</html>
事件简单学习
*概念:某些组件被执行了某些操作后,触发某些代码的执行
*如何绑定事件
1.直接在html标签上,指定事件的属性,属性值就是js代码
1.事件:onclick-------单击事件
2.通过js获取元素对象,指定事件属性,设置一个函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
</head>
<body>
<!--方式一-->
<!-- <img src="../image/桌面.png" id="images" οnclick="fun()">-->
<!--方式二-->
<img src="../image/桌面.png" id="images">
<script !src="">
// 方式一
function fun() {
alert("我被点击了");
}
// 方式二
function fun2() {
alert("第二种");
}
var click =document.getElementById("images");
click.onclick = fun2;
</script>
</body>
</html>
案例:
点击图片后切换图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片切换</title>
</head>
<body>
<img id="images" src="../image/桌面.png" alt="">
<script !src="">
var images = document.getElementById("images");
var flag = false;
function f() {
// alert(images.src);
if(flag){
images.src="../image/锁屏.jpg";
flag=false;
}else{
images.src="../image/桌面.png";
flag=true;
}
}
images.onclick=f;
</script>
</body>
</html>
BOM
1.概念:Browser Object Model浏览器对象模型
*将浏览器的各个部分封装成对象
2. 组成
*windows:窗口对象
*navigator:浏览器对象
*Screen:显示器屏幕对象
*History:历史记录对象
*Location:地址栏对象
3.windows:窗口对象
1.创建
2.方法
(1).与弹出框有关的方法
alert() 显示一段消息和一个确认按钮的警告框
confirm() 显示带有一段效益以及确认按钮和取消按钮的对话框
*点击确定返回true 点击取消返回false
prompt() 显示可提示用户输入的对话框
*返回值是用户输入的信息
(2).与打开关闭有关的方法
close()
*谁调用我,我关闭谁
open()
*打开一个新窗口
*返回一个window对象
(3).与定时器有关的方法
setTimeout() 在指定的毫秒数后调用函数或计算表达式
*第一个参数js代码或者方法对象
*第二个参数 毫秒值
*返回一个编号,用户取消定时器
ClearTimeout() 取消由setTimeout()方法设置的timeout
setInterval() 按照指定的周期(以毫秒)来调用函数或计算表达式
ClearInterval() 取消由setInterval() 设置的timeout
3.属性
1.获取其他BOM对象
history
location
Navigator
Screen
2.获取DOM对象
document
4.特点
*window不需要创建,可以直接使用window使用,window.方法名()
也可以直接写方法名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Window对象</title>
</head>
<body>
<input type="button" value="打开窗口" id="opens">
<input type="button" value="关闭窗口" id="closes">
<script !src="">
//弹出窗口有关的
// alert("hello b");
//
// var flag= confirm("是否确定");
// if(flag){
// alert("点击确定");
// }else {
// alert("点击取消");
// }
//
// var result= prompt("请输入用户名");
// alert(result);
//打开关闭有关的
// var opens=document.getElementById("opens");
// var newwindow;
// opens.οnclick=function () {
// newwindow=open("https://www.baidu.com/");
// }
// var closes=document.getElementById("closes");
// closes.οnclick=function () {
// newwindow.close();
// }
//与定时器相关的方法
//一次性定时器
// var ids= setTimeout(f1,2000);
// clearTimeout(ids);
//循环定时器
// var id2= setInterval(f1,2000);
// clearInterval(id2);
// function f1() {
// alert("boom");
// }
//获取history
var h1=history;
// 或者
var h2=window.history;
alert(h1);
</script>
</body>
</html>
4.Location:地址栏对象
1.创建(获取)
1.使用window.location或者location
2.方法:
*reload()重新加载当前文档。刷新
*
3.属性
*href 设置或者返回完整的url
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Location对象</title>
</head>
<body>
<input id="btn" type="button" value="刷新">
<input id="gotos" type="button" value="去百度">
<script !src="">
//reload方法,定义按钮,点击按钮刷新页面
var btn=document.getElementById("btn");
btn.onclick=function () {
location.reload();
}
//获取url
var urls=location.href;
alert(urls);
var btn2=document.getElementById("gotos");
btn2.onclick=function () {
location.href="http://www.baidu.com";
}
</script>
</body>
</html>
5.历史记录对象
1.创建(获取)
history
2.方法:
*back() 加载history列表第一个url
*forward()加载history列表的下一个url
*go(参数)加载history列表的某个具体的url
*参数:
*正数:前进几个历史纪录
*负数:后退几个历史纪录
3.属性:
*length 返回当前窗口历史列表的url数量
DOM
*概念:Document Object Model文档对象模型
*将标记语言文档的各个组成部分,封装为对象。可以使用这些对象,对标记语营文档进行CRUD的动态操作
*W3C DOM 标准被分为三个不同部分
*核心 DOM - 针对任何结构化文档的标准模型
*Document:文档对象
1.创建(获取)
window.document或者document
2.方法:
1.获取Element对象:
*getElementById()根据id获取元素对象
*getElementByTagName()根据元素名称获取对象,返回值是一个数组
*getElementByClassName()根据Class属性值获取元素对象,返回值是一个数组
*getElementByName()根据name获取对象,返回值是数组
2. 创建其他Dom对象
*createAttribute(name)
*createComment()
*createElement(0
*createTextNode()
*Element:元素对象
1.获取/创建:document来获取
2.方法:
*removeAttribute():删除属性
*setAttribute():设置属性
*Attribute:属性对象
*Test:文本对象
*Comment:注释对象
*Node:节点对象(其他五个的父对象)
*特点:所有的dom对象都可以被认为是一个节点
*方法:
*CRUD dom树
*appendChild():向节点的子节点列表的结尾添加新的子节点
*removeChild():删除(并返回)当前节点的指定子节点
*replaceChild():用新的节点替换一个子节点
*XML DOM - 针对XML文档的标准模型
*HTML DOM - 针对html文档的标准模型
动态表格案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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="sex" placeholder="请输入性别">
<input type="button" value="添加" id="btn_add">
</div>
<table>
<caption>学生信息表</caption>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>aaa</td>
<td>男</td>
<td><a href="javascript:void(0)" onclick="delTr(this)">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>bbb</td>
<td>男</td>
<td><a href="javascript:void(0)"onclick="delTr(this)">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>ccc</td>
<td>男</td>
<td><a href="javascript:void(0)"onclick="delTr(this)">删除</a></td>
</tr>
</table>
<script !src="">
/*
添加:
给添加按钮绑定事件
获取文本框内容
创建tr,td,设置td的文本为文本框内容
创建tr
将td添加到tr中
获取table,将tr添加到table
删除:
确定点的是哪一个超链接
如何删除
removeChile():通过父节点删除子节点
*/
//获取按钮
document.getElementById("btn_add").onclick=function () {
//获取文本框
var id= document.getElementById("id").value;
var name= document.getElementById("name").value;
var sex= document.getElementById("sex").value;
//创建td
var td_id = document.createElement("td");
var test_id=document.createTextNode(id);
td_id.appendChild(test_id);
//创建td
var test_name=document.createTextNode(name);
var td_name = document.createElement("td");
td_name.appendChild(test_name);
//创建td
var test_sex=document.createTextNode(sex);
var td_sex = document.createElement("td");
td_sex.appendChild(test_sex);
//a标签的td
var ele_a=document.createElement("a");
var td_a=document.createElement("td");
ele_a.setAttribute("href","javascript:void(0)");
ele_a.setAttribute("onclick","delTr(this)");
var text_a= document.createTextNode("删除");
ele_a.appendChild(text_a);
td_a.appendChild(ele_a);
//创建tr
var tr=document.createElement("tr");
tr.appendChild(td_id);
tr.appendChild(td_name);
tr.appendChild(td_sex);
tr.appendChild(td_a)
//将td添加到table
var table=document.getElementsByTagName("table")[0];
table.appendChild(tr);
}
//删除方法
function delTr(obj) {
alert(obj);
//获取table标签
var table=obj.parentNode.parentNode.parentNode;
var tr=obj.parentNode.parentNode;
table.removeChild(tr);
}
</script>
</body>
</html>
l另一种写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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="sex" placeholder="请输入性别">
<input type="button" value="添加" id="btn_add">
</div>
<table>
<caption>学生信息表</caption>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>aaa</td>
<td>男</td>
<td><a href="javascript:void(0)" onclick="delTr(this)">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>bbb</td>
<td>男</td>
<td><a href="javascript:void(0)"onclick="delTr(this)">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>ccc</td>
<td>男</td>
<td><a href="javascript:void(0)"onclick="delTr(this)">删除</a></td>
</tr>
</table>
<script !src="">
document.getElementById("btn_add").onclick=function () {
var id=document.getElementById("id").value;
var name=document.getElementById("name").value;
var sex=document.getElementById("sex").value;
//获取table
var table= document.getElementsByTagName("table")[0];
table.innerHTML+="<tr>\n" +
" <td>"+id+"</td>\n" +
" <td>"+name+"</td>\n" +
" <td>"+sex+"</td>\n" +
" <td><a href=\"javascript:void(0)\"οnclick=\"delTr(this)\">删除</a></td>\n" +
" </tr>";
}
//删除方法
function delTr(obj) {
alert(obj);
//获取table标签
var table=obj.parentNode.parentNode.parentNode;
var tr=obj.parentNode.parentNode;
table.removeChild(tr);
}
</script>
</body>
</html>
HTML DOM
1.标签体的设置何获取:innerHTML
2.使用html元素对象的属性
3.设置元素的样式
1.使用元素的style属性来设置
如:var div1=document.getElementById("div1");
div1.onclick=function (ev) {
//设置样式
div1.style.border="1px solid red";
//font-size应该写成fontsize
div1.style.fontSize="20px";
}
2.提前定义好类选择器样式,通过className设置style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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">
di1
</div>
<div id="div2">
div2
</div>
<script !src="">
//方式一
var div1=document.getElementById("div1");
div1.onclick=function (ev) {
//设置样式
div1.style.border="1px solid red";
//font-size应该写成fontsize
div1.style.fontSize="20px";
}
//方式二
var div2=document.getElementById("div2");
div2.onclick=function (ev) {
div2.className="d1";
}
</script>
</body>
</html>
事件
*概念:某些组建被执行了某些操作,出发某些代码的执行
*事件:某些操作,如 单击,双击,键盘按下。鼠标移动
*事件源:组件,如 按钮,文本输入框
*监听器:代码
*注册监听:将事件,事件源,监听器绑定在在一起。当事件源上发生了事件,则触发监听器代码
*常见的事件
1.点击事件:
onclick:单击事件
ondblclick:双击事件
2.焦点事件
onblur:失去焦点
onfocus:元素获得焦点
3.加载事件
onload:加载事件
4.鼠标事件
1.onmousedown :鼠标按钮被按下
*定义方法是接受一个event对象
*event的button属性可以获取鼠标的哪个按键被点击
2.onmouseup :鼠标按键被松开
3.onmousemove :鼠标被移动
4.onmouseover :鼠标移动到了某元素上
5.onmouseout :鼠标从某元素移开
5.键盘事件
1.onkeydown :某个按键被按下
2.onkeyup :某个按键被松开
3.onkeypress:某个按键按下并松开
6.选择和改变
1.onchange :域的内容被改变
2.onselect :文本被选中
7.表单事件
1.onsubmit :提交按钮被单击
*如果返回false则表单阻止提交。否则提交表单
2.onreset :重置按钮被单击
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常见事件</title>
<script !src="">
/*
1.点击事件:
onclick:单击事件
ondblclick:双击事件
2.焦点事件
onblur:失去焦点
onfocus:元素获得焦点
3.加载事件
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 :重置按钮被单击
*/
//加载完成事件
window.onload=function (ev) {
//失去焦点事件
// document.getElementById("username").οnblur=function () {
// alert("失去焦点");
// }
// //鼠标移动到元素上事件
// document.getElementById("username").οnmοuseοver=function (ev1) {
// alert("鼠标来了");
// }
//鼠标点击事件
// document.getElementById("username").οnmοusedοwn=function (ev1) {
// //输出哪个鼠标按钮被按下,左键0,右键2,滚轮1
// alert(ev1.button);
// }
//键盘事件
// document.getElementById("username").οnkeydοwn=function (ev1) {
// //输出哪个按键
// alert(ev1.keyCode);
// }
//change事件
// document.getElementById("city").οnchange=function (ev1) {
// //输出哪个按键
// alert("内容改变")
// }
//表单事件
document.getElementById("form").onsubmit=function (ev1) {
//如果返回true或者没有返回值则提交表单,如果返回false则不提交
return false;
}
}
</script>
</head>
<body>
<form action="" id="form">
<input type="text" id="username">
<select name="" id="city">
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select>
<input type="submit" value="提交">
</form>
</body>
</html>
案例,表格选择,全选,全不选,反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格选择</title>
<style>
table{
border: 1px solid;
width: 500px;
margin-left: 30%;
}
td,th{
text-align: center;
border: 1px solid;
}
div{
margin-top: 10px;
margin-left: 30%;
}
.out{
background-color: white;
}
.over{
background-color: hotpink;
}
</style>
<script !src="">
/*
全选功能:
*获取所有checkbox
*便利checkbos,设置每一个为选中 check
* */
window.onload=function (ev) {
//给全选按钮绑定单击事件
document.getElementById("selectAll").onclick=function (ev1) {
//获取所有checkbox
var cbs=document.getElementsByName("cb");
for(var i=0;i<cbs.length;i++){
cbs[i].checked=true;
}
}
//全不选按钮
document.getElementById("removeAll").onclick=function (ev1) {
//获取所有checkbox
var cbs=document.getElementsByName("cb");
for(var i=0;i<cbs.length;i++){
cbs[i].checked=false;
}
}
//反选
document.getElementById("change").onclick=function (ev1) {
//获取所有checkbox
var cbs=document.getElementsByName("cb");
for(var i=0;i<cbs.length;i++){
cbs[i].checked=!cbs[i].checked;
}
}
//标题栏的checkbox
document.getElementById("fcb").onclick=function (ev1) {
var cbs=document.getElementsByName("cb");
for(var i=0;i<cbs.length;i++)
cbs[i].checked=this.checked;
}
//给所有tr鼠标移到事件和移出事件,改变颜色
var trs= document.getElementsByTagName("tr");
for(var i=0;i<trs.length;i++){
//移动到元素之上
trs[i].onmouseover=function (ev1) {
this.className="over";
}
//移动出元素
trs[i].onmouseout=function (ev1) {
this.className="out";
}
}
}
</script>
</head>
<body>
<table>
<caption>学生信息表</caption>
<tr>
<td><input type="checkbox" id="fcb"></td>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
<td><a href="javascript:void(0)">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"name="cb"></td>
<td>1</td>
<td>张三</td>
<td>男</td>
<td><a href="javascript:void(0)">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="cb"></td>
<td>2</td>
<td>李四</td>
<td>男</td>
<td><a href="javascript:void(0)">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="cb"></td>
<td>3</td>
<td>王五</td>
<td>女</td>
<td><a href="javascript:void(0)">删除</a></td>
</tr>
</table>
<div>
<input type="button" value="全选" id="selectAll">
<input type="button" value="全不选" id="removeAll">
<input type="button" value="反选" id="change">
</div>
</body>
</html>
案例 表单动态验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">cs
<title>表单验证</title>
<style>
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
background: url("../image/桌面.png");
}
.rg_layout{
width: 900px;
height: 500px;
border: 8px solid #EEEEEE;
background-color: white;
/*让div剧中*/
margin: auto;
margin-top: 150px;
opacity: 0.8;
}
.rg_left{
/*border: 1px solid red;*/
float: left;
margin: 15px;
}
.rg_left > p:first-child{
color: #FFD026;
font-size: 20px;
}
.rg_left > p:last-child{
font-size: 20px;
color: #A6A6A6;
}
.rg_center{
float: left;
/*border: 1px solid red;*/
width: 540px;
}
.rg_right{
float: right;
/*border: 1px solid red;*/
margin: 15px;
}
.rg_right >p:first-child{
font-size: 15px;
}
.rg_right p a{
color: deeppink;
}
.td_left{
width: 100px;
text-align: right;
height: 45px;
}
.td_right{
padding-left: 50px;
}
#username , #password , #email , #name , #tel ,#brith{
width: 251px;
height: 32px;
border: 1px solid #A6A6A6;
/*设置边框圆角*/
border-radius: 5px;
padding-left: 15px;
}
#ma{
width: 110px;
height: 32px;
border: 1px solid #A6A6A6;
/*设置边框圆角*/
border-radius: 5px;
padding-left: 15px;
}
#img_check{
height: 32px;
vertical-align: middle;
}
#btn_sub{
width: 150px;
height: 40px;
background-color: #FFD026;
border: 1px solid #FFD026 ;
}
.error{
color: red;
}
</style>
<script !src="">
/*
1.给表单绑定onsubmit事件,监听器中整合判断每一个方法校验的结果
如果都为true,则监听器方法返回true,如果有一个为false,则返回false
2.定义一些方法分别校验各个表单项
3.给各个表单绑定onblur事件
*/
window.onload=function (ev) {
document.getElementById("form").onsubmit=function (ev1) {
//判断每一个方法,用户名校验方法,密码校验方法。。。。
return checkUsername();
}
//给input输入框绑定失去焦点的事件
//失去焦点校验用户名
document.getElementById("username").onblur=function (ev) {
checkUsername();
}
//失去焦点校验密码
document.getElementById("password").onblur=function (ev1) {
checkPassword();
}
}
//校验用户名
function checkUsername() {
var username=document.getElementById("username").value;
//6-12位正则
var reg_username=/^\w{6,12}$/;
var flag=reg_username.test(username);
var s_username=document.getElementById("s_username");
if (flag) {
s_username.innerHTML="<img width='35px' height='20px' src='../image/对号.png'>"
}else{
s_username.innerHTML="格式有误";
}
return flag;
}
//校验密码
function checkPassword() {
var password=document.getElementById("password").value;
var reg_password=/^\w{6,12}$/;
var s_password=document.getElementById("s_password");
var flag=reg_password.test(password)
if (flag){
s_password.innerHTML="<img width='35px' height='20px' src='../image/对号.png'>";
} else{
s_password.innerHTML="格式有误";
}
return flag;
}
</script>
</head>
<body>
<div class="rg_layout">
<div class="rg_left">
<p class="p_reg">新用户注册</p>
<p>USER REGISTER</p>
</div>
<div class="rg_center">
<div class="rg_form">
<form action="#" method="post" id="form">
<table>
<tr>
<td class="td_left"><label for="username">用户名</label></td>
<td class="td_right">
<input type="text" name="username" id="username" placeholder="请输入用户名">
<span id="s_username" class="error"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="password">密码</label></td>
<td class="td_right">
<input type="password" name="userpass" id="password" placeholder="请输入密码">
<span id="s_password" class="error"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="email">Email</label></td>
<td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
</tr>
<tr>
<td class="td_left"><label for="name">姓名</label></td>
<td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
</tr>
<tr>
<td class="td_left"><label for="tel">手机号</label></td>
<td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
</tr>
<tr>
<td class="td_left"><label for="sex">性别</label></td>
<td class="td_right"><input type="radio" name="sex" id="sex" value="man">男
<input type="radio" name="sex" id="sex" value="woman">女
</td>
</tr>
<tr>
<td class="td_left"><label for="brith">出生日期</label></td>
<td class="td_right"><input type="date" name="brith" id="brith"></td>
</tr>
<tr>
<td class="td_left"><label for="ma">验证码</label></td>
<td class="td_right"><input type="text" name="ma" id="ma" placeholder="输入验证码"><img id="img_check" src="验证码.jpg" alt="" width="100px" height="20px"></td>
</tr>
<tr><td colspan="2" align="center"><input id="btn_sub" type="submit" value="提交"></td></tr>
</table>
</form>
</div>
</div>
<div class="rg_right">
<P>已有账号?<a href="#">立即登陆</a></P>
</div>
</div>
</body>
</html>