<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
/*按钮的单击事件*/
$("#btn").click(function(){
/*单击按钮添加div1_style样式*/
$("#div1").addClass("div1_style");
});
/*单击div1*/
$("#div1").click(function(){
/*给div2添加div2_style样式*/
$("#div2").addClass("div2_style")
});
/*单击h2标题的收*/
$("h1").click(function(){
$("h1").css("background","red").next().css("display","block");
});
/*测试next方法，是紧邻同级元素的下一个，下下个不包括*/
$(".test_next li").click(function(){
$(".test_next_li1").next().css("color","red");
});
/*单击图片在图片外边显示边框*/
$(".img1").click(function(){
$(this).css("border","2px solid black");
})
/*使用js获取dom_test元素*/
var dom_test = document.getElementById("dom_test");
//转换成jquery元素
var $dom_test = $(dom_test);
//单击他的时候改变字体颜色
$("#dom_test").click(function(){
$dom_test.css("color","red");
});
/*默认惊喜是隐藏的，鼠标悬浮的时候显示*/
$("#show_test2").hide();
$("#show_test1").hover(function(){
$("#show_test2").show();
},function(){
$("#show_test2").hide();
});
})
</script>
<style type="text/css">
.div1_style{
200px;
height: 200px;
background: red;
}
.div2_style{
200px;
height: 200px;
background: green;
}
p{
display: none;
}
#show_test1{
150px;
height: 150px;
border-radius: 50% 50%;
background: red;
}
#show_test2{
100px;
height: 100px;
background: greenyellow;
}
</style>
</head>
<body>
<div id="div1">
div1
</div>
<div id="div2">
div2
</div>
<button id="btn">按钮</button>
<br/>
<h1>什么是受益人？</h1>
<p>
<strong>解答：</strong>
受益人是所有的人积分看电视剧什么的深白名单额等，等等的接口上多久爱好讲课的撒。的罕见的设计导航萨克和风刀霜剑开户费的手机号发动机书法家看电视
</p>
测试next方法
<ul class="test_next">
<li class="test_next_li1">第1个li</li>
<li class="test_next_li2">第2个li</li>
<li class="test_next_li3">第3个li</li>
</ul>
单击图片，在图片的外围显示边框：<br />
<img src="img/img1.jpg" class="img1"/>
DOM对象转换测试：<br />
<span id="dom_test">DOM对象</span>
测试show方法和hide方法
<br />
<div id="show_test1">
悬浮上去显示惊喜
</div>
<div id="show_test2">
惊喜！
</div>
</body>
</html>