jQuery 是 2006 年推出的一个高效、精简并且功能丰富的 JavaScript 工具库，它提供的 API 易于使用且兼容众多浏览器，并且现在仍有超过 85% 的网页在使用 jQuery。
虽然现在前端开发中使用的框架更多的是 Vue 、 React 和 Angular，但是我们还是有必要学习 jQuery，学习 jQuery 的思想对我们写代码和封装库很有帮助。
1. jQuery 如何获取元素
jQuery 获取元素的方式通常是将一个选择表达式放入构造函数 jQuery()（简写为$）中，这样我们就得到了被选中的元素。
jquery(document) //选择整个文档对象
$(document) //选择整个文档对象
$('#ThisIsId') //选择 id 为 ThisIsId 的网页元素
$('div.ThisIsClass') //选择 class 为 ThisIsClass 的div元素
$('input[name=first]') //选择 name 属性等于 first 的 input 元素
2. jQuery 的链式操作是怎样的
jQuery 的链式操作是指 jQuery 选中了某个网页元素后，可以对它进行多次操作，并以链条的形式写出来,如下面的代码所示。
$('div').find('child').add('red').text('This is text')
//分解出来等价于
$('div') //找到 div 元素
.find('child') //选择 div 元素中 class 为 child 的元素
.add('red') //给 class 为 child 的元素添加 red 这个 class
.text('This is text') //将 class 为 child 的元素的文本内容改为 This is text
3. jQuery 如何创建元素
jQuery 创建元素只需要将新元素直接传入 jQuery 的构造函数中就行。
$('<p>Hello</p>') //创建一个内容为 Hello 的 p 标签
$('<li class="newClass">New List</li>') //创建内容为 New List，class 为 newClass 的 li 标签
$('ul').append('<li>New Li</li>') //创建 ul 标签并将内容为 New Li 的 li 标签作为 ul 标签的子元素
4. jQuery 如何移动元素
jQuery 移动元素有两种方法，一是直接移动目标元素，二是通过移动其他元素来间接让目标元素到达我们想要的位置。
下面通过将一个 div 元素移动到 p 元素的后面的例子来说明这两种方法。
//使用 .insertAfter() 将 div 元素移动到 p 元素后面
$('div').insertAfter($('p')
//使用 .after 将 p 元素加到 div 元素前面
$('p').after($('div')
5. jQuery 如何修改元素的属性
- .attr() ：获取匹配的元素集合中的第一个元素的属性的值或设置每一个匹配元素的一个或多个属性
console.log($('div').attr('id')) //将第一个 div 元素的 id 的值打印出来
$('div').attr('class','newClass') //给每一个 div 元素设置一个值为 newClass 的 class
- .removeAttr() ：为匹配的元素集合中的每个元素移除一个属性
$('div').removeAttr('class') //将每一个 div 元素的 class 属性移除掉
- .prop() ：获取匹配的元素集中第一个元素的属性值或设置每一个匹配元素的一个或多个属性
$('div').prop('id') //获取第一个 div 的 id 的值
$('div').prop('class','newClass') //将每一个 div 的 class 设置为 newClass
