[jQuery] 介紹

[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>中的基數

 

 END 

回目錄