人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

●質問者: koime_ryokutya
●カテゴリ:コンピュータ インターネット
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● Lhankor_Mhy

?????????

$('.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');

});

jQuery() – jQuery API

????????´?????????????????????????????????????????¨??????this????????§????????????????????????????????????????????????????´???????????????????????????????????????´??????$('span', this)???????????????????????????????´????????????????span????´??????¨??????????????§??????


Lhankor_Mhyさんのコメント
あれ、文字化け。

Lhankor_Mhyさんのコメント
再掲。 --- まず、 >|| $('.trigger') $('.trigger', document) //両者はほぼイコール ||< です。後者はdocumentの中の.triggerを探せ、という意味でして、前者は範囲を明示していないだけです。 次にthisですが、これはそのコードが実行されている場所によって変わってきます。 普段はwindowオブジェクトを返しますが、たとえば、 >|| var hoge = { test:function(){ return this } } hoge.test();//hogeオブジェクトを返す。 ||< です。 そういうわけで、そのthisの意味は周りのコードによって変わってくる、ということです。 ではありますが、一般的にその書き方をするのはおそらくイベントだと思います。jQuery公式のレファレンスからコード例を引っ張ってみます。 >http://api.jquery.com/jQuery/:title> $('div.foo').click(function() { $('span', this).addClass('bar'); }); << この場合クリックイベントが起きたときにthisが参照されますが、これはクリックされた要素を返します。つまり、この場合の$('span', this)は、クリックされた要素の中にあるspan要素、という意味です。

Lhankor_Mhyさんのコメント
えー?

Lhankor_Mhyさんのコメント
まず、 >|| $('.trigger') $('.trigger', document) //両者はほぼイコール ||< です。後者はdocumentの中の.triggerを探せ、という意味でして、前者は範囲を明示していないだけです。 次にthisですが、これはそのコードが実行されている場所によって変わってきます。 普段はwindowオブジェクトを返しますが、たとえば、 >|| var hoge = { test:function(){ return this } } hoge.test();//hogeオブジェクトを返す。 ||< です。 そういうわけで、そのthisの意味は周りのコードによって変わってくる、ということです。 ではありますが、一般的にその書き方をするのはおそらくイベントだと思います。jQuery公式のレファレンスからコード例を引っ張ってみます。 >http://api.jquery.com/jQuery/> $('div.foo').click(function() { $('span', this).addClass('bar'); }); << この場合クリックイベントが起きたときにthisが参照されますが、これはクリックされた要素を返します。つまり、この場合の$('span', this)は、クリックされた要素の中にあるspan要素、という意味です。

Lhankor_Mhyさんのコメント
あー、やっとできた。引用記法がダメだったみたい?

koime_ryokutyaさんのコメント
丁寧な回答ありがとうございます。

2 ● TransFreeBSD

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

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

などと出来ます。

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

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


koime_ryokutyaさんのコメント
回答ありがとうございます

3 ● Lhankor_Mhy
ベストアンサー

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

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

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

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

  1. $('#hoge')がjQueryオブジェクトを返す
  2. 返ってきたjQueryオブジェクトのhideメソッドを実行するとjQueryオブジェクトが返る
  3. 返ってきたjQueryオブジェクトのaddClassメソッドを実行するとjQueryオブジェクトが返る
  4. 返ってきた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を書いておくと自分自身を返すことになるので、メソッドをつないで書いていくことができるのです。


koime_ryokutyaさんのコメント
回答ありがとうございます。とても勉強になります。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ