jquery入门级jQuery对象与dom对象之间的转换

首先解释一下DOM-document object model ，中文解释为文档对象模型。任何一个html都可以看做是一个dom树型结构。

我们可以通过getElementsByTagName()和getElementsId()方法去获取对应的dom元素。这些方法都是dom模型提供的内置方法。

而jquery对象是通过jquery框架包装dom对象之后的新对象，本质上是一个普通的JavaScript对象，该对象包含了dom对象的集合。所以dom对象可以看做是一个单一的个体，jquery对象看作是dom对象集合的对象，虽然他们都是dom对象但是不能直接相互调用。但是可以相互转化。

1.jquery对象转为dom对象

<script type="text/javascript" src="jquery/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(function(){
var $li = $("li"); //返回jquery对象
var li = $li[0]; //返回dom对象这里也可以用$li.get(0)
alert(li.innerHTML); //调用dom内置方法
})
</script>
</head>
<body>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>
</body>

2.dom对象转为jquery对象

<script type="text/javascript" src="jquery/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(function(){
var li = document.getElementsByTagName("li"); //获取dom对象
var $li = $(li[2]); //获取jquery对象
alert($li.html());
})
</script>
</head>
<body>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>
</body>

注：getElementsByTagName方法获取的是一个真正的dom数组，但是jquey只是一个类数组，不是真正的意义上的数组类型。