未分類
【jQuery入門】jQueryが動かない？３分で解決！jQuery使い方と、エラーログの見方
こんな悩みはありませんか？
・$でいい時、jQueryの時がわからない
・なぜかjQuery動かない、困る
・jQueryのエラーどこで見れるの？
console.logの使い方も初めから解説、毎回躓く原因が解消できる！
■チェックポイント①jQueryCDN、自作JSの読み込み
htmlの静的サイト
→jQueryのCDNのURLを記述。<head>内か</body>の直前。
WordPressのサイト
→index.phpのwp_head()の前の行に、<?php wp_enqueue_script(‘jquery’); ?>を追加します。代わりに、<script src=”https://code.jquery.com/jquery-3.2.1.min.js”></script>が不要になったのでこの一行を削除。
加えて、jQueryを記述していく自作JSも<script src=””></script>タグを使って読み込む。
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="js/script.js"></script>
</body>
</html>■チェックポイント②自作JS内のjQueryと$マーク
htmlの静的サイト：全部$でOK
WordPressサイト：$→jQueryと書こう
WordPressのjQueryを利用して動かす場合、自作のJavaScriptの中に$マークからはじまる記述があると動かない場合があります。その時はソースコード全体を、下記のコードでくくると解決します。
（引用：https://coco-factory.jp/ugokuweb/js02/）
jQuery(function($){
// この中に$マークからはじまる記述を書けば動く
});■チェックポイント③コンソールのエラーチェック
jQuery動かない時、焦って本文ミスばかり気にしていませんか？console.logは無料で簡単に使えるので使ってみよう。
後回しにしがちな、jQuery基礎を理解できましたね。これで検索時間が1日3分×30日＝1.5時間の悩み時間が節約できました。えらい！
これからも簡単なコツで解決できるjQueryの勉強法について発信していきますので、ぜひフォローしてみてください。
ツイッター
タグ
