jQueryの使い方と機能について

前へ 次へ
このQ&Aのポイント
  • jQueryはJavaScriptのライブラリであり、ウェブページの機能向上やDOMの操作を簡単に実現することができます。
  • jQueryを使うことで、簡単に要素の選択やスタイルの変更、イベントの処理などが可能です。
  • また、jQueryは多くのプラグインやエフェクトが存在し、これらを組み合わせることで豊富なウェブアプリケーションを作成することができます。
回答を見る
  • ベストアンサー

jQueryについて教えてください

jQueryというJSがあるのは誰もがご存知だと思います。 私も名前や少しだけ使ったことがありますが、いまいち漠然として分かりません。 初歩的な質問で申し訳ないのですが、 極論から言うとjQueryでいったいどの位の表現？機能を使うことができるのですか？ 本も買ってみたり、ネットでも調べると何かしらjQueryを使ったプログラムはありますが、それが全てではないと思いますし、むしろ極一部だと思います。 jQueryを使うと、どんな事を、どうやったら、何ができる？ って事がどうして皆さん分かるのでしょうか？ 例えば何かイメージしてる動きがあって、それはネットで調べれば近い情報は出てくると思います。 しかし、jQueryである必要も無ければ、jQueryの方が楽な場合もあると思います。 だけどjQueryだとなぜ楽に作れるのか、それが理解できなくて困っています。 JavaScriptの知識はかじる程度しかないですが、 jQueryを理解するにはjQueryのソースを理解しないと、何ができるかは判断できないのでしょうか？ また、「jQueryでできることの一覧」みたいなサイトってありますか？ あと、jQueryで使えるライブラリの意味がいまいち分かりませんが、 これはjQueryを理解してる人が、使いやすいように作った別のJSファイルって認識で良いのでしょうか？ どうも根本的な事を理解しきれてなくて、教えていただきたく。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

>jQueryを使うと、どんな事を、どうやったら、何ができる？ >って事がどうして皆さん分かるのでしょうか？ 公式を翻訳+そういった情報サイトをこまめに見るようにしてます＾＾ >だけどjQueryだとなぜ楽に作れるのか、それが理解できなくて困っています。 アプリケーションフレームワークというもので “汎用性の高い複数のプログラムを、再利用可能な形でひとまとまりにしたもの”という物であると考えた場合 Webサイト利用されるjsは特殊な事を除いて、ある程度しかないってことなのでしょう。 >JavaScriptの知識はかじる程度しかないですが、 >jQueryを理解するにはjQueryのソースを理解しないと、何ができるかは判断できないのでしょうか？ いえ、基本的なjsが理解できていれば難しくないので チャレンジしてみてはどうでしょう >また、「jQueryでできることの一覧」みたいなサイトってありますか？ 参考URLはタメになります。勿論、記載されている以外の動作も バージョンがあがるごとに追加されているので最初の質問の作業が必要になってきます(｀・ω・´)b

参考URL：
http://semooh.jp/jquery/
gonta0012
質問者

お礼

わかりやすいアドバイスありがとうございます。 > 公式を翻訳+そういった情報サイトをこまめに見るようにしてます＾＾ なるほど。そうなんですねー 私のようにJSの知識が乏しい場合なんかとくに、そういったサイトを見て真似て作る位しかできないですよね。 ＞アプリケーションフレームワークというもので “汎用性の高い複数のプログラムを、再利用可能な形でひとまとまりにしたもの”という物であると考えた場合 Webサイト利用されるjsは特殊な事を除いて、ある程度しかないってことなのでしょう。 分かったような分からないような感じですが HTMLとCSSで解くとこんな感じですか？ <h1>***</h1> h1 { font-size: ***; color: #*** } のようにモジュール単位の集まりを予め用意しといて、*　に好きなもの入れてください と、言った感じでしょうかね？ 参考サイトありがとうございます。 是非見させていただきます。

その他の回答 (2)

回答No.3

まったくの個人的な意見です。 フレームワークと呼ばれる類のものは、裏でなにやってんだかわからん！という人が 覗いてみればよいと思ってます。 便利なものを組み合わせて、結局わからなくてここで質問する。 このパターンも多いし。そんなの無理に使う必要ないじゃん！ってことも多い。 それってなんとなく本末転倒な気がする。 やっぱりある程度、基礎がわかったうえで利用するべきだと思う。 最近の質問の答えで、AjaxとinnerHTML(?)で、checkboxを書き換えたら、反応しない。って ことだったけど、貼り付けたイベントを、ノードごとごっそり書き換え たら、動くわけが無い。しかも貼り付けてたイベントはどうなった？気にする様子も無い。 （そういうのはフレームワークが吸収すべきだけど） ある方が、イベントなんてバブリングするやつは、トップで監視しろ！って言ってました。 documentにclickイベント貼り付けて、監視すると簡単に解決する。 でも、フレームワークを使った回答に、感激する・・・・。 それに固執してしまって本質がみえてない。 そういう質問がでるたび、その言葉がよく理解できます。 ちなみにフレームワークを使った質問には、答えません。というか答えられません。 なぜかというと使えないからです。使えなくても、やりたいことは「できる！」と おもっているし。まだまだ基礎勉強中だしね。

gonta0012
質問者

お礼

ご回答ありがとうございます。 ＞便利なものを組み合わせて、結局わからなくてここで質問する。 私もそうだと思うんですが、 何かイメージがあってネットで調べればきっとそれなりに近いものは作れちゃうと思うんです。 結果として、jQuery使って動かす為のJSを何行か記述すれば良い って話なんだろうと。 でも、結局のところ本質を理解しないと何が出来るかなんて分からないって事は理解いたします。

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.2

No.1の方が的確に説明してくれてますが、 ＜jQueryだとなぜ楽に作れるのか＞に追加 －ブラウザーの違いのハンドリングを、jQueryにまかせられる。 例えばAJAXリクエストのオブジェクトは、IEとそれ以外では、 定義方法が異なります。普通は場合分けして、それぞれコードを かかなければならないのを、jQueryだと、$ajax.とか$load.とかで きにせづに書けます。DOMのイベント処理追加等も同様です。 －DOM要素の選択、追加、変更が簡単に書ける いちいちdocument.getElementByXX系の処理や、element.XXX系の 処理を都度都度コーディングしなくても、さっと書けます。 等など、めんどうなコーディングが、かなりはしょれるといった メリットがあります。 ※jQueryだけに限らず、他のライブラリー prototype.jsやmootool なんかも広く使われています。

gonta0012
質問者

お礼

こちらも分かりやすいご回答ありがとうございます。 ブラウザ毎の処理の違い、確かにそうですね。 具体的な事は分かりませんが、FLASHで良く使うswfobjectもきっとその一つですよね？ ご回答に対して質問ですが > jQueryだと、$ajax.とか$load.とかできにせづに書けます。 とありますが、私が凄く気になるのは、なぜ $ajax.とか$load. で書けるって事が分かるのですか？ この単語一つだといったい何の処理をしてるかなんて分かりませんよね。 つまり「$ajax.$load.」が何を意味してるか理解するには jQuery.jsの中身を覗かないと分からないってことなんでしょうか？ ＞－DOM要素の選択、追加、変更が簡単に書ける こちらや ＞めんどうなコーディングが、かなりはしょれるといったメリットがあります。 これらの回答についても同じ疑問なのですが。 私の中で何かモヤモヤしてる原因として jQuery.jsに何が書かれているのか？ その書かれていることを理解しないと ＞めんどうなコーディングが、かなりはしょれるといったメリットがあります。 なんて発想はそもそも出てこないってことですよね？

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • jqueryにて

    こちらではお初にお世話になります。 よろしくおねがいします！ さて、jqueryを用いてScrollFollowを実装中なのですが、 正常に動作させることが出来ません。 ソースは <script type="text/javascript" src="./jslib/ui.core.js"></script> <script type="text/javascript" src="./jslib/jquery-1.2.6.js"></script> <script type="text/javascript" src="./jslib/jquery.scrollfollow.js"></script> <script type="text/javascript" src="./jslib/jquery.easing.1.3.js"></script> <script type="text/javascript" src="./jslib/jquery.cookie.js"></script> <script type="text/javascript"> $( document ).ready( function (){ $('test').scrollFollow({ }); }); </script> をヘッド部分に、 <div id="test"> コンテンツ </div> をBODYに記述しています。 動作せずにFirefoxのエラーコンソールで確認したところ エラー: jQuery is not defined ソースファイル: （省略）update/jslib/ui.core.js 行: 238 エラー: $("test").scrollFollow is not a function ソースファイル: http://contest2009.thinkquest.jp/tqj2009/110392/update/ 行: 13 と表示されました。jsファイルの生存は確認できており、 その系統のミスではないと思うのですが。。。 どなたかアドバイスをお願いします！

  • jQueryにて複数ライブラリを動かす

    wordpressにてWEB制作を行っています。 jQueryにてfullpage.jsというフルページスクロールするライブラリを使用しております。 そのセクションの一つをfullpage.jsの機能の一つ横スライドを行っているのですが、 fullpage.jsのオプションには自動再生はありません。 スライド部分のみ自動再生を行いたいので bxslider.jsというライブラリを使用し、 横スライドしたいセクションをbxsliderで動かしたいのですが、 bxsliderが全く作動しません。 また <script type="text/javascript"> jQuery(document).ready(function(){ jQuery('.bxslider').bxSlider(); }); </script> の記述を <script type="text/javascript"> jQuery(document).ready(function() { jQuery('#fullpage').fullpage(); }); の上に書くと今度はfullpageが動きません。 jQueryライブラリは同ページで二つ同時には動かないんでしょうか？ また、書き方が間違っていますでしょうか？ 宜しくお願い致します。

  • JavaScriptライブラリってそもそも・・・

    私はweb制作をはじめて3年たらずのｗｅｂデザイナーです。 プログラムはまったくと言っていいほど書けないので、アニメーションなどを実装したいときはwebで拾った著作権的に大丈夫なものを使いまわしています。 ほとんどjqueryライブラリを使ったものです。 最近はそのソースも少しは読めるようになり、少し手を加えられるようになりました。 そこで、かなり根本的な疑問がわいてきたのです。 ◆JavaScriptライブラリってそもそもなにが書いてあるものなのでしょうか？ ※JavaScriptライブラリとはで調べたのですが、難しい言葉が多くて・・・ （jqueryとは具体的にどんなものが書いてあるものなのか。） ◆jqueryのアドオンとかjqueryのプラグインとか書いてあるのをよく見かけますが、これはなんのでしょうか？アドオンとプラグインは違うものなのでしょうか？ ◆jqueryを読み込んで実行するためのスクリプトをソースに追加すれば意図した動きになりますよね。（アコーディオンメニューなど） ↓こういうもの＝＝＝＝＝＝＝＝＝＝＝ <script type="text/javascript"> $(function(){ // ここにコードを書いていく。 }); </script> これは「jqueryライブラリを使用して作ったプログラム」という言い方であっているのでしょうか？ それともこのソースに追加するスクリプトのことをアドオンというのでしょうか？ 無知で恥ずかしいのですが、この辺のことをきっちり理解できれば、もう少し自分のできる範囲が広がるのではないかと思い、質問しました。 よろしくお願いします。

  • JavascriptとJqueryを混在し記述

    JavascriptとJqueryが混在したスクリプトファイル（.js)の書き方について質問です。 Jquery自体がjavascriptで書かれており結局はjavascriptであるということは理解していますが 気になるので質問させてください。 通常、javascriptの書き方として、スクリプトやその関数定義を１つのjsファイルに書くと思いますが、 Jqueryが混在しても考えは一緒で、ただ、ページが全て読み込まれた後（要素を特定できるようにするため）に実行したい場合の スクリプトを $(function(){ //Jquryや通常のjavascript }); の中にこのように書けばいいって話ですよね？ つまり1つのjsファイル内に以下のようにスクリプトを混在させた書き方でもいいのですよね？ ===== script.js ====== //(1)Javaスクリプト　←jsファイルが読み込まれたら実行するスクリプト //関数定義 function test(){ //Javaスクリプト } //(2)Jquery　←ページが全て読み込まれた後で実行するスクリプト $(function(){ //Jqueryスクリプト //Javaスクリプト }); 初歩的なことかもしれませんがすいません。

  • 複数のバージョンのjQueryを同時に使用

    複数のjQueryライブラリを同時に使用するには http://jsajax.com/articles/jQueryUsingMultipleVersion/2012 上記サイトを参照しましたがわからなかったので質問いたします。 「1.3.2と1.1.3.1」のようにバージョンの違うjQueryライブラリを同時に使いたいのですが、 以下のように記述した場合、Feature Listが正常に動作しません。 バージョンの違うjqueryライブラリを同時に使うにはどのように設定すればいいのでしょうか よろしくお願いいたしします <script type="text/javascript" src="jquery/1.1.3.1/jquery.min.js"></script> <script type="text/javascript" src="jquery/1.3.2/jquery.min.js"></script> <!-- ▼jquery_auto --> <script type="text/javascript" src="jquery/jquery_auto_j.js"></script> <!-- ▼animatedcollapse.js --> <script type="text/javascript" src="jquery/animatedcollapse.js"></script> <script type="text/javascript" src="jquery/animatedcollapse-settings.js"></script> <!-- ▼Feature List --> <script type="text/javascript" src="jquery/jquery.featureList-1.0.0.js"></script> <script language="javascript"> $(document).ready(function() { $.featureList( $("#tabs li a"), $("#output li"), { start_item:0 } ); /* // Alternative $('#tabs li a').featureList({ output:'#output li', start_item:1 }); */ }); </script>

  • Jqueryの干渉について

    Jqueryの干渉について Jqueryのライブラリを使ったjsを2つ同時に組み込もうとしておりますが、 干渉してしまっているようで、どちらか一つずつしか使えない状況です。 使おうとしているものは、spacegalleryというものと、nivosliderという jsを使おうとしています。 それぞれ同じサイトの解説文を参照しながら、組み込んでみました。 参考にしたサイトは、 http://www.skuare.net/test/spacegallery.html http://www.skuare.net/test/jnivoslider.html で、headの記述は、 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/eye.js"></script> <script type="text/javascript" src="js/utils.js"></script> <script type="text/javascript" src="js/spacegallery.js"></script> <script> $(document).ready(function(){ $('#myGallery').spacegallery({loadingClass: 'loading'}); }); </script> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery.nivo.slider.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#hoge').nivoSlider({ effect:'random', // sliceDown、sliceDownLeft、sliceUp、sliceUpLeft、sliceUpDown、sliceUpDownLeft、fold、fade、random slices:15, //分割枚数 animSpeed:500, //アニメーションスピード pauseTime:3000, //停止時間 directionNav:true, //方向ナビ directionNavHide:true //隠す }); }); </script> 多分後からの記述の部分が前の記述をリセットさせてしまうと思うのですが、 上手くこの２つのスクリプトを同じページ内で稼働させる記述方法があれば 教えてください。 よろしくお願いします。

  • CakePHPでjQueryを使うには

    ローカル環境にてCakePHPでwebサービスを制作しています。 ブラウザでviewを確認しながら構築しているのですが、この環境でgoogleAPIのjQueryを動作させることは出来るのでしょうか？ もしできるとしたら、 <?php echo $this->Html->script('http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js');?> <script type="text/javascript"> jQuery('#more').click(function(){$('innerboxes').clone().appendTo('box')}); </script> で動かないのは何が問題なのでしょうか？ また、googleAPIを使わない方法でも以下のように試しましたが、これも動かない原因はどこにあるのでしょうか？ jQueryのホームページでver1.5のソースをコピーし作ったjQuery1.5.jsを、 webroot /jsに入れる。 Controllerに var $helpers=array('Ajax','Javascript'); を記述。 Viewに、 <?php echo $javascript->link('jQuery.1.5.js'); ?> <script type="text/javascript"> jQuery('#more').click(function(){$('innerboxes').clone().appendTo('box')}); </script> 宜しくお願いします。

  • jQueryとprototypeの共存

    prototype.jsとjQuery.js、そのプラグインであるjquery.cycle.all.pack.jsを共存させ、データベースから取り出した画像にエフェクトをかけて表示したいと思っています。 ライブラリの共存には'jQuery.noConflict();'を使うところまでは調べたのですが、その使い方がよくわかりません。現在は以下のようにプログラムを書いていますが、jqueryの効果が出ていません。使い方、描き方の間違い等ありましたらご指摘お願いいたします。 <script type="text/javascript" src="./js/prototype.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.cycle.all.pack.js"></script> <script type="text/javascript"> <!-- jQuery.noConflict(); function loadHello(){ new Ajax.Request( './php/Search2.php', { onComplete : function( httpObj ){ $('検索結果表示領域').innerHTML = httpObj.responseText; } } );} jQuery(function() { 　　　　jQuery(".sample").cycle( { fx:'shuffle', delay: -2000 }); }); // --></script> </head> <body onLoad="loadHello()"> <ul id="sample"> <div id="検索結果表示領域"></div> </ul> </body> </html>

  • jQueryで質問です。

    jQueryで質問です。 オブジェクトA、Bがあるとします。 Aをドラッグすると、mousedownかdragstartの段階で要素がBに置き換わってドラッグさせるような動きは可能でしょうか。 作成中のソースを記載します。 <html> <head> <title>test</title> <script type="text/javascript" src="./jquery.min.js"></script> <script type="text/javascript" src="./ui/jquery.ui.core.js"></script> <script type="text/javascript" src="./ui/jquery.ui.widget.js"></script> <script type="text/javascript" src="./ui/jquery.ui.mouse.js"></script> <script type="text/javascript" src="./ui/jquery.ui.draggable.js"></script> <script type="text/javascript" src="./ui/jquery.ui.droppable.js"></script> <script type="text/javascript"> $(function(){ obj1 = $("#box"); obj2 = $('<div style="width:200px;height:200px;background:red;">B</div>'); obj1 .mousedown( function(){ obj1.replaceWith(obj2); obj2.draggable(); } ); }); </script> </head> <body> <div style="width:200px; height:100px; background: #cccccc;" id="box">A</div> </body> </html> これだと、Aのドラッグを一度解除して、Bをドラッグすると上手くいきますが、1回のモーションでBをドラッグさせたいのです。 宜しくお願いします。

  • ajaxとjQueryとjavascriptの関係

    ajaxとjQueryとjavascriptの関係についてよくわからないのですが ajaxとjQueryはjavascriptのライブラリーと言う事でしょうか？ ライブラリーの意味もよくわかってませんが。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する