+ JavaScript & jQuery 質問用スレッド vol.7 + [無断転載禁止]©2ch.net
JavaScriptで一番有名なDOM用関数型風ライブラリであるjQueryのスレです。
jQueryを使うとJavaScript単体では面倒な処理でもほんの数行で実現可能になります。
一部でもうjQueryは要らない等と言ってますが、あれはjQueryよりも導入が大変な
フレームワークを導入したらいらなくなるって話であって、従来通りHTMLにちょっと
動きをつけたい程度ならjQueryが最適です。
このスレはjQueryそのものの使い方やjQuery UIの使い方やjQueryプラグインの作り方を質問するスレです。
JavaScriptだと面倒だけどjQueryを使えばもっと簡単に書けませんか？というのもOKです。
ですが、jQueryを使って作る側のスレであって、こんなjQueryプラグインありませんか？と聞くスレではありません。
また野良jQueryプラグインの質問スレでもありません。そういうのは自分で探してください。
ろくにサポートもされてなさそうな野良jQueryプラグインの使用はおすすめしません。
前スレ
+ JavaScript & jQuery 質問用スレッド vol.6 + [無断転載禁止]©2ch.net
http://echo.2ch.net/test/read.cgi/hp/1465566635/ Q. jQueryはどのバージョンを使えばいいのですか？
A. IE9以上であれば、jQuery 3.0を使用してください。
IE8以下にも対応するならば、jQuery 1.12を使用してください。
補足
jQuery 1.9 までは一系統しかなく、古いブラウザも含めて全て対応していました。
その後、古いブラウザを切り捨てるためにバージョンを分岐させました。
古いブラウザにも対応した1系（1.10、1.11、12）と
古いブラウザを切り捨てた2系（2.0, 2.1, 2.2）です。
1系と2系は対応ブラウザの違いだけで機能は全く一緒です。
機能が同じなのにメジャーバージョンが違っているのが分かりにくい
ということでバージョン番号の付け方を変えることになり、
新たに古いブラウザを切り捨てたjQuery 3.0、そして古いブラウザにも対応した
jQuery Compat 3.0がリリースされる予定でした。
しかしマイクロソフトが古いIEのサポートポリシーを変更し
サポート中であるOSで動く、最新のIEしかサポートしなくなったために、
2016年1月でVista上のIE8のサポートが終了しました。
そのため予定されていたjQuery Compat 3.0がなくなり、
jQueryは3.0に一本化されました。 jQuery 3.0正式版がついにリリース。通常版のほかに、Ajax機能を省略したスリムビルド版も提供
http://www.publickey1.jp/blog/16/jquery_30ajax.html
2006年1月にjQueryが初めて世の中に登場してから10周年となる今年。jQuery 3.0の正式版が登場しました。
jQuery 3.0 Final Released! | Official jQuery Blog
これまでjQueryは、、モダンブラウザのみをサポートすることで軽量化と安定化をはかった
「jQuery 2.x」系と、Internet Explorer 8以前を含む古いバージョンのブラウザまで
サポートする互換性重視の「jQuery 1.x」系の2系統が存在しました。
また、フル機能のjQuery 3.0のほかに、Ajaxの機能を省略して軽量化したスリムビルド版のjQuery 3.0の提供が行われます。
Along with the regular version of jQuery that includes the ajax and effects modules, we’re releasing a “slim” version that excludes these modules.
通常バージョンとしてAjaxやエフェクトモジュールなどを含んだjQueryと同時に、これらを外した“スリム”バージョンも提供する。
最近のWebアプリケーションではjQueryのAjaxを使うことは少なくなったと思われますので、スリム版のjQueryで十分だという開発者も多いでしょう。
圧縮後のサイズは通常版が30kbなのに対し、スリム版は23.6kb。 それども23.6KBも必要なのな
もっと削れるんじゃない？ 現行スレ
+ JavaScript & jQuery 質問用スレッド vol.6 + [無断転載禁止]©2ch.net
http://echo.2ch.net/test/read.cgi/hp/1465566635/ 性能を決める関数で for-in を使うのはやめよう
for-in にも使い道はあるものの, for を使うべき場面でよく誤って使われている. for-in で列挙をする前に,
スクリプトエンジンは列挙可能なプロパティのリストを作って重複を弾かなければいけない.
スクリプト側が列挙するプロパティを知っていることはよくある. こうしたプロパティをなめるならふつうの for 文が使える.
配列や, 配列風のプロパティを持つオブジェクト (DOM の NodeList? など) のように, 連番の数字なら特にそうだ.
for-in 誤用の例を以下に示す:
var oSum = 0;
for( var i in oArray ) {
oSum += oArray[i];
}
for を使う方が効率的になる:
var oSum = 0;
var oLength = oArray.length;
for( var i = 0; i < oLength; i++ ) {
oSum += oArray[i];
} var sum = 0;
var array = [1, 3, 4, 7];
for (let value of array) {
sum += value;
}
ついでに言うならば、sumはこう書いたほうが良い。
const sum = array.reduce((a, b) => a + b);
変数への再代入がない所に注目な clientのJSからサーバーにデータをajaxでPOSTして
サーバーでそのデータを加工して加工結果を新しいページに表示したいのです。
ajaxでPOSTしてデータを加工するところまでは出来たのですが、ajaxなので
そのデータはクライアントのsucessに戻りますよね
このあとどうすればいいのか分かりません。
あるいはもっと良い方法がありますか？ >>11
そのsuccessで戻ってきたJSONなりから
画面を作ればいいだけでは？
面倒ならテンプレートエンジンでも調べてみると良い。 >>13
>画面を作ればいいだけでは？
戻って来たJSONは数百キロバイト以上のHTMLデータで、
そのデータを使って新しいページを作る方法が分かりません。
urlのパラメータではそんな大きなデータを渡せないですよね？ >>15
HTMLで受け取ってるならそれをDOMの任意の場所にappendするだけで済みそうだが
なんでそれをもう一度サーバに渡そうとしてるの？
（それにしたって数百キロ程度のデータを渡せないなんてことないが）
jsやjQueryによるDOM操作についてググる必要がありそう WEB+DB vol.94 では、Electronで開発しているけど、使っているのは、
Electron(Node.js + Chromium)
UIのパーツを作る、React
CSSフレームワークには、Photon >>15
今表示しているページではなくて、
別のページに移動してそのデータを表示したいのです。 >>17
その別ページには他者もアクセスできるようにしたいのか？
それとも、当の利用者専用なのか？
後者なら、サーバ側で加工する必要はなさそうだが（
データを blob URL化してナビゲートしたり、ブラウザは限られるが SharedWorker を使う方法も考えられる
複数セッションにわたって残したければ localStorage に保存するだけで済むかもしれない） >>18
説明不足でした。
AJAXで戻って来たデータを表示する時に、現在のページはそのまま
残しておいて、新規に別ページを開いてそこに表示したいのです。
専用ページとかではなくて誰でもアクセスできるページです。
教えて頂いた方法を調べてみます。 HTML/JavaScriptのiframeタグについてご教授下さい。
■実施したい事
iframeでhtmlを取得したいが、
取得したhtmlの中身(cssや画像)は取得させたくない。 >>20
■詳細イメージ
①
<iframe src="ｈｔｔｐ://xxxx/sample.html"></iframe>
↓
②
WEBブラウザがｈｔｔｐ://xxxx/sample.htmlへGETリクエストを投げて、
レスポンスが返ってくる
↓
③
WEBブラウザが返ってきたレスポンスをDOMツリーにロードする
↓
④
WEBブラウザがｈｔｔｐ://xxxx/sample.htmlに記載されているcssや画像を取得する
①②は実施させて、
③の前後で処理を中断させて、
④を実施させたくない。 >>20
>>21
■質問事項
上記を実現させるためにはどのようなHTML/JavaScriptの実装が必要でしょうか？
ご教授下さい。
■思うところ
③のタイミングでイベントを発生させて、
④を無効にするような処理が可能かな？と調べてみましたら、
「DOMContentLoaded」というDOM読み込み完了後に呼ばれるイベントがあったのですが、
うまく使えますでしょうか。
また、<xmp>タグ等を動的に発行して、
取得したhtmlを無効に出来るかな？と思っています、
うまく使えますでしょうか。
また、ブラウザで発生するHTTPリクエストを全てキャッチして、
ｈｔｔｐ://xxxx/sample.htmlに記載されているcssや画像のHTTPリクエストを遮断できないかな？と思っています、いかがでしょうか。
その他、手段は問いません。
実現できる方法をヒントだけでも良いのでご教授下さい。 <div>あああ<input type="text" />いいい</br>ううう</div>
こういう場合、
jQueryで
var input = $('div > input[type="text"]');
を取得したとして、その後ろにある文字
いいい
を取得する方法はありますか？ >>20
普通にAjaxで中身だけを取得すればいいだけ >>23
はい
var input = $('div > input[type="text"]');
var nextText = input.get(0).nextSibling.textContent; // いいい
nextSiblingを取得すると次にあるノード（要素/テキスト/コメント などなんでも）が取得できるから、これを利用するといい。
jQueryはテキストノードの扱いにはあまり向いていないので、標準のDOMを使わざるを得ない。 >>20-22
2のGETで、取得しないファイルの拡張子を、指定できないの？
②など、丸囲み文字は、Windowsだけの環境依存文字だから、使うな
>>23-28
「いいい</br>ううう」の部分だろ。
素直に、<div>の内容を取得すれば？
「いいい」1行だけと言うのは、おかしいだろ >>29
2のGETってブラウザが自動的に行ってるものなんですが、
ブラックリストの拡張子って指定できるんですか？
具体的にどうやってやるのでしょうか？ マルチポストは禁止！
他のスレに、返事をしておいた $('div[id="XXXXX"]')
$('div[id=XXXXX]')
ダブルクオーテーションで囲っても囲わなくても動くのですが、
どちらでも良いのでしょうか？ >>33
囲まなくて動くからどっちでもいいよ。
!とか$みたいな半角の記号を含むidだと囲む必要があるから、その時だけ囲めばok。
補足だけど、idで選択する時は普通は
$('div#XXXXX')
あるいは
$('#XXXXX')
と書くのが一般的。 俺は特定のタグすべてを対象としないのであれば
ほとんどタグ名を書かないかな。 【質問】JSのDOMContentLoadedが発火しません。
■事象
iframeを動的に作成(createElement)して、
addEventListenerに「DOMContentLoaded」を追加しているが、
iframeのsrc先のDOM読み込み完了時にイベントが発生しません。 ■コーディング
var parent_obj = document.getElementById("top");
var obj = document.createElement('iframe');
if(obj.addEventListener){
obj.addEventListener("DOMContentLoaded",xxx);//★これが発火しない
//obj.addEventListener("load",xxx);//☆遅い
}else if(obj.attachEvent){
obj.attachEvent("onload",xxx);
}else{
obj.onload = xxx;
}
parent_obj.appendChild(obj);
obj.src = "URL";
function xxx(e){
alert("発火");★これが発火しない
} >>36
>>37
■やりたい事
addEventListener("load",xxx)だと画像読み込み後にイベントが発生するので、遅いです。
iframeのソースが返ってきた直後にイベントを呼びたいのです。
■質問
なぜDOMContentLoadedが発火しないのでしょうか。
コーディングが悪いのでしょうか？
それともcreateElement('iframe')はDOMContentLoadedのイベントに対応していないのでしょうか？
その場合、上記【やりたい事】の代案はございますでしょうか？ >>38
HTMLIFrameElementにはcontentWindowおよびcontentDocumentというプロパティが存在しますので、そちらのイベントを拾えばよいのではないでしょうか。
obj.contentDocument.addEventListener("DOMContentLoaded",xxx);
引用元
http://ja.stackoverflow.com/questions/31078/ if(obj.addEventListener){
}else if(obj.attachEvent){
いまどきこんなコード書くなよ。
古いブラウザ切り捨てでいいならaddEventListener使えばいいし、
IE8とかにも対応させるならjQueryを使うべきだ。
コードを自分で書いたならばその行をテストしなきゃいけないんだぜ？ > HTMLIFrameElementにはcontentWindowおよびcontentDocumentというプロパティが存在しますので
マジレスするとコレでは無理。
なぜならiframeの中のwindow（さらにその中のdocument）に触れるとは限らないから
触れると確定するのはiframeのsrcが設定された後。同じドメインであるなど
参照する権限があれば触れる。だから先にsrcを設定する必要がある。
だがsrcを設定した時点で読み込みが始まる。
つまり読み込みが始まった後にDOMContentLoadedをaddEventListenerしても
もう読み込まれてしまっているかもしれない。この場合は発火しない。
最初の一回はネットワークから取ってくるので処理が遅く、
addEventListenerが間に合って発火するかもしれないが
二回目以降はキャッシュがつかわれるため発火しない（ことがある）
この解決策を俺は知っているが、レスは返ってこなさそうだし
ここまでだなｗ マルチポスト先を見てもどうやらこの問題に触れているのはなさそうだなｗ
こういうのは経験が物を言う。やったことがある俺じゃないと気づきにくい 俺は質問者ではないんだけど、同ドメインだとしても、src設定した直後にcontentWindowって触れないよな？ そうだったかな？こまないところは忘れた。
作り方によると思う。古いブラウザ対応もあって
about:blankも併用していたからな。 あ、ごめん確かに作り方によるわ
質問のコードをそのまま使うとアクセスできないだけだった >>39
クロスオリジン、クロスドメインがやりたい事の前提です。
その場合、DOM系のイベントが使えないのですね。
それでは上記【やりたい事】の代案はございますでしょうか？ >>41
丁寧なご回答ありがとうございます。
クロスオリジン、クロスドメインがやりたい事の前提です。
その場合、DOM系のイベントが使えないみたいののです。
>>41 さんのご指摘のタイミングの問題もあります。
それでは上記【やりたい事】の代案はございますでしょうか？
一応「2秒待って」という苦肉の策はありましたが、
別の綺麗な順序保障の方法はないでしょうか？ >>43-45
>>41
丁寧なご回答ありがとうございます。
クロスオリジン、クロスドメインがやりたい事の前提です。
その場合、DOM系のイベントが使えないみたいののです。
それでは上記【やりたい事】の代案はございますでしょうか？
一応「2秒待って」という苦肉の策はありましたが、
別の綺麗な順序保障の方法はないでしょうか？ 1. image = new Image();
2. image.src = 何々
3. image.onload = ハンドラ
便乗して質問するが、
こう書いておいたら、画像を読み込んだ後に、ハンドラが確実に呼ばれるのか？
それとも、もし画像を読み込むのが速ければ、もうハンドラは呼ばれないのか？
確か、画像の読み込みは、非同期だよね。
読み込みしながら同時に、3行目も実行されるよね？ >>52
onloadよりも先に画像が読み込まれれば、onloadは発生しない。
ただこの場合は単に2と3を逆にすればいい。
iframeが特殊なだけ >>52
>読み込みしながら同時に、3行目も実行されるよね？
1, 2, 3 を同期的に実行すればハンドラは必ず呼ばれるだろう
キャッシュされていようが image 読み込みは非同期になるので > 1, 2, 3 を同期的に実行すれば
その方法を書きなさい。出来ないこと言っても意味がない >書きなさい
って、まんまそのまま番号外しただけのコードなんだけど 呼ばれるよ。他のあらゆるAPIでもね。
変更と同じイベントループで登録したイベントハンドラは
順番がどうであれ必ず呼ばれる実装になってる。 >>57-58
本来、その回のイベントループ(フレーム)では、ハンドラが登録されるだけで、
画像は次のフレームから読み込まれるから、>52 の順番でもOKなのだな
結局、IE8以前のバグだったのか。
「onreadystatechange にハンドラを設定して、その中で readyState を見る」
とか、何かの本で読んだことがある >>61
仕様のほうが後で作られたのであれば
それはバグじゃない HTML4.01の仕様には当然無いとして、初めて仕様化されたのはこの時点かな。
W3C Working Draft 29 March 2012
https://web.archive.org/web/20120414181653/http://www.w3.org/TR/html5/introduction.html
IE9のリリースが2011年4月26日だからこれをバグと呼ぶのは無理がある。 とんでもない
Safariは現在唯一 ECMAScript6に100%対応した最先端ブラウザやぞ ECMAScript6に100%対応しただけじゃ
API使えることにはならないし 仕様をちゃんと読んでると言っても、最新の仕様と
最新のブラウザだけしか見てないのであれば
仕事としてやるには全然足りないからね。
プロとしては未熟。 >>68
100%は対応していない
例えばtail-callの挙動が一部おかしい
そもそもES5のテストも未だ全クリできた実装はない まあSafariはテストはしなくていいと思う。
動けばラッキー、動かなければ残念でしたで終わり。 ここで話題になってるのは
mac版safariかと js
xhr.open('POST', url);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(params);
jquery
$.post(url, params);
rails でパラメーター取ろうとしたら js の方は取れないんですけど、2つに何か違いはあります？間違ってますか？ xhr.send()にプレーンオブジェクトは指定できない
StringやFormDataにする必要がある >>76
ありがとうございます。'key=value' のようにしてます jQueryはそういった面倒なことをやってくれてるから使いやすい。
他にもHTTPレスポンスが4xx系や5xx系だと例外にしてくれたりね。 >>78
そうですね。 js で取れなかったので jquery 使ったんですけど、結局「なんでなんだろ？」と思いまして質問した次第です。 40Xで例外は間違った設計だと結論が出てる。
fetchのように通信の例外とステータスエラーは切り分けて提供するのが今時の正しい設計。
他にもjQueryの動作には非効率だったり人間工学的におかしい挙動が多いので、それを便利と勘違いして慣れてしまうのは危険。
まあ自分でjQueryに頼るよりも良い手段を常に把握しておけないのであれば仕方ないが、一生そこから成長することはないと思いなさい。 >>80
> 40Xで例外は間違った設計だと結論が出てる。
お前の中で結論が出てるかどうかなんて関係ないんだよ。 質問です。JSでインターネットに繋がっているかどうか判別する方法はありますでしょうか？ それは「インターネット」に「接続している」かどうかではなく、
「ネットワーク」に「接続していないか」どうかのAPI。
絶対に接続されていないとブラウザが分かっているとき以外は、実質繋がらなくてもtrueだし、
それことイントラネットやコピー機に接続してるときでもtrueだ。 そっか、ごめん。じゃあ実際に通信を試すのがいいかな。
画像でonload/onerrorしたり、試しにAjaxやfetchをしたりすればいけそう。 スクリプトの質問です。
1つの関数内で、if文が複数ある場合、それぞれ検証されているのでしょうか？
それとも、最初のif文の結果次第で、後続のif文の中の処理を行っているのでしょうか？
自分で試したところ、後続の処理も行われているのは理解できたのですが、
条件分岐はどういう仮定で行われているかわかりませんでしたので、質問させていただきました。
下記のような記述です。よろしくお願いします。
$('.hage').click(function(){
if(...){..}
else{...}
if(...){...}
else{...}
}); >>90
君がやらないといけないのはJavaScriptの文法の意味を調べることだよ。
if ・・・ これはなにか？
(...) ・・・ これはなにか？
{...} ・・・これはなにか？
else ・・・ これはなにか？
{...} ・・・これはなにか？
これを書けば君がわからないことの答えになる 区切りが分かっていないんだろう、もとい
if() {} else if() {}
と混同してるんだろう
if() {} else {}
の場合はそこまでで一区切りで前後の文とは関係ないよ >>91-92
レスどうも。
説明がくそみそですみません･････
if～elseまでで1つってことでいいんでしょうか？
ということは、それぞれ条件に合うか調べられて、それぞれ処理を行われるということですか？ JSだと
(function(){
alert();
})();
の末尾の()を取るとalertを実行させないように出来ますよね。
$(document).ready(function(){
alert();
});
このjQeuryの場合にカッコか何か追加／削除するなどの方法でalertを実行させないように出来ますか？
//alert();
以外で。
とりあえず一時的にコメント化したい時に使いたいんです。 >>95
window.alert = function(message) {};
とか? 真面目な会話をしたい人はこちらへどうぞ
JavaScript の質問用スレッド vol.132 [無断転載禁止]©2ch.net
http://echo.2ch.net/test/read.cgi/hp/1485265364/ 質問者はこちらへどうぞ。
ワッチョイ付きなので荒らしの区別が付きやすいと思われます。
+ JavaScript の質問用スレッド vol.122 +
http://echo.2ch.net/test/read.cgi/tech/1472426483/ 
