3分钟迅速读懂jQuery

概念

正如你在百度查到的：jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）

不过我还是得提一句，简单点说：jQuery设计封装了JavaScript常用的功能代码，它的本质就是为了让我少写代码，不重复写代码。当你会了jQuery，那么vue和react也就是顺其自然的事了，他们的原理是一样的。

---

获取元素

首先我们需要通过jQuery获取元素，没有它的时候，你将要不厌其烦的ElementSelector()，不过当你使用jQuery，我们可以直接用 $() 这位老哥来了：

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

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

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

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

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

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

---

链式操作

可以说，jQuery的精髓就在这里了，原生的JS我们需要赋予变量对象，并添加众多属性才能对一个拥有多层结构的元素进行操作，而jQuery却可以以链条的形式进行操作，十分方便：

$('div').find('h').eq(3).html('forever love');

以上代码可以解释为：

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

.find('h') //选择其中的h元素

.eq(3) //选择第4个h3元素(index从0开始)

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

---

增删查改

对于任何的库，增删查改移都是基本操作

增

增加新元素，直接将新元素放入$()即可

$('<p>666</p>')

删

删除的方法有两种，分别是 .remove 和 .detach。

前者删除即完全移除，后者删除后仍保留在内存中方便调用

如果你不想删除该元素而只是清空它的内容，那么可以使用 .empty()

改

这一步往往针对内容

html(): //读取修改元素的标签体内容  
text(): //读取修改元素的标签体纯文本内容 
val(): //读取修改元素的value属性值

移

移动有两种方法，假设我们要将a元素移到b元素后面。

一种是“自己动”，即直接移动你要操作的元素：

$('a').insertAfter($('b'));

另一种是“别人动”，即移动其他元素：

$('b').after($('a'));

如果你想了解更多，我建议你可以看看阮一峰的《jQuery设计思想》