+ 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/ >>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文とかってそんなに使わないような気がして 
