jQuery

jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。现在就来了解一下它吧！

如何获取元素

使用jQuery的第一步，通常就是将一个选择表达式，放进构造函数jQuery()（简写为$），然后得到被选中的元素。

选择表达式可以是CSS选择器：

$(document) // 选择整个文档对象

$('#myId')  // 选择 id 为 myId 的网页元素

$('.myClass') // 选择 class 为 myClass 的网页元素

$('input[name=first]') // 选择name属性等于first的input元素

选择表达式可以是jQuery特有的表达式：

$('a:first') //选择网页中第一个a元素

$('tr:odd') //选择表格的奇数行

$('#myForm:input') // 选择表单中的input元素

$('div:visible') //选择可见的div元素

$('div:gt(2)') // 选择所有的div元素，除了前三个

$('div:animated') // 选择当前处于动画状态的div元素

如何创建元素

在jQuery中创建元素非常简单，把要创建的新元素的字符串内容放入jQuery构造函数内就可以了：

$('<div class="first">123</div>')

$('ul').append('<div>456</div>')

在DOM提供的方法中，innerHTML、insertAdjacentHTML也是接受一个字符串来创建新元素。

如何移动元素

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

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

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

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

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

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

使用这种模式的操作方法，一共有四对：

.insertAfter()和.after()：在现存元素的外部，从后面插入元素

.insertBefore()和.before()：在现存元素的外部，从前面插入元素

.appendTo()和.append()：在现存元素的内部，从后面插入元素

.prependTo()和.prepend()：在现存元素的内部，从前面插入元素

如何修改元素的属性

.attr('title') // 获取title属性的值

.attr('title','hello world') // 设置title属性的值

.attr('title',fn) // fn 是一个函数，它的返回值作为设置title的属性值

jQuery中利用函数参数个数的不同来达到实现不同功能的方式，称之为“函数重载”

jQuery的链式操作是怎样的

jQuery中的链式操作是非常令人称道的，它的原理在于每一步的操作，返回的都是一个jQuery对象，所以不同的操作是可以连在一起的。

$('div').find('.one').addClass('two').html('hello world!')

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

$('div').find('.one')       // 找到类名为one的元素
        .addClass('two')    // 给one添加一个类名two
        .end()              // 回到 div
        .addClass('three')  // 个 div 添加一个类名 three

jQuery初探