jQuery 是一个由约翰.雷西格（John Resig）在2006年发布的一款用于简化 HTML 和 JavaScript 之间操作的数据库。目前全球绝大部分的网站都有使用，是当前最受欢迎的 JavaScript库。虽然已经过去了十多年，但是还是有较高的学习价值。

jQuery的使用

jQuery将一些常用的操作，封装成 API 以供调用。这里简单说下一些常用的 API 使用

元素的获取

可以使用 css 中的表达方式

  1. $(document)  //此操作可以获取网页上的所有元素
  2. $('xxx') //可以找到网页上面所有 id 为 'xxx'的元素
  3. $('.xxx') //此为找到所有 class 属性为 'xxx'的元素

还可以对得到的结果进行筛选过滤

  1. $('div').not('.hi')  //选择 class 属性不等于 'hi' 的 div 元素
  2. $('div').filter('.hi') // 选择 class 属性为 'hi' 的 div 元素
  3. $('div').first() //选择第一个 div 元素
  4. $('div').has('span') // 选择含有 span 元素的 div 元素
  5. $('div').next() //获取 div 的下一个元素
  6. $('div').siblings() // 获取 div 的兄弟姐妹
  7. $('div').parent() // 获取 div 的父元素
  8. $('div').chindren()//获取 div 的子元素
  9. $('div').prev() // 获取 div 的上一个元素
  10. $('div').each(fn) // 遍历这个 div ，可以添加一个可执行的函数 fn

jQuery的链式操作

获取到想要操作的元素之后，就可以使用一些 API 对元素的一些属性进行修改。并且可以将多个操作连接起来，写在一起，这便是链式操作

  1. $('div').find('.red').index()
  3. 分解执行为：
  5. $('div') //找到 div 元素
  6.     .find('.red') //在 div 中找到 class 属性为 red 的元素
  7.     .index() //返回它在 div 中的排名

读取 or 赋值

在使用一些 API 的时候，还可以根据传入不同的参数，决定这个函数执行 读取 或者赋值

  1. $('span').text() //text()如果不设置参数的话，意为读取 span 中的内容
  2. $('span').text('Hello,world') //加上参数的话，意为将这个参数赋值给 span
  4. 常见的这类函数有
  5. .html() //读取或者设置html内容
  6. .text() //读取或者设置文本内容
  7. .attr() //读取或者设置某属性的值
  8. .width() //读取或设置宽度
  9. .height() //读取或设置高度
  10. .val() //读取某个表单元素的值

元素的创建、移动、删除

创建元素时，可以直接将元素按照 HTML 的语法格式，传进函数中。也可以决定将元素添加至哪里

  1. $('<span>Hi</span>')
  2. $('div')appendTo('<span>Hi</span>')

元素的移动

  1. .insertAfter()  .after():在现元素的外面 后面插入元素
  2. .insertBefore()  .before():在现元素的外面 前面插入元素
  3. .apendTo()  .append():在现元素的内部 后面插入元素
  4. .prependTo()  .prepend(): 在现元素内部 前面插入元素

删除一个元素

  1. .remove():删除元素,不再保留事件
  2. .datach():删除元素但是保留事件,以便后续重新调用
  3. .empty():清空元素内容

待补充~~