jquery经典实例我将会列举出两个,学习jquery不在乎知识量的多少,重点在于你对一个项目是否完全理解。
样式代码:
<style type=”text/css”>
#menu{
width:300px;
}
.has_children{
background:#555;
color:#fff;
cursor:pointer;
}
.highlight{
color:#fff;
background:green;
}
div{
padding:0;
margin:10px 0;
}
div a{
background:#888;
display:none;
float:left;
width:300px;
}
</style>
#menu{
width:300px;
}
.has_children{
background:#555;
color:#fff;
cursor:pointer;
}
.highlight{
color:#fff;
background:green;
}
div{
padding:0;
margin:10px 0;
}
div a{
background:#888;
display:none;
float:left;
width:300px;
}
</style>
html代码:
<div id=”menu”>
<div class=”has_children”>
<span>1</span>
<a>1</a>
<a>1</a>
<a>1</a>
</div>
<div class=”has_children”>
<span>1</span>
<a>1</a>
<a>1</a>
<a>1</a>
</div>
<div class=”has_children”>
<span>2</span>
<a>2</a>
<a>2</a>
<a>2</a>
</div>
</div>
<span>2</span>
<a>2</a>
<a>2</a>
<a>2</a>
</div>
</div>
<script type=”text/javascript”>
$(document).ready(function(){
$(“.has_children”).click(function(){
$(this).addClass(“highlight”)
.children(“a”).show()
.end()
.siblings().removeClass(“highlight”).children(“a”).hide();
});
});
</script>
//当点击.has_children类时触发以下事件
//被点击的.has_children类添加highlight样式
//.has_children类的子元素a显示出来
//当在点击另一个.has_children类时重复以上步骤之后就执行以下代码
//找到没有被点击到的.has_children兄弟节点删除highlight样式并且将子节点a隐藏起来
这里可能还不够清楚只要是理解end()和siblings()的作用
end()我们可以理解为返回的意思
siblings()理解为寻找同辈分的兄弟,但是不包括自己。