写在前面的话：为了简写，本文会用$符号替代jQuery，实现方法为window.$ = window.jQuery
jQuery 如何获取元素
jQuery的设计思想和主要用法均为：选择传递的页面元素，然后对这个元素进行操作，所以jQuery获取元素的第一步是先把要操作的元素表达式，放进构造函数$()中。[值得一提的是：这里面的构造函数并没有用到new关键字,所以可以直接用const api = $('选择表达式')]
- 选择表达式可以是CSS选择器
$(document) //选择整个文档对象
$('#test') //选择id为test的网页元素
$('.test') //选择class为test的网页元素
$('input[name = test]') //选择name
属性为test的input元素
- 也可以是jQuery特有的表达式
$('a:first') //选择网页中第一个a元素
$('tr:odd') //选择表格的奇数行
$('#myForm :input') // 选择表单中的input元素
$('div:visible') //选择可见的div元素
$('div:gt(2)') // 选择所有的div元素，除了前三个
$('div:animated') // 选择当前处于动画状态的div元素
此时请注意，jQuery返回的并不是查找到的元素，而是返回一个api对象，用来操作这个元素
jQuery 的链式操作是怎样的
由于jQuery的返回值不是元素而是一个api（jQuery）对象，所以可以把之后对此对象进行的一系列操作连接起来，并以一个链条的形式写出来，比如
$('div').find('.test').addClass('.blue').end()
这个操作分解下来就是
let api =$('div')//首先找到div元素
let api2 = api.find('.test')//选择div元素中class为test的元素
api2.addClass('.blue')//向api2的class上添加blue
api2.end()返回到api操作，这时候的对象为api
jQuery 如何创建元素
jQuery提供了两个函数来创建元素一个是append()一个是appendTo(),其中append()的实现方法是目的元素在前，创建元素在后
$('.test').append('<span>这是一个span标签</span>')//往class为test的元素中插入span标签
appendTo()是创建元素在前，目的元素在后
$('<span>这是一个span标签</span>'').appendTo('.test')
jQuery 如何移动元素
jQuery一共提供了两种方法来移动元素
- 直接移动
$('div').insertAfter($('P'))//把div元素移动到p元素的后面
- 移动其他元素，使得目标元素置于我们想要的位置
$('p').after($('div'))
虽然这两种方法达到的效果相同，但是返回的元素是不同的，第一个返回的是div元素，第二个返回的是p元素 使用这种操作模式方法一共有四对
.insertAfrer()和.afer()//在现存元素外部，在后面插入元素
.insertBefore()和.before()//在现存元素外部的前面插入元素
.appendTo()和.append()//在现存元素的内部从后面插入元素
.prependTo()和.prepend()在现存元素的内部，从前面插入元素
同时jQuery也提供了在DOM树上的移动方法
$('div').next()//div元素后面的第一个元素
$('div').parent()//div元素的父元素
$('div').children()//div元素的所有子元素
$('div').siblings()//div的同级元素
jQuery 如何修改元素的属性
常见的修改元素属性的函数
$('div').text()//读写div元素的text的内容
$('div').html()//读写div元素的html内容
$('div').attr()//读写div的属性
$('div').css({color:'red'})//读写style
值得注意的是如果结果集是多个元素，则在写操作的时候，会将所有选中元素进行操作，但是进行读操作的时候，则大部分情况只取出第一个元素的值，text（）会取出所有元素的text内容
本文参考阮一峰的jQuery设计思想
