25日目。JQueryでクリック、マウスオーバーで動くページを作りました。
25日目の今日はProgateのJQuery中級編にチャレンジしました。
クリックやマウスを乗せる、外すといったイベントをキャッチして、HTMLやCSSを書き換える仕掛けを作りました。
最初は何をやっているかわからなくて、2周まわってようやく、なるほどーとなりました。
コードに書いた事と、動作させたい事がだんだん結びついてきた感じです。まさに「言語」という感覚です。
JQuery
http://appdays.herokuapp.com/Day25/
WEBページを作ろう
JQueryが使えると動きのあるページがつくれる！
jQueryの準備
・JQueryを使うには、Headの中でライブラリのURLを読み込む。
・xxx.jsファイルに書き込む。</body>の直前に書くとWebページの表示が早くなる。→ へええーってなりました。HTMLをずらずらーっとたくさん書いて、最後にjsを読み込みます。なるほどーっ。
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<h1>・・・
<h2> ・・・
・・・・・・
・・・・・・
<script src = "script.js"></script>
</body>
・HTMLの読み込みが完了してから、JQueryの操作を開始するとよい。そのためにReadyイベントを使用する。
これを省略して$(function(){ });と書く。→ 省略形のしか見たことがありませんでした。Readyが隠れていたんですね！
モーダル
モーダルってなんでしょう。クリックすると表示されるメニューの事でいいでしょうか。
よく広告なんかで見かけますよね。
モーダルウィンドウ（英: modal window）は、コンピュータアプリケーションソフトウェアのユーザインタフェース設計において、何らかのウィンドウの子ウィンドウとして生成されるサブ要素のうち、ユーザーがそれに対して適切に応答しない限り、制御を親ウィンドウに戻さないもの。
Wikipedia モーダルウィンドウ
なるほど。
モーダルは、①CSSで隠しておいて、②Clickしたら表示するように作ります。
なので、コーディングの最初は表示されっぱなしでした。おもしろい。
そのCSSにdisplay: none;として、一旦消しておきます。
そして、画面上のボタンをクリックすると、CSSを書き換えて表示させる、という仕組みでした！
ここでidとclassのどっちがどっちか混乱したのでおさらいしました。
id １ページ１箇所だけ。場所を指定してそこにジャンプしたり。
class １ページ何箇所でも。今回はログインモーダルと登録モーダル、両方に同じ閉じるボタンをclassで使いました。
参考にしたページでは、idは優先順位を考えるのが大変になるので、とりあえずclassを使えば安全とありました。ただし、idの方が表示が早いそうなので、目的や好みで使い分けている感じでしょうか。
【イラスト解説】divに付いているidとclassの意味と使い方
https://webliker.info/34436/
hover機能の準備
hoverはマウスの矢印がのった時に反応する機能です。
マウスをのせた時に動作させたいエリアを<div class="xxx"></div>で囲って、
JQueryにてマウスを乗せた時、外した時の動作を書いておきます。
$('.lesson-hover').hover(
function() {
// カーソルをのせた時の処理
$(this).find(`.text-contents`).addClass('text-active');
},
function() {
// カーソルをはずした時の処理
$(this).find(`.text-contents`).removeClass('text-active');
}
);
これが面白いのは、一旦読んだCSSを一時的に書き換えているんですね！
アコーディオン
クリックするとメニューが開くあれです。
こちらも、最初は隠しておきたいメニューをCSSで隠しておいて、マウスでクリックしたらJQueryでメニューが開いているかを判定し、開いていたらCSSで隠すよう、閉じていたらCSSで表示するように書いておきます。
// 「.faq-list-item」のclickイベントを作成してください
$('.faq-list-item').click(function() {
var $answer = $(this).find('.answer');
if ($answer.hasClass('open')) {
$answer.removeClass('open');
} else {
$answer.addClass('open');
}
});
さらに、JQueryでCSSを書き換えられる、ということはHTMLの中身も書き換えられる！
$(this).find('span').text('Hello');
これは、指定の要素のSPANタグの中身をHelloに変えています。
おもしろーい！！！
完成！
（所要時間 3時間）
Author And Source
この問題について(25日目。JQueryでクリック、マウスオーバーで動くページを作りました。), 我々は、より多くの情報をここで見つけました https://qiita.com/robamimim/items/d6f6cca8998e429139bb著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .