お寿司か焼き肉食べたい

まじめな事からしょーもない事まで
めにゅーを開く(投げやり)

この要素くれや

では、さっそく要素の取得方法をば

基本指定

$(function(){
 $('#id') // id要素の取得
 $('.class') // クラスが付与された要素の取得
 $('div') // タグ名での取得
});

やばい死ぬほど簡単
ネイティブなJSと比べるとこの楽さですね。
document.getElementByIdなんかいらんかったんや！！！！
とはいえ、jQueryはJSのプラグインみたいなもんです。本当はdocument.getElementById等が動いていることを忘れないでください。

複数属性の指定

idやクラスを複数で指定したい時などに使用します。 

$(function(){
 $('#id.class') // 指定idと指定クラスが付与されている要素
 $('.class.class') // 指定クラスと指定クラスが付与されている要素
 $('div.class') // 指定クラスが付与されている指定タグの要素
});

スペースなどで間を開けずに、つなげて記述してあげます。
<span class="test"></span>
と
<div class="test"></div>
を区別したいときなんか便利ですね。

階層指定

孫要素の指定

自分からみて孫要素の指定を行うことができます。
一致した要素はすべて対象となります。 

$(function(){
 $('#id .class') // id付与要素の子以降で、指定クラスが付与されている要素全対象
});

子要素の指定

自分の子要素の指定を行います。
孫要素には影響範囲が及びません。 

$(function(){
 $('#id > .class') // id付与要素の子要素で、指定クラスが付与されているもののみ　孫は影響範囲外
});

弟要素の参照

自身から隣(弟)の要素の指定を行います。
２つ以上離れた要素は対象外です。 

$(function(){
 $('div + .class') // div要素と同階層にある クラスが付与されている要素 ただし自分の真横の要素
});

弟要素の参照 その２

自身から全弟の要素の指定を行います。

$(function(){
$('div ~ .class') // div要素と同階層にある クラスが付与されている要素をすべて(弟のみ)
});

フィルタ

最終取得できた複数の要素に対してさらにフィルタリングを行います。

先頭要素

取得できた要素群の中で最初の要素のみを対象とします。 

$(function(){
 $('div .class:first') // div要素の子要素の中で最初にでてくる指定クラスが付与された要素
});

最終要素

取得できた要素群の中で最終の要素のみを対象とします。 

$(function(){
 $('div .class:last') // div要素の子要素の中で最後にでてくる指定クラスが付与された要素
});

可視、不可視状態の要素

display:noneなどで表示されていないもの、逆に表示されている要素を取得します。 

$(function(){
 $('.class:hidden') // 指定クラスが付与された要素の中で現在表示【されていない】要素を取得
 $('.class:isible') // 指定クラスが付与された要素の中で現在表示【されている】要素を取得
});

属性フィルタ

属性に関してもフィルタリングすることができます。

属性の有無

兎に角、属性がある要素を取得します。 

$(function(){
 $('.class:[href]') // 指定クラスが付与された要素の中でhref属性が存在している要素を取得(値の有無を問わず)
});

属性の値　完全一致

指定された属性に対して指定された値がセットされている場合に要素を取得します。 

$(function(){
 $('.class:[href='http://google.com']') // 指定クラスが付与された要素の中でhrefにhttp://google.comが指定されている要素を取得
});

属性の値　不一致

指定された属性に対して指定された値がセットされていない要素を取得します。 

$(function(){
$('.class:[href!='http://google.com']') // 指定クラスが付与された要素の中でhrefにhttp://google.comが指定されていない要素を取得
});

属性の値　前方一致

指定された属性の値が、指定された値から始まる要素を取得します。 

$(function(){
$('.class:[href^='http']') // 指定クラスが付与された要素の中でhrefの値がhttpから始まる要素を取得
});

属性の値　後方一致

指定された属性の値が、指定された値で終わる要素を取得します。 

$(function(){
$('.class:[href$='.com']') // 指定クラスが付与された要素の中でhrefの値が.comで終わる要素を取得
});

属性の値　あいまい一致

指定された属性の値が、指定された値が含まれる要素を取得します。 

$(function(){
$('.class:[href*='goo']') // 指定クラスが付与された要素の中でhrefの値にgooが含まれる要素を取得
});

複数の属性フィルタリング

複数の属性のフィルタリングを行うことができます。
これはAND検索になり、全条件をクリアしたものを取得します。 

$(function(){
$('.class:[href*='goo'][title]') // 指定クラスが付与された要素の中でhrefの値にgooが含まれていて、タイトル属性が存在している要素を取得
});

子要素フィルタ

子要素の順番を指定してフィルタリング

何番目に出現した要素としてフィルタリングを行うことができます。
引数には複数タイプの指定方法が存在しています。
指定方法については以下のパターンです。

  • index直接指定
  • 偶数番指定
  • 奇数番指定
  • n番おき指定
$(function(){
// index直接指定
$('.class p:nth-child(1)')
 // .classが付与されている要素の子要素の中のPで１番目の要素のみを取得
 // ここは0番スタートではなく１番スタートなので注意
});

// 偶数番指定
$('.class p:nth-child(even)')
 // .classが付与されている要素の子要素の中のPで偶数番の要素を全取得
});

// 奇数番指定
$('.class p:nth-child(odd)')
 // .classが付与されている要素の子要素の中のPで奇数番の要素を全取得
});

// n番おき指定
$('.class p:nth-child(3n)')
 // .classが付与されている要素の子要素の中のPで3番目おきの要素を全取得
});

最初の子要素を取得する

$(function(){
$('.class p:first-child')
 // .classが付与されている要素の子要素の中のPで最初の子要素を取得する
});

最後の子要素を取得する

$(function(){
$('.class p:last-child')
// .classが付与されている要素の子要素の中のPで最後の子要素を取得する
});

firstとfirst-childそいでlastとlast-childの違い

なかなかにうっとおしいのです。
それぞれの違いを説明します。

firstとfirst-childの違いについて

以下のhtmlを例にとります。 

<div class="class">
 <span>テスト</span>
 <p>テスト</p>
 <p>テスト</p>
 <p>テスト</p>
 <p>テスト</p>
</div>

で、普通に.class pの一番最初を取りたいと思った時
こんな結果になります。 

$(function(){
$('.class p:first-child').addClass('test'); // 要素取得できず。なのでクラスはつかない
$('.class p:first').addClass('test'); // 要素取得できた。クラスはつく
});

さて、どちらも文面的には同じような動きをしそうな気がしますが
【first-child】これはこの要素が絶対に先頭にいないとだめ！
といった意味となります。
お兄ちゃんどいてそいつ殺せない！！
【first】に関しては、最初に出現してたヤツでOKな考え方になります。

first-childなんかいらんかったんや！

では次の例を考えてみましょう。 

<ul class="class">
 <li>テスト</li>
 <li>テスト</li>
 <li>テスト</li>
 <li>テスト</li>
</ul>
<ul class="class">
 <li>テスト</li>
 <li>テスト</li>
 <li>テスト</li>
 <li>テスト</li>
</ul>

$(function(){
$('.class li:first-child').addClass('test'); // 双方のリストの先頭のliにクラス付与
$('.class li:first').addClass('test'); // 最初に出現したリストの先頭のliのみにクラス付与
});

おかわりいただけるだろうか
first-childに関しては完全に条件に一致した思惑通りのしごとをしてくれています。
打って変わって、firstは１回しか動作しません。これは
firstは本当の最初の一回だけが対象になるので
最初に一致した時点で処理を止めてしまうのです。
これらの考え方に関しては、【last】と【last-child】の関係も同じです。

使い分け

なので、いろんな子要素がごっちゃになってるけど、最初だけ取得したいときは :firstを
同じ子要素だらけ(先頭に邪魔が入らないも含む)で複数パターンを一気に指定したいときは :first-childを
それぞれ指定するようにしましょう。