程序五:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
table{
width:500px;
height:300px;
}
table ,td{
border:1px solid #000;
border-collapse: collapse;
}
</style>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<script src="js/jquery-1.12.3.min.js">
</script>
<script>
// 偶数行变色
$("tr:even").css("background","red");
// td单元格变色的话,是隔一个变一个 第偶数个变色
//$("td:even").css("background","yellow");
</script>
</body>
</html>
程序五运行结果:
比较巧合的是当一行刚好有偶数个td(单元格)的话,table会整列变色。
即偶数的单元格刚好位于同列。
程序六:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.box{
width:200px;
height:200px;
background: red;
}
</style>
<body>
<div class="box"></div>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
// 获得背景色,两种方式:backgroundColor 或者background-color
console.log($(".box").css("backgroundColor"));
console.log($(".box").css('background-color'));
//设置.box的宽高皆为400px。可以加px单位,也可以不加px单位
// $(".box").css("width","400");
// $(".box").css("height","400px");
// 同时设置多种属性,
// $(".box").css({
// "width": "500",
// "height":"300px",
// "background":"yellow",
// })
//设置.box的宽度为现有的基础减去30px,宽度为现有的基础上加30px
$(".box").css("width","-=30");
$(".box").css("height","+=30");
</script>
</body>
</html>
程序六运行结果:
程序七:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
div{
width:200px;
height:200px;
background: yellow;
}
.box1{
position: absolute;
top:10px;
}
.box2{
position: absolute;
top:300px;
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
// 可以没有回调函数,即div运动到终点的时候,啥也不做。 终点为300px,时间为2000毫秒
// $(".box1").animate({left:300},2000);
//同一元素,有多个动画的时候,会排队执行 .box1先往右移动到300px,然后背景色变为天蓝色,
//再向下移动到500px的位置。 .box1的总的运动时间为2000+2000=4000ms。
// $(".box1").animate({left:300},2000,function(){
// $(".box1").css("background","skyblue");
// });
// $(".box1").animate({top:500},2000);
//不同元素,有动画的时候,不会排队执行(会一起执行)
$(".box1").animate({left:300},2000,function(){
$(this).css("background","skyblue");
});
$(".box2").animate({left:300},2000,function(){
$(this).css("background","skyblue");
});
</script>
</body>
</html>
程序七运行结果:
程序八:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width:100px;
height:100px;
background: red;
}
</style>
</head>
<body>
<div class="box"></div>
<script src="js/jquery-1.12.3.min.js"> </script>
<script>
// 当.box被点击的时候,输出click和evenet。事件不带on
$(".box").click (function(event){
console.log("click");
console.log(event);
})
//当.box被进入的时候,输出mouseenter和evenet。事件不带on
$(".box").mouseenter (function(event){
console.log("mouseenter");
console.log(event);
})
//当.box被出去的时候,输出mouseleave。事件不带on
$(".box").mouseleave (function(){
console.log("mouseleave");
})
</script>
</body>
</html>