[jQuery] 介紹
什麼是jQuery?
jQuery是一套跨瀏覽器的JavaScript函式庫，簡化HTML與JavaScript之間的操作。
jQuery主要的目的是讓JavaScript可以更簡單更方便的使用。
jQuery將許多JavaScript需要多行程式碼才能執行的效果包裝於jQuery的方法中。便可以用更少行數的程式達到想要的效果，簡化程式。
如何使用jQuery?
有兩種方式可以將jQuery加入至網頁中:
-
在jQuery官方網站中下載後，放入專案。
-
加入CDN
下載jQuery
到jQuery.com，點選Download the compressed, production jQuery 3.1.1下載。
下載的檔案為JavaScript檔，將檔案放置專案並在HTML中加入參考
<head>
<script src="jquery-3.1.1.min.js"></script>
</head>
jQuery CDN
若不想下載jQuery，也可以在HTML中加入CND，以下為Google與Microsoft的jQuery CND
Google CDN:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
Microsoft CDN:
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
</head>
jQuery的語法
jQuery的語法可以用來選取HTML元素，並對該元素執行操作。
基本的語法為:$(selector).action()
-
$ 符號表示為jQuery語法
-
(selector) 表示指定的HTML元素
-
action() 表示在HTML元素要執行的操作
jQuery在選取HTML元素時的語法與CSS相同，例如:
$(this).hide() - 隱藏當前的HTML元素。
$("p").hide() - 隱藏所有<p>元素。
$(".test").hide() - 隱藏所有class為test的元素。
$("#test").hide() - 隱藏id為test的元素。
jQuery Selectors
jQuery selectors可以用來選取與操作HTML元素。selectors語法為$()，括號中為要選取HTML元素。
jQuery可以依照HTML元素的名稱、class、型態、屬性來選取，在選取HTML元素時的語法與CSS相同。
選取HTML元素
選取<p>元素:
<!DOCTYPE html>
<html>
<head>
<script src="~/Scripts/jquery-3.1.1.min.js"></script>
<script>
$(function () {
$("button").click(function () {
$("p").hide();
});
});
</script>
</head>
<body>
<h2>jQuery</h2>
<p>第一個p標籤</p>
<p>第二個p標籤</p>
<button>按下隱藏p標籤</button>
</body>
</html>
$("button").click() jQuery選取到HTML元素<button>，並對button的click動作進行操作。
$("p").hide() jQuery選取到HTML元素<p>並執行hide()方法，隱藏<p>標籤。
初始畫面:
按下按鈕後，隱藏<p>標籤:
選取id名稱
選取標籤內id屬性的名稱:
<!DOCTYPE html>
<html>
<head>
<script src="~/Scripts/jquery-3.1.1.min.js"></script>
<script>
$(function () {
$("button").click(function () {
$("#second").hide();
});
});
</script>
</head>
<body>
<h2>jQuery</h2>
<p id="first">第一個p標籤</p>
<p id="second">第二個p標籤</p>
<button>按下隱藏p標籤</button>
</body>
</html>
$("button").click() jQuery選取到HTML元素<button>，並對button的click動作進行操作。
$("#second").hide() jQuery選取到HTML元素<p id="second">並執行hide()方法，隱藏<p id="second">標籤。
初始畫面:
按下按鈕後，隱藏id="second"的<p>標籤:
選取Class名稱
選取標籤內的class名稱:
<!DOCTYPE html>
<html>
<head>
<script src="~/Scripts/jquery-3.1.1.min.js"></script>
<script>
$(function () {
$("button").click(function () {
$(".class_A").hide();
});
});
</script>
</head>
<body>
<h2>jQuery</h2>
<p id="first" class="class_A">第一個p標籤</p>
<p id="second" class="class_B">第二個p標籤</p>
<button>按下隱藏p標籤</button>
</body>
</html>
$("button").click() jQuery選取到HTML元素<button>，並對button的click動作進行操作。
$(".class_A").hide() jQuery選取到HTML元素<p id="first" class="calss_A">並執行hide()方法，隱藏<p id="first" class="calss_A">標籤。
初始畫面:
按下按鈕後，隱藏class="class_A"的<p>標籤:
更多的jQuery Selectors:
語法 |
描述 |
|---|---|
$("*") |
選取所有HTML元素 |
$(this) |
選取當前的HTML元素 |
$("p.intro") |
選取所有clss為"intro"的<p>標籤 |
$("p:first") |
選取第一個<p>標籤 |
$("ul li:first") |
選取第一個<ul>中的第一個<li> |
$("ul li:first-child") |
<ul>選取每一個<ul>中的第一個<li> |
$("[href]") |
選取所有的href屬性 |
$("a[target='_blank']") |
選取有target屬性為"_blank"的<a> |
$("a[target!='_blank']") |
選取有target屬性不為"_blank"的<a> |
$(":button") |
選取所有type為"button"的<button>及<input> |
$("tr:even") |
選取<tr>中的偶數 |
$("tr:odd") |
選取<tr>中的基數 |