ホームページ  >  記事  >  ウェブフロントエンド  >  jquery_jquery での .add() の使用に関する分析

jquery_jquery での .add() の使用に関する分析

WBOY
WBOYオリジナル
2016-05-16 17:35:16936ブラウズ

add() 一致する要素のコレクションに要素を追加します。これは、jquery リファレンス マニュアルに記載されているステートメントです。ただし、提供されているサンプルのリンクが間違っているため、add() のサンプルの説明はありません。 add() の使用法をよりよく理解するための例をいくつか示します。

例 1

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






<script> <br> $(document).ready(function(){<br> $("div").css("border", "2px 単色赤").add("p").css("background", "黄色" );<br>});<br></script>



< ;div>

gt;

gt;


;< /div>

これを追加しました… (境界線がないことに注意してください)





結果は以下のようになります:


説明: ここでの add("p") は、$("div") の CSS と p の CSS の合計を意味します。ここで、div には境界線があることに注意してください。そして、pはそうではありません。

例 2

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


こんにちは

またこんにちは


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

$("p").add("span").css("背景", "黄色" );

結果は以下のようになります:



p および Span CSS、

と同等

$("p,span").css("background","yellow");

例 3:

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

こんにちは




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

$("p").clone().add("Again").appendTo(document.body) ;

結果は次のとおりです:

Clone() は、p をコピーし、ドキュメントの本文に Again を挿入することを意味します。

ここに文を挿入します: clone() が使用されない場合、元の p は存在しなくなります。次の例を見てください。

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

< script>
$ (document).ready(function(){
$("p").add("Again").appendTo(document.body);
alert($(" body").html());
});







結果は以下のようになります:



例 4:

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


こんにちは

またこんにちは


コードをコピー コードは次のとおりです。

$("p").add( document.getElementById ("a")).css("background", " yellow");

結果は次のとおりです:

これは、add() のパラメーターがセレクターだけでなく DOM 要素にもなり得ることを示しています。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。