1.js獲取DOM物件

var btn = document.getElementById("btnShowDiv");
var divs = document.getElementsByTagName("div");

DOM物件的方法和屬性

domObject.innerHTML = "dom物件設定文字";
domObject.style.display= "block";//dom物件顯示物件
domObject.onclick = function() {}//dom物件繫結事件
domObject.value;//dom物件的值

2.jQuery獲取物件

$("div");//標籤選擇器返回的jquery物件
$("#btnShowDiv");//id選擇器返回的jquery物件
 

jQuery物件的方法

var $obj = $("div");
$obj.html("jquery物件設定文字的方法");
$obj.show();//jquery物件顯示文字
$obj.click(function() {});//jquery物件繫結事件
$obj.val();//jquery物件的值

3.jQuery物件與DOM物件的轉換

jQuery物件和DOM物件可以相互轉換，但是兩個物件的函式不能彼此混搭使用。

DOM物件轉換成jQuery物件，語法：jQuery(dom物件)或$(dom物件)

var $obj = $(domObj);
// $(document).ready(function(){});就是典型的DOM物件轉jQuery物件
 

jQuery物件轉換成DOM物件，語法：$username[index]

//其實jQuery物件轉DOM物件的實質就是取出jQuery物件中封裝的DOM物件
var $li = $(“li”);
//第一種方法（推薦使用）
$li[0]
//第二種方法
$li.get(0)

4.js頁面載入

window.onload = function(){
    alert("js頁面載入");
}

jquery頁面載入

$(document).read(function(){
    alert("jQuery頁面載入");
});

或

$(functon(){
    alert("jquery頁面載入");
});