suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der prepend()-Methode in jQuery_jquery

Detaillierte Erläuterung der prepend()-Methode in jQuery_jquery

WBOY
WBOYOriginal
2016-05-16 15:45:521652Durchsuche

Die prepend()-Methode fügt das angegebene Element am Anfang des passenden Elements ein. Ihre Funktion ist grundsätzlich dieselbe wie die prependTo()-Methode. Der einzige Unterschied besteht in der Syntax, obwohl die Syntaxform grundsätzlich dieselbe ist.

Das Folgende ist eine Einführung in die grammatikalische Struktur:

Code kopieren Der Code lautet wie folgt:

$(selector).prepend(content)

Parameterliste:

Demo: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
div{
 height:200px;
 width:200px;
 border:1px solid green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("button").click(function(){
 $("div").prepend("被加添的内容");
 })
})
</script>
</head>
<body>
<div>前面要添加内容:</div>
<button>点击查看效果</button>
</body>
</html>

Detaillierte Erklärung von prepend() 2:

prepend()-Funktion wird verwendet, um angegebenen Inhalt an die Startposition innerhalb jedes passenden Elements anzuhängen.

Der angegebene Inhalt kann sein: HTML-String, DOM-Element (oder Array), jQuery-Objekt, Funktion (Rückgabewert).

Das Gegenteil dieser Funktion ist die Funktion append(), die verwendet wird, um den angegebenen Inhalt an die Endposition innerhalb jedes passenden Elements anzuhängen.

Diese Funktion gehört zum jQuery-Objekt (Instanz).

Grammatik

Code kopieren Der Code lautet wie folgt:

jQueryObject.prepend( content1 [, content2 [, contentN ]] )

Parameter

jQuery 1.4 neue Unterstützung: Parameter content1 kann eine Funktion sein. prepend() durchläuft diese Funktion und führt sie basierend auf allen übereinstimmenden Elementen aus, und dies in der Funktion zeigt auf das entsprechende DOM-Element.

prepend() übergibt außerdem zwei Parameter an die Funktion : Der erste Parameter ist der Index des aktuellen Elements im passenden Element und der zweite Parameter ist der aktuelle interne HTML-Inhalt des Elements (innerHTML ). Der Rückgabewert der Funktion ist der Inhalt, der an das Element angehängt werden muss (kann ein HTML-String, ein DOM-Element oder ein jQuery-Objekt sein).

Hinweis: Nur der erste Parameter kann eine benutzerdefinierte Funktion für die Traversal-Ausführung sein. Wenn der nachfolgende Parameter ebenfalls eine Funktion ist, wird seine toString()-Methode aufgerufen, in einen String umgewandelt und als HTML-Inhalt behandelt.
Rückgabewert

Der Rückgabewert der Funktion prepend() ist vom Typ jQuery und gibt das aktuelle jQuery-Objekt selbst zurück (um die Programmierung im Kettenstil zu erleichtern).

HinweisHinweis: Wenn es sich bei dem angehängten Inhalt um einige Elemente auf der aktuellen Seite handelt, verschwinden diese Elemente von ihren ursprünglichen Positionen. Kurz gesagt handelt es sich hierbei um eine Verschiebungsoperation, nicht um eine Kopieroperation.

Beispiele & Anleitungen

Die Funktion

prepend() wird verwendet, um Inhalte an die Startposition innerhalb jedes passenden Elements anzuhängen: 

<p><!--插入到p元素内部的起始位置-->段落文本1<span></span></p>
<p><!--插入到p元素内部的起始位置-->段落文本2<span></span></p>

<script type="text/javascript">
$("p").prepend( '<!--插入到p元素内部的起始位置-->' ); 
</script>

Bitte beachten Sie den Unterschied zwischen der prepend()-Funktion und der prependTo()-Funktion: 

var $A = $("s1");
var $B = $("s2");

// 将$B追加到$A中
$A.prepend( $B ); // 返回$A
// 将$A追加到$B中
$A.prependTo( $B ); // 返回表示追加内容的jQuery对象( 匹配所有$B内部开头追加的$A元素 )

Nehmen Sie den folgenden HTML-Code als Beispiel: 

<p id="n1">
 <span id="n2">CodePlayer</span> 
</p>
<p id="n3">
 <label class="move">Hello World</label>
</p>
<p id="n4">
 <i>测试内容</i>
</p>

Der folgende jQuery-Beispielcode wird verwendet, um die spezifische Verwendung der prepend()-Funktion zu demonstrieren: 

var $n1 = $("#n1");
//将一个strong标记追加到n1内部的起始位置
$n1.prepend( '<strong>追加内容</strong>' );


//将所有的label元素和i元素追加到n1内部的起始位置
//原来位置的label元素和i元素会消失(相当于是移动到n1内部的起始位置)
$n1.prepend( document.getElementsByTagName("label"), $("i") );

//为每个p元素内部的起始位置追加一个span元素，html内容根据索引而有所不同
var $p = $("p");
$p.prepend( function(index, html){
 return '<span>追加元素' + (index + 1) + '</span>'; 
} );

Führen Sie den Code aus

prepend() hängt den Inhalt an das Start-Tag des angegebenen Containerelements an, ohne zusätzliche Leerzeichen hinzuzufügen. Der vollständige HTML-Code nach der Ausführung des obigen Codes lautet wie folgt (keine Anpassung am Format): 

<p id="n1"><span>追加元素1</span><label class="move">Hello World</label><i>测试内容</i><strong>追加内容</strong>
 <span id="n2">CodePlayer</span> 
</p>
<p id="n3"><span>追加元素2</span>
 
</p>
<p id="n4"><span>追加元素3</span>
 
</p>

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So beschränken Sie das Textfeld in js_javascript skills nur auf chinesische EingabenNächster Artikel：So beschränken Sie das Textfeld in js_javascript skills nur auf chinesische Eingaben

In Verbindung stehende Artikel

Mehr sehen