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>

提交重置程式碼

自動運行