第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 ...
随机推荐
- 打开win8及以上操作系统的系统已安装程序目录
Windows 8 的“Metro 界面”里不能像XP和Win7那样,点击“开始”->“程序”,显示系统所有安装的程序,这个功能还是非常有用的,可以帮助我们快速查看系统已经安装的程序!我编写了这 ...
- ORM的查询操作
查询的分类 class Author(models.Model): name = models.CharField(max_length=32) age = models.IntegerField() ...
- html中设置data-*属性值 并在js中进行获取属性值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- AI 的下一个重大挑战：理解语言的细微差别
简评:人类语言非常博大精妙,同一句话在不同的语境下,就有不同的含义.连人类有时候都不能辨别其中细微的差别,机器能吗?这就是人工智能的下一个巨大挑战:理解语言的细微差别.本文原作者是 Salesforc ...
- leetcode-79-单词搜索（用dfs解决）
题目描述: 给定一个二维网格和一个单词,找出该单词是否存在于网格中. 单词必须按照字母顺序,通过相邻的单元格内的字母构成,其中“相邻”单元格是那些水平相邻或垂直相邻的单元格.同一个单元格内的字母不允许 ...
- js的语言的理解
1.所谓字面量,就是语言语法 2.在js编译器读到语法时候,执行时候创建对象:在赋值的时候创建一个对象,或者是一个匿名对象. 3.函数定义本身是一个对象:执行时候不产生实例对象:这跟python类不一 ...
- logrotate运行时间指定
Edit in /etc/crontab the line that says 25 6 * * * root test -x /usr/sbin/anacron || ( cd / &&am ...
- 图示NP, P, NP-Complete和NP-Hard问题
P问题是一类可以通过确定性图灵机(以下简称图灵机)在多项式时间(Polynomial time)内解决的问题集合. NP问题是一类可以通过非确定性图灵机( Non-deterministic Turi ...
- Access network
1 State transfering A•Mobility:开机-搜寻PLMN/CELL来发现自己在网络中的位置•Attach request•Auth request•Auth res ...
- vue.js - axios Get、Post方法传参给 .net core webapi。
一:axios中是 Get请求: 1:在vue项目中通过params属性携带数据: let _self = this; axios({ method:'get', url:'http://localh ...