java onmouseover_第8天：javascriptDOM小 案例、onmouseover 、onmouseout

案例

为元素注册点击事件，弹出对话框

//定义函数

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("我要变帅");

}

点击按钮显示、隐藏图片

//页面加载后执行

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 = "";

}

}

点击按钮改变p标签显示内容

window.onload = function(){

//根据id获取元素，为元素测试点击事件

var btnObj = document.getElementById("btn");

btnObj.onclick = function(){

var p = document.getElementById("p1");

//p 标签文本内容设置时，使用innerText这个属性的方式

//凡成对出现的标签，中间的文本内容，设置的使用都使用innerText这个属性

p.innerText = "p改变后的内容:我还是一个p标记";

}

}

我是p标签

案例点击按钮改变a标签的热点文字和标签地址

//页面加载后执行

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 = "百度";

}

}

谷歌

点击按钮修改多个p标签的文字的内容

//页面加载后执行

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 = "好烦，帅不能当饭吃!"

}

}

}

哈哈，你最帅！！！

哈哈，你最帅！！！

哈哈，你最帅！！！

哈哈，你最帅！！！

哈哈，你最帅！！！

点击按钮修改图片的alt和title

11案例点击按钮修改图片的alt和title

img{

width: 100px;

height: 100px;

}

document.getElementById("btn").onclick = function(){

//返回一个伪数组

var imgObj = document.getElementsByTagName("img");

console.log(imgObj);

imgObj[0].title = "图片标题";

imgObj[0].alt = "图片的alt";

}

点击按钮修改文本框的值

点击按钮修改文本框的值

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 = "哈哈真的改了！";

}

}

}

点击每个图片弹出一个对话框

Document

img{

width: 100px;

height: 100px;

}

//根据标签名字获取图片标签 ，分别注册点击事件

var imgObjs = document.getElementsByTagName("img");

//循环遍历数组，获取每个图片标签，注册点击事件，添加事件处理函数

for(var i = 0; i < imgObjs.length; i++){

imgObjs[i].onclick = function (){

alert("被点击了");

}

}

点击按钮修改按钮的属性

Document

var btn = document.getElementById("btn");

btn.onclick = function(){

//修改按钮的value

this.value = "我是按钮，哈哈哈";

this.type = "text";

this.id = "nnn";

}

点击改变图片自身的宽和高

点击改变图片自身的宽和高

//如果style中定义了宽高无法改变、、、能改变了在告诉你

var imgObj = document.getElementById("img1");

imgObj.onclick = function(){

this.width ="200";

}

16按钮中点击自身值改变

Document

var inputs = document.getElementsByTagName("input");

for(var i = 0; i < inputs.length; i++){

//为每个按钮添加点击事件

inputs[i].onclick = function(){

//先将所有的赋值为同样

for(var j = 0; j

inputs[j].value= "我们都没变"

}

//单独赋值当前变了

this.value="变了"

}

}

onmouseover 属性在鼠标指针移动到元素上时触发

onmouseout 属性在鼠标指针移出元素上时触发

鼠标移入变色 移出正常

娃哈哈农夫山泉雪碧可乐江小白

//鼠标移入移出事件

//获取所有标签

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 = "";

}

}

隔行变色

• 奥迪
• 五菱宏光
• 奔驰
• 马自达
• 本田
• 玛莎拉蒂
• 悍马
• 雪佛兰
• 红旗
• 现代

//点击按钮

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";

}

}

鼠标移入移出案例2

//鼠标移出 onmouseover

my$("img1").onmouseover = function(){

my$("img2").style.display = "block";

}

my$("img1").onmouseout = function(){

my$("img2").style.display = "none";

}