通过例子学习Jquery---导航栏菜单

最新推荐文章于 2024-07-18 13:52:01 发布

jimson_ma

最新推荐文章于 2024-07-18 13:52:01 发布

阅读量1.2k

点赞数

分类专栏： JQuery 文章标签： jquery function class xhtml div server

本文链接：https://blog.csdn.net/mjx20045912/article/details/5388843

版权

JQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

如果只看JQuery 的语法以及一些API，可能影像不太深刻，为了加深记忆，我通过例子来更好的学习，理解。

1. 导航栏菜单

效果：点击父节点，父节点变色，其子节点全部展开，其他没被点击的父节点的子节点全部影藏。

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="Resources/jquery-1.4.2.js"></script> //引入Jquery库
<title>导航栏菜单</title>
<style type="text/css">
.Charter
{
background-color:Red;

cursor:pointer;
}
.ChangeColor
{
background:green;
}

#meau
{
width:300px;
}
div a{
background : blue;
display : none;
float:left;
width:300px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".Charter").click(function(){
$(this).addClass("ChangeColor").children("a").show().end().siblings().removeClass("ChangeColor").children("a").hide();
});
});
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="meau">
     <div class="Charter">
     <span>第一章</span>
     <a>第一章第一节</a>
     <a>第一章第二节</a>
     <a>第一章第三节</a>
     <a>第一章第四节</a>
     </div>
     <div class="Charter">
     <span>第二章</span>
     <a>第二章第一节</a>
     <a>第二章第二节</a>
     <a>第二章第三节</a>
     <a>第二章第四节</a>
     </div>
    </div>
    </form>
</body>
</html>

在此例中关键代码为红色所标记的，首先来解释此例子中所用到的Jquery中的语法：

a.$(document).ready()

允许你绑定一个在DOM文档载入完成后执行的函数. 也就是说当DOM加载完成后，执行其中的函数

b.addClass(class)

为每个匹配的元素添加指定的类名,同样removeClass(class) 指为每个匹配的元素删除指定的类。

c.children(string)

取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

d.show().

显示隐藏的匹配元素, 相反， hide() 为隐藏元素。

e.end()

回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。所谓的"破坏性"就是指任

何改变所匹配的jQuery元素的操作

f.siblings().

取得一个包含匹配的元素集合中每一个元素的同辈元素的元素集合

明白上述语法后，理解此例子代码中的红色部分就很容易了：

$(document).ready(function(){ //等待DOM加载完毕
$(".Charter").click(function(){ //为父节点添加click方法
$(this).addClass("ChangeColor") //为父节点添加类，即点击父节点时变色

.children("a").show() //父节点的所有含有标签<a>的子节点显示

.end()

.siblings().removeClass("ChangeColor").children("a").hide();

// 由于.end 的原因，此处相当于$(this).siblings().removeClass("ChangeColor").children("a").hide()
});
});

此例子介绍完毕，理解有误之处望指正，与您共同进步！

jimson_ma

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
通过例子学习Jquery---导航栏菜单

如果只看JQuery 的语法以及一些API，可能影像不太深刻，为了加深记忆，我通过例子来更好的学习，理解。 1. 导航栏菜单效果：点击父节点，父节点变色，其子节点全部展开，其他没被点击的父节点的子节点全部影藏。代码如下： http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://
复制链接

扫一扫