DOM操作、事件
1.document
DOM又称为文档树模型
文档：一个网页可以称为文档
节点：网页中的所有内容都是节点（标签、属性、文本、注释等）
元素：网页中的标签
属性：标签(元素)的属性
console.log(document);
控制台输出结果如下，就是html文件
2.获取DOM对象
<body>
<div id="box1">1111</div>
<div class="box2">222</div>
<div name="a" class="box2">3333</div>
<p class="box2"></p>
</body>
<!-- 必须写到下面 -->
<script>
// 1 根据ID 获取 返回单个DOM对象
var dv1=document.getElementById('box1');
console.log(dv1);
dv1.onclick=function(){
this.innerHTML='点我干啥'
}
// 2 根据class属性获取 返回 伪数组(没有方法)，尽管根据class只获得了一个对象，也放到数组中返回
// 得到 伪数组，想要操作标签的DOM对象，必须先通过[下标] 获取DOM再操作
var dv2s=document.getElementsByClassName('box2');
console.log(dv2s);
// 3 根据标签名获取 返回伪数组，同上
var divs=document.getElementsByTagName('div');
console.log(divs);
// 4 根据 name属性获取 返回伪数组
var divs=document.getElementsByName('a');
console.log(divs);
// 5 querySelector : 根据CSS选择器获取对象，如果结果有多个就获取第一个元素对象，返回单个DOM
var box1=document.querySelector('#box1');
var box2=document.querySelector('.box2');
// 6 querySelectorAll:根据CSS选择器获取对象，返回伪数组
var divs=document.querySelectorAll('div.box2');
console.log(divs);
</script>
3.事件
<body>
<!-- <div onclick="m1()" id="dv"> -->
<div id="dv">
<p id="p">a</p>
</div>
</body>
<script>
// 事件三要素
// 事件源，事件类型，处理函数
// DOM对象绑定一个事件，事件触发一个函数
// 事件源 是触发事件的对象
// 第一种：标签中直接通过onclick属性绑定
// // 第二种：通过JS获取DOM对象，进行绑定，又叫迟绑定
// function m1(){
// var event=window.event;
// console.log(event.x,event.y);
// }
var dv=document.getElementById('dv');
dv.onclick=function(event){
console.log(event.x,event.y);
//target 事件源 谁触发 事件源是谁
console.log(event.target.id); //p
// this 谁绑定的/谁调用的这个函数，this就是谁 这里是dv
console.log('this:'+this.id); //dv
}
</script>
4.load
<script>
//文档加载完后 触发执行
window.onload=function(){
var btn=document.getElementById('btn');
console.log(btn);
}
</script>
不加window.onload的话，写在body前面就获取不到数据
5.非单表操作
5.1更改图片对象的源
changeImg.onclick=function(){
if(img.src=='http://127.0.0.1:5500/day_01/img/smellcat.jpg'){
img.src='../day_01/img/semlldog.jpg';
}else{
img.src='../day_01/img/smellcat.jpg'
}
}
5.2更改大小
//更改大小
var changeSize=document.getElementById('changeSize');
changeSize.onclick=function(){
//通过标签属性直接更改
// img.width=150;
//通过CSS设置
// img.style.height='300px';
}
5.3隐藏，显示
//隐藏
var hide=document.getElementById('hide');
hide.onclick=function(){
//通过更改显示模式 隐藏
img.style.display='none';
}
//显示
var show=document.getElementById('show');
show.onclick=function(){
img.style.display='block';
}
5.3通过更改类来更改数据
//更改
var changeClass=document.getElementById('changeClass');
changeClass.onclick=function(){
//重新设置class属性值，结合CSS进行样式控制
// img.className='img2';
//添加一个class属性，注意空格 是多类名的分隔符
// img.className+=' img2';
// img.classList 获取 所有的class属性值，返回伪数组
if(img.classList.contains('img1')){
img.className='img2';
}else{
img.className='img1';
}
}
6.表单操作
value 用于大部分表单元素的内容获取(option除外)
type 可以获取input标签的类型(输入框或复选框等)
disabled 禁用属性checked 复选框选中属性
selected 下拉菜单选中属性
checked
简单编写一个登陆界面
<body>
<!-- readonly="readonly" 只读，但是数据可以传递
disabled="disabled" 禁用，数据不会传递-->
<!-- <input type="text" disabled="disabled" name="abc" id=""> -->
<form action="http://www.taobao.com" method="get">
<div class="userBox">
<label for="username">用户名：</label>
<input type="text" name="username" placeholder="请输入用户名" id="username">
<span id="usernameSpan"></span>
</div>
<div class="pwdBox">
<label for="password">密码：</label>
<input type="password" name="password" placeholder="请输入密码" id="password">
<span id="passwordSpan"></span>
</div>
<div class="sexBox">
<label>性别：</label>
<input type="radio" name="sex" value="男" id="man">男
<input type="radio" name="sex" value="女" id="woman">女
<span id="sexSpan"></span>
</div>
<input type="button" value="登陆" name="" id="login">
</form>
</body>
<script src="./common.js"></script>
<script>
window.onload=function(){
var login=$("#login")[0];
login.onclick=function(){
//1 获取对象
var username=$("#username")[0];
var password=$("#password")[0];
var man=$('#man')[0];
var woman=$('#woman')[0];
var form=$('form')[0];
//2 获取输入的数据
var usernameValue=username.value;
var passwordValue=password.value;
// //3 判断不能为空
// //判断用户名
// if(usernameValue==null||usernameValue.trim()==''){
// // alert('用户名不能为空');
// //innerText设置标签中的文本内容
// $('#usernameSpan')[0].innerText='*用户名不能为空';
// }else{
// $('#usernameSpan')[0].innerText="";
// }
// //判断密码
// if(passwordValue==null||passwordValue.trim()==''){
// // alert('用户名不能为空');
// $('#passwordSpan')[0].innerText='*密码不能为空';
// }else{
// $('#passwordSpan')[0].innerText="";
// }
$('#username')[0].onblur=function(){
var usernameValue=this.value;
var passwordValue=this.value;
//3 判断不能为空
//判断用户名
if(usernameValue==null||usernameValue.trim()==''){
// alert('用户名不能为空');
$('#usernameSpan')[0].innerText='*用户名不能为空';
}else{
$('#usernameSpan')[0].innerText="";
}
//判断密码
if(passwordValue==null||passwordValue.trim()==''){
// alert('用户名不能为空');
$('#passwordSpan')[0].innerText='*密码不能为空';
}else{
$('#passwordSpan')[0].innerText="";
}
}
//判断性别
console.log(man.checked);
console.log(woman.checked);
if(man.checked||woman.cheched){
$('#sexSpan')[0].innerText="";
login.value='正在登陆...';
//禁用按钮，防止重复点击发送多次请求
login.disabled=true;
login.style.backgroundColor='gray';
//登录
// form.submit();
}else{
$('#sexSpan')[0].innerText="请选择性别";
}
}
}
</script>
<style>
form{
width: 500px;
height: 500px;
border: 1px solid;
border-radius: 15px;
margin: 0 auto;
text-align:left;
}
.userBox,.pwdBox,.sexBox{
margin-top: 15px;
margin-bottom: 15px;
}
#login{
width: 200px;
height: 50px;
font-size: 24px;
border-radius: 15px;
}
span{
color: red;
}
</style>
343
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
