jQuery 質問スレッド vol.8
■ このスレッドは過去ログ倉庫に格納されています
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/ <div id="a" class="accordion">
<h3>
<div id="b1">
<h3>
<div id="b2" class="accordion">
<h4>
<div id="c1">
<h4>
<div id="c2">
$('.accordion').accordion(); 何となく動くようなら十分だろ
そんなに心配ならフルFlashででも作っとけ レスありがとうございます。
>>74
$aは他で何回か使っているので73のようにしてたのですが
$('#a')でないといけないのでしょうか?
>>75
それぞれにoptionが使えなかったりイベント拾ってるので問題ありです。 >>78
> $aは他で何回か使っているので73のようにしてたのですが
メソッドチェーンを使えばいいので一つの関数内で何回も使う必要はない
別のイベントハンドラで使うならば、その都度取得した方がいい
イベントハンドラが違うということは要素に変化がある可能性があるから
別の関数で使うならば、関数の分割の仕方が悪い
何回も呼び出されてパフォーマンスに影響をあたえる場合は変数に入れるという手もありだが
そんな事例は少なく、一般論として短い書き方である$('#a')としたほうがよい
> それぞれにoptionが使えなかったりイベント拾ってるので問題ありです。
ならまとめられる部分だけまとめればいい >>78
結果的には同じなのでいけない、間違いということではない
$(...) 【 jQuery(...) 】 はjQuery API を使用するということ
jQuery API では$('#a') というセレクタが用意されているので
わざわざインターフェイスからメソッド継承で jQuery API を使用する必要はない >>77
明らかにリファレンスやサンプルソースと違う場合、バージョンアップなどで不具合の可能性を残すことになる
つまりその時点で問題点を抱えることになり、己で首を絞めてるようなもの
疑問や不安が出るのは自然であり、今動けばいいなどと安易な輩と一緒に仕事してる人たちが気の毒だわ >ならまとめられる部分だけまとめればいい
無茶言うな〜 >>81
馬鹿だな
そんなこと言ってちゃなんにも使えないって言ってるんだよ
不安で不安で何もできないより、適当に動く方がいい
そもそも見る方の環境も様々なのがWebだからね
バージョンの際には問題があれば対処すればいいだけ
そもそも流れの速いWebで同じライブラリやコードをいつもでも使おうと考える方が間違い んなこたない
どんだけ暇人なんだ
その1件とは限らんだろ
まさか10年単位で使おうってわけでもあるまい >>82
UI使っててそれはないわな
なら裸で書くだろ
ちなみに$aか$('#a')かはどっちでもいい
好みで使っとけ >>78
何度も使うから、変数a にキャッシュしたのか
#a が永久に変化しないのなら、それで良い。
ただし、const, let か、定数を明記しておくこと >>79
まとめるがよくわかりませんが全て異なる処理の部分もあるので結局idの方がとなってしまいます。 javascriptもしくはjqueryでhtml文字列を渡したらサニタイズしたものを
返してくれる関数無いですか? >>90
javascriptでサニタイズする関数は無いよ
何が目的なのか解らないけど
$('<hoge>').text().html() で特殊文字はエスケープ出来るけど >>92
ブラウザ側でsocket.ioで受信したデータをサニタイズして表示しようとしています。
$('<hoge>').text().html()の使い方についてですが、
<hoge>の部分は何でも良くて、textメソッドにサニタイズしたいタグが含まれる
可能性のある文字列を入れると戻り値としてサニタイズされた文字列が返るという
ことでしょうか? ほらくそ、真面目にサニタイズとかに答えるから
サニタイズ言うなキャンペーン読んでこい
今後サニタイズ言うな
正しい言葉で質問し直せ
でないと答えられんだろうが サニタイズ言うなキャンペーン読んできましたが、
結局どうしたらいいのか良く分かりません。結局どうすればいいのですか?
サニタイズ言うなということは、HTMLタグを無効化するとか言えばいいのですか? 無理に難しく言わずに用語を知らないのなら、
どうしたいのかを書けばいい socket.ioでブラウザ(クライアント側)に送られてくるデータは他のユーザーが
送信したデータなのでHTMLタグなどを含んでいます。
(リアルタイムチャットサイトを作っています)
なので、受信したデータのHTMLタグなどを無効化したいです。 そういうのは無効化なんていわないんだよ。まあいいや
まずな、ブラウザに送られてくるデータっていうのは
サニタイズとか無害化とか無効化しようと考えるな。そのまま使え
でだ、問題が有るときはそのデータを「画面に表示するときだけ」なんだよ
言ってる意味わかるか? 計算に使ったりメッセージを組み立てる時とか
そういうときには、無効化する前のデータを使うってことだ。
そして一番最終段階、画面に表示するときにHTMLタグをタグとして表示するのではなく
(無効化ではなく)文字列として表示すれば良いんだよ
その場合にやるのは、<> という文字を < > に変換(HTMLエスケープ)するってことだ。
これが本当にお前がやりたいことだ。
無効化とかサニタイズという言い方じゃ、こういうことをしたいのかって分からんだろ?
例えば <> を消したり大文字に変換したとしても、HTMLタグとして表示されないわけで
目的(サニタイズ)は達成できてるとも言える。
それからJavaScriptにはURIエスケープは有るがHTMLエスケープはない
文字列置換で自分で作ることはできるが。そもそもそんなことをする必要がない。
なぜなら、jQueryであればhtml()メソッドを使ってデータを表示されるだけで
自動的にHTMLエスケープが行われるからだ 言葉が適切でなかったことを謝ります。
詳しく教えていただきありがとうございます。 jQueryも不要
要素作って textContentに設定するだけ
(改行スタイルを CSS white-spaceで設定する) hとdivの関連性が崩れてる
UIだとカスタマイズや変更が楽だしKBも対応してるんだよな
UI使わないにしてもwhite-spaceなんぞ使わなくてもできるよ なんだ、<, > などの文字が、<, > に変換される、HTMLエスケープの事か
DOM 操作とか、<script> タグなどは、気を付けた方がいい バリデーション、エスケープ、フィルタリング、サニタイズ
勘違いや境目や定義の曖昧さで紛らわしくなる場合がある
>>96がごもっとも ソース内に一箇所だけ書かれてる「class="ランダム英数字"」を
新規にwrap()追記する際にwrap('<a href...内に
その「class="ランダム数字"」を記入することってできます?
class="(.*?)"ですかね?でも貼り付けがわからず、、
同要素、クラス内の検索置換ってのは見つかるんだけど、
ソース全体から正規表現で拾ってきたものをある場所にペーストする、ってのがわからず、、
よろしくお願いします! ランダム英数字の定義で、[A-Za-z0-9_] なら、\w。
アンダーバーを含まないなら、[A-Za-z0-9]
クラスを持つ、すべての要素から、半角英数字だけのクラスを取り出して、
最初の1つが見つかったら、return false; で、each 内から抜ける
wrap については「jQuery, wrap/wrapAll/wrapInner」で検索して
$( '[class]' ).each( function(){
if ( /^[A-Za-z0-9]+$/.test( $(this).prop('class') ) ){
console.log( $(this).prop('class') );
return false;
}
} ) > console.log( $(this).prop('class') );
www こっちに誘導されたんで来ました
jQueryで別ファイルからヘッダとフッタを読み込みってことやったんですが、処理は上手く行っているようだが
サーバーのファイルを更新してもjQueryで読み込むから日付チェックをしていないようで古いものがキャッシュから読まれてしまう
こう言うの抑止する方法とかありませんか?
当方webに関しては殆ど素人です >>113
いまどうやってるかを書かないと
エスパーするしかないと思う
たとえば$.getでとってるなら
cache: falseとか
(日付チェックとは違うけど) >>114
すみません。ググったらなんとかなった
$(function () {
$.ajaxSetup({
cache: false
});
});
足したら直りました
ちなみに、ここで動画管理のアプリ配っています(Windows10用)
http://www7b.biglobe.ne.jp/~megatherium/
webは、ほぼ素人なので夜中に焦りましたわw すみません、質問です
html内にボタンを設置し、そのボタンをクリックすると他のページからメールフォームを読み込むページを作成しているのですが、
メールフォームは読み込みこめたのですが、メールフォームに付いてる住所の自動入力のスクリプトが適用されません
どのようにすればよいでしょうか?
<!-- ボタン・インクルードスクリプト -->
$('#*** a').click(function(){
$('#***').load('***.html #*** ');
return false;
});
<!-- 住所の自動入力スクリプト-->
$(window).ready( function() {
$('#postcode').jpostal({
postcode : [
#postcode'
],
address : {
'#address1' : '%3',
'#address2' : '%4%5'
}
});
});
当方、超初心者なので説明が下手かもしれませんがどうぞ宜しくお願いします そこまで初心者なら勉強しろ
ここは自ら勉強するものが躓いたときに聞きに来るところであって
コードを丸投げして直してもらうところではない
それが嫌なら有料でやれ >$(window).ready( function() {
「$(document).ready()」と「$(window).load()」の違いが分からないのなら、以下を使う
$(function() {
// ここに処理内容を書く
});
それに、これらは最初のページの読み込みに反応するだけで、
後から、非同期(Ajax)で読み込んだ部分には反応しない
自分で、one(), on() で、要素にイベントハンドラーを付けて、処理すれば? >>119
ありがとうございます!!
出来ました! jQuery というより javascript に関する質問なのですが、よろしくお願いします。
<select id="sel">
<option value="a">A</value>
<option value="b">B</value>
<option value="c">C</value>
<option value="d">D</value>
</select>
<div id="img"></div>
こんな感じのとき、#sel の選択中に A〜D に応じるイメージを #img に表示したいと思っていますが、
option に hover イベントを仕掛けてもうまく行かないように思います。
選択項目が変化していることを知る方法はありますでしょうか?
$('#sel').change( function(){ hogehoge.. } ) はうまくいきます。 >>121
すいません。
<option>の閉じは</option>です。 >>121
正確に言うとDOMの話なんでJavaScriptの話じゃないけどな。
JavaScriptはブラウザ以外でも動く。ブラウザ特有のものはJavaScriptではない >>123
121, 122 です。それは失礼しました。
で、答えは? buttonをクリックしたら特定のdivの中にある画像をクリップボードにコピーしたいの
ですが、jQueryあるいはJavaScriptで出来ますか? >>127だけどごめん、画像ならできないかも
やったことない >>121
根本的にUIに沿わない
あくまでselectはセレクトボックス selectはUIじゃないぞ?
UIはブラウザベンダーが決めてる。
HTMLとしてはselectは複数のoptionから選べるってだけの機能
そのUIをどう実装するかは関係ない
またよくある手としてJavaScriptでselectをブラウザ標準から
拡張することもよくある話
なので>>121はselect使うべき >>121
そういうのタッチデバイスで意味ないから
>>131
そういうユーザ操作ひっくるめてUIでないの? >>125
Electron を使えば?
Electronではじめるアプリ開発
~JavaScript/HTML/CSSでデスクトップアプリを作ろう
野口 将人・倉見 洋輔、2017
この本を読めば? Electronでふと思い出したがVisualstudio codeって使い心地どうすか
俺が描くのってHTMLCSSjQueryだけなんだけど >>137
起動がやや重い(Atomよりはマシ)が起動後はスムーズで悪くない VS Code で、Windows で、Ruby も楽々。
コンソール画面には、PowerShell
Emmet, SASS, MD やら、これが無料で、笑いが止まらない www
【Microsoft Tech Summit】APP017 PowerShellの新しい相棒 Visual Studio Code
https://www.youtube.com/watch?v=0zo6z0yHrGk .aaaに動的に付けたclass(bbb ccc ddd・・・)の削除や付け直しを一括でしたく
$('.aaa').removeClass('bbb ccc ddd・・・');
を
$('.aaa').removeClass().addClass('aaa');
とするのはあり? >>140
それだと静的に付けたclassまで消えちゃうじゃん >>142
そうなんだけど・・・の管理が面倒で
変更の度にそこも付け加えなくてはならなくて
最初つけるclassは1,2個と少ないので楽かなと >>143
$('.aaa').removeClass(function(i, v){
return v.split(' ').slice(1).join(' ');
});
こういう感じでもええんやで 一つの要素にJavaScriptからそんなに多くのクラスを
設定する必要が有ることがそもそも間違ってる >>144
aaaが必ずしも最初に来る保証がない場合は?↓とか
>>145
UI含めてライブラリで勝手に付けられたりするからな >>147
ただ記事やブログ書いてるだけならそんないらんよ
ちょっと特殊な場合だな
ヒントだけ書くとスポーツやトラフィックや・・・ >>148
ライブラリで勝手につけられると言っても
せいぜいbootstrapみたいに btn btn-primary btn-lg active ぐらいなもんだろ?
一つの要素に4つとかそのぐらいの数しかいらない
これもbootstrapのCSSの設計上これだけいるってだけで、
JavaScriptから設定するクラスだとやっぱりそんなにいらないと思う
まあ推測するに
<div data-state="a"></div>
<div data-state="b"></div>
<div data-state="c"></div>
<div data-state="d"></div>
みたいにやればいいのに、classで
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
こんな風にやろうとしてるんでしょ?
だからe, f, g が増えたらリセットするために、e, f, gのクラスを消すように
メンテナンスしなくちゃいけない!ってなってるんだと思うよ。
つまりやっぱり使い方が間違ってる。
前者のやり方であれば、当然data-stateを初期値に戻すだけでいい 管理が大変って今どうやってて何が大変なのか分からん。
var myTags = 'bbb ccc ddd';
で管理して
$('.aaa').addClass(myTags);
$('.aaa').removeClass(myTags);
$('.aaa').toggleClass(myTags);
とか普通に使うんじゃダメなの? >>153
myTagsをその都度変えるということ? data-はクセあるからな
キャッシュの問題
CSSに反映されない
$.hasDataはイベント有無で変わる
classの方が楽で自然に書ける場合はある >>153
すでにbbbがあるか否かの判断がめんどくさくね? 質問はランダムに動的に追加されるclassだけを削除する方法
dataなんて言ってないだろ?w >>157
どうでもよくね?
<div class="aaa ccc ddd" />
に
$('.aaa').removeClass('bbb ccc ddd');
しても
<div class="aaa" />
になるだけだろ?え、俺なんか勘違いしてる?? >>156
なんか勘違いしてね?
jQueryのdataじゃなくて
data-x属性だぞ
普通にCSSで使える
[data-name=value]とか書けばいい .red-text { color: red }
.red-background { background-color: red }
とかしてるんじゃないの?
まあ使いかたが悪いってことだよね >>156
あとdata()前後とかな
>>160
ならdata-はいらんがな >>159
上にもあったがライブラリのクラスはそれを書かなくてはならない。
つまり仕様が変わると変えなくてはならない。
これは将来的に面倒な要素を残すことになる。
また、仕様変更でeeeが加わった場合にそこも書き直さなくてはならない。
>>140なら自分の初期設定したいクラスだけ書けばいい。 >>163
静的クラスのほうの仕様は変わらない前提?ならいいんじゃない >>161
2個ならず多い場合に、個別に設定=変更する場合ならありじゃないの?
背景色だけ変えるとか 勝手な憶測書いてそれ前提で否定する人って何が目的なんだろ >>162
> ならdata-はいらんがな
HTML5違反をして、独自属性をつけるって話?
そりゃそれならいらんだろうなw だがそこは論点じゃない
classではなく独自の属性を使えという話
classを使うと「値のリスト」にしかならない。classという名前は固定
だからclassに自分の知らない値が入ることを考慮する必要が出てくる
独自属性の場合、「独自属性とその値」になる
独自属性には自分の知らない値は入らないので、classを使うよりも
取扱が簡単になる >>166
推測しかできないような
中途半端な書き込みをするなってことだろw >>161
横レスだが何が言いたいのかはっきり書いてくれないかな
それだといくつかに取れる
>>168
なら手順的には先ず尋ねるべきだな >>169
> 横レスだが何が言いたいのかはっきり書いてくれないかな
クラス名 = スタイル になっているということだよ >>169
> なら手順的には先ず尋ねるべきだな
尋ねる前にヒントだけしかかかないような書き込みしてるだろ
>>151
> ヒントだけ書くとスポーツやトラフィックや・・・
ヒントしか言わないやつは推測で答えられても文句は言わない >>167
classは、すべての要素に対して使用することが出来る「分類名」
data-は、htmlの要素に於いて適切な属性や要素がない場合に格納することが出来る「固有の独自データ」
勘違いするなよw >>168
どう中途半端?
>>140 こういう書き方はあり?(yes|no?)
>>141 yes
単純明快、しかもすでに解決済み。
横から妄想書いてるのがゴチャゴチャ言ってるだけでは。 ■ このスレッドは過去ログ倉庫に格納されています