JQuery
JavaScriptのライブラリです。
「ライブラリ」とは、ある程度まとまったプログラムをあらかじめ作ってくれている
ファイルのこと。
つまり、jQueryは、JavaScriptを使いやすいように拡張してくれているもの。
javascriptで１０行→JQueryでは３行で済む。
HTML&CSSの操作
HTMLのheadタグ内にjQueryライブラリーを読み込む。詳細は「スライドショープラグイン」で。
<script src=”js/jquery-3.x.x.min.js”></script>
JQueryCDNプラグイン
JQueryをCDNで読み込む方法
CDNとは・・・
「CDN」はContent Delivery Networkの略で、簡単に言うとインターネット経由でファイルを配信
する仕組みのこと。
特にjQueryなどで利用する場合は、ソースファイルをネット経由で使えるためファイルをダウンロードする必要がない。「JQuery CDN」と検索すれば出てくる。
JQuery CDNでハンバーガーメニューを作る
「jQueryをCDNで読み込む方法」でコピーしたものをhead内にペースト＆指示を記述
<head>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous">
</script>
<script type="text/javascript">
$(function () {
$('ハンバーガーメニューのアイコンのclassなどを記述').on('click', function () {
$('body').toggleClass('open');
});
});
</script>
</head>
スライドショープラグイン
①JQueryを記述する前に・・・
HTMLのheadタグ内にjQueryライブラリーを読み込む。
<head>
<script src=”js/jquery-3.x.x.min.js”></script>
</head>
②bxSliderの公式HPでファイルをダウンロードする。
cssファイルとJSファイル「min」がついているのは圧縮系 →軽いが編集できない。
編集したい場合は「min」がついていないものを選ぶ。
③ダウンロードしたbxsilderファイルを使いたいフォルダーに移す。
④自分で作成したscriptファイルにスライドショーの指示を記述。
$(function(){
$('.slider').bxSlider({
auto: true,
pause: 3000,
speed: 3000,
pager: true,
controls: false,
mode:'fade',
});
});
⑤設置場所
htmlファイルのheadの中にlinkやscript要素を追加。body内にスライドさせたい画像などを記述。
<head>
<link rel="stylesheet" href="js/jquery.bxslider.css">
<script src="js/jquery-3.7.1.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div class="slider">
<div>画像１</div>
<div>画像２</div>
<div>画像３</div>
</body>
↓①と④を飛ばしたやり方。①でダウンロードせずにCDNで読み込ませる。④のscriptファイルは用意せず、html内に記述。
