簡潔易懂的jQuery：jQuery操作-js教程-PHP中文網

首頁

web前端

js教程

簡潔易懂的jQuery：jQuery操作

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 03, 2023 pm 10:09 PM

選擇器 (selector)動畫 (animation)事件 (event)

簡潔易懂的jQuery：jQuery操作

動態建立、操作與新增 HTML

您可以透過向 jQuery 函數傳遞原始 HTML 字串來動態建立 HTML 標記。

<!DOCTYPE html>
<html lang="en">
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function($){
      alert($('<div><a></a></div>').get(0).nodeName); // Alerts "DIV"
      alert($('<div><a></a></div>').length); // Alerts "1" <div> is in the wrapper set
      alert($('<div><a></a></div><div><a></a></div>').length); // Alerts "2" <div> are in the set
  })(jQuery); </script>
</body>
</html>

要注意的是，使用 jQuery 函數建立 DOM 結構時，只有結構中的根元素會加入到包裝器集中。在前面的程式碼範例中，<div> 元素將是包裝器集中的唯一元素。 <p>一旦建立了 HTML 結構中的任何元素，我們就可以使用 <code>find() 方法來操作。

<!DOCTYPE html>
<html lang="en">
<body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
        (function ($) {
            $('<div><a></a></div>')
                 .find('a')
                .text('jQuery')
                .attr('href', 'http://www.jquery.com');
        })(jQuery); </script>
</body>
</html>

對新建立的 HTML 進行操作後，也可以使用 jQuery 的操作方法之一將其新增至 DOM 中。下面我們使用 appendTo() 方法將標記新增到頁面。

<!DOCTYPE html>
<html lang="en">
<body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function($){  $('<div><a></a></div>')
      .find('a')
      .text('jQuery')
      .attr('href', 'http://www.jquery.com')
      .end().appendTo('body'); // end() is used to exit the find() method
  })(jQuery); </script>
</body>
</html>

註解：不包含屬性的簡單元素- 例如$('<div></div>') - 透過document.createElement DOM 方法創建，而所有其他情況都依賴innerHTML 屬性。事實上，您可以直接向 jQuery 函數傳遞使用 document.createElement -e.g 建立的元素。 $(document.createElement('div'))。

傳遞給 jQuery 的 HTML 字串不能包含在 <div> 元素內可能被視為無效的元素。 <p>傳遞給 jQuery 函數的 HTML 字串必須格式正確。 </p> <p>傳遞 jQuery HTML 時，您應該開啟和關閉所有 HTML 元素。不這樣做可能會導致錯誤，主要是在 Internet Explorer 中。為了安全起見，請務必關閉 HTML 元素並避免編寫快速 HTML - 例如<code>$(<div></div>).

摸索index()方法

您可以透過將元素傳遞給 index() 方法來確定包裝集中元素的索引。例如，假設您有一個包含網頁中所有 <div> 元素的包裝集，並且您想知道最後一個 <code><div>## 元素的索引。 <pre class='brush:php;toolbar:false;'> <!DOCTYPE html> <html lang="en"> <body> <div>0</div> <div>1</div> <div>2</div> <div>3</div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> (function ($) { // Alerts "3" alert($('div').index($('div:last'))); })(jQuery); </script> </body> </html> </pre> <p>index()<code> 的使用並沒有真正擊中要害，直到我們考慮如何將它與事件一起使用。例如，透過點擊下面程式碼中的<div> 元素，我們可以將點擊的<code><div> 元素（使用關鍵字this<code>）傳遞給index() 方法來決定點擊的<div> 的索引。 <pre class='brush:php;toolbar:false;'> <!DOCTYPE html> <html lang="en"> <body> <div id="nav"> <div>nav text</div> <div>nav text</div> <div>nav text</div> <div>nav text</div> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> (function ($) { // Alert index of the clicked div amongst all div's in the wrapper set $('#nav div').click(function () { alert($('#nav div').index(this)); // or, a nice trick... alert($(this).prevAll().length); }); })(jQuery); </script> </body> </html> </pre> <hr>摸索 text() 方法<h2> </h2>人們可能會錯誤地認為 <p>text()<code> 方法只傳回包裝器集中第一個元素的文字節點。但是，它實際上會連接包裝器集中包含的所有元素的文字節點，然後將連接後的值作為單一字串傳回。確保您了解此功能，否則您可能會得到一些意想不到的結果。

<!DOCTYPE html>
<html lang="en">
<body>
    <div>1,</div>
    <div>2,</div>
    <div>3,</div>
    <div>4</div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script> (function ($) {
     alert($('div').text()); // Alerts "1,2,3,4"
 })(jQuery); </script>
</body>
</html>

使用正規表示式更新或刪除字元

使用 JavaScript

replace() 方法結合一些 jQuery 功能，我們可以非常輕鬆地更新或刪除元素中包含的文字中的任何字元模式。

<!DOCTYPE html>
<html lang="en">
<body>
    <p>
        I really hate using JavaScript.     I mean really hate it!     It is the best twister
        ever!
    </p>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function ($) {
var $p = $('p');
      // Replace 'hate' with 'love'
      $p.text($p.text().replace(/hate/ig, 'love'));
      // Remove 'twister' and replace it with nothing
      $p.text($p.text().replace(/twister/ig, ''));   // Keep in mind that text() returns a string, not the jQuery object.
      // That is how the replace() string method is chained after using text()
  })(jQuery); </script>
</body>
</html>

您也可以更新從

html() 傳回的字串中包含的任何字元。這意味著您不僅可以更新文本，還可以透過正規表示式更新和取代 DOM 元素。

摸索 .contents() 方法

.contents() 方法可用來尋找所有子元素節點，包括元素內部包含的文字節點。然而，有一個問題。如果檢索到的內容僅包含文字節點，則所選內容將作為單一文字節點放置在包裝器集中。但是，如果您要檢索的內容在文字節點中包含一個或多個元素節點，則 .contents() 方法將包含文字節點和元素節點。檢查下面的程式碼以掌握這個概念。

<!DOCTYPE html>
<html lang="en">
<body>
    <p>I love using jQuery!</p>
    <p>I love <strong>really</strong> using jQuery!</p>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function ($) {
      // Alerts "I love using jQuery!" because no HTML elements exist
      alert($('p:first').contents().get(0).nodeValue);
      // Alerts "I love"
      alert($('p:last').contents().get(0).nodeValue);
      // Alerts "really" but is an HTML element, not a text node
      alert($('p:last').contents().eq(1).text());
      // Alerts "using jQuery!"
      alert($('p:last').contents().get(2).nodeValue);
  })(jQuery); </script>
</body>
</html>

請注意，當包裝集中的項目是文字節點時，我們必須使用

.get(0).nodeValue 來提取值。 contents() 方法對於擷取文字節點值很方便。可以使用 contents() 從 DOM 結構中僅擷取文字節點。

<!DOCTYPE html>
<html lang="en">
<body>
    <p>jQuery gives me <strong>more <span>power</span></strong> than any other web tool!
    </p>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function($){  $('p')  .find('*') // Select all nodes
      .andSelf() // Include <p>
      .contents() // Grab all child nodes, including text
      .filter(function() {return this.nodeType == Node.TEXT_NODE;}) // Remove non-text nodes
      .each(function (i, text) { alert(text.nodeValue) }); // Alert text contained in wrapper set
  })(jQuery); </script>
</body>
</html>

使用remove()不會從包裝集中刪除元素

當您使用

remove() 時，來自 DOM 的 DOM 片段已刪除的 DOM 結構中包含的元素仍然包含在包裝集中。您可以刪除一個元素，對該元素進行操作，然後將該元素實際放回 DOM 中，所有這些都在單一 jQuery 鏈中。

<!DOCTYPE html>
<html lang="en">
<body>
    <div>remove me</div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function ($) {
      $('div')
          .remove().html('<a href="http://www.jQuery.com">jQuery</a>')
          .appendTo('body');
  })(jQuery); </script>
</body>
</html>

這裡的要點是，僅僅因為您

remove() 元素並不意味著它們已從 jQuery 包裝器集中刪除。

以上是簡潔易懂的jQuery：jQuery操作的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Python vs. JavaScript：學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

See all articles