jQueryのセレクター

jQuery

jQueryを使えるようになるためには、まずセレクターの使用方法を覚えましょう。
CSSのセレクターと同じですから、HTMLコーダーさんはすぐに使えるようになります。

基本構文のところでも書きましたが、jQueryはセレクターで操作したいHTMLを指定して、メソッド(プロパティの場合もある)を操作して処理を行います。

以下セレクタの書き方とその内容のまとめです。jQueryというよりCSSの内容です。

jQueryのセレクター

名称 書式 指定対象
要素セレクター $("要素名") 要素名で指定
IDセレクター $("#ID名") id属性で特定要素を指定
classセレクター $(".class名") class属性を持つ要素を指定
子孫セレクター $("要素1 要素2") 要素1を親に持つ子要素2
ユニバーサルセレクター $("*") すべての要素
グループセレクター $("セレクター1,セレクター2") 複数のセレクター
CSS2.1
子セレクター $("親要素名>子要素名") 特定の要素の直下の子要素
隣接セレクター $("要素1+要素2") 特定の要素の次の要素
fiest-child疑似クラス $("要素:first-child") 同一要素内の最初の要素
CSS3
間接セレクター $("要素1~要素2") 特定の要素の後に出現する要素
否定疑似クラス $("要素1:not(要素2)") 特定の要素のうち要素2の条件を除く要素
empty疑似クラス $("要素:empty") 子要素やテキストを含まない要素
nth-chid疑似クラス $("要素:nth-child(番号)") 要素内の指定した番号の要素
last-child疑似クラス $("要素:last-child") 要素内の最後の要素
only-child疑似クラス $("要素:only-child") 特定の要素が一つだけ含まれる要素
nth-last疑似クラス $("要素:nth-last-child(番号)") 要素内を後ろから数えて指定した番号にある要素
nth-of-type疑似クラス $("要素:nth-of-type(番号)") 同一要素で指定した番号にある要素
nth-last-of-type疑似クラス $("要素:nth-last-of-type(番号)") 同一要素で後ろから数えて指定した番号にある要素
first-of-type疑似クラス $("要素:first-of-type(番号)") 同一要素で最初にあたる要素
last-of-type疑似クラス $("要素:last-of-type(番号)") 同一要素で最後にあたる要素
only-of-type疑似クラス $("要素:only-of-type(番号)") 一つだけ存在する要素
lang疑似クラス $(":lang(言語)") 特定の言語を指定された要素
cssの属性セレクター
[attribute] $("[属性名]") 特定の属性を持つ要素
[attribute=’value’] $("[属性名=’値’]") 特定の属性が指定した値を持つ要素
[attribute!=’value’] $("要素名[属性名!=”値"]) 特定の属性が指定した値をもたない要素
[attribute^=’value’] $("[属性名^=’値’]") 特定の属性が指定した値で始まっている要素
[attribute$=’value’] $("[属性名$=’値’]") 特定の属性が指定した値で終わっている要素
[attribute*=’value’] $("[属性名*=’値’]") 特定の属性が指定した値を含んでいる要素

[attributeFilter1]

[attributeFilter2]

$("[属性セレクター1][属性セレクター2]") 複数の属性セレクターに該当する要素
jQueryの独自セレクター
firstセレクター $("要素:first") 指定した要素の最初の要素
lastセレクター $("要素:last") 指定した要素の最後の要素
evenセレクター $("要素:even") 指定した要素の偶数番目の要素(0から数える)
oddセレクター $("要素:odd") 指定した要素の奇数番目の要素(0から数える)
eqセレクター $("要素:eq(番号)") 指定した番号の要素(番号は0から数える)
ltセレクター $("要素:lt(番号)") 指定した番号より前の要素(番号は0から数える)
gtセレクター $("要素:gt(番号)") 指定した番号より後の要素(番号は0から数える)
headerセレクター $(":header") h1〜h6までのheading要素
containsセレクター $("要素:contains(文字列)") 特定の文字列が含まれている要素
hasセレクター $("要素1:has(要素2)") 特定の要素が含まれている要素
parentセレクター $("要素:parent") 子要素やテキストを含む要素

疑似クラスと疑似要素どっちがどっちだったか忘れがちですね。jQueryでは疑似クラスをセレクターで使用します。
擬似クラスは要素が特定の状態にある場合にスタイルを指定するものです。
擬似要素は要素内の特定の文字や行に対してスタイルを指定したり、そもそも無い文字や画像を追加することができます。
jQueryのセレクタでは使用しませんが、疑似要素の例
:first-letter
:first-line
:before
:after

スポンサーリンク

お勧め書籍

AI関連

Python

JavaScript

HTML CSS関連

統計学

jQuery
スポンサーリンク
dororoをフォローする
IT工房|AI入門とWeb開発
タイトルとURLをコピーしました