jQuery 質問スレッド vol.7 [無断転載禁止]©2ch.net
■ このスレッドは過去ログ倉庫に格納されています
JavaScriptでDOM用ライブラリであるjQueryのスレです。
このスレはjQueryやjQuery UIの使い方やjQueryプラグインの作り方を質問するスレです。
jQueryを使って作る側のスレであって、こんなプラグインありませんか？と聞くスレではありません。
そういうのは自分で探してください。
ろくにサポートもされてなさそうな野良プラグインの使用はおすすめしません。
JavaScriptの質問は関連スレで質問して下さい。
■前スレ
+ JavaScript & jQuery 質問用スレッド vol.6 +
http://echo.2ch.net/test/read.cgi/hp/1465566635/
■関連スレ
+ JavaScript の質問用スレッド vol.122 +
http://echo.2ch.net/test/read.cgi/tech/1472426483/
+ JavaScript(ECMAScript)質問用スレッド vol.122 +
http://echo.2ch.net/test/read.cgi/tech/1472401404/
+ JavaScript の質問用スレッド vol.131 +
http://echo.2ch.net/test/read.cgi/hp/1478053599/
JavaScript ライブラリ総合質問所 vol.5 [無断転載禁止]©2ch.net
http://echo.2ch.net/test/read.cgi/hp/1465399470/
+ JavaScript & jQuery 質問用スレッド vol.6 +
http://echo.2ch.net/test/read.cgi/hp/1465566635/ 逆
thisでいいからcurrentTargetがいらない
っていかDOMセンスないよな。
なんでよく使うものに、長い単語を割り当てるんだろうw DOM3 当時は listener オブジェクトがあるから this === event.currentTarget にしなかったのだと思う
document.addEventListener('click', {n: 1, handleEvent: function (event) { console.log(this, event.currentTarget); }}, false); thisは便利だし必要不可欠だぞ
thisをディスる奴は許さん forEachもそうなんだが、コールバック関数においてthis値は「異なるスコープから値を送り込む手段」の一つだからな
thisが予約されているとその手段が使えなくなる getelementBy〜
getelementsBy〜
考えたやつ死ね リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice) | Dustin Boswell, Trevor Foucher, 須藤 功平, 角 征典 |本 | 通販 | Amazon
https://www.amazon.co.jp/dp/4873115655
ショートコーディングにしか目が向いていない人にこそ読んでほしい本 >>140
リーダブルとは関係ない話
長い名前をつければ読みやすいってわけじゃないんだから。
逆に冗長な名前は読みにくい。 >>124
それでも原則として禁止だよ
どうしても必要なときはしょうがないけど >>142
そうすると、prototype拡張するPolyfillは利用禁止
下記コードも禁止扱いとなるが、それらのコードは使わないで運用するという事かな？
function Hoge (a, b) { this.a = a, this.b = b; }
Hoge.prototype.sum = function sum () { return this.a + this.b; };
console.log(new Hoge(1, 2).sum()); // 3
prototype系全般が利用禁止なのは不便で仕方ないと思うのだが、クロージャを使って似たような事をやっていくつもりなのか… 頼むから個々のローカル・ルールを議論しないでくれよ ○○禁止みたいなルールは、バカ向けのルールであって
どういう場合にでも当てはまることはほとんどないよ。
長い名前が必ずしも読みやすいとは限らないし、
短い名前が必ずしも読みやすいわけでもない。
状況によって変わるもの
バカはその状況の判断ができない。
だから何も考えなくて済む単純なルールを作る、欲しがる。
バカだから何も考えない。考えたくなーい（笑）
単純なルールを言う奴は無視しましょう Kotlin では、すべてのオブジェクトが使える、スコープを変える関数が、4つある
apply, let, run, with
with(obj){
ここでは、thisが、objに変わる
} >>143
バッチリ禁止やね
Javascript出来ます！ って胸張ってる人に合わせるということは
つまりそういうことなんよ。 ルールはアホを縛るためにあるんでね アホを縛ったとしてもアホが賢くなるわけじゃない。
アホがいる限り、アホのレベルに落ちる。 まあぶっちゃけ普通のサイト作成で自作コンストラクタを使う機会なんて滅多にないし、this禁止でもなんとかやって行けるか >>147
学習させようという気はなくて全員をアホのレベルまで落とす方向なのね
小規模コードならそれでもいいだろうけど、車輪の再発明を繰り返しそう >>152
逆だよ
大規模コードになると人数が増えるし
人数が増えればどうしたってアホが混じってくるんだよ
そんなときアホ共に車輪を再開発させないための縛りだ 内輪で「これ、あれ、そこ」と同じ
理解できると速いんだけどね そしていつの日か、その会社では何語とも呼べない奇怪なやりとりが飛び交うようになっていたのである jQueryを使ったJavaScriptのプログラムを使おうと思ったら、
Chrome系で使えない状態です。Parallaxのプログラムです。
そのプログラムは3年前に書かれたようなんですが、
作者に問い合わせたら当時は動いていたそうです。
EdgeやFirefoxでは問題なく動いています。
3年前と今ではChromium系ではJavaScriptが大きく変わったのでしょうか？
どんなところを修正すれば、治せそうでしょうか？ >>156
どんなところが動かないかlogを吐かせて
調べて見たら治ると思いますよ >>156
jQuery本体、最新版を読み込んでるなら当時のものを読み込むようにする
大きいところではlive()が無くなってたりする
>>157の通り、コンソール見れば
Uncaught TypeError: $(...).aaa is not a function
こんな感じでエラーが返ってるはず Chromeの開発者ツールを起動して、デバッグすればいい EdgeやFirefoxでは問題なく動いてるっていうのならjQueryの問題じゃないだろう。
EdgeであるならChromeとそう変わらないんだからjQueryの範囲で
ブラウザ依存の問題が発生することはまずないだろう。
だからjQueryとは直接関係ない部分に問題があるとみて間違いない キャッシュでも効いてるんじゃないか
それか拡張機能と何か干渉してるか 教えてください。
要素のIDを取得する場合は、
var idname = $(this).attr("id");
でできるのですが、$(this)の背景色を取得する場合はどうしたらよいのでしょうか。
idをbackgroundcolorやcolorに変更してもできませんでした。 >>162
// スタイルシートから
$(this).css('background-color');
// 要素から
$(this).style('background-color'); >>162
寝ぼけて間違っていたわｗ
$(this).css('background-color');
これでいける ハイフンが足りなかったのですね、、、
どうもありがとうございました！ 皆さんありがとうございます。
>>157
jQuery1.11.1.jsだとr.handleというところが引っかかるようですね。
CallStackの所にこれが表示されます。
jQueryのバージョンを変えるとこれは出なくなりますが動きません。
>>158
元のソースではhttps://code.jquery.com/jquery-latest.min.jsで取り込んでました。
今開くとver.1.11.1のようです。
1.0から順に1.12.4まで入れ替えてみましたが反応しません。
>>161
検証用にGoogle Chrome Canaryをダウンロードしてみました。
拡張機能も空にしてあります。
>>160
シンプルにこれ一つのスクリプトしか使ってないので、
コンフリクトが起きているわけではないようです。
CSSも弄ってみたのですが変化がありません。 >>166
> jQuery1.11.1.jsだとr.handleというところが引っかかるようですね。
> CallStackの所にこれが表示されます。
そのポイントを精査して何が不整合の原因かを調査しないと進まないよ ブラウザの開発者ツールを起動して、1行ずつデバッグする。
エラーメッセージを取得して、それで検索する
動きませんと書いても、エラーメッセージが無いと、他人にはわからない ChromeでMacだと問題なくて、
Winだとエラーも出さず無反応の場合、
何が考えられますか？ 一番めんどくさいパターンだなｗ
コンソールで追いかけるしか無いと思う
開発ツールのsourceを開いて{}をクリック
適当にブレークポイントをかましていこう HTTPでのデータアップロードの進捗状況 35 MB/100 MB (800 kB/s)的なものを
表示するのをjQueryで出来たりしないかななんて思ってるですが、そもそも
ソリューションとしてjQueryを選ぶのはあってますでしょうか？ >>172
方向性はあってるのですね
そこを参考に頑張ってみます
レスありがとうございました すみません、教えていただけないでしょうか。
「all_offというチェックボックスを押すと、name=jikan-checkに当てはまるチェックボックス（以下チェックボックス群）を全てチェックオフとする」ようなコードを作成しました。
そこまでは正常に動いたのですが、チェックボックス群がチェックON→OFFになったことの検知ができません。
「('#select-form input[name=jikan-check]').on('change'〜」が該当の箇所なのですが、どこか誤りがあるのでしょうか。
console.logも入れて試したのですが、changeに入った形跡がありませんでした。
jQuery(function() {
jQuery('#select-form input[name=jikan-check]').on('change',
function(e, param) {
省略
}
).change();
}); 続けてチェックボックス群になります。
【html部分】
<form id="select-form">
時間：
<label>
<input type="checkbox" name="jikan-check" value="J60" checked="checked" />
60H
</label>
<label>
<input type="checkbox" name="jikan-check" value="J80" checked="checked" />
80H
</label>
</form>
<div class="allCheck">
<label><input type="checkbox" id="all_off" /> Check 外す</label>
</div> Check 外す
はボタンだろう。これがチェックボックスはわかりづらい
チェックボックスでいくなら
jQuery('#select-form input[name=jikan-check]').on('change',
//ここにifをかます。input[name=jikan-check]にチェックがついてない時
if( ){
//後は処理
function(e, param) {
省略
} jQuery('#select-form input[name="jikan-check"]').on('change', function(e, param) {
console.log($(this).prop('checked'));
}).change();
意味がよく解らないけど、こういうことかな？ >>174
> 「all_offというチェックボックスを押すと、name=jikan-checkに当てはまるチェックボックス（以下チェックボックス群）を全てチェックオフとする」ようなコードを作成しました。
そのコードがない <input type="checkbox" id="all_off" />
これはbuttonにするべきだね、意味が無いよ all_off と言いつつ all_on でもある 以下のように、離れた場所にscriptを書いた時
実行される順番は保証されていますか？
何かの原因で
console.log(2);
console.log(1);
となることはないでしょうか（IE9以前などの古いブラウザは考えなくても良いです）
<script>
$(function(){
console.log(1);
});
</script>
<script>
$(function(){
console.log(2);
});
</script> >>181
jQuery3以降だと$(function())は
何らかのエラーが有るとスルーするよ >>182
おー、なるほど。ありがとうございます！ var result;
$.ajax({
type: 'GET',
async: false
}).then(function(html){
result = $(html).find('span')).text()
});
console.log(result);
こういう同期もjQuery3以降だとできない あれ同期できなくなったの？
たまに使うんだけど・・・ https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest
https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests
ここらへん読めばわかるけど、そもそもAjax通信の同期処理は推奨されない。
非同期に比べてパフォーマンス悪いし、制限や注意点満載。
将来主流になるとみられるFetch APIも非同期しかできないはず。 👀
Rock54: Caution(BBR-MD5:0be15ced7fbdb9fdb4d0ce1929c1b82f) というか、JavaScript自体が非同期なんだよ 初心者です。もしわかる方いたら教えてください。
下記URLで紹介されているプラグインを使用し、入力フォームにて
日本語入力を行うとふりがな、ローマ字に自動変換できるようにしています。
https://github.com/heeesa/autocomplete_romaji_hiragana
Chrome、IE（※）、EDGEでは問題なく動くのですが
fixefoxだけ日本語を入力しても何も起こりませんでした。
どうにかしてfixefoxでも動くようにできないものでしょうか。
よろしくお願いいたします。
※最初IE11で動かなかったのですが、UA判定の部分を少し書き換えたら直りました。 >>189
そういうのは作者に直接問い合わせるべきなのでは？
ここは修正代行サービスではありませんよ
軽くソースを見る限りではUA Detection的なコードがあるのでそれを何とかしないといけない感じですね
https://github.com/heeesa/autocomplete_romaji_hiragana/blob/master/autocomplete_romaji_hiragana.js#L6
e.which のコードが実装依存なので e.keyCode にすれば動くかもしれません
https://github.com/heeesa/autocomplete_romaji_hiragana/blob/master/autocomplete_romaji_hiragana.js#L24
この手のブラウザの実装差異はjQueryが内部的に吸収してくれるので標準APIだけを使っていればいいはずですが、作者はそれを知らないようです
コードがとても古臭い書き方なので一から作り直した方がいい印象ですね >>189
else if (currentBrowser == "firefox" || currentBrowser == "gecko"){
// ここが空
}
Firefoxには未対応だろ？
自分で空の部分を作るしかない >>189
それ使ったらだめレベルだな。
autocompleteという名前からして間違ってる。
俺のやる気が出たら書いてやるよ IMEで確定前の文字入力は何を入れても229が押されたことになるのか
この手のインターフェースはたまーにみるけどbackspaceとか押したときとか
まともに動いたためしがない。ちょっとやってみてその理由がわかったわｗ
どうやってひらがな取るのがいいんだろうな（もはや元のコードは参考にしてない） FirefoxはIMFでEventを拾わないから駄目だろ この手のやつって入力訂正とかしたら
めちゃくちゃになるんだよな
で閃いた。
漢字からひらがな（ローマ字）に変換するのはどうだろうか？
もちろん漢字の読み方は複数ある。それはタイプした文字から確率的に選択する。
例えば「東」からひらがなに変換する時「あずま」と「ひがし」があるが
漢字を入力するときに、タイプされた文字が、AZUMA に近いか HIGASHI に
近いかで判断する。誤入力があったとしても、どの文字が入力されたかで判断すれば
それなりの精度で正しくひらがなに変換できると思う
ちなみにこれを実現するには、サーバー側の対応と名前辞書が必要になるので簡単にはできないよｗ と思ったけど、名字だけで30万種類、多いっちゃ多いけど
圧縮すれば名前辞書サイズは200KBぐらいになるかもしれない。
サーバー側がなくても不可能ではないかもね。
いや、そもそも、漢字→読み方 のデータさえあればいいのだから
ウェブサーバーに単なるファイルを置くだけで十分か ごめん、名前の漢字（？）ごとに分けたファイルという意味
本当に漢字ごとだとファイル数多くなるからある程度工夫した方がいいと思うけど 形態素解析使えばいい。igoとかyahooAPIで十分だろう
変換前の取得はやめたほうがいい。あれは死ぬ
googleはすげー精度＋速度でサジェスト出してくれるけどあれは神業だわ >>202
形態素解析は知ってるけどあえて言わなかったんだよ。
名前辞書っていうのはそういうこと。
用途を限定することで実用レベルになるように考えてる httpsのサイトからhttpのサイトにjqueryでajaxしてデータ取得出来るの？
セキュリティのエラーで失敗する？ >>205
でも例えばhttpsのページに<img src=http:// ．．．
が有るとエラーするやん？
Ajaxならエラーせずにimgをget出来ちゃうの？ iframe（同じドメイン）の中身を取得したいんだけど
その中身がHTMLじゃなくてテキストの時
どうやって取得すればいいかわからない
ただのテキスト、bodyもなにもないときは
jqueryは無力なのか？ 無力っていうかDOM用ライブラリでテキストファイルを扱うってのがおかしいでしょ
jQueryでCSVファイルの解析もできないけど、jQueryは無力か？なんて言わないでしょｗ ウィンドウサイズで読み込む外部JavaScriptを変えたくて下記にしてみました。
jQuery(document).ready(function($) {
if (window.matchMedia( '(min-width: 480px)' ).matches) {$.ajax({url: 'javascript.js',dataType: 'script',cache: false});};
else {$.ajax({url: 'abcscript.js',dataType: 'script',cache: false});};});
これだとFirefoxでは反応してくれるんですが、
Chromeとedgeだと画面サイズ関係なく機能してくれません。
どのブラウザでも動く他の方法はありませんか？ 失礼しました。
Webサーバー上だと機能するようです。
ローカルだとFirefoxだけ反応してくれます。 中身見てないけどそのままはっつけたらelseでシンタックスエラー出たよ >>212
ajaxはhttp通信可能な環境が必要
ローカルテストするならHTTPサーバをたてる必要がある >>212
ところで、js読み込んだ後にリサイズした場合はどうすんの？
リサイズするたびに読み込むってのもアレだし設計見直した方がよさそうな気がするけど みなさんありがとうございます。
>>215
Firefoxはローカル環境でできるのが特別なんですね。
>>216
メインはスマホ対策です。
無駄にソースを読ませたくないのと、
間違っても今まで実行されなかったのがブラウザの違いや、
バージョンアップで動くようになってしまうということを防ぎたいからです。 > ところで、js読み込んだ後にリサイズした場合はどうすんの？
意外とウインドウのリサイズはしないｗ
> メインはスマホ対策です。
ただしスマホはよくリサイズするｗ
（縦横回転するのでね） jqueryとphpがなかなかマスターできない…
コピペで大体は行けるけどソース見たら絶対ダサいんだろうなw
中途半端に使えるもんだから勉強するにもやる気が…。 >>214
間違ってるからなｗ
なんでわざわざ見づらく書くんだろうか
// ちゃんと改行しただけ
jQuery(document).ready(function($) {
if (window.matchMedia( '(min-width: 480px)' ).matches) {
$.ajax({url: 'javascript.js',dataType: 'script',cache: false});
};
else {
$.ajax({url: 'abcscript.js',dataType: 'script',cache: false});
};
});
// まともに修正するとこうなる
jQuery(function($) {
var isMatched = window.matchMedia( '(min-width: 480px)' ).matches;
var url = isMatched ? 'javascript.js' : 'abcscript.js';
$.ajax({url: url, dataType: 'script', cache: false});
}); >>219
まぁ分かる
保守するようになれば何が悪いか分かる
function foo(){}
function foo2(){}
というソースを見ればもう少しちゃんとしようと思うよ
一度以前作ったサイトの手直しをしてみては？
多分数倍の速さで作れる >>221
実務でやってるのにこれだからなw
うん、ポートフォリオサイトも制作中だし振り返りつつ勉強し直すわ… ポートフォリオサイトっていちいち作るものなの？
現在稼働中なのをそのまま見せびらかすんじゃだめなの？ ポートフォリオなんざ、Dribbbleのリンク張るだけで十分だろ こんにちわ、初めまして。
2月からweb系の業務に初めて着きまして、
何から勉強していいのかさっぱりで困っております。
ソースを見るとjqueryが中心で書かれてるようで、
ここから勉強したほうがいいのかなと思っております。
何かよい参考サイトなどご存知でしたらご教授お願いいたします。 >>225
一番いいのは公式サイト
http://api.jquery.com/
https://en.wikipedia.org/wiki/JQuery#Release_history
jQueryの最新バージョンは2016年9月にいリリースされた3.1.1
ややこしい話だが、2016年5月にリリースされた1.12.4と2.2.4の機能は同じ。
サポートブラウザが違うだけ1.12はIE6-8もサポートされている。
リリース日を見ればわかるが、1.9までは一本道で
それから一旦分岐して3.0で合流している。
jQueryの互換性はかなり高いのだが、5年ちょっと前にリリースされた1.7で
推奨されるやり方が変わり1.9で古いやり方が切り捨てられた。
つまり1.7以前のコードは今のやり方とは全く違っていて、見る価値はない。
参考にしても良いのは1.9以上がギリギリ許容できる範囲
何が言いたいかというと「ヌー」とか書いているキモい絵があるクソサイトは
絶対に見てはいけないということだ。
こっちもjQuery 1.9で古いんだがまだマシ
http://js.studio-kingdom.com/jquery/ 1.7ではlive()等、かなり重要な関数が使えなくなったんだよな。あれは本当に困った
古いリファレンスやコード、プラグインでは未だに使ってることもあるので、
jQuery Migrate plugin
ってのを覚えておいたほうがいい。これを入れておくだけで昔のコードが使えるようになる。 あとアップグレードガイドも読んでおくといい
https://jquery.com/upgrade-guide/
https://jquery.com/upgrade-guide/1.9/
https://jquery.com/upgrade-guide/3.0/
日本語の翻訳も探せば見つかると思う。これとか
http://qiita.com/fmy/items/345a264a1cf2e2a73f62
参考サイトを探している段階なら、世の中にある古いやり方や間違ってるやり方に惑わされやすい。
例えば
$(document).ready(function() {・・・});
という書き方は非推奨になった。
これは俺が何年も前からずっと言ってきたことなんだが
$(function() {・・・}) という書き方が公式に推奨されるようになった
https://api.jquery.com/ready/
> As of jQuery 3.0, only the first syntax is recommended;
> the other syntaxes still work but are deprecated.
理由はこっちで詳しく説明してあるな。
https://www.webprofessional.jp/jquery-document-ready-plain-javascript/ >>228
Migrateっていうのは移行という意味。
jQuery Migrate pluginというのは昔のコードを動かすためではなくて、
昔のコードから新しいコードへMigrate（移行）させるためのもの
未だにjQuery Migrate pluginが必要とされるようなものは
捨てるべきだよ。 jQueryはよく使われている分、ネットで初心者共が
クソコードさらしてるので、ちゃんとした本で勉強するのが一番
俺のおすすめはこれ
コアjQuery＋プラグイン/jQuery UI開発実践技法 JQuery in Action 2nd Edition
https://www.amazon.co.jp/dp/4798124281
http://www.shoeisha.co.jp/book/detail/9784798124285
初心者には少し難しいかもしれないがjQueryの基礎を勉強しつつ
この本で正しいやり方になおしていくと良い
ちなみにこの本はタイトルからわかりづらいが、海外で有名な
in Actionシリーズの翻訳本でクオリティーが高いことは保証済み
http://d.hatena.ne.jp/ryoasai/20101029/1288362232
> Manningのin actionシリーズはMEAP（Manning Early Access Program）という
> 事前評価プロセスを通して、クオリティーを十分に高めてから出版されることもあり、
> 比較的あたりはずれが少なく良書が多いと思います。 山田祥寛(よしひろ)、翔泳社
10日でおぼえる jQuery 入門教室 第2版
この本が簡単 10日でおぼえられるわけがないものを
10日でやるとか言ってるものは信用できない。
そういうのは10日だけでやれることしかしない
という意味でしかない これか？ｗ
10日でおぼえるjQuery入門教室 第2版
https://www.amazon.co.jp/dp/B00FZIZOLC/
トップカスタマーレビュー
5つ星のうち 3.0ステマ
投稿者 oper 投稿日 2013/11/13
形式: 大型本
山田さんの書籍は比較的安定していて、この本も悪くはないのですが、星5つのレビューが全員WINGS(山田さんのプロジェクトらしい)の本に星5つつけまくっている点に失望しました。
内容で勝負すればいいのにね。
コメント 50人のお客様がこれが役に立ったと考えています. このレビューは参考になりましたか？ ■ このスレッドは過去ログ倉庫に格納されています
