代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>1-4</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 引入 jQuery -->
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
//等待dom元素加載完畢.
$(document).ready(function(){
var domObj = document.getElementsByTagName("h3")[0]; // Dom對象
var $jQueryObj = $(domObj); //jQuery對象
alert("DOM對象:"+domObj.innerHTML);
alert("jQuery對象:"+$jQueryObj.html());
alert($jQueryObj.text());
var $jObject = $("#h2");//jQuery對象
var domO = $jObject[0];//dom對象
alert(domO.innerHTML);
});
</script>
</head>
<body>
<h3><a>例</a>子</h3>
<h2 id="h2">hehe</h2>
</body>
</html>
打印結果,彈出對話依次顯示爲:<a>例</a>子、<a>例</a>子、例子、hehe
分析:先通過標籤h3獲取所有h3標籤的dom對象數組取第一個,通過$()將dom對象轉換成了jquery對象。從打印的結果可以看出dom的innerHTML屬性與jquery的html()函數獲取的結果相同,而text()函數則只獲取h3標籤中的文本,h3標籤中包含的其他標籤則過濾。
然後通過id爲h2獲取jquery對象,通過[0]或get(index)方式將jquery對象轉成了dom對象。