はじめに
今回自分はjavascriptを勉強しております。その中でjQueryを用いることで、様々なことが出来るようになるようです。
その中の基本的なところの一部をここに記録として残そうと思います。
何か間違いありましたら、コメント欄にてご教授お願い致します。
準備
- Visual studio code
- 公式サイトでjQueryをダウンロードし別名保存
- html、css、javascriptファイルを同ディレクトリ内に作成
- ダウンロードしたjQueryファイルを上記フォルダ内に配置
jQyueryを利用する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel = "stylesheet" href = "app.css">
</head>
<body>
#このboxclassを使って色々試します。
<div class = "box"></div>
#必ずjQueryファイルを先に記述
<script src="jquery.min.js"></script>
#jsファイルを読み込ませる記述
<script src="app.js"></script>
</body>
</html>
ここまでで準備完了です。
jQueryを使って出来ること(一部)
出来ることを一部ですが、記述方法を書いていきたいと思います。
アニメーション
上から下にスライド
jQueryはHTMLの読み込みが終了してからでないと動作しないみたいです。
なので、boxは最初表示されていない状態にしないといけません。
.box {
display: none; (非表示にする記述)
background-color: #FF0000;
height: 200px;
width: 200px;
}
$(function(){
$(".box").slideDown();
});
google chromeでhtmlファイルを読み込んでみると...
逆もあります。
下から上にスライド
今回は最初のHTMLはboxが表示されている状態にしたいのでcssファイルのdisplay: none;をコメントアウトします。
.box {
background-color: #FF0000;
height: 200px;
width: 200px;
}
そして、slideDownをslideUpに変更してみます。
$(function(){
$('.box1').slideUp();
});
リロードすると...
要素を非表示にする
今回はboxは最初表示されている状態にしたいので再度display: none;を記述します。
.box {
display: none;
background-color: #FF0000;
height: 200px;
width: 200px;
}
次のように記述
$(function(){
$(".box").hide();
});
hideでhtmlを読み込んだ後、boxを隠すことができます。
イベントの検出
マウスオーバーイベント、マウスアウトイベント
赤いboxの中にカーソルが入ったときに、青に変わるようにしつつ、逆にカーソルがbox内にある状態から再度外の出た時に赤いboxに戻るように記述したいと思います。
.box {
background-color: #FF0000;
height: 200px;
width: 200px;
}
$(function(){
$(".box").mouseover(function(){ //カーソルがboxにインしたら
$(".box").css({"background-color: #0000FF"}); //boxが青に変化
})
$(".box").mouseout(function(){ //カーソルがboxからアウトしたら
$(".box").css({"background-color: #FF0000"}); //boxが赤に戻る
})
});
ここまでで純粋に、すごいなと思いました。初学者ゆえに(笑)
javascriptとjQueryもっと勉強していきたいと思わされました。初学者ゆえに(笑)※2回目
Class属性の追加と削除
上記のやり方だとCSSをイベント発生時に毎回記述しないといけません。
なのでマウスオーバー時のClassをCSSであらかじめ設定しておくことで、その設定の追加と解除を自由に変更することができます。
記述してみましょう！
.box {
background-color: #FF0000;
height: 200px;
width: 200px;
}
/* boxをクリックした時のcss設定(クラス) */
.box-in {
border: 10px solid black;
}
$(function(){
$(".box").mouseover(function(){ //カーソルがbox内にインしたら
$("box").addClass("box-in"); //cssのbox-inクラスを追加(add)
});
$(".box").mouseout(function(){ //カーソルがboxからアウトしたら
$(".box").removeClass("box-in"); //cssのbox-inクラスを削除(remove)
});
});
マウスクリックのイベント設定
上記はカーソルが動かすだけのものでした。しかし、実際はユーザーがクリック操作することが多いと思います。その際にも使える"マウスクリックイベント"があります。
**$("セレクタ").click();**でクリックしたら...のように記述することで使えるのですが、これだとクリックしてイベントが終了してしまいます。
なのでクリック時に同時に多くのイベントを付与できる記述法があります。
$(function(){
$(".box").on("click",function(){ //onを記述することで、クリック時のイベントを設定
$(".box").addClass("box-in"); //cssのbox-inクラスを追加(add)
});
$(".box").mouseout(function(){ //カーソルがboxの外にアウトしたら
$(".box").removeClass("box-in"); //cssのbox-inクラスを削除
})
});
このように記述することでクリック時のイベントを複数設定することができます。
ただ、あまり重複しすぎると思い描いた動作にならない事があるようなので最初のうちはあまりたくさんのイベントを埋め込むのは良くないかもしれませんね。基礎がしっかりしていれば、すぐに解決できそうですが...
まとめ
本当に基本的な部分ですが、これらを組み合わせる事で少し動的なサイトの作成ができそうでワクワクしています。
今思いつくのは、ハンバーガーメニューも少し応用が必要だと思いますが今日習ったような形なのかな？と考えています。
今回はboxに対してでしたが、もっと勉強してアプリケーション作成に活かせるように勉強を続けたいと思います。
最近色んなサイトを見て、これはどうなっているんだろう？とか考えたりしています。笑
いつかは、これはこうしているのではないか...みたいにある程度の経験から方法が思いつくようなエンジニアになりたいと思っています。遠い先でしょうが...
日々精進します！！！
ありがとうございました。