3.16号上午课程

一、事件内容

（1）事件由三部分组成：事件源（找到文档对象）

事件类型这里主要讲的是鼠标事件

示例写法：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#bb{
height: 200px;
width: 200px;
background-color: blue;
transition: 2s;
}
input:focus{
background-color: red;
}
</style>
</head>
<body>
<div id="aa">点击</div>
<div id="bb"></div>
<div id="cc">恢复</div>
</body>
</html>
<script type="text/javascript">
// 时件由三个部分组成
var aa=document.getElementById("aa");
var bb=document.querySelector("#bb");
var cc=document.getElementById("cc");

// 鼠标事件的语法概括：
// 鼠标左击事件：onclick;
// 鼠标经过：onmouseover;
// 鼠标离开：onmouseout;
// 获得鼠标的焦点：onfocus;（这个之前在学习Input（input:focus）里有涉及过）
// 失去鼠标焦点：onblur;
// 鼠标移动：onmousemove;
// 鼠标按下：onmousedown;
// 鼠标弹起：onmouseup;

// 给aa挂事件 onclick(鼠标左击事件)写法
// aa.onclick=function(){
// bb.style.width="300px";
// bb.style.height="300px";
// bb.style.backgroundColor="red";
// }

//给aa挂事件 onmouseover(鼠标经过) 写法
aa.onmouseover = function(){
bb.style.width = "300px"
bb.style.height = "300px"
bb.style.backgroundColor = "red"
}

// 给cc挂事件 onmouseover(鼠标经过) 写法
cc.onmouseover=function(){
bb.style.width="200px";
bb.style.height="200px";
bb.style.backgroundColor="blue";
}
</script>

（2）操作元素对内容的操作

写法示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#aa{
width: 100px;
height: 50px;
border: 1px solid grey;
text-align: center;
line-height: 50px;
border-radius: 5px;
background-color: aquamarine;
color: #0000FF;
}
#aa:hover{
cursor: pointer;
}
</style>
</head>
<body>
<div id="aa">点击</div>
<p class=""></p>
<div id="txt">
这是内容区域
这是内容区域
这是内容区域
这是内容区域
这是内容区域
</div>
</body>
</html>
<script type="text/javascript">
//先找到元素，绑定事件，事件的执行函数function(){}(匿名函数)
var aa = document.querySelector("#aa")
var txt = document.querySelector("#txt")
//内容
aa.onclick = function(){
txt.innerHTML = "<p>我是新内容我是新内容<br>我是新内容我是新内容<p>"

// innerText不能识别html标签
//txt.innerText = "我是新内容我是新内容<br>我是新内容我是新内容"
}
</script>

（3）操作元素-属性src和href

示例写法：

（4）操作元素-属性-class

示例写法：

（5）操作元素-属性-表单

示例写法：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#aa{
width: 100px;
height: 50px;
border: 1px solid grey;
text-align: center;
line-height: 50px;
border-radius: 5px;
background-color: aquamarine;
color: #0000FF;
}
#aa:hover{
cursor: pointer;
}
</style>
</head>
<body>
<div id="aa">
点击
</div>
<input id="inp" type="text"/>

<input type="radio" name="sex" id="nan" value="" />男
<input type="radio" name="sex" id="nv" value="" />女

<input type="checkbox" name="" id="" value="" />北京
<input type="checkbox" name="" id="" value="" />上海
<input type="checkbox" name="" id="" value="" />南京

<select name="" id="sel">
<option value="">北京</option>
<option value="">上海</option>
<option value="">南京</option>
</select>
</body>
</html>
<script type="text/javascript">
var aa = document.getElementById("aa")
var inp = document.getElementById("inp")
var nan = document.getElementById("nan")
var nv = document.getElementById("nv")
var sel = document.getElementById("sel")
aa.onclick = function(){
//inp.type = "password"
//inp.value ="abcdefg"
//inp.disabled = true //"disabled" //不可用属性
//nv.checked = "checked" //选中
// selected 是复选框下拉
}
</script>

（6）当点击当前元素时，可以使用this关键词

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#aa{
height: 200px;
width: 200px;
background-color: blue;
transition: 2s;
}
#aa:hover{
cursor: pointer;
}
</style>
</head>
<body>
<div id="aa">点击</div>
</body>
</html>
<script type="text/javascript">
var aa=document.getElementById("aa");
aa.onclick=function(){
// 当点击当前元素时，可以使用this关键词
this.style.backgroundColor="red";
}
</script>

posted @ 2022-03-17 00:37 嗨小冒阅读(24) 评论(0) 收藏举报

刷新页面返回顶部

3.16号上午课程

公告