jQueryを勉強しています。下記のようなコードがあったのですが、

Question

koime_ryokutya

204

109もっと見る

コンピュータインターネット

jQueryを勉強しています。下記のようなコードがあったのですが、

var trigger = $('.trigger', this);

何を示しているのかよくわかりません。普通のJavaScriptでは
var test = function(){}
と書けばtestオブジェクト生成だと思うのですが、上記のjQueryも何かのオブジェクトを生成しているのでしょうか？また、.triggerは、triggerクラスのセレクタを指定しているのだと思うのですが、２つめの引数のthisは何を示しているのでしょうか？

回答の条件

1人5回まで

登録：2011/11/10 08:08:58
終了：2011/11/13 09:12:40

No.1

Lhankor_Mhy8142322011/11/10 09:30:44

ã¾ãã

$('.trigger')
$('.trigger', document)
//ä¸¡èã¯ã»ã¼ã¤ã³ã¼ã«

ã§ããå¾èã¯documentã®ä¸ã®.triggerãæ¢ããã¨ããæå³ã§ãã¦ãåèã¯ç¯å²ãæç¤ºãã¦ããªãã ãã§ãã

ã

æ®æ®µã¯windowãªãã¸ã§ã¯ããè¿ãã¾ããããã¨ãã°ã

var hoge = {
  test:function(){
    return this
  }
}
hoge.test();//hogeãªãã¸ã§ã¯ããè¿ãã

ã§ãã

ã

$('div.foo').click(function() {
$('span', this).addClass('bar');
});
jQuery() – jQuery API

ãã®å ´åã¯ãªãã¯ã¤ãã³ããèµ·ããã¨ãã«thisãåç§ããã¾ãããããã¯ã¯ãªãã¯ãããè¦ç´ ãè¿ãã¾ããã¤ã¾ãããã®å ´åã®$('span', this)ã¯ãã¯ãªãã¯ãããè¦ç´ ã®ä¸ã«ããspanè¦ç´ ãã¨ããæå³ã§ãã

他4件のコメントを見る

あれ、文字化け。

2011/11/10 09:31:11

åæ²ã

---

ã¾ãã

$('.trigger')
$('.trigger', document)
//ä¸¡èã¯ã»ã¼ã¤ã³ã¼ã«

ã§ããå¾èã¯documentã®ä¸ã®.triggerãæ¢ããã¨ããæå³ã§ãã¦ãåèã¯ç¯å²ãæç¤ºãã¦ããªãã ãã§ãã

ã

æ®æ®µã¯windowãªãã¸ã§ã¯ããè¿ãã¾ããããã¨ãã°ã

var hoge = {
  test:function(){
    return this
  }
}
hoge.test();//hogeãªãã¸ã§ã¯ããè¿ãã

ã§ãã

ã

$('div.foo').click(function() {
$('span', this).addClass('bar');
});
jQuery() – jQuery API

ãã®å ´åã¯ãªãã¯ã¤ãã³ããèµ·ããã¨ãã«thisãåç§ããã¾ãããããã¯ã¯ãªãã¯ãããè¦ç´ ãè¿ãã¾ããã¤ã¾ãããã®å ´åã®$('span', this)ã¯ãã¯ãªãã¯ãããè¦ç´ ã®ä¸ã«ããspanè¦ç´ ãã¨ããæå³ã§ãã

2011/11/10 09:31:33

えー？

2011/11/10 09:32:14

まず、

$('.trigger')
$('.trigger', document)
//両者はほぼイコール

です。後者はdocumentの中の.triggerを探せ、という意味でして、前者は範囲を明示していないだけです。

次にthisですが、これはそのコードが実行されている場所によって変わってきます。

普段はwindowオブジェクトを返しますが、たとえば、

var hoge = {
  test:function(){
    return this
  }
}
hoge.test();//hogeオブジェクトを返す。

です。

そういうわけで、そのthisの意味は周りのコードによって変わってくる、ということです。

ではありますが、一般的にその書き方をするのはおそらくイベントだと思います。jQuery公式のレファレンスからコード例を引っ張ってみます。

$('div.foo').click(function() {
$('span', this).addClass('bar');
});
http://api.jquery.com/jQuery/

この場合クリックイベントが起きたときにthisが参照されますが、これはクリックされた要素を返します。つまり、この場合の$('span', this)は、クリックされた要素の中にあるspan要素、という意味です。

2011/11/10 09:37:12

あー、やっとできた。引用記法がダメだったみたい？

2011/11/10 09:39:09

丁寧な回答ありがとうございます。

2011/11/10 10:35:50

No.2

TransFreeBSD6682682011/11/10 10:19:39

ちなみに「$」と言うのは関数名で、javascriptでは変数や関数の名前に英数字以外に「_」と「$」も使えるのです。ですので、jQueryを使ってなければ、自分で

function $(){...}
var hoge = $();

などと出来ます。

他の言語でも「_」一文字の関数を作ったりできるかもしれませんが、普通はしないですよね。

jQueryなどがちょっと特別な関数に用いるjavascript（jQuery以後？）特有の文化です。

回答ありがとうございます

2011/11/10 10:35:57

コメントはまだありません

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

リクエスト送信済

回答リクエストを送信したユーザーはいません

Lhankor_Mhy · Accepted Answer · 2011-11-10T11:27:29+09:00

あ、すみません。もうひとつの質問を回答していませんでした。

jQueryではメソッドチェーンで書いていくのがお作法といいますか、$で表現するjQueryコアはもちろん、多くのメソッドでjQueryオブジェクトを返します。

$('#hoge').hide()
          .addClass('fuga')
          .show()

上記のコードは、以下のような感じです。

$('#hoge')がjQueryオブジェクトを返す
返ってきたjQueryオブジェクトのhideメソッドを実行するとjQueryオブジェクトが返る
返ってきたjQueryオブジェクトのaddClassメソッドを実行するとjQueryオブジェクトが返る
返ってきたjQueryオブジェクトのshowメソッドを実行するとjQueryオブジェクトが返る

同じような構造を簡単なjavascriptで書きますと、

var hoge = {
  fuga:function(){alert('fuga');return this;},
  piyo:function(){alert('piyo');return this;},
}
hoge.fuga().piyo().fuga().piyo();// fuga piyo fuga piyo とアラート4回

こんな感じです。オブジェクトのメソッドの最後にreturn thisを書いておくと自分自身を返すことになるので、メソッドをつないで書いていくことができるのです。

Lhankor_Mhy · Accepted Answer · 2011-11-10T11:27:29+09:00

あ、すみません。もうひとつの質問を回答していませんでした。

jQueryではメソッドチェーンで書いていくのがお作法といいますか、$で表現するjQueryコアはもちろん、多くのメソッドでjQueryオブジェクトを返します。

$('#hoge').hide()
          .addClass('fuga')
          .show()

上記のコードは、以下のような感じです。

$('#hoge')がjQueryオブジェクトを返す
返ってきたjQueryオブジェクトのhideメソッドを実行するとjQueryオブジェクトが返る
返ってきたjQueryオブジェクトのaddClassメソッドを実行するとjQueryオブジェクトが返る
返ってきたjQueryオブジェクトのshowメソッドを実行するとjQueryオブジェクトが返る

同じような構造を簡単なjavascriptで書きますと、

var hoge = {
  fuga:function(){alert('fuga');return this;},
  piyo:function(){alert('piyo');return this;},
}
hoge.fuga().piyo().fuga().piyo();// fuga piyo fuga piyo とアラート4回

こんな感じです。オブジェクトのメソッドの最後にreturn thisを書いておくと自分自身を返すことになるので、メソッドをつないで書いていくことができるのです。

jQueryを勉強しています。下記のようなコードがあったのですが、

ベストアンサー

Lhankor_Mhy8142322011/11/10 11:27:29

その他の回答（2件）

Lhankor_Mhy8142322011/11/10 09:30:44

TransFreeBSD6682682011/11/10 10:19:39

Lhankor_Mhy8142322011/11/10 11:27:29ここでベストアンサー

コメント（0件)

この質問への反応（ブックマークコメント）