Last active
December 22, 2015 22:09
-
-
Save mly520/6538060 to your computer and use it in GitHub Desktop.
jquery-css-selector
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
さて前回jQueryをダウンロードしましたが、今回は実際にjQueryを使う際に必要になる基本セレクタについてを勉強します。 | |
まずセレクタとは何なのかを簡単に説明します。 | |
下記のようなHTMLがあったとします。 | |
<html> | |
<head> | |
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"> | |
<title>jQueryを使ってみよう。(基本編 セレクタ1)</title> | |
<script type="text/javascript" src="../jquery-1.2.6.min.js"></script> | |
</head> | |
<body> | |
<p>Pタグのみの指定です。</p> | |
<p id="idtxt">Pタグに「id=idtxt」を指定しています。</p> | |
<p class="classtxt">Pタグに「class=classtxt」を指定しています。</p> | |
</body> | |
</html> | |
このPタグ内のテキストの色をそれぞれ変更する場合、例えばCSSで下記のように指定すると思います。 | |
//--------------------------- | |
// css selector | |
//--------------------------- | |
p { | |
color: red; | |
} | |
p#idtxt { | |
color: blue; | |
} | |
p.classtxt { | |
color: green; | |
} | |
//--------------------------- | |
CSSではPタグのみの指定、ID名を割り当てて指定、Class名を割り当てて指定、という風に記述します。 | |
jQueryでもCSSのようにHTMLタグ、ID名、Class名を指定し該当するものに対して処理を実行する、といった記述をします。プログラムで何か処理をする場合、何処に対して何をしろ、という命令を記述します。「何処で何をする」の「何処で」にあたるもの、これをセレクタと言います。(以下セレクタと呼びます。) | |
それでは上記のCSSをあえてjQueryで記述してみます。 | |
<html> | |
<head> | |
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"> | |
<title>jQueryを使ってみよう。(基本編 セレクタ1)</title> | |
<script type="text/javascript" src="../jquery-1.2.6.min.js"></script> | |
<script language="JavaScript"> | |
$(function (){ | |
$("p").css("color","red"); | |
$("p#idtxt").css("color","blue"); | |
$("p.classtxt").css("color","green"); | |
}); | |
</script> | |
</head> | |
<body> | |
<p>Pタグのみの指定です。</p> | |
<p id="idtxt">Pタグに「id=idtxt」を指定しています。</p> | |
<p class="classtxt">Pタグに「class=classtxt」を指定しています。</p> | |
</body> | |
</html> | |
「$(“p”).〜、$(“p#idtxt”).〜、$(“p.classtxt”).〜」と$(“”)内にHTMLタグ、ID名、Class名を記述し、次にフォントカラーを赤にする、という記述になります。「何処で=$(“p”).」「何をする=css(“color”,”red”)」といった感じです。 | |
またセレクタを複数指定することもできます。「,」カンマで区切るだけです。 | |
//--------------------------- | |
// js selector | |
//--------------------------- | |
$("p#idtxt,p.classtxt").css("font-size","24px"); | |
このようにセレクタの記述方法は、これを知ってないと始まらない!っというとても重要な要素です。CSSを触る方であればすぐにピントくると思うのですが、CSSを触ったことのない方は少し戸惑うかもしれません。上記のサンプル等を少し自分で書き換えてみたり、いろいろ試してなれて下さいね。 | |
次回も引き続きセレクタについて勉強していきます。 | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment