読者です 読者をやめる 読者になる 読者になる

jQueryのセレクタ

readyメソッドについて

HTMLの読込みが終わった後に実行させるためのメソッドです。これがないとbody要素内のHTMLよりも先にhead要素内のjQuaryが実行されてしまいます。

readyメソッドの書き方

$(document).ready(function(){

//ここにjQueryの処理を記述

});

省略形の書き方

$(function(){

//ここにjQueryの処理を記述

});

セレクタ

jQueryスクリプトでは、(1)どのHTML要素を操作するかを「セレクタ―」で指定し、(2)操作する内容(メソッド)を記述します。jQueryは、ほぼこの形式で処理を記述します。

 

$(function(){

$('セレクタ―').jQueryメソッド;

});

 

セレクタの種類

CSSでよく利用されるセレクタ

要素セレクタ― $('要素名') 特定の要素

IDセレクタ― $('#ID名') 特定のID属性を持つ要素

クラスセレクター $('.クラス名') 特定のclass属性を持つ要素

子孫セレクター $('要素1  要素2') 特定の要素の内側にある要素

ユニバーサルセレクタ― $('*') 全ての要素

グループセレクタ― $('セレクタ―1, セレクタ―2,・・・') 複数のセレクタ

CSS2.1のセレクタ

セレクター $('親要素名>子要素名') 特定の要素の直下の子要素

隣接セレクター $('要素1+要素2') 特定の要素の次の要素

first-child疑似クラス $('要素:first-child') 同一要素内の最初の要素

CSS3のセレクタ

間接セレクタ― $('要素1~要素2') 特定の要素の後に出現する要素

否定疑似クラス $('要素1:not(要素2)') 特定要素のうち要素2の条件を除く

empty疑似クラス $('要素:empty') 子要素やテキストを含まない要素

ntn-child疑似クラス $('要素:nth-child(番号)') 要素内の指定した番号の要素

last-child疑似クラス $('要素:last-child') 要素内の最後の要素

only-child疑似クラス $('要素:only-child') 特定の要素が1つだけ含まれる要素

nth-last-child疑似クラス $('要素: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') 1つだけ存在する要素

lang疑似クラス $(':lang(言語)') 特定の言語を指定された要素

CSSの属性セレクタ

[attribute] $('[属性名]') 特定の属性を持つ要素

[attribute='value'] $('[属性名="値"]') 特定の属性が指定した値を持つ要素

[attribute!='value'] $('[属性名!="値"]') 特定の属性が指定した値を持たない要素

[attribute^='value'] $('[属性名^="値"]') 特定の属性が指定した値で始まっている要素

[attribute$='value'] $('[属性名$="値"]') 特定の属性が指定した値で終わっている要素

[attribute*='value'] $('[属性名*="値"]') 特定の属性が指定した値を含んでいる要素

[attributeFilter1] $('[属性セレクタ―1][属性セレクタ―2]') 複数の属性セレクタ―に該[attributeFilter2]                    当する要素

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') 子要素やテキストを含む要素

 

セレクタ―を使ってみる

セレクタ―練習1

<script>
//jQueryコードを記述
$(function(){
$('h1').css('color','red');//要素セレクタ
$('li').css('color','red');//要素セレクタ
$('#top').css('color','blue');//idセレクタ
$('#last a').css('color','green');//idセレクタ
$('.li > span').css('color','yellow');//idセレクタ
});
</script>
</head>

<body>
<h1>大見出し</h1>
<ul>
<li id="top">テキストテキスト</li>
<li class="li"><span>テキスト</span>テキスト</li>
<li class="li">テキストテキスト</li>
<li id="last"><a href="#">テキストテキスト</a></li>
</ul>
</body>

 

jQueryを実行前のテキスト

f:id:develog:20160921011845p:plain

jQueryを実行後のテキスト

f:id:develog:20160921004708p:plain

セレクタ―練習2

<script>
//jQueryコードを記述
$(function(){
$('#first ~ li').css('color','blue');//間接セレクタ
$('#first + li').css('color','green');//隣接セレクタ
$('[class]').css('color','red');//CSS属性セレクタ
$('[title="two"]').css('color','red');//CSS属性セレクタ
});
</script>
</head>

<body>
<h1>大見出し</h1>
<ul>
<li id="first">テキストテキスト</li>
<li>テキストテキスト</li>
<li>テキストテキスト</li>
<li class="second">テキストテキスト</li>
<li title="two" id="third">テキストテキスト</li>
<li id="fourth">テキストテキスト</li>
</ul>
</body>

 

jQueryを実行前のテキスト

f:id:develog:20160921011032p:plain

jQueryを実行後のテキスト

f:id:develog:20160921011953p:plain

セレクタ―練習3

<script>
//jQueryコードを記述
$(function(){
$('li:not(:first-child)').css('color','red');//否定疑似クラス
});
</script>
</head>

<body>
<h1>大見出し</h1>
<ul>
<li id="first">テキストテキスト</li>
<li>テキストテキスト</li>
<li>テキストテキスト</li>
</ul>
</body>

 

jQueryを実行前のテキスト

f:id:develog:20160921012024p:plain

jQueryを実行後のテキスト

f:id:develog:20160921011341p:plain