JQuery是什么?
Jquery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需要定义id即可。简单的来说,我认为,jquery就是一个别人写好了各种功能的javascript库。
JQuery的特点:
视频中给我们介绍了Jquery的特点,主要是支持各种主浏览器,以强大的css先择器为基础,几乎所有的操作都先使用选择器查找DOM对象,然后对其进行各种操作。(css的有好多功能只支持IE浏览器,甚至不支持IE10,jquery弥补了这个缺点)JQuery有强大的插件机制。
简单了解JQuery之后,我们在实例中,去说明和使用JQuery。以菜单栏的例子来说明。菜单栏的例子是为了实鼠标点击竖向菜单栏时,缓慢的出现对应子菜单,再次点击,收起子菜单。横向菜单栏实现鼠标停在某个主菜单上,显示其子菜单。
代码如下(这里不放JQuery的代码,实在太多了,如想使用,可以直接去网上下载):
HTML的代码:
<span style="font-size:18px;"><!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>
<title>实战3-菜单效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link typt="text/css" rel="stylesheet" href="css/menu.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
</head>
<body>
<ul>
<li class="main">
<a href="#">菜单项1</a>
<ul>
<li>
<a href="#">子菜单项11</a>
</li>
<li>
<a href="#">子菜单项12</a>
</li>
</ul>
</li>
<li class="main">
<a href="#">菜单项2</a>
<ul>
<li>
<a href="#">子菜单项21</a>
</li>
<li>
<a href="#">子菜单项22</a>
</li>
</ul>
</li>
<li class="main">
<a href="#">菜单项3</a>
<ul>
<li>
<a href="#">子菜单项31</a>
</li>
<li>
<a href="#">子菜单项32</a>
</li>
</ul>
</li>
</ul>
<br />
<br />
<br />
<ul>
<li class="hmain">
<a href="#">菜单项1</a>
<ul>
<li>
<a href="#">子菜单项11</a>
</li>
<li>
<a href="#">子菜单项12</a>
</li>
</ul>
</li>
<li class="hmain">
<a href="#">菜单项2</a>
<ul>
<li>
<a href="#">子菜单项21</a>
</li>
<li>
<a href="#">子菜单项22</a>
</li>
</ul>
</li>
<li class="hmain">
<a href="#">菜单项3</a>
<ul>
<li>
<a href="#">子菜单项31</a>
</li>
<li>
<a href="#">子菜单项32</a>
</li>
</ul>
</li>
</ul>
</body>
</html></span>
CSS的代码:
<span style="font-size:18px;">ul, li{
/*清除ul和li上默认的小圆点*/
list-style:none;
}
ul{
/*清除子菜单缩进值*/
padding:0;
margin:0;
}
.main, .hmain{
background-image:url(../images/title.gif);
background-repeat:repeat-x;
width:120px;
}
li{
background-color:#EEEEEE;
}
a{
/*取消所有的下划线*/
text-decoration:none;
padding-left:20px;
display:block;
display:inline-block;
width:100px;
padding-top:3px;
padding-bottom:3px;
}
.main a, .hmain a{
color:white;
background-image:url(../images/collapsed.gif);
background-repeat:no-repeat;
background-position:3px center;
}
.main li a, .hmain li a{
color:black;
background-image:none;
}
.main ul, .hmain ul{
display:none;
}
.hmain{
float:left;
margin-right:1px;
}
</span>
最后看看js的代码:
<span style="font-size:18px;">$(document).ready(function(){
//页面中的主菜单项已经转载完成时,执行的代码
$(".main > a").click(function(){
//找到主菜单项所对应的子菜单项
var ulNode = $(this).next("ul");
/*
if(ulNode.css("display") == "none"){
ulNode.css("display","block");
}else{
ulNode.css("display","none");
}
*/
//ulNode.show("slow");//normal fast
//ulNode.hide();
//ulNode.toggle("slow");
//
//ulNode.slideDown();
//ulNode.slideUp();
ulNode.slideToggle();
changeIcon($(this));
});
$(".hmain").hover(function(){
$(this).children("ul").slideDown();
changeIcon($(this).children("a"));
},function(){
$(this).children("ul").slideUp();
changeIcon($(this).children("a"));
});
});
/**
*修改主菜单的指示图标
*/
function changeIcon(mainNode){
if(mainNode){
if(mainNode.css("background-image").indexOf("collapsed.gif") >= 0){
mainNode.css("background-image","url('images/expanded.gif')");
}else{
mainNode.css("background-image","url('images/collapsed.gif')");
}
}
}</span>
之前我们都学过HTML和CSS,这里我想主要说一下js的代码。在本例中,show,hide方法可以用于显示或隐藏元素,没有参数时的效果和修改css的display属性效果一样。参数可以是单位为毫秒的数字,或者是slow , normal , fast 这三个文字,都可以来控制完成显示或隐藏所需要的时间。这时动画效果是靠不断改变元素的宽度和高度来实现的。toggle方法更为强大,可以上去我们判断元素是隐藏还是显示的状态,直接让显示的元素隐藏起来或者隐藏的元素显示出来,使用方法和show,hide 相同;slideDown ,sildeUp可以实现乡下或向上卷动的效果,实际上是通过指定时间内修改元素的高度来实现动画效果。需要注意的是,这两个方法参数为空的情况和show,hide不同。sildetoggle和toggle达到的效果类似。
小结:
在实践中不断学习,用实实在在的例子帮助我们学习,总体来说,我认为Jquery是非常强大的功能函数库,如果想用好JQuery 建议多看看JqueryAPI,当然,在使用的时候先查,也是可以的。这篇简单的在宏观上总结了JQuery和jQuery的一些方法,以及我对JQuery的一点认识,如有错误,欢迎指出!