jQuery_jqueryのprepend()メソッドの詳細説明-jsチュートリアル-php.cn

jQuery_jqueryのprepend()メソッドの詳細説明

WBOY

リリース： 2016-05-16 15:45:52

オリジナル

1617 人が閲覧しました

prepend() メソッドは、指定された要素を一致する要素の先頭に挿入します。その機能は基本的に prependTo() メソッドと同じですが、構文形式は基本的に同じです。

以下は文法構造の紹介です:

コードをコピーしますコードは次のとおりです:

$(セレクター).prepend(コンテンツ)

パラメータリスト:

デモ:

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

ログイン後にコピー

prepend() 2 の詳細説明:

prepend() 関数 は、一致する各要素内の開始位置に指定されたコンテンツを追加するために使用されます。

指定できる内容は、HTML 文字列、DOM 要素 (または配列)、jQuery オブジェクト、関数 (戻り値) です。

この関数の反対は append() 関数で、指定されたコンテンツを一致する各要素内の終了位置に追加するために使用されます。

この関数はjQueryオブジェクト(インスタンス)に属します。

文法

コードをコピーしますコードは次のとおりです:

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

パラメータ

jQuery 1.4 の新規サポート: パラメーター content1 は関数にすることができます。 prepend() は、一致するすべての要素に基づいてこの関数をトラバースして実行します。関数内の this は、対応する DOM 要素を指します。

prepend() は関数 に 2 つのパラメーターも渡します。最初のパラメーターは一致する要素内の現在の要素のインデックスで、2 番目のパラメーターは要素の現在の内部 HTML コンテンツです。 (innerHTML)。関数の戻り値は、要素に追加する必要があるコンテンツです (HTML 文字列、DOM 要素、または jQuery オブジェクトにすることができます)。

注: トラバーサル実行のカスタム関数にできるのは、最初のパラメーターのみです。後続のパラメータも関数である場合、その toString() メソッドが呼び出され、文字列に変換され、HTML コンテンツとして扱われます。
戻り値

prepend() 関数の戻り値は jQuery 型で、現在の jQuery オブジェクト自体を返します (チェーンスタイルのプログラミングを容易にするため)。

注注: 追加されたコンテンツが現在のページ内の一部の要素である場合、これらの要素は元の位置から消えます。つまり、これはコピー操作ではなく移動操作です。

例と手順

prepend() 関数は、一致する各要素内の開始位置にコンテンツを追加するために使用されます:

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

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

ログイン後にコピー

prepend() 関数と prependTo() 関数の違いに注意してください:

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

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

ログイン後にコピー

次の HTML コードを例に挙げます:

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

ログイン後にコピー

次の jQuery サンプルコードは、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>'; 
} );

ログイン後にコピー

コードを実行します

prepend() は、空白文字を追加せずに、指定されたコンテナー要素の開始タグにコンテンツを追加します。上記のコードが実行された後の完全な HTML コードは次のとおりです (形式は調整されていません)。

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

ログイン後にコピー