安安，今天打算開始寫幾日的Jquery，新手時期有短暫學過，不過那時還未接觸js，所以其實有點不明白原理為何，總之就是把語法背下來就能用一行程式碼搞定了...於是打算在學了一陣js後再回頭重新把Jquery的筆記寫好，明白其原理，所以最初始的如何載入那些就會直接跳過囉：）

什麼是Jquery？

jQuery是一套跨瀏覽器的JavaScript函式庫，簡化HTML與JavaScript之間的操作，好處是原本可能要寫幾十行的程式碼，但使用Jquery就能快速解決，就是一個讓你加速網頁程式開發速度的工具。

Jquery程式語法

$("選擇條件").動作(參數)

根據特定的條件選擇元素：Tag/class/id/query

$(document).ready(初始化)
//也可簡化成
$(初始化)

➤selector 特殊選取方法(只寫自己需要的)

• class：.title.white.small（同時有這三個） / .title .white.small（title裡面的同時有white與small）， 這兩者之間要小心空格，空一格就差很多！
• *：ul.balls * （ul.balls裡面的元素都會被選取）
• first-child / last-child：

1.ul li:first-child（選取ul清單裡面li的第一個項目）

2.last-child最後一個項目

• nth：

1.選取第幾個，ul li:nth-child(3)，代表選取第三個li

2.週期性選擇，.balls:nth-child(5n+1)，代表每隔五個的第一個（EX:1.2.3.4.5，第一個會被選取）

• attr：根據屬性做選擇，a[href*='http']
• even / odd：偶數跟奇數的元素，table tr:even 偶數列

➤更改內容

• $("selector").html(文字)

例：$("div.title").html(Hello!

• $("selector").text(文字)

兩者的差別在於，如果用text的話，只會單純呈現你的原始碼，不會做渲染。

➤更改內容：裡面也可以放函數

• $("selector").html(函數回傳文字)

例：$("div.title").html(function(i){return i})

範例題：

<ul id="board">
	<li></li>  //計算完的結果 num:0
	<li></li>  //計算完的結果 num:1
	<li></li>  //計算完的結果 num:2
</ul>

$("board").html(function(index){
	return "num:"+index
})

• $("selector").text(函數回傳文字)

例：$("div.question").text(function(i){return "n"+ i}

➤更改css / attr

• $("selector").css(屬性,值)

例：$(".bg").css("background-color","white")

• $("selector").attr(屬性,值)

例：$("a").attr("href","http://www.")

➤顯示 / 隱藏

可以接兩個參數也可不接，不接的話就是立即顯示/隱藏

• $("selector").show(秒數,callback)
• $("selector").hide(秒數,callback)

例：

$(".alert").show(500,function(){
	setTimeout(function(){
	$(".alert").hide(500)
},1000)
})

➤更改class

• $("selector").addClass(class名稱) ：新增class

例：$(".btn").addClass("btn-primary")

• $("selector").removeClass(class名稱) ：移除class
• $("selector").toggleClass(class名稱) ：不確定這元素上面是否有這個class，不想再判斷的話，使用toggle→沒有的話就開啟，有的話就取消

例：$(".btn").toggleClass("active")，如果原本沒有active class就會加入，有的話就會抽掉。

那麼今天的筆記就告一段落，明日再繼續寫囉！