一、背景

当我写出以下代码：

var $allButtons = $('#buttons>span')
$allButtons[n % 4].trigger('click')

运行之后报错：

Uncaught TypeError: $allButtons[(n % 4)].trigger is not a function

报错的原因是在DOM元素上调用了jquery对象的方法。
$allButtons[index]、$allButtons.get(index)获取的是该jquery对象下的dom元素，所以$allButtons[n % 4]获取到的是DOM对象，不能用.trigger()（jQuery的方法）
改正：$allButtons.eq(n % 4).trigger('click')

.eq():Given a jQuery object that represents a set of DOM elements, the .eq() method constructs a new jQuery object from one element within that set.

二、详解DOM对象、JavaScript对象、jQuery对象

2.1 DOM对象

DOM全称 Document Object Model，即文档对象模型，是W3C组织推荐的处理可扩展置标语言的标准编程接口。它允许脚本(js)控制Web页面、窗口和文档。

• DOM实际上是以面向对象方式描述的文档模型。HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。
• 通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。
• HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。

2.2 JavaScript对象

• 对象是JS的一种数据类型。JS提供多个内建对象（由对应构造函数生成），比如 String、Date、Array 等等。
• 对象只是带有属性和方法的特殊数据类型。
• 通过JS获取的DOM对象就是JS对象
• 当浏览器支持JS的DOM接口(api)时，这里狭义的DOM对象是以JS对象的形式出现的，也就是一个JS对象。

2.3 jQuery对象

1）概述
jQuery对象其实是一个JavaScript的数组,这个数组对象包含125个方法和4个属性
4个属性分别是：

• jquery 当前的jquery框架版本号
• length 指示该数组对象的元素个数 .
• context 一般情况下都是指向HtmlDocument对象 .
• selector 传递进来的选择器内容

jquery对象是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，其可以使用jQuery里的方法，但是不能使用DOM的方法;反过来Dom对象也不能使用jquery的方法。

2.4 jQuery对象与DOM对象/JS对象的相互转换

• jQuery对象和DOM对象/JS对象区别：
  1） jQuery对象属于JS的数组
  2）jQuery对象是通过jQuery包装的DOM对象后产生的
  3）jQuery对象不能使用DOM对象的方法和属性
  4）DOM对象不能使用jQuery对象的方法和属性
  例如:

//获取id为foo的元素内的html代码
$("#foo").html(); // jquery
//等同于
document.getElementById("foo").innerHTML;

var $obj = $("#id"); //jQuery对象;
var domObj = document.getElementById("id"); //DOM对象

$("#id").innerHTML 和$("#id").checked之类的写法都是错误的，可以用$("#id").html()和$("#id").attr ("checked")之类的 jQuery方法来代替。学习jQuery开始就应当树立正确的观念，分清jQuery对象和DOM对象之间的区别，之后学习 jQuery就会轻松很多的。

• jQuery对象和JS对象之间的相互转换：
  1）JS对象/DOM对象-->jQuery对象 :$el=$(el)
  2）jQuery对象-->JS对象/DOM对象:el=$el[0] 或el=$el.get(0)
  转换后就可以任意使用jquery中的方法了

通过以上的方法，可以任意的相互转换jquery对象和dom对象，最后再次强调，dom对象才能使用dom中的方法，jquery对象不可以使用dom中的方法，但 jquery对象提供了一套更加完善的工具用于操作dom。
建议如果获取的对象是 jquery对象，那么在变量前面加上$,表示这些是jquery对象,例如:
var $variable = jquery对象;
如果获取的是dom对象，则定义如下:
var variable = dom对象

一些好的参考博文：
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
DOM是什么？有什么用处？js与DOM啥关系？