JQuery介紹

JQuery是JavaScript的資料庫，可以讓我們更容易地使用JavaScript。在使用時先下載JQuery檔案，它本身就是一個JavaScript檔案。將下載後的檔案儲存於跟html檔案相同的資料夾內，然後再head標籤內加上以下指令。 <script src="jquery-3.3.1.js"></script> 這樣便可以了。如果不想下載檔案，在head標籤內加上以下兩行中任一行也可以。第一行google host的CDN(Content Delivery Network)，第二行是microsoft。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script> 記得在head內加上<script src="jq1.js"></script>，跟JavaScript一樣，程式碼還是要寫到檔案內。

Document Ready Event

---

JQuery內的函數寫法如下: $(document).ready(function(){ //code... });
原則上就是把函數放在$(document).read();read後的小括號內。這樣可以讓函數在document載入完成之後才開始執行。 >>
$(document).ready(function() { console.log("Hello, World!"); }); 在JavaScript檔案內加上上述函數，按F12看執行結果。
關鍵的$號原則上就是jQuery的簡寫，也就是也可以用jQuery替換掉$號，用$號當然容易些，但在某些$號會與其他內容混淆時可以使用jQuery代替。 >>
jQuery(document).ready(function() { console.log("Hello, Again...!"); }); 還可以使用更簡潔的寫法，直接省略掉(document).ready。 >>
$(function() { console.log("Hello, the third time...!"); });

Selector & Events

---

JQuery可以讓我們快速容易的選擇網頁中的元件，關鍵符號為$()。在小括號內放置CSS selector即可。 >>

• $("p"): 選擇所有p。
• $("#idname"): 選擇id=idname的元件。
• $(".classname"): 選擇class=classname的元件。
• $(this): 選擇目前元件。
• $("*"): 選擇所有元件。
• $("p:first"): 選擇第一個P。
• $("ul li:first"): 選擇第一個ul中的第一個li。
• $("ul li:first-child"): 選擇所有ul中的第一個li。
• $("[href]"): 選擇有href屬性的所有元件。
• $("a[target!='_blank']"): 選擇target屬性不等於_blank的所有a。
• $(":button"): 選擇所有button以及input型態為button的元件。
• $("tr:even"): 選擇所有雙數的tr。
• $("div, p"): 選擇所有div跟p。
• $("p strong, .classname"): 選擇所有包含strong標籤的p跟所有class=classname的元件。

選擇了元件之後，直接在其後加上event，便可呼叫函數來執行，語法為$(selector).event(function);，原則上events與JavaScript Events相同，只要去掉前面的on即可。 >>
<p id="jq1_p1" style="background:pink;">這是一個P，按F12然後點一下看結果</p>
設計一個p，再加上函數如下。
$(document).ready(function() { $("#jq1_p1").click(function(){ console.log("點了一下p"); }); });

這是一個P，按F12然後點一下看結果