第8天：javascriptDOM小 案例、onmouseover 、onmouseout
案例
为元素注册点击事件，弹出对话框
<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{
width: 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{
width: 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>
第8天：javascriptDOM小 案例、onmouseover 、onmouseout的更多相关文章
- 机械表小案例之transform的应用
这个小案例主要是对transform的应用. 时钟的3个表针分别是3个png图片,通过setInterval来让图片转动.时,分,秒的转动角度分别是30,6,6度. 首先,通过new Date函数获取 ...
- shell讲解-小案例
shell讲解-小案例 一.文件拷贝输出检查 下面测试文件拷贝是否正常,如果cp命令并没有拷贝文件myfile到myfile.bak,则打印错误信息.注意错误信息中basename $0打印脚本名.如 ...
- [jQuery学习系列六]6-jQuery实际操作小案例
前言最后在这里po上jQuery的几个小案例. Jquery例子1_占位符使用需求: 点击第一个按钮后 自动去check 后面是否有按钮没有选中, 如有则提示错误消息. <html> &l ...
- 02SpringMvc_springmvc快速入门小案例（XML版本）
这篇文章中,我们要写一个入门案例,去整体了解整个SpringMVC. 先给出整个项目的结构图:
- React.js入门小案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- SqlDependency缓存数据库表小案例
SqlDependency的简介: SqlDependency是outputcache网页缓存的一个参数,它的作用是指定缓存失效的数据库依赖项,可以具体到数据库和表. SqlDependency能解决 ...
- JavaScript apply函数小案例
//回调函数1 function callback(a,b,c) { alert(a+b+c); } //回调函数2 function callback2(a,b) { alert(a+b); } / ...
- Session小案例------完成用户登录
Session小案例------完成用户登录 在项目开发中,用户登陆功能再平常只是啦,当用户完毕username和password校验后.进入主界面,须要在主界面中显示用户的信息,此时用ses ...
- ch1-vuejs基础入门（hw v-bind v-if v-for v-on v-model 应用组件简介 小案例）
1 hello world 引入vue.min.js 代码: ----2.0+版本 <div id="test"> {{str}} </div> <s ...
随机推荐
- Android ScrollView 子控件不占满的问题
经常碰到很笨的 ScrollView的子控件无法占满 ScrollView 的空间的问题. 其实只需要加一行,android:fillViewport="true" 但不加上这行就 ...
- c++11新特性总结(转。加上重点)
1.类型与变量相关 1.1.nullptr: 取代了NULL,专用于空指针 1.2.constexpr: 近似const, 可以修饰变量,也可以修饰函数, 修饰变量如: const int globa ...
- Http协议中关于Content-Length的解读【出现坑爹的视频中断】
最近公司的视频设备在下载视频的时候,出现了很诡异的现象,在新旧服务器一样的tpp包,下载下来后,新服务器无法解析,旧服务器没问题.且tpp包并没有改动. 后面找了挺久,终于发现了视频下载的时候是断点续 ...
- php对ip地址的处理
public function actions() { $url = "http://ip.taobao.com/service/getIpInfo.php?ip=".self:: ...
- 部署LVS-DR群集
一.LVS-DR原理剖析 (一)LVS-DR数据包流向分析 1.Client向目标VIP发出请求,Director(负载均衡器)接收.此时IP包头及数据帧头信息为: 2.Director根据负载均衡算 ...
- Python内置函数查询表——总结篇
Python3.5版本中的68个内置函数,按顺序逐个进行了自认为详细的解析,现在是时候进行个总结了.为了方便记忆,将这些内置函数进行了如下分类: 数学运算(7个) 类型转换(24个) ...
- 分享一些JAVA常用的学习网站
常用学习网站freecodecamp 一个非常好的网站,教学模式类似游戏中的闯关,通过每关之后会有成就感,在该网站还有设有聊天室,可以进行相关的技术交流,很棒的学习网站. https://www.fr ...
- L07-Linux配置ssh免密远程登录
本文配置可实现:集群服务器之间相互可以ssh免密登录.若只想从单一机器(如master)ssh免密登录其他机器(slave1.slave2),则只跟着操作到第二步即可. 建议先花两三分钟把全文看完再跟 ...
- MySQL与Redis实现二级缓存
redis简介 Redis 是完全开源免费的,遵守BSD协议,是一个高性能的key-value数据库 Redis 与其他 key - value 缓存产品有以下三个特点: Redis支持数据的持久化, ...
- (Lua) C++ 寫函式，Lua 呼叫使用
C++ 裡頭寫一個 Function 但是透過 Lua 提供input參數並且回傳結果給Lua 輸出的辦法. Lua 檔案 , , ) print("ave : ", ave, & ...