1.获取元素

将一个表达式放入jQuery()构造函数中，可简写为$()

首先，可以是css选择器

$(doucument)   //选择整个文档
$(body) //选择body
$('#id')  //通过id选择相应的元素
$('.class') //通过class选择相应的元素

也可以是jQuery特有的表达式

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

之后，还可以再对选择元素进行进一步筛选，缩小范围

$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').filter('.myClass'); //选择class等于myClass的div元素
$('div').first(); //选择第1个div元素
$('div').eq(5); //选择第6个div元素

也可以移动到选择元素的相关元素

$('div').next('p'); //选择div元素后面的第一个p元素
$('div').parent(); //选择div元素的父元素
$('div').closest('form'); //选择离div最近的那个form父元素
$('div').children(); //选择div的所有子元素
$('div').siblings(); //选择div的同级元素

2.链式操作

jQuery进行操作后，由于返回的都是一个含有各种方法的jQuery对象，所以又可以对选择的元素再进行操作，这样的代码以链条的形式写出来，就是链式操作，例如

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

分解后就是以下这样

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

并且jQuery还提供了.end()方法，使选择的元素可以往后退一步

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

3.创建元素

创建元素跟选择元素一样，不过就是将表达式换为你要创建的元素，然后再操作

$('<div></div>').insertBefore($('p')) //将创建的div插入到p标签之前

4.移动元素

jQuery提供了四对方法

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

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

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

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

5.给元素取值和赋值

jQuery会根据你输入参数数目的不同来决定你是要取值还是赋值
例如

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

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

.html() 取出或设置html内容

.text() 取出或设置text内容

.attr() 取出或设置某个属性的值

.width() 取出或设置某个元素的宽度

.height() 取出或设置某个元素的高度

.val() 取出某个表单元素的值

6.事件操作

jQuery将事件直接绑定到网页元素上

$('div').click(()=>{
    alert('hello');
    })

同样其他的事件也可直接绑定到元素上，但这只是简写方法，我们也可以用.on()方法给被选元素和子元素绑定一个或多个事件,on方法的好处是可以给动态的元素绑定事件

$(selector).on(event,childSelector,data,function);

$(document).on( 'click', '#myBtn'//若省略子元素则在被选元素上绑定事件，不省略则在子元素上绑定事件
, function(){//data参数可以省略
	alert('点击事件');
})

总结自阮一峰的博客以及网络资料

jQuery简单功能