jQuery简要介绍

jQuery由约翰·雷西格（John Resig）在2006年1月的BarCamp NYC上发布第一个版本,是世界上使用最广泛的库，全世界80%的网站都在使用。
jQuery是一个快速，小型且功能丰富的JavaScript库，它通过易于使用的API（可在多种浏览器中使用），简化HTML与JavaScript之间的操作。

什么是$

$是对jQuery 函数的简称，更方便、简洁，在jQuery源代码中，我们会结尾处发现以下内容：

  1. // Expose jQuery to the global object
  2. window.jQuery = window.$ = jQuery;

当调用$()函数并将选择器传递给它时，将创建一个新的jQuery对象。当然，在JavaScript中，函数也是对象，因此，这意味着$（jQuery当然还有）也具有属性和方法。

获取元素

我们可以使用jQuery做的最简单的事情是获取元素并对其进行处理,获取元素非常简单：只需将适当的选择器传递给即可$()。
选择表达式可以是CSS选择器：

  1. $(document) //选择整个文档对象
  2. $('#myId') //选择ID为myId的网页元素
  3. $('div.myClass') // 选择class为myClass的div元素
  4. $('input[name=first]') // 选择name属性等于first的input元素

也可以是jQuery特有的表达式：

  1. $('a:first') //选择网页中第一个a元素
  2. $('tr:odd') //选择表格的奇数行
  3. $('#myForm :input') // 选择表单中的input元素
  4. $('div:visible') //选择可见的div元素
  5. $('div:gt(2)') // 选择所有的div元素，除了前三个
  6. $('div:animated') // 选择当前处于动画状态的div元素

链式操作

jQuery最终选中网页元素以后，可以对它进行一系列操作，并且所有操作可以连接在一起，以链条的形式写出来,这意味着我们可以对选择调用一系列方法，而不必重复选择或将选择存储在变量中。我们甚至可以根据以前的选择做出新的选择，而不会中断整个链。

  1. $('div').find('h3').eq(2).html('Hello');

分解开来，就是下面这样：

  1. $('div') //找到div元素
  2. .find('h3') //选择其中的h3元素
  3. .eq(2) //选择第3个h3元素
  4. .html('Hello'); //将它的内容改为Hello

同时，jQuery还提供了.end()方法，使得结果集可以后退一步：

  1. $('div')
  2. .find('h3')
  3. .eq(2)
  4. .html('Hello')
  5. .end() //退回到选中所有的h3元素的那一步
  6. .eq(0) //选中第一个h3元素
  7. .html('World'); //将它的内容改为World

创建元素

创建新元素的方法非常简单，只要把新元素直接传入jQuery的构造函数就行了,给定一个表示一组DOM元素的jQuery对象，.add（）方法根据这些元素与传递给该方法的元素的并集构造一个新的jQuery对象。
.add（）的参数几乎可以是$（）接受的任何东西，包括jQuery选择器表达式，对DOM元素的引用或HTML代码段。

  1. 　　$('<p>Hello</p>');
  2. 　　$('<li class="new">new list item</li>');
  3. 　　$('ul').append('<li>list item</li>');

移动元素

jQuery设计思想之五，就是提供两组方法，来操作元素在网页中的位置移动。一组方法是直接移动该元素，另一组方法是移动其他元素，使得目标元素达到我们想要的位置。

假定我们选中了一个div元素，需要把它移动到p元素后面。

第一种方法是使用.insertAfter()，把div元素移动p元素后面：

  1. $('div').insertAfter($('p'));

第二种方法是使用.after()，把p元素加到div元素前面：

  1. $('p').after($('div'));

表面上看，这两种方法的效果是一样的，唯一的不同似乎只是操作视角的不同。但是实际上，它们有一个重大差别，那就是返回的元素不一样。第一种方法返回div元素，第二种方法返回p元素。你可以根据需要，选择到底使用哪一种方法。
使用这种模式的操作方法，一共有四对：

  1. .insertAfter()和.after()：在现存元素的外部，从后面插入元素
  2. .insertBefore()和.before()：在现存元素的外部，从前面插入元素
  3. .appendTo()和.append()：在现存元素的内部，从后面插入元素
  4. .prependTo()和.prepend()：在现存元素的内部，从前面插入元素

修改元素的属性

在文档中放置元素

例如，考虑要将列表中的第一个列表项移动到列表末尾的情况。有几种方法可以实现此目的。
可以通过调用.appendTo()列表项将项目追加到列表：

  1. var listItem = $( '#my-unordered-list li' ).first();
  2. listItem.appendTo( '#my-unordered-list' );

可以通过调用列表将项目追加到.append()列表：

  1. var listItem = $( '#my-unordered-list li' ).first();
  2. $( '#my-unordered-list' ).append( listItem );

复制元素

可以使用jQuery的.clone()方法复制一个元素或一组元素，但是注意，该副本仅在内存中,需要将其自己放置在文档中。可以在将克隆的元素放入文档之前对其进行操作。

  1. var clones = $( 'li' ).clone();
  3. clones.html(function( index, oldHtml ) {
  4.   return oldHtml + '!!!';
  5. });
  7. $( '#my-unordered-list' ).append( clones );

移除元素

有三种方法可以从文件中删除元素：.remove()， .detach()，和.replaceWith()。每种方法都有特定的用途。
.remove()方法应用于永久删除元素，不保留被删除元素的事件；
.detach()方法对于临时从文档中删除元素很有用；
.replaceWith()方法用作为参数传递给.replaceWith（）的元素或HTML替换一个或多个元素，和.remove()方法一样，它不保留被删除元素的事件。

参照文献

阮一峰《jQuery设计思想》
jQuery 中文文档
《jQuery基础》