jQueryのキホンのキをちょっと勉強したんでメモ
お仕事の手が空いたので、jQueryを少し勉強してみました。
なので、記録。
jQueryって何？
ざっくりというと「javaScript用のライブラリ」。
煩雑だったjavaScriptをめちゃくちゃ簡単に書けるようにしたもの。
クリックしたときのイベントやマウスオーバーしたときのイベントとかが簡単に書ける。
簡単に動きがあるWebページを作れちゃう素敵なもの。
どうやって使うの？
HTML上にjQueryを記述して、読み込むと使える。
<head>タグ内でjQueryの在り処を<script src="jQueryの在り処"></script>というふうに書いて読み込む。
読み込み方は（在り処のかきかた）2種類ある。
・Web上のソースを読み込む
→CDN(Contents Delivery Network)で配信されているもののリンクを貼って使う。
今回は、Google CDNを利用したので、以下のように書いた。
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
・ローカルにダウンロードしたソースを読み込む
→公式サイト(Download jQuery | jQuery)からダウンロードしたjquey本体を格納したフォルダのパスをHTML上に記載する。
HTMLと同じフォルダの場合は以下のような記述になる。
<head>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
</head>
jQueryの動きについては自分で書かないと動かない。
HTML上に直接書いてもいいけど、別ファイルにしてHTML上で呼び出すほうが見やすいと思う。
<body>タグの終わり直前に、実際の動きを書いたjsファイル(自分でイベントを書いたりしたプログラム)を呼び出す。
<body>
<!--なんかいろいろ書いた一番最後-->
<script src="○×.js(自分が作ったファイル)"></script>
</body>
HTMLは上から読み込むので、動作記述より先にjQueryを読み込まないと動かないので注意されたし。
jQueryの記述の仕方
画像をクリックしたら文字が消える簡単なプログラムを書いてみた。
HTMLファイル(今日の練習.html)
<!DOCTYPE html>
<html>
<head>
<title>練習</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<p>ああああああ</p>
<img id ="image" src="https://zukan.com/media/comment/original/comment_1344_20160604080437.jpg"width="300" height="200" >
<h1 id="unko">画像</h1>
<script src="script.js"></script>
</body>
</html>
jsファイル(script.js)
$(function(){
$('#image').click(function(){
$('#unko').fadeOut();
});});
jsファイルの書き方としては、セレクタ(要素的な？)を指定して、それに対して何か行動をしたとき（ここではid="image"をクリック）、どのような動きが起こるか(ここではid="unoko"がフェードアウト)を指定してやるカンジ。
セレクタについて
上記の例では、セレクタにidを使ったが、id以外でも指定できるので紹介。
idセレクタ
上記で使用したセレクタ。
$(function(){
$('#image').click(function(){
$('#unko').fadeOut();
});});
classセレクタ
クラスを指定する方法。
$(function(){
$('.image').click(function(){
$('#unko').fadeOut();
});});
要素セレクタ
要素を指定する方法
$(function(){
$('img').click(function(){
$('#unko').fadeOut();
});});
子孫セレクタ
$(function(){
$('div p').click(function(){
$('#unko').fadeOut();
});});
赤字部分は$('先祖 子孫')のように書いています。
参考
