需要上課的人員：
題目１：
HTML的DOM如下
下方的空格應填入什麼值才能取得上方的DOM。
用id取得DOM→$(" ")，用class取得DOM→$(" ")
答案：用id取得DOM→$("#geren")，用class取得DOM→$(".selected")（答案已反白）
題目２：
假設有一個CSS Selector如下：
div#meanList > div
請試著寫出對應的DOM架構。
答案：<div id="meanList"> <div></div> </div>（答案已反白）
javascript與jQuery
Javascript是一種在前端（使用者端）執行的一種程式語言，而主要負責編譯與執行的工具，則是瀏灠器；不過瀏灠器有各個廠商在開發，例如：Chrom、Firefox、IE等，因為是由各個廠商開發自行開發，所以很有可能會發生「相同的javascript會有不同的結果」（實際真的發生過）；所以開發人員在寫javascript時，必須先判斷目前使用者的瀏灠器為何，才能針對該瀏灠器撰寫對應的語法。
因為這個問題困擾了太多寫javascript的開發人員了，所以有善心人士開發了一套framework，讓它來對應各種瀏灠器版本，而開發人員則可以專心在程式的邏輯上，而這套語法，就是jQuery。
所以jQuery就是站在javascript的基礎上發展的一套framework。
CSS Selector
不管是javascript或是jQuery，重點都是在處理前端元素的DOM（Document Object Model，也可以理節為XML的節點），而HTML的DOM這麼多，要如何告訴程式去操控那一個DOM，就變得需要有點技巧。
jQuery使用了CSS Selector的方式來讓使用者指定要執行的DOM，所以在瞭解jQuery之前，必須先瞭解CSS Selector。
CSS Selector主要類別
CSS Selector簡單可以區分為三大類，分別為
-
HTML標籤
即是<body>，<div>這一類的標籤，在CSS Selector中是直接宣告即可選擇，範例：$("div")，回傳結果為DOM陣列。
-
class類
HTML中有屬性class的DOM，也可透過直接宣告的方式取得，不過宣告的前方必須帶「.」，範例：$(".myclass")，回傳結果為DOM陣列。
-
id類
HTML中有屬性id的DOM，也可透過直接宣告的方式取得，不過宣告的前方必須帶「#」，範例：$("#myid")；這邊有一點要注意的，通常id在整頁HTML中是唯一值，所以在CSS Selector選擇後的回傳結果為單一的DOM，而非陣列；如果在HTML中有二個以上有相同id的DOM，則只會取最先抓到的DOM回傳。
CSS Selector輔助類別
CSS除了主要類別外，還有一些輔助的功能，而這些輔助類別大多是符號或是符號開頭，簡單說明如下：
-
,（逗號）
為「OR」的意思，例如$("body,.selected")，這個CSS Selector會回傳body與class為selected的DOM。
-
（無）
為「AND」的意思，例如：$(".selectd.myclass")，注意中間並無空格，此時會回傳包含class屬性有selected與myclass的DOM。
-
>（大於）
這個是「兒子」的意思，這個符號後方需要再接一個CSS Selector，例如：$(".selected > li")，回傳的DOM為li的DOM，要注意，是兒子的li，且它的父親必需有class屬性且包含selected。
-
[]（中括號）
這個部份指的是屬性的意思，代表這個DOM需要有某個屬性，例如：$("input[name]")，則回傳的DOM為input的HTML標籤並含有name的屬性。
-
=（等於）
這個符號是用在[]裡面的，指的是這個屬性必需等於某一個值，例如：$("input[type=hidden]")，所以回傳的DOM為HTML的input標籤，並且type屬性為hidden的DOM。
-
*=（近似於）
這個符號跟=很接近，不過它多了一個*符號，所以它會查詢對應的屬性值，如果DOM的值包含我們宣告的值，那麼這個DOM就會被回傳；例如有DOM如下：
<input type="hidden" id="test1" value="test1" />
<input type="hidden" id="test2" value="test2" />
<input type="hidden" id="test3" value="test3" />
則可以利用$("input[id*=test]")來取得所有的
-
:（冒號）
:的用法比較特別，:後面必須要接關鍵字，例如：:has、:nth-child等，因為可以接的東西不少，這邊只介紹比較常用的數種。
-
:has(CSS selector)
用來取出包含特定CSS Selector的DOM，例如：$("a:has(>img)")，回傳img標籤的DOM，並且其父親為a的標籤。
-
:not(CSS select)
與:has用法相同，不過回傳為不包含特定CSS Selector的DOM。
-
:nth-child(n)
回傳第n個child的DOM，例如：$("li:nth-child(2)")回傳第二個li的DOM。
-
:chekced
回傳包含checked屬性的DOM，通常用在取得使用者選擇的radio或checkbox上，例如：$("input:checked")。
-
還有:first-child，:last-child，:selected等，有非常多這種:的CSS Selector可以使用，有請大自行Google。
常用的jQuery語法
簡單介紹完CSS Selector後，接下來我們就可以來看jQuery了。jQuery基本上也是javascript，所以在使用jQuery，必須先告知瀏灠器，這個網頁要使用jQuery，要如何告知呢？就是把jQuery官網上所提供的jQuery的JS檔import到網頁上，如下圖：
import完後，在這個網頁上即可使用jQuery的語法了，我們來介紹常用的jQuery語法。
val
取得或設定input的value。這個語法只能套用在input、sleect、textarea的DOM上，而根據有沒有帶參數，來決定要取得或是設定範例：
$("input[name=username]").val()→回傳這個input的值。
$("input[name=username]").val('myname') →設定這個input的值，並回傳DOM。
attr
取得或設定DOM屬性。根據傳入參數的數量，決定要取得或設定屬性，例如：
$("img").attr("src")→回傳img的src屬性內容。
$("img").attr("src","abc.jpg")→設定img的src屬性，並回傳DOM。
removeAttr
移除DOM的屬性，並回傳DOM。例如：$("a").removeAttr("target")。
css
取得或設定DOM的style。根據傳入參數的數量，決定要取得或設定，例如：
$("img").css('display')→回傳DOM中的style屬性內，display的值。
$("img").css('display','none')→設定DOM中的style屬性內，display的值，並回傳DOM。
addClass、removeClass、hasClass
操控DOM中class屬性的內容；因為一個DOM中可以有多個class，所以如果利用attr('class')這種方式設定的話，會將所有class屬性的值一次全部替換掉，所以需要利用addClass、removeClass的方式來實作，才不會影響class屬性中已存在的其他值。而hasClass則是用來判斷這個DOM中的class屬性是否有包含對應的值。範例：
$("img").addClass("myClass")→新增myClass的值至DOM的class屬性，並回傳DOM。
$("img").removeClass("myClass")→從DOM中的class屬性移除myClass的值，並回傳DOM。
$("img").hasClass("myClass")→判斷DOM中是否的class屬性是否包含myClass的值，回傳boolean值。
each
針對陣列的內容做操控，另一種迴圈的處理。有二種用法：
範例一：
$( "li" ).each(function( index ) {
console.log( index + ": " + $( this ).text() );
});
範例二：
$.each($("li"), function( index ) {
console.log( index + ": " + $( this ).text() );
});
data
data這個功能是HTML5才有的，主要是讓HTML中的DOM可以有自訂的內容；例如在一堆相似的DOM中，我們想要知道使用者指令的是那一筆資料，通常會在這個DOM中夾帶一些參數，讓我們程式有個依據，可以進行判斷。不過HTML的標籤是公訂的，所以自訂的標籤其實會在IDE（例如：Eclipse）中被判斷為不合法的，會被標示出來；為了讓使用者可以更廣泛在DOM中夾帶客制化的資料，所以發展了data這個屬性，用法如下：
<input type="text" data-mydata="forUserEmail" />
其中data-後方帶的內容為任意值，而資料也是開發人員自訂。
jQuery也幫data做了一個可以快速存取的方法，就是data，用法如下：
$("input").data("mydata")→回傳這個DOM的data-mydat屬性的值。
$("input").data("mydata","forUserEmail")→設定這個DOM的data-mydata的屬性，並回傳DOM。
ajax
jQuery將AJAX簡化為一個function，並接任對應的屬性，詳細可參考jQuery官網的AJAX說明。
jQuery chain
看了上方的常用jQuery後，可能會有一個疑問，那就是：為什麼它要回傳DOM回來呢？其實是為了簡化程式。假設我們想要針對一個DOM操控二個動作，分別是設定css與設定attr，那麼正式的寫法要分成二段：
$("input").css('display','none');
$("input").attr("type","hidden");
不過因為第一行的程式回傳值即為$("input")，所以其實這二段寫法可以簡法為一段，變成：
$("input").css('display','none').attr("type","hidden");
變成像是chain（鏈）一樣。因為這樣的寫法可以節省很多程式碼，所以常常被使用，下方為一段較長的jQuery chain範例：
cloneVar.find('#replyFakeSubmit')
.attr("id", "replyFakeSubmit" + data.id)
.data("sentimentsId", data.id)
.click(function() {
var datas = {
"sentiments.id" : $(this).data("sentimentsId"),
"sentiment.message" : $("#replyMessage" + $(this).data("sentimentsId")).val()
};
ajaxPostSentiments(datas, true);
});
留言列表
工具 (1)
