<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>部长演习jquery性能</title>
<script src="js/jquery-1.11.1.min.js"></script>
<style>
.bor{border:10px solid yellow;}
.red{color:red;}
</style>
<script>
$(document).ready(function(e) {
//添加属性居中
//$('div').attr('align','center');
//设定多个属性
$('div').attr({'align':'center','id':'myaa','title':'aaaaaaaaa'});
//$('div').css('text-align','right');
//读取align属性值。并提示框显示出来
//alert($('div').attr('align'));
//鼠标经过更换图片
$('img:first').hover(function(){
$(this).attr('src','b.jpg');
//鼠标经过添加样式
$(this).addClass('bor');
//鼠标离开还换为原来的图片
},function(){
$(this).attr('src','33.jpg');
//鼠标离开减去样式
$(this).removeClass('bor');
});
//鼠标经过字体变颜色
$('h1:first').hover(function(){
$('h1:first').toggleClass('red');
},function(){
$('h1:first').toggleClass('red');
});
});
</script>
</head>
<body>
<h1>鼠标经过换图片</h1>
<div>ok</div>
<img src='33.jpg' width="300" height="200">
<hr>
<img src='33.jpg' width="300">
<img src='b.jpg' width="300" height="200">
</body>
</html>
版权声明：本文博主原创文章，博客，未经同意不得转载。