jQuery 質問スレッド vol.8
レス数が950を超えています。1000を超えると書き込みができなくなります。
JavaScriptでDOM用ライブラリであるjQueryのスレです。
次スレは>>950が>>2のテンプレ案(本スレで改善案があれば考慮)を元に立ててください
このスレはjQueryやjQuery UIの使い方やjQueryプラグインの作り方を質問するスレです。
jQueryを使って作る側のスレであって、こんなプラグインありませんか?と聞くスレではありません。
そういうのは自分で探してください。
ろくにサポートもされてなさそうな野良プラグインの使用はおすすめしません。
JavaScriptの質問は関連スレで質問して下さい。
■前スレ
jQuery 質問スレッド vol.7
https://mevius.5ch.net/test/read.cgi/hp/1478055094/
■関連スレ
JavaScript の質問用スレッド vol.130
https://mevius.5ch.net/test/read.cgi/hp/1501503056/
ECMAScript デス 6
https://mevius.5ch.net/test/read.cgi/tech/1483332914/
JavaScript ライブラリ総合質問所 vol.5
https://echo.5ch.net/test/read.cgi/hp/1465399470/ >>864
むしろ流れ的にどうやったら改行の問題と読んだのかそのプロセスが知りたい
学生のテスト対策のヒントになるかもw いや改行の問題なんて言ってないだろw
改行を入れることで、読みやすくできるという話だよ
変数に入れればいいって言ってるやつだって
メソッド実行のたびに変数にだって入れないだろ?
「わかりやすい単位で変数に入れる」というはずだ。
だからそのわかりやすい単位で改行をいれればいいだけ >>859
ライブラリなどのサンプル見るとほとんどvarにセットしてる >>867
もういいよ、無理すんなって
益々墓穴掘ってる $('#hoge').children('li').eq(計算).children('span').text(なんたら).attr('hage', かんたら);
を変数に入れるってどうするつもりだったんだろうか?
var $li = $('#hoge').children('li')
var $span = $li.eq(計算).children('span')
$span.text(なんたら).attr('hage', かんたら);
こうか?
$('#hoge').children('li')
.eq(計算).children('span')
.text(なんたら).attr('hage', かんたら);
ならこれで良い気がするな。
変数に入れるバージョンから、変数を取り除いただけ
それよりも>>863の方がわかりやすい気がするのは
行の最初に対象とするターゲットが来てるからかな eq: function( i ) {
var len = this.length,
j = +i + ( i < 0 ? len : 0 );
return this.pushStack( j >= 0 && j < len ? [ this[ j ] ] : [] );
これは、jQuery のeq のソースコードだが、
これぐらい少なくても、this.length を2回使わない
同じものなら、変数に入れる。
その方が保守しやすく、最適化しやすく、少し速いかも ここは相変わらず、jQuery君が他人に噛みつき、荒らし回ってるんだな >>875
スレタイのどこに「他人に噛みつき、荒らし回る」と書いてある? >>873
>>826の話とずれてる。
>>826は処理対象を変数に入れるって話
設定値を変数に入れるって話じゃない そもそも>>804 >>820に対して(それを無視して)値を入れ替えてることがズレてる
誤解のもとという忠告もわかる
速度に関してはどっちでも変わらんから好みでやればいいだけ
>>859の変数使う好みに対して改行で解決しようとしてることがずれてる
これも好みでやればいいだけ blurメソッドを呼ぶと、
その要素に実際にフォーカスがあるかどうかに関わらずfocusoutが発生すると気づきました
これおかしくないですか?フォーカスがないんですから。
結果、二度focusoutが発生してしまい、変な嵌まり方をしてしまいました 「blurする前にはfocusする」と覚えていればいいですね? あとキーボード系イベントをtriggerする時も、
条件を手動操作と同じにするためにfocusした方がいいと思います
そうですね? if (!$('セレクタ').children().length) {
$('セレクタ').remove();
}
みたいな処理をもっとスマートに書けないでしょうか?
メソッドチェーンで繋いだ一文で書けたらいいと思うのですが >>888
> if (!$('セレクタ').children().length) {
典型的な手続き型的なコードだねw
通常は「lengthみて要素があるかどうかを確認する」というコードはまるまる省ける。
状況にもよるだろうけど、俺はこれが必要な場合を思いつかない
で、回答だけど、まずCSSを使って、セレクタ:empty { display: none; } じゃいかんの?
わざわざremoveしなくても、画面上見えなくていいのであればコレでいける
ただしセレクタの中にはスペースなども含めて完全に空になってないといけないけど
次に実際に消す方法として、:has疑似クラスを使ったもの
$('セレクタ:not(:has(*))').remove();
:has擬似クラスはCSS4相当のものでブラウザネイティブでは実装されていないが、
jQueryは独自で実装しているので使える。IE11でも動いた。
https://api.jquery.com/has-selector/
こっちは完全に空じゃなくてもいいけど、タグなしで直接テキストが書かれていても
消えてしまう。といってもそれは>>888も同じだから問題ないだろう
あとはjQueryの.not や .has メソッドを使って
これと同じような結果になるコードをかけばできると思うけど
ちょっと面倒そうだな >>889
ありがとうございます
フィルタで絞り込むという発想がなかったので、学びが大きかったです
:hasとか:notとかはじめて使いました
ありがとうございました hasフィルタ/メソッドの対象は子要素ではなく子孫要素なんですね
子要素と書いているサイトが大量にありますが・・
対象を子要素に限りたい場合はどう書くのがいいのでしょうか? >>891
え?
子要素がない時はremoveする
ただし子要素が無くて子孫要素がある場合はremoveしたくない
ってこと?
子供がいないなら孫もいないでしょ? >>892
いえ、それはもう解決したので
別の話としてです >>893
試してみましたが子孫も含まれるようです >>896
すみません
書こうと思って見直していたら、
要素セレクタ部分が深い階層の要素にマッチしていたための勘違いと分かりました
要素セレクタ部分を第一階層にしかマッチしないようにしたら、たしかに子要素だけに限定出来ました!
ありがとうございます
ですが、「>」を最初に置く書き方はどんな意味になるのでしょうか?
jQueryを結構長く使ってきたつもりですが、こういう書き方を今まで見たことがありません > ですが、「>」を最初に置く書き方はどんな意味になるのでしょうか?
CSSの基本だから調べて
:hasはjQueryによって先行してサポートされた疑似セレクタだが
文法自体はjQueryが決めたものじゃないし
基本的なものはCSSのセレクタとまったく同じ CSSの親子関係の>と同じなのですね
>.hoge
は
*>.hoge
つまり
「何らかの要素の子要素の.hoge」
という意味になって、
これをhasと組み合わせることで子要素だけが選択できているのですね
親子セレクタの>は知っていましたが
特定数の階層を示す未知の記法なのかと思って混乱してしまいました
ありがとうございました 高速で安全なjQueryを書くために今できること
http://dresscording.com/blog/jquery_performance.html
$('#myContainer a');
と書くより
$('#myContainer').find('a');
と書く方が速いとあります
2013年の記事ですが、今でもそうした方がいいですか? >>901
やってみなければわからない。
ほらよ「jquery selector vs find https://jsperf.com 」で検索して
探してきてやったぜ。
https://jsperf.com/jquery-children-vs-find/37
Chromeだと、$('#formElem fieldset'); の方が速くて
Edge、IE、Firefox だと $('#formElem').find('fieldset') の方が速いんだな
理想的な結果だ。ブラウザによって違う。そんなの気にしたってしょうがない。
実用上問題ないなら気にすんな
どうでもいいが、EdgeだとChrome 58.0.3029と判定されるのな
Microsoft Edgeのユーザーエージェントがカオスなので注意
https://qiita.com/tonkotsuboy_com/items/7b36bdfc3a9a0970d23b
> Mozilla/5.0 (Windows NT 10.0; Win64; x64; ServiceUI 11)
> AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299 あー、よくみりゃこれjQueryのバージョン低いな jsperf、githubアカウントが必要になったから面倒なんだよな
でもまあ1系でもquerySelectorAll使われてるし結果に大差はないだろ >>902
気にすることでもないのですね
ありがとうございました えー、何今みんなセレクタ使ってるんか?
速度差気にするほどでないのはもっともだが統一性からもメソッド使ってるわ $('#myContainer a');
じゃなくて
$('#myContainer').find('a');
こう書くってことだろ?
でも、 '#myContainer' も 'a' もセレクタなんだよねw
統一性をもたせるならむしろセレクタにしたほうが良い >>908
最初のセレクタは減らしてその後絞った方がいい
で統一ってことだろ
以前から書籍やブログで書かれている でも
Chromeだと、$('#formElem fieldset'); の方が速くて
Edge、IE、Firefox だと $('#formElem').find('fieldset') の方が速いんだな 以前から書籍やブログで書かれているからって
あてにならないですねーw 全部JSで書かれているならセレクタのパースの方が遅くなるはずですが
querySelectorはネイティブコードなので速くなってるのでしょうね >>910
それは 高速化のため? 可読性のため?
場合によるけど、ほとんどの場合セレクタに書いた方が
可読性が高まって良いと思うよ
場合によるけど、時代や環境・実装によって変わる高速化より
可読性を優先した方が良いと思うよ 速度でメソッド使ってるわ
もっとも3になってからは速度面では知らん
可読性ではどっちも変わらん
:has/has()、:first/first()、:eq/eq()など、またチェーンメソッドではどうなんだろ >>915
jQueryは1でも後半のはquerySelectorAllとか使ってる。
そもそも1と2は、1の方が対応している(古い)ブラウザが多いという
違いなので2でやってることは全て実装されていると考えるべき
3は統合版なので言うまでも無くだな 1系はIE6以降対応で、2系はIE6〜8を切り捨てたもの。
(当時の)最新ブラウザには1系も2系も対応していた。
だから2系の方がファイルサイズは小さいが、
対応ブラウザは1系の方が多い状況だった
1系と2系は機能的には一緒でともに機能追加・メンテナンスも続いた。
通常であれば1系は古いバージョンで新機能は2系のみというのが
一般的なバージョンの分け方なのに、jQueryはそうなっておらず
混乱をもたらすということで、3系として合流することになった。
この時、通常のjQuery 3.0とは別に古いブラウザ対応のjQuery compat 3.0
というのが作られる予定だったが、IE8のサポート終了が早まったために
IE9以降対応のjQuery 3.0はに一本化された code.jquery.comの証明書が死んで、そこらじゅうのサイトが余波で崩壊してるね
とりあえずセキュリティ例外にぶっこめば動くには動くが・・・セキュリティ面でもサイト利用者にそれを求めるのかって点でもマズイな 最近書き始めた者です。
jQuery用の入力候補とかインテリセンスを使っている人いますか? VSCodeを使っていますが、jQueryのメソッドも補完されますね
標準機能によるものなのか拡張機能によるものなのかは分かりませんが >>919
そんな基本的なこと長文書かなくてもわかってるから大丈夫
なぜ1と2の違いという全然関係ない話題に持って行こうとしてるのかということ >>925
それはそれとして、じゃあなんで1と2になってるんだ? jQuery公式のCDNの証明書切れは
NHKで放送されるレベルだぞ >>930
なに言ってるんじゃなかくて、
なんで1と2になってるんだ?って
聞いてるんだが? さすがニュースは違うな。jQueryのCDNでトラブルがあった時、
jQuery使うなとかCDNを使うなという話ではなく
HTML標準ににフォールバック機能がないことが問題という話になってる サーバーが落ちるなんてことは普通に想定しておかなければ駄目なのでは?
CDNを使う限りあり得る問題なのでjQueryガーとか言ってる連中はアホですね? サーバが落ちることを想定してるからCDN使うんだが >>935
CDNとjQueryが何の関係があるの?
自分のサーバーで配信すればいいだけでしょ?
HTML標準にないだけで、CDNが落ちたら自分のサーバーに
置いたjQueryを使うという手法も有るしさ まずjQuery公式チュートリアルからcdn からロードしてる記述駆逐しようぜ!
個人の技術ブログとかのコードにもcdnからロードしてる箇所あったら取り締まって吊し上げよう。
cdn使うことで速度ガーとかキャッシュガーとか書いてる無責任サイトも潰そう。 > 潰そう。
無理じゃね? どうせお前本気じゃないし
できやしないことを語っても、虚しいだけだよ CDNが落ちてる時にjQueryを自サイトから読む
という処理をするにはどうしたらいいですか? 一番簡単な実装は
<script src="cdn/jquery.js"></script>
<script>if(!jQuery) document.write('<script src="自サイト/jquery.js"></script>')</script> ありがとうございます
ということはスクリプトファイルの読み込みが終わるまで次のコードを実行しないようになっている
ってことですね
いや、そりゃそうか・・
ありがとうございました "</script>" はHTMLの終了タグと間違われるから
"</sc" + "ript>" みたいにしないとだめだけどな 2から3への違いならまだしも1を比較に出す意味がわからんよな
そもそも元の論点そこじゃないし そんな事どうでもいいんだよ
なんで1と2になってるんだ?
なんでコレに答えられないの? >>918は>>917に対して←これはわかる
>>926は>>925に対して
>>918と>>926は別人
ここまでは確か
同じ質問をしていることが意味不明だし、逆に聞かれて答えてないし
ただの荒らし行為にしか見えん >>910,911
ブラウザはここ1,2年でCSSエンジン周りにも力入れてて
セレクタもキャッシュが効くようにもなってきてるから
間接的にjQueryからquerySelectorを呼ぶセレクタなら
一纏めにしたほうが良いと思う .delay(10000).fadeOut('slow')
のように10秒後にフェードアウトする処理があって
フェードアウトする前に再び呼び出された時には前回のフェードアウト予約をキャンセルしたい場合は
どうすればいいのでしょうか? http://jsbin.com/mememujalo/edit?html,css,js,output
stopでdelayもキャンセルできるとネットには書いてあるのですが
15秒後にフェードアウトするようにして
10秒くらいの段階で「表示」をクリックして再び実行すると
5秒後にフェードアウトを開始します
つまりキャンセル出来ていないようです
どこが間違っているのでしょうか jqueryで、
ある要素をhideした時にイベントを発火するようにする
みたいなことできますか? 誰でもできる在宅ワーク儲かる方法
少しでも多くの方の役に立ちたいです
グーグルで検索するといいかも『金持ちになりたい 鎌野介メソッド』
7MVQ5 https://stackoverflow.com/questions/38491653/jquery-show-a-flex-box
showはdisplayをblockにするはずだから
要素がflexboxの時はどうするのだろう?と思ってググったらこのページが出てきました
$('#myFlexbox').show().css('display', 'flex');
とありますが、show()を入れる意味は何でしょうか? …それそのスタックオーバーフローのコメント欄で聞けばよくね? don't need the .show()
と言われてもノーコメントのところを見ると答えてくれるとは思えませんが? >>957
考え方がそもそも間違っている。
cssを直接変更するのは最後の手段
基本的にclass(もしくはその他の属性)を書き換えるようにする
例えば $('#myFlexbox').addClass('active') みたいにして
CSSで、#myFlexbox.active { display: flexbox } のようにする
JavaScriptでやるのはclass等の書き換え。見た目はCSSで記述する 任意数のDOM要素が入った配列があります
その要素を500msの間隔を置いて一つ一つコンテナ要素に追加していきたいのですが
どう書けばいいでしょうか? >>960
ああ、なるほど・・
その方が綺麗ですね
ありがとうございました なお、showの仕様は昔から変わっているはず
また、flexboxは比較的新しい機能だから
使えないブラウザがある(あった)
そのコードのshowは、昔の仕様の
display:blockにする"以外"の処理に依存している部分が
あったからかもしれないし、display:flexに対応していないブラウザでは
display:blockを使うことでほぼ同じ動きになっていたのかもしれない 使えないブラウザがあるとか言うのはいい加減もう良いよ
そもそもそんな貧相なブラウザを使い続けてる人がリッチな表示に期待してるはずがない
むしろ、そういう環境は往々にしてスペックが貧弱だから素朴で最低限な表示の方がありがたいんだよ
だからそういう環境はJS無効組とかとまとめて、切り離して扱うくらいがちょうどいいんだよ
同じ表示、体験に拘る必要は無い
そうすればリッチ組に割く労力も減るし、読み込ませるリソース量も最低限で済む レス数が950を超えています。1000を超えると書き込みができなくなります。