JQ總務處｜jQuery網頁操作｜深入淺出jQuery

前言

接下來會檢視如何上下穿梭於整個 DOM 結構，以及如何操作元素的階層結構與親子關係，並且使用 jQuery 快速改變頁面的結構。

（ 圖片來源 ）

移除事件

jQuery 提供 detach 和 remove 把元素從 DOM 中移除（ 包括它們的子元素 ），那麼兩者的差別在哪呢？

移除 remove

將元素從 DOM 中永遠移除，趕盡殺絕、斬草除根。

$("img#thumbnail").remove();

（ 圖片來源 ）

解除 detach

將元素從 DOM 中拿走並且保留它，就像修剪花木一樣。

$("img#thumbnail").detach();

（ 圖片來源 ）

如果是要去除元素裡的內容而不是元素本身，那可以使用 empty 。

以穿梭方法攀爬 DOM

所謂九淺一深，不論你想淺爬還是深攀， jQuery 都能自由穿梭其中。

（ 圖片來源 ）

<ul class="menu">
    <li class="fish"></li>
    <li class="steak"></li>
    <li class="pork"></li>
    <li class="soup"></li>
</ul>

parent

取得上層元素（ 即父元素 ）。

$(".fish").parent(); // 取得menu

parents

取得上層所有祖先元素，飛向宇宙、浩瀚無垠。

$(".fish").parents();

closest

取得上層所有祖先元素，但是在找到相符項目時就會停止。

$(".fish").closest("ul"); // 取得menu

children

取得下層元素（ 即子元素 ）。

$(".menu").children(); // 取得各li

prev

取得同層且位在前一個的元素。

$(".steak").prev(); // 取得fish

next

取得同層且位在後一個的元素。

$(".pork").prev(); // 取得soup

sublings

取得同層的所有元素。

$(".pork").sublings(); // 取得其他li

用陣列擴充儲存選項

每當我們從 DOM 中選擇元素並且把它們儲存在變數裡時， jQuery 會以陣列的形式回傳它們，陣列即具有更多儲存彈性的變數。

基本的變數儲存一個值

（ 圖片來源 ）

一個抽屜只能儲存一個值，而這個值會存在名稱為 v 的變數裡。

陣列儲存多個值

（ 圖片來源 ）

一個抽屜只能儲存一個值，假如整個陣列（ 櫃子 ）被稱作 $a ，而每個槽位（ 抽屜 ）則被叫作 $a[n] （ n 為從 0 開始的循序數字 ），陣列實際上只是一個能夠存放多個變數的資料結構而已。

我們可以把任一值放置並取出，例如要將 15 的值放進第三個槽位，會寫成 $a[2] = 15 （ 注意：因為編號是從 0 開始的，所以第三個槽位編號為 2 ）

陣列並非一定要以錢號開頭，這是 jQuery 開發者間的約定俗成。

替換元素

replaceWith 將被選擇的內容替換成新的元素，就算內容是 HTML 也可以，但要注意，該元素在進行一對一平等交換時可以運作得很好，當條件改成一對多或多對一時它就罷工了。

// 將所有burger類別的元素都換成小括號裡的內容
$(".burger").replaceWith("<li class='sandwich'>sandwich</li>");

（ 圖片來源 ）

把 HTML 內容插入 DOM

jQuery 提供很多方法把材料插入 DOM 中，包括現在要探討的 before 和 after 。

before 在被選擇的元素「之前」插入內容。

$(".burger").before("<li class='sandwich'>sandwich</li>");

after 在被選擇的元素「之後」插入內容。

$(".burger").after("<li class='sandwich'>sandwich</li>");

以過濾方法縮小選擇

first 只取得第一個元素。

<ul>
    <li>111111</li>
    <li>222222</li>
    <li>333333</li>
    <li>444444</li>
    <li>555555</li>
</ul>

<script>
    $("ul li").first().css('background-color','yellow');
</script>

last 只取得最後一個元素。

<ul>
    <li>111111</li>
    <li>222222</li>
    <li>333333</li>
    <li>444444</li>
    <li>555555</li>
</ul>

<script>
    $("ul li").last().css('background-color','yellow');
</script>

eq 只取得索引值等於小括號內值的元素，值為從 0 開始的循序數字。

<ul>
    <li>111111</li>
    <li>222222</li>
    <li>333333</li>
    <li>444444</li>
    <li>555555</li>
</ul>

<script>
    $("ul li").eq(3).css('background-color','yellow');
</script>

slice 取得小括號內從第一個索引值（ 包含 ）到第二個索引值之前（ 不包含 ）的元素，值為從 0 開始的循序數字。

<ul>
    <li>111111</li>
    <li>222222</li>
    <li>333333</li>
    <li>444444</li>
    <li>555555</li>
</ul>

<script>
    // 從1開始並在3之前停止
    $("ul li").slice(1,3).css('background-color','yellow');
</script>

<script>
    // 從2開始沒設停止
    $("ul li").slice(2).css('background-color','yellow');
</script>

允許傳入負的參數，如果傳遞的是負數，那麼下標位置是從結尾開始的，而不是從起始位置開始。

<script>
    // 從倒數第3個開始並在倒數第1個之前停止
    $("ul li").slice(-3,-1).css('background-color','yellow');
</script>

filter 取得符合小括號裡的選擇器的元素。

<ul>
    <li>111111</li>
    <li>222222</li>
    <li>333333</li>
    <li>444444</li>
    <li>555555</li>
</ul>

<script>
    // 取奇數
    $("ul li").filter(':even').css('background-color','yellow');
</script>

<style>
    div {
        width: 60px;
        height: 60px;
        margin: 5px;
        float: left;
        border: 2px white solid;
    }
</style>

<div></div>
<div class="middle"></div>
<div class="middle"></div>
<div class="middle"></div>
<div class="middle"></div>
<div></div>

<script>
    $("div").css("background", "#c8ebcc")
            .filter(".middle")
            .css("border-color", "red");
</script>

not 取得不符合小括號裡的選擇器的元素。

<ul>
    <li>111111</li>
    <li>222222</li>
    <li>333333</li>
    <li>444444</li>
    <li>555555</li>
</ul>

<script>
    // 不要取奇數
    $("ul li").not(':even').css('background-color','yellow');
</script>

<style>
    div {
        width: 50px;
        height: 50px;
        margin: 10px;
        float: left;
        background: yellow;
        border: 2px solid white;
    }
    .green {background: #8f8;}
    .gray {background: #ccc;}
    #blueone {background: #99f;}
</style>

<div></div>
<div id="blueone"></div>
<div></div>
<div class="green"></div>
<div class="green"></div>
<div class="gray"></div>
<div></div>

<script>
    // 不是綠色或藍色的div
    $("div").not(".green, #blueone")
            .css("border-color", "red");
</script>

我要如何在 jQuery 裡尋找元素？

find 可以在 jQuery 裡尋找元素。

（ 圖片來源 ）

<p><span>Hello</span>, how are you?</p>
<p>Me? I'm <span>good</span>.</p>

<script>
    $("p").find("span").css('color','red');
</script>

jQuery 有將元素包裹在另一個元素內的方法嗎？

wrap 可以接受任何字符串或對象，然後傳遞給該函式來指定一個 DOM 結構。

（ 圖片來源) ）

<div class="container">
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
</div>

<script>
    $('.inner').wrap('<div class="new"></div>');
    // 可寫成 $('.inner').wrap('<div class="new" />');
</script>

結果：

<div class="container">
    <div class="new">
        <div class="inner">Hello</div>
    </div>
    <div class="new">
        <div class="inner">Goodbye</div>
    </div>
</div>

該方法的第二種用法允許我們用函數作參數，該函數返回一個 DOM 元素、 jQuery 對象，或者 HTML 片段，用來包住匹配元素。例如：

<div class="container">
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
</div>

<script>
    $('.inner').wrap(function() {
        return '<div class="' + $(this).text() + '" />';
    });
</script>

結果：

<div class="container">
    <div class="Hello">
        <div class="inner">Hello</div>
    </div>
    <div class="Goodbye">
        <div class="inner">Goodbye</div>
    </div>
</div>

參考資料

1. 深入淺出 jQuery （ Ryan Benedetti, Ronan Cranley 著、楊仁和 譯 ）
2. .slice() : 根据指定的下标范围，过滤匹配的元素集合，并生成一个新的 jQuery 对象。 - jQuery API 中文文档 | jQuery中文网
3. .filter() : 筛选元素集合中匹配表达式 或 通过传递函数测试的 那些元素集合。 - jQuery API 中文文档 | jQuery中文网
4. .not() : 从匹配的元素集合中移除指定的元素。 - jQuery API 中文文档 | jQuery中文网
5. .find() : 通过一个选择器，jQuery对象，或元素过滤，得到当前匹配的元素集合中每个元素的后代。 - jQuery API 中文文档 | jQuery中文网
6. .wrap() : 在每个匹配的元素外层包上一个html元素。 - jQuery API 中文文档 | jQuery中文网