質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

4回答

2096閲覧

jQueryのエラーについて

hoge_nakatani

総合スコア63

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2019/04/30 07:48

編集2022/01/12 10:55

main.js:1 Uncaught ReferenceError: $ is not defined
at main.js:1
jqueryとつながりません。なぜでしょうか?

====================================html===========================================

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" href="main.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> </head> <body>
<main> <div id="btn_box"> <button>ボタン1</button> <button>ボタン1</button> <button>ボタン2</button> <button>ボタン2</button> <button>ボタン3</button> <button>ボタン3</button> </div> </main> <script src="main.js"></script>
</body> </html>

====================================jQuery===========================================

$(function(){

var duration = 300; $('button') .on('mouseover', function() { $(this).stop(true).animate({ backgroundColor: '#ae5e9b', color: '#fff' }, duration); }) .on('mouseout', function(){ $(this).stop(true).animate({ backgroundColor: '#fff', color: '#ebc000' }, duration); });

});

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

jqueryとつながりません。

jQuery本体を読み込んでいない、のではないでしょうか。

html

1<!-- </head>の直前あたりに入れるのがいいかと(main.jsの読み込みより先にする) --> 2<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

投稿2019/04/30 07:51

maisumakun

総合スコア145123

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hoge_nakatani

2019/04/30 08:00

ありがとうございます。つながりはしましたが、動作ができません。 どこかjqueryで記述ミスがあるのでしょうか?
hoge_nakatani

2019/04/30 08:37

ありがとうございます。 どうすれば動くのでしょうか・・・・?
guest

0

jQuery本体のjsファイル読み込みがされていません。

投稿2019/04/30 07:51

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hoge_nakatani

2019/04/30 08:00

ありがとうございます。つながりはしましたが、動作ができません。 どこかjqueryで記述ミスがあるのでしょうか?
m.ts10806

2019/04/30 08:03

どのように記載したのでしょうか。 質問本文を更新してください。 またコードはマークダウンのcode機能を利用してご提示ください。
hoge_nakatani

2019/04/30 08:05

記載は上記のコードをjqueryとつなげただけです。
m.ts10806

2019/04/30 08:07

それだけでは実際にどうなっているか誰にも分かりません。 きちんと現在のコードで質問本文を更新してください。
hoge_nakatani

2019/04/30 08:13

本文を更新しました。 お手数ですがよろしくお願いします。
hoge_nakatani

2019/04/30 08:18

利用にまだ慣れていないもので、よくわかりません。 申し訳ありません。 質問本文のコードはそのままのコードですが、それではダメなのでしょうか?
m.ts10806

2019/04/30 09:51

はい。インデントなどが反映されていないので生のコードではありませんので再現確認が正しく行えませんし、teratailではコードの提示はマークダウンが推奨されています。 maisumakunさんの回答のコード部分ですね。 難しければコード部分を選択して<code>ボタンを押してください。
guest

0

jQueryのanimate()はCSSの値が数値的なものしかアニメーションにできません。ですので色をanimate()で変化させたい場合は、jQuery.Colorというプラグインが必要になります。

それを踏まえ、書き直したコードが以下です。これで意図したものになっていれば幸いです????.(๓´͈ ˘ `͈๓).

デモ(jsBin)

js

1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> 6<link rel="stylesheet" href="main.css"> 7<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> 8<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js" integrity="sha256-H28SdxWrZ387Ldn0qogCzFiUDDxfPiNIyJX7BECQkDE=" crossorigin="anonymous"></script> 9 10</head> 11 12<body> 13 14<main> 15 <div id="btn_box"> 16 <button>ボタン1</button> 17 <button>ボタン2</button> 18 <button>ボタン3</button> 19 <button>ボタン4</button> 20 <button>ボタン5</button> 21 <button>ボタン6</button> 22 </div> 23</main> 24 25<script>// main.js 26 27"use strict"; // エラーを厳密にキャッチしてくれるので(他にも理由ありますが今は気にしなくてOK)、 28 // 必ず書くようにして下さい。ES5から導入され、不慮のエラーが起きない為にも、現在は 29 // 書く事が慣習です。 30 31$(function(){ 32 33 var _ = console.log, // console.logと毎回書くの面倒なので割当すると、以後の呼び出しが楽????‍♀️ 34 duration = 300; 35 36 // `mouseover` Event 37 $('button').on('mouseover', function() { 38 $(this).animate({ 39 backgroundColor: '#ae5e9b', 40 color: '#fff' 41 }, duration); 42 }) 43 44 // `mouseout` Event 45 $('button').on('mouseout', function(){ 46 $(this).animate({ 47 backgroundColor: '#fff', 48 color: '#ebc000' 49 }, duration); 50 }); 51 52}); 53 54</script> 55 56</body> 57</html>

投稿2019/04/30 13:18

編集2019/04/30 13:25
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

jQuery.Colorプラグインが必要です。
下記のjquery-ui.min.jsを読み込めば解決します。

background-color cannot be, unless the jQuery.Color plugin is used
(jQuery.Colorプラグインを使用しない限り、background-colorは使用できません。)
https://api.jquery.com/animate/

投稿2019/04/30 11:40

yasutomi

総合スコア2937

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問