• 締切済み
  • すぐに回答を!

たすけて!jQueryがさっぱりわかりません!

Dreamweaverでサイトを制作しています。 jQueryは何をどこにダウンロードして何をどこにうちこめばいいのか? さっぱりわかりません…。 http://jquery.com/からなにかをダウンロードするということはわかるのですが…。いろいろありすぎて何をダウンロードすればいいのか…。 しかもダウンロードしたファイルはどこに保存してどうやってhtmlとむすびつけるのか。 タグはhtmlのどこに書けばいいのか、くわしく赤ちゃんに説明するつもりで教えていただけると助かります。 ちなみに(http://toddmotto.com/introducing-superbox-the-reimagined-lightbox-gallery/)を使いたいのです。 サイトを見たのですがこのコードはどこにいれたらいいのかさっぱりわかりません。 head内なのかbodyなのかはたまた別でcssを作るのか? 【質問まとめ】 ・(http://toddmotto.com/introducing-superbox-the-reimagined-lightbox-gallery/)のギャラリーをつかいたいが取り込み方がわからない。 ・上記URLからのダウンロード以外で(http://jquery.com/)からのダウンロードは必要なのか? ・ダウンロードしたものはファイルのどこにいれたらいいのか。 ・どうすれば現在つくっているhtmlにjsをむすびつけられるのか? ・head、bodyそれぞれになにをいれたらいいのか? ・ともかくなにをどこにいれたらいいのかさっぱりわかりません。 ・こういうものは$(function(){})どこにいれたらいいのか、これはなんなのか? 質問が多くてすみません。どうかよろしくお願いします。

共感・応援の気持ちを伝えよう!

  • 回答数2
  • 閲覧数470
  • ありがとう数0

みんなの回答

  • 回答No.2
noname#186579

とりあえず、「jQueryを使えるようにする」ということを考えてください。 ギャラリーは、しばらく忘れてください。これはjQueryを拡張するプラグインのようなもので、jQueryがまともに使えることを前提にしています。jQueryがわからない人間がいきなり「使いたい」といっても、どうしようもありません。泳げなくて自転車に乗れない人が「トライアスロンをやりたい」といったら、「まず泳げるようになりましょう。自転車に乗れるようになりましょう」というしかありません。 ちなみに、jQueryを使うだけならライブラリをダウンロードしたりする必要はまったくありません。<head>タグの中に以下のタグを書くだけです。 <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 後は、普通にJavaScriptのスクリプトの中でjQueryオブジェクトを使えばいいだけです。……JavaScriptはわかりますよね? それもわからないとすると、「jQueryなんかやる前に、まずJavaScriptを覚えてください」というしかないのですが……。

共感・感謝の気持ちを伝えよう!

関連するQ&A

  • jQuery LightBox Plugin動かず

    複数の画像をLightBoxで表示したくて http://shanabrian.com/web/library/jlightbox.php#option のページ参考にテストしてみました。紹介されてるダウンロードページからデータを取得し、 解凍後、css、images、jsディレクトリを適用するファイルと同じディレクトリに設置しました。 そしてJavaScriptおよびCSSをhead内にコピーし a要素にrel="lightbox"を追加 これで完了のはずですが、しかし動作しません。 画像のページが開いてしまいます。なぜ動かないのでしょうか? <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>テスト</title> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script> </head> <body> <a href="images/sample1.jpg" rel="lightbox"><img src="photos/image1.jpg" width="200" height="300"></a> <a href="images/sample2.jpg" rel="lightbox"><img src="photos/image2.jpg" width="200" height="300"></a> <a href="images/sample3.jpg" rel="lightbox"><img src="photos/image3.jpg" width="200" height="300"></a> </body> </html> お願いします。

  • jQuery版のlightbox.jsのカスタマイズについて質問です。

    jQuery版のlightbox.jsのカスタマイズについて質問です。 やりたいことは下記の2点です。 1.「prev」や「next」をhover時ではなく絶えず出ているようにする。 2.任意でグルーピングをする。 使用したjQuery版lightbox.jsは下記のサイトからダウンロードしました。 jQuery lightBox plugin http://leandrovieira.com/projects/jquery/lightbox/ JavaScriptに詳しい方、方法をご存じの方がいらっしゃいましたら 教えていただきたいです。 よろしくお願いいたします。

  • jqueryが動作しない

    jqueryが動作しません。 私が行った手順を書きます。jqueryのサイトからdownloadをします。英文だったのでDreamweaverで開いて名前を付けて別名で保存しました。jquery-1.8.0.js拡張子で保存。 ソースコードをかいてみました。 <html> <head> <script src="jquery-1.8.1.min.js"></script> // urlを指定した場合です。 <script src="http]//jquery-1.8.1.min .js"></script> </head> <body> <h1>Jquery</h1> <script> $(function(){ $('h1').css('color'.'red'); }); </script> </body> </html> これを保存します。(拡張子は.navi.html) 実行しても動作しません。どうしてでしょうか?

  • 回答No.1

 Dreamweaverにしろ、何にしろWebオーサリングツールを使うためには、HTMLやCSSの知識が、テキストエディタで作成する人以上に必要ですよ。逆じゃないです。そこを誤解されていませんか?  ⇒Dreamweaverを使ったjQuery入門 前編 ~jQueryの概要とコーディングルール解説 (1/5):CodeZine( http://codezine.jp/article/detail/6548 )  などを読まれて、内容が理解できる人だからDreamweaverを使っているはずだと考えるのが普通ですよ。  jqueryも単なるjavascriptのライブラリですから、HTMLのhead内で読み込んでおけば、関数を呼び出してそれを利用します。  まず、HTMLやCSSをテキストエディタで自由自在に書ける能力、そしたらjavascriptを使う能力を身につける。それからDreamweaverを導入するという順番が良いでしょう。所詮Webオーサリングツールは、補助的なものですから。  私は、あの膨大なマニュアルやヘルプを読むのが億劫ですから・・。

共感・感謝の気持ちを伝えよう!

関連するQ&A

  • jQuery

    http://blog.daichifive.com/archives/602 このページにあるようなスクロールをさせたいのですが、 jquery.scroller.d5.jsはページ内でダウンロードできますが、 jquery.jsはどこからダウンロードすればよいのですか? jQueryeasysliderのjqueryjsをつかってみたのですが、 上記サイトではjsファイルの最下部でスクロールさせたいものだけをカスタマイズできるとあるので、 easysliderのjqueryjsは使えないような気がします。 初歩的な質問ですみません。 あまり詳しくないです。 宜しくお願いします。

    • ベストアンサー
    • CSS
  • jQueryについて教えてください

    現在ドットインストールでjQueryを勉強しています いきなりつまずいたといいますかエラー?があります 以下のコードなのですが文字色(<p>)が赤色になりません なぜでしょうか? このコードではjQueryはDLせずに読み込ませています DLしたほうがいいでしょうか? <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <head> <body> <p>jQueryの練習</p> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script> $(function () { $('p').css('color', 'red'); }); </script> </body> </html>

  • jQueryで<body>内の特定のコードを削除

    よろしくお願いします。 jQuery(ver.1.8.3)を使って<body>内に記述されているHTMLコードを削除したいのですが、どのように書いたらいいのでしょうか。 ■削除したいコード <script src="http://www.hoge.com/hoge.js"></script> ■HTML <html>  <head>省略</head>  <body>   <script src="jquery-1.8.3.min.js"></script>   <script>   $(function(){   削除するスクリプト?   });   </script>   <script src="http://www.hoge.com/hoge.js"></script>  </body> <html> こちらからは編集できない領域にあるHTMLコードのため、jQueryを使ってどうにか削除できないかと思い質問させて頂きました。 どうぞよろしくお願い致します。

  • jQuery を書くファイルはどれですか

    ほんっとうに基本的なことすぎて見つけられないのかもしれないのですが、 2日間ググってもわからないのでお助けください。 jQuery でアコーディオンメニューを作りたいと思っています。 だいたいのサイトをみると、サイトより jQueryをダウンロードしろと 書かれているのでuncompressedのものをダウンロードして、jQuery.jsと リネームしたのちに jsフォルダ内に格納しました。 あとは、html、CSS、jQuery の3つの記述が掲載されているのですが、 jQuery をどこに書くのかわかりません。 どういう名前のどの拡張子(js?)でhtmlファイルに読み込ませるのか、 それともhtmlファイルに書くのかすらわかりません。 なにとぞご教示お願いいたします。

  • Jquery と JqueryUIについて

    現在、Jquery と JqueryUIを使ってプログラムを書いています。上手く動作しないので以下について教えてください。 やりたいことは、ボタンを押すと文字があらわれたり消えたりするという動作を実現したいと思っていますが、今は、ボタンと文字が表示されるのみで、ボタンを押しても全く動きません。 現在書いているコードは以下のとおりです。 ---- <html> <head> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script> <script> $(function() { $('#button').click(function(){ $('#sample-text').show(); }); }); </script> </head> <body> <input type="button" id="button" value="ボタン"> <p id="sample-text">Hello World!</p> </body> </html> ------------------- Jqueryのバージョンは、最初、UIとの互換性を考え、1.3.2を使っていましたが、動かないため、現在は新しいバージョンで試してみたところです。(1.4.4でもだめでした) JSファイルの場所は、上記htmlファイルと同じ階層のjsディレクトリ内です。 また、補足ですが、これが上手くいけば、script内の show メソッドのかわりに toggleを使いたいと考えています。 上記コードで間違っている部分がわかる方がいらっしゃいましたら教えてください。 よろしくお願いいたします。

    • ベストアンサー
    • AJAX
  • jquery lightboxを設定しようとしていますが問題がでてます

    jquery lightboxを設定しようとしていますが問題がでてます.... functionの部分を htmlに直接表記すれば動く状態ですが、 functionの部分を外部に登録するとなぜか動かなくなってしまいます。 jquery.lightbox-0.5.min.jsというファイルにファンクションを書き足せばいいとの ことですが.. なにか 以下のHTMLソースに足らない部分がありますか? ご教授ねがいます。 <link href="css/top.css" rel="stylesheet" type="text/css"> <link href="css/print.css" rel="stylesheet" type="text/css" media="print"> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <script type="text/javascript"> $(function() { $('.up_image a').lightBox({ overlayBgColor: '#FFF', overlayOpacity: 0.7, txtImage: '画像', txtOf: 'の' } ); }); </script> </head>

  • jquery.bgSwitcherが設置できない

    私は、いまbgSwitcherの設置ができなくて悩んでいます。 「fadeOut」を利用したいのですが、画像は表示されるのですが、そこから何も動きません。 だれか分かる方がいらっしゃれば是非教えていただきたいので、宜しくお願いします。 ▼私の現在の状況************************************************************ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <TITLE>○○○</TITLE> <META name="keywords" content="○○○"> <META name="description" content="○○○"> <meta name="robots" content="all" /> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <script type="text/javascript" src="js/script.js"></script> <script type="text/javascript" src="js/lightbox/js/prototype.js"></script> <script type="text/javascript" src="js/lightbox/js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="js/lightbox/js/lightbox.js"></script> <link rel="stylesheet" href="js/lightbox/css/lightbox.css" type="text/css" media="screen"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.bgSwitcher.js"></script> <script> jQuery(document).ready(function($) { $('#fadeOut').bgSwitcher({ images: ['images/image1.jpg','images/image2.jpg','images/image3.jpg','images/image4.jpg'], interval: 2000 }); }); </script> </head> <body> <div id="wrap"> <div id="container"> | 途中は省略 ↓ <div id="fadeOut" class="bg"><p><img src="images/top_main.png" width="670" height="450" /></p></div> | ↓ 以下省略。 ちなみに「class="bg"」は、 .bg {  width: 640px;  height: 415px;  margin: 0;  padding: 0; } こういった感じです。 *************************************************************************** これで、なぜ動かないのでしょうか? このプラグインは、jquery.bgSwitcher.js 自体を何か編集する必要があるのでしょうか? 開発された方のサイトを隅から隅まで見ても分かりませんでした。 ▼開発者様のサイト http://rewish.org/javascript/jquery_bg_switcher ちなみに、jQueryのバージョンは、jquery-1.7.1.minです。 どなたか、ご助力をお願い致します。

  • jquery uiが動かない

    jquery uiが動きません。 何度も見直し、プログラムを書いてもどこがいけないかわかりません。 教えていただけたら幸いです。お願いいたします <html> <head> <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> </head> <body> <div id="box">box</div> <style> #box{ width:100px; height:100px; background:red; } </style> <script> $(function(){ $("#box").draggable( axis: 'x'; ); }); </script> </body> </html>

  • prototype.jsとjquery.jsの併用がうまくいきません。

    prototype.jsとjquery.jsの併用がうまくいきません。 2つの機能をページに組み込みたいと思っています。 (1)横並びの画像が自動的にスクロールする (2)画像をクリックすると、ライトボックスで表示する 参考にしたのは下記のサイトです。 http://logicbox.net/jquery/simplyscroll/ http://www.lokeshdhakar.com/projects/lightbox2/ しかし、実際にページを作ってみるとどちらかの機能しか有効になりません。 どちらもいくつかのjsファイルを<script>タグで読み込みますが、 後から読み込んだ方しか有効に機能しないのです。 スクロールの方はjquery.jsを、ライトボックスの方はprototype.jsを使っているのですが、 それが良くないのでしょうか。 両方を機能させるにはどう直したらいいのか、ご教授下さい。 もしくは、両方がうまく機能しているサイトがあれば、URLを教えて下さい。 よろしくお願いします。

  • jqueryの呼び出しはどこに?bxSlider

    サイトを作っています。 bxSlider というものを入れたいのです。 こちらのサイト http://wp-and.me/bxslider/ で説明があるとおりに bxSliderの公式サイトからファイルをダウンロードし、 jsのファイルをローカルのフォルダへ入れました。 htmlではheadにファイルへのリンクを記述しました。 htmlに説明通りにコードも記述しましたが、ここからが分かりません。 サイトには、    最後に、bxSliderの呼び出しをすればスライドが動きます!    $(document).ready(function(){     $('.bxslider').bxSlider();    }); と書いてありますが、これはどこに書くんでしょうか? htmlのhead内? ダウンロードしてきたjsファイルのどこか? 他にもいくつかのサイトをみたのですが、 みんな「最後に関数を呼び出してください」くらいの説明しかなく どうやって実行したらいいのか分かりません。 あと、jqueryはサーバーにアップしなくても動作確認はできるのでしょうか? もしかしてローカルで作業しているのがいけないのでしょうか? どうか教えてください。。。