jQuery对象 与 DOM 对象 之间的转换
1.把 jQuery 对象转换 DOM 对象
1.1.借助数组下标来获取 jQuery 对象集合中的某个 DOM 元素对象。
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<script src="../../Library/jquery-3.3.1.min.js"></script>
<script>
$(function(){
var $li = $("li")
var li = $li[0]
alert(li.innerHTML)
})
</script>
</head>
<body>
<ul>
<li>列表 1</li>
<li>列表 2</li>
<li>列表 3</li>
</ul>
</body>
</html>
var $li = $("li")
返回 jQuery 对象
var li = $li[0]
返回 DOM 对象
1.2.借助 jQuery 对象方法,如 get() 方法,为 get() 方法传递一个下标值,即可从 jQuery 对象中取出一个 DOM 对象元素。
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<script src="../../Library/jquery-3.3.1.min.js"></script>
<script>
$(function(){
var $li = $("li")
var li = $li.get(0)
alert(li.innerHTML)
})
</script>
</head>
<body>
<ul>
<li>列表 1</li>
<li>列表 2</li>
<li>列表 3</li>
</ul>
</body>
</html>
var li = $li.get(0)
返回 DOM 对象
2.把 DOM 对象转换 jQuery 对象
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<script src="../../Library/jquery-3.3.1.min.js"></script>
<script>
$(function(){
var li = document.getElementsByTagName("li")
var $li = $(li[0])
alert($li.html())
})
</script>
</head>
<body>
<ul>
<li>列表 1</li>
<li>列表 2</li>
<li>列表 3</li>
</ul>
</body>
</html>
var li = document.getElementsByTagName("li")
获取所有 li 元素
var $li = $(li[0])
把所有 li 元素封装为 jQuery 对象
alert(li.innerHTML)
调用 jQuery 对象的方法