のくす牧場
コンテンツ
牧場内検索
カウンタ
総計:127,645,382人
昨日:no data人
今日:
最近の注目
人気の最安値情報

私的良スレ書庫

不明な単語は2ch用語を / 要望・削除依頼は掲示板へ。不適切な画像報告もこちらへどうぞ。 / 管理情報はtwitter
ログインするとレス評価できます。 登録ユーザには一部の画像が表示されますので、問題のある画像や記述を含むレスに「禁」ボタンを押してください。

元スレJavaScript ライブラリ総合質問所 vol.4

JavaScript スレッド一覧へ / JavaScript とは? / 携帯版 / dat(gz)で取得 / トップメニュー
スレッド評価: スレッド評価について
みんなの評価 :
タグ : 追加: タグについて ※前スレ・次スレは、スレ番号だけ登録。駄スレにはタグつけず、スレ評価を。荒らしタグにはタグで対抗せず、タグ減点を。
レスフィルター : (試験中)
←前へ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ→ / 要望・削除依頼は掲示板へ / 管理情報はtwitter
151 : Name_Not - 2014/06/21(土) 17:25:45.76 ID:???.net (+57,-30,-252)
>>147
画像を切り替えてパラパラマンガのようにアニメーションさせたいのであれば
CSSスプライトな背景画像を動かす方がリクエストも少なくなるしなめらかにできるような・・・・
------------------------------------------------------------
【html】
<div class="image"></div>

【css】
.image{
width: 310px;
height: 310px;
background: url();
background-position: -2800px;
}

【js】
$(window).load(function() {
for(var i = 0; i < 9; i++){
setTimeout(switchImg, 50 * i);
}
function switchImg(){
var bgposi = parseInt($('.image').css('background-position'));
$('.image').css('background-position', bgposi+310);
}
});
------------------------------------------------------------
CSSのanimationのほうがさらに軽そうだけど。
http://codepen.io/jascha/details/sIgAo

的外れな回答だったらすんません。
152 : Name_Not - 2014/06/21(土) 17:57:28.54 ID:???.net (+49,-30,-187)
jqueryでデレゲートする時、
具体的なDOMを渡しても、同種のDOMが反応します

<div id="test"></div>
<div id="test1"></div>


$(document).on('click',document.getElementById('test'),function(e){
console.log(e.target.id);
})

これでtest1でも反応します。何故でしょうか?
testにだけ反応させたい時はどうしたらいいですか?
153 : Name_Not - 2014/06/21(土) 18:05:58.97 ID:???.net (-1,-29,-20)
>>152
document.getElementById('test') を呼び出した時、対象ノードを取得できてないんじゃない?
154 : Name_Not - 2014/06/21(土) 18:09:21.67 ID:???.net (+84,+29,-41)
ありがとうございます
取得は出来ていますが、デレゲートに失敗しているようで
div以外でも反応します
どうもdomをセレクタにすることは出来ないようです
155 : Name_Not - 2014/06/21(土) 18:24:32.46 ID:???.net (+56,+17,-33)
>>154
ドキュメントにも selector しか書いてないね
ドキュメントを読む癖をつけるといいよ
http://api.jquery.com/on/
156 : Name_Not - 2014/06/21(土) 20:34:30.57 ID:???.net (+29,-27,-34)
そもそも具体的なDOMが特定できてるんなら、delegateを使う意味というか意義がないんじゃね?
157 : Name_Not - 2014/06/21(土) 21:02:36.64 ID:???.net (+51,+24,+1)
>>156
確かに
158 : Name_Not - 2014/06/21(土) 22:05:35.46 ID:???.net (+57,+29,-6)
デレゲートには処理コストを下げるという意味もある
159 : Name_Not - 2014/06/21(土) 22:17:45.53 ID:???.net (+35,+17,-6)
どの段階の?
160 : Name_Not - 2014/06/21(土) 22:29:47.48 ID:???.net (+63,+29,-35)
>>152をjQueryを使わずに書けば無意味といわれる理由がわかると思う
161 : Name_Not - 2014/06/21(土) 23:03:05.89 ID:???.net (+94,+29,-9)
言われてみれば、対象が単独の場合はデレゲートしてもコスト下がらないですね
ありがとうございました
162 : Name_Not - 2014/06/21(土) 23:10:46.74 ID:???.net (+12,-15,-58)
あえてするんなら、そのままの構文で event.data にそのDOMが渡されてくるはずだから、
そこで違ったら return …かな(検証してない)
163 : Name_Not - 2014/06/22(日) 00:53:30.88 ID:???.net (+74,+29,-56)
>>161
無意味なのは「要素ノードをキャッシュしようとしていたから」であってdelegeteが無駄な訳じゃないよ
単一ノードでもdocumentに付け外しを繰り返しても検出できるメリットがある
キャッシュしたら参照比較なのでこのメリットを享受できない
164 : Name_Not - 2014/06/22(日) 01:10:09.26 ID:???.net (+64,+29,-5)
ちょっと意味が分かりません
例を示してもらえますか?
165 : Name_Not - 2014/06/22(日) 07:32:25.28 ID:???.net (+12,-30,-86)
>>164
jQuery(document).on('click','#test',function (e) { console.log(e.target.id); });
上記コードは意味があるが、>>152は(正常動作したとして)無意味
167 : Name_Not - 2014/06/24(火) 18:45:09.95 ID:???.net (-11,-29,-35)
>>166
全てanimate前にconsole出力されるはずたけど、非同期処理を理解してないのでは?
169 : Name_Not - 2014/06/24(火) 19:12:43.47 ID:???.net (+11,-29,-44)
jQueryのアニメーションはキューに積まれて、タイマーで逐次実行されるんだわ

.queue() を調べてみて callback関数渡す構文のやつ
170 : Name_Not - 2014/06/24(火) 19:36:08.09 ID:???.net (+45,+29,-23)
>>168
その手順だと 2. が終った後に 3. が始まるから動作が変化するけど、そこはいいの?
171 : Name_Not - 2014/06/24(火) 19:48:47.97 ID:EdfWiaWp.net (-14,+26,-14)
>>169
ありがとうございます。
animate()に限ったことではなく他の処理を書く場合にも陥りそうなので、できれば汎用的な書き方を知りたいと思っています。

>>170
はい、問題ありません。
172 : Name_Not - 2014/06/24(火) 23:12:46.36 ID:???.net (-21,-30,-53)
>>168
アニメーションが実際に実行される直前にイベントが発行されるだろうから
そのハンドラの中で 1 や 3 を呼び出す

具体的には

http://api.jquery.com/animate/
を読めばわかるが
.animate( properties, options )
に渡す options オブジェクトの strat ハンドラに 1, 3 を入れるといいだろう
173 : Name_Not - 2014/06/25(水) 00:09:14.17 ID:???.net (+2,-29,-68)
>>171
>できれば汎用的な書き方

>172 に補足すると、非同期に実行される類いの処理は
たいていの場合、その種のイベントが発行されるようになっている
ES6 では promise が js ネイティブになる。
そのときにはコードも汎用的な書き方が可能になるだろう
175 : 169 - 2014/06/25(水) 05:13:45.47 ID:???.net (-1,-29,-9)
やりたいことは .queue() だと思ったんだけど違うのか?
.animate()と.animate()との間に割り込めればいいんだよね
176 : 169 - 2014/06/25(水) 05:44:58.04 ID:???.net (+0,-30,-98)
あ、汎用的ってのは .animate()以外の.ajax()などの非同期処理もってことか?

Deferred を使って、一つ目の.animate() が完了してから次のを設定
とするしか無いのでは .ajax() なんかもその中に入れられるし

animation関連はキュー処理だからDeferred機構とはちょっと違うんだよね
割り込もうとしたらキューに積むか >>172
どっちにしろjQueryのアニメーション機能に特化しちゃうね
178 : Name_Not - 2014/06/26(木) 13:19:53.41 ID:???.net (+3,-30,-123)
jqueryでハンドラを付ける時、
詳細な指定をしている方を先に実行して欲しいです
$(document).on('click','ul[data-id=moge]',~

$(document).on('click','ul',~
では、上の方を先に実行して欲しいです
詳細なものほど優先するのは、CSSの決定同様に合理的動作だと思いますが、
そういう調整は内部でなされているのでしょうか?
179 : Name_Not - 2014/06/26(木) 13:23:07.62 ID:???.net (+42,+19,+0)
試したところ、されてませんでした
181 : Name_Not - 2014/06/26(木) 15:44:46.31 ID:???.net (+51,+28,-2)
こいつ何回同じ質問すんだよw
182 : Name_Not - 2014/06/26(木) 19:08:46.43 ID:???.net (+57,+29,-18)
自分の満足できる答えにならないから
悔しいんだろw

関数型言語風のコードは美しいからね。
それを認めたくないんだろう。
183 : Name_Not - 2014/06/26(木) 19:40:22.72 ID:???.net (+52,+29,-3)
関数言語推しの人も同程度にうざい
184 : Name_Not - 2014/06/26(木) 20:07:33.48 ID:???.net (+28,-30,-35)
if ($('.hoge').length ){
} else {
}
でOK
185 : Name_Not - 2014/06/26(木) 22:42:41.67 ID:???.net (-2,-30,-39)
stopPropagation

stopImmediatePropagation
の違いを分かりやすく説明して下さい
186 : Name_Not - 2014/06/27(金) 00:48:00.92 ID:???.net (-1,-29,-37)
Propagation を
stop するか
Immediate に stop するか
の違いがある
187 : Name_Not - 2014/06/27(金) 01:00:56.16 ID:???.net (+5,-22,-29)
immediateじゃない場合はどこに伝播するんです?
188 : Name_Not - 2014/06/27(金) 01:31:42.89 ID:???.net (+47,+29,-12)
お隣さん
189 : 180 - 2014/06/27(金) 01:44:41.29 ID:???.net (+54,+22,-2)
>>184
この方法で出来ました。ありがとうございました。
190 : Name_Not - 2014/06/27(金) 02:18:47.53 ID:???.net (+83,+21,-29)
よく分からないなあ
immediateじゃないstopはどこへの伝播を止めてるんです?
191 : Name_Not - 2014/06/27(金) 12:02:09.63 ID:???.net (+68,+29,-2)
>>190
公式文書を読んでわからなければ諦める
http://api.jquery.com/event.stopimmediatepropagation/
192 : Name_Not - 2014/06/27(金) 16:54:54.43 ID:???.net (+3,-30,-97)
ありがとうございます
・stopPropagation、stopImmediatePropagation、両方ともバブルアップを止める
・stopPropagationは、その要素に対する同種のイベントは止めない
・stopImmediatePropagationは、その要素に対する同種のイベントも止める
要約するとこういうことでしょうか
193 : Name_Not - 2014/06/27(金) 17:06:30.23 ID:???.net (+59,+29,-61)
javascriptを使ってブラウザで動くパズルゲームを作りたいのですが簡潔にかけて初心者でも理解しやすいようなライブラリありませんか?

PC用にする予定なのでスマホに関してはどうでもいいです
194 : Name_Not - 2014/06/28(土) 02:40:16.53 ID:???.net (+5,+30,+0)
195 : Name_Not - 2014/06/28(土) 03:36:25.11 ID:???.net (+37,-29,-103)
jqueryのoffset()はウインドウ上の座標つまりウインドウ座標が返ってくるようです。
何故メソッド名がoffsetなんですか?
オフセット座標って親要素を基準にした座標のことじゃないんですか?
196 : Name_Not - 2014/06/29(日) 09:47:25.49 ID:???.net (+32,+9,+0)
英語でお願いします
197 : Name_Not - 2014/06/29(日) 17:48:31.09 ID:???.net (+62,+29,-23)
>>195
基準点が親要素であるとか、オフセットの定義に含まれて無い気がするけど。
198 : Name_Not - 2014/06/30(月) 00:36:40.03 ID:???.net (-1,-29,-58)
offset()で取得されるのがドキュメント座標ならまだ分かりますが
クライアント座標というのは違和感があります
199 : Name_Not - 2014/07/04(金) 15:57:54.70 ID:???.net (+10,-17,-7)
複数のノードを選択できるツリービューってありますか?
←前へ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ→ / 要望・削除依頼は掲示板へ / 管理情報はtwitterで / JavaScript スレッド一覧へ
スレッド評価: スレッド評価について
みんなの評価 :
タグ : 追加: タグについて ※前スレ・次スレは、スレ番号だけ登録。駄スレにはタグつけず、スレ評価を。荒らしタグにはタグで対抗せず、タグ減点を。

類似してるかもしれないスレッド


トップメニューへ / →のくす牧場書庫について