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

版权声明：本文为博主原创文章，未经博主允许不得转载。

JQuery总结+实例的更多相关文章

  1. jQuery Ajax 实例 ($.ajax、$.post、$.get)

    jQuery Ajax 实例 ($.ajax.$.post.$.get) 转 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. ...

  2. JavaScript强化教程——jQuery AJAX 实例

    什么是 AJAX?AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML).简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据 ...

  3. jQuery AJAX实例

    <html><head><title>jQuery Ajax 实例演示</title></head><script language= ...

  4. jQuery Ajax 实例 ($.ajax、$.post、$.get)【转载】

    本文转载自:http://jun1986.iteye.com/blog/1399242 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的 ...

  5. jQuery Ajax 实例 ($.ajax、$.post、$.get)转

    Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. 推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看,地址为:ht ...

  6. jQuery 验证实例(shopnc二次开发)

    shopnc 商家用户实现添加用户与前台用户分离, jQuery 验证实例 equalTo:等于 <div id="saleRefund" show_id="1&q ...

  7. 一个简单的jQuery插件开发实例

    两年前写的一个简单的jQuery插件开发实例,还是可以看看的: <script type="text/javascript" src="jquery-1.7.2.m ...

  8. 锋利的jQuery幻灯片实例

    //锋利的jQuery幻灯片实例 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  9. jQuery插件实例五：手风琴效果[动画效果可配置版]

    昨天写了个jQuery插件实例四:手风琴效果[无动画版]那个是没有动画效果的,且可配置性不高,本篇为有动画效果.对于一些数据做了动态的计算,以实现自适应. 欢迎大家入群相互交流,学习,新群初建,欢迎各 ...

  10. jQuery UI 实例 – 切换(Toggle)

    toggle()函数用于为每个匹配元素的click事件绑定轮流的处理函数. toggle()是一个特殊的事件函数,用于为匹配元素的click事件绑定多个事件处理函数.每次触发click事件时,togg ...

随机推荐

  1. 【51NOD】独木舟

    [算法]贪心 [题解]比较经典,用l,r两个定位指针分别从左右向中间推进. #include<cstdio> #include<algorithm> #include<c ...

  2. patch需要数据格式前端算法，patch算法基础，两个对象对比取差异属性

    在我们的前端开发过程中,表单是最常见不过的了,一般我们创建表单的时候习惯使用post方法来提交数据,编辑表单时候喜欢put,但是当表单的数据非常多的时候,编辑起来很麻烦,首先需要获取初始化数据,然后把 ...

  3. SpringCloud Fegin超时重试源码

    springCloud中最重要的就是微服务之间的调用,因为网络延迟或者调用超时会直接导致程序异常,因此超时的配置及处理就至关重要. 在开发过程中被调用的微服务打断点发现会又多次重试的情况,测试环境有的 ...

  4. linux 服务简介

    Linux服务(Linux services)对于每个应用Linux的用户来说都很重要.关闭不需要的服务,可以让Linux运行的更高效,但并不是所有的Linux服务都可以关闭.今天安装了一次CentO ...

  5. Eclipse svn 忽略文件夹/ svn 设置不同步

    Eclipse 开发中我们经常用到SVN插件, 但是对于某些文件的缓存来说, 我们只要有操作缓存便会保存一次, 每次提交很是麻烦, 小编这里教你一种不同步某个文件夹的方法 工具/原料 MyEclips ...

  6. TCP之非阻塞connect和accept

    套接字的默认状态是阻塞的,这就意味着当发出一个不能立即完成的套接字调用时,其进程将被投入睡眠,等待响应操作完成,可能阻塞的套接字调用可分为以下四类: (1) 输入操作,包括read,readv,rec ...

  7. java===java基础学习（11）---继承

    继承可以解决代码复用,让编程更加靠近人的思维.当多个类存在相同的属性(变量)和方法时,可以从这些类中抽象出父类,在父类中定义这些相同的属性和方法.所有的子类不需要重新定义这些属性和方法,只需要通过ex ...

  8. java===java基础学习（6）---流程控制，for，if，switch，continue，break

    注意点: for循环的用法和python截然不同,注意格式 switch~,switch对应的case每当执行完毕都要break,由于基本不怎么用switch,所以作为了解. 中断流程控制语句,请考虑 ...

  9. 12-4 NSString

    原文:http://rypress.com/tutorials/objective-c/data-types/nsstring NSString 在本教程的内容可能我们已经看到过很多次了,NSStri ...

  10. 883H - Palindromic Cut（思维+STL）

    题目链接:http://codeforces.com/problemset/problem/883/H 题目大意:给一段长度为n的字符串s,想让你把s切成几段长度相同的回文串,可以改变s中字符的排列, ...