Jqueryの基本

23.09.06

ウェブデザイン備忘録

目次

• 1 jqueryの基本コードその１
• 2 jqueryの基本コードその２
• 3 jQueryが動作しているか確認する方法
• 4 希望する動作はネットで拾っていく。

jqueryの基本コードその１

ファミコンでいう本体の準備。いわゆるjquery本体をまず書きます。基本的にheadタグもしくはbodyタグ内に追記すれば動作します。
本体をダウンロードもしくは公式サイトから読み込みます。（読み込みをCDNと言います。）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

1	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

読み込む順番は「本体⇒処理コード」の順番です。処理コードより後ろに本体を設置しても動作しません。

jqueryの基本コードその２

ファミコンでいうソフト。いわゆる動作のコード。この処理を書いていく部分にコードを書いていく。
html内に書きますが、scriptタグで囲わないとダメ。これを抜いてしまう間違いをよくする。

<script> $(function() { //処理を書いていく部分 }); </script>

1 2 3 4 5

<script> $(function() { //処理を書いていく部分 }); </script>

外部のjsファイルでjQueryを書くときは、scriptタグを使う必要はありません。

$(function() { //外部リンクの場合はscriptタグは不要 });

1 2 3

$(function() { //外部リンクの場合はscriptタグは不要 });

Jqueryによっては、処理コードだけでは動かず、本体のCDN読み込みのように外部jsを読み込みをさせるものもあります。外部jsにはurlが記載されています。その場合の順番も「本体⇒外部JS⇒処理コード」の順番に記載します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><!--これが本体--> <script src="https://unpkg.com/scrollreveal"></script><!--これが外部jsファイル--> <script><!--ここからが処理コード--> $(function(){ ScrollReveal().reveal('.left',{ delay: 50, //アニメーションの発生タイミング distance: '150px', //要素の移動距離 origin: 'left', //要素が移動してくる方向 top/right/bottom/left duration:2000, //アニメーション完了までの速度 opacity:0, //アニメーション開始前の要素の不透明度 }); }); </script>

1 2 3 4 5 6 7 8 9 10 11 12 13

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><!--これが本体--> <script src="https://unpkg.com/scrollreveal"></script><!--これが外部jsファイル--> <script><!--ここからが処理コード--> $(function(){             ScrollReveal().reveal('.left',{   delay: 50, //アニメーションの発生タイミング   distance: '150px', //要素の移動距離   origin: 'left', //要素が移動してくる方向 top/right/bottom/left   duration:2000, //アニメーション完了までの速度   opacity:0, //アニメーション開始前の要素の不透明度   });         }); </script>

jQueryが動作しているか確認する方法

動作しているか簡単に確認したいときは、alertを使うと便利です。
alertはユーザーに対して警告や注意を促すためのもので、画面上部にポップアップウィンドウが表示されます。

$(function() { alert('動作しています。');　 })

1 2 3

$(function() {   alert('動作しています。');　 })

希望する動作はネットで拾っていく。

上記2つが書ければあとは、希望する動作をネットで拾えば大丈夫。
それでもどうしない場合は、なにか間違いがあります。よくある間違いは以下のサイトで紹介しています。

https://webukatu.com/wordpress/blog/28483/

関連記事

• 
  2021.02.08 新サクラサーバーとお名前.coｍでワードプレスの設定する
• 
  2018.10.26 メインスライダーを画像が少し切れるカルーセルにする。
• 
  2020.06.10 worspress カスタムフィールド使い方（Advanced Custom Fields）
• 
  2020.04.03 wordpress カスタム投稿タイプでトップページなどに記事のサムネイルやタイトルを表示させリンクさせる方法
• 
  2024.02.01 Advanced Custom Fieldsのチェックボックス条件分岐方法
• 
  2023.02.24 youtubeをlightboxでポップアップさせるワードプレスプラグイン【WP Video Lightbox】