为什么要学习jQuery

jQuery 作为一个非常简单、经典的库，可以作为学习Vue / React之前的过渡。它让你了解业界最通用的技术，为将来学习更高级的库打下基础 。

本篇博客参考阮一峰的《jQuery设计思想》

jQuery的核心思想

选择某个网页元素，然后对其进行某种操作
jQuery(选择器) 用于获取对应的元素，但它却不return这些元素。相反，它返回一个对象，称为 jQuery 构造出来的对象，这个对象可以操作对应的元素。

选择页面元素

jQuery通过赋值将jQuery可以简写为$。选取元素就是调用jQuery函数（下面简称为$符）来选取，$中传递的参数是一个CSS选择器

  1.     $(document)   //选择整个文档对象
  2.     $('#myId')    //选择ID为myId的网页元素
  3.     $('div.myClass')   // 选择class为myClass的div元素
  4.     $('input[name=first]')   // 选择name属性等于first的input元素

参数也可以是jQuery特有的表达式

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

改变结果集

在获取元素之后可以对获取的结果集合进行过滤操作，jQuery提供了很多的过滤器来缩小选择范围

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

也可以从结果集出发，找到结果集的父元素，子元素和兄弟元素

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

链式操作

在获取元素之后返回的不是所获取的元素，而是一个可以操作获取元素的对象，这个对象的原型里面有一些可以操作获取元素的API，这些API被调用后返回的还是这个可以操作获取元素的对象，这就是我认为jQuery设计的精妙之处。
以链式编程写出来的形式就是：

  1. //$('div')函数获取了div元素之后返回的是一个可操作元素的对象，这个对象的原型链上有find()函数
  2. //这个find函数返回的还是这个可以操作对象的API，所以就可以链式编程
  3. $('div').find('h3').eq(2).html('Hello');

适配器

下面的这个适配器简单来说就是就是同一个函数根据所传的参数不同，数量不同来执行不同的操作，比如下面这个函数是修改和获取一个节点的属性和属性值：

  1. attr(node, name, value) {
  2.     if (arguments.length === 3) {
  3.       node.setAttribute(name, value);
  4.     } else if (arguments.length === 2) {
  5.       return node.getAttribute(name);
  6.     }
  7.   },

这个函数根据所传的参数数量不同而执行不同的操作，当所传的参数为三个的时候就修改这个节点的属性，当所传递的参数个数为2的时候就返回这个节点的属性值。
jQuery中也有这种设计，将取值器和赋值器和一。

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

常见的取值器和赋值器如下：

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

元素的移动

在DOM操作中要把一个元素移动到另一个元素的前面或者后面是一个很麻烦的操作，jQuery中就提供了两种方法来移动元素，一组方法是直接移动该元素，另一组方法是移动其他元素，使得目标元素达到我们想要的位置。
假定我们选中了一个div元素，需要把它移动到p元素后面。第一种方法是使用.insertAfter()，把div元素移动p元素后面

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

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

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

表面上看，这两种方法的效果是一样的，唯一的不同似乎只是操作视角的不同。但是实际上，它们有一个重大差别，那就是返回的元素不一样。第一种方法返回div元素，第二种方法返回p元素。你可以根据需要，选择到底使用哪一种方法。

事件操作

jQuery有和DOM一样的绑定事件的方法：

  1. $('p').click(function(){
  3. 　　　　alert('Hello');
  5. 　　});

jQuery还支持以下的事件：

  1.   　.blur() 表单元素失去焦点。
  3. 　　.change() 表单元素的值发生变化
  5. 　　.click() 鼠标单击
  7. 　　.dblclick() 鼠标双击
  9. 　　.focus() 表单元素获得焦点
  11. 　　.focusin() 子元素获得焦点
  13. 　　.focusout() 子元素失去焦点
  15. 　　.hover() 同时为mouseenter和mouseleave事件指定处理函数
  17. 　　.keydown() 按下键盘（长时间按键，只返回一个事件）
  19. 　　.keypress() 按下键盘（长时间按键，将返回多个事件）
  21. 　　.keyup() 松开键盘
  23. 　　.load() 元素加载完毕
  25. 　　.mousedown() 按下鼠标
  27. 　　.mouseenter() 鼠标进入（进入子元素不触发）
  29. 　　.mouseleave() 鼠标离开（离开子元素不触发）
  31. 　　.mousemove() 鼠标在元素内部移动
  33. 　　.mouseout() 鼠标离开（离开子元素也触发）
  35. 　　.mouseover() 鼠标进入（进入子元素也触发）
  37. 　　.mouseup() 松开鼠标
  39. 　　.ready() DOM加载完成

也可以使用.bind()方法来同时绑定多个事件：

  1. 　$('input').bind(
  3. 　　　　'click change', //同时绑定click和change事件
  5. 　　　　function() {
  7. 　　　　　　alert('Hello');
  9. 　　　　}
  11. 　　);

也可以用.unbind(),来取消事件的绑定

  1. $('p').unbind('click');

jQuery也提供了只让事件触发一次的方法.one();

  1. 　$("p").one("click", function() {
  3. 　　　　alert("Hello"); //只运行一次，以后的点击不会运行
  5. 　　});