jQuery juery與原生js 的差別

前面我們學習了js的一些基礎，下面我們來看以下jquery

jquery 物件與DOM物件

jQuery物件與DOM物件是不一樣的，下面我們透過一個例子來講解倆者的差異

首先，用原生程式碼，js原生程式碼如下：

var div = document.getElementById('dv');
div.innerHTML ="php 中文網";

以上程式碼，透過原生DOM模型提供的document.getElementById(“dv”) 方法取得的DOM元素就是一個DOM對象，再透過innerHTML與處理文字。

下面我們看jquery的程式碼

##$(function(){

var div = $('#dv');

div.html ("php中文網");

});

透過$('#dv')方法會得到一個$p的jQuery對象，$p是一個類別陣列物件。這個物件裡麵包含了DOM物件的訊息，然後封裝了許多操作方法，呼叫自己的方法html與css，得到的效果與標準的JavaScript處理結果是一致的。

透過標準的JavaScript操作DOM與jQuyer操作DOM的比較

1.透過jQuery方法包裝後的對象，是一個類別陣列物件。它與DOM物件完全不同，唯一相似的是它們都能操作DOM。

2.透過jQuery處理DOM的操作，可以讓開發者更專注業務邏輯的開發，而不需要我們具體知道哪個DOM節點有那些方法，也不需要關心不同瀏覽器的兼容性問題，我們透過jQuery提供的API進行開發，程式碼也會更加精細。

新建檔案

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>jquery</title>
	<style type="text/css">
		#dv{
			width:150px;
			height:150px;
			border:1px solid red;
		}
	</style>
	<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript">
		// window.onload=function(){
		// 	var div = document.getElementById('dv');
		// 	div.innerHTML="php 中文网";
		// }
		$(function(){
			var div = $('#dv');
			div.html("php中文网");
		 });
	</script>
</head>
<body>
	<div id="dv"></div>
</body>
</html>

提交重置程式碼

自動運行

全螢幕