1，在页面中引用jQuery
在使用jQuery之前，我们需要在页面里引用它，主要的方式有两种，详情如下。
下载jQuery
可以从官方站点中下载 http://docs.jquery.com/download/
下载后，把下载的jquery.js文件放到与页面相同的文件夹中，如下所示
<script src="jquery.js"></script>
2，jQuery的$(document).ready处理器
类似于window.onload处理器，jQuery具有自己相应的方法:
$(document).ready(function(){
//jquery代码
});
一般情况下，我们编写的很多代码会从类似这样的语句里执行。
与window.onload一样，它完成两件事情:
- 确保在DOM可用之后，也就是确保代码中可能访问的元素都已经存在了，在执行代码，从而避免产生错误。
- 把语义层(HTML)和表现层(CSS)分离开，让代码更加清晰。
jQuery相比winodw.onload有个优点，不是一定要等到页面加载完成才运行代码，在使用jQuery的$(document).ready时，只要DOM树构造完成，代码就会开始运行，而不会在等到图像和其他资源都加载完毕，这对改善性能略有帮助。
3，选择页面元素
在jQuery里，利用操作符$("")就可用选择HTML元素。
下面是一些使用范例:
$("span") //选择全部span元素
$("#elem"); //选择全部id为elem的元素
$(".classname") //选择全部类目为classname的元素
$("div#elem") //选择全部id为elem的<div>元素
$("ul li a.menu"); //类为"menu"且嵌套在列表项里的锚点
$("p>span"); //p的直接子元素span
$("input[type=password]"); //具有指定类型的输入元素
$("p:first"); //页面上的第一个段落
$("p:even"); //全部偶数段落
关于DOM和CSS的选择符就是上述这些，但jQuery还有一些自己定制的选择符，比如:
$(":header"); //标题元素(h1到h6)
$(":button"); //全部按钮元素(输入框或按钮)
$(":radio"); //单选框
$(":checkbox") //选择框
$(":checked") //选中状态的选择框或单选框
前面这几条jQuery语句都会返回一个对象，其中包括指定DOM元素组成的数组。这些语句并没有实际操作，而只是从DOM获取相应的元素。后面的章节会介绍如何操作这些元素。
4，操作HTML内容，
操作页面元素内容是最能体现jQuery高效工作的方面之一。html()和text()方法能够获取和设置使用前面的语句所选中的元素内容，而attr()可以获取和设置单个元素的属性。下面来看一些范例
html()
这个方法能够获取元素或一组元素的HTML内容，它类似于javascript的innerHTML:
var htmlContent = $("#elem").html();
//变量htmlContent就会包含id为elem的页面元素的全部HTML(包括文本)
使用类似的语法，就可以设置元素或一组元素的HTML内容：
$("elem").html("<p>helloworld</p>");
//这样就会修改id为"elem"的页面元素的HTML内容
text()
如果只是想获得一个元素或一组元素的文本内容，出了使用html()外，还可以使用text():
var htmlContent = $("#elem").text();
//变量 htmlContent就会包含id为elem的页面元素内部的全部文本(不包括html)
同样的，它也可以社会中元素的文本内容:
$("elem").text("helloworld");
//这样就会修改id为elem的页面元素的文本内容
如果只是想给元素添加文本内容而不是替换其中的内容，可以这样做:
$("elem").append("<p>新的helloworld</p>");
//这样会保存在原有内容的基础上，添加新的内容
类似的:
$("div").append("<p>111</p>") 会给页面上全部div元素添加一些内容
attr()
当应用于一个元素时，这个方法返回特定属性的值。
var title = $("#elem").attr("title");
如果应用于一组元素，它只返回第一个元素的值。
利用这个方法还可以设置属性的值:
$("elem").attr("title","helloworld")
5，显示和隐藏元素
对于传统的javascript来说，显示和隐藏页面元素通常是利用元素style对象的display或visibility属性来实现的，这种方法没有什么问题，但通常会导致比较长的代码:
document.getElementById("elem").style.visibility = 'visible';
利用jQuery的show()和hide()方法就可以只用较短的代码实现相同的功能，而且还具有额外一些功能。
show()
show()方法可以让单个元素或一组元素显示在页面上:
$("div").show(); //显示全部div元素
另外，还可以添加一些参数来调整显示的过程。
在下面的范例里，第一个参数"fast"决定了显示元素的速度。这个参数除了可以设置为fast和slow之外，还可以设置为具体的数字（单位毫秒）。如果不设置这个参数，元素就会立即显示，没有任何动画。一般来说，"slow"对应的时间是600ms，"fast"对应的时间是200ms。
第三个参数类似于回调函数，能够在显示完成时执行一次操作。
$("elem").show(600,function(){ ..function过程 });
hide()
这个方法的用途显然与show()是相反的，用于隐藏页面元素，它也有一些和show()一样的可选参数:
$("#elem").hide("slow",function(){ ..function过程 })；
toggle()
toggle()方法会改变一个元素或一组元素的当前显示状态，也就是说把显示的元素隐藏起来，把隐藏的元素显示出来。它也具有关于变化速度和回调函数的参数。
$("elem").toggle(1000,function(){ ..function过程});
6，元素动画
jQuery提供的一些标准效果就语句相当强大了。页面元素的动画，曾经只能够使用javascript定时器和复制的手工编写的程序才能实现。现在，这些功能都已经漂亮地包装在jQuery的一些方法里，只需要简单地调用就可以应用于单个或一组元素。
（1）淡入淡出
在实现元素淡入淡出的同时，还可以设置持续时间和回调函数。
淡出的操作:
$("#elem").fadeOut("slow",function(){
//在淡出之后进行一些操作
})；
淡入的操作:
$("#elem").fadeIn("slow",function(){
//在淡入之后进行一些操作
})；
还可以让元素只进行部分淡入或淡出:
$("#elem").fadeTo(3000,0.5,function(){
//在淡入或淡出之后进行一些操作
})；
其中第二个参数(本例是0.5)表示最终的不透明度，类似于CSS里设置的不透明度。不管元素曾经的不透明度的多少，在执行上述语句之后，它都会变成第二个参数所指定的值。
（2）滑动
jQuery实现元素滑动的方法与实现淡入淡出的方法如出一辙，它们的参数具有相同的规则，可以实现单个或一组元素的向上或向下滑动。
$("#elem").slideDown(150,function(){
//向下滑动之后进行一些操作
})；
$("#elem").slideUp(150,function(){
//向上滑动之后进行一些操作
})；
为了实现根据元素目前位置自动决定是向上滑动还是向下滑动，jQuery还提供了slideToggle()方法。
$("#elem").slideToggle(1000,function(){
//向上或向下滑动之后进行一些操作
})；
（3）动画
实现动画的方法很简单，利用jQuery指定元素要使用CSS样式表。jQuery就以渐变方式应用新的CSS样式(而不是像普通的CSS或javascript那样直接应用)，从而实现动画的效果。
animate()方法可以应用于很多CSS属性。下面的范例中把元素的宽度和高度动画到400像素×500像素，并且在动画完成之后，利用回调函数把元素淡出为隐藏。
$("elem").animate(
{
width:"400px",
height:"500px",
},1500,function(){
$(this).fadeOut("slow");
}
);
7，命令链
jQuery的大多数方法都返回一个jQuery对象，它可以用于再调用其他方法，这是jQuery的另一个方便之处。比如可以像这样组合前面的范例:
$("#elem").fadeOut().fadeIn();
上面这行代码会先淡出指定的元素，然后淡入显示他们。命令链的长度没有上面限制，从而可以对同一组元素连续进行很多操作:
$("elem").text("Hello from jQuery").fadeOut().fadeIn();
一个简单的jQuery动画的例子
<!DOCTYPE html>
<html>
<head>
<style>
#animateMe{
position:absolute;
width:100px;
height:400px;
top:100px;
left:100px;
border:2px solid black;
backfround0color:red;
padding:20px;
}
</style>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#animateMe").text("changeing shape...").animate(
{
width:"400px",
height:"200px"
},5000,function(){
$(this).text("Fading away ... ").fadeOut(4000);
}
);
});
</script>
</head>
<body>
<div id="animateMe"></div>
</body>
</html>
动画效果:
