jQuery 简介

1，在页面中引用jQuery

    在使用jQuery之前，我们需要在页面里引用它，主要的方式有两种，详情如下。

下载jQuery

    可以从官方站点中下载 http://docs.jquery.com/download/

    下载后，把下载的jquery.js文件放到与页面相同的文件夹中，如下所示

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的
元素
$("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("
helloworld
");
//这样就会修改id为"elem"的页面元素的HTML内容

    text()

    如果只是想获得一个元素或一组元素的文本内容，出了使用html()外，还可以使用text():

var htmlContent = $("#elem").text();
//变量 htmlContent就会包含id为elem的页面元素内部的全部文本(不包括html)

    同样的，它也可以社会中元素的文本内容:

$("elem").text("helloworld");
//这样就会修改id为elem的页面元素的文本内容

    如果只是想给元素添加文本内容而不是替换其中的内容，可以这样做:

$("elem").append("
新的helloworld
");
//这样会保存在原有内容的基础上，添加新的内容

类似的:

    $("div").append("

111

")  会给页面上全部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动画的例子

动画效果: