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

jQuery および jQuery UI ライブラリの使い方や、
jQueryプラグインの作り方を質問するスレッドです。

こんなプラグインありませんか？と聞くスレではありません。
jQueryを使って作る側の質問スレです。
探すのは自分で探してください。ろくにサポートもされてなさそうな
野良プラグインの使用はおすすめしません。

前スレ
【jQuery】JavaScript ライブラリ総合質問所 vol.3
http://toro.2ch.net/test/read.cgi/hp/1369444026/

jQuery以外の話題はこちらへ

+ JavaScript の質問用スレッド vol.115 +
http://toro.2ch.net/test/read.cgi/hp/1399072595/

>>1
なぜ jQuery 限定？
勝手に改変された？

jQuery以外知ってる人はここには居ないので、そのライブラリの公式フォーラムやstackoverflowとかで聞いてください

>>3
それなら別にjQueryスレをたててね
勝手に総合スレを乗っ取らないでね

まぁでもjsライブラリ総合とjqueryは実際分けた方が良いかもね。

jQueryスレ立てるとしても、ここだとjQuery以外のライブラリ質問が本スレに誘導されるからよろしくない
それが>>1の狙いなんだろうけどね

ライブラリ禁止ならここを使うといいよ。

純粋JavaScript（ECMAScript）専用質問スレ
http://toro.2ch.net/test/read.cgi/hp/1400502900/

そこはECMAScriptスレだから用途が違うがな

このスレは削除依頼が出てるから放置で

ここがjQueryスレだろ
タイトル的に

どうしてもここを使ってjQuery以外を本スレに誘導したいみたいね
ライブラリは総合スレがあるからここは不要

"JavaScript ライブラリ総合質問所 vol.4"で立ってたスレが移転の影響で落ちてる…？

>>12
落ちてたけど、立て直されてる

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

ドルを単体で使った場合、ドルは何を指し示しているんですか？
こんな感じ↓名前空間？

$.getJson()

スレチだったら、誘導お願いします。

>>14
一つ上のレスぐらい読もう

>>15
それじゃ誘導されまーす

>>14
jQueryオブジェクトそのものだよ。

JavaScriptでは関数もオブジェクトってことを知っていれば、
obj.foo = 1 や obj.bar() と同様に、
関数 function Hoge() {} にプロパティやメソッドを追加できる気づくはず。
つまり Hoge.foo = 1 とか Hoge.bar() とか できる。

jQueryに話を戻すと、 $ = jQuery

$(セレクタ）という関数呼び出しもできるし、
$.getJson() という関数オブジェクトにくっついたメソッド呼び出しも出来る。

validateプラグインの質問ですが
必須チェックはサブミット直前のみ、それのチェック以外はリアルタイム
といったようにバリデーションの種類ごとに
タイミングを変えることは可能でしょうか？

jQuery, Lodash などライブラリ関連の質問は、下記のスレへ

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

jQueryはここでいいでしょw

【CSS】
#wrapper { position: relative; width: 500px; height: 500px; }
#wrapper div { position: absolute; width: 500px height: 500px; display: none; }
#wrapper div:nth-child(1) { background-image: url(img1.jpg); }
#wrapper div:nth-child(2) { background-image: url(img2.jpg); }
・
・
#wrapper div:nth-child(20) { background-image: url(img20.jpg); }

【html】
<div id="wrapper">
<div></div>
<div></div>
・
・
・
</div><!-- #wrapper end -->

【jQuery】
$wrap = $('#wrapper');
$elem = $wrap.find('div');
$elem.show().each(function(i){
//最初全てのdivが重なって表示されている状態から、0.5秒間隔で一つ目のdivから20個目まで順々に消す処理をしています。
$(this).delay((20 - i) * 50).fadeOut(0);
}

上記コードで高速スライドショーみたいなのを実装したのですが
mac firefoxだと期待通りに動くものの、mac chromeだと飛び飛びになってしまいます（他ブラウザでは未検証）
おそらく処理が追いついてないのでしょうが、飛び飛びにならないようにするにはどうしたらいいでしょうか？

すみません、sage進行だったのでしょうか？　気をつけます

>>21
jqueryのバージョンあげてもダメ？

>>23
バージョンを忘れてました
バージョンは1.11.1です。IE8を切れないので2系は無理です。。
http://peace.2ch.net/test/read.cgi/hp/1400834117/l50
こちらが本スレみたいなので、質問はこちらにも書いてます。

JqueryMobileを用いswipeイベントを処理する下記のコードを記載しました。
マウス操作でイベントを確認できたので、windowsタブレットでスワイプを実施すると、
divタグのイベントではなく、画面のイベントとして画面が移動してしまいます。

タブレット使用時、特定の範囲に関して、スワイプのイベントを処理する
場合、どのようなコードを書くべきでしょうか。
$(document).ready(function(){
$('#ph-swipe').bind('swipe', function(){
$(this).text($(this).text()+'!');
});
});

<div style="width:100px; height30px; background-color:blue;"id = "ph-swipe">スワイプイベント</div>

ここは重複スレなんだけどね
>>19

http://techblog.yahoo.co.jp/programming/js_callback/
の
function sleep(ms) {
var d = new $.Deferred;
setTimeout(function(){
d.resolve();
}, ms);
return d.promise();
}

$.when(function(){ console.log(0); }())
.then(function(){ return sleep(1000); })
.then(function(){ console.log(1); })
.then(function(){ return sleep(1000); })
.then(function(){ console.log(2); });

を1.7.2でやるにはどう修正すればいい？

jqueryのdatepickerでテキストボックスの横にボタンを
置いてそれがクリックされるとカレンダーが表示されるように
しているのですが、このボタンの大きさは変更できないものでしょうか？

すみません、jQuery初めてです。初歩的なことなのかもしれませんが質問させてください。
下記のようなコードで、divの表示、非表示を切り替えようとしているのですが、ブラウザのをリロードしたときには
JQueryのコードがうまく動かないのに、リンクを分でページ遷移して同じページを表示するとうまく実行されます。
つかっているブラウザはchromeなのですが、何がいけないかわかりますでしょうか？
(ブラウザの読み込み方の違いが影響している？)

$('#hoge').toggle();←scriptタグ内でこのまま書いています。

--
<div id='hoge' style='display: none;'>XXX</div>
--

自己解決しました。DOMツリー構築前後での実行タイミングの問題だったようです。失礼しました。

ここは重複スレなので、以降は>>19に書き込んでね

jQuery UIで質問
Dialogが表示領域外に出ていかないのを出ていくようにするには
どうすればいいでしょうか？

$('#hoge').dialog({
position: {
collision: 'none'
}
});
でいけそうな気がしたけど駄目だった…

連投スマソ…色々ググったところ↓で出来た
$('#hoge').dialog({
// position は関係無かった
}).dialog('widget').draggable('option', 'containment', 'none');

ｊQuery初心者で勉強中の者です。

ttp://calie.jp/beashow/index.htmlのサイトのような
画像を読み込んだら自動でエフェクトが動く動きを実現するには

jquery.inview.jsとjquery.easing.1.3.js

が必要だということはわかったのですが、どのように記述すれば実現できるのかがわかりません。
画像をよみこんでフェードインさせる方法を詳しい方ご教授いただけないでしょうか

ここは重複スレなので、以降は>>19に書き込んでね

>>35
こっちに引っ越しね。

+ JavaScript の質問用スレッド vol.117 +
http://peace.2ch.net/test/read.cgi/hp/1403330196/

jQuery, Lodash などライブラリ関連の質問は、下記のスレへ

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

load()を使って外からhtmlを読み込んだのですが、読み込んだあとのhtmlを見てみたらば
::beforeと::afterってのが入ってました。
この、::beforeと::afterって何ですか？

jQuery, Lodash などライブラリ関連の質問は、下記のスレへ

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

バリデーションのライブラリ探してるんだけど、今は何が良いの？
exValidationっての見たけど開発が止まっているようだ
最後の更新が3年前
validation-Engineってのは最終は2ヶ月前らしいけど
日本語対応してるのであればやっぱこの2つのうちどっちかなのかな？

ごめん、良く読まずに質問したようだ
javascriptスレに質問しないといけないのかな？

>>41-42
マルチポスト化してるので移動したなら移動したといって下さい。
http://peace.2ch.net/test/read.cgi/hp/1400834117/433n-
このスレは放置推奨

jqueryでイベントが設定されているか調べるにはどうしたらいいですか？

$('#id').on('click', fn);
$('#id').hasEventListener('click') 　// ← 結果:"true" みたいな事がしたい

http://blog.jquery.com/2011/11/08/building-a-slimmer-jquery/

> .data(“events”): jQuery stores its event-related data in a data object
> named (wait for it) events on each element. This is an
> internal data structure so in 1.8 this will be removed from the user data
> name space so it won’t conflict with items of the same name.
> jQuery’s event data can still be accessed via jQuery._data(element, "events")
> but be aware that this is an internal data structure that is undocumented and should not be modified.

_dataで取得できるけど、内部データだって書いてあるね。

個人的には、イベントが設定されているかを調べるべきではないし
だから不要だと思っているが。

何をしたいのかわからないが、イベントが設定されているか
調べるよりももっといい方法があるはず。

!!$._data( elem, [] ).events["click"]
エレメント単位でしか見れない
ただ >>45,46 の言う通り他の方法があるのでは？

ありがとうございます
一先ず>>47の方法で対応してみます。


みなさんは、ユーザーのアクションによってイベントを設定する場合どうされてるんですか？
予めフラグ変数を用意してそれで判別する事もできますが、
イベントリスナーが登録されているかを調べるのが一番スマートだと思うんですよね。
ユーザーのアクションの度にon()するとイベントが複数回設定されますし、
毎回off()してからon()するのも何か違う気がするんですよね。

他の、例えばGoogleのClosure LibraryにはhasListener()がちゃんとありますし、SenchaのExtJsにもhasListener()があります。
イベントが設定されているか調べられるんですよね。
jqueryに無いってちょっとおかしくないですか？

>>48
まず前提として、ユーザーのアクションによって、イベントが設定された状態っていうのは、
イベント対象のオブジェクト（要素）がとあるアクション（メソッド呼び出し）によって状態変化したものと考える。

イメージとしては、要素をクラスでラップして、拡張した感じをイメージすればいい。
例えばドラック可能なオブジェクトであれば

class DraggableObject {
　var someProperty:
　someMethod: function() {}

　<div>いろいろ</div>
}

DraggableObjectのインスタンスに対して、状態を変えるメソッドを実行すれば、
その状態を記録すると同時に、内部のHTMLにaddClassしたりイベントを追加したりする。

だからDraggableObjectは自分がどういう状態か知っているし、登録したイベントハンドラも知っている。
フラグといえばフラグだが、フラグ変数みたいにオブジェクトと分離されたものではなく
イベント対象のオブジェクト（要素）を拡張した高機能なオブジェクトとして一つにカプセル化することが出来る。

ではこの、class DraggableObjectをどうやって実現するかだが、その方法は色いろあるだろうが、
jQuery風にやるのであれば、jQueryUIを参考にすれば良い。

例えば、 $( ".draggable" ).draggable(); とやることで、class="draggable" なただの要素が
すべてdraggableな拡張されたオブジェクトへと変化する。$( ".draggable" ).draggable( "enable" ); と
やればドラッグスタートだ。内部ではイベントをつけたりしているだろう。

他にもjQuery的な臭いをなくしたいのであれば、var myObject = new MyObject('#id") とやって
myObject.enable() みたいなやり方もある。（内部でjQueryを使っていたとしても）外部からは
jQueryの臭いが消えるが、jQuery的なセレクタにマッチした複数の要素対して一括で処理を行うとかはしづらくなるが。

ttp://www.tailtension.com/jquery/45/
ttp://www.tailtension.com/demo/jquery_pagination_plugin/jquery_pagination_plugin.html

すみません
このページネーションサンプルに、
各ページに画像表示させて、
ページ切り替えた時にだけ画像読み込むようにする遅延ロード組み込むのはどうやるのでしょうか。

jQuery 2.1.2リリース！
https://github.com/jquery/jquery/releases

プログラム板で、このスレへ誘導した者だが、
このスレは荒らしが立てたスレらしいので、

jQuery, Lodash などライブラリ関連の質問は、
下記のスレへ書き込んでくれ

この板(Web制作管理板)の
JavaScript ライブラリ総合質問所 vol.4
ttp://peace.2ch.net/test/read.cgi/hp/1400834117/l50

でも実際jqueryで検索するとこっちが出るんだよな
わざわざJavaScriptで検索する人はいまい

既に何度も誘導されてるし、今後も誘導すればいいだけ

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

jQueryの質問が多ければ別に専用スレがあっても良い気がするが

スレタイと>>1の内容がアカンのだよな

>>55
それはライブラリ総合質問所がjQueryで溢れて他ライブラリの質問が埋もれてから考える問題
JavaScriptスレの方は「周囲がしっかり誘導しろよ」とは思うけど

まあ総合質問所の方は質問で改めて書く必要ないほどjQueryの使用が
当たり前みたいになってるからな

DOM APIを直接使うものなら、何かの制限がない限り
jQueryでいいわけだし。

DOMを直接使わないのであれば、AngularJSの話でとか
説明するだろうし

>>56
いちいち誘導せないかんのがおかしい
スレタイは一目でわかるほうがいい

今はｊｓあまりかじらずjQから入る人も多いだろうから
「JavaScript ライブラリ」なんてワード頭に浮かばないだろう
スレタイ一覧で目に留まっても普通はスルー

違和感ある言い方するなぁ。
jQuery使ってもJavaScriptはJavaScriptだろ。
JavaScriptの部分は何も変わってないよ。
CoffeeScriptじゃあるまいし。

jQuery使っているからといって、
それが言語名だと勘違いしている人はないだろうし
だからこそ、JavaScriptスレでjQueryの話題が出てるんだぞ

>>59
リテラシーの低い人に合わせる考え方がおかしい
そういう勘違いする人はライブラリという単語を教えて徐々に浸透させるのが常道だろう

そもそも、ここで質問する人よりライブラリ総合質問所の方が圧倒的に多い
誘導しなきゃならないケースがそれ程多くない

jqgridでカラム部分に当たるcolnamesを変更する方法ってありますか？
colmodelは変数を持ってくれば変更できたのですが、colnamesはエラーになってしまいます

変更というのは初期表示画面からの変更です

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

>>60
だから？としか言いようがない

>>65
うん。だからJavaScriptスレでjQueryの
話をしても問題ないということ。

>>66
面白い冗談だね

ライブラリの質問はライブラリ総合スレへどうぞ

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

>>66
そんなことはどうでもいい
ここでjQueryの話をしても問題ないということか

JSのほうが見てる人は多いが
jQueryの質問はどちらでもいいということ？
ならわざわざ誘導する必要もないね

どこで何を書き込んでもいいよ。
俺もどこで何でも書き込むから。
すれ違いでも適切だと思ったことを書く。

>>70
重複スレの誘導、スレのローカルルールを守る
当たり前のこともいわないと分からないのかね

>>72
言ってもわからないです。

>>73
頭悪いね

>>72
>>1

本家(？)はタイトルのつけ方が悪いので重複ではない
ではＯＫなんだね
当たり前だよね

>>75
取り扱う内容が重複するから重複スレだし、ここは重複スレ
当たり前のことを一々説明しなければならない程に頭が悪いんだな

ライブラリ総合質問所の前スレ(Vol.3)のタイトルが既に危険性はらんでいたんだな

タイトルにjQueryがついていたが故にjQuery専用スレと勘違いして、JavaScriptスレでライブラリの質問をしていた人がいた事を踏まえれば、「JavaScript ライブラリ総合質問所 vol.4」のタイトルは妥当だろうな

>>78
タイトルにjQueryのワードも入れときゃいいんだよ
でないといつまでたってもこっちに書く人は出てくる
その度にいちいち誘導とか頭悪いだろ

>>79
JavaScriptスレからライブラリスレへの誘導こそ頭悪いだろ
第一、ライブラリスレのタイトル変更案ならライブラリスレでやれよ
こんなところで主張するのは馬鹿のすることだぞ

>>80
>JavaScriptスレからライブラリスレへの誘導
誰かそんなアホなことしてるやついたか？ｗ
あっちは機能してるから余計なことしなくていいんだよ

>>81
>>78を読み返せ

JavaScriptスレはライブラリの質問禁止だな
あそこでライブラリを話をしても荒らしがライブラリ啓蒙するスレにしかならん

lodash 3.0 リリース間近！

https://github.com/lodash/lodash
3.0-preから-preが外れました！


スレが多すぎてどこに書けばいいかわからないので
関連スレすべてにマルチポストしています。m(__)m

fquery　の　fullCalendar で、予定表を作成しているのですが、

events: [
{ id:1, title: 'イベント１-１', start: '2015-01-23T16:00:00', end: '2015-01-23T17:00:00' },
{ id:1, title: 'イベント１-１', start: '2015-01-24T16:00:00', end: '2015-01-24T17:00:00' },
{ id:2, title: 'イベント２-１', start: '2015-01-23T16:00:00', end: '2015-01-23T17:00:00' },
{ id:2, title: 'イベント２-１', start: '2015-01-24T16:00:00', end: '2015-01-24T17:00:00' },
]

のようなイベントを作成して、
id　別に　表示のON OFF を切り替えることは出来ますか？

例：id:1 のイベントを表示し、id:2のイベントは隠す

ライブラリの質問はライブラリ総合スレへどうぞ

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

JavaScriptスレからライブラリスレへの誘導

ｗｗｗ

>>82
JavaScriptとjQuery両方入れたらだめなん？

>>88
付いてたよ

過去形かよ

ではjQueryはこちらで了解しました

>>91
頭悪いね

＞JavaScriptスレからライブラリスレへの誘導

頭悪いね

>>93
馬鹿はおまえ

>>94
馬鹿なのでjQueryはこちらにします

jQuery 特化スレッドがあっても良いね。
素の javascript はお手上げだったけど、
jQuery の助けを利用したら動いたよ！って人も多いだろうし。

ライブラリスレで十分だろ
重複スレ立てるな

あっちだとjQの殻はがして説明するのいるからな
もちろんそれの方がいい場合もあるし、最低限なこと（演算子など）もあるが
世の中そこまで求めてないのもいることは確か

よって別にこっちもあってもいいよ

俺はどのスレでも気にしないよ。
どのスレでも適切な回答をするし。

JavaScript ライブラリのほうが回答者も多いのでそちらで質問してもいいし。
jQueryだけにとどまらないのなら誘導してもいいし。

jQueryでヒットしてこちらに質問してきたらそれはそれでいいし。

両方あってもいいのでは。
重複以前にスレタイのつけ方に問題あるのだから。

ライブラリスレのタイトルに問題はないな

そう思うなら勝手にそう思ってればいい
検索でヒットするか否かは結果の通り

jQueryスレ立てたい奴はちゃんとライブラリスレでお伺いをたてろよ勝手にスレを立てて勝手に誘導する奴はコノスレヲ立てた荒らしと同じだからな

ここスレ立てしてもなかなか落ちない板なのに
あまり考えないで立てる奴多いよな

>>103
何様w

>>103
向こうからこっちに誘導するヤツなんているか？
逆はいるが

何かを始める前に相談するという当たり前のマナーを守れない奴もいるんだな
好き勝手に何でもやっていいと思ってる

jQueryの質問はjQueryのスレにするのが当たり前

jQueryの質問はライブラリスレにするのが同然

jQueryの質問はjQueryスレにするのが同然なのですね
わかりました

同然ｗｗ

揚げ足取りしか出来ない馬鹿が何か言ってるぞ

jQueryって今主流？googletrendsで確認したら2012年をピークに下がっているんだけど...
ウェブデザインの勉強を独学でしていてj-queryは必須と思っていたのですが現場はどうなんでしょうか？

検索ワード間違えていた...

http://www.google.co.jp/trends/explore#q=jquery

まだ需要ありそうで良かった

ウェブデザインでjQuery？

言っとくけど、jQueryは使われているが
ほとんどのjQueryプラグインはゴミだぞ。
あれは勉強する価値がない

ゴミではないだろ
ゴミは>>115

本スレバカばかり
回答できないでやんの

$('hoge')を何回か使用する場合に
$hoge = $('hoge')
のように変数に入れそれを使用しますが
$(this)も同じようにやったほうがいいですか？

>>118
ほとんど意味が無いよ。

$hogeに入れるのは、セレクタを解釈する時間が惜しいから。
セレクタの解釈をJavaScriptで実装しているから遅い。
そしてセレクタに一致したものを検索するのに時間が掛かるから。

だけど、セレクタがシンプルでgetElementByIdやgetElementByNameなどが
使えたり、最近のブラウザならquerySelectorAll場合には、セレクタに一致するものを
検索する時間は少なくなる。

さらにそれより時間がかからないのがthisや任意のDOM要素の場合。
この場合は、セレクタを解釈したり要素を検索する必要がなくて
jQueryオブジェクトでラップするだけなので著しく速くなる。

もちろんjQueryオブジェクトでラップする分時間はかかるが
ループの中で何万回と参照してやっと違いが出るくらいだと思うよ。

jQueryはオワコン

$thi = $(this)

変数に入れるのは、変数が1つ増えるだけで、
特に損はないでしょ？

それとも、変数の管理がしにくくなる？

変数っていうのは名前をつけるっていうことなんだけど、
何のために名前をつけるのか？ってことだよ。

$thisも$(this)も、ほとんど同じ単語、同じ意味なわけで
わざわざ名前をつける理由がない。
後からみた時になんでそんな名前をつけたのかわからないしね。

要するに意味が無いことはやらないほうがいいよ。
必要のないものは書かない。これがコードの鉄則

>>118
意味はあるが、パフォーマンスを気にするなら this のまま利用して、 DOM API を使うことも検討した方がいい

変数の名前には誰も触れてないのにいきなり持論を繰り出すのは例の人か
$this がNGなら別のユニークな名前を付ければいいだけ
そして、誰も質問してない内容を主張するのは時間の無駄

> 変数の名前には誰も触れてないのに

え？

変数の名前に触れているから、書いたんだけど。

>>121が見えない？

↓ これ

> $thi = $(this)

>>122
>後からみた時になんでそんな名前をつけたのかわからないしね。

え？たいていの人わかるのでは？
毎回$(this)使うことが意味が無いこと、必要のないことではないの？

>>125は意味がわからない

>>124
> $this がNGなら別のユニークな名前を付ければいいだけ
違う名前をつけるのなら意味はあるよ。

これはリファクタリング関連の用語で「説明用変数」とか言われているやつで
http://www.woodensoldier.info/computer/refactoring/IntroduceExplaningVariable.htm

例えば関数が長すぎたり、違う意味のthisが近くにたくさんあったりして
コードが読みづらい時に、コードを説明するためにつける変数

thisが分かりにくいから説明としてつけるわけで、$thisとかいう名前だと
何も説明になってないから意味が無いわけ。
（なお、$(this)を変数に入れてもパフォーマンスの点ではほぼ意味が無いことは既に言ったとおり）

>>126
> 毎回$(this)使うことが意味が無いこと、必要のないことではないの？

一旦変数に入れるとしたら、
var $x = $(this)
最低限これだけのコードが必要でしょ？

それだけのコードを書いた結果、節約できるのは
() のたった２文字。

普通はメソッドチェーン使ったり、引数を効率良く書くので
「毎回$(this)使うこと」自体があまりないことなんだよ。

ほらこれだけやっても$(this)を使うのはたった１回。

var css = {width: '100px', height: '100px'};
var events = {
　change: function() {},
　keydown: function() {},
}
$(this).prop('disable', false).css(css).on(events);

>>128
そりゃ処理内容によるだろ

$(this)は、そんなにアクセスが速いの？

色々と処理がありそうだから、
いったん変数に入れるのでは？

>>127
$this という名前を出したのはおまえが初めてだろ
独り相撲して自己否定すんなよ

>>130
普通はベンチマークするべきところだけど、ソースコード読めばわかるよ。
http://code.jquery.com/jquery-2.1.3.js

$ = jQuery だから、まずこれが実行される

jQuery = function( selector, context ) {
　　return new jQuery.fn.init( selector, context );
}

$(this)ということは、selector = DOMElement。
そしてfn.initの中身のうちselect = DOMElementの場合に通るコード
やっている所は★をつけた所だけ。

init = jQuery.fn.init = function( selector, context ) {
　　// HANDLE: $(""), $(null), $(undefined), $(false)
　　if ( !selector ) {
　　　　return this; //通らない
　　}

　　// Handle HTML strings
　　if ( typeof selector === "string" ) {
　　　　// 通らない

　　// HANDLE: $(DOMElement)
　　} else if ( selector.nodeType ) {
　　　　// ★ やってるのはこれだけ
　　　　this.context = this[0] = selector;
　　　　this.length = 1;
　　　　return this;

　　// HANDLE: $(function)
　　// Shortcut for document ready
　　} else if ( jQuery.isFunction( selector ) ) {

　　// 以下、通らない

>>130

> 色々と処理がありそうだから、

君が言った処理というのは、
this = DOMElementの場合、たったこれだけの
コードで終わりなんだよ。

　　　　this.context = this[0] = selector;
　　　　this.length = 1;
　　　　return this;

色々処理があるのは、DOMElement以外の値
つまりselectorなどを渡した場合の話であって

$(this) や $(DOMElement)の場合は
それらに比べればはるかに高速だってわかるだろう？

>>134
セレクタ処理と比較して変換処理が安いのは事実だが、無駄かどうか判断するのは質問者であっておまえじゃない
質問にいたるまでの背景、社内規定、質問者の好み...諸々が何もわかっていないのに安易に「無駄」と断定するなよ
0.1秒の差が顧客を逃がすと主張するGoogleなら些細な見逃さず、塵も積もればを体言するだろうし、ベンチマークテストしてニヤニヤする奴がいるかもしれんだろ
価値観の多様化を認める努力をしろ

>>127
$(this)に違う名前をつける意味がわからない
同じような（またはそれとわかる）名前だから意味あるのでは？

>>135
質問者ですが、無駄だと思いました。

>>134がいっていることは正しいですよ。

>>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が一番バランスがとれている。

すばらしい分析