iT邦幫忙

4

jQuery 筆記 (三) – 基本使用語法

divaka 2012-05-19 16:16:2110643 瀏覽

JQuery 的好處就是可以幫你處理掉許多原本 JavaScript 要自己手調的地方,並加速開發進度,基本上 JQuery 會跟 JavaScript 寫在一起,而非

僅用本文章紀錄 JQuery 的基本語法
加入 JQuery

<script type="text/javascript" src="../js/plugin/jquery.js"></script>

只要用以上語法就可以將整個 JQuery plugin 抓進來使用了,其中 jquery 指的是其檔案名稱,依版本不同可能會有差異

另外,也可以透過 Google 的空間來引入外掛 (但速度可能較慢)

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">google.load("jquery", "1.3");</script>

加入 JQuery 外掛

您也可以新增其他 JQuery 外掛,例如 alert 外掛,你可以從 此頁下載,並在 HTML 當中新增 import 項目,即可使用。

<script type="text/javascript" src="../js/plugin/jquery.alerts.js"></script>

基本語法

語法皆為 $(selectors) ,依中的選擇器之不同,取出不同的元素,例如:

$("div") :選取所有的 <div>
$("#content") :選取所有 id 為 content 的元素
$("div.contents a") :選取所有 content 底下所有被 <a></a>所包住的元素
$("body > p") :選取被 body 包住的下一層 div ,即 <p> 標籤
$("div:has(p)") :選取至少有出現一次 <p> 的 <div>
$("tr:first") :選取第一個找到的 <tr> 標籤元素
$("input[name='newsletter']") :取得其name屬性值為newsletter的input元素

id selector 與 class selector

我覺得 CSS 與 Javascript 裡面最容易搞混的就是 id 與 class 了…以下語法分別可以取出 id 與 class 值
例如以下 html 代碼:

<p class="navbar">Class 選擇器。</p>
<p id="navbar">id 選擇器。</p>

id selector :

$("#navbar"); // 取出「id選擇器」

class selector:

$(".navbar"); // 取出「class選擇器」

與 DOM、CSS 之對應語法

前一篇 有談到 DOM 的架構及取值之方法,JQuery 的語法更為簡潔,例如原本的 JS 語法為:

document.getElementsByTagName("a");

即取得HTML當中所有 <a> 的元素,而改寫成 JQuery 將會是

$("a");

再看一個 id selector 的範例 例如我們想取得 id 為 content 的元素,我們會用 JS 的語法如下:

document.getElementById("content");

改寫成 JQuery 將會是:

$("#content");

選取元素

基本上 JQuery 是用 $ 來當作取出物件資料的記號,例如原本可能的 HTML 內容如下:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">google.load("jquery", "1.3");</script>

0

加入 JQuery 以下語法,選取所有有 target 屬性的 <a> 標籤

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">google.load("jquery", "1.3");</script>

1

執行 JQuery 語法之後,原本上面那句話就會變成:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">google.load("jquery", "1.3");</script>

2

修改 CSS 屬性

JQuery 也可使用 $(“div”) 來選取 div 元素,例如原本的 HTML 內容如下:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">google.load("jquery", "1.3");</script>

3

使用 JQuery 改變其 CSS 屬性,語法如下:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">google.load("jquery", "1.3");</script>

4

則顯示的 HTML 內容將變成:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">google.load("jquery", "1.3");</script>

5

可以配合事件加入,加強互動,例如以下範例讓使用者按下 header 區塊時,即變更背景顏色:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">google.load("jquery", "1.3");</script>

6

串接技巧 (Chaining)

利用串接的技巧,可以巧妙的簡化語法,例如原本可能是以下兩段函式

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">google.load("jquery", "1.3");</script>

7

可以改寫成

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">google.load("jquery", "1.3");</script>

8

將 JQuery 元素取出的值丟給 JS

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">google.load("jquery", "1.3");</script>

9

將 JS 取出的值丟給 JQuery

<script type="text/javascript" src="../js/plugin/jquery.alerts.js"></script>

0

參考資料:

http://jsgears.com/thread-63-1-1.html
http://webdesign.kerthis.com/jquery/
http://webdesign.kerthis.com/jquery/jquery\_basics


1 則留言

0
kmo67143
iT邦新手 5 級 ‧ 2021-02-18 10:34:22

請問為什麼後面的截圖都一樣了QQ
看不到後面的語法無法學習,感恩~

我要留言

立即登入留言