+ 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 を同期的に実行すれば
その方法を書きなさい。出来ないこと言っても意味がない 
