<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">
.grandfather{
background-color: #eee;
display: inline-block;
}
.Afather,.Bfather{
background-color: #aaa;
display: inline-block;
margin: 10px;
}
.Achildren,.Bchildren{
display: inline-block;
width: 100px;
margin: 10px;
background-color: #555;
height: 100px;
}
button{
margin: 10px;
font-size: 25px;
}
.beselected{
background-color: #f59;
}
.main{
background-color: #0af;
}
</style>
</head>
<body>
<h2>A家庭</h2>
<div class="grandfather">
<div class="Afather father">
<div class="Achildren child"></div>
<div class="Achildren child"></div>
<div class="Achildren child main"></div>
<div class="Achildren child"></div>
<div class="Achildren child"></div>
</div>
<div class="Bfather father">
<div class="Bchildren child"></div>
<div class="Bchildren child"></div>
<div class="Bchildren child"></div>
</div>
</div>
<br>
<button id="reset">清空</button>
<button id="findchild">Afather.find('Achildren')</button>
<button id="closest">Achildren.closest('father')</button><br>
<button id="parent">Achildren.parent()</button>
<button id="parents">Achildren.parents()</button>
<button id="siblings">Achildren.siblings()</button><br>
<button id="next">Achildren.next()</button>
<button id="nextAll">Achildren.nextAll()</button>
<button id="prev">Achildren.prev()</button>
<button id="prevAll">Achildren.prevAll()</button>
<script type="text/javascript">
$('#reset').on('click',function(){
$('*').removeClass('beselected');
});
$('#findchild').on('click',function(){
$('.Afather').find('.Achildren').addClass('beselected');
});
$('#closest').on('click',function(){
$('.main').closest('.father').addClass('beselected');
});
$('#parent').on('click',function(){
$('.main').parent().addClass('beselected');
});
$('#parents').on('click',function(){
$('.main').parents().addClass('beselected');
});
$('#siblings').on('click',function(){
$('.main').siblings().addClass('beselected');
});
$('#next').on('click',function(){
$('.main').next().addClass('beselected');
});
$('#nextAll').on('click',function(){
$('.main').nextAll().addClass('beselected');
});
$('#prev').on('click',function(){
$('.main').prev().addClass('beselected');
});
$('#prevAll').on('click',function(){
$('.main').prevAll().addClass('beselected');
});
</script>
</body>
</html>
全站熱搜
留言列表
伺服器架設 (1)
