鼠标移入移出
<script type="text/javascript">
//加载事件绑定的函数
function init(){
//获取各自的标签
var testElement=document.getElementById("text");
//动态绑定
overElement.onmouseover=over;
outElement.onmouseout=out;
}
//鼠标移入事件
function over(){
alert("来了,老弟")
}
//鼠标移出事件
function out(){
alert("走了,老弟")
}
</script>
<!--加载事件放在事件标签,然后用函数调用-->
<body "init()">
<div id="test" style="border: 1px solid red;width: 100px;height: 100px;" >
</div>
</body>
鼠标移入(你好)移出(再见)–改变字的内容
<script type="text/javascript">
//定义在外面,所有函数都可以调用
var testElement;
//加载事件绑定的函数
function init(){
//获取各自的标签
testElement=document.getElementById("test");
//动态绑定
testElement.onmouseover=over;
testElement.onmouseout=out;
}
//鼠标移入事件
function over(){
//触发移入事件onmouseover绑定的函数,执行函数方法
testElement.innerHTML="再见";
}
//鼠标移出事件
function out(){
//触发移入事件onmouseout绑定的函数,执行函数方法
testElement.innerHTML="你好";
}
</script>
<!--加载事件放在事件标签,然后用函数调用-->
<body "init()">
<div id="test" style="border: 1px solid red;width: 100px;height: 100px;background-color: beige;" >
你好
</div>
</body>
关键字 this
java中this,表示当前对象,谁调用的方法,在方法中this就代表的谁
js中this,表示当前元素,谁调用的函数,在函数中的this就代表谁
上面的代码改进部分
//鼠标移入事件
function over(){
//触发移入事件onmouseover绑定的函数,执行函数方法
this.innerHTML="再见";
}
//鼠标移出事件
function out(){
//触发移入事件onmouseout绑定的函数,执行函数方法
this.innerHTML="你好";
}
表格移动鼠标换色/全选反选全不选
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.white{
background-color: white;
}
.grey{
background-color: grey;
}
.red{
background-color: red;
}
</style>
<script type="text/javascript">
//加载事件绑定的函数
function load(){
////////////////////鼠标移入移出换色////////////////////
//获取标签的数量,通过标签名(非id和name自定义的名字,是tr,div,这种名字)
//trs接收的是一个集合,然后循环遍历
var trs=document.getElementsByTagName("tr");
for(var i = 1;i < trs.length; i++){
//绑定鼠标移入事件,这种写法不用去标签的地方写死了
trs[i].onmouseover=over;
//绑定鼠标移出事件
trs[i].onmouseout=out;
if(i%2==0){
//设置类名,然后css样式定义了类名的颜色
trs[i].className="grey";
}else{
trs[i].className="white";
}
}
}
//////////////////////鼠标移入移出换色///////////////////////
//保存旧的类名
var oldclass;
//触发鼠标移入事件后,调用绑定的函数
function over(){
oldclass=this.className;
this.className="red";
}
//触发鼠标移出事件后,调用绑定的函数
function out(){
this.className=oldclass;
}
////////////////////////全选全不选反选/////////////////////////
//单击onclick事件的函数
function quanxuan(){
var checks=document.getElementsByClassName("check");
for(var i=0;i<checks.length;i++){
checks[i].checked=true;
}
}
function buxuan(){
var checks=document.getElementsByClassName("check");
for(var i=0;i<checks.length;i++){
checks[i].checked=false;
}
}
function fanxuan(){
var checks=document.getElementsByClassName("check");
for(var i=0;i<checks.length;i++){
//把反的赋值给本身
checks[i].checked=!checks[i].checked;
}
}
</script>
</head>
<body "load()">
<div>
<form>
<table table border="1" cellpadding="0" cellspacing="0" >
<tr>
<td id="select" width="200px">
<input type="button" value="全选" onclick="quanxuan()"/>
<input type="button" value="全不选" onclick="buxuan()"/>
<input type="button" value="反选" onclick="fanxuan()"/>
</td>
<td width="200px">序号</td>
<td width="250px">商品名称</td>
<td width="250px">商品描述</td>
<td width="200px">操作</td>
</tr>
<tr>
<td>
<input class="check" type="checkbox" />
</td>
<td>1</td>
<td>手机数码</td>
<td>手机数码商品信息</td>
<td>修改 删除</td>
</tr>
<tr>
<td id="select">
<input class="check" type="checkbox" />
</td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公商品信息</td>
<td>
<span><a href="#">修改</a></span> <span><a href="#">删除</a></span>
</td>
</tr>
<tr>
<td id="select">
<input class="check" type="checkbox" />
</td>
<td>3</td>
<td>服饰鞋帽</td>
<td>服饰鞋帽商品信息</td>
<td>修改 删除</td>
</tr>
<tr>
<td id="select">
<input class="check" type="checkbox" />
</td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品商品信息</td>
<td>修改 删除</td>
</tr>
</table>
</form>
</div>
</body>