Heim >Web-Frontend >js-Tutorial >Einfache und leicht verständliche jQuery: jQuery-Operationen

Einfache und leicht verständliche jQuery: jQuery-Operationen

WBOYOriginal: 2023-09-03 22:09:12730Durchsuche

HTML dynamisch erstellen, bearbeiten und hinzufügen

Sie können HTML-Markup dynamisch erstellen, indem Sie eine rohe HTML-Zeichenfolge an eine jQuery-Funktion übergeben.

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

Es ist zu beachten, dass bei der Verwendung von jQuery-Funktionen zum Erstellen einer DOM-Struktur nur das Stammelement in der Struktur zum Wrapper-Satz hinzugefügt wird. Im vorherigen Codebeispiel wäre das <div>-Element das einzige Element im Wrapper-Set. <p>Sobald ein Element in der HTML-Struktur erstellt ist, können wir es mit der Methode <code>find() manipulieren.

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

Nachdem Sie den neu erstellten HTML-Code bearbeitet haben, können Sie ihn auch mit einer der Manipulationsmethoden von jQuery zum DOM hinzufügen. Im Folgenden verwenden wir die appendTo()-Methode, um Markup zur Seite hinzuzufügen.

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

Hinweis: Ein einfaches Element, das keine Attribute enthält – wie zum Beispiel $('<div></div>') - 通过 document.createElement DOM 方法创建，而所有其他情况都依赖于 innerHTML 属性。事实上，您可以直接向 jQuery 函数传递使用 document.createElement -e.g 创建的元素。 $(document.createElement('div')).

HTML-Zeichenfolgen, die an jQuery übergeben werden, dürfen nicht in <div> Elementen enthalten sein, die als ungültig angesehen werden können. <p>Der an die jQuery-Funktion übergebene HTML-String muss wohlgeformt sein. </p> <p>Bei der Übergabe von jQuery-HTML sollten Sie alle HTML-Elemente öffnen und schließen. Andernfalls kann es zu Fehlern kommen, vor allem im Internet Explorer. Schließen Sie aus Sicherheitsgründen immer HTML-Elemente und vermeiden Sie das Schreiben von HTML-Verknüpfungen wie <code>$(<div></div>).

Erkunden der index()-Methode

Sie können den Index eines Elements in einer umschlossenen Menge ermitteln, indem Sie das Element an die Methode index() übergeben. Angenommen, Sie haben einen Wrapper-Satz, der alle index() 方法来确定包装集中元素的索引。例如，假设您有一个包含网页中所有 <div> 元素的包装集，并且您想知道最后一个 <code><div>-Elemente einer Webseite enthält, und Sie möchten den Index des letzten -Elements wissen. <p> <pre class="brush:html;toolbal: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> Die Verwendung von <code>index() 的使用并没有真正击中要害，直到我们考虑如何将它与事件一起使用。例如，通过点击下面代码中的 <div> 元素，我们可以将点击的 <code><div> 元素（使用关键字 <code>this）传递给 index() 方法来确定点击的 <div> <code>index() wird erst dann wirklich überzeugen, wenn wir darüber nachdenken, wie wir es mit Ereignissen verwenden. Wenn wir beispielsweise auf das -Element im folgenden Code klicken, können wir das angeklickte

-Element (mit dem Schlüsselwort this) an die Methode index() übergeben, um das zu bestimmen angeklickt

Index.

<!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()Erkunden der text()-Methode

Menschen denken möglicherweise fälschlicherweise, dass die

-Methode nur den Textknoten des ersten Elements im Wrapper-Set zurückgibt. Tatsächlich verkettet es jedoch die Textknoten aller im Wrapper-Set enthaltenen Elemente und gibt den verketteten Wert als einzelne Zeichenfolge zurück. Stellen Sie sicher, dass Sie diese Funktion verstehen, da es sonst zu unerwarteten Ergebnissen kommen kann.

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

replace()Aktualisieren oder löschen Sie Zeichen mithilfe regulärer Ausdrücke

Mithilfe von JavaScript-Methoden html() in Kombination mit einigen jQuery-Funktionen können wir ganz einfach beliebige Zeichenmuster im im Element enthaltenen Text aktualisieren oder entfernen.

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

Sie können auch alle Zeichen aktualisieren, die in der von

zurückgegebenen Zeichenfolge enthalten sind. Das bedeutet, dass Sie nicht nur Text aktualisieren, sondern auch DOM-Elemente über reguläre Ausdrücke aktualisieren und ersetzen können.

.contents() 方法可用于查找所有子元素节点，包括元素内部包含的文本节点。然而，有一个问题。如果检索到的内容仅包含文本节点，则所选内容将作为单个文本节点放置在包装器集中。但是，如果您要检索的内容在文本节点中包含一个或多个元素节点，则 .contents()Erkunden der .contents()-Methode

Die

.get(0).nodeValue 提取值。 contents() 方法对于提取文本节点值很方便。可以使用 contents()-Methode enthält Textknoten und Elementknoten. Sehen Sie sich den folgenden Code an, um dieses Konzept zu verstehen.

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

Bitte beachten Sie, dass wir

verwenden müssen, um nur die Textknoten aus der DOM-Struktur zu extrahieren, wenn es sich bei den Elementen im Wrapper-Set um Textknoten handelt.

<!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()Durch die Verwendung von „remove()“ werden keine Elemente aus der umschlossenen Menge entfernt

Wenn Sie remove() verwenden, sind Elemente, die in der DOM-Struktur enthalten sind, aus der das DOM-Fragment entfernt wurde, weiterhin im Wrapper-Set enthalten. Sie können ein Element entfernen, Operationen an diesem Element ausführen und es dann tatsächlich wieder in das DOM einfügen – alles innerhalb einer einzigen jQuery-Kette.

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

🎜Der Punkt hier ist, dass die bloße Tatsache, dass Sie 🎜 Elemente haben, nicht bedeutet, dass sie aus dem jQuery-Wrapper-Set entfernt wurden. 🎜

Das obige ist der detaillierte Inhalt vonEinfache und leicht verständliche jQuery: jQuery-Operationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Einfache und leicht verständliche jQuery: jQuery-Operationen

HTML dynamisch erstellen, bearbeiten und hinzufügen

Erkunden der index()-Methode

Index.

zurückgegebenen Zeichenfolge enthalten sind. Das bedeutet, dass Sie nicht nur Text aktualisieren, sondern auch DOM-Elemente über reguläre Ausdrücke aktualisieren und ersetzen können.

verwenden müssen, um nur die Textknoten aus der DOM-Struktur zu extrahieren, wenn es sich bei den Elementen im Wrapper-Set um Textknoten handelt.

In Verbindung stehende Artikel