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

動態建立、操作與新增 HTML

摸索index()方法

首頁

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> 元素將是包裝器集中的唯一元素。

一旦建立了 HTML 結構中的任何元素，我們就可以使用 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>

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

傳遞給 jQuery 的 HTML 字串不能包含在 <div> 元素內可能被視為無效的元素。

傳遞給 jQuery 函數的 HTML 字串必須格式正確。

傳遞 jQuery HTML 時，您應該開啟和關閉所有 HTML 元素。不這樣做可能會導致錯誤，主要是在 Internet Explorer 中。為了安全起見，請務必關閉 HTML 元素並避免編寫快速 HTML - 例如$(<div />).

摸索index()方法

您可以透過將元素傳遞給 index() 方法來確定包裝集中元素的索引。例如，假設您有一個包含網頁中所有 <div> 元素的包裝集，並且您想知道最後一個 <div>## 元素的索引。

<!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>

登入後複製

index() 的使用並沒有真正擊中要害，直到我們考慮如何將它與事件一起使用。例如，透過點擊下面程式碼中的<div> 元素，我們可以將點擊的<div> 元素（使用關鍵字this）傳遞給index() 方法來決定點擊的<div> 的索引。

<!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>

登入後複製

摸索 text() 方法

人們可能會錯誤地認為

text() 方法只傳回包裝器集中第一個元素的文字節點。但是，它實際上會連接包裝器集中包含的所有元素的文字節點，然後將連接後的值作為單一字串傳回。確保您了解此功能，否則您可能會得到一些意想不到的結果。

<!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