如何使用jQuery選擇段落內的所有連結？

jQuery是一個流行的JavaScript庫，它簡化了HTML DOM遍歷、事件處理和AJAX互動，從而加快了Web開發速度。它提供了廣泛的內建函式和方法，幫助開發者動態地操作HTML元素、樣式和行為。

在這篇文章中，我們將學習如何使用jQuery選擇段落內的所有連結。選擇段落內的連結是一個常見需求，當我們需要修改網站特定部分的連結（例如更改樣式、查詢連結等）時，就會用到這個技術。

如何選擇段落內的所有連結？

選擇段落內的連結是一項常見任務，因此有多種方法可以在jQuery中選擇段落內的所有連結。讓我們看看一些不同的方法，瞭解jQuery如何有效地完成這項任務，並編寫更高效、更易維護的程式碼。

方法一：使用.children()方法

`.filter()` 方法是jQuery提供的一種方法，允許使用者返回所選元素的所有直接子元素。為了選擇包含錨標籤的段落內的連結，並指定標籤名稱，我們可以使用`children`方法。以下是實現此目的的語法。

語法

$("p").children("a").each(function() { 
   // add your styles 
});

上面給出的語法首先使用`$`函式選擇所有段落元素。之後，它在每個段落元素上呼叫`children()`方法，以檢索其所有後代錨標籤。最後，使用`each()`方法迭代每個連結，僅選擇錨標籤（即<a>標籤）來新增或更改樣式，或執行任何其他操作。

示例

在這個例子中，我們定義了一個按鈕“btn1”，它使用`.children()`方法選擇段落的所有直接子錨標籤。當按鈕被點選時，執行jQuery程式碼，返回所選元素的所有直接子元素，即在我們的例子中，它從段落中返回綠色的文字“Tutorialspoint”。

<html>
   <head>
      <title>Select Links Inside Paragraph Using jQuery</title>
      <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
      <script>
         $(document).ready(function(){
            $("#btn2").click(function(){
               $("span").children("a").each(function(){
                  $(this).css("color", "violet");
               });
            });
         });
      </script>
      <style>
         .find-link-class {
            color: black;
            font-weight: bold;
         }
      </style>
   </head>
   <body>
      <p>
         Welcome to <span><a href="https://tutorialspoint.tw">Tutorialspoint</a></span>. A leading Ed Tech company striving to provide the best 
         learning material on technical and non-technical subjects.
      </p>
      <button id="btn2">Violet Link</button>
   </body>
</html>

方法二：使用.filter()方法

`.filter()` 方法是jQuery提供的一種方法，允許使用者根據特定條件過濾所選元素。為了選擇包含錨標籤的段落內的連結，並檢索這些標籤，我們必須在`filter()`方法中定義標籤名稱。以下是實現此目的的語法。

語法

$("p").find("*").filter("a").each(function(){
   // add your styles
});

上面給出的語法首先使用`$`函式選擇所有段落元素。之後，它在每個段落元素上呼叫`find()`方法，以檢索其所有後代錨標籤。最後，使用`each()`方法迭代每個連結，並使用`filter()`方法僅選擇錨標籤（即<a>標籤）來新增或更改樣式，或執行任何其他操作。

示例

在這個例子中，我們定義了一個按鈕“btn2”，它使用`.filter()`方法選擇段落的所有直接子錨標籤。當按鈕被點選時，執行jQuery程式碼，返回所有連結，即在我們的例子中，它從段落中返回紫色的文字“Tutorialspoint”。

<html>
   <head>
      <title>Select Links Inside Paragraph Using jQuery</title>
      <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
      <script>
         $(document).ready(function(){
            $("#btn1").click(function(){
               $("p").find("a").each(function(){
                  $(this).css("color", "green");
               });
            });
         });
      </script>
      <style>
         .find-link-class {
            color: black;
            font-weight: bold;
         }
      </style>
   </head>
   <body>
      <p>
         Welcome to <span><a href="https://tutorialspoint.tw">Tutorialspoint</a></span>. A leading Ed Tech company striving to provide the best 
         learning material on technical and non-technical subjects.
      </p>

      <button id="btn1">Green Link</button>
   </body>
</html>

方法三：使用.has()方法

`.has()` 方法是jQuery提供的一種方法，允許使用者選擇具有特定後代元素的元素。為了選擇包含錨標籤的段落內的連結並檢索這些標籤，我們可以使用此方法。以下是實現此目的的語法。

語法

$("p:has(a)").find("a").each(function(){
   // add your styles
});

上面給出的語法首先使用`:has()`選擇器選擇所有包含錨標籤的段落。之後，它在每個段落元素上呼叫`find()`方法，以檢索其所有後代錨標籤。最後，使用`each()`方法迭代每個連結，以新增或更改樣式，或執行任何其他操作。

示例

在這個例子中，我們定義了一個按鈕“btn3”，它使用`.has()`方法。當按鈕被點選時，執行jQuery程式碼，該函式選擇所有具有特定後代元素的錨標籤，即從段落中返回紅色的文字“Tutorialspoint”。

<html>
   <head>
      <title>Select Links Inside Paragraph Using jQuery</title>
      <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
      <script>
         $(document).ready(function(){
            $("#btn3").click(function(){
               $("p:has(a)").find("a").each(function(){
                  $(this).css("color", "red");
               });
            });
         });
      </script>
      <style>
         .find-link-class {
            color: black;
            font-weight: bold;
         }
      </style>
   </head>
   <body>
      <p>
         Welcome to <span><a href="https://tutorialspoint.tw">Tutorialspoint</a></span>. A leading Ed Tech company striving to provide the best 
         learning material on technical and non-technical subjects.
      </p>
      <button id="btn3">Red Link</button>
   </body>
</html>

結論

選擇段落內的連結是一項非常簡單的任務，因為它有助於修改Web應用程式特定部分的連結。我們討論了使用jQuery選擇段落內所有連結的不同方法。如上所述，我們學習了三種不同的方法，即使用`.children()`方法、`.filter()`方法和`.has()`方法，因為所有這些方法都高效且易於使用。總的來說，jQuery是一個強大的工具，它簡化了HTML DOM遍歷、事件處理和AJAX互動，從而加快了Web開發速度。

更新於：2023年4月13日

1000+ 次瀏覽

啟動你的職業生涯

完成課程獲得認證

開始學習
廣告