'''
主要目的是回顾相关jquery部分功能
'''
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>琦琦的小窝</title>
<style>
.title{
1350px;
height:150px;
background-color:red;
}
.daohan{
1350px;
height:50px;
background-color:blue;
}
.left{
450px;
height:1450px;
background-color:#ddd555;
float:left;
}
.right{
880px;
height:1450px;
background-color:#fff555;
float:left;
}
.hide{
display:none
}
.jiansuo{
880px;
height:100px;
}
.gotop{
50px;
height:50px;
position:fixed;
right:0;
bottom:0;
</style>
</head>
<body>
<div class="title">琦琦的家园</div>
<div class="daohan">
<a>个人简历</a>
<a>成长故事</a>
<a>幸福家庭</a>
<a>快乐瞬间</a>
</div>
<div class="left">
<div class="item">
<div class="item-title" onclick="fun(this);">标题一</div>
<div class="item-body">
<p>内容一</p>
<p>内容二</p>
<p>内容三</p>
</div>
</div>
<div class="item">
<div class="item-title" onclick="fun(this);">标题二</div>
<div class="item-body hide">
<p>内容一</p>
<p>内容二</p>
<p>内容三</p>
</div>
</div>
<div class="item">
<div class="item-title" onclick="fun(this);">标题三</div>
<div class="item-body hide">
<p>内容一</p>
<p>内容二</p>
<p>内容三</p>
</div>
</div>
<div>视频播放</div>
</div>
<div class="right">
<div class="jiansuo">搜狗检索
<form id="form1" action="https://www.sogou.com/web" method="get">
<input name="query" type="text">
<input type="button" value="提交" onclick="Submit();">
</form>
</div>
<div>
<input type="button" value="全选" onclick="SelectAll();">
<input type="button" value="取消" onclick="ClearAll();">
<input type="button" value="反选" onclick="fanAll();">
<table border="1">
<tr>
<td><input type="checkbox"></td>
<td>123</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>123</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>123</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>123</td>
</tr>
</table>
<input type="button" value="提交" onclick="tijiao();">
</div>
</div>
<div class="jiaobiao"></div>
<div class="gotop" >
<a onclick="gotop1();">点我回顶部</a>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
function gotop1(){
$(window).scrollTop(0);
}
function fun(ths){
$(ths).next().removeClass('hide');
$(ths).parent().siblings().find('.item-body').addClass('hide')
}
function Submit(){
document.getElementById('form1').submit();
}
function SelectAll(){
$('table :checkbox').prop('checked',true);
}
function ClearAll(){
$('table :checkbox').prop('checked',false);
}
function tijiao(){
alert("提交成功")
$('table :checkbox').prop('checked',false);
}
function fanAll(){
$('table :checkbox').each(function()
{
var ischeck=$(this).prop('checked');
if (ischeck){
$(this).prop('checked',false);
}
else{
$(this).prop('checked',true);
}
})
}
</script>
</body>
</html>