訓練日誌-2024/3/16（jQueryについて）

jQueryについて

jQueryについて

授業で習った使用手順

jQueryの公式サイトからコードをコピーしてHTMLに貼り付ける
コード検索→「jQuery　CDN」
URL:https://releases.jquery.com/
※jQuery Core 3.7.1が現在最新のソフトなので、これを使用する（古いのしか使えないPCもあるため、使用前に要確認）
　uncompressed：きれいに改行されているコードのため、ミスを見つけやすい
　slim minified：改行されず一行で書いてあるため、容量が軽い
slickの公式サイトからコードをダウンロードして入れたいファイルに入れ、HTMLにコードを書く
コード検索→「slick」
URL:https://kenwheeler.github.io/slick/
※サイトを開いたら[get it now]をクリック→ダウンロード
　ダウンロードしたらファイルを開く　※ダブルクリックでひらくのではなく、ファイルを選択して「すべて展開」で開く
「slick」のファイルをダブルクリックで開く→ファイル名の拡張子が「〇〇.js」のものと「〇〇.css」を使用する
新たに「js」名にファイルを作成し、ダウンロードした拡張子「〇〇.js」をコピー＆ペーストする
「css」ファイルに、ダウンロードした拡張子「〇〇.css」をコピー＆ペーストする（２種類ある）
HTMLのjs欄とCSS欄に入れたファイルを読み込ませるためにコードを書く

js例）<!– jQuery –>
<script type=”text/javascript” src=”https://code.jquery.com/jquery-3.7.1.slim.min.js” integrity=”sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8=” crossorigin=”anonymous”></script>
<script type=”text/javascript” src=”js/slick.js” charset=”utf-8″></script>
<script type=”text/javascript”>

CSS例）<!– style.css –>
　　<link rel=”stylesheet” href=”./css/style.css”>
　　<link rel=”stylesheet” href=”./css/slick.css”>
　　<link rel=”stylesheet” href=”./css/slick-theme.css”>
slickの公式サイトから自分の動かしたい内容のコードをコピーしてHTMLに貼り付ける
※class名統一することを忘れずに

独学の方法

jsのフォルダを作成する
１の中に「script.js」名のシートを作成する
jQueryの公式サイトからダウンロードする　
方法：Downloadクリック→[Download the compressed, production jQuery 3.7.1]を右クリック→名前を付けてリンク先を保存をクリック→１のフォルダ内に保存
slickの公式サイトからコードをダウンロードして各種ファイルに入れる
方法：[get it now]クリック→[Download Now]クリック→解凍する→[slick.min.js]をjsフォルダに入れる→[fonts][ajax-loader.gif][slick.css][slick-theme.css]の４つをcssフォルダに入れる
HTMLに読み込むためのコードを書く
■css
<link rel=”styleseet” href=”./css/slick.css”>
<link rel=”styleseet” href=”./css/slick^theme.css”>
■js(cssの下に書く)
<script src=”./js/jquery-3.7.1.min.js”></script>
<script src=”./js/slick.min.js”></script>
<script src=”./js/script.js”></script>
2のシートにコードを書いていく
ネット検索してコピペするのが便利（検索方法→slick スライダー実装　など）
cssで装飾する