----------
Syntax                   Description 
$("*")                   Selects all elements. 
$(this)                  Selects the current HTML element.
$("p.intro")             Selects all <p> elements with class="intro".
$("p:first")             Selects the first <p> element.
$("ul li:first")         Selects the first <li> element of the first <ul>. 
$("ul li:first-child")   Selects the first <li> element of every <ul>.
$("[href]")              Selects all elements with an href attribute. 
$("a[target='_blank']")  Selects all <a> elements with a target attribute value equal to "_blank". 
$("a[target!='_blank']") Selects all <a> elements with a target attribute value NOT equal to "_blank". 
$(":button")             Selects all <button> elements and <input> elements of type="button". 
$("tr:even")             Selects all even <tr> elements. 
$("tr:odd")              Selects all odd <tr> elements.

document.getElementById('contents'); //returns a HTML DOM Object
var contents = $('#contents');  //returns a jQuery Object
var contents = $('#contents')[0]; //returns a HTML DOM Object

----------
jQuery to DOM:

var container = $("#container").get(); /* 轉換為真實 DOM 元素集合 */
var containers = $(".containers").get(0);
$("#container").get(0).style.display = "none";
或，
var container = $("#container")[0];

如： 
$("#container").get(0).style.display = "none";

----------
DOM to jQuery:
jQuery(elements);
或
$(elements);

如： 
$(document.getElementById("id"));

----------
document.getElementById: 根據傳入的值，找到 DOM 中 id 為該值的元素。
	document.getElementById('contents'); //returns a HTML DOM Object
	var contents = $('#contents');  //returns a jQuery Object
	var contents = $('#contents')[0]; //returns a HTML DOM Object

	var container = $("#container").get();
        $("#container").get(0).style.display = "none";
	var container = $("#container")[0].style.display = "none";

document.getElementsByTagName: 傳回一個陣列，陣列內元素為 tag 名稱符合傳入的參數。
	var pCollection = document.getElementsByTagName("p");
	var pQuery = $("p");
	console.log("pCollection.length: ", pCollection.length);
	console.log("pQuery.length: ", pQuery.length);


document.getElementsByName: 傳回一個陣列，陣列元素的 name 屬性值符合傳入的參數。
	var test = document.getElementsByName('tableName');
	var test = $("[name='tableName']");
----------
document.getElementById("link").href; 
document.getElementById("link").target; 
document.getElementById("img").src; 
document.getElementById("img").width; 
document.getElementById("img").height; 
document.getElementById("input").value; 
document.getElementById("div").innerHTML; 
document.getElementById("link").innerHTML; 

	var e1 = document.getElementById("DIVMessage");
	if (!e1) {
		var s1 = e1.getAttribute("style");
		
		if (s1 == "display: block;")
			e1.setAttribute("style", "display: none;")
		else
			e1.setAttribute("style", "display: block;");
	} else 
	{
		alert("can't find DIVMessage.");
	}

/* 轉換為真實 DOM 元素集合 */
var container = $("#container").get();

/*
  取得 $(".containers") 元素集合裡的第X個 DOM 元素
  get後面接的是索引值，索引值由0開始
*/

var containers = $(".containers").get(0);
或，您也可以這樣
var container = $("#container")[0];

我們再來看看，可以正確執行的 Code 應該是這樣的： 
$("#container").get(0).style.display = "none";


----------
jQuery 選取元素 (Selectors)
jQuery 最基本的中心思想就是以「選取 DOM 元素為開始」，接著就是對它們作一些事。 
jQuery 在選取元素方面採用 CSS 選擇器的語法 (CSS1、CSS2、CSS3)，
此外透過 plugin 你也可以使用 XPath 語法，
我們直接看幾道範例你就會明白怎麼在 jQuery 中用 CSS Selectors 選取元素：
 
語法 (Syntax)
$(selectors);

tag selector

jQuery 中 
$("a"); // 取得頁面中所有的<a>標籤元素

JS DOM 中 
document.getElementsByTagName("a");

CSS 中 
a {}



id selector

jQuery 中 
$("#container"); // 取得id為container的元素

JS DOM 中 
document.getElementById("container");

CSS 中 
#container {}


class selector
jQuery 中 
$(".content"); // 取得class name為content的所有元素

JS DOM 中 
document.getElementsByClassName("content");
// FF3、或自己實作這個函式

CSS 中 
.content {}




同樣道理，CSS中有的你都能依樣畫葫蘆

jQuery 中 
$('#container a'); // 取得id為container之元素其內部的所有連結 

CSS 中 
#container a {}

jQuery 中 
$("div > p"); // 取得div父元素其下所有的p子元素 

CSS 中 
div > p {}

jQuery 中 
$("tr:first"); // 取得第一個找到的tr標籤元素 

CSS 中 
tr:first {}

jQuery 中 
$("input[name='newsletter']"); // 取得其name屬性值為newsletter的input元素 

CSS 中 
input[name='newsletter'] {}



jQuery Selectors 取回的元素之型態？
jQuery 物件 ($) 會將匹配到的元素以「陣列」型態返回一個 jQuery 物件，
也就是說你可以像下面這樣取得被匹配到元素的個數： 
// 選取到幾個<a>？
$('a').length;
$('a').size();


jQuery 物件 → 實際 HTML DOM 元素
正如上述，取得的元素是一個 jQuery 物件，
因此如果我們作下面這樣操作是會產生錯誤的：
$("#container").style.display = "none";

WHY？
因為 style is not defined。(jQuery 物件沒 style 這屬性，因為它不是 DOM 物件嘛！)

jQuery 物件只能使用 jQuery 的方法；
而 DOM 物件只能使用 DOM 物件的方法。

如果你想操作實際的 DOM 元素怎麼辦？ 
jQuery 提供下面的方法來處理這問題： 

/* 轉換為真實 DOM 元素集合 */
var container = $("#container").get();

/*
  取得 $(".containers") 元素集合裡的第X個 DOM 元素
  get後面接的是索引值，索引值由0開始
*/

var containers = $(".containers").get(0);
或，您也可以這樣
var container = $("#container")[0];

我們再來看看，可以正確執行的 Code 應該是這樣的： 
$("#container").get(0).style.display = "none";



DOM 物件 → jQuery 物件
反過來，如果你想將 DOM 轉為 jQuery 物件，只要將 DOM 傳入「$()」: 

jQuery(elements);
或
$(elements);

如： 
$(document.getElementById("id"));