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.
Sobald ein Element in der HTML-Struktur erstellt ist, können wir es mit der Methode 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>
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.
Der an die jQuery-Funktion übergebene HTML-String muss wohlgeformt sein.
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 $(<div />).
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> 元素的包装集，并且您想知道最后一个 <div>-Elemente einer Webseite enthält, und Sie möchten den Index des letzten
<!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>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 this) an die Methode index() übergeben, um das zu bestimmen angeklickt
<!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
<!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>
.contents() 方法可用于查找所有子元素节点，包括元素内部包含的文本节点。然而，有一个问题。如果检索到的内容仅包含文本节点，则所选内容将作为单个文本节点放置在包装器集中。但是，如果您要检索的内容在文本节点中包含一个或多个元素节点，则 .contents()Erkunden der .contents()-Methode
.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>
<!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>
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!
So verwenden Sie den MySQL-Cursor
So richten Sie den Ruhezustand im Win7-System ein
So wechseln Sie zwischen voller und halber Breite
So handeln Sie auf Binance
Welche Zeichensoftware gibt es?
Was sind die kostenlosen virtuellen PHP-Hosts im Ausland?
So fahren Sie herunter, nachdem Sie den Befehl nohup ausgeführt haben
Was ist Vulkan?
