jQuery技术

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

字号+ 作者:H5之家 来源:H5之家 2017-12-15 14:21 我要评论( )

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

如果只看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 runat="server">
<div>
<div>
<span>第一章</span>
<a>第一章第一节</a>
<a>第一章第二节</a>
<a>第一章第三节</a>
<a>第一章第四节</a>
</div>
<div>
<span>第二章</span>
<a>第二章第一节</a>
<a>第二章第二节</a>
<a>第二章第三节</a>
<a>第二章第四节</a>
</div>
</div>
</form>
</body>
</html>

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

a.$(document).ready()

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

b.addClass(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()
});
});

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

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Jquery的$.ajax()方法详解

    Jquery的$.ajax()方法详解

    2017-12-15 13:32

  • jQuery学习之一

    jQuery学习之一

    2017-12-12 11:19

  • MAC下通过Time Machine恢复系统技巧

    MAC下通过Time Machine恢复系统技巧

    2017-12-08 15:04

  • jquery之dom学习

    jquery之dom学习

    2017-12-07 18:45

网友点评