{jQuery} prependの練習。

なんだかんだ、jQueryが便利。使ってる人も、ドキュメントも多いし。

prependの練習。要素の先頭に、指定要素を付加する方法

死ぬほど楽。jQueryをつかうと、無い生活に戻れなくなる。

ここがpタグ

ここがpタグ

これがdivタグ
<script>

jQuery(function(){
    $(".hoge").prepend("ほげほげ。");
  });
  
</script>
<style>
#prepend div,
#prepend p { border:4px #ccc solid; padding:2px; }
</style>
<blockquote>
<div id="prepend">
<p>ここがpタグ</p>
<p class="hoge">ここがpタグ</p>

<div class="hoge">これがdivタグ</div>
</div>
</blockquote>

練習2

すこしカスタム。クリックでイベントを発生させてみる。(「クリック!」をクリックする度に「ほげほげ」が増えていく!)

クリック!

ここがpタグ

ここがpタグ

これがdivタグ
<script>

jQuery(function(){
  $(".btn").click(
  function(){
    $(".hoge").prepend("ほげほげ。");
  })}
  );
  
</script>
<style>
#test1 div,
#test1 p { border:4px #ccc solid; padding:2px; }
</style>
<p class="btn"><strong>クリック!</strong></p>
<div id="test1">
<p>ここがpタグ</p>
<p class="hoge">ここがpタグ</p>

<div class="hoge">これがdivタグ</div>
</div>

</blockquote>

カテゴリ:

トラックバック(0)

トラックバックURL: http://www.0yen-coding.com/mt-tb.cgi/255

コメントする

あわせて読みたいブログパーツ