在使用 jQuery 的过程中,有时我们又想使用 DOM 对象的方法或属性,这个时候就需要将 jQuery 对象转化为 DOM 对象。在 jQuery 中,将一个 jQuery 对象转化为 DOM 对象有两种方法:一种是“下标方式”,另一种是“get() 方法”。
图 2:get()方法的效果
语法:
//方法1
$()[n]
//方法2
$().get(n)
这里,$()
表示的是你获取的 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 所示。
图 2:get()方法的效果
由于 get() 方法的参数省略了,因此$("li").get()
获取的是一个 DOM 元素集合。如果想要获取第 1 个 li 元素,我们可以使用$("li").get(0)
来实现。下面两行代码其实是等价的。
$("li").get(0) $("li")[0]
不过应注意一点,上面两行代码获取的结果都是 DOM 对象,而不再是 jQuery 对象了。
原创文章,作者:奋斗,如若转载,请注明出处:https://blog.ytso.com/23921.html