タグ

ブックマーク / kinocolog.com (2)

  • jQueryで子要素を取得するfindとchildrenの使い方【サンプル有】 | キノコログ

    jQueryで子要素を操作する時の処理についてまとめました。 直下の子要素のみを指定する.children .child()メソッドは、指定した要素の直下の子要素を指定できます。 下記のソースコードは、直下のli要素の文字を赤くする、という指定で処理をしています。 <ul class="ex01"> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> <ul> <li>リスト4-1</li> <li>リスト4-2</li> <li>リスト4-3</li> </ul> <li>リスト5</li> <li>リスト6</li> </ul> <script> $(function(){ $('.ex01').children('li').css('color', 'red'); //$('.ex01 > li').css('color', 'red'); も同じ処理

    jQueryで子要素を取得するfindとchildrenの使い方【サンプル有】 | キノコログ
  • jQueryで$(this)の使い方【サンプルコード有】 | キノコログ

    jQueryで扱うthisについてまとめました。 開発する上で重要なセレクタとなりますので、必ず理解した上で活用してみましょう! jQueryの$(this)とは?イベントを引き起こしたjQueryオブジェクトを指します 「this」とは日語で「これ」という意味です。 そして、「$()」はjQueryオブジェクトを指します。 2つを組み合わせると「$(this)」となるのですが、これは 「イベンドハンドラ内で使用できる、イベントを引き起こしたこの要素」 を指します。 上の例で言うと、イベンドハンドラ内で使う$(this)は、「クリックされた$('.hoge')要素」ということですね。 このサンプルコードは、クリックされた要素を$(this)で取得し、文字色を赤くするといった処理をしております。 <p class="hoge">テキスト1</p> <p class="hoge">テキスト2

    jQueryで$(this)の使い方【サンプルコード有】 | キノコログ
  • 1