案例
为元素注册点击事件，弹出对话框
<input type="button" id="btn" value="开发分离">
<input type="button" id="btn2" value="最终版">
<script>
//定义函数
function f1(){
alert("开发分离的html和js代码");
}
//根据id获取这个标签(元素)
var btnObj = document.getElementById("btn");
//为按钮注册点击事件
//注意f1不加括号 不然f1()，页面加载时就执行了
//该注册方式不是最好的
btnObj.onclick =f1;
//根据id属性的值，从整个文档中获取这个标签(元素)
var btnObj2 = document.getElementById("btn2");
//为当前的这个按钮元素(对象)，注册点击事件，添加事件处理函数（匿命函数）
btnObj2.onclick = function(){
alert("我要变帅");
}
</script>
点击按钮显示、隐藏图片
<script>
//页面加载后执行
window.onload = function(){
//根据id获取按钮
var btnObj = document.getElementById("btn");
//为按钮注册点击事件，添加事件处理函数
btnObj.onclick = function(){
imgObj.src = "迪丽热巴.jpg";
//设置图片的大小 不用加px width=“”
imgObj.width = "300";
}
//根据id获取图片标签，设置图片的src属性值
var imgObj = document.getElementById("img");
//隐藏图片
var hiddenObj = document.getElementById("hidden");
hiddenObj.onclick = function(){
//清空图片src属性
imgObj.src = "";
}
}
</script>
</head>
<body>
<input type="button" value="显示图片" id="btn">
<input type="button" value="隐藏图片" id="hidden">
<img src="" alt="" id="img">
</body>
点击按钮改变p标签显示内容
<script>
window.onload = function(){
//根据id获取元素，为元素测试点击事件
var btnObj = document.getElementById("btn");
btnObj.onclick = function(){
var p = document.getElementById("p1");
//p 标签文本内容设置时，使用innerText这个属性的方式
//凡成对出现的标签，中间的文本内容，设置的使用都使用innerText这个属性
p.innerText = "p改变后的内容:我还是一个p标记";
}
}
</script>
</head>
<body>
<input type="button" id="btn" value="设置p标签内容">
<p id="p1">我是p标签</p>
</body>
案例点击按钮改变a标签的热点文字和标签地址
<script>
//页面加载后执行
window.onload = function(){
//根据id获取文档中btn按钮元素
var btnObj = document.getElementById("btn");
//为btn元素注册点击事件
btnObj.onclick = function(){
//根据id获取文档中a标签元素
var aObj = document.getElementById("google");
//设置a标签改变后的地址和热点文字
aObj.href = "www.baidu.com";
aObj.innerText = "百度";
}
}
</script>
</head>
<body>
<input type="button" id="btn" value="点击改变a标签的地址和热点文字">
<a href="www.google.com" id="google">谷歌</a>
</body>
点击按钮修改多个p标签的文字的内容
<script>
//页面加载后执行
window.onload = function(){
//根据id获取元素
var btnObj = document.getElementById("btn");
//为btnObj对象注册点击事件
btnObj.onclick = function(){
//根据标签名字获取标签
var pList = document.getElementsByTagName("p");
//遍历获取的到的标签伪数组
for(var i = 0; i < pList.length; i++){
pList[i].innerText = "好烦，帅不能当饭吃!"
}
}
}
</script>
</head>
<body>
<input type="button" id="btn" value="点击改变">
<p>哈哈，你最帅！！！</p>
<p>哈哈，你最帅！！！</p>
<p>哈哈，你最帅！！！</p>
<p>哈哈，你最帅！！！</p>
<p>哈哈，你最帅！！！</p>
</body>
点击按钮修改图片的alt和title
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>11案例点击按钮修改图片的alt和title</title>
<style>
img{
100px;
height: 100px;
}
</style>
</head>
<body>
<input type="button" value="显示效果" id="btn">
<img src="迪丽热巴.jpg" alt="哈哈" title="imgtitle">
<script>
document.getElementById("btn").onclick = function(){
//返回一个伪数组
var imgObj = document.getElementsByTagName("img");
console.log(imgObj);
imgObj[0].title = "图片标题";
imgObj[0].alt = "图片的alt";
}
</script>
</body>
点击按钮修改文本框的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>点击按钮修改文本框的值</title>
</head>
<body>
<input type="button" value="修改文本框的值" id="btn"><br/>
<input type="text" value=""><br/>
<input type="text" value=""><br/>
<input type="text" value=""><br/>
<input type="text" value=""><br/>
<input type="text" value=""><br/>
<input type="text" value=""><br/>
<input type="text" value=""><br/>
<script>
document.getElementById("btn").onclick = function(){
//获取所有的文本框
var inputs = document.getElementsByTagName("input")
for(var i = 0; i < inputs.length; i++){
if(inputs[i].type !="button"){
inputs[i].value = "哈哈真的改了！";
}
}
}
</script>
</body>
</html>
点击每个图片弹出一个对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
img{
100px;
height: 100px;
}
</style>
</head>
<body>
<img src="迪丽热巴.jpg" alt=""id="img1">
<img src="迪丽热巴.jpg" alt=""id="img2">
<img src="迪丽热巴.jpg" alt=""id="img3">
<script>
//根据标签名字获取图片标签 ，分别注册点击事件
var imgObjs = document.getElementsByTagName("img");
//循环遍历数组，获取每个图片标签，注册点击事件，添加事件处理函数
for(var i = 0; i < imgObjs.length; i++){
imgObjs[i].onclick = function (){
alert("被点击了");
}
}
</script>
</body>
</html>
点击按钮修改按钮的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="button" value="按钮" id="btn">
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
//修改按钮的value
this.value = "我是按钮，哈哈哈";
this.type = "text";
this.id = "nnn";
}
</script>
</body>
</html>
点击改变图片自身的宽和高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>点击改变图片自身的宽和高</title>
<style>
</style>
</head>
<body>
<img src="迪丽热巴.jpg" alt=""id="img1">
<script>
//如果style中定义了宽高无法改变、、、能改变了在告诉你
var imgObj = document.getElementById("img1");
imgObj.onclick = function(){
this.width ="200";
}
</script>
</body>
</html>
16按钮中点击自身值改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="button"value="我们都没变">
<input type="button"value="我们都没变">
<input type="button"value="我们都没变">
<input type="button"value="我们都没变">
<input type="button"value="我们都没变">
<script>
var inputs = document.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++){
//为每个按钮添加点击事件
inputs[i].onclick = function(){
//先将所有的赋值为同样
for(var j = 0; j<inputs.length; j++){
inputs[j].value= "我们都没变"
}
//单独赋值当前变了
this.value="变了"
}
}
</script>
</body>
</html>
onmouseover 属性在鼠标指针移动到元素上时触发
onmouseout 属性在鼠标指针移出元素上时触发
鼠标移入变色 移出正常
<ul id="ul">
<li>娃哈哈</li>
<li>农夫山泉</li>
<li>雪碧</li>
<li>可乐</li>
<li>江小白</li>
</ul>
<script src="common.js"></script>
<script>
//鼠标移入移出事件
//获取所有标签
var list = my$("ul").getElementsByTagName("li");
for(var i = 0 ; i < list.length; i++){
//鼠标移入事件onmouseover
list[i].onmouseover =function(){
this.style.backgroundColor = "red";
}
//鼠标移出事件onmouseout
list[i].onmouseout = function(){
this.style.backgroundColor = "";
}
}
</script>
隔行变色
<input type="button" value="隔行变色" id="btn">
<ul id="ul">
<li>奥迪</li>
<li>五菱宏光</li>
<li>奔驰</li>
<li>马自达</li>
<li>本田</li>
<li>玛莎拉蒂</li>
<li>悍马</li>
<li>雪佛兰</li>
<li>红旗</li>
<li>现代</li>
</ul>
<script src="common.js"></script>
<script>
//点击按钮
my$("btn").onclick = function(){
var liObjs = my$("ul").getElementsByTagName("li");
for(var i = 0; i < liObjs.length; i++){
// if(i%2==0){
// //偶数
// liObjs[i].style.background="red";
// }else{
// //偶数
// liObjs[i].style.background="yellow";
// }
//简结写法
liObjs[i].style.backgroundColor = i%2==0 ? "red": "yellow";
}
}
</script>
鼠标移入移出案例2
<div class="div1">
<img id="img1" src="images/5_small.png" alt="">
</div>
<img id="img2" class="div2" src="images/5.png" alt="">
<script src="common.js"></script>
<script>
//鼠标移出 onmouseover
my$("img1").onmouseover = function(){
my$("img2").style.display = "block";
}
my$("img1").onmouseout = function(){
my$("img2").style.display = "none";
}
</script>
