6
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

jQueryの基本 〜いじる要素の指定〜

Last updated at Posted at 2015-06-10

爆速でマスターするため、専門的なことはハショってます!
はい!覚え書きです!

いじる要素(DOM要素)の指定方法

idとかclassで指定

下記のようなhtmlの場合

  <ul id="main">
    <li>0</li>
    <li class="item">1</li>
    <li class="item">2</li>
    <li>
      3
      <ul id="sub">
        <li>3-0</li>
        <li>3-1</li>
        <li class="item">3-2</li>
        <li class="item">3-3</li>
      </ul>
    </li>
  </ul>

こんな感じで指定できます。

//id指定
    $('#sub').css('color','red');
//class指定
    $('.item').css('color','red'); 

idとかclassに記号を加えたもの

// > 直下の子要素
// , 複数の要素
// + 隣接する要素

// > 直下の子要素
	$('#main > .item').css('color','red');
// , 複数の要素
	$('p, .item').css('color', 'red');
// + 隣接要素(この場合.itemの横の.itemのテキストが赤くなる)
	$('.item + .item').css('color', 'red');

フィルタを使う

//eqフィルタ
    //番号で指定した要素を指定できる(※0からカウントが始まる)
    $('#sub > li:eq(3)').css('color', 'red');
//:gt() greater than(指定した数字より大きい物を選択)
//:lt() less than (指定した数字より小さい物を選択)
    $('#sub > li:gt(0)').css('color', 'red');
    $('#main > li:lt(2)').css('color', 'blue');
    ※以上、以下ではないので注意
// :even 偶数
// :odd 奇数
    $('#sub > li:even').css('color', 'red');
    $('#main > li:odd').css('color', 'blue');
// :contains
//('pならp要素の中のものを指定する
//<p>ちょめhoge</p>なら「ちょめ」でも「hoge」でもOK')
    $('#sub > li:contains("hoge")').css('font-weight', 'bold');

メソッドを使ったいじる要素(DOM要素)の指定

//parent(), children() 親要素と子要素
    $('#sub').parent().css('color', 'red');
    //※この場合#subの親要素のみではなく、#sub自身も含む
    
    $('#sub').children().css('color', 'red');
    //※この場合#subの子要素のみではなく、#sub自身も含む
// next() 1つ次の要素
    $('#sub li:eq(2)').next().css('color', 'red');
    
// prev() 1つ前の要素
	$('#sub li:eq(2)').prev().css('color', 'red');
    

属性で指定

   // 属性による指定とは?
    /* 例
      <a href="http://google.com">google</a>
      があったとしたら「a要素の href属性が http://google.comのもの」を指定する。
      ということ。
    */
    
    $('a[href="http://google.com"]').css('background-color', 'red');
   
// href="http://google.com"のイコール部分は判定なのでほかにもいくつかある。
    // =
    // != 否定
    $('a[href!="http://google.com"]').css('background-color', 'red');
    
    // *= 〜が含まれる (先頭はアスタリスク)
    $('a[href*="dotinstall"]').css('background-color', 'green');
    
    // $= 〜で終わる
    $('a[href$="com"]').css('font-weight', 'bold');
    
    // ^= 〜で始まる
    $('a[href^="v"]').css('text-decoration', 'underline');

6
8
0

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
6
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?