Explication détaillée de la méthode prepend() dans jQuery

Explication détaillée de la méthode prepend() dans jQuery_jquery

WBOY

Libérer： 2016-05-16 15:45:52

original

1715 Les gens l'ont consulté

La méthode prepend() insère l'élément spécifié au début de l'élément correspondant. Sa fonction est fondamentalement la même que la méthode prependTo(). La seule différence réside dans la syntaxe, bien que la forme syntaxique soit fondamentalement la même.

Ce qui suit est une introduction à la structure grammaticale :

Copier le code Le code est le suivant :

$(selector).prepend(content)

Liste des paramètres :

démo :

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

Copier après la connexion

Explication détaillée de prepend() 2 :

La fonction prepend() est utilisée pour ajouter le contenu spécifié à la position de départ à l'intérieur de chaque élément correspondant.

Le contenu spécifié peut être : une chaîne html, un élément (ou un tableau) DOM, un objet jQuery, une fonction (valeur de retour).

L'opposé de cette fonction est la fonction append(), qui est utilisée pour ajouter le contenu spécifié à la position finale à l'intérieur de chaque élément correspondant.

Cette fonction appartient à l'objet (instance) jQuery.

Grammaire

Copier le code Le code est le suivant :

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

Paramètres

Nouveau support de jQuery 1.4 : le paramètre content1 peut être une fonction. prepend() parcourra et exécutera cette fonction en fonction de tous les éléments correspondants, et cela dans la fonction pointera vers l'élément DOM correspondant.

prepend() transmettra également deux paramètres à la fonction : le premier paramètre est l'index de l'élément actuel dans l'élément correspondant, et le deuxième paramètre est le contenu html interne actuel de l'élément (intérieurHTML ). La valeur de retour de la fonction est le contenu qui doit être ajouté à l'élément (peut être une chaîne HTML, un élément DOM ou un objet jQuery).

Remarque : seul le premier paramètre peut être une fonction personnalisée pour l'exécution du parcours. Si le paramètre suivant est également une fonction, sa méthode toString() est appelée, convertie en chaîne et traitée comme du contenu HTML.
Valeur de retour

La valeur de retour de la fonction prepend() est de type jQuery, renvoyant l'objet jQuery actuel lui-même (pour faciliter la programmation en chaîne).

RemarqueRemarque : Si le contenu ajouté est constitué de certains éléments de la page actuelle, ces éléments disparaîtront de leur position d'origine. En bref, il s’agit d’une opération de déplacement et non d’une opération de copie.

Exemples et instructions

La fonction

prepend() est utilisée pour ajouter du contenu à la position de départ à l'intérieur de chaque élément correspondant :

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

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

Copier après la connexion

Veuillez noter la différence entre la fonction prepend() et la fonction prependTo() :

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

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

Copier après la connexion

Prenons comme exemple le code HTML suivant :

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

Copier après la connexion

L'exemple de code jQuery suivant est utilisé pour démontrer l'utilisation spécifique de la fonction prepend() :

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>'; 
} );

Copier après la connexion

Exécutez le code

prepend() ajoutera le contenu à la balise de début de l'élément conteneur spécifié sans ajouter de caractères d'espacement supplémentaires. Le code html complet après l'exécution du code ci-dessus est le suivant (aucun ajustement du 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>

Copier après la connexion