+ 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/ HPなどで友達が稼げるようになった情報とか
⇒ http://asaswq3wq.sblo.jp/article/181819223.html
興味がある人だけ見てください。
99FIKEY5SD ☆ 日本の、改憲を行いましょう。現在、衆議員と参議院の
両院で、改憲議員が３分の２を超えております。
『憲法改正国民投票法』、でググってみてください。国会の発議は
すでに可能です。平和は勝ち取るものです。お願い致します。☆☆ 誰でもできる在宅ワーク儲かる方法
少しでも多くの方の役に立ちたいです
グーグルで検索するといいかも『金持ちになりたい 鎌野介メソッド』
2FUU3 ある程度スクロールしたらヘッダーにfixedついて固定メニューになるページを作ってるんだけど、マウスのホイールでスクロールすると固定になった瞬間スクロールが一時的に効かなくなってしまうのは俺だけか？ http://mevius.5ch.net/test/read.cgi/hp/1510321470/993
> 993Name_Not_Found2019/02/05(火) 20:42:09.88ID:???
> >>991
> 俺がなんでああいう独特な書き方をしたか分からないか？
> 書いたことはちゃんと理解してくれないと困る
> 「本当の問題は数値と文字列が意図せず混在しやすいというところにあるからだ 」
> と言ってるだろう
> 君は正規表現でマッチした値を変数に入れたりすることは一切ないのだろうが
> 世間ではよくあるのだよ
君の独自ルール用語など知らんが、
> 例えばよくあるパターンが正規表現でマッチして数値と比べる場合
RegExp#execの返り値と数値を比較することを指していると？
Number型に変換すれば、何も困らん 以前、jQueryって該当のセレクタがhtmlドキュメント内に見つからない場合、
何も起こらないって思ってたのですが、変わりましたか？
ver1.11なのですが、そこが原因で後続のjQueryの記述が効かなくなるんです。
試しに、セレクタで指定しているIDを持ったタグをHTML側に記述すると問題無く効くんです。 エラーメッセージを見れば、どういうエラーかわかるかも >>110
>>111
有難うございます！！
一度見直してみます！！！ >>109
空の疑似配列が返るので、何もしないわけではない jqueryでn秒後に処理をしたいときdelayを使うけど、
とくにアニメーションとか関係ないときでも
なにかの要素に紐づけないとだめなん？ >>114
そういう時はunderscore/lodashを使用してください。
jQueryはDOM要素を操作するライブラリなんだから >>115
jqueryとunderscoreって喧嘩しない？ だいじょうぶ？ 初心者です。jQueryのslickというプラグインでスライドショーを表示させることに成功したのですが、画像が一部しか表示されません。
考えられる原因は何がありますか？ >>118
一部しかない画像を使っているからだよ
全体がある画像に差し替えろ jQueryの脆弱性が発覚した
https://portswigger.net/blog/abusing-jquery-for-css-powered-timing-attacks
jQuery独自のセレクタを巧みに使うことでタイミングアタックで情報が抜かれてしまう
直接使っている部分で絶対にセレクタに想定外の文字列が入ることがなくとも
プラグインやjQを利用するライブラリでどうなっているのか分からない
とりあえず当分は使われている全てのjQuery、もしくは全てのスクリプトの全ての関数定義
function～(){～を一括置換処理して
一行目にif((''+arguments[0]).length>30)throw 'Err'
などと入れることを勧める Bootstrap にも、スライドショー・カルーセルがある
Bootstrap は、jQuery で作ってる 要素の値の取得・変更とか
要素の増減とか
vanilla js でも出来ることを敢えて jquery で書くメリットって何でしょうか
自動補完ができない環境でも jquery の補完をしてくれる？？？
jquery で書く方法の方がメジャー？？？ なお、私は Web 界隈から離れて久しいです
var ではなく const let だけを使うくらいには ECMAScript2015 (ES6) は、ある程度使えます >>122
> vanilla js でも出来ることを敢えて jquery で書くメリットって何でしょうか
仕事なら絶対に考慮しないといけないことが１つ有る
それはコスト。
どんな仕事でも言わなくても、短い時間で作るっていうのは
達成すべき目標に含まれてる
jQueryはその目標の達成に力を貸してくれる あと勘違いしているようだが、vanilla js だけでは
要素の増減とか出来ない。
DOM APIを使わないといけない。
jQueryはvanilla jsの代替ではくDOM APIの代替
ECMAScript2015 (ES6) +jQueryで開発をする >>125
> あと勘違いしているようだが、vanilla js だけでは
> 要素の増減とか出来ない。
それはあなたの思い込み
http://vanilla-js.com/
ソースを確認しないところは相変わらずだね バブリングと書くべき場面でバグリングと何度も書き込んだり、自分の誤文を引用されて引用元の投稿者のミスと嘲笑う程度には、早とちりで井の中の蛙 jQuery を使うことによるコスト削減・生産性向上というのは、どういうもので、どういう程度でしょうか
さいきんでは「jQueryの経験は経験とみなさない」という条件を見ることしばしば、
また、いわゆる「コピペプログラミング」しか出来ない jQuery コーダーを、ある程度排除できて、
その分だけ生産性を向上させられるという側面もあります
MDN は直接のソースと言えないかも知れませんが
https://developer.mozilla.org/ja/docs/Web/API/Node/appendChild
https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore
あたりも、確認していただけると幸いです そもそも「コピペプログラミング」やらかしそうな連中を入口で排除した方が無難な気がしてきた…
あるいは、そもそも詳細設計の段階で「コピペが発生しそうな部分」を抜いて class なり関数なりに誘導…？
どこまでカバーできるか知らんけど（一度作ってしまえば、というのはあるかも） >>128
ん？jQuery厨だけど、またこのスレを荒らそうとしてるの？
いつもよくやるねｗ
はい、みなさん。本当に荒らしてるのは誰か？
これでよくわかりましたよね！ 俺の経験上jQueryを使うと同じことをする場合に
コードは1/3以下に減るよ
あとjQueryの経験は必須
この分野の実務経験があって知らなかったら驚くよ jQueryはほとんどのサイトで使われてるから、
知っていれば評価するというよりも
知っているのが当然で、知らなければ評価を落とすって感じ >>130
別に荒らそうなんてしてませんよ。
jQueryの話題はもっと相応しいスレがあるので
こちらでしましょう
+ JavaScript の質問用スレッド vol.140 +
https://mevius.5ch.net/test/read.cgi/hp/1558249632/ >>133
jQueryの話題が相応しいのはjQueryスレでしょう >>130
うーん
敢えて ID 晒してるんですけど…なんで「荒らし」だと思ったのでしょう
ラベルだのレッテルだの、どうでも良いので
内容についての話を… >>136
>>126-127を見ればわかるように、その人はただjQueryを啓蒙したいだけで他の技術を知らない人なので、関わらない方がいいと思うよ 啓蒙…
jQuery なしで済ます方法を啓蒙ならともかく…
なんでもかんでも jQuery 依存で書くという蒙を啓く、と 「なんでもかんでも jQuery 依存で書くという蒙」にとどまり
他の技術を、そもそも知ろうとしない連中なのかな
だとしたら完全に無視で良いし、むしろ無視すべきか いい加減無視するって言う前に無視することを覚えようか？ 罪を憎む前に人を憎む所までテンプレ
ID 強制の板だと必死チェッカーが来る所までテンプレ 勝てない相手には話を逸らす作戦だな
言い訳だけは豊富だから、この荒らし >>122-128
jQuery は、VSCode でも入力補完できる。
VSCode, Node.js を使うのは基本！
jQueryは、互換性が高いから、Bootstrap でも使われている。
jQueryが対応していないのは、Linux だけ！
Linuxだと、アクセスできないサイトはある。
その場合、user agent を変えたりして見る
まだ書き込みを続けるなら、名前欄に、122 と入れてくれ！
>>128
素のJS で書いてるソースコードは、テストも難しい。
色々な部分で、バグる可能性が出てくる！
Selenium WebDriver で自動テストするのに、素のJSで書く奴なんていないよ。
面倒で、テストコード自体にバグがあって、テストをすり抜ける可能性も出てくる
面倒すぎて、プログラマー同士の打ち合わせで、机上テストすら出来ないw
多人数で開発すればわかるけど、素のJSで書いてるプログラマーだけが、極端に遅くて、バグが多くなる。
その人だけが「あ、また勘違いしました」っていう言い訳が続くw 多人数で開発してるのにコーディング規約もないのかｗ JavaScript, jQuery で動的に、配列内の数字を取り出して、
それに「, 」を付けて、<p><span>で囲んで、
span:nth-child( even ) で、偶数番目の色を変えたりしてるのですが、
何かスマートじゃないと言うか、「, 」のフォーマットを分離できないでしょうか？
<p><span>1, </span><span>2, </span><span>3, </span></p> >>149
,を<span>の外について持って行ったら？ , が、<span> の内側にある方が、見た目がよいです
表じゃなく、<p> の内側だからかな？
何か、配列内の要素を、「, 」みたいなフォーマットと連結させていくのが、スマートじゃない コーディング規約で「jQueryで書け」ならvanilla js使うのは（以下自粛 jsが原因でHTMLのファイルが壊れるってことありますか？ ｊQuery使用禁止なのにjQuery使ったらfireされうるんじゃね >>155
ファイル破損？
書いたコードが消えるとか書き換わるとか？
結果的には
サイトが正しく表示されなくなる状態といえばいいのか
エラー状態、白紙、レイアウトの崩れ等 >>158
jQueryに限らず、JavaScriptでHTMLを書き換えられるので
白紙にしたりレイアウトを崩すことは問題なくできます。 「HTMLファイル」が第三者からのアクセスで破壊されるのはセキュリティホールだよ 素のecma6でアナニーしてたら肛門が破壊されました
ガシガシやる人は優しくラッピングされたライブラリーを使った方がいいかもね 初心者です。jQueryの質問ですが、hoverである要素にオン、オフの動作を設定するのはいいとして、
その「ある要素」が結構サイズ的に大きいと、そのページを開いた時に最初っからその要素にマウスポインタが乗ってる場合があり
その場合オン時の動作をしてくれない （一旦マウスポインタをわざと要素から外して、改めて乗せないとオンの動作をしない）
という問題に対して、セオリー的な解決方法ってどんなものなんでしょうか？ foreach で return が使えないようなのですが、値を外で受け取る方法はないのでしょうか？
現状、外に空の配列を置いて、そこへ push しています。 >>165 です
スレ間違えました。
失礼しました。 質問です。
テキストフォームに入力されたデータを取得し、処理を行ってから表示させようとしています。
$(document).ready(function () {
$("#Button1").click(function () {
inputText = $("#Text1").val();
$("#output").text(inputText);
})
})
上記の"inputText"に下記の処理を行ってからアウトプットしたいのですが、この場合どのように書けばよいのでしょうか？
$("span:not([class])").each( function(i){
var childNodes = this.childNodes;
$(this).replaceWith(childNodes);
}); inputText は、文字列だよ。
文字列に対して、childNodes など、DOM 操作は出来ない
文字列は、DOMじゃない。
文字列を異なる文字列に、変えたりは出来るけど
何をしたいのか、説明すれば？ >>168
ありがとうございます。
やりたいことは、htmlのソースコードからclassが指定されていない<span>と、それを閉じる</span>を削除することです。
<span>あ<span class="a">い</span>う</span>
のようにspanタグが入れ子になっているケースで、タグと閉じタグの対応を維持したまま
あ<span class="a">い</span>う
のようにするのがうまくいかずに苦戦しています。 普通は、ある要素を削除すれば、
その内側に存在する、すべての要素も削除される
そうしたくないなら、削除の際に、条件を付けないといけない
「jquery dom 削除 条件」で検索すれば？ remove( 式 )
引数に、選択条件式を指定することで、削除する要素を絞り込める。
式に、子孫要素に、classが指定されている<span>がある場合に、
その要素を一旦コピーしておいて、
先祖要素を削除してから、その削除した所に、付け替える
unwrap( ) もある。
これは、子要素から見て、単にその親要素を削除する >>170-171
ありがとうございます。ほとんどパズルですね…。 どこの誰が書いたかもわからんページをスクレイピングするような場合を除けば、
パズルにならないよう、htmlのほうを操作しやすいように書けばいいだけ 親・子要素だけに限定されているなら、unwrap( ) を使えるけど、
先祖・子孫要素の関係もあり得るのなら、複雑すぎて無理
x・y で例えれば、上は単純で、unwrap( )を使えるけど、
下は複雑
<x>
<y></y>
<y></y>
</x>
<x>
<y></y>
<z><y></y></z>
</x> table の中に沢山のtrが有る場合、
5番目から８番目までのtrを取り出してtableにしたいんですが
どうやればよいですか？ 以下は、#src から、#dest へ、インデックス1, 2 の、2つの要素をコピーする。
clone( true ) とすると、イベントや変数なども合わせて複製される（デフォルトはfalse）
<table id="src"></table>
<table id="dest"><tbody></tbody></table>
$( "#src tr" ).slice( 1, 3 ).clone( ).appendTo( "#dest > tbody" ) jQueryというかcss含む質問ですが。
<dl>
<dt>項目１</dt><dd>本文１本文１</dd>
<dt>項目２</dt><dd>本文２本文２本文２</dd>
・・・
</dl>
dl {columns: 2;}
dd {display: none;}
dt.open + dd {display: block; }
$('dt').click(function(){
$(this).toggleClass('open');
});
●現状
項目(dt)をクリックする度にそのddを表示／非表示。
●問題点。場合によって
(1)１列目最後のdtをクリックするとその本文(dd)が２列目にまたがってしまう。
(2)２列目最初のdtをクリックするとその項目(dt)が１列目に飛んでしまう。
●希望
(1)はなんとか我慢できるものの
(2)は２列目にとどまったままにしたく（１列目と２列目の高さが変わって可）
その方法を教えてください。 columnsは要素を並べるものではなくその要素のテキストを段組みするものなので
flexやgridを使いましょう >>180
それ上のHTMLではどう書くのでしょうか？
dt/ddがdivでまとまってれば簡単なのですが。 トグル処理を作ってみた
visibility: hidden なら、display: none と違って、
見えない要素でも、常に存在しているから、場所がズレない！
dt, dd { display: block; }
dd { visibility: hidden; }
$( 'dt' ).click( function( ) {
dd = $( this ).next( ) // 直後の弟のdd
if ( dd.css( "visibility" ) === "visible" ) {
dd.css( "visibility", "hidden" )
} else {
dd.css( "visibility", "visible" )
}
} ); >>182
閉じた時隙間ができないようにお願いします。 元の、jQuery のtoggleClass は、display: none を使っているから、場所がズレる！
だから、無理
一方、visibility: hidden なら、見えない要素でも、常に存在しているから、場所がズレない！
「javascript visibility display 違い」で検索して！
それと質問者は名前欄に、179 と質問時の番号を入れて、age て書き込んでください！
誰が書き込んでいるのか、わからないので だからそれを質問してるんだろ、アホなのかな
じゃ>>180はなんなんだ >>182ってマジで答えてるわけでなないよな・・・ ループ回転するソースをかいたのですが、
一旦止まって、また動くという意図しないアニメーションができてしまいました。
最初は、じわっと動きはじめて、そのまま回転しづつけるのが理想です。
良い方法ありますか？
$(function(){
setInterval(function(){
$(function(){
$(document).ready(function(){
// degという変数を0から360まで3秒かけて変化させる。
$({deg:0}).animate({deg:360}, {
duration:3000,
// 途中経過
progress:function() {
$('img#cercle').css({
transform:'rotate(' + this.deg + 'deg)'
});
},
});
});
});
},3000);
}); >>188
●css
@keyframes rot {
from { transform: rotate(90deg); }
to { transform: rotate(450deg); }
}
.rotate {
animation: 3s linear 0s infinite rot;
}
.rotate-start {
transition: transform 1.5s ease-in 0s;
transform: rotate(90deg);
}
●js
$(function() {
$("#cercle").addClass("rotate-start").one("transitionend", function() {
$(this).removeClass("rotate-start").addClass("rotate");
});
}); できないようなのでfloatでやります
これならHTML全くいじらずそのままでできますので
どうもでした >>189さん
ありがとうございます。
動きました！
もうちょっと勉強します。 >>188
$(this).animate( ) の場合は、
$(this).stop( ).animate( ) みたいに、
まず、stop で前のアニメを取り消すのが定番 エクセルみたいにtableのtd要素にオートフィルタかけてsubtotal関数使うような
jQueryって存在するんですか？ web制作においてJavaScriptで1番使いそうな文ってなんですか？
今Progateで勉強始めたばかりで、ループとかif文とかってそんなに使わないような気がして ループやif使わないプログラムってほぼないだろ・・・
大学で何やってたんだ 実行制御の基本「順次」「分岐」「繰り返し」を学んでないな。やっぱり、基本をしっかり教えるサイトが必要だな。 ここに書くべきか悩んだけどスレ違いだったらゴメン
「A Parser-blocking, cross-origin script,」な警告(要はそんな沢山の事できないから実行しねーぞ)で
jquery.min.jsの読込・実行そのものがブロックされるという本末転倒な事が起こっているWebサイトがあるんだが
これってjQueryそのものが終わっていてもう新規案件では使わないべきだと判断した方がいいと思う？
まあ元はワンパンマン(知らない人ごめん)の原作漫画がスマホだと読めないってここ数ヶ月ぐらい話題になっていて
気になって原因調べたらページ本体のスクリプトと広告部分のスクリプトが喧嘩していて上記の不具合が起こっていたわけで
珍しい不具合だし対処もやろうと思えばできる代物だけど
それ以上に「ブラウザ側にブラクラ相応の判定されるjQueryヤバくね？」と気になったので質問してみる それはjqueryのせいではなくdocument.writeを使って追加スクリプト読んでるのが悪いのではないのか？ >>202
jQueryはウェブの標準技術の基本的な機能を使って作られてるので、
jQueryが動かないってことは、ウェブの世界が壊れたと言ってるのと同じ
標準技術だから使えなくなることはない
基本的な機能だからどのブラウザでも動く
それがjQueryなの >>202
当たり前だが、そのエラーが出てるサイトで、jQuery.min.jsの中身を
他の何に変えても同様に動かなくなるだろう cross-origin できるドメインを、許可していないからだろ
このドメインは安全だから許可するとか、そういうドメインを列挙していないから、
jQuery みたいなライブラリから、動的にscript タグを作って、読み込んだスクリプトを実行できない
仮に、この制度が無かったら、安全なサイトだと思ってアクセスしたら、
そのサイトはクラッキングされていて、
危険なドメインから、危険なライブラリを読み込んで実行されてしまう 以下のHTMLがあります。
<ul class="info">
<li>東京都</li>
<li>神奈川県</li>
<li>埼玉県</li>
<li>千葉県</li>
</ul>
これに対してJqueryで下記を実行しました。
var txt1 = $('.info li:eq(0)')[0];
var txt3 = '首都' + txt1
console.log(txt3);
首都<li>東京都</li>
となる事を期待したのですが、
首都[object HTMLLIElement]
上記のようになってしまいました。
期待通りに結果をだすにはどのように修正すればよいでしょうか？ そもそもこれはHTMLの仕様として間違い
<ul class="info">
首都<li>東京都</li>
</ul> ul には、li しか入れられないのかも
だから、テキストを入れられないのかも var txt1 = $('.info li:eq(0)')[0].outerHTML; jQueryのthisの使い方って、javascriptと同じなの？ 質問です。
下のような= + の文を見ました(+=ではない)
document.getElementById('～').checked = +document.getElementById('---').value;
どういう意味かわかりますか？ slidetoggleを使っており、以下の1段目のli(クラス名で指定)をクリックすると、ul以下が開閉するようなものを作成しているのですが、
3段目のリストをクリックすると閉じてしまいます。これをliのクリックだけにしたいのですが、どうすればいいでしょうか？
<li クラス名>文字
<ul>
<li>リスト1
<li>リスト2
… >>216
自分で解決しました。
子要素に別途クリックイベントを入れて、stopPropagationを入れました jQueryでtoggleメソッドを使って要素の表示・非表示を切り替える方法
https://techacademy.jp/magazine/9540
stopPropagation などは使わない。
それは、おかしい
$(this).next().slideToggle();
の、next()みたいに、正しく要素を指定していないからじゃないか？
this が、dt なら、next()で次の兄弟の、dd を指定できるはず
<dl id="acMenu">
<dt>アコーディオンメニュー</dt>
<dd>openメニュー</dd>
<dt>アコーディオンメニュー</dt>
<dd>openメニュー</dd>
</dl> 初歩的な質問なんだけど、HTMLの読み込みが完了しないでjqueryのコード走らせるとうまく動かないのなんで？
大体がDomで変化があったときに実行されるから関係ないんじゃないのかなって思ってたんだが 例えば、ある要素に、jQuery でイベントを付けても、
その要素がまだ存在しないとか
あるボタンにクリックイベントを付けたけど、そのボタンは、まだ存在しないなど jQuery公式からjquery-3.5.0.minファイルをダウンロードしてクリックしてもエラー800A138Fとなって開けないのですが
これは自分のパソコン側の問題ですか？
windows10のMicrosoft Edgeなのですが ダウンロードしたのがEdgeなだけ。
JScirptで実行してるのが悪い
ちゃんと勉強しろ 当たり前だがJScriptなのだからDOMが存在しない。
実行時エラーになるのは当たり前 >>223
NiceScrollを紹介していたサイトの指示通りに導入しようと思ってたのですがjQuery本体が開けなくて困りました
NiceScrollを使いたいだけだったので不勉強でしたがEdgeだけ特別仕様のようなものが違うのですか？ HTML の<head> 内か、</body> 閉じタグの直前に、script タグを書いて、
src 属性に、ファイルを置いたパスを書けば、読み込める
<scr＠ipt type="text/javascript" src="./jquery-3.5.0.min.js"></scr＠ipt>
script タグは書き込めないので、＠ を抜いてください >>224
使い方の問題でブラウザのせいじゃない
最低限の知識も足りてないぞ いまどきNiceScrollとかどんだけ時代遅れなんだ
scrollIntoViewで充分だろ
IE11でもbehavior: "smooth"が効かないだけで機能はするしな そういえばコロナの在宅勤務で自宅のパソコン使う人が増えて
地味にIEのシェア増えたって主に日本だけで
くそかよ マイナンバーカードのポイント
マイナポイントはIE11以外は保証しないとかどっかで見て笑ったわ
ねーの！！！ widthでウインドウサイズが特定のサイズの時だけimgのサイズが取れないバグが出てるんだけど何か対処方法ある？ >>231
jQueryやめてgetBoundingClientRect使えばいいんじゃね jQuery使ったらちゃんと取得できたりしてなｗ
ブラウザのバグなら対応してる可能性が高い ここはjQUeryスレなんだから、jQuery使っててうまくいかないってことだろ JavaScriptの質問でもあるんだから聞いてみないとわからんね jQueryのlazyloadの演出が嫌なのですが、effect無効化かeffectspeedを0にする方法を教えてください
環境はFirefoxにStylus、Tampermonkey、uBlock Originの拡張が入っています
jquery.lazyload.min.jsをブロックすると画像が読み込まれませんでした jQueryにはlazyloadなんて機能はありません こんにちは、初心者ですが相談させてください。jQueryで例えば
setTimeout(()=>{$('button#hoge').click()},1000);
とした時、Firefoxで実行すると間違いなくクリックされるのですがGoogle Chromeだと3回に1回くらい
クリックされないことがあるのです。1000を3000にしても同じです。まずちゃんとセレクタが働いているのか確認しようと思い、
setTimeout(()=>{$('button#hoge').focus().click()},3000)
としてみるとちゃんと3秒後にフォーカスされるのにクリックはされない事があるのは同じでした。どういう理由と解決策が考えられるでしょうか？ >>230
楽天edyもそれ
今時どんな作り方したらそうなるんだよ WEBページ上で異なるドメインからjsファイルをDLして実行する事は可能ですか？ できないっぽい？
1か所のドメインにJSライブラリ全部おいてキャッシュ共有できないかなと思ったんだが よく知らないけど、
安全性のために、クロスオリジン禁止・CORS にしているけど、
HTML のヘッダーに、許可するドメインなどを指定すれば、できるかも知れない scriptタグで読むなら普通にできるでしょ
jsDelivrやCloudflare CDN使わんの？ 割り込みだったらごめんなさい。
ハンバーガーメニューについて教えて頂きたいことがあります。
PCブラウザで画面を狭めていってスマホ用の表示に切り替わったとき、
ハンバーガーメニューが展開してしまいます。
デベロッパーツールやスマホで、パソコン表示とスマホ表示を切り替えた際にも同じ現象が起きます。
開かないようにするにはどうすればいいのでしょうか？
HTML、CSS、jsのセットをダウンロードして使っているのですが、
jsはまだ知識が乏しいです。
ダウンロード元の業者もjsは外部に発注したそうで、jsのバグ対応はして頂けなかったです。
どうかお力添えください。 var element = document.getElementById('target'); // 移動させたい位置の要素を取得
var rect = element.getBoundingClientRect();
var position = rect.top; // 一番上からの位置を取得
function scrollToTop() {
scrollTo(0, position);
}
カーソルアイコン
<div class="btn" onclick="scrollToTop()"></div>
<div id="target">移動したい位置</div>
配布先のサイトでコピペしたら使えるように用意されていたコードでサンプルではカーソルアイコンからtargetに飛べたのですが
コピペして自分で使ってみるとtargetに飛ばずにサイト最上部に飛びます
どうすれば元と同じようになりますか？ >>245
まずよく考えろ
パソコン表示からスマホサイズに縮めること自体が一般ユーザーは通常やらない操作だろ
つまりそんなことはどうでもよくてスマホで見たときに問題なければいいわけ >>247
それは承知です。
800pxからハンバーガーメニューなので
ブラウザを縮めて並べて見たりする人には
優しくない仕様だと思うんです。
他のHPで実装できているのですから
私もできるようになりたいです。 >>246
上3行をscrollToTopの中に入れるか、スクリプトを<div id="target">～</div>より後に書く
もっともscrollIntoViewを使えばこれだけで済むけど
function scrollToTop() {
var element = document.getElementById("target");
element.scrollIntoView(true);
}
>>248
再現できるものを提示しないで質問されてもまともな回答はできないと思うの
誰も対処できないのなら他のを探した方がいいのでは？ >>249
教えていただいた3通り全てで再現出来ました、ありがとうございます助かりました >>247
の言う通り。放置でよい
画面サイズが小さくなっても、ハンバーガーメニューが開かないようにすれば？
JSFiddle に、再現できる最小限のコードを書けば？ >>245
そもそも何が原因で開いているのか分からないわけだから、答えようがないだろ
ソース載せるか、さもなくばSOHOにでも頼んでバグ修正してもらえ
JSのバグなのかCSSのバグなのかもこの情報だけじゃ区別出来ない 学習3日目のド素人ですが質問いいでしょうか…？
APIでJsonを取ってきてHTMLに渡して表示させると
["2021-02-04T20:05:09Z"] ← このように表示されます
2021-02-04 20:05:09 ← このように表示したいんです…
[" "]を外したりTなどを外して渡すにはどうすればいいでしょうか？ >>254
jsonは文字列のままどうにかしようとしないでJSON.parse()でオブジェクトに変換してから操作
日時文字列はDateオブジェクトに突っ込んで操作
const json = `["2021-02-04T20:05:09Z"]`;
const ary = JSON.parse(json); // jsonの一番外側が[]なので配列に変換される
const date = new Date(ary[0]); // Dateオブジェクトに変換
console.log(date.toLocaleString()); // 2021/2/5 5:05:09 >>255
ありがとうございます…！
トライしてみます！ jQuery UIのsortable()で、縦並びなら問題なく動作するんですが横並び（display:flexやfloatや要素をinline-blockにするなど）にすると、挙動がおかしくなってしまいます。
具体的には、反応したりしなかったり、です。ドラッグしてしつこく上下に動かしながら横に持っていくと入れ替わりますが縦並びの時のような滑らかさがないと言うかなんというか。。
optionをいろいろ指定してみても変わりません。どなたか詳しい方いたらお願いします。 複数のページがあるサイトを作っています｡
全ページで共用するコードもあれば､トップページでのみ使うコード､ギャラリーページでのみ使うコードなども全て一つのJSファイルに書き､全てのページでその一つのファイルを読み込んでいます｡
ただ､全ページ共用のJSファイル､トップページのJSファイル､ギャラリーページのJSファイルと､それぞれ分けて読み込んだほうが良いでしょうか？
主流がどちらか知りたいです｡ ということは一つのJSファイルに全て書いて全ページで読み込む方式が良いですか｡
ありがとうございました｡ 共通のものと個別のものとをごっちゃにしてる風に見えたんだが大丈夫かいな >>261
①
トップページではcommon.js(全ページ共通のjs)とtop.jsを読み込む
ギャラリーページではcommon.jsとgallery.jsを読み込む
②
全ページでmain.js(common.js､common.js､gallery.jsなど全て内包)を読み込む
これで②の方式をとりました >>262
基本的にはwebpackあたりにお任せしておけばいいんじゃないかと思うけども
私ならcommon.js、top.jsをトップページで読み込み
gallery.jsはプリロードかな 最近無名関数を()=>表記するのをよくみかけます
中はセミコロンを1箇所だけ最後につけるようなワンライナーの式の場合
セミコロンも{}も不要みたいですが
バグの温床になりそうなのでちゃんとつけたほうがいいですよね？ 質問です
Intersection Observerみたいにtextareaのvalueが変更されたら自動的にfunctionを動かせるイベントやobserverみたいなものってありますか？ inputイベントで値が変わったかどうか確認してから目的の処理を動かす
適度にthrottleして非同期で動かす場合が多い 随時取りたいなら>>267、フォーカス外れた時でいいならchangeイベント angularやjquery使わず
javascriptのみでもっと見るってどうやんの？
もっと見るボタン押した時にだけ画像読み込んで
指定した枚数の画像表示したり全ての画像読み込んだらボタン非表示ってのやりたいんだけど >>267>>268
できまいｓた！ありがとうございます！ var color_obj_list = [
{"red":255,"green":0,"blue":0},
{"red":0,"green":255,"blue":255}
];
というようなオブジェクト配列があって
{"red":0,"green":0,"blue":255}をあとから追加したいんですけど、どうやればいいんですか？
配列番号[2]を指定しないとだめですか？pushみたいに配列番号わからなくても追加できるのはないですか？ >>272
color_obj_list.push({"red":0,"green":0,"blue":255});
とやってもできませんでした >>266
Vue.js でも使えば？
ページ全体ではなく、特定のコンポーネントだけにも使えると思う >>274
あれできてたわ
何でさっきできなかったのかわからん <div onClick="return false">
リンクつきの画像やテキストが複数
</div>
こうするとクリックしてもリンク先に飛ばないけど
プログラム中でreturn falseを解除してリンク先に飛ぶようにするにはどうやったらいいんですか？ >>277
const hoge = document.querySelector("div[onclick]");
hoge.onclick = null;
または
hoge.removeAttribute("onclick"); >>278
onclickでクリック数を数えてクリック数３回未満はreturn false解除でリンク先に飛べる
ようにしたかったのでonclick自体無効だとできないんです
他に方法はないのかな？ ajax.status === 200
HTTP OKを意味する定数は存在しないのでしょうか。
200はちょっとカッコ悪いなと思い、定数を探しましたが見つかりません。 RFC7231で決めたことを無視したい理由はカッコ悪いからか ？
200という数字では、改変されたり意味が分からなくなるので、定数を宛がうと思っていたのですが…
RFC7231は定数ではなく、数字を使えと決めたのですか？
もしそうなら、その背景を知りたいです。 >>277
jQuery なら、これで、1, 2, 3 と表示されて、
それ以降は、クリックしても何も起きない
on/off で、イベントを追加/削除する
<button id="btn_1">押して</button>
let click_count = 0; // クリックした回数
$( "#btn_1" ).on( 'click', function ( ) {
click_count += 1
if ( click_count >= 4 ) {
$( this ).off( 'click' ); return
}
console.log( click_count )
} ); >>282
皆が必ず使ってる人気の定数名があるかどうかってことを聞いてる？
これはわざわざ定数や変数に置き換えるより単なる 200 の方が可読性が高いので 200 を使おう >>284
そうです。
200を使うことが常道なら、それに倣います。 200や404くらいなら別にいいけど
その他の各種status codeを定数として書く必要があるなら
そういうモジュール使ったほうが断然いいと思うけどな <a href="./test.html" id="aaa">てすと</a>
document.getElementById("aaa").href="javascript:void(0)";
でリンク先に飛べなくしたあとにjavascript:void(0)を取り消して
元の./test.htmlに飛べるようにするにはどうしたらいいんですか？ document.getElementById("aaa").href="./test.html"; クリックするボタンのidを関数に渡すには
このようにするしかないですか？もっと綺麗にできないですか？
<input type="button" value="ボタン" id="bt" onClick="disp('bt')">
function disp(id){
alert(id);
} >>290
href上書きして消してるんだからそりゃそうだろ
それが嫌ならhrefいじらずに
document.getElementById("aaa").style="pointer-events: none;";
でリンク先飛べなくして
document.getElementById("aaa").style="pointer-events: auto;";
で戻せば >>295
それだとponter-events:noneが実行される前にリンク先に飛んじゃう >>296
じゃあCSSに
.toben { pointer-events: none; }
定義しといて
document.getElementById("aaa").classList.add("toben");
で飛べんくして
document.getElementById("aaa").classList.remove("toben");
で元に戻せば >>290
直にurl文字列書くのが嫌なら元のを変数に保存しておけばいいだけだがそれすらめんどくさいの？
>>297
pointer-events: none;はキー操作だとすり抜ける
定番のやり方だとこう
function nojump(event) { event.preventDefault(); }
//飛べなくする
document.getElementById("aaa").addEventListener("click", nojump, true);
//戻す
document.getElementById("aaa").removeEventListener("click", nojump, true); <select id="sel">
<option value="1" selected>選択１
<option value="2">選択2
</select>
var sel = document.getElementById("sel").value;
alert(sel);
選択２を選択してから、どこかのページに飛んでブラウザの戻るボタンで戻ると
選択２が選択されているのにalertで1と表示されてしまいます。
戻っても正しい選択値が表示される方法はありますか？ >>299
chromium系だとDOMContentLoadedイベントよりも後にselectが前回の状態に戻るけどchangeイベントが発生するわけでもないのでsetTimeoutで適度に遅延入れるくらいかなぁ
firefoxは問題ない アニメなんかも、戻るボタンで戻ると、真っ白な画面になるとか、本に書いてあった
そういう対策をしないといけない 戻った時に入力内容とかが復元されるのはブラウザの親切でW3C辺りが戻るボタンの動作を規定しているわけじゃないよね？ ブラウザごとに動作異なるならぶっちゃけ余計なことしないで欲しかった
戻るで戻ったら初期状態と分かっていれば手動で復元の仕組み書けばいいだけだったのに各ブラウザがまちまちに余計なことするから逆に手間だよ element.style.display = "none";で非表示にした部分を元に戻すには
element.style.display = "";のように空を指定した方がinlineやblockとかを
指定するよりいいですか？ >>303
余計なことをあなたがしなければいいんだよ
なぜページを戻ったときにJavaScriptを実行させるのか？
そんな余計なことをしなければ何の問題もない フォームが前の状態で再現されるかはブラウザやキャッシュ状態に依存するし
iOSなんかは1～2ページ程度の遷移だと戻ってきた時にスクリプト再実行されずにpageshowイベントだけ発火するし
なかなか難しいね なんかベーコンエッグキャッシュみたいな名前ついてなかったっけ？ >>304
>element.style.display = ""; のように空を指定した方が、
>inlineやblockとかを指定するよりいいですか？
"" は、何になるの？
blockとは違うの？ element.style.removeProperty()と等価
cssで指定された値か要素の初期値 >>308
Safariのbfcache(back-forward cache) jqueryで複数のimg要素のsrcを属性と親要素のidを使って書き換えたいのですがうまくいきません
<div id="hoge">
<img src="01.jpg" attr="a">
<img src="01.jpg" attr="b">
</div>
<div id="fuga">
<img src="01.jpg" attr="a">
<img src="01.jpg" attr="b">
</div>
を↓のようにしたいです。
<div id="hoge">
<img src="hoge-01-a.jpg" attr="a">
<img src="hoge-01-b.jpg" attr="b">
</div>
<div id="fuga">
<img src="fuga-01-a.jpg" attr="a">
<img src="fuga-01-b.jpg" attr="b">
</div> attrって言う属性はないのでは
data-◯◯みたいなカスタム属性かな こんな感じだな、文字列は適当にやれｗ
$("img").attr("src", function() {
return this.parent.id + this.src;
}) <div id="hoge">
<img src="01.jpg" data-val="a">
<img src="01.jpg" data-val="b">
</div>
$( 'img' ).each( function ( index, elem ) {
const parent_id = $( this ).parent( ).attr( 'id' ) // 親
const data_val = $( this ).attr( 'data-val' )
// basename と拡張子に分割する
const ary = $( this ).attr( 'src' ).split( '.' )
const str = `${ parent_id }-${ ary[0] }-${ data_val }.${ ary[1] }`
$( this ).attr( 'src', str ) // 設定
} ) >>315
ダサいからeachつかうな
お前がやってるのは>>314と同等のコードだ eachがダサいかどうかはしらんけど
>>315のコードは確かにダサい >>314
このやり方知らなかった。$(this)じゃなくて良いのか
デバッグしたい >>314
は、src 属性しか処理していない
>>315
は、親のid とか、data-val, src 属性など、複数属性を処理するから、
314 の書き方では出来ない
それに、314 は、
console.log( this.parent ); //=> undefined >>320
できるぞ？何言ってるんだ
自分の親を探すだけやろ >>320
> console.log( this.parent ); //=> undefined
ヒントやったんだからあとは自分でやれ >>320-322
attr()で実装可能だが、自分のミスを棚上げして他人をこき下ろすのは説得力がない
>>314は通常のDOM APIの覚えが甘い
https://jsfiddle.net/Lf6x7c2d/ >>323
だから最初に文字列は適当にやれって書いただろ
あと、こんなの覚えるもんじゃねーよ それと、$( 'img' ) とすると、範囲が広すぎるから、
$( '#hoge > img, #fuga > img' ) と、範囲を限定した方が良さそう
>>323
引数のsrc を、書き換えない(上書きしない)方がよい。
ローカル変数を使った方が安全 >>324
>>316の「314と同等のコード」が嘘だから突っ込まれてるんだろ
言い訳が見苦しすぎ >>327
部分的に挙動は同等だけど、コードが同等には見えない
314は日本語がダサい WEB系に興味あるんだが、JavaScriptかtypescriptどっちを先に勉強すべき?
因みにAIエンジニア3年目でPython使っているので、プログラミング経験はある。 すぐ理解できるならTSからでもいいんじゃないかな｡
関数に型を指定せずに宣言しても通っちゃうガバガバなJSに秩序をもたらしたのがTS｡
といっても多く入門書がJSだからJSからになるのかな｡ プログレスバーの進捗をTSのソース側にある数値使って伸ばしたいんですが、どこかに良さげなサンプルコードありますでしょうか。 javascript プログレスバーで検索したらたくさんでてくるがそれじゃだめなの？ 即時関数は無名関数でなければだめなんですか？
(function test_func(){
})();
のように関数に名前つけてもいいんですか？ window.addEventListner(
"scroll",
function(){alert("");}
);
スクロールバー１回押しただけなのになぜか複数回呼び出される
てことはこの中にsetInterval入れる場合はtimerが重複してしまうのでは？
何か回避策ありますか？ こんばんはいつもお世話なります
正月からグーグルマップAPIやleafletプラグインと格闘しておるものです。
地図にオーバーレイ画像を貼ってドラッグ移動するところまではなんとかやれましたが
ドラッグ後のマウスアップイベントにて座標値を記憶する処理をしたいと思っています。
そのとき、タイミングによっては画像の外でマウスアップするのでイベントが点かないことが起きます
以上よろしくお願いします インスタンスをたくさん生成するとき、いちいちユニークな番号なりを振るものなんですか？
たとえばボタンを押すたびに敵MOBが画面に出るとして、
var enemy =new obj()
みたい処理を何回もやると全部enemyて名前なんです？
enemy[0]から自動で添字が付くのでしょうけ？ >>338
なんでjQueryスレで質問してるの？
jQuery.each()で配列化したオブジェクトを使えば？
そういうものとか固定観念を求めるのはなぜ？
そんなものは投げ捨てていいと思うけど >>342-343
何もしてないお前らが引っ込んでなよ クラスからオブジェクトを作る時にプロパティリストがありそこであるプロパティを宣言せずにおくとエラーが出るが、値はカラのままにしておきたい
以上よろしくお願いします こんばんはいつもお世話になります
コンストラクタにプロパティがあっても、newでインスタンスを作る時にプロパティの値を入れないと、そのプロパティはナシになるということですかね？
以上よろしくお願いします >>351
要件定義次第でナシになるんじゃないですかね？
よろしくお願いします こんにちはいつもお世話になります
質問ですが
チェックボックス5択とボタンがあり
選択の組み合わせでURLにクエリのパタミタをつけてボタンのhrefがダイナミックに変わるようにしたいです
これはjavascriptとイナーテキストでやれると聞いたのですが
以上よろしくお願いします >>360
イナーテキストというのはないですね
多分関係ないです 僕の認識では、リンク先URLというものはページ表示した時点で固定なので、表示前にサーバ側でPHPかペールをつかってダイナミックにHTMLを書き換えるものと思っていました
そうするとチェックボックスのクリックのたびにインターネッツにPHPをしにいくので
画面がぱくぱくするのが嫌だなと思いました
ところが最近のJavaスクリプトはページがすでに表示あとでも、じかに中身を書き換えるとききました
それがイナーテキストらしいんですが
以上よろしくお願いします >>363
ペールを使ってもダイナミックに書き換え出来ないですね
イナーテキストとやらもhref関係ないんじゃないですか
全体的に言葉がおかしいのでインターネッツで勉強してください 「わからないんだろと煽っても無駄です」のテンプレは正しかったな innerHTMLでの書き換えのことを言っていると思うが、
hrefだけピンポイントでsetAttributeで書き換えればよい。
「aタグのhref属性を書き換える」でgoogle検索してみてください。 >>368
イナーテキストがinnerHTML?
ネタにマジレス感が否めない JQueryて必要な関数だけコピペしてきて使ってもいいの？ たしかにinnerHTMLとかinnerTextは画期的だったな そもそも当初のjavascriptはオブジェクト指向じゃなかったからね >>360ですこんにちは
うまく動きませんでした
なぜかというとURLがhrefでなく
onclick=location.hrefうんぬん
という書き方だからみたいです
以上よろしくお願いします >>376
最初に、innerHTMLのことを教えてくれた人に詳しく聞いてみればいいやん >>380
だから「そのくらい」てのなら楽勝でやれるんやろ？
なんでそのくらいサービスできんとか！？ 無礼なインタネッツやな！
年賀状ひとつよこさんと！ >>383
なんだとテメー表出ろ！！
俺の巨根見せてやるよ >>376
サンプルを貼りたいんだけどね
セキュリティでタグがあると書き込みエラーになるんだよね で、JQueryて必要な関数だけコピペしてきて使ってもいいの？ >>392
もう一回質問してみろ
そのときめっちゃ答えてくれるからよ(ニコッ) >>388
Chromeの場合はアドレスバーの右側にアイコンがあればポチれ
アイコンが無ければ右クリックしてからの翻訳
簡単だよ >>394
最初からそう言えよゴミが
やっと分かったわ
コピペできないなら最初からそう言えよ え？やったらあかんの？
やろうとしてたわ
危なかったあ なんのためにjQueryで必要な関数だけ取ってきたいのかわからんのだが？
そんなうまく取ってこれるようになってるところなんかあるんか？ つか翻訳で解決したんじゃなかったのか？
ぐぐったら即解決するぐらいに有名なライセンスだと思うが >>403
なんのためにって
野暮なこときくなよ
人のふんどしを使うのが嫌なんだろ 面接でポートフォリオを見せると
「これは自分でやったの？それともライブラリを使った？」とか聞いてくる面接官がいるからね おれ面接官だけど
JQueryがインクルードされている時点で不合格だわ
そこは要領よくやってほしい jQuery使ってたらWeb業界のためにもその場で顔面殴るけどなぁ｡うーむ｡ もう解決したんだからごちゃごちゃ抜かすなよ関数コピペハゲ >>406
コピペ盗用したらそれこそ他人のフンドシだろwwww >>408
仕事で要領よく盗用して発覚したらたまったもんじゃないわ >>408
おれ面接官だけど
字が汚い時点で不合格だわ
まあこんな面接官もいますしねぇ
面接官＝無能なんてよくある話ですよ。 >>409
勝手にウェブ業界を代表するな
ウェブ業界の考えは今動いているものを壊さないことだ
78%もの人が使っているjQueryを、ウェブ業界のために＝とか言って否定するならば
お前がウェブ業界を分かってないとボコボコにされるぞ
https://w3techs.com/technologies/history_overview/javascript_library/all/y jQueryはWordPressに標準で入ってるからな
毎日自動的にフィッシングサイトが量産されてるから増える一方だろう promiseで処理完了を待ってから次の関数、みたいなことをやろうと思っています
サンプルコードを見るとsetTimeoutで1秒待つみたいなのが定番みたいですが
それって処理完了を検知してすぐ次をやりたいのにフツウにsetTimeoutで遅延させてるだけやん そこまでわかっているなら1秒も待たずに実行されるようにしてやってみたら良いぞ setTimeoutで待つ時間の設定て、ネット回線やPCスペックで全然変わってくる気がするんだけど
そのへんは適当でいいのかな もしかしてサンプルコードにあるsetTimeoutって、時間のかかる処理をシミュレートしてるだけなん？ プログラム板とこのスレをネタ質問で埋めてる奴なんなん？
今いる質問は全て回答する価値すらなら面白くない質問なんだが >>420
その認識で合っている
setTimeoutで一呼吸待つ小技もアリだがPCによっては1秒でも3秒でも5秒でも足りなかったりして動作が不安定になる
だから替わりにasync awaitを使う
サンプルによく書いてあるsetTimeoutは単にわざと処理をずらして処理の順番を確認しているだけの話
なので実際にはわざわざ一呼吸おく必要はない >>420
そう非同期処理コールバックの最後でresolveなりrejectすればいいだけ ユーチューブでjavascriptの講座してる人8人くらい見たけど
みんな内容がほぼ同じなんだよね
あれってオリジナルはどれなんですか JSCodeを使っていますが
インデントてのはtabを入れるものなんですか
それともスペース？ >>429
チーム内のコーディング規約に従え
個人なら好きな方を使え 例え話ですけど
ホットケーキの丸い型枠があるとして、それを使ってできた丸いホットケーキがあります
で、あとからその型枠をハート型に変形させます
すると過去につくったホットケーキが丸からハート型に変形します
こういう処理はオブジェクト指向ではなんと呼んでいますか >>431
それは本当にオブジェクト指向か？
プロトタイプベースでは？ >>431
プロトタイプを型枠として認識するのが間違い
間違った理解をアンラーニングしてオブジェクト指向を学び直しましょう >>432
プロトタイプベースじゃなくても動的言語なら普通にありえる >>432
プロトタイプベースはオブジェクト指向じゃないのか 質問よいでしょうか
Jqueryの
$(#btn).hide();
を使ってボタンをクリックしたらそのボタンが非表示になる処理をしようとしています。
2回押されるのを防ぐためです。
ところがボタンがすぐ消えずに次の処理が終わった頃にやっと消えます。
すぐ消すにはJqueryではダメなのでしょうか hide()のanimation durationがdefault 400ms
非表示にするよりもdisableにしてから
処理中を示すアニメーションを表示するといい >>441
なぜかjqueryのhideやshowは非同期処理だそうで
いろいろ工夫がいるらしいですね
ヒントをありがとうございます jQueryはとにかく遅延がひどい
promiseも効かない
適当な見た目だけのサイトならいいけど
システムGUIとしては無理 アニメーションをjQueryでやる理由は今ではないんだよな 2度押し防止のためにボタンクリックしたら即非表示にするというUIがクソ of クソ >>446
重い処理で5秒ほど固まる(というか非同期で裏で動く)ので
ボタンを消して「お待ちください」のメッセージを出したいのですが
クリックして5秒後にやっとボタンが消えて、一瞬だけお待ちくださいが出る状態です
以上よろしくお願いします >>447
多重実行を抑止したいならボタンを非活性化するだけで良い
非表示にする必要はないだろ >>448
そういう手抜きでいいならとっくにやってますよ >>449
ユーザビリティの問題に手抜きと一蹴するのはどうかと思うが >>447の言ってる「2度押し防止」は例で書いただけやろ
質問してるのはそこじゃないんや
アスペか jQueryに処理を投げたときに、その完了はpromiseでは検知できないのでしょうか。
消す指示は出したよ！→ then発動
(消えたかどうかは知らん)
てことですかね >>451
目的を嘘で塗り固めるとかアホか
目的と実装は対になるものだぞ
目的が嘘なら実装も嘘だろ jQueryを使わずに
display:noneで解決しました
ありがとうございました APIやnode.jsを同期させるのは本当に面倒だ
ajaxとかマジで禁止にしようず >>447です
今のところ何も解決していないです
alert("ボタン消す");
は重い処理でも即座に実行されますが
ボタンのhideなりdisplay:none は
放ったらかしになります
これはjQueryは関係ありませんでした >>438とか>>449とか>451とか
反応見る限り、真面目に回答する必要ない質問ばかりなんだよなあ >>458
ちみのいう真面目な回答とやらを書いてからいえ DOM操作は基本的にはすべて非同期処理だろ
いちいちエラーで止めることもしない
そのくらいアバウトでないと素人さんが困るから >>459
必要ない、といってる相手にそれをいう？
アホなのか？ >>461
ちみにはきいてないよ
必要ないならすっこんどれ >>457
単純に非表示に続けて重い処理やっちゃてるでしょ？
重い処理はWorkerでやるなりsetTimeoutで若干遅延させるなりして
非表示にしたらすぐにreturnして表示更新する隙を与えないと >>462
真面目な回答をする必要のある質問をしてから要求しろ >>447
それ処理順序が間違ってるか非同期だと思ってるのが非同期じゃないかのどちらかじゃないかな
前者は非同期の処理タイミングを理解してない人がよく勘違いするやつ
不具合を解消したいならとりあえず再現コードを上げれば？ 似た事例で質問です
下記のようなinputテキストのフォーム画面があり
5人の売上個数が入力されるとします
で、合計数字なんですが、これは5人の数値が全部入るまでは空白にしておきたいそうです
Aさん[ ]個
Bさん[ ]個
Cさん[ ]個
Dさん[ ]個
Eさん[ ]個
-----------------
合計[ ]個
以上よろしくお願いします >>468ですが大事なことを書き忘れました
5人のうち誰のデータが最後に入力されるかが未定だそうです
そこを考慮お願いします >>468です
5つのinputtextが出揃ったイベントはどのように監視したらよいでしょうか
もちろんPCに負荷をかけたくないので、1秒おきにリトライする、とかは避けたいそうです >>471
基本50万はみておいてください
それにドキュメントや諸経費が加算されます >>471
↑はみんな嘘なので気をつけて下さい
300-500万は見積もって下さい >>468ですが、お金はでません
すみません。
ただの練習課題です。 >>468ですが
無職のおっさんです
以上よろしくお願いします >>468
最後の空欄に100個と入れるとして、はじめの1がタイプされた瞬間に間違った合計値が出るのはまずいって話なのかね？
入力を確定させるGUIによるかな input群のどれかに変化があった時だけ、そのinput 群を入力っぷりを確認すればいいんでしょ？ またクソUIだな
バリデーションについて考えてないから
伝達すべき情報と伝達方法がごちゃごちゃになってる
クソUIカタログが一冊分できそう >>476
「1秒おきにリトライする」という発想を見ると使ったことないのかもね いずれかの入力欄のchangeイベント発火したら全部の入力欄チェックすればいいじゃない >>468ですが、大事なことなので本日中に回答をお願いします
明日が課題の提出期限なんです >>488
自由筆記なら『わかりません』て答えとけ
それも立派な解答だ >>491
OK｡
とりあえず牛田に頼んどいた｡
そのうち解答つくから､もう少し待ってくれ｡ >>468
要件として書いてないけど、合計てのは手入力じゃダメなのかい >>468です
addeventlistnerで全部のinputtextにchangeイベントをつけると無事に動きました
ありがとうございました load()を使って他のページの一部を取り込みたいです。
しかし取り込み先がhtmlファイルであればできています。
しかしそのページはphpで出力されていて、
取り込むことができません。
phpの場合どうしたら良いでしょうか？ $("#place").load("test.html table")をやりたいです。
ググって見ると$.ajaxを使うとありますが、
それってformのデータを拾ってくるようなものばかりでした。
ページ要素を収集してhtmlページを表示させるにはどうしたら良いでしょうか？ async awaitですが
具体例がいまいちわからない
awaitで待ちになるとして
awaitはメソッドの前につけるの？
await;
という一行ではダメな理由がよくわからない >>499
非同期関数の前につけるもの
演算子なので、swaitでは何も待たない async function A (){
await B();
await C();
await D();
alert(E);
}
たとえばこういう関数Aを実行するとB,C,Dは実行されずアラートが先に出るんですが >>501
B,C,DがPromiseを返してないならそうなるな >>502
BCDは、canvasに画像を読み込むなどです >>505
解決に無関係な断片的な情報を開示する無謀さが凄いね
解決のヒントは既にでてるのにガン無視してるからそうなる
調べる気すらないんだろうから、コピペプログラマを目指したらいいと思う >>506
質問されたから無視せずに答えただけですよ >>507
再現可能なコードがないな
>>503-504も無視しなければ解決するぞ >>506
ここは質問スレなのになんなんお前らはエラソーに 質問者を怒らせたところで当人以外は困らない
回答者を怒らせたら回答してもらえない
やっちゃったな これあれやっとくか･･･しょうもない質問したら徹底的に荒らして反省させる作戦････やるべきだろ･･･ アドバイスを完全スルーか
何も考えてないんだろうね
豚に真珠 行き当たりばったりで試して上手くいかず、回答者に投げて思考停止
他のQAサイトでもよく見るよ、こういう人 なんやお前らは！わざわざ苦労して質問しとるのに
どっちが客かよく考えろや！
ほんま無礼なインターネッツやな！
年賀状ひとつよこさんと 「質問者=客」の認識が誤ってることにまだ気がつかないらしい 排他的というか、上からだよね
しょせん内弁慶のシロウトのくせに ファイルで使うのか
リンクでつかうのか
どっちがええの？ >>545
リンクで別ファイルにしたほうがバレにくい >>546
よくこの質問で答えられるな…
俺は質問の意味が全くわからんかった >>546
いやたぶんそういう質問じゃないと思うぞ
自サーバにjsファイルを置くか、httpで最新版にリンクするかってことじゃね？ こんばんは質問です
chromeでは正しく動作して、fireFoxではおかしくなる案件があり
調査を進めたところ、firefoxではalertを出すとcanvas描画が狂うということがわかりました
alertをやめると不具合は直りました
chromeではalertの有無でcanvasの差はナシです
さてこれはどういうことなんでしょうか
以上よろしくお願いします >>553
alertを出している間は画面のリドローが止まるから、APIや非同期処理が置いていかれることがある
chromeはそのへんがきちんと対策されているってことだろうね IDの重複やIDに予約語があったりするとfirefoxはすぐバグる。
ところがchromeではなんとか動く >>558
そのIDとやらを定義しているコードに問題がありそう >>554
これは何のフライですか？
エビでんす。 ライバル増えるからほんとは教えたくないけど
パチンコ屋の換金所のゴミ箱を巡回するんだよ
ピーナッツ、チョコレート、ヤクルトが着実にゲットできるよ 初心者の質問ですが
$(function(){
hoge;
});
という$からはじまる関数は何を意図してるんですか？ >>565
$(document).ready(function() { hoge; }); の短縮型
HTMLに書いてあった分のDOMツリーの構築が終わったら実行
jQueryを使わずに書くと
document.addEventListener("DOMContentLoaded", function() { hoge; });
と同じ >>566
詳しくありがとうございます
そもそもjQureyを勘違いしていました $(function(){
処理
});
これで処理を囲むのが、jQuery の定番。
DOM 構築完了のタイミング このJqueryのルーチンは、ふつうの関数の中に入れてしまうこともできるの？ 配列１から配列２で指定した要素を削除するのはどうやればいいんですか？
標準関数は用意されてないんですか？
array1 = [1,2,3,4,5,6,7,8,9];
array2 = [2,3,7];
array1が[1,4,5,6,8,9]ってなればＯＫです >>570
array1.filter(v => !array2.includes(v)) >>569
入れていい
DOMContentLoadedで出来ることをjQuery関数を使ってやりたい場面が俺には思いつかないが >>570
Ruby には配列同士の差があるけど、JavaScript には無いのか？
ary_1 = [ 1, 2, 3, 4 ];
ary_2 = [ 2, 3 ];
p ary = ary_1 - ary_2
#=> [1, 4] jsでクロスドメインのスクレイピングってできますか？
以前はxdomain-ajaxのようなものがあったのですが亡くなりましたね
fetchなどではできるようになったのでしょうか？ <div id="maru" style="position:absolute;font-size:100pt">○</div>
var maru_elm = document.getElementById("maru");
maru_elm.animate(
{left:["0px","1000px"]},
{
iterations:Infinity,
fill:"forwards",
duration:3000
}
);
これで○が0pxから1000pxまで移動しますが500pxのところで5秒間停止してから
1000pxまで移動するようにするにはどうやればできますか？
animateじゃ無理なんでしょうか？ >>576
こんな感じ？
$(function() {
$('#maru')
.animate({
left: '500px'
}, 1000).delay(5000)
.animate({
left: '1000px'
}, 1000);
}); 配列の質問です
var array = [
{id:"a"},
{id:"o"}
{id:"b"},
{id:"a"},
{id:"b"},
{id:"x"}
];
という配列からidが重複している要素のindexを調べたいのですがどうすればよいのでしょうか？
この配列であれば0,2,3,4と返って来るようにしたいです >>579
{ a: [0, 3], b: [2, 4], o: [1], x: [5] }の形に変換して値の配列の長さでfilterする
var dict = array.reduce((acc, curr, i)=> {
acc[curr.id] ? acc[curr.id].push(i) : acc[curr.id] = [i];
return acc;
}, {});
Object.values(dict).filter(x => x.length >= 2); //0,3,2,4 これは、かなりのパズルチックな問題。Ruby で作ってみた
# 値だけを抜き出す
p input_ary = [
{id: "a"},
{id: "o"},
{id: "b"},
{id: "a"},
{id: "b"},
{id: "x"}
].map{ |hash| hash[:id] } #=> ["a", "o", "b", "a", "b", "x"]
# 重複した値だけを抜き出す。グループ化してから、そのキーだけを取得する
p duplicate_values = input_ary.group_by( &:itself ).select {
|key, val| val.length >= 2 }.keys
#=> {"a"=>["a", "a"], "b"=>["b", "b"]}
#=> ["a", "b"]
# 各要素が、重複した値の配列に含まれているものだけを抜き出す。
# その際、インデックスだけを抜き出す
p results = input_ary.each_with_index.select {
|elem, idx| duplicate_values.include? elem }.map( &:last )
#=> [ ["a", 0], ["b", 2], ["a", 3], ["b", 4] ]
#=> [0, 2, 3, 4] const counter = {}
array.forEach(v => v.id in counter ? counter[v.id]++ : counter[v.id]=1)
Array.from(array.keys()).filter(i => counter[array[i].id] > 1)
値毎に出現回数を記録して、重複してたらインデックスを返す。 const over = {}
array.forEach(v => over[v.id] = v.id in over)
Array.from(array.keys()).filter(i => over[array[i].id])
値毎に重複かどうかを記録して、重複してたらインデックスを返す。 ありがとうございます
レベル高すぎて素直に尊敬します 普通の問題は、重複している要素を答えるから、
["a", "b"] で良い
この問題がひねっている所は、そのインデックスを求める所
だから、["a", "b"] を求めてから、
そのa, b が存在するインデックスを求めないといけない
こういうコードゴルフは、プログラミング板にある、
プログラミングのお題スレでも参考にしてみれば？ 配列を連想配列に変形するのはどの言語でも頻出の一般的なパターン
コードゴルフじゃない 579
[...new Set(array.map(function (o, i) {try {this[o.id].push(i);} catch {this[o.id] = [i];} return this[o.id];}, Object.create(null)).filter(eyes => 1 < eyes.length).flat())].sort(); array.map(v=>v.id)
.map(((v,i,a)=>(this[v]??=a.includes(v,i+1))?i:-1).bind(Object.create(null)))
.filter(v=>~v) jquery最強伝説。
フレームワークなどいらない。 >>579
関数型言語のElixir で、分かりやすいように、各処理を分けて作ってみた。
本当は、各処理をパイプでつなげていくもの
input_kw_list = [ id: "a", id: "o", id: "b", id: "a", id: "b", id: "x" ]
input_list = Keyword.values( input_kw_list ) # 値だけを抜き出す
IO.inspect input_list
#=> ["a", "o", "b", "a", "b", "x"]
grouped_map = Enum.frequencies( input_list ) # 出現回数でグループ化する
IO.inspect grouped_map
#=> %{"a" => 2, "b" => 2, "o" => 1, "x" => 1}
# 重複したものだけを抜き出す
duplicate_list = Enum.filter( grouped_map, fn { _key, val } -> val >= 2 end )
IO.inspect duplicate_list #=> [{"a", 2}, {"b", 2}]
# 重複した値だけを抜き出す
duplicate_values = Enum.map( duplicate_list, fn { key, _val } -> key end)
IO.inspect duplicate_values #=> ["a", "b"]
# 各要素が、重複した値のリストに含まれているものだけを抜き出す
results_kw_list = Enum.with_index( input_list )
|> Enum.filter( fn { elem, _idx } -> Enum.member?( duplicate_values, elem ) end )
IO.inspect results_kw_list
#=> [{"a", 0}, {"b", 2}, {"a", 3}, {"b", 4}]
results = Keyword.values( results_kw_list ) # インデックスだけを抜き出す
IO.inspect results #=> [0, 2, 3, 4] >>595
使うこともある
jQuery使う機会激減したけど >>596
thisの挙動が分かりにくいですよね。 >>597
jQuery特有であまり好きじゃない
https://api.jquery.com/ を見れば大体わかるが thisは
日本語に例えるなら「それ」ってのと同じようなイメージだわ
「新製品」が発売されました。
「それ」は画期的で、価格は10000円です。 >>597
> thisの挙動が分かりにくいですよね。
それはJavaScriptとDOM APIの問題
jQuery特有のthisの挙動はない
jQueryは所詮DOM APIを簡潔に書けるようにしたライブラリにすぎないので
おまえがJavaScriptを理解できてないから、jQueryもわからないと言うだけ JavaScriptに深入りしないなら
thisについてはここに書いてあることだけ覚えておけばいいよ
https://javascript.info/object-methods JavaScript のthis は難しい
ネストすると、window を指してしまうとか、
アロー関数のthis は異なるとか、
だから、that = this で代入して使うとか、
bind( this ) で、thisを束縛する
jQuery のthisは簡単。
$( this ) で、繰り返しの各要素を指す ネスト・callback 内だと、外側と文脈が異なるから、this がwindow を指してしまうとか
だから、that = this で代入して使うとか、
bind( this ) で、thisを束縛して使う JavaScript では第一級(市民)関数だから、
常に関数の主体(インスタンス)を考えないといけない。
これが難しい
callback 関数は、どの主体が呼び出しているのかとか。
ブラウザが呼び出しているから、主体はwindow になるとか
Ruby は第一級関数じゃないから一々、関数の主体を考えなくてよい。
関数を持ち運びたい時には、method object に変換すればよい だから、JavaScript では、
that = this とか、bind( this ) みたいなものをよく見る。
これが可読性が低くて難解
Ruby では、bind は埋め込みRuby・ERB か、UnboundMethod ぐらいでしか見ない
UnboundMethod は、レシーバを持たないメソッドを表すクラスです。
呼び出すためには、レシーバにバインドする必要があります あそこの this とここの this は違うの当然って感じ？
面白がりながら使ってた
しょっちゅう間違えてるけど > that = this とか、bind( this ) みたいなものをよく見る。
jQuery使いなよ
そんなもの全然見かけないよ ベース画像Aとその子孫的画像Bがある時
Aをanimateで移動させるとBも一緒に移動するが
widthとかサイズ変化させると
Aの縮小拡大率に応じたサイズ変更をして欲しいんだが自作するしかないんか? CSSやWeb Animation APIでtransfrom: scale();じゃだめなの？ jQuery UI Layout Plug-in を使って例えば↓のサンプルで
http://layout.jquery-dev.com/demos/example.html
各ペインのOPEN/CLOSEボタンをクリックしたときにJavascriptを実行するには
どう記述すればいいですか？
宜しくお願い致します。 素のjavascript（jqueryやライブラリとかは使わない）を使ってwebサイトを作って売るのは
javascriptという言語を作った人に許可をとらないとだめですか？ htmlもcssもphpもmysqlも全部許可いらんで（たぶん） フレームワークのシェア率は驚異的に低いな。
jQueryは78%ももあるのに www jQuery信者はネガティブキャンペーンに忙しいようだな >>622
なるほど。
そのグラフを見る限りjQueryはもうだめかもわからんね。 >>624
確かに。Angularなんかわずか10年で4倍ものシェアを広げてるからね。
jQueryはこのまま行くといずれは…。 >>622
↓が上昇傾向なのが気になった
Polyfill.io
Lodash
React
Vue.js
jQuery、Bootstrap、Angularは頭打ちか jQueryと相性のいいフレームワークはありますでしょうか？ jQueryはDOM APIを改善したライブラリなので
DOM APIをそのまま使うフレームワークはjQueryとも相性が良いと言える
でも最近のフレームワークってDOM APIを隠蔽しちゃうのよ
なんでブラウザの標準機能をそのまま使おうと思わないのかね >>632
つらい。
わざわざ人気のある技術を切り捨てるようなことはしないで欲しい。 >>633
棲み分けができればいいんじゃないの
何でもjQuery使う必要はない
jQuery不要派も一定数いるし jQueryに特化したフレームワークが開発されますように。 >>632
jQueryというよりDOM APIだね
ブラウザのネイティブな機能を使うと
フレームワークが使えないなんて
クソフレームワークだね 現場でdetach(デタッチ)を使ってる人いますか？
使ってたらどんな時に使います？ setInterval(function(){
if ( (linkno >= 0) && (linkno < link.length)){
window.open(link[linkno].getAttribute("href"));
}
linkno++;
}, 20000+Math.random()*2000);
})();
上記はJavascriptのコードの一部です。
20秒＋αでリンクリストのURLを開いていくことまではできましたが、
これに、開いたタブを一定時間経過後に自動的に閉じるようにしたいと考えています。
window.open(link[linkno].getAttribute("href")).close();
でできるかと思いましたが動きませんでした。
どうすれば、いいのでしょう。。 とりあえずsetTimeoutでcloseすれば？
ただスクレイピング系ならpuppeteerとかselenium使ったほうが
ページ内のJavaScriptより出来ることが多いのでいいと思うよ そりゃさらに別のタブ開いて即閉じたら動いてないように見えるわな
タブ開いた時のwindow.openの戻り値保存しとかなきゃ setTimeout(window.close(), 1000);
をwindow.openの直後に入れるということでしょうか？
「タブ開いた時のwindow.openの戻り値保存」
は何のことやらさっぱりです。。 const tab = window.open(url);
setTimeout(() => tab.close(), 1000); 開発現場でdetach(デタッチ)メソッド使ってる人いますか？
何がいいのかよくわからなくて detach は、かなりのプロが読んでも、理解できないほど難しい detachはDOMツリーから外すだけ
removeはjQuery特有の内部データやイベントリスナも消す ありがとうございます。
検索処理にdetach()使えそうですかね？ javascriptでメールってどうやって送れるの？
いや、どう送れば宜しいでしょうか？
jQueryは使ってません。 >>651
スレ違い
もうjQuery関係ないじゃん
SMTPサーバ立てるところから始めたら、適切なスレに行けよ JavaScriptでコードを書いている皆さんはPHPも使われてますか？
今の時代はNodo.jsの方が使い勝手がいいのでしょうか？ おまさんがSMTPサーバとか明後日のレスするからやろw >>651さん
いや、このハゲ！
Javascriptで送れるわけないだろ SMTPクライアントの実装方法について聞いてるのにいきなりSMTPサーバー立てろはないわな
ブラウザ上のJavaScriptが直接扱えるのはHTTPだけで
SMTPサーバーとは直接会話できないからローカルでもリモートでもブラウザとは別の仲介者が必須
不特定多数の人間に公開するWebサイトにメール送信機能を用意したいなら
SMTPクライアントになるサーバー機能を用意するかmailtoで済ませるか むかし Perl でメールを書いた記憶がうっすら髪の毛 言語の制約じゃなくてホスト環境の制約だからね
Node.jsで実行するJavaScriptならもちろんクライアント側でもメール送信できるよ 色々なサイトで見られる以下の画像のような3Dが浮いて少しずつ形が変わっていく
アニメーションを実装するには具体的にはどうしたらよいのでしょうか？
imgur.com/klr4VWB アプリならショートカットキー好きにできるのにブラウザだとダブるからクソ面倒くさいな TemperMonkeyでスクリプトを書いてるんですが分からないことがあったので質問させてください。
動画サイトTverの検索後に表示される検索結果を自動取得するスクリプトを書いています。
ワード入力→Enterで新規検索した場合は
document.querySelector('form').addEventListener("submit", getSearchResults)
で問題ないのですが、検索フォームをクリックして表示される履歴リストからクリックして検索した場合には取得できません。
履歴リストが表示されたら各履歴表示行にEventListenerを設定するようにしてみましたがそれも動作しません。
何かいい方法はないでしょうか？
const replaceSearchList = () => {
setTimeout ( () => {
searchList.forEach(e => e.addEventListener("click", getSearchResults) );
}, 100)
return false;
};
document.querySelector('form').addEventListener("click", replaceSearchList) >>668ですがすみません、自己解決しました。
書き込みが長くならないように関数宣言は書き換えて投稿していたのですがsearchListがそのままになっていて気づきました。
const searchList = () => document.querySelectorAll('[class^=search-droplist_row]');
とすべきところを途中の () => が抜けていただけでした。[...searchList()].forEach()として動作しました。 jQuery関係ない質問ばかりですが、質問者がここに質問する意図は何ですか？ スレタイがJavaScript & jQueryになっているからではないでしょうか
同板にjQuery質問スレッド7が存在していますが、なぜこちらをjQuery専用スレッドと勘違いされているのでしょうか >>672
>>1を読めば、ここがjQuery専用スレであることがわかるのではないでしょうか。
質問前にテンプレを読むのは基本かと思います。 自分の失敗を認められなくて、スレタイに責任転嫁し始めたか JSもjQueryももうオワコン。
初心者はRubyから始めること。
こっちのスレで質問すれば親切な達人プログラマーがどんな質問にも懇切丁寧に答えてくれる。
↓
Ruby 初心者スレッド Part 67
https://mevius.5ch.net/test/read.cgi/tech/1608837867/ >>676
JSはオワコンのわけないだろ
クライアントサイドスクリプト使わないサイトは今ほとんどない スレタイだけ読んで>>1を読まない愚かさを修正すべきだろ >>1読んだけど、要点が最初に書いてなくてくどいから駄目だわこりゃ
最初の5行は削除して↓ここを1行目にしろ
>このスレはjQueryそのものの使い方やjQuery UIの使い方やjQueryプラグインの作り方を質問するスレです。
>jQueryとは関係のないJavaScriptの質問は「JavaScriptの質問用スレッド」へどうぞ
>>980
スレタイの修正とテンプレの修正よろ >>980が
>>680のレスを読むのがなんねんごに プログラミングをする際に、コールバック関数を上手く使いこなすのが難しい。 >>680
そもそも、このスレはJavaScriptスレをjQuery信者が乗っ取ろうと画策して立てた重複スレ
本格的に直したいなら、本スレに誘導した上で、本スレのテンプレ案を提案すべき
+ jQuery 質問用スレッド vol.7 + [無断転載禁止]©2ch.net
https://mevius.5ch.net/test/read.cgi/hp/1466750494/
ちなみに、Web制作板のJavaScript本スレはjQuery信者が荒らして機能しなくなり、次スレが長らく立ってない
今は重複スレを消化しているのみで本スレではないし、誰も管理してない 実はJavaScriptスレ(重複スレ)にjQuery信者は今でもいる
https://mevius.5ch.net/test/read.cgi/hp/1439005423/271
彼は布教のためにJavaScriptスレにいると豪語していて、何度言ってもjQueryスレに移動しなかった
JavaScriptスレの住人を別スレに移動させようともしていた >>686
割りと前からRubyもjQueryも布教してる人がJSスレにいるよね すれ違いって言われて誘導されてきました。
https://www.ufret.jp/song.php?data=94157
このサイトで右クリックとドラッグしたいのですがどうしたらいいですか？ >>688
1mmもjQueryに関係ないからスレチ
ここはjQueryに関係のないJavaScriptの質問はスレチ
ちなみにその質問はJavaScriptじゃなくても
ブラウザの機能で簡単に解決できるからそっち系で聞けば？ まあ、jQueryだとしても↓が本スレなんだけとな
+ jQuery 質問用スレッド vol.7 + [無断転載禁止]©2ch.net
https://mevius.5ch.net/test/read.cgi/hp/1466750494/ 本スレッドはJavaScriptスレをjQuery信者が乗っ取ろうと画策して立てたスレです。
下記を参考に適切なスレで質問しましょう。
■JavaScriptスレ
+ JavaScript の質問用スレッド vol.126 + (Web制作板の重複スレ、本スレなし)
https://mevius.5ch.net/test/read.cgi/hp/1439005423/
JavaScript の質問用スレッド vol.125 (プログラム板の避難所)
https://mevius.5ch.net/test/read.cgi/tech/1659855460/
■Google Chrome 拡張機能
Google Chrome 拡張機能 26
https://egg.5ch.net/test/read.cgi/software/1659768310/
■ライブラリスレ
JavaScript ライブラリ総合質問所 vol.5
https://mevius.5ch.net/test/read.cgi/hp/1465399470/
jQuery 質問用スレッド vol.7
https://mevius.5ch.net/test/read.cgi/hp/1466750494/ グレイのジャケットに 見覚えがあるコーヒーのしみ
相変らずなのね ショーウィンドウに二人映れば >>691
過去ログ見るとこのスレはjQuery本スレが立った5ヶ月後になぜかJSをスレタイに含めて重複させて立てられてるんだな
乱立させてそこに居座ってJSはスレチ！って何年も言い続けてたとかマジでおかしいわ $(document) って省略できますか？
PCの横スクロールを実装してて
こんな感じです 例えば、以下のコードで、
$( document ).ready ( function( ) {
を単に、
$( function ( ) {
と書ける
$( document ).ready ( function( ) {
$( 'body' ).keydown ( function( e ) {
switch( e.key ) {
// 32:空白、37:←、38:↑、39:→、40:↓
case " " :
case "ArrowLeft" :
case "ArrowRight" :
case "ArrowUp" :
case "ArrowDown" : console.log( e.key );
}
} )
} ); ChatGPTにコード書いてもらった。
長年やりたかった事ができた。 ChatGPTにコード書いてもらった。
長年やりたかった事ができた。 alertのテキストをコピペする方法とかってご存知ありませんか？
どなたか知恵を犯しください alertのテキストをコピペする方法とかってご存知ありませんか？
どなたか知恵を犯しください alertのテキストをコピペする方法とかってご存知ありませんか？
どなたか知恵をお貸しください TwitterMediaDownloaderの代替みたいなのを試作してて
相談とか情報交換がしたいのだけど、この板でいいのだろうか 
