导论

jQuery虽然出来的时间比较早，但是它目前是框架界中的“廉颇老将”，它是集合了高效、精简、功能丰富为一体的工具库。它所提供的API易于使用并且兼容众多浏览器，这便使得HTML文档的遍历和操作、事件的处理、动画、Ajax操作更加简单。接下来请大家欣赏它的真容！

1.选择网页中的元素

风格：选择某个网页元素，然后对其进行某种操作！

第一步：选择表达式

第二步放进构造函数里边

示例1：

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

示例2：

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

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

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

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

$('div:gt(2)') // 选择所有的div元素，除了前三个
$('div:animated') // 选择当前处于动画状态的div元素

2.链式操作

选中网页元素以后，可以对它进行一系列操作，所有操作都可以连接在一起，如链条的形式写出来。最大的优势就是方便！

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

//分解
$('div')//找到div元素

.find('hejiajin')//找到其中的hejiajin元素

.eq(2)//选择第二个hejiajin的元素

.html('Hello')//将它的内容改写为Hello

.end() //退回到选中所有的h3元素的那一步

.eq(0) //选中第一个h3元素

.html('World'); //将它的内容改为World

3.移动

操作元素在网页中的位置移动。

第一种方式：移动该元素

第二种方式：移动其他元素

举个栗子: 我们选中了一个div元素，需要把它移动到p元素后面。

是使用.insertAfter()，把div元素移动p元素后面：

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

2.是使用.after()，把p元素加到div元素前面：

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

表面上看，这两种方法的效果是一样的，但是唯一的不同只是操作视角的不同。但是实际上，它们有一个重大差别，那就是返回的元素不一样。第一种方法返回div元素，第二种方法返回p元素。

使用这种模式的操作方法，有如下方式：

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

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

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

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

4.元素：创建、复制、删除

复制元素使用

.clone()。

删除元素使用

.remove()
.detach()。

两者的区别在于，前者不保留被删除元素的事件，后者保留，有利于重新插入文档时使用。

清空元素内容（不删除该元素）

.empty()

创建元素直接传入jQuery的构造函数

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

总结

本文写了jQuery 的一些基本用法，我们现在学它的目的，是为了更好学习其它框架，如果一个学不会jQuery 的前端工程师，你有何脸面学习Vue和react等丰富功能的框架。不过要提醒的一点是：jQuery虽然上手简单，但是想拔高很是有难度的。前端工程师的常态：不是在学新知识，就是在准备学新知识的路上。加油！

jQuery浅析

导论