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/

お役に立てましたらadsenseクリックお願いします！

いかがでしたでしょうか？もしお役に立てましたら、お賽銭のつもりでadsenseをポチっとクリックお願いします！↓上手くいきますようにお祈りしておきます！

関連記事

• 
  2022.05.09 Xサーバーメールアドレスの追加方法
• 
  2024.09.24 js「ページトップへ戻る」が少し下へスクロールするとふわっと出るコード。
• 
  2018.11.09 サクラサーバーで無料ＳＳＬを利用する方法
• 
  2020.05.06 wordpress css更新時に自動でキャッシュをリロードする方法
• 
  2020.06.10 worspress カスタムフィールド使い方（Advanced Custom Fields）
• 
  2023.06.20 BackWPupの使い方・復元の仕方