jQuery --(2)jQuery對象 vs DOM對象

時間 2019-11-06

標籤 jquery 對象 dom 欄目 JQuery 简体版

原文原文鏈接

jQuery對象與DOM對象的關係：
1.jQuery對象是經過jQuery($())包裝DOM對象後產生的對象。
2.jQuery 沒法使用DOM對象的任何方法，反之，DOM對象也不能使用jQuery裏的方法。
3.共同約定：若是獲取的是jQuery對象，那麼要在變量以前加上$。javascript

jQuery對象轉DOM對象
1.jQuery對象是一個數組對象，能夠經過[index]的方法獲取DOM對象。
2.使用jQuery中的get(index)方法獲取DOM對象。html

DOM對象轉jQuery對象
1.只須要使用$()將DOM對象包裝起來便可。java

實例代碼以下：node

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<!-- 導入 jQuery庫  -->
<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
<script type="text/javascript">
	//$(function(){})至關於window.onload
	$(function(){
		//1.選取對象，如:$("對象id")
		//2.爲對象添加響應函數，如：$("對象id").函數
		$("button").click(function() {
			//函數體
			alert("Hello world");
			//彈出選取對象信息，使用this，這裏的this很明顯表明的是button
			alert($(this).text());
			
			//jQuery對象 轉 DOM對象
			//1.獲取一個jQuery對象
			var $btn = $("button");
			//2.jQuery對象是一個數組
			//很明顯body裏面有兩個button，因此這裏彈框顯示2
			alert($btn.length);
			//3.經過[index]方式獲取DOM對象
			//很明顯btn[0]對應的節點值是 click
			alert($btn[0].firstChild.nodeValue);
			
			//DOM對象 轉 jQuery對象
			//1.選取一個DOM對象
			var btn = document.getElementById("btn");
			//2.將DOM對象轉成jQuery對象，使用$()進行包裝
			alert($(btn).text());
			
		})
	})
</script>
</head>
<body>
	<button id="btn">click</button>
	<button>click2</button>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。