jQueryとはJavaScriptライブラリの一つでこれを使うと、簡単に記述でき、ブラウザ間によるjs挙動の差異も埋めてくれる。
人気のピークはすぎた感があるがそれでも便利なことには変わりはない。早速使ってみよう。
準備
1.以下のファイルをダウンロードし、好きな場所に解凍する。
2.先ほどダウロードしたフォルダはjQueryを用いたWebサイト開発に最適な構成である。これを複製していくことによって新しいプロジェクトを作成する。Templateフォルダを複製しフォルダ名をLesson01としよう。
3.Lesson01にあるindex.htmlを以下のように編集する。(pタグの中に文言を入れてidを付与した)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>タイトル</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- ここにコンテンツ -->
<p id="logo">joytas.net</p>
<script src="js/vendor/jquery-1.12.4.min.js"></script>
<script src="js/vendor/jquery-ui-1.12.1.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
4.保存したらブラウザで見てみよう。文字だけが表示されている。
5.スタイルをあてる、main.cssを以下のように編集
#logo{
margin:0;
background: #3999dd;
height:100vh;
line-height:100vh;
text-align: center;
font-size:140px;
color:white;
}
6.実行してみよう。大きくロゴが表示されれば成功だ。
jQueryで装飾
7.main.jsを以下のように編集し、実行する。文字が黄色くなった。
$(function(){
$('#logo').css({color:'yellow'});
});
[解説]
$(function(){
内側
});
この外側でくくっている部分は文書の読み込みが終わったら内側の処理を行うという意味である。文書の読み込み途中で処理を行ってしまうと不具合の原因となる場合があるので、毎回これでくくっておくとよいだろう。
$('#logo')
これで文書の中からidがlogoの要素を取得する。この要素取得の部分をセレクタという。
$('#logo').css({color:'yellow'});
idがlogoの要素のcssを上書きしている。
{color:'yellow'}
この波カッコで括られている部分はオブジェクトだ。
$('#logo').css({color:'yellow',fontSize:'30px'});
上記のようなオブジェクトを渡すことによって複数のスタイルを当たることができる。
イベント
8.以下のように一行追記しよう。
$(function(){
$('#logo').css({color:'yellow'});
$('#logo').on('click',function(){$(this).css({color:'red'})});
});
[解説]
on(‘イベント’,処理)と記述することによってイベント処理ができる。
今回はクリックlogoをクリックすると文字色を赤にする処理を入れた。
よく使うイベントの種類は以下
| mouseover | 要素にマウスがのったとき |
|---|---|
| mouseout | 要素からマウスが離れたとき |
| mouseenter | 要素にマウスがのったとき(バブリングなし) |
| mouseleave | 要素からマウスが離れたとき(バブリングなし) |
| change | 入力内容が変更されたとき |
| resize | 要素がリサイズされたとき |
メソッドチェーン
9.さきほどのコードはメソッドチェーンを使って短縮できる。以下のように修正しよう。
$(function(){
$('#logo').css({color:'yellow'})
.on('click',function(){$(this).css({color:'red'})});
});
[解説]
$(‘セレクタ’).funcA().funcB().funcC()….
このようにメソッドを繋げて記述することができる。このような手法をメソッドチェーンと呼ぶ。要素を探してくる$(‘セレクタ’）の部分は非常に処理コストが高いため、こうすることで処理速度を向上させることができる。
アニメーション
最近はcssのみでもかなりのことをできるようになってきたが、アニメーションさせたい時にjQueryを使用すると便利だ。
10.以下のように修正する。
$(function(){
$('#logo').on('click',function(){
$(this).animate({opacity:0,fontSize:'0px'},2000);
});
});
[解説]
animate(params, [duration], [easing], [callback])
を使うとアニメーションさせることができる[]は任意。
11.消えた後に復元する処理をいれよう。このTemplateにはeasingプラグインも入っているので戻ってくる時にBounceさせよう。
$(function(){
$('#logo').on('click',function(){
$(this).animate({opacity:0,fontSize:'0px'},2000,function(){
$(this).animate({opacity:1,fontSize:'140px'},2000,"easeOutBounce");
});
});
});
[解説]
easingで変化の度合いに変化をつけられる。jQuery自体にはswingとlinearしか入っていないがプラグインを入れることによって増やすことができる。種類や挙動に関して詳しく知りたい方は以下を参照のこと
easingプラグイン
コメント