jQuery ライブラリ 総合質問所 vol.4

>>137
では、あなたと>>134にとっては正しいんだろうな

正しいか正しいかはみた人が決めることよ。

できるのは、その人のために情報を書いておくこと。

$(this)を変数にキャッシュしておくことで
1回当たり0.00001秒早くあるというメリットが有る。
その反面コードの行数が増えて使用メモリも増えるというデメリットが有る。

意味があると思う人だけ、使えばいい。

>>137
質問を三日間放置して初めて返した発言が「>>134がいっていることは正しいですよ」か
回答者を人と思わん態度が文章に現れているな

× >>134がいっていることは正しいですよ。
○ >>134がいっていることは私の中では正しいですよ。

なんか誰にでも噛みつきたい奴がいるみたいだなｗ

質問者ですが放置ですみません
>>137は質問者ではなく、なりすましか自演です

放置というかだんだん難しくなっていって返すにもどうにも
もう少し落ち着いたら返事なり書くつもりで今は展開を見てる状態です

>>128のメソッドチェーンはわかりますしすでに使っています
今気になっているのは$this不要なら$(this)に限らず他のオブジェクトもそうなのかなと
せっかく勉強になるいい展開なのに>>137には残念です

>>143
> せっかく勉強になるいい展開なのに>>137には残念です

なら無視すればいいべｗ

あなたの欲しかった情報、
$(this)を変数に入れることによる速度アップは
殆ど無いってことが、ソースコードより明らかになったでしょう？

>>143
> 今気になっているのは$this不要なら$(this)に限らず他のオブジェクトもそうなのかなと

セレクタの検索が遅い（場合がある）から、それに関してキャッシュすることで速度アップすることはあるよ。
getElementByIDが使われるあろうセレクタにID単体を入れた場合に有意な速度アップになるかは微妙だけど

でもthisを含めたDOM要素の場合、同様に不要だろうね。
ナノ秒レベルのごくわずかの速度アップが必要っていうのなら話は別だけどｗ

>>144
なりすましに無視はないだろ
そこは一言でも言っておかないと

ベンチマークしてみたよ。
http://jsperf.com/efivmfqsat2gfbrsm57h

Firefoxの場合なんと2.77倍も速くなったよ！
* $(el) ・・・ 570741 ops/sec
* $el ・・・ 1578389 ops/sec

IE11だと1.04倍
* $(el) ・・・ 49793 ops/sec
* $el ・・・ 51797 ops/sec

Chromeだと1.41倍
* $(el) ・・・ 233268 ops/sec
* $el ・・・ 328296 ops/sec


やはり、$el変数に入れたほうがいいみたいだね！

・・・ここまでは素人判断ｗ

倍率だけで判断するのは素人判断。

ここからが本番ね

あらためてよく見ると

Firefoxの場合
* $(el) ・・・ 1.752 ナノ秒/回
* $el ・・・ 0.6335 ナノ秒/回
1回あたり 1.1185 ナノ秒 速くなる

IE11の場合
* $(el) ・・・ 20.083 ナノ秒/回
* $el ・・・ 19.306 ナノ秒/回
1回あたり 0.777 ナノ秒 速くなる

Chromeの場合
* $(el) ・・・ 4.287 ナノ秒/回
* $el ・・・ 3.046 ナノ秒/回
1回あたり 1.241 ナノ秒 速くなる


あとは、これが意味があるかを考えて判断しなさい。

俺はこの結果からパフォーマンスアップのにために
わざわざ変数に入れる意味は無いと思っている。

複雑なセレクタ式を何度もループの中とかで参照するなら効果はあるんじゃないかな

>>149
複雑なセレクタの場合は当然そうだよ。
それは最初から今回の話の対象外の話。

今の話は、$(this)を$thisに入れることの意味って話だから。



関係ないけど、よくさブラウザとかのバージョンアップで
速度が○倍になりましたとかいう宣伝文句あるじゃん。
あれっってまさにこれなんだよね。

> Firefoxの場合なんと2.77倍も速くなったよ！

確かに、2.77倍になっている。だけど全体が2.77倍になったわけじゃなく
処理の一部が速くなっただけで、しかも元々ナノ秒レベルの体感できない部分が
10倍になっただけ。だから当然体感できない。
○倍になったって宣伝文句は話半分に聞くべきだよねって話がしたかった。

> 10倍になっただけ。だから当然体感できない。
倍率書き間違えたｗ

あ、もっとごめん

ナノ秒って書いていたｗ
正しくはマイクロ秒だｗ
ミリ秒の1000分の1
0.000 001秒

なにかおかしいと思ったんだよｗ
なんでだろ。上の書き込みに引きずられてしまったか。

入門書や入門サイトではたいてい
$('_')を使用する際は変数に入れてなどと書かれてるね

メソッドチェーンするにしても複雑だったりやたら長くなる場合、
どうしても後から使う場合、つまり途中に別の処理を挟みたいとき
変数に入れてる

速度云々ではなくて数回使うなら変数に入れるのはセオリーではないかな
関係ないがプログラミングの世界はそれが一般的

> $('_')を使用する際は変数に入れてなどと書かれてるね
聞いたことないけど？

どこの話？

> 速度云々ではなくて数回使うなら変数に入れるのはセオリーではないかな
> 関係ないがプログラミングの世界はそれが一般的

数回程度ならメソッドチェーン使えばいいので必要ないでしょ。
あんたのいうセオリーはメソッドチェーンが出来ない場合の話だろうし。

そもそも「一般的」の一言じゃなんの説得力もないよ。
具体的なコードでも書いて説明してくれなきゃ。

>>154
いくらでもあるしググれば出てくるぞ
晒すと迷惑になるからあえて出さないが
（そういうサイトには感謝しているので）

>>148
Firefoxが1〜2μs、Chromeが3〜4μs

IE11が19〜20μs！
それは何かの間違いか、環境の違い

こんにちは、質問です。
日本地図のエリア情報を表示できるライブラリを探しているのですが、ご存知の方はいらっしゃいますか？
具体的には、最初は日本地図で各エリア（関東、近畿、四国など）をクリックすると
そのエリアの各都道府県が表示されるようなものです。

イメージとしてはこのサイトのようなものです
http://www.flashwork-s.com/map/map2/index.html

この参考サイトはFlashで作られているのですが、
JavaScriptでこれと似たようなことを出来るものはないでしょうか？
JapanMapというものは見つけましたが、これはエリアからその都道府県の表示が出来ませんでしたので、他のがあれば教えてくださいm(_ _)m

すみません、JavaScriptライブラリスレと間違えました
向こうへ再投稿致します
スレ汚し大変失礼しました

jQuery　Lemmon Sliderの設定方法
http://security.okwave.jp/qa8925996.html

okvave で質問していますが、未回答です。
回答　お願いします。

querySelectorAllで、sectionタグ下のimgタグは対象としたい。

　→ document.querySelectorAll('section img')

しかし一方でsectionタグ下でもIDがexceptのdivに含まれるimgタグは除外したい
（section div#except img は対象外）。
このようなときにセレクタはどのように記述すればよいですか？

　→ document.querySelectorAll('section img:not(section div#except img)')

では（案の定）ダメでした。
sectionの下のimgが必ず何らかのdivに囲まれてるとは限りません。
よろしくお願いします。

>>161
+ JavaScript の質問用スレッド vol.123 + [転載禁止](c)2ch.net
http://peace.2ch.net/test/read.cgi/hp/1423915644/

>>161
ここはjQueryのスレだからなｗ

jQueryならこれでいいだろう。
$('section img').not('section div#except img')

ただ、IDは一個しか無いのが普通だから、これでいいはずだし、
$('section img').not('#except img')

exceptは普通幾つもありそうだからこっちのほうが良さそうだが
$('section img').not('.except img')

移るなら移ると書けばいいのに
移動先も違うからもう知らん

スマホのブラウザの「PC版サイトを閲覧」と同等機能を
1つのページ自体に持たせることは可能でしょうか？

PC版とスマホ（SP）版とでURLを分けておらず同一です
PC版だと広告が消えるので、スマホユーザーが上の項目にチェックを
入れてなくてもPC版として表示したいのです

.htaccess、php共にに対応してないのでライブラリやScriptで
できるとありがたいです

button()で作ったボタン、マウスオーバーで色が変わるんですが、
クリックした後別の要素をクリックしないと色が元に戻りません

blur()でフォーカスを外せるそうなのでやってみたんですが、変わらずです（何か勘違いあったらすみません）

この設定を変えるにはどうしたらいいでしょうか

>>166
はぁ？

CSSでやればいいじゃん。

<style>button:hover {color: red}</style>
<button>btn</button>

おわり

>>167
説明不足でした。すみません
↓の画像の「スタート」がマウスオーバー時の状態で、「リセット」がそうでない時の状態です。
http://i.imgur.com/apQp6mf.png

どうやらblur()はちゃんと効いていたんですが、「スタート」のクリックイベントで実行する関数内で
「スタート」をprop('disabled', true')するとマウスオーバーをやめても状態が残ってしまうようです。
これを改善したいのです

>>168
だからCSSでやればいいじゃん

>>169

>>166は忘れて下さい
>>168での「状態が残ってしまう」は、disabledをfalseに戻して再度マウスオーバーしないと青のままということです

↑がCSSでやればいいじゃんでしたらどのように書けばいいでしょうか

>>167のコード書いた？

JQueryで書いた努力は無駄だったということで要りません。

マウスオーバーで色を変える処理はCSSだけでできます。

>>171
書きましたがやりたいことはできませんでした

$('#start').button();
$('#reset').button();
$('#start').click(function(){
メソッド1() ← この中で$('#start').prop('disabled', true).addClass('disabled');
this.blur();
});
$('#reset').click(function(){
メソッド2() ← この中で$('#start').prop('disabled', false).removeClass('disabled');
this.blur();
});

↑のように書いた時、
スタートを押す→スタートがホバー状態（青）でdisabledに→リセットでdisabled解除→スタート青のまま（マウスオーバーして離すと灰色に戻る）

という動作をするので、スタートがdisabledになる時、またはリセットでdisabled解除した時にスタートには灰色になっていてほしいのです

>>172
ホバーって用語をググったほうがいいよ。
根本的にな所を間違ってるから。

>>172
お前がやりたい事はこれだろ？
ホバーで色なんか変えてないが、お前がやりたい事はこれだろ？

http://jsfiddle.net/xexst8px/

>>172
その文章意味がわからんが、もう少し頑張って解析してみたよ。
これであってるだろ？

http://jsfiddle.net/xexst8px/2/

すみません。2つ質問があります。

�@
#gnavで囲ったリストのaをマウスオーバーすると<span>で作った下線がついてくるというものを作りたいと思っています。下線は動くようになったのですが、
これをマウスオーバーしていない時やページを読み込んだ時には.current(現在位置)の位置に戻ってきて欲しいのです。



<script>
$('a','#gnav').mouseover(function(){
$('span','#gnav').animate({
'width': $(this).width(),
'left': $(this).position().left}
,'fast');
});

</script>


�A
jQuery.Bottomというプラグインをつかって、ページの最下部までスクロールしたときに、次のhtmlを読み込んで欲しいのですが、html読み込みの仕方が分からず…
（01.htmlを最下部までスクロールしたら、続けて02.htmlを読み込むという感じ）

教えて頂きたいです。

>>173-175
勉強になります
やりたかったことは>>175の方の動作でした。ありがとうございました

＞ページの最下部までスクロールしたときに、次のhtmlを読み込んで

こんなクソ不便でうっとうしいのやめた方がいい

>>178
FacebookやTwitterで使われてる
無限スクロールのことだよ？
不便？？？

>>179
あれ嫌いって人は一定数いる
どこまでスクロールしても終わらないのが嫌とか、
見たいときは自分でクリックするから余計なお世話とかでイライラするとか

そりゃ、それぞれ考え方は違うんだから、
どんなものにも、嫌いな人は一定数いるだろ。

たった一人であっても一定数だからな。
具体的じゃないので、なんの参考にもならん。

>>181
クソ不便って言ってる人にそれがわからんって言ってる人がいたから解説した
俺は有ろうが無かろうがどうでもいい派
まあ嫌な人もいるんならオンオフできればいいなとは思う
とりあえず質問に関してはプラグイン名でググってデモ参考にするのが早いんじゃない？

>>179
>>178ではないが、Autopagerizeが不便な場合というのは「ページ読み込む場所の下にあるコンテンツを見たい場合」
フッタにあるリンクをクリックしたくて延々とスクロールして諦めた記憶がある
せめて実装するならオプション的な扱いにしてOn/Offできるようにしてほしい

こんな荒らしが立てた過疎スレで質問せず、ライブラリ総合スレで質問した方がいいと思う

JavaScript ライブラリ総合質問所 vol.4
http://peace.2ch.net/test/read.cgi/hp/1400834117/

コードの書き方でjQueryがどうも好きになれなくて
触っとかなきゃと思いつつもスルーしてきましたが
最近になってjQueryはオワコンだという声が囁かれています
生理的に受け付けないものでなければビッグウェーブに乗りたいのですが
なんかjQueryに変わるものが出てきたのでしょうか？
lodashやasm.jsとかjsスレで名前はきくもののこれってjQueryの変わりというものではないですよね？

Vitual DOMを使ったDOM操作をしないライブラリが増えてきた（React.js等）
DOM操作をしない代わり、サーバーサイドのようにテンプレートを使ってDOMを生成する。

jQueryやDOM APIがHTMLとJavaScriptを分離した上で、JavaScriptから
HTMLを書き換えていたのとは違い、JavaScriptの中にHTML出力コードが含まれるので、
document.write('<span>あいう</span>')をしているような感覚になるかもしれない。

HTMLで書く部分が減ってJavaScriptから出力することになるから、
ウェブアプリのような画面の大部分を動的に変更するような場合に適している。
ライブラリというよりもJavaScriptフレームワーク。

このVirtual DOMを使ったフレームワークが普及すると考える人達にとっては
jQueryがオワコンというよりも、DOM操作自体がオワコン。


もう一つは、Web Components（Shadow DOM）系。こっちはウェブサイトのような
静的なHTMLが多い場合に適している方法。既存のHTMLの中に一部分だけ高機能な要素を
埋め込むむためのカスタムタグを作れる。これはHTML5で将来標準化される予定の機能
この機能を使った汎用パーツ集がPolymer等

現時点でWeb Componentsに完全対応しているブラウザはないので、Polymerは
Web Componentsのエミュレートも行っている。

こっちはHTML+CSS+JavaScriptをまとめたコンポーネントを作るためのもので、
内部をどう実装するかは自由だが、その仕組み上どんなに複雑なものでも内部は隠蔽される。
複雑な部分が隠蔽されたあので残る部分は（利用者が書かなければいけない部分）はシンプルになる
だからそのコンポーネントを利用する時は、DOM APIもしくはそれ簡潔に記述できるjQueryで十分だろう。

Web ComponentsとVitual DOMを組み合わせても良いが現時点では重いだけだろう。（単体ですら重い）
一部の人がjQueryの次と騒いでいるだけでスマホレベルの低スペックまで考慮するならば、
現時点ではjQueryが一番バランスがとれている。

すばらしい分析