随身笔记
随身笔记

1.经典jquery实例

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>

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>2</span>
<a>2</a>
<a>2</a>
<a>2</a>
</div>
</div>

效果是:

https://sdeno.com/wp-content/uploads/2012/11/20121125151705.jpg

script代码:

<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隐藏起来

效果是:

https://sdeno.com/wp-content/uploads/2012/11/1.jpg
https://sdeno.com/wp-content/uploads/2012/11/2.jpg

这里可能还不够清楚只要是理解end()和siblings()的作用
end()我们可以理解为返回的意思
siblings()理解为寻找同辈分的兄弟,但是不包括自己。

随身笔记

1.经典jquery实例
jquery经典实例我将会列举出两个,学习jquery不在乎知识量的多少,重点在于你对一个项目是否完全理解。 样式代码: <style type="text/css"> #menu{ width:300px; } .h…
扫描二维码继续阅读
2012-11-25