jQuery作为前端界的常青树，从2006年发布至今，已经有13年历史，是一个非常长寿的库。

根据 buildwith 网站的统计，目前全世界还有80%的网站在使用jQuery。

到现在，jQuery的确已经过时了，2018年以后，基本上没什么新项目会用jQuery开发。但是里面优雅的API、MVC非常值得新人学习，对以后写其他代码和封装库有很大帮助。

下面是近期学习jQuery的笔记，只需要5步，就可以轻松掌握jQuery 80%的操作。

jQuery基本操作

1.获取元素

在jQuery中，最常用的函数就是直接使用jQuery()，可以直接简写为$()。

如果我想获取css元素：

$(document)  // 获取整个文档对象
$('#item') //选择id为item的网页元素
$('div.content') //选择class为content的div元素
$('input[name-first]') //选择name属性等于first的input元素

还有一种方式，可以获取JS特有的表达式：

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

2.链式操作

选中网页元素之后，可以对其进行一系列操作，并且连接在一起。

比如：

$('div').find('h3').eq(2).html('hello')

分解以后就变成这样：

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

3.创建元素

创建元素，只要把新元素直接传入jQuery的构造函数就行了

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

4.移动元素

jQuery提供两组方法，操作元素在网页中的移动。

一组方法是直接移动该元素。
另一组方法是移动其它元素，让目标元素到达我们想要的位置。

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

第一种方法是使用.insertAfter()：

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

第二种方式是使用.after()，把p元素放到div元素前面:

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

表面上看，这两种方法的效果一致，但实际上，两种方法放回的元素不一样。第一种方法返回div元素，第二种方法返回p元素。

5.修改元素：取值和赋值

jQuery使用同一个函数，来完成取值和赋值。

$('h1').html(); //html()没有参数，表示取出h1的值
$('h1').html('hello'); //html()有参数hello，表示对h1赋值

常见的取值和赋值函数如下：

.html() //取出或设置html内容
.text() //取出或设置text内容
.attr() //取出或设置某个属性的值
.width() //取出或设置某个元素的宽度
.height() //取出或设置某个元素的高度
.val() //取出某个表单元素的值

————————————————

参考来源：

jQuery设计思想，作者：阮一峰

都9012年了，我为什么还学jQuery？