jQueryメソッドの実験用基本構成

公開：2015-02-22

更新：2015-07-22

jQueryのメソッドを検証するために、主に

boxA 赤
boxB 青
boxC 緑
boxD 紫

で構成する基本的構造を作りました。これは各ページの基本として使用していきます。

基本形

$(セレクタ).メソッドを

boxAの文

boxBの文

boxCの文

boxDの文

リストD1
リストD2

リストA1
リストA2

<div class="boxA">
  <p>boxAの文</p>
  <div class="boxB">
    <p>boxBの文</p>
    <div class="boxC">
      <p>boxCの文</p>
    </div>
  </div>
  <div class="boxD">
    <p>boxDの文</p>
    <ul>
      <li>リストD1</li>
      <li>リストD2</li>
    </ul>
  </div>
  <ul>
    <li>リストA1</li>
    <li>リストA2</li>
  </ul>
</div>

			.selected	{
		  border-color: red;
	}

CSSは省略しますが、各要素にborderを付けています。divは実線（solid）、その中の要素のpとulは破線（dashed）、liは点線（dotted）で囲んでいます。

[実行する]ボタンを押すとそのメソッドが実行されて選ばれた要素が濃い赤で表示されます。具体的には選ばれた要素に対してaddClass('selected')を実行しています。

更にその状態で再度押すと解除されて元の色に戻ります。以降これを繰り返します。

このページのボタンは例としてdivのみのborderを選んでいます。

これを元にいくつかの記事を書いていきます。