初心者向けjQuery入門

初心者向けjQuery入門講座です

未分類

jQuery セレクタでクラスとIDと要素を指定する方法

投稿日:

jQuery セレクタでクラスとIDと要素を指定する方法

jQuery セレクタ

jQueryでは要素にアクセスするにはセレクタを指定しなければいけません。
要素を指定するには$()でセレクタを指定しなければいけません。
主に$()では””か”で要素を括ることが必要です。

サンプル
$(“p”).メソッド(パラメータ);

サンプルは要素セレクタを指定しています。
要素とはhtmlでのタグのことです。
pとかdivとかですね。

セレクタとは
英語で選ぶ人、選択者という意味があります。
スペルはselectorです。
cssでは要素を指定するときに色々な方法がありますね。
その時の選択方法の名前ぐらいの認識です。

メソッドやパラメータについては
メソッドごとに使用方法がありますので
その時覚えればいいでしょう。

jQuery クラス

クラスとは
部類、種類とか一つのまとまりとか。
学校のクラスもそういう意味ですね。

htmlではclassを要素につけることができます。

要素に名前をつけるのは要素の一部だけ変えたいときは
名前を指定してやることで一部だけcssを適用したりできます。
またまとめて一部を除いでcssをまとめて適用できますね。

cssではクラスの指定はクラス名の先頭に.をつけます。

cssサンプル
.sample{

}

メソッドの前にも.でつないでますがこれとは混同しないでください。

jQueryのサンプル

$(“.classname”).メソッド(パラメータ);

サンプル

<html>
<head>
<script src=”jquery-3.2.1.js”></script>

<script>
$(document).ready(function(){

$(“.red”).css(“color”,”red”);

});
</script>
<title>

</title>
</head>

<body>

<p class =”red”>red</p>
</body>
<html>

jQuery id

idはタグに一つしか名前をつけることができません。
同じ名前でクラスみたいにまとめることはできません。
学校の出席番号が複数あることはありませんよね。
個人を識別できません。

idは要素名の前に#をつけます。

cssサンプル
#sample{

}

jQueryのサンプル

$(“#idsname”).メソッド(パラメータ);

サンプル

<html>
<head>
<script src=”jquery-3.2.1.js”></script>

<script>
$(document).ready(function(){

$(“#red”).css(“color”,”red”);

});
</script>
<title>

</title>
</head>

<body>

<p id =”red”>red</p>
</body>
<html>

スポンサードリンク




スポンサードリンク




-未分類
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

jQuery prevALLとnextALL前と後の兄弟要素を全て取得する

jQuery prevALLとnextALL前と後の兄弟要素を全て取得する jQuery prevALL前の兄弟要素を全て取得する prevALLメソッドは指定した前の兄弟要素を全て取得します。 サン …

no image

jQuery mouseoverとmouseoutマウスイベントの方法

Query mouseoverとmouseoutマウスイベントの方法 Query mouseoverマウスを乗せた時のイベントの方法 mouseoverはマウスを要素に乗せた時に発生するイベントです。 …

no image

jQuery 隣接セレクタと子セレクタのチャイルドセレクタ

jQuery 隣接セレクタと子セレクタのチャイルドセレクタ jQuery 隣接セレクタ 隣接セレクタとは隣に接しているセレクタの二つ目の要素を指定します。 隣り合っているとなっていますが前後にあるセレ …

no image

jQuery 子孫セレクタとユニバーサルセレクタと複数

jQuery 子孫セレクタとユニバーサルセレクタと複数 jQuery 子孫セレクタ 子孫セレクタとは 要素には親要素と子要素があります。 ulだと子はliですね。 それとdivの中にp要素を入れ子にし …

no image

jQuery nth-child偶数と奇数と二番目指定する方法

jQuery nth-child偶数と奇数nth-last-childとnth first child jQuery nth-child nth-childは何番目の要素を指定するセレクタです。 nt …