• ベストアンサー

どういうときにjQueryオブジェクトが返るのか

jQueryの初心者なのですが、どういうときにjQueryオブジェクトが返るのかよくわかりません。 var sample = $(array) のように右辺がjQueryを使っていたら、左辺にもjQueryオブジェクトが入るのでしょうか?それとも、単純なdom要素が入るのでしょうか? 自分は、前者だと思っているのですが、サンプルコードを色々とみていると、 var sample = $(window); $(sample).each(function(){ }) などのように、$()でまた変数を囲っているものも見受けられます。 果たしてどうなのでしょうか? 以上、よろしくお願い致します。

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

  • ベストアンサー
  • f1204-okw
  • ベストアンサー率84% (16/19)
回答No.1

「前者」の考え方のとおりです。 変数 sample には jQuery オブジェクトが代入されています。 そのため sample.each(...); といった書き方が可能ですし、そう書いたほうが良いでしょう。 処理量を減らすためと、素直で読みやすいコードにするためです。 $(sample).each(...); でも動作するのは、引数に jQuery オブジェクトを渡すことができるからです。 結果は同じだし便利ですが、そうする必要がない場合は多くあります。 この例などもそうです。 プログラミングに詳しくない方が書いたのでしょう。 プログラミングに詳しくない(詳しくなる時間を用意できない)方でも簡単に利用できるのが jQuery の魅力です。 反面、サンプルコードを見極めることが重要になってきます。 まとめ: jQuery(...) の戻り値は jQuery オブジェクトですから var sample = jQuery(window); sample.each(...); と書くことができます。

関連するQ&A

  • jQueryのforとeachの変数参照の違い

    jQueryを学習中の者です。 現在、パララックス効果のサンプルコードを参考にしているのですが、理解できずに困っています。 その内容は各ブロック要素をeachでループさせ、ループの中でウインドウのスクロールイベントを登録しコールバック関数で細かい設定をしていくというものです。 理解できないというのは、以前 javasctiptでのfor文による要素へのイベント登録で「イベントでも渡す関数は参照のみです。新たに関数を自動で作成してくれるような事は決してありません。」と説明が有り、コールバック関数内に変数を使うとイベント発生時に変数を参照した時、ループの最後で格納した値になるので、この事は理解し注意もするようにしていました。 しかし、今回のサンプルコードではforとeachの違いはあるけれど、コールバック関数に変数を使っているのに、その変数が別々の値を持っています。 最初はjQueryとjavascriptの挙動の違いかなと思い、以前のfor文のコードを下の様にjQueryで書き替えても結果は一緒でした。 取り留めの無い文章になってしまいましたが、どうして下の2つコードが違う結果になるのかを解り易く説明していただけませんでしょうか。 <table border="1"> <tr><td></td><td></td>...</tr> ... </table> <script> (1)//これだと、駄目…どのtdのイベントでも最後のtdが反応 $(function(){ for(var i =0 ,len=$('td').length;i < len; i++){   var td=$('td').eq(i);   td.mouseover(function(){ td.css('background-color','red');});   td.mouseout(function(){ td.css('background-color','');});  } }); (2)//これだとOK…ちゃんと各tdが反応する。 $(function(){  $('td').each(function(index,elem){   var td=$(elem);    td.mouseover(function(){ td.css('background-color','red');});    td.mouseout(function(){ td.css('background-color','');});  }); }); </script> *今回の質問はどう対処したら良いのかという類ではありません。 両方とも変数 td にjqueryオブジェクトを格納して、同じ形式でイベント登録しているのに違う結果になるという事が壁に成ってます。 ネットでいくら調べても構文の説明やサンプルコードは溢れていますが、この様な事例に触れた物が皆無です。 forとeachの違いなんて基本的なことで恥ずかしいのですが、お願いします。

  • JavaScriptでArrayオブジェクトもどきの独自オブジェクトを作りたい!

    お世話になります。 JavaScriptを用いて、ある条件の下でArrayオブジェクトのような独自オブジェクトを定義したいのですが、ゆっくり調べている時間がなく、こちらの方を頼らせていただくことにしました。 【やりたいこと】 Arrayオブジェクトのような独自オブジェクトを定義したい。 【やりたいことの条件】 条件1: Arrayオブジェクトが戻り値として返ってくる既存の関数があり、その戻り値であるArrayオブジェクト自身を新たなオブジェクトとして定義したい。 この関数は、 ・Arrayオブジェクトの要素とは全く無関係の引数をとる。 ・この関数の仕様を変更することはできない。 という特徴があります。 条件2: 独自オブジェクトを作る際の引数は、上述の既存の関数の引数と同じ。 【サンプル】 上記の説明では、少々わかりにくいかもしれませんので、使い方のサンプルを以下に示します。 既存の関数: function immovableFunc(param1, param2) { var myArray = new Array; … return myArray; } 今回作りたいオブジェクト: PseudoArray 今回作りたいオブジェクトの使われ方: var pa = new PseudoArray(param1, param2); そもそも、このようなオブジェクトが作れるのか?、作れるとするならばどのように記述するのか?見当も付かない状態です。 皆さんのお知恵を拝借させていただければと思います。 どうぞ、よろしくお願いいたします。

  • jQueryを利用する場合の、グローバル変数の範囲について。

    jQueryを利用する場合の、グローバル変数の範囲について。 jQueryを利用してファイルからデータを呼び出して、URL上は画面遷移することなく、 件数に応じて内容を表示するサンプルがあります。 そのスクリプトの中で、スクロール位置をグローバル変数に入れて、別の場所でも使いたいと考えているのですが、うまく変数の値を保持できません。どこがマズいのでしょうか? function test(){    $(":checkbox, :radio").click(function(){      var h = $(window);      hoge = h.scrollTop();      window.alert(hoge);    });      window.alert(hoge); } 一つ目のalertだけだと、スクロール位置が正しく表示されるのですが、 二つ目のalertを付けると、hoge is not defined となります。 jQueryを使っているからなのでしょうか、それとも、単にグローバル変数の使い方を間違っているからなのでしょうか。

  • 親フレームのjQueryオブジェクトを使えるか?

    html(親html)上に別のhtml(子html)を<iframe>で表示しています。 親htmlではjQuery(v1.8.2)を使用しています。 子htmlでもjQueryを使いたいです。 単純に子htmlでjquery.jsを読み込めば良いですが、勉強のため以下のように親htmlのjQueryオブジェクトを使って実現してみました。 【子htmlのscript】 var $ = parent.jQuery; $(window).load(function() {   $("body", document).append( "hoge" ); }); これで見た目は正しく動作してますが、以下の不明点が出てきたので質問させて下さい。 【質問】 $(window).loadではなく$(document).readyを使った場合は"hoge"が追加されていませんでした。 <body>要素がまだ読み込めていないせいかとも思いましたが、documentの読み込み完了後に実行されているはずです。 なぜ"hoge"が追加されないのでしょう? このdocumentは親htmlのdocumentなのでしょうか? ただ、$("body").append( "hoge" )と書いた場合は親htmlに"hoge"が追加され、$("body", document).append( "hoge" )と書くことで子htmlに"hoge"が追加されるようなので、親htmlのdocumentではない気がします。 よろしくお願いします。

  • jQueryの関数内の変数について教えてください

    jQueryで外部の関数の中にある変数の値の取得方法について教えてください。 文法等全く分かっていない、初心者で大変恐縮しております。 外部にある変数の値を取得し、その値を必要な変数に代入したいと思っております。 下記に大まかなコードを記述いたしました。 サイトを開いた時に「mLivre」を実行し、リサイズ処理をした時に もう一度「mLivre」を実行しております。 「var mLivre」内にある数値を、「jQuery(window).resize」の中の 「 jQuery.fn.mLivre」の中にある変数に代入しようと思っております。 私のやりたいことは、「mLivre」というプラグイン(下記※参考サイト)を レスポンシブにしたいと思っております。 「mLivre」は画像を本の様にめくってくれるスクリプトです。 下記のコードの流れで、ブラウザサイズに合わせて表示の大きさを 変えることができましたが、リサイズするごとに初期化され ページが1ページ目からになってしまうので、 リサイズ後も変わらないページで表示させたいと思っております。 ※参考サイト http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-mlivre.html 全くの初心者で大変恐縮しておりますが、 ご享受いただけたらと思います。 また、記述についてもご指摘いらだけたら幸いです。 宜しくお願いいたします。 -------ソースコード---------- //実行外部ファイル jQuery('#slide').mLivre({ }); //コアファイル (function(jQuery) { jQuery.fn.mLivre = function(options,num) { }; jQuery(window).resize(function(){ var mLivre={ //ここにある変数の値を取得してリサイズ内の jQuery.fn.mLivreに渡したい。 } jQuery.fn.mLivre = function(options,num) { //この中の変数に代入したい }; jQuery('#slide').mLivre({  //リサイズ後の実行部 }) ; }); })(jQuery); var mLivre={ //ここにある変数の値を取得してリサイズ内の jQuery.fn.mLivreに渡したい。 }

  • jqueryについて教えて下さい。

    貴重な場をお借りして質問させていただきます。 知識のある方、お力を貸して下さい。 今勉強の為プラグインなどを制作しておりまして、 一定の値までスクロールするとコンテンツをフェイドインさせるような スクリプトを書いています。 ただ、別ページに遷移して戻ってくると、opacityが0となり真っ白な状態と なってしまいます。 それを解決するためにcookieなどを使ったりはして出来たのですが、 スマートではないので、cookieを使用せずに出来れば嬉しいのですが、 良い方法ございましたら、ご教示いただけないでしょうか。 宜しくお願い致します。 <script type="text/javascript"> $(function(){ $('#contents1').locationFade(); $('#contents2').locationFade(); $('#contents3').locationFade(); $('#contents4').locationFade(); }) </script> (function($) { $.fn.locationFade = function(options){ var defaults = { fadeSpeed:500, location:300, easing:'swing' } var opts = $.extend(defaults , options); var windowHeight = $(window).height(); var target = $(this); target.css('opacity',0);//最初に透明度0とする $(window).on('load' , function(){ //画像が読み込まれた後でないとtargetOffsetがきちんと取れない為 target.each(function(){ var targetOffset = target.offset().top; if(windowHeight > targetOffset){       //最初から要素がwindowサイズ内に表示されているなら即fadeIn target.stop().fadeTo(opts.fadeSpeed , 1 , opts.easing) } $(window).on("scroll", function(){ var scrollTop = $(window).scrollTop(); var scrollVol = scrollTop + windowHeight - opts.location; //locationはその要素のどれだけ上に来た時に表示するかの値 if(targetOffset <= scrollVol){ target.stop().fadeTo(opts.fadeSpeed , 1 , opts.easing) }; }); }); }); }; })(jQuery);

  • jQueryのvar jQueryの仕組みについて

    jQuery-1.6.2のソースコードを見ているのですが質問させてください。 25行目の var jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context, rootjQuery ); }, そして100行めの jQuery.fn = jQuery.prototype = { constructor: jQuery, init: function( selector, context, rootjQuery ) { の意味が分かりません。 PHP等のclassになれているとJSのクラスは戸惑うことが多いのですが、この例は最たるもので、自分の中のJSでのclassは (1)スーパークラスのプロパティをcall()、apply()で継承 (2)スーパークラスのメソッドをprototypeオブジェクトで継承 (3)インスタンスのデータ型判定に必要なプロパティをconstructorで調整 だったのですが、スーパークラスがどの行のどれなのかも分かりません。 型やメソッド名からこれらがclassを意味しているのは分かるのですが、いったいどの部分がclass定義、継承を行っているのか教えていただけませんでしょうか? なぜこれらがclassになっているのかが理解できません。 分るのは、jQuery.prototype.constructor = jQueryで、それをjQuery.fnに代入((3))している事です。 329行目の、jQuery.fn.init.prototype = jQuery.fn;の右辺がnew {$class}の形であれば(2)のプロトタイプチェーンの形だと分るのですが。 (1)は、init内でメンバ変数を定義したりしているので、classなのかな、という程度しか分っておりません。 jQuery.fnがコンストラクタで、jQueryがインスタンスで、var jQueryは親クラスをinitしたもの?・・・と混乱しております。 質問内容も文章が混乱していて申し訳ないです。

  • フォームからjQuery,jQuery.jsonを使ってJSONを作っ

    フォームからjQuery,jQuery.jsonを使ってJSONを作ってPHPで表示したい。 こんばんは。2、3日ずっと悩んでて解決しないので助けてください。 jQuery,jQuery.jsonを使ってJSONを作成しています。 クリックイベントに var form = $("#sform"); var json = $(form.serializeArray()); var strJson = $.toJSON(json); という形をとって $.ajax({ url : "request.php", type : "post", data : strJson, success: function(request){ $('#result').html(request); } }); で送っています。 ただPHP側で var_dump($_POST); を行ってもArray ( ) と表示されます。 firebugで見たところpostに入っているデータは以下の通りです。 {"0":{"name":"date","value":"2010/09/15"},"1":{"name":"type","value":"new"},"2":{"name":"bin[]","value":"2"},"3":{"name":"bin[]","value":"3"},"length":4} var_dumpで表示できないのはなぜでしょうか? 上記で変数json のまま送るとオブジェクトとして送れてvar_dump でも表示できます。 ただ今はjson の勉強をしているので、できればなぜこうなっているのかを理解したいです。 基本的なところで勉強不足かもしれませんが、何かアドバイスなど頂けると嬉しいです。 よろしくお願いします。

  • jQueryで要素を複製するプラグインの作成

    jQueryのプラグインを作成しています。 やりたいことは、追加ボタンをクリックしたら、指定要素を複製していくというものです。 下記のようにプラグインを作成しましたが、 なぜか要素(clone_base1)が消えてしまいます。 原因もわからず困っています。 どのようにしたらよいのでしょうか。 (function(jQuery) { jQuery.fn.clone = function(options) { //defaultの値 var options = jQuery.extend({ reset_form: true ,clone_base : "clone_base1" }, options); return this.each(function() { jQuery(this).click(function(){ //元となるボックスを複製 jQuery("."+options.clone_base).clone().appendTo("."+options.clone_base); }); }); }; })(jQuery);

  • jQueryの仕組みについて質問です

    お世話になります。現在jQueryのコードを読んでいるのですが、どうしてもわからないところがあります。 jQuery1.11.1の2774行目、jQuery.merge(...)と自分自身を呼び出していますが、これはjQuery中でどのような処理をして実現しているのでしょうか?jQuery.merge = function(){...};としているわけでもないのに呼び出せているのが理解できません。 mergeメソッド自体は、450行目、jQuery.extend内で定義されているようです。 以下簡易化したjQueryです。 var window = this; // ブラウザ以外で実行する場合のみ必要 (function(){ jQuery = window.jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context ); }; jQuery.fn = jQuery.prototype = { hello: function(){ console.log("hello from fn!"); // ここをjQuery.logと書けるようにしたい } }; jQuery.extend = jQuery.fn.extend = function() {}; jQuery.extend({ log: function(msg){ console.log(msg); } }); init = jQuery.fn.init = function( selector, context ) { console.log("Hello"); }; init.prototype = jQuery.fn; // ここをjQuery.logと書けるようにしたい } )(); jQuery().hello();

専門家に質問してみよう