在使用 jQuery 的过程中，有时我们又想使用 DOM 对象的方法或属性，这个时候就需要将 jQuery 对象转化为 DOM 对象。在 jQuery 中，将一个 jQuery 对象转化为 DOM 对象有两种方法：一种是“下标方式”，另一种是“get() 方法”。
语法：
这里，$()表示的是你获取的 jQuery 对象。对于 get() 方法来说，get(0) 表示获取第 1 个元素，get(1) 表示获取第 2 个元素，……，依此类推。当参数省略时，表示获取的是一个元素集合。
举例：
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title></title>
- <script src="js/jquery-1.12.4.min.js"></script>
- <script>
- $(function () {
- var $li = $("li"); //获取jQuery对象
- var oLi = $("li").get(); //转换为DOM对象
- oLi.reverse(); //调用数组方法，颠倒元素顺序
- $("ul").html(oLi); //插入元素
- })
- </script>
- </head>
- <body>
- <ul>
- <li>HTML</li>
- <li>CSS</li>
- <li>JavaScript</li>
- </ul>
- </body>
- </html>
预览效果如图 2 所示。
由于 get() 方法的参数省略了，因此$("li").get()获取的是一个 DOM 元素集合。如果想要获取第 1 个 li 元素，我们可以使用$("li").get(0)来实现。下面两行代码其实是等价的。
- $("li").get(0)
- $("li")[0]
不过应注意一点，上面两行代码获取的结果都是 DOM 对象，而不再是 jQuery 对象了。
湘公网安备 43102202000103号
