JQuery基础教程：入门

JQuery能做什么

1、取得文档中的元素

如果不使用JavaScript库，遍历DOM（Document Object Model，文档对象模型）树，以及查找HTML文档结构中某个特殊的部分，必须编写很多行代码。jQuery为准确地获取需要检查或操纵的文档元素，提供了可靠而富有效率的选择符机制。$('div.content').find('p');

2、修改页面的外观

CSS虽然为影响文档呈现的方式提供了一种强大的手段，但当所有浏览器不完全支持相同的标准时，单纯使用CSS就会显得力不从心。jQuery可以弥补这一不足，它提供了跨浏览器的标准解决方案。而且，即使在页面已经呈现之后，jQuery仍然能够改变文档中某个部分的类或者个别的样式属性。$('ul > li:first').addClass('active');

3、改变文档的内容

jQuery能够影响的范围并不局限于简单的外观变化，使用少量的代码，jQuery就能改变文档的内容。可以改变文本、插入或翻转图像、列表重新排序，甚至对HTML文档的整个结构都能重写和扩充——所有这些只需一个简单易用的API。$('#container').append('<a href="more.html">more</a>');

4、响应用户的交互操作

即使是最强大和最精心设计的行为，如果我们无法控制它何时发生，那它也毫无用处。jQuery提供了截获形形色色的页面事件（比如用户单击某个链接）的适当方式，而不需要使用事件处理程序拆散HTML代码。此外，它的事件处理API也消除了经常困扰Web开发人员浏览器的不一致性。

$('button.show-details').click(function() {
$('div.details').show();
});

5、为页面添加动态效果

为了实现某种交互式行为，设计者也必须向用户提供视觉上的反馈。jQuery中内置的一批淡入、擦除之类的效果，以及制作新效果的工具包，为此提供了便利。$('div.details').slideDown();

6、无需刷新页面从服务器获取信息

这种编程模式就是众所周知的Ajax（AsynchronousJavaScript and XML，异步JavaScript和XML），它是一系列在客户端和服务器之间传输数据的强大技术。jQuery通过消除这一过程中的浏览器特定的复杂性，使开发人员得以专注于服务器端的功能设计，从而得以创建出反应灵敏、功能丰富的网站。$('div.details').load('more.html #content');

7、简化常见的JavaScript任务

除了这些完全针对文档的特性之外，jQuery也改进了对基本的JavaScript数据结构的操作（例如迭代和数组操作等）。

$.each(obj, function(key, value) {
total += value;
});

jQuery为什么如此出色

1、利用CSS的优势

通过将查找页面元素的机制构建于CSS选择符之上，jQuery继承了简明清晰地表达文档结构的方式。由于进行专业Web开发的一个必要条件是掌握CSS语法，因而jQuery成为希望向页面中添加行为的设计者们的切入点。

2、支持拓展

为了避免特性蠕变，jQuery将特殊情况下使用的工具归入插件当中。创建新插件的方法很简单，而且拥有完备的文档说明，这促进了大量有创意且有实用价值的模块的开发。甚至在下载的基本jQuery库文件当中，多数特性在内部都是通过插件架构实现的。而且，如有必要，可以移除这些内部插件，从而生成更小的库文件。

3、抽象浏览器不一致性

Web开发领域中一个令人遗憾的事实是，每种浏览器对颁布的标准都有自己的一套不太一致的实现方案。任何Web应用程序中都会包含一个用于处理这些平台间特性差异的重要组成部分。虽然不断发展的浏览器前景，使得为某些高级特性提供浏览器中立的完美的基础代码（code base）变得不大可能，但jQuery添加一个抽象层来标准化常见的任务，从而有效地减少了代码量，同时，也极大地简化了这些任务。

4、总是面向集合

当我们指示jQuery找到带有collapsible类的全部元素，然后隐藏它们时，不需要循环遍历每一个返回的元素。相反，.hide()之类的方法被设计成自动操作对象集合，而不是单独的对象。利用这种称作隐式迭代（implicit iteration）的技术，就可以抛弃那些臃肿的循环结构，从而大幅地减少代码量。

5、将多重操作集于一行

为了避免过度使用临时变量或不必要的代码重复，jQuery在其多数方法中采用了一种称作连缀（chaining）的编程模式。这种模式意味着基于一个对象进行的多数操作的结果，都会返回这个对象自身，以便为该对象应用下一次操作。

第一个jQuery驱动的页面

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="Scripts/jquery-1.8.2.js"></script>
    <script src="Scripts/jquery-1.8.2.min.js"></script> 
    <style type="text/css">
        body {
            background-color: #fff;
            color: #000;
            font-family: Helvetica, Arial, sans-serif;
        }

        h1, h2, h3 {
            margin-bottom: .2em;
        }

        .poem {
            margin: 0 2em;
        }

        .highlight {
            background-color: #ccc;
            border: 1px solid #888;
            font-style: italic;
            margin: 0.5em 0;
            padding: 0.5em;
        } 

    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var item = $('div.poem-stanza');
            item.addClass("highlight");
        });
    </script>
</head>
<body>
    <h1>Through the Looking-Glass</h1>
    <div class="author">by Lewis Carroll</div>
    <div class="chapter" id="chapter-1">
        <h2 class="chapter-title">1. Looking-Glass House</h2>
        <p>
            There was a book lying near Alice on the table,
            and while she sat watching the White King (for she
            was still a little anxious about him, and had the
            ink all ready to throw over him, in case he fainted
            again), she turned over the leaves, to find some
            part that she could read, <span class="spoken">
                "&mdash; for it's all in some language I don't know,"
            </span> she said to herself.
        </p>
        <p>It was like this.</p>
        <div class="poem">
            <h3 class="poem-title">YKCOWREBBAJ</h3>
            <div class="poem-stanza">
                <div>sevot yhtils eht dna ,gillirb sawT'</div>
                <div>;ebaw eht ni elbmig dna eryg diD</div>
                <div>,sevogorob eht erew ysmim llA</div>
                <div>.ebargtuo shtar emom eht dnA</div>
            </div>
        </div>
        <p>
            She puzzled over this for some time, but at last
            a bright thought struck her. <span class="spoken">
                "Why, it's a Looking-glass book, of course! And if
                I hold it up to a glass, the words will all go the
                right way again."
            </span>
        </p>
        <p>This was the poem that Alice read.</p>
        <div class="poem">
            <h3 class="poem-title">JABBERWOCKY</h3>
            <div class="poem-stanza">
                <div>'Twas brillig, and the slithy toves</div>
                <div>Did gyre and gimble in the wabe;</div>
                <div>All mimsy were the borogoves,</div>
                <div>And the mome raths outgrabe.</div>
            </div>
        </div>
        </div>
</body>
</html>

View Code

接下来我们来分析这几行代码

1、查找诗歌文本

jQuery中基本的操作就是选择文档中的某一部分，这是通过$()函数来完成的。通常，该函数需要一个字符串参数，参数中可以包含任何CSS选择符表达式。在这个例子中，我们想要找到带有poem-stanza类的所有<div>元素，因此选择符非常简单。这里用到的$()函数会返回一个新的jQuery对象实例，它是我们从现在开始就要打交道的基本的构建块。jQuery对象中会封装零个或多个DOM元素，并允许我们以多种不同的方式与这些DOM元素进行交互。

2、加入新类

本例中，.addClass()方法的作用是不言而喻的，这个方法唯一的参数就是要添加的类名。现在，这个例子只是简单地添加了highlight类，而我们的样式表中为这个类定义的是带边框和灰色背景的斜体文本样式。我们注意到，无需迭代操作就能为所有诗歌中的节添加这个类。前面我们提到过，jQuery在.addClass()等方法中使用了隐式迭代机制，因此一次函数调用就可以完成对所有选择的文档部分的修改。

3、执行代码

综合起来，$()和.addClass()对我们修改诗歌中文本的外观已经够用了。但是，如果将这行代码单独插入文档的头部，不会有任何效果。通常，JavaScript代码在浏览器初次遇到它们时就会执行，而在浏览器处理头部时，HTML还不会呈现样式。因此，我们需要将代码延迟到DOM可用时再执行。通过使用$(document).ready()方法，jQuery支持我们预定在DOM加载完毕后调用某个函数，而不必等待页面中的图像加载。尽管不使用jQuery，也可以做到这种预定，但$(document). ready()为我们提供了很好的跨浏览器解决方案，涉及如下功能：

 尽可能使用浏览器原生的DOM就绪实现，并以window.onload事件处理程序作为后备；
 可以多次调用$(document).ready()并按照调用它们的顺序执行；
 即便是在浏览器事件发生之后把函数传给$(document).ready()，这些函数也会执行；
 异步处理事件的预定，必要时脚本可以延迟执行；
 通过重复检查一个几乎与DOM同时可用的方法，在较早版本的浏览器中模拟DOM就绪
事件。
.ready()方法的参数可以是一个已经定义好的函数的引用，如下所示：

function addHighlightClass() {
$('div.poem-stanza').addClass('highlight');
}
$(document).ready(addHighlightClass);