前回は jQuery のセレクタの使い方の基本的な方法として HTMLの要素 , id名 , class名 を単独での使い方を説明しましたが、 今回はそれらを複合的に組み合わせて使う方法について説明します。
組み合わせの方法としては、AND的な方法とOR的な方法があります。 AND的な方法とはセレクタの中で要素を連続で記述し、要素を絞り込むことです。 OR的な方法とはセレクタを列挙してどれにでも該当させることです。
■「HTMLの要素」AND「HTMLの要素」
HTMLの要素同士のANDのセレクタの例を以下に示します。
ボタンクリックイベントの関数宣言の中で div タグと p タグのAND指定を行っています。
2つのdiv タグと p タグの指定の間には空白を入れます。空白が無いと別々のものと判定ができません。
ボタンをクリックした時に全ての div タグで囲まれたHTML要素の内部の全ての p タグのテキストが「ああああああああ」に変わります。
<html>
<head>
<meta charset="utf-8">
<title>test jQuery</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<p>メッセージあああ</p>
<div>
メッセージ０<br />
<p>メッセージ１</p>
<p>メッセージ２</p>
<p>メッセージ３</p>
</div>
<p>メッセージいいい</p>
<div>
<p>メッセージ４</p>
</div>
<button class="btn">変更</button>
<script>
$(function () {
//<button class="btn">のクリックイベントの関数を宣言
$(".btn").click(function(){
//<div>要素内の<p>の全てのTEXTを変更
$("div p").text("ああああああああ");
})
});
</script>
</body>
上の例を以下に実際のHTMLで示します。
⇒「HTMLの要素」AND「HTMLの要素」の例
■「HTMLの要素」AND「class名」
HTMLの要素とclass名のANDのセレクタの例を以下に示します。
div タグと class名 指定を連続して指定します。 class名 指定は先頭に .(ドット) を付けます。
この連結する時に「HTML要素名」と「class名」の間に空白を入れない場合と入れる場合で意味合いが異なります。
空白を入れない場合は指定した「HTML要素名」のclassが、指定した「class名」であるものが対象となります。
また、空白を入れる場合は指定した「HTML要素名」の中のHTML要素でclassが指定した「class名」であるものが対象となります。
以下の例では、ボタンのクリック関数の最初の処理で <div class="msgchg"> のテキストが全て「ああああああああ」に変わります。 （注意するのは <p>メッセージＡ</p> が全て「ああああああああ」に置き換わることです）
2番目の処理では div タグで囲まれたHTML要素の内部の class="msgchg" の p タグのテキストが「いいいいいいいい」に変わります。
<html>
<head>
<meta charset="utf-8">
<title>test jQuery</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<p>メッセージあああ</p>
<div class="msgchg">
<p>メッセージＡ</p>
</div>
<div>
メッセージ０<br />
<p class="msgchg">メッセージ１</p>
<p>メッセージ２</p>
<p>メッセージ３</p>
</div>
<p>メッセージいいい</p>
<button class="btn">変更</button>
<script>
$(function () {
//<button class="btn">のクリックイベントの関数を宣言
$(".btn").click(function(){
//<div>要素の<class="msgchg">の全てのTEXTを変更
$("div.msgchg").text("ああああああああ");
//<div>要素内の要素が<class="msgchg">の全てのTEXTを変更
$("div .msgchg").text("いいいいいいいい");
});
});
</script>
</body>
</html>
上の例を以下に実際のHTMLで示します。
⇒「HTMLの要素」AND「class名」
■「class名」AND「class名」
「class名」同士のANDのセレクタの例を以下に示します。class名 指定は先頭に .(ドット) を付けます。
この連結する時に「class名」と「class名」の間に空白を入れない場合と入れる場合で意味合いが異なります。
空白を入れない場合は、classの中が複数指定された「class名」を持つHTML要素が対象となります。
また、空白を入れる場合は最初に指定した「class名」を持つHTML要素内部に、2番目に指定した「class名」持つHTML要素が対象となります。
以下の例では、 ボタンのクリック関数の最初の処理でclassが class="divchg msgchg" のテキストが全て「ああああああああ」に変わります。 （「メッセージ３」「メッセージ４」のところが「ああああああああ」となります）
2番目の処理ではclassが class="divchg" のHTML要素の内部のclassが class="msgchg" のHTML要素のテキストが「いいいいいいいい」に変わります。 （注意するのは「メッセージ３」のところが2つの処理に該当するため、表示が「いいいいいいいい」となります）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test jQuery</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<p>メッセージあああ</p>
<div class="divchg">
メッセージ０<br />
<p class="msgchg">メッセージ１</p>
<p>メッセージ２</p>
<p class="divchg msgchg">メッセージ３</p>
</div>
<p>メッセージいいい</p>
<div>
<p class="divchg msgchg">メッセージ４</p>
</div>
<button class="btn">変更</button>
<script>
$(function () {
//<button class="btn">のクリックイベントの関数を宣言
$(".btn").click(function(){
//1個の要素のクラスが<class="divchg msgchg">の全てのTEXTを変更
$('.divchg.msgchg').text("ああああああああ");
//<class="divchg">の<div>要素内の<class="msgchg">の全てのTEXTを変更
$('.divchg .msgchg').text("いいいいいいいい");
});
});
</script>
</body>
</html>
上の例を以下に実際のHTMLで示します。
⇒「class名」AND「class名」
■「class名」OR「class名」
「class名」同士のORのセレクタの例を以下に示します。class名 指定は先頭に .(ドット) を付けます。
「class名」を ,(カンマ) で連結することで指定された「class名」を持ったHTML要素が対象となります。
以下の例では、classが class="msgchg1" class="msgchg2" class="msgchg5" class="msgchg6" の要素のテキストが全て「ああああああああ」に変わります。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test jQuery</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<p>メッセージあああ</p>
<div>
<p class="msgchg1">メッセージ１</p>
<p class="msgchg2">メッセージ２</p>
<p class="msgchg3">メッセージ３</p>
</div>
<p class="msgchg4">メッセージ４</p>
<div>
<p class="msgchg5">メッセージ５</p>
</div>
<p class="msgchg6">メッセージ６</p>
<button class="btn">変更</button>
<script>
$(function () {
//<button class="btn">のクリックイベントの関数を宣言
$(".btn").click(function(){
//指定された複数クラスの要素のTEXTを変更
$('.msgchg1,.msgchg2,.msgchg5,.msgchg6').text("ああああああああ");
});
});
</script>
</body>
</html>
上の例を以下に実際のHTMLで示します。
⇒「class名」OR「class名」
コメント