JQuery总结+实例

来源：互联网发布：单片机计时器原理编辑：程序博客网时间：2024/05/22 02:17

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的一点认识，如有错误，欢迎指出！

0 0