LoginSignup
1

More than 5 years have passed since last update.

jQueryの書き方 〜中級〜

Posted at

jQueryの書き方について、備忘録としてまとめておきます。
誰かの役にたったなら幸いです〜♪( ´▽`)

要素の取得(eqメソッド)

jQueryオブジェクトは、取得した要素が配列の「ような形」で入っています。

<ul>
 <li>リスト1</li>
 <li>リスト2</li>
 <li>リスト3</li>
</ul>
$(li)
//[<li>リスト1</li>,<li>リスト2</li>,<li>リスト3</li>]

この配列の「ような」ものにはindexが0からついています。
そのため以下のようにして書くことができます。

$(li).eq(1).css('color', 'red')
//リスト2のcssを変更できる

eq()の引数指定で便利なめメソッドにindex()があリます。
index($(this))でイベントが実行された要素のindex番号を取得することができます。

カスタムデータ属性

jQueryで要素や属性等を取得する方法はいくつかありますが、
その一つに属性を指定して、その値を取得することもあります。
属性はsrcやidなど標準で用意されているもの以外に、自分で作ることができます。
この自分で作った属性を、カスタムデータ属性と呼びます。
その場合、「data-」から始めます。

<img src="#">
//srcが属性

<div data-option="hoge">...</div>
//data-optionがカスタムデータ属性

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1