jQueryを用いてシングルページアプリケーションを作成したので、
jQueryの基本的な事と、実際に"よく使うなこれ"っていうイベントをまとめてみました。
初心者目線なのでかなり基本的なことです。温かい目で見てくれると嬉しいです。
そもそもjQueryとは…
まず、jQueryって何？って話からしようと思います。
Javascriptと何が違うの？ってとこから筆者は始まりました。
$ ってついてるけど、これに何の意味があるの？、と。
結論から言えば、JavascriptよりjQueryの方が記述量が少なく、Javascriptをより扱いやすくしたもの。
筆者の感想としてはJavascriptの形式で書いたほうが楽なとき、jQueryの形式で書いたほうが楽なとき、と分けて記述するのが良いのではないかな、と思いました。
そしてこの$マーク。
結論から言えば、jQueryにおいての「$()」は関数になります。
「jQuery()」と記述しても問題ないですが、$のほうが明らかに楽でした。
jQueryを使うことのメリット
わざわざjQuery使わなくても、Javascriptで済むのならそれでいいのでは？となってしまってはゴミ記事になってしまうので、jQueryを使うことで何が良いかを書いていきます。
HTML、CSSの操作が楽
document.getElementById('sample').innerHTML = 'Hello,World!';
$('#sample').text('Hello,World!');
クリックしたら画面が変化する、マウスホバーしたら画像が変化する、などのモーションはWebページ作成においては必須になっています。
もちろんJavascriptやCSSで処理を書くことも可能ですが、jQueryになると比較的コード量を少なくすることが出来ます。
一言で言えば、「簡潔な記述で、効率よく開発作業ができる」、というのがメリットではないかと。
上記のようなシンプルなコードでは分かりにくいかもしれないですが、量が増えるとかなり差が開いてきます。
どんなブラウザでも対応可能
Javascriptだと、ブラウザによって思った通りの動作がしないことがありますが、jQueryを使えばどのブラウザでも思った通りの動作をしてくれます。これはありがたい。IEだったり、Chromeだったり、色々ありますから…。
そのおかげで、jQueryで作られたWebページはかなり多いです。
で、実際どうやって記述するのか
以下の2パターンが主になります。
①HTMLに直接書き込む場合
<script type="text/javascript">
・・・・・
</script>
scriptタグを使って、その中にコードを書いていくパターン。
②別ファイルを作成してHTMLに読み込ませる場合
<head>
<script type="text/javascript" src="パス/ファイル名"></script>
</head>
htmlに直接書いても良いし、別ファイルを作って読み込むのでも良いです。
ただ、webページを作ろうなんてときにはかなりのコード量になるので、ファイルを別で作って読み込ませるのがおすすめ。
基本的な構文
より具体的な記述の仕方です。
$('セレクター').イベント();
セレクター → ”何を”
イベント → ”どうするか”
一番の基本形。
セレクターにどんなものが入るのかと、イベントを一部紹介していきます。
セレクターに入るもの
セレクターには、処理の対象が入ります。
代表的なものは以下の通りです。
| 指定方法 | 書き方 |
|---|---|
| id名で指定 | #sample |
| class名で指定 | .sample |
| タグで指定 | p |
| 複数指定 | .sample,.sample |
対象となる属性をclass名・id名を使ったり、タグで直接指定したり出来ます。
idとclassが主だって使われるかなと思います。
ちなみにですが、セレクターにはシングルクォーテーションを忘れずに。
以下は記述の例です。
id
$('#sample').on('click',function(){
//jQueryのコード
)};
class
$('.sample').on('click',function(){
//jQueryのコード
)};
タグ
<body>
<p> Hello world! </p>
<script>
var pTag = $('p').text();
console.log( pTag );
</script>
</body>
イベント
イベントは"どうしたいのか"って指定するところなのですが、色々上げていくとキリがないので、主観でよく使う・便利なものをまとめていこうと思います。
click
何かを「クリックしたとき」、こうしたい！というときに使う。めちゃくちゃ使う。
$('セレクター').click(function(){
//jQueryのコード
})
ちなみに、実際記述するときは .on を用いて書くほうがおすすめです。
on
$('#sample').on('click',function(){
//jQueryのコード
})
.onがないと、クリックイベント後に発生した要素に対して、クリックイベントが有効でなくなってしまいます。
なので、onをつけた書き方にすれば、動的に生成した要素にもクリックイベントは有効になりますし、複数のイベント指定もできます。
.onと.clickはセットで覚えておくと良いと思います。
appendとprepend
ざっくりと言えば「要素や属性を追加したい」ってときに使うものです。
例えば、既存の属性の中に新たに属性を挿入したいときとか、「この属性の前にこのエラー文を表示させたい」とき、とかなど。
append
$('セレクター').append('引数');
「指定したセレクターに」、「指定した要素を」追加します。
clickイベントと一緒に考えるとわかりやすいかもしれないです。
appendTo
$('セレクター').appendTo('引数');
Toがつくと、「引数で指定された要素に」、「指定したセレクターを」追加することになります。
prepend
prependも似たような考え方ですが、”pre”がついているから「前に」追加すると考えます。
$('セレクター').prepend('引数');
「指定したセレクターの前に」、「指定した要素を」追加します。
prependTo
$('セレクター').prependTo('引数');
"To"がついているので、「指定した要素の前に」、「指定したセレクターを」追加します。
empty
$('セレクター').empty();
セレクターの中身を空っぽにします。
クリックイベントで何かを表示させるとき、この子を書いておくと表示を重複させなくて済みます。
記述例⇓
<body>
<div id="sample">
<p>SAMPLE</p>
</div>
</body>
:jQuery
$('#sample').empty();
<body>
<div id="sample">
</div>
</body>
remove
$('セレクター').remove();
指定したセレクターの要素を削除します。emptyはその属性の中身を空にするものですが、removeは属性そのものを無くしてしまいます。
記述例⇓
<body>
<div id="sample">
<p>SAMPLE</p>
</div>
</body>
$('#sample').remove();
<body>
</body>
change
$('セレクター').change(function(){
)}
変更を検知して、その場で動作してくれます。
たとえば、プルダウン形式のセレクトボックスでoption valueを選択したときとか。
<body>
<select>
<option value="1">sample1</option>
<option value="2">sample2</option>
</select>
<script>
$('select').change(function() {
console.log('changed');
});
</script>
</body>
色々と使ってみた感想
イベントは調べれば調べるほど沢山の種類がありました…。
知っているのと知らないのでは作業効率に結構差が出てくるのではないでしょうか。
うまいこと活用できるようにしていきたいです。