TOP カテ一覧 スレ一覧 100～終まで 2ch元 削除依頼
Baiduspiderウザすぎ！！ ヽ(`Д´)ﾉ
サイト運営を長続きさせるために
HTMLの文字コードなににしてる？
WordPressの困った人のスレ 2
Nvu(エヌビュー)スレ @ Web制作板
CGクリエイター検定Webデザイン部門
jQuery ライブラリ 総合質問所 vol.4
WordPressの困った人のスレ 2
フリーになりたい会社員webデザイナー
！！Adobe GoLive 6.0は糞だーーーーーー！！！！
jQuery ライブラリ 総合質問所 vol.4
- 1 ：2014/05/17 ～ 最終レス ：2015/12/31
- jQuery および jQuery UI ライブラリの使い方や、
jQueryプラグインの作り方を質問するスレッドです。
こんなプラグインありませんか？と聞くスレではありません。
jQueryを使って作る側の質問スレです。
探すのは自分で探してください。ろくにサポートもされてなさそうな
野良プラグインの使用はおすすめしません。
前スレ
【jQuery】JavaScript ライブラリ総合質問所 vol.3
http://toro.2ch.sc/test/read.cgi/hp/1369444026/
jQuery以外の話題はこちらへ
+ JavaScript の質問用スレッド vol.115 +
http://toro.2ch.sc/test/read.cgi/hp/1399072595/
- 2 ：
- >>1
なぜ jQuery 限定？
勝手に改変された？
- 3 ：
- jQuery以外知ってる人はここには居ないので、そのライブラリの公式フォーラムやstackoverflowとかで聞いてください
- 4 ：
- >>3
それなら別にjQueryスレをたててね
勝手に総合スレを乗っ取らないでね
- 5 ：
- まぁでもjsライブラリ総合とjqueryは実際分けた方が良いかもね。
- 6 ：
- jQueryスレ立てるとしても、ここだとjQuery以外のライブラリ質問が本スレに誘導されるからよろしくない
それが>>1の狙いなんだろうけどね
- 7 ：
- ライブラリ禁止ならここを使うといいよ。
純粋JavaScript（ECMAScript）専用質問スレ
http://toro.2ch.sc/test/read.cgi/hp/1400502900/
- 8 ：
- そこはECMAScriptスレだから用途が違うがな
- 9 ：
- このスレは削除依頼が出てるから放置で
- 10 ：
- ここがjQueryスレだろ
タイトル的に
- 11 ：
- どうしてもここを使ってjQuery以外を本スレに誘導したいみたいね
ライブラリは総合スレがあるからここは不要
- 12 ：
- "JavaScript ライブラリ総合質問所 vol.4"で立ってたスレが移転の影響で落ちてる…？
- 13 ：
- >>12
落ちてたけど、立て直されてる
JavaScript ライブラリ総合質問所 vol.4
http://peace.2ch.sc/test/read.cgi/hp/1400834117/
- 14 ：
- ドルを単体で使った場合、ドルは何を指し示しているんですか？
こんな感じ↓名前空間？
$.getJson()
スレチだったら、誘導お願いします。
- 15 ：
- >>14
一つ上のレスぐらい読もう
- 16 ：
- >>15
それじゃ誘導されまーす
- 17 ：
- >>14
jQueryオブジェクトそのものだよ。
JavaScriptでは関数もオブジェクトってことを知っていれば、
obj.foo = 1 や obj.bar() と同様に、
関数 function Hoge() {} にプロパティやメソッドを追加できる気づくはず。
つまり Hoge.foo = 1 とか Hoge.bar() とか できる。
jQueryに話を戻すと、 $ = jQuery
$(セレクタ）という関数呼び出しもできるし、
$.getJson() という関数オブジェクトにくっついたメソッド呼び出しも出来る。
- 18 ：
- validateプラグインの質問ですが
必須チェックはサブミット直前のみ、それのチェック以外はリアルタイム
といったようにバリデーションの種類ごとに
タイミングを変えることは可能でしょうか？
- 19 ：
- jQuery, Lodash などライブラリ関連の質問は、下記のスレへ
JavaScript ライブラリ総合質問所 vol.4
ttp://peace.2ch.sc/test/read.cgi/hp/1400834117/l50
- 20 ：
- jQueryはここでいいでしょw
- 21 ：
- 【CSS】
#wrapper { position: relative; width: 500px; height: 500px; }
#wrapper div { position: absolute; width: 500px height: 500px; display: none; }
#wrapper div:nth-child(1) { background-image: url(img1.jpg); }
#wrapper div:nth-child(2) { background-image: url(img2.jpg); }
・
・
#wrapper div:nth-child(20) { background-image: url(img20.jpg); }
【html】
<div id="wrapper">
<div></div>
<div></div>
・
・
・
</div><!-- #wrapper end -->
【jQuery】
$wrap = $('#wrapper');
$elem = $wrap.find('div');
$elem.show().each(function(i){
//最初全てのdivが重なって表示されている状態から、0.5秒間隔で一つ目のdivから20個目まで順々に消す処理をしています。
$(this).delay((20 - i) * 50).fadeOut(0);
}
上記コードで高速スライドショーみたいなのを実装したのですが
mac firefoxだと期待通りに動くものの、mac chromeだと飛び飛びになってしまいます（他ブラウザでは未検証）
おそらく処理が追いついてないのでしょうが、飛び飛びにならないようにするにはどうしたらいいでしょうか？
- 22 ：
- すみません、sage進行だったのでしょうか？ 気をつけます
- 23 ：
- >>21
jqueryのバージョンあげてもダメ？
- 24 ：
- >>23
バージョンを忘れてました
バージョンは1.11.1です。IE8を切れないので2系は無理です。。
http://peace.2ch.sc/test/read.cgi/hp/1400834117/l50
こちらが本スレみたいなので、質問はこちらにも書いてます。
- 25 ：
- JqueryMobileを用いswipeイベントを処理する下記のコードを記載しました。
マウス操作でイベントを確認できたので、windowsタブレットでスワイプを実施すると、
divタグのイベントではなく、画面のイベントとして画面が移動してしまいます。
タブレット使用時、特定の範囲に関して、スワイプのイベントを処理する
場合、どのようなコードを書くべきでしょうか。
$(document).ready(function(){
$('#ph-swipe').bind('swipe', function(){
$(this).text($(this).text()+'!');
});
});
<div style="width:100px; height30px; background-color:blue;"id = "ph-swipe">スワイプイベント</div>
- 26 ：
- ここは重複スレなんだけどね
>>19
- 27 ：
- http://techblog.yahoo.co.jp/programming/js_callback/
の
function sleep(ms) {
var d = new $.Deferred;
setTimeout(function(){
d.resolve();
}, ms);
return d.promise();
}
$.when(function(){ console.log(0); }())
.then(function(){ return sleep(1000); })
.then(function(){ console.log(1); })
.then(function(){ return sleep(1000); })
.then(function(){ console.log(2); });
を1.7.2でやるにはどう修正すればいい？
- 28 ：
- jqueryのdatepickerでテキストボックスの横にボタンを
置いてそれがクリックされるとカレンダーが表示されるように
しているのですが、このボタンの大きさは変更できないものでしょうか？
- 29 ：
- すみません、jQuery初めてです。初歩的なことなのかもしれませんが質問させてください。
下記のようなコードで、divの表示、非表示を切り替えようとしているのですが、ブラウザのをリロードしたときには
JQueryのコードがうまく動かないのに、リンクを分でページ遷移して同じページを表示するとうまく実行されます。
つかっているブラウザはchromeなのですが、何がいけないかわかりますでしょうか？
(ブラウザの読み込み方の違いが影響している？)
$('#hoge').toggle();←scriptタグ内でこのまま書いています。
--
<div id='hoge' style='display: none;'>XXX</div>
--
- 30 ：
- 自己解決しました。DOMツリー構築前後での実行タイミングの問題だったようです。失礼しました。
- 31 ：
- ここは重複スレなので、以降は>>19に書き込んでね
- 32 ：
- jQuery UIで質問
Dialogが表示領域外に出ていかないのを出ていくようにするには
どうすればいいでしょうか？
- 33 ：
- $('#hoge').dialog({
position: {
collision: 'none'
}
});
でいけそうな気がしたけど駄目だった…
- 34 ：
- 連投スマソ…色々ググったところ↓で出来た
$('#hoge').dialog({
// position は関係無かった
}).dialog('widget').draggable('option', 'containment', 'none');
- 35 ：
- ｊQuery初心者で勉強中の者です。
ttp://calie.jp/beashow/index.htmlのサイトのような
画像を読み込んだら自動でエフェクトが動く動きを実現するには
jquery.inview.jsとjquery.easing.1.3.js
が必要だということはわかったのですが、どのように記述すれば実現できるのかがわかりません。
画像をよみこんでフェードインさせる方法を詳しい方ご教授いただけないでしょうか
- 36 ：
- ここは重複スレなので、以降は>>19に書き込んでね
- 37 ：
- >>35
こっちに引っ越しね。
+ JavaScript の質問用スレッド vol.117 +
http://peace.2ch.sc/test/read.cgi/hp/1403330196/
- 38 ：
- jQuery, Lodash などライブラリ関連の質問は、下記のスレへ
JavaScript ライブラリ総合質問所 vol.4
ttp://peace.2ch.sc/test/read.cgi/hp/1400834117/l50
- 39 ：
- load()を使って外からhtmlを読み込んだのですが、読み込んだあとのhtmlを見てみたらば
::beforeと::afterってのが入ってました。
この、::beforeと::afterって何ですか？
- 40 ：
- jQuery, Lodash などライブラリ関連の質問は、下記のスレへ
JavaScript ライブラリ総合質問所 vol.4
ttp://peace.2ch.sc/test/read.cgi/hp/1400834117/l50
- 41 ：
- バリデーションのライブラリ探してるんだけど、今は何が良いの？
exValidationっての見たけど開発が止まっているようだ
最後の更新が3年前
validation-Engineってのは最終は2ヶ月前らしいけど
日本語対応してるのであればやっぱこの2つのうちどっちかなのかな？
- 42 ：
- ごめん、良く読まずに質問したようだ
javascriptスレに質問しないといけないのかな？
- 43 ：
- >>41-42
マルチポスト化してるので移動したなら移動したといって下さい。
http://peace.2ch.sc/test/read.cgi/hp/1400834117/433n-
このスレは放置推奨
- 44 ：
- jqueryでイベントが設定されているか調べるにはどうしたらいいですか？
$('#id').on('click', fn);
$('#id').hasEventListener('click') // ← 結果:"true" みたいな事がしたい
- 45 ：
- http://blog.jquery.com/2011/11/08/building-a-slimmer-jquery/
> .data(“events”): jQuery stores its event-related data in a data object
> named (wait for it) events on each element. This is an
> internal data structure so in 1.8 this will be removed from the user data
> name space so it won’t conflict with items of the same name.
> jQuery’s event data can still be accessed via jQuery._data(element, "events")
> but be aware that this is an internal data structure that is undocumented and should not be modified.
_dataで取得できるけど、内部データだって書いてあるね。
個人的には、イベントが設定されているかを調べるべきではないし
だから不要だと思っているが。
- 46 ：
- 何をしたいのかわからないが、イベントが設定されているか
調べるよりももっといい方法があるはず。
- 47 ：
- !!$._data( elem, [] ).events["click"]
エレメント単位でしか見れない
ただ >>45,46 の言う通り他の方法があるのでは？
- 48 ：
- ありがとうございます
一先ず>>47の方法で対応してみます。
みなさんは、ユーザーのアクションによってイベントを設定する場合どうされてるんですか？
予めフラグ変数を用意してそれで判別する事もできますが、
イベントリスナーが登録されているかを調べるのが一番スマートだと思うんですよね。
ユーザーのアクションの度にon()するとイベントが複数回設定されますし、
毎回off()してからon()するのも何か違う気がするんですよね。
他の、例えばGoogleのClosure LibraryにはhasListener()がちゃんとありますし、SenchaのExtJsにもhasListener()があります。
イベントが設定されているか調べられるんですよね。
jqueryに無いってちょっとおかしくないですか？
- 49 ：
- >>48
まず前提として、ユーザーのアクションによって、イベントが設定された状態っていうのは、
イベント対象のオブジェクト（要素）がとあるアクション（メソッド呼び出し）によって状態変化したものと考える。
イメージとしては、要素をクラスでラップして、拡張した感じをイメージすればいい。
例えばドラック可能なオブジェクトであれば
class DraggableObject {
var someProperty:
someMethod: function() {}
<div>いろいろ</div>
}
DraggableObjectのインスタンスに対して、状態を変えるメソッドを実行すれば、
その状態を記録すると同時に、内部のHTMLにaddClassしたりイベントを追加したりする。
だからDraggableObjectは自分がどういう状態か知っているし、登録したイベントハンドラも知っている。
フラグといえばフラグだが、フラグ変数みたいにオブジェクトと分離されたものではなく
イベント対象のオブジェクト（要素）を拡張した高機能なオブジェクトとして一つにカプセル化することが出来る。
ではこの、class DraggableObjectをどうやって実現するかだが、その方法は色いろあるだろうが、
jQuery風にやるのであれば、jQueryUIを参考にすれば良い。
例えば、 $( ".draggable" ).draggable(); とやることで、class="draggable" なただの要素が
すべてdraggableな拡張されたオブジェクトへと変化する。$( ".draggable" ).draggable( "enable" ); と
やればドラッグスタートだ。内部ではイベントをつけたりしているだろう。
他にもjQuery的な臭いをなくしたいのであれば、var myObject = new MyObject('#id") とやって
myObject.enable() みたいなやり方もある。（内部でjQueryを使っていたとしても）外部からは
jQueryの臭いが消えるが、jQuery的なセレクタにマッチした複数の要素対して一括で処理を行うとかはしづらくなるが。
- 50 ：
- ttp://www.tailtension.com/jquery/45/
ttp://www.tailtension.com/demo/jquery_pagination_plugin/jquery_pagination_plugin.html
すみません
このページネーションサンプルに、
各ページに画像表示させて、
ページ切り替えた時にだけ画像読み込むようにする遅延ロード組み込むのはどうやるのでしょうか。
- 51 ：
- jQuery 2.1.2リリース！
https://github.com/jquery/jquery/releases
- 52 ：
- プログラム板で、このスレへ誘導した者だが、
このスレは荒らしが立てたスレらしいので、
jQuery, Lodash などライブラリ関連の質問は、
下記のスレへ書き込んでくれ
この板(Web制作管理板)の
JavaScript ライブラリ総合質問所 vol.4
ttp://peace.2ch.sc/test/read.cgi/hp/1400834117/l50
- 53 ：
- でも実際jqueryで検索するとこっちが出るんだよな
わざわざJavaScriptで検索する人はいまい
- 54 ：
- 既に何度も誘導されてるし、今後も誘導すればいいだけ
JavaScript ライブラリ総合質問所 vol.4
http://peace.2ch.sc/test/read.cgi/hp/1400834117/
- 55 ：
- jQueryの質問が多ければ別に専用スレがあっても良い気がするが
スレタイと>>1の内容がアカンのだよな
- 56 ：
- >>55
それはライブラリ総合質問所がjQueryで溢れて他ライブラリの質問が埋もれてから考える問題
JavaScriptスレの方は「周囲がしっかり誘導しろよ」とは思うけど
- 57 ：
- まあ総合質問所の方は質問で改めて書く必要ないほどjQueryの使用が
当たり前みたいになってるからな
- 58 ：
- DOM APIを直接使うものなら、何かの制限がない限り
jQueryでいいわけだし。
DOMを直接使わないのであれば、AngularJSの話でとか
説明するだろうし
- 59 ：
- >>56
いちいち誘導せないかんのがおかしい
スレタイは一目でわかるほうがいい
今はｊｓあまりかじらずjQから入る人も多いだろうから
「JavaScript ライブラリ」なんてワード頭に浮かばないだろう
スレタイ一覧で目に留まっても普通はスルー
- 60 ：
- 違和感ある言い方するなぁ。
jQuery使ってもJavaScriptはJavaScriptだろ。
JavaScriptの部分は何も変わってないよ。
CoffeeScriptじゃあるまいし。
jQuery使っているからといって、
それが言語名だと勘違いしている人はないだろうし
だからこそ、JavaScriptスレでjQueryの話題が出てるんだぞ
- 61 ：
- >>59
リテラシーの低い人に合わせる考え方がおかしい
そういう勘違いする人はライブラリという単語を教えて徐々に浸透させるのが常道だろう
そもそも、ここで質問する人よりライブラリ総合質問所の方が圧倒的に多い
誘導しなきゃならないケースがそれ程多くない
- 62 ：
- jqgridでカラム部分に当たるcolnamesを変更する方法ってありますか？
colmodelは変数を持ってくれば変更できたのですが、colnamesはエラーになってしまいます
- 63 ：
- 変更というのは初期表示画面からの変更です
- 64 ：
- >>62-63
JavaScript ライブラリ総合質問所 vol.4
http://peace.2ch.sc/test/read.cgi/hp/1400834117/
- 65 ：
- >>60
だから？としか言いようがない
- 66 ：
- >>65
うん。だからJavaScriptスレでjQueryの
話をしても問題ないということ。
- 67 ：
- >>66
面白い冗談だね
- 68 ：
- ライブラリの質問はライブラリ総合スレへどうぞ
JavaScript ライブラリ総合質問所 vol.4
http://peace.2ch.sc/test/read.cgi/hp/1400834117/
- 69 ：
- >>66
そんなことはどうでもいい
ここでjQueryの話をしても問題ないということか
- 70 ：
- JSのほうが見てる人は多いが
jQueryの質問はどちらでもいいということ？
ならわざわざ誘導する必要もないね
- 71 ：
- どこで何を書き込んでもいいよ。
俺もどこで何でも書き込むから。
すれ違いでも適切だと思ったことを書く。
- 72 ：
- >>70
重複スレの誘導、スレのローカルルールを守る
当たり前のこともいわないと分からないのかね
- 73 ：
- >>72
言ってもわからないです。
- 74 ：
- >>73
頭悪いね
- 75 ：
- >>72
>>1
本家(？)はタイトルのつけ方が悪いので重複ではない
ではＯＫなんだね
当たり前だよね
- 76 ：
- >>75
取り扱う内容が重複するから重複スレだし、ここは重複スレ
当たり前のことを一々説明しなければならない程に頭が悪いんだな
- 77 ：
- ライブラリ総合質問所の前スレ(Vol.3)のタイトルが既に危険性はらんでいたんだな
- 78 ：
- タイトルにjQueryがついていたが故にjQuery専用スレと勘違いして、JavaScriptスレでライブラリの質問をしていた人がいた事を踏まえれば、「JavaScript ライブラリ総合質問所 vol.4」のタイトルは妥当だろうな
- 79 ：
- >>78
タイトルにjQueryのワードも入れときゃいいんだよ
でないといつまでたってもこっちに書く人は出てくる
その度にいちいち誘導とか頭悪いだろ
- 80 ：
- >>79
JavaScriptスレからライブラリスレへの誘導こそ頭悪いだろ
第一、ライブラリスレのタイトル変更案ならライブラリスレでやれよ
こんなところで主張するのは馬鹿のすることだぞ
- 81 ：
- >>80
>JavaScriptスレからライブラリスレへの誘導
誰かそんなアホなことしてるやついたか？ｗ
あっちは機能してるから余計なことしなくていいんだよ
- 82 ：
- >>81
>>78を読み返せ
- 83 ：
- JavaScriptスレはライブラリの質問禁止だな
あそこでライブラリを話をしても荒らしがライブラリ啓蒙するスレにしかならん
- 84 ：
- lodash 3.0 リリース間近！
https://github.com/lodash/lodash
3.0-preから-preが外れました！
スレが多すぎてどこに書けばいいかわからないので
関連スレすべてにマルチポストしています。m(__)m
- 85 ：
- fquery の fullCalendar で、予定表を作成しているのですが、
events: [
{ id:1, title: 'イベント１-１', start: '2015-01-23T16:00:00', end: '2015-01-23T17:00:00' },
{ id:1, title: 'イベント１-１', start: '2015-01-24T16:00:00', end: '2015-01-24T17:00:00' },
{ id:2, title: 'イベント２-１', start: '2015-01-23T16:00:00', end: '2015-01-23T17:00:00' },
{ id:2, title: 'イベント２-１', start: '2015-01-24T16:00:00', end: '2015-01-24T17:00:00' },
]
のようなイベントを作成して、
id 別に 表示のON OFF を切り替えることは出来ますか？
例：id:1 のイベントを表示し、id:2のイベントは隠す
- 86 ：
- ライブラリの質問はライブラリ総合スレへどうぞ
JavaScript ライブラリ総合質問所 vol.4
http://peace.2ch.sc/test/read.cgi/hp/1400834117/
- 87 ：
- JavaScriptスレからライブラリスレへの誘導
ｗｗｗ
- 88 ：
- >>82
JavaScriptとjQuery両方入れたらだめなん？
- 89 ：
- >>88
付いてたよ
- 90 ：
- 過去形かよ
- 91 ：
- ではjQueryはこちらで了解しました
- 92 ：
- >>91
頭悪いね
- 93 ：
- ＞JavaScriptスレからライブラリスレへの誘導
頭悪いね
- 94 ：
- >>93
馬鹿はおまえ
- 95 ：
- >>94
馬鹿なのでjQueryはこちらにします
- 96 ：
- jQuery 特化スレッドがあっても良いね。
素の javascript はお手上げだったけど、
jQuery の助けを利用したら動いたよ！って人も多いだろうし。
- 97 ：
- ライブラリスレで十分だろ
重複スレ立てるな
- 98 ：
- あっちだとjQの殻はがして説明するのいるからな
もちろんそれの方がいい場合もあるし、最低限なこと（演算子など）もあるが
世の中そこまで求めてないのもいることは確か
よって別にこっちもあってもいいよ
- 99 ：
- 俺はどのスレでも気にしないよ。
どのスレでも適切な回答をするし。
- 100 ：
- JavaScript ライブラリのほうが回答者も多いのでそちらで質問してもいいし。
jQueryだけにとどまらないのなら誘導してもいいし。
jQueryでヒットしてこちらに質問してきたらそれはそれでいいし。
両方あってもいいのでは。
重複以前にスレタイのつけ方に問題あるのだから。
- 101 ：
- ライブラリスレのタイトルに問題はないな
- 102 ：
- そう思うなら勝手にそう思ってればいい
検索でヒットするか否かは結果の通り
- 103 ：
- jQueryスレ立てたい奴はちゃんとライブラリスレでお伺いをたてろよ勝手にスレを立てて勝手に誘導する奴はコノスレヲ立てた荒らしと同じだからな
- 104 ：
- ここスレ立てしてもなかなか落ちない板なのに
あまり考えないで立てる奴多いよな
- 105 ：
- >>103
何様w
- 106 ：
- >>103
向こうからこっちに誘導するヤツなんているか？
逆はいるが
- 107 ：
- 何かを始める前に相談するという当たり前のマナーを守れない奴もいるんだな
好き勝手に何でもやっていいと思ってる
- 108 ：
- jQueryの質問はjQueryのスレにするのが当たり前
- 109 ：
- jQueryの質問はライブラリスレにするのが同然
- 110 ：
- jQueryの質問はjQueryスレにするのが同然なのですね
わかりました
- 111 ：
- 同然ｗｗ
- 112 ：
- 揚げ足取りしか出来ない馬鹿が何か言ってるぞ
- 113 ：
- jQueryって今主流？googletrendsで確認したら2012年をピークに下がっているんだけど...
ウェブデザインの勉強を独学でしていてj-queryは必須と思っていたのですが現場はどうなんでしょうか？
- 114 ：
- 検索ワード間違えていた...
http://www.google.co.jp/trends/explore#q=jquery
まだ需要ありそうで良かった
- 115 ：
- ウェブデザインでjQuery？
言っとくけど、jQueryは使われているが
ほとんどのjQueryプラグインはゴミだぞ。
あれは勉強する価値がない
- 116 ：
- ゴミではないだろ
ゴミは>>115
- 117 ：
- 本スレバカばかり
回答できないでやんの
- 118 ：
- $('hoge')を何回か使用する場合に
$hoge = $('hoge')
のように変数に入れそれを使用しますが
$(this)も同じようにやったほうがいいですか？
- 119 ：
- >>118
ほとんど意味が無いよ。
$hogeに入れるのは、セレクタを解釈する時間が惜しいから。
セレクタの解釈をJavaScriptで実装しているから遅い。
そしてセレクタに一致したものを検索するのに時間が掛かるから。
だけど、セレクタがシンプルでgetElementByIdやgetElementByNameなどが
使えたり、最近のブラウザならquerySelectorAll場合には、セレクタに一致するものを
検索する時間は少なくなる。
さらにそれより時間がかからないのがthisや任意のDOM要素の場合。
この場合は、セレクタを解釈したり要素を検索する必要がなくて
jQueryオブジェクトでラップするだけなので著しく速くなる。
もちろんjQueryオブジェクトでラップする分時間はかかるが
ループの中で何万回と参照してやっと違いが出るくらいだと思うよ。
- 120 ：
- jQueryはオワコン
- 121 ：
- $thi = $(this)
変数に入れるのは、変数が1つ増えるだけで、
特に損はないでしょ？
それとも、変数の管理がしにくくなる？
- 122 ：
- 変数っていうのは名前をつけるっていうことなんだけど、
何のために名前をつけるのか？ってことだよ。
$thisも$(this)も、ほとんど同じ単語、同じ意味なわけで
わざわざ名前をつける理由がない。
後からみた時になんでそんな名前をつけたのかわからないしね。
要するに意味が無いことはやらないほうがいいよ。
必要のないものは書かない。これがコードの鉄則
- 123 ：
- >>118
意味はあるが、パフォーマンスを気にするなら this のまま利用して、 DOM API を使うことも検討した方がいい
- 124 ：
- 変数の名前には誰も触れてないのにいきなり持論を繰り出すのは例の人か
$this がNGなら別のユニークな名前を付ければいいだけ
そして、誰も質問してない内容を主張するのは時間の無駄
- 125 ：
- > 変数の名前には誰も触れてないのに
え？
変数の名前に触れているから、書いたんだけど。
>>121が見えない？
↓ これ
> $thi = $(this)
- 126 ：
- >>122
>後からみた時になんでそんな名前をつけたのかわからないしね。
え？たいていの人わかるのでは？
毎回$(this)使うことが意味が無いこと、必要のないことではないの？
>>125は意味がわからない
- 127 ：
- >>124
> $this がNGなら別のユニークな名前を付ければいいだけ
違う名前をつけるのなら意味はあるよ。
これはリファクタリング関連の用語で「説明用変数」とか言われているやつで
http://www.woodensoldier.info/computer/refactoring/IntroduceExplaningVariable.htm
例えば関数が長すぎたり、違う意味のthisが近くにたくさんあったりして
コードが読みづらい時に、コードを説明するためにつける変数
thisが分かりにくいから説明としてつけるわけで、$thisとかいう名前だと
何も説明になってないから意味が無いわけ。
（なお、$(this)を変数に入れてもパフォーマンスの点ではほぼ意味が無いことは既に言ったとおり）
- 128 ：
- >>126
> 毎回$(this)使うことが意味が無いこと、必要のないことではないの？
一旦変数に入れるとしたら、
var $x = $(this)
最低限これだけのコードが必要でしょ？
それだけのコードを書いた結果、節約できるのは
() のたった２文字。
普通はメソッドチェーン使ったり、引数を効率良く書くので
「毎回$(this)使うこと」自体があまりないことなんだよ。
ほらこれだけやっても$(this)を使うのはたった１回。
var css = {width: '100px', height: '100px'};
var events = {
change: function() {},
keydown: function() {},
}
$(this).prop('disable', false).css(css).on(events);
- 129 ：
- >>128
そりゃ処理内容によるだろ
- 130 ：
- $(this)は、そんなにアクセスが速いの？
色々と処理がありそうだから、
いったん変数に入れるのでは？
- 131 ：
- >>127
$this という名前を出したのはおまえが初めてだろ
独り相撲して自己否定すんなよ
- 132 ：
- >>130
普通はベンチマークするべきところだけど、ソースコード読めばわかるよ。
http://code.jquery.com/jquery-2.1.3.js
$ = jQuery だから、まずこれが実行される
jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context );
}
- 133 ：
- $(this)ということは、selector = DOMElement。
そしてfn.initの中身のうちselect = DOMElementの場合に通るコード
やっている所は★をつけた所だけ。
init = jQuery.fn.init = function( selector, context ) {
// HANDLE: $(""), $(null), $(undefined), $(false)
if ( !selector ) {
return this; //通らない
}
// Handle HTML strings
if ( typeof selector === "string" ) {
// 通らない
// HANDLE: $(DOMElement)
} else if ( selector.nodeType ) {
// ★ やってるのはこれだけ
this.context = this[0] = selector;
this.length = 1;
return this;
// HANDLE: $(function)
// Shortcut for document ready
} else if ( jQuery.isFunction( selector ) ) {
// 以下、通らない
- 134 ：
- >>130
> 色々と処理がありそうだから、
君が言った処理というのは、
this = DOMElementの場合、たったこれだけの
コードで終わりなんだよ。
this.context = this[0] = selector;
this.length = 1;
return this;
色々処理があるのは、DOMElement以外の値
つまりselectorなどを渡した場合の話であって
$(this) や $(DOMElement)の場合は
それらに比べればはるかに高速だってわかるだろう？
- 135 ：
- >>134
セレクタ処理と比較して変換処理が安いのは事実だが、無駄かどうか判断するのは質問者であっておまえじゃない
質問にいたるまでの背景、社内規定、質問者の好み...諸々が何もわかっていないのに安易に「無駄」と断定するなよ
0.1秒の差が顧客を逃がすと主張するGoogleなら些細な見逃さず、塵も積もればを体言するだろうし、ベンチマークテストしてニヤニヤする奴がいるかもしれんだろ
価値観の多様化を認める努力をしろ
- 136 ：
- >>127
$(this)に違う名前をつける意味がわからない
同じような（またはそれとわかる）名前だから意味あるのでは？
- 137 ：
- >>135
質問者ですが、無駄だと思いました。
>>134がいっていることは正しいですよ。
- 138 ：
- >>137
では、あなたと>>134にとっては正しいんだろうな
- 139 ：
- 正しいか正しいかはみた人が決めることよ。
できるのは、その人のために情報を書いておくこと。
$(this)を変数にキャッシュしておくことで
1回当たり0.00001秒早くあるというメリットが有る。
その反面コードの行数が増えて使用メモリも増えるというデメリットが有る。
意味があると思う人だけ、使えばいい。
- 140 ：
- >>137
質問を三日間放置して初めて返した発言が「>>134がいっていることは正しいですよ」か
回答者を人と思わん態度が文章に現れているな
- 141 ：
- × >>134がいっていることは正しいですよ。
○ >>134がいっていることは私の中では正しいですよ。
- 142 ：
- なんか誰にでも噛みつきたい奴がいるみたいだなｗ
- 143 ：
- 質問者ですが放置ですみません
>>137は質問者ではなく、なりすましか自演です
放置というかだんだん難しくなっていって返すにもどうにも
もう少し落ち着いたら返事なり書くつもりで今は展開を見てる状態です
>>128のメソッドチェーンはわかりますしすでに使っています
今気になっているのは$this不要なら$(this)に限らず他のオブジェクトもそうなのかなと
せっかく勉強になるいい展開なのに>>137には残念です
- 144 ：
- >>143
> せっかく勉強になるいい展開なのに>>137には残念です
なら無視すればいいべｗ
あなたの欲しかった情報、
$(this)を変数に入れることによる速度アップは
殆ど無いってことが、ソースコードより明らかになったでしょう？
- 145 ：
- >>143
> 今気になっているのは$this不要なら$(this)に限らず他のオブジェクトもそうなのかなと
セレクタの検索が遅い（場合がある）から、それに関してキャッシュすることで速度アップすることはあるよ。
getElementByIDが使われるあろうセレクタにID単体を入れた場合に有意な速度アップになるかは微妙だけど
でもthisを含めたDOM要素の場合、同様に不要だろうね。
ナノ秒レベルのごくわずかの速度アップが必要っていうのなら話は別だけどｗ
- 146 ：
- >>144
なりすましに無視はないだろ
そこは一言でも言っておかないと
- 147 ：
- ベンチマークしてみたよ。
http://jsperf.com/efivmfqsat2gfbrsm57h
Firefoxの場合なんと2.77倍も速くなったよ！
* $(el) ・・・ 570741 ops/sec
* $el ・・・ 1578389 ops/sec
IE11だと1.04倍
* $(el) ・・・ 49793 ops/sec
* $el ・・・ 51797 ops/sec
Chromeだと1.41倍
* $(el) ・・・ 233268 ops/sec
* $el ・・・ 328296 ops/sec
やはり、$el変数に入れたほうがいいみたいだね！
・・・ここまでは素人判断ｗ
倍率だけで判断するのは素人判断。
- 148 ：
- ここからが本番ね
あらためてよく見ると
Firefoxの場合
* $(el) ・・・ 1.752 ナノ秒/回
* $el ・・・ 0.6335 ナノ秒/回
1回あたり 1.1185 ナノ秒 速くなる
IE11の場合
* $(el) ・・・ 20.083 ナノ秒/回
* $el ・・・ 19.306 ナノ秒/回
1回あたり 0.777 ナノ秒 速くなる
Chromeの場合
* $(el) ・・・ 4.287 ナノ秒/回
* $el ・・・ 3.046 ナノ秒/回
1回あたり 1.241 ナノ秒 速くなる
あとは、これが意味があるかを考えて判断しなさい。
俺はこの結果からパフォーマンスアップのにために
わざわざ変数に入れる意味は無いと思っている。
- 149 ：
- 複雑なセレクタ式を何度もループの中とかで参照するなら効果はあるんじゃないかな
- 150 ：
- >>149
複雑なセレクタの場合は当然そうだよ。
それは最初から今回の話の対象外の話。
今の話は、$(this)を$thisに入れることの意味って話だから。
関係ないけど、よくさブラウザとかのバージョンアップで
速度が○倍になりましたとかいう宣伝文句あるじゃん。
あれっってまさにこれなんだよね。
> Firefoxの場合なんと2.77倍も速くなったよ！
確かに、2.77倍になっている。だけど全体が2.77倍になったわけじゃなく
処理の一部が速くなっただけで、しかも元々ナノ秒レベルの体感できない部分が
10倍になっただけ。だから当然体感できない。
○倍になったって宣伝文句は話半分に聞くべきだよねって話がしたかった。
- 151 ：
- > 10倍になっただけ。だから当然体感できない。
倍率書き間違えたｗ
- 152 ：
- あ、もっとごめん
ナノ秒って書いていたｗ
正しくはマイクロ秒だｗ
ミリ秒の1000分の1
0.000 001秒
なにかおかしいと思ったんだよｗ
なんでだろ。上の書き込みに引きずられてしまったか。
- 153 ：
- 入門書や入門サイトではたいてい
$('_')を使用する際は変数に入れてなどと書かれてるね
メソッドチェーンするにしても複雑だったりやたら長くなる場合、
どうしても後から使う場合、つまり途中に別の処理を挟みたいとき
変数に入れてる
速度云々ではなくて数回使うなら変数に入れるのはセオリーではないかな
関係ないがプログラミングの世界はそれが一般的
- 154 ：
- > $('_')を使用する際は変数に入れてなどと書かれてるね
聞いたことないけど？
どこの話？
- 155 ：
- > 速度云々ではなくて数回使うなら変数に入れるのはセオリーではないかな
> 関係ないがプログラミングの世界はそれが一般的
数回程度ならメソッドチェーン使えばいいので必要ないでしょ。
あんたのいうセオリーはメソッドチェーンが出来ない場合の話だろうし。
そもそも「一般的」の一言じゃなんの説得力もないよ。
具体的なコードでも書いて説明してくれなきゃ。
- 156 ：
- >>154
いくらでもあるしググれば出てくるぞ
晒すと迷惑になるからあえて出さないが
（そういうサイトには感謝しているので）
- 157 ：
- >>148
Firefoxが1～2μs、Chromeが3～4μs
IE11が19～20μs！
それは何かの間違いか、環境の違い
- 158 ：
- こんにちは、質問です。
日本地図のエリア情報を表示できるライブラリを探しているのですが、ご存知の方はいらっしゃいますか？
具体的には、最初は日本地図で各エリア（関東、近畿、四国など）をクリックすると
そのエリアの各都道府県が表示されるようなものです。
イメージとしてはこのサイトのようなものです
http://www.flashwork-s.com/map/map2/index.html
この参考サイトはFlashで作られているのですが、
JavaScriptでこれと似たようなことを出来るものはないでしょうか？
JapanMapというものは見つけましたが、これはエリアからその都道府県の表示が出来ませんでしたので、他のがあれば教えてくださいm(_ _)m
- 159 ：
- すみません、JavaScriptライブラリスレと間違えました
向こうへ再投稿致します
スレ汚し大変失礼しました
- 160 ：
- jQuery Lemmon Sliderの設定方法
http://security.okwave.jp/qa8925996.html
okvave で質問していますが、未回答です。
回答 お願いします。
- 161 ：
- querySelectorAllで、sectionタグ下のimgタグは対象としたい。
→ document.querySelectorAll('section img')
しかし一方でsectionタグ下でもIDがexceptのdivに含まれるimgタグは除外したい
（section div#except img は対象外）。
このようなときにセレクタはどのように記述すればよいですか？
→ document.querySelectorAll('section img:not(section div#except img)')
では（案の定）ダメでした。
sectionの下のimgが必ず何らかのdivに囲まれてるとは限りません。
よろしくお願いします。
- 162 ：
- >>161
+ JavaScript の質問用スレッド vol.123 + [転載禁止](c)2ch.sc
http://peace.2ch.sc/test/read.cgi/hp/1423915644/
- 163 ：
- >>161
ここはjQueryのスレだからなｗ
jQueryならこれでいいだろう。
$('section img').not('section div#except img')
ただ、IDは一個しか無いのが普通だから、これでいいはずだし、
$('section img').not('#except img')
exceptは普通幾つもありそうだからこっちのほうが良さそうだが
$('section img').not('.except img')
- 164 ：
- 移るなら移ると書けばいいのに
移動先も違うからもう知らん
- 165 ：
- スマホのブラウザの「PC版サイトを閲覧」と同等機能を
1つのページ自体に持たせることは可能でしょうか？
PC版とスマホ（SP）版とでURLを分けておらず同一です
PC版だと広告が消えるので、スマホユーザーが上の項目にチェックを
入れてなくてもPC版として表示したいのです
.htaccess、php共にに対応してないのでライブラリやScriptで
できるとありがたいです
- 166 ：
- button()で作ったボタン、マウスオーバーで色が変わるんですが、
クリックした後別の要素をクリックしないと色が元に戻りません
blur()でフォーカスを外せるそうなのでやってみたんですが、変わらずです（何か勘違いあったらすみません）
この設定を変えるにはどうしたらいいでしょうか
- 167 ：
- >>166
はぁ？
CSSでやればいいじゃん。
<style>button:hover {color: red}</style>
<button>btn</button>
おわり
- 168 ：
- >>167
説明不足でした。すみません
↓の画像の「スタート」がマウスオーバー時の状態で、「リセット」がそうでない時の状態です。
http://i.imgur.com/apQp6mf.png
どうやらblur()はちゃんと効いていたんですが、「スタート」のクリックイベントで実行する関数内で
「スタート」をprop('disabled', true')するとマウスオーバーをやめても状態が残ってしまうようです。
これを改善したいのです
- 169 ：
- >>168
だからCSSでやればいいじゃん
- 170 ：
- >>169
>>166は忘れて下さい
>>168での「状態が残ってしまう」は、disabledをfalseに戻して再度マウスオーバーしないと青のままということです
↑がCSSでやればいいじゃんでしたらどのように書けばいいでしょうか
- 171 ：
- >>167のコード書いた？
JQueryで書いた努力は無駄だったということで要りません。
マウスオーバーで色を変える処理はCSSだけでできます。
- 172 ：
- >>171
書きましたがやりたいことはできませんでした
$('#start').button();
$('#reset').button();
$('#start').click(function(){
メソッド1() ← この中で$('#start').prop('disabled', true).addClass('disabled');
this.blur();
});
$('#reset').click(function(){
メソッド2() ← この中で$('#start').prop('disabled', false).removeClass('disabled');
this.blur();
});
↑のように書いた時、
スタートを押す→スタートがホバー状態（青）でdisabledに→リセットでdisabled解除→スタート青のまま（マウスオーバーして離すと灰色に戻る）
という動作をするので、スタートがdisabledになる時、またはリセットでdisabled解除した時にスタートには灰色になっていてほしいのです
- 173 ：
- >>172
ホバーって用語をググったほうがいいよ。
根本的にな所を間違ってるから。
- 174 ：
- >>172
お前がやりたい事はこれだろ？
ホバーで色なんか変えてないが、お前がやりたい事はこれだろ？
http://jsfiddle.net/xexst8px/
- 175 ：
- >>172
その文章意味がわからんが、もう少し頑張って解析してみたよ。
これであってるだろ？
http://jsfiddle.net/xexst8px/2/
- 176 ：
- すみません。2つ質問があります。
①
#gnavで囲ったリストのaをマウスオーバーすると<span>で作った下線がついてくるというものを作りたいと思っています。下線は動くようになったのですが、
これをマウスオーバーしていない時やページを読み込んだ時には.current(現在位置)の位置に戻ってきて欲しいのです。
<script>
$('a','#gnav').mouseover(function(){
$('span','#gnav').animate({
'width': $(this).width(),
'left': $(this).position().left}
,'fast');
});
</script>
②
jQuery.Bottomというプラグインをつかって、ページの最下部までスクロールしたときに、次のhtmlを読み込んで欲しいのですが、html読み込みの仕方が分からず…
（01.htmlを最下部までスクロールしたら、続けて02.htmlを読み込むという感じ）
教えて頂きたいです。
- 177 ：
- >>173-175
勉強になります
やりたかったことは>>175の方の動作でした。ありがとうございました
- 178 ：
- ＞ページの最下部までスクロールしたときに、次のhtmlを読み込んで
こんなクソ不便でうっとうしいのやめた方がいい
- 179 ：
- >>178
FacebookやTwitterで使われてる
無限スクロールのことだよ？
不便？？？
- 180 ：
- >>179
あれ嫌いって人は一定数いる
どこまでスクロールしても終わらないのが嫌とか、
見たいときは自分でクリックするから余計なお世話とかでイライラするとか
- 181 ：
- そりゃ、それぞれ考え方は違うんだから、
どんなものにも、嫌いな人は一定数いるだろ。
たった一人であっても一定数だからな。
具体的じゃないので、なんの参考にもならん。
- 182 ：
- >>181
クソ不便って言ってる人にそれがわからんって言ってる人がいたから解説した
俺は有ろうが無かろうがどうでもいい派
まあ嫌な人もいるんならオンオフできればいいなとは思う
とりあえず質問に関してはプラグイン名でググってデモ参考にするのが早いんじゃない？
- 183 ：
- >>179
>>178ではないが、Autopagerizeが不便な場合というのは「ページ読み込む場所の下にあるコンテンツを見たい場合」
フッタにあるリンクをクリックしたくて延々とスクロールして諦めた記憶がある
せめて実装するならオプション的な扱いにしてOn/Offできるようにしてほしい
- 184 ：
- こんな荒らしが立てた過疎スレで質問せず、ライブラリ総合スレで質問した方がいいと思う
JavaScript ライブラリ総合質問所 vol.4
http://peace.2ch.sc/test/read.cgi/hp/1400834117/
- 185 ：
- コードの書き方でjQueryがどうも好きになれなくて
触っとかなきゃと思いつつもスルーしてきましたが
最近になってjQueryはオワコンだという声が囁かれています
生理的に受け付けないものでなければビッグウェーブに乗りたいのですが
なんかjQueryに変わるものが出てきたのでしょうか？
lodashやasm.jsとかjsスレで名前はきくもののこれってjQueryの変わりというものではないですよね？
- 186 ：
- Vitual DOMを使ったDOM操作をしないライブラリが増えてきた（React.js等）
DOM操作をしない代わり、サーバーサイドのようにテンプレートを使ってDOMを生成する。
jQueryやDOM APIがHTMLとJavaScriptを分離した上で、JavaScriptから
HTMLを書き換えていたのとは違い、JavaScriptの中にHTML出力コードが含まれるので、
document.write('<span>あいう</span>')をしているような感覚になるかもしれない。
HTMLで書く部分が減ってJavaScriptから出力することになるから、
ウェブアプリのような画面の大部分を動的に変更するような場合に適している。
ライブラリというよりもJavaScriptフレームワーク。
このVirtual DOMを使ったフレームワークが普及すると考える人達にとっては
jQueryがオワコンというよりも、DOM操作自体がオワコン。
もう一つは、Web Components（Shadow DOM）系。こっちはウェブサイトのような
静的なHTMLが多い場合に適している方法。既存のHTMLの中に一部分だけ高機能な要素を
埋め込むむためのカスタムタグを作れる。これはHTML5で将来標準化される予定の機能
この機能を使った汎用パーツ集がPolymer等
現時点でWeb Componentsに完全対応しているブラウザはないので、Polymerは
Web Componentsのエミュレートも行っている。
こっちはHTML+CSS+JavaScriptをまとめたコンポーネントを作るためのもので、
内部をどう実装するかは自由だが、その仕組み上どんなに複雑なものでも内部は隠蔽される。
複雑な部分が隠蔽されたあので残る部分は（利用者が書かなければいけない部分）はシンプルになる
だからそのコンポーネントを利用する時は、DOM APIもしくはそれ簡潔に記述できるjQueryで十分だろう。
Web ComponentsとVitual DOMを組み合わせても良いが現時点では重いだけだろう。（単体ですら重い）
一部の人がjQueryの次と騒いでいるだけでスマホレベルの低スペックまで考慮するならば、
現時点ではjQueryが一番バランスがとれている。
- 187 ：
- すばらしい分析
- 188 ：
- いつものポジショントークである
- 189 ：
- >>179
Endキーが使えない
オプションがないのは糞
- 190 ：
- >>189
> Endキーが使えない
普通に使えるが？
- 191 ：
- >>190
それでページ末が出るか？
- 192 ：
- >>191
でるぞ？
- 193 ：
- >>190,192はわかってないから相手するだけムダ
- 194 ：
- いや、わかってないのはお前だろｗ
まあ、わかってない奴とやりあっても
無駄なことには同意するがｗ
- 195 ：
- 負け惜しみプッ
- 196 ：
- >>189がいってるのは>>183と同じ
- 197 ：
- やはり不便なサイト作るやつはその不便さに気がついてないってことだな
テクニックにうぬぼれてユーザーサイドの使い勝手を忘れてしまう典型的ダメパターン
- 198 ：
- >>186
詳しくありがとうございます
まだjQueryが強いということですね
VirtualDOMはAjaxの時のように
昔からあったが使われてなかったみたいな感じのものなんですかね
面白そうなのでちょっと見てみようと思います
- 199 ：
- >>179
勝手にスクロールするから重い重い。
専ブラのように1-、最新50、全部などユーザーに選択肢を与えるほうが理想。
- 200 ：
- 手動でスクロールしたほうが重いだろｗ
- 201 ：
- またわかってないのが沸いてきたｗ
- 202 ：
- 手動でｗ
専ブラのように～が先ずわかってなさそうだ
- 203 ：
- $(document).ready(){
});
この中に、
$("#id").click(function(){});
$("#id2").keypress(function(){});
$("#id3").input(function(){});
のようにイベントだけ定義していったら
イベント駆動型プログラミングっていえますか？
- 204 ：
- ある要素からtext()でテキストだけを取得したいのですが、
<noscript>があるとその中にあるタグまでも取得されてしまって困っています。
この挙動は仕様なのでしょうか？それともバグなのでしょうか？
再現例
http://jsfiddle.net/tkm21Ljh/
また、<noscript>内にタグがある場合でもテキストだけを取得するにはどうしたらいいでしょうか？
どなたか教えてください。
- 205 ：
- >>204
仕様でしょう。
<noscript>内は全て文字列扱いだから、
置換で消すしか思いつかんね。
- 206 ：
- <noscript>の中身が全部文字列とかおかしいだろ。
例えばstyleがあったら、そのstyleはちゃんと有効に働くべきだ。
iframeがあったらちゃんと別ページを読み込むべきだ。
- 207 ：
- >>206
javascriptをオフの環境ではそうなってるかと
- 208 ：
- 関数が突然消えるですが、なぜかわかりますか？
例：
$("Calendar").fullCalendar(); // カレンダーを表示する。
console.log($.fullCalendar); // 正しいアドレスが表示される。
// AJAX通信をする。
$.ajax({
type: "POST", // HTTP POST
url: "./AAA", // サーブレットURL ＝ User
success: function(data, dataType) {
console.log($.fullCalendar) // ★ 何故かundefind になってしまう！
}
});
- 209 ：
- >>208
いや、書いてあるものが消えるってことはないでしょ。書いてあるんだから。
- 210 ：
- ヒント：エイプリルフール
- 211 ：
- jquery使用のResponsive Multi-Level Menuというメニューを使ってみたんですが、下画像のようにdiv領域が別の要素の上に来てしまいリンクなどを
クリックできません。この状況はどうにかできないでしょうか
http://i.imgur.com/RUiI4wn.png
- 212 ：
- clone()はajaxで読み込まれた要素に対しても
サポートされているのでしょうか？
- 213 ：
- される。コールバックで実効してないから効かないんだろ
- 214 ：
- >>213
コールバックはして効いてます。
thx
- 215 ：
- >>213
つ サポート
- 216 ：
- 質問です。
スマホでサイドからメニューがぬるっと出てくるSidr（jquery.sidr.min.js）
というライブラリを使用しています。
今までは問題なく動作していたのが、気がついたら動作しなくなっていました。
しかしChromeのエミュレータ環境では動作します。
iPhone5sのchrome、safari、両方とも動作しません。
いつから動作しなくなったのか不明ですが、その間
アプリのバージョンアップやOSのバージョンアップはあったかもしれません。
ファイル類のFTPし直しはありました。
考えられる原因と対処方法を教えてください。
- 217 ：
- 完全に行き詰まりました。
iOSバージョンアップしてもダメ。
アプリ再インストールしてもダメ。
jQuery自体を再度見直して、他のjsをすべて削除してみてもダメ。
同じjQueryを使用しているサンプルサイトを確認したところ動作する。
さらに問題のページは別のiPhoneでは動作することが判明。
どこに原因があるのかすらさっぱり分からなくなってお手上げです！
iOSの板かどこかに行って質問するべきなのか・・・
どなたか助けてください〜
- 218 ：
- 同じライブラリ使って同じ構成で組んで仮アップ
肝心のコードがない状態で分かることなんて限られるだろ
- 219 ：
- すみません。そうですよね。
時間ができたらコードを見ていただけるようにやってみます。
- 220 ：
- 解決しました。
jQueryは全く関係なく、サイドメニューを呼び出す側のメニューボタンのcssを
ちょっといじったら直りました。
ちなみにフッタ固定メニューが数個ならんでいて
display: inline-block; だったのを display: block; float: left;
にしたら直りました。
- 221 ：
- 解決したなら良かったけど、別のiPhoneだと動いたのは不思議だな
キャッシュがこびりついてたんかね
- 222 ：
- 別のiPhoneの詳細がわからない限り何とも言えないわｗ
- 223 ：
- すみません誘導されました
只今個人でウェブサイトを作っていて複数の画像を回転させようとしているのですが
ひとつづつに動作を記述すのがめんどいので同じ所は関数を作ってまとめようと思い
自分なりに考えてやってみたのですがうまくいきません汗
よかったらどうすればいいのか教えてください
一応個別で一つづつ書いた場合は回転しました。
サンプル
html---------------------
<html>
<head>
<script src="jQueryRotate.js" type="text/javascript"></script>
<script src="rolling.js" type="text/javascript"></script>
</head>
<body>
<img id="imge001">
<img id="imge002">
</body>
</html>
rolling.js-----------------------
$(function(){
function rollin(nam1,nam2){
$(function(){
var angle = 0;
setInterval(function(){
angle+= nam1;
$("nam2").rotate(angle);
},10);//
rollin(5,image001);
rollin(2,image002);
});
- 224 ：
- tab上にdropdownchecklistを置いたのですが、
タブ#1にはリストが表示されるのですが、タブ#2に切り替えると、タブ#2上にはリストが表示されません。
対処方法を教えてください。よろしくお願いします。
以下、ソース抜粋
<script type="text/javascript">
$(function() {
$('#tabs').tabs();
$("#id1").dropdownchecklist();
$("#id2").dropdownchecklist();
});
</script></head>
<body>
<div class="demo">
<div id="tabs">
<ul>
<li><a href="#tab1" >タブ #1</a></li>
<li><a href="#tab2">タブ #2</a></li>
</ul>
<div id="tab1">
<select size="4" name="id1" multiple="multiple" id="id1" style="width:100%" >
<option value="1">Mango</option>
<option value="2">Apple</option>
</select>
</div>
<div id="tab2">
<select size="4" name="id2" multiple="multiple" id="id2" style="width:100%" >
<option value="1">Mango</option>
<option value="2">Apple</option>
</select>
</div>
</div></div></body>
- 225 ：
- >>224
$("#id1").dropdownchecklist();
$("#id2").dropdownchecklist();
$('#tabs').tabs();
この順番にすると動くね。
想像だけど、tabs()を実行した時に、#id2が非表示になって、
その非表示状態タブのセレクトボックスに対してdropdownchecklist()を
実行することで、変な状態を保持してしまうんじゃないかな？
- 226 ：
- >>225
ありがとうございます！！
大変助かりました。
- 227 ：
- そうそう一般的にこういうたぐいのもの
（タブ化した後にやった何かがタブに反映されない）みたいなのって
それに対応するために更新メソッドがあるよ。
さっき試したの消しちゃったから確認してないけど、refreshすれば反映されないかな？
http://api.jqueryui.com/tabs/#method-refresh
- 228 ：
- なんでjQueryのプラグインサンプルって
余計な事盛り込むんだろう。
本来欲しい部分だけを端的にDLさせろよって思う。
自己満足にも程がある
- 229 ：
- >>228
例えばどれ？
といか、プラグインを使うサンプルなのか
プラグインを作るサンプルのかどっちかわからんがｗ
なお個人的にはjQueryの誰か知らん奴が作ったプラグインは
基本的に使うなというスタンス。
使うならよく調べて自作では大変だってときにしか使わないけどね。
- 230 ：
- src=でCDNを使用した場合、ユーザーのキャッシュが有効になるのは
バージョンの3つの数字（例 1.11.1）全て同じでないとだめですか？
- 231 ：
- あるページでは1.11.1を、リンク先の別のページでは1.9.1を初めて、だと、だめでしょうね、あたりまえですが。
しかし、どこか他人のサイトで既に全く同じCDNスクリプトを読んでいたら、ブラウザはそのキャッシュから拾うでしょうね。
- 232 ：
- 記述とキャッシュの、3つの数字さえ同じならサーバが違ってもキャシュは有効？
- 233 ：
- urlが違えば無効
- 234 ：
- >>233
ありがとう
するとかなり限定されますね
- 235 ：
- >>234
同じページに2回アクセスしたら、URL一緒だろうから
キャッシュは有効だよ。
- 236 ：
- 言うまでもなくsrc属性値もURLだな。
- 237 ：
- >>235
確かに
キャッシュだけで言えば、DLしてサイトに置いても同じってことかな
どうせエラー対策で置くんだし
- 238 ：
- $.parseHTMLでのscriptについて教えてください。
<div id="test"></div>
<script>
str = '<script>document.write = "青です";</script>';
html = $.parseHTML( str,true );
$('#test').append( html );
</script>
(1)○ str = '<p>青です</p>';
(2)× str = '<script>document.write = "青です";</script>';
(3)× str = '<script>document.bgcolor = "blue";</script>';
strの行が
(1)のようにhtmlタグだけは表示されますが、
(2)(3)のようにstrにscriptを含むとうまくいきません（これが目的です）。
#testには何も書かれず、scriptを記述した辺りに
「'; html = $.parseHTML( str,true ); $('#test').append( html ); 」
の文字列が表示されます。
trueの有無でも、<script>タグの有無でも結果は同じです。
記述や使用法のミスがありましたらご指摘願います。
- 239 ：
- 本題じゃないが、'</' という連続した2文字を <script>要素の内容に書いちゃダメだよ。
今では、誰でも平気で書いているが、しかし、今でも、たとえばjQueryのソースを見てみろよ、<script>要素の内容になる場合を想定して '<\x2f' とエスケープしているだろ。
最低でも、'<\/' とエスケープしなきゃダメだ。
- 240 ：
- document.write は setter じゃなくてメソッドだな。
歴史的に言うと、そういうのは20年前は期待通りに実行された。
たとえばIEでJSなのにVBSを書き出して実行できた。
18年前にIEに、execScriptやcreateElementやinnerHTML/innerTextが組み込まれた辺りから不要になり始めた。
mozillaがかなり安定したのが15年前だが、その頃にはそういうユーザーエクスペリエンス的に悪とされるdocument.writeなやり方を試す事すらアホらしくなったから、だれもやらなくなった。
因みに、今でもちゃんと期待通りに実行される。jQueryでやらなくても良いなら、その部分は普通にJSで createElement/insertBefore とか inertAdjacentHTML とかすれば良いだけだな。
- 241 ：
- つまらんうんちく乙
あげくわからずか
- 242 ：
- オワコンjQueryは既に書く事自体がダサい恥ずかしい時代に突入してしまったので、恥ずかしげもなく具体的なコードで回答する馬鹿は激しく少なくなるよ。
- 243 ：
- >>239
指摘ありがとう。（けっこう有名なサイト参考にしたのですが。）
それに変えても同じでした。
>>240
実際やろうとしてることは別のことです。
簡単な例で試しやここに書きました。
jQueryでお願いします。
実際やろうとしてるscriptを、$.parseHTMLを使用せず
#test直に書くと問題なく処理されます。
サーバ（無料）が原因ってことはあるのでしょうか。
ヘルプなど特に記載もなく詳しくは不明なのですが。
- 244 ：
- >>242
ようは答えられない自分は
恥ずかしい存在だということか
- 245 ：
- >>242
だからなんだと
今そんなこと関係なくね
- 246 ：
- カカオトークID
46497979
ヤリマン女子高生です
やったって下さい
- 247 ：
- >>238
× document.write = "青です";
○ document.write("青です");
× document.bgcolor = "blue";
○ document.bgColor = "blue";
あと、 $.parseHTML() は何のためにやってる？
append() は勝手に HTML にパースしてくれるから、特に理由がないのなら $.parseHTML は必要なし。
あとは>>239の言うように「</script」をエスケープする。
<div id="test"></div>
<script>
str = '<script>document.bgColor = "blue";<\/script>';
$('#test').append( str );
</script>
- 248 ：
- 話ぶった切ってすいません。
jQueryにて追加されたタグや属性って
なんて呼べばよいのでしょうか？（HTML側のソースには元々無いタグ）
- 249 ：
- >>247
これはお恥ずかしい、すみませんでした。
ここ用に不要部分を省いたり書き換えたときうっかりしてたようです。
しかし相変わらず目的のscriptではできません。
$.parseHTML() は要素として生成できないかと考えました。
scriptが元々自分が書いたものではない上に複雑で
とても$('test',{})には書き換えられないと思いました。
scriptを別ファイルにして$.getScriptで読んでも同様でした。
HTMLのみでしたら$()、$.getでも何でもすんなりいきます。
少し何ができて何ができないかもう一度整理してみます。
ありがとうございました。
- 250 ：
- >>242
オワコンなんて言葉未だに使ってるのいるんだ
- 251 ：
- >>120も同一か
>>185-186も自演くさい
- 252 ：
- ; (function ($) {
$.fn.aaa = function (args) {
args = args || {};
return this.each(function () {
function bbb(n) {
// 省略
}
});
};
})(jQuery);
jQueryもJavaScriptも初心者なのですが、こういうのか書かれている file.jsが有ったとして、
この中のbbbという関数を別のJavaScriptから呼び出すことはできますか？
やり方を教えてください。 ; ($) $.fn. || {} (jQuery) など、何の事かさっぱりわかりません。
- 253 ：
- >>252
それはjQueryは関係ない話だね。
関数の中にある関数は基本的に外からはよべないよ。
ソースがあるんだからリファクタして
他から使えるようにすればいいだけだと思うけど。
ライセンスに気をつけて。
- 254 ：
- >>253
解説ありがとうございました。
よく理解できました。感謝です。
- 255 ：
- ネットで見つけたjQuery1.3ライブラリを使うサンプルプログラムを試したら
スイスイ動いたのですが、jQuery1.9や1.10などの新しいライブラリで
動かすと、動きがカクカクして反応が悪いのですが、こういう場合何が
原因でしょうか？
- 256 ：
- >>255
それはどれかね？
内緒にするようなことじゃないんだから
そのサンプルプログラムを晒したほうが早い
- 257 ：
- >>248をお願いします。
特に呼び名は無いということでしょうか？
仮想タグみたいな
- 258 ：
- >>257
ない
- 259 ：
- 動的な要素とかじゃ？
- 260 ：
- 動的要素か。ふむふむなるほど
- 261 ：
- Dynamic Html Element
略して
D.H.E.(嘘
- 262 ：
- HTMLGenericElement
- 263 ：
- 縦に複数画像配置してスクロール時に現在位置の画像から3枚目程度先の画像までを先読みさせるのはどうやるのでしょうか
- 264 ：
- 要らない工夫の代表例だな。
だから非力なスマホではJSオフにかぎる。
- 265 ：
- ついでに画像表示やCSSもオフにすれば？
- 266 ：
- // #id_nameに関する各種の属性を沢山取得したい場合、
var t = $('#id_name').css('top');
var b = $('#id_name').css('bottom');
var l = $('#id_name').css('left');
var r = $('#id_name').css('right');
// これよりも、
var id = $('#id_name'); // 変数に代入しておいて
var t = id.css('top');
var b = id.css('bottom');
var l = id.css('left');
var r = id.css('right');
// とやるほうが速かったりしますか？
- 267 ：
- そうですね。
- 268 ：
- >>267
有り難うございました。
- 269 ：
- すみません、jQuery.ui.datepickerで？dateFormatがyymm
（例：201403）の場合に、その日付のカレンダーが
表示されないのですが、どうしたら良いでしょうか？
いい方法がないなら、DBから取得した日付文字列の末尾に
01を
くっつけてyymmddにしてクライアントに渡そうと思います。
- 270 ：
- 用意された方法はない、ということでしょうか。
ありがとうございました。
↓のライブラリを使ってみます。
jquery.ui.datepicker.jsに最小限の手を加えて年月選択UIを作る at softelメモ:
https://www.softel.co.jp/blogs/tech/archives/4297
- 271 ：
- このライブラリも yymdd のように d を含まないと
カレンダーにその年月のが表示されないんですね。
これはバグかな。弱った…。
- 272 ：
- オーバーライドじゃなくて書き換えるのかw
Perl4時代のCGIスクリプトか？w
なんかもうそんなクソライブラリコードなんて見るのも使うのも嫌だなw
そもそもそんな機能は無くても困らないからわざわざJSで実現してクロームに合わせなくていいよと思う。
- 273 ：
- var data = $('#id').css('border-left-color');
で
data = "rgba(82, 36, 36, 1)"
が得られたとして、これを
data = "rgba(82, 36, 36, 0)"
に変更したいのですが、正統的な手法はありますか？
- 274 ：
- 透明度を1から0にするならopacity使ったほうが楽だと思う
- 275 ：
- >>274
レスありがとうございました。
ググッてみたのですがborderのopacityのみを変更する方法が
見つかりませんでした。
- 276 ：
- α=1の時にrgbaで返すのはIEくらい？、Chrome、Firefoxはrgb
α=0の時はFirefoxはtransparentになる
色決め打ちじゃなくてαだけ変えたいとなると意外と面倒？
- 277 ：
- 単純にボーダースタイルをnoneにしたらダメなん？
- 278 ：
- >>277
border幅が10pxだとすると、
noneにすると、borderの幅が無いことになるんじゃないですか？
そすると左に10pxずれてしまいます。そうではなくて、
透明なborderを10px描きたいのです。
- 279 ：
- CSSだけでは無理だと思う。
それに計算済みスタイルはこちら側が設定した値を好き勝手に変えてくるので、
取得ではあまり期待しないほうがいい。
目的は分からないけど、単にrgbのデータを保存したいだけなら、配列とかを使ってJS側で保管したほうがいいかと
- 280 ：
- >>278
マージンの値を取得
それにボーダーの太さを足す
マージンを上で出た値に変更
- 281 ：
- Firefox は DOM-Level-2-Style に追加で alpha という名前のプロパティが独自に実装されているから読み取れる。
getComputedStyle(document.getElementById('id'), '').getPropertyCSSValue('border-left-color').getRGBColorValue().alpha.cssText
こんな風にして(例えば .red.cssText)取得して使う。
もともとsetRGBColorValueみたいなメソッドは定義されていないし独自実装も無いから諦めてまとめて指定するしかない。
特記すべき注意点として、setPropertyで2番目の引数を0にして透明にすると以降の変更が不可能になるバグがある。
これは凡そ0.002以上1以下の値に収める事で回避できる。
- 282 ：
- jQueryって
$(#id)のように#が必要ですが
これはなぜですか?JSでは#不要だからよく混乱します。
- 283 ：
- >>282
> これはなぜですか?JSでは#不要だからよく混乱します
JavaScriptじゃなくて、DOM APIですね。
DOM APIは#が不要な代わりに、
id専用のgetElementById
class専用のgetElementsByClassName
タグ専用のgetElementsByTagName
name専用のgetElementsByName
と言う風に冗長な名前で幾つもの関数が必要になってしまいました。
しかも、タグ＋クラス とい指定はできないですしね。
所でCSSというのは知っていますか？
HTMLで要素をデザインする時に使うもので、
#id { color: red } とか
.class { color: blue } とか
出来ます。
しかも組み合わせて
#id.class[name="hoge"] + span { color: green } とか
できちゃうんですね。強力です。これをCSSセレクタといいます。
CSSはHTMLと一緒でウェブプログラマにとって必須知識で
初心者以外だれでも知っていると言っても過言ではありません。
jQueryが画期的だったのは、だれでも知っているCSSセレクタを使えるようにしたところです。
これにより、冗長な名前で幾つ必要で柔軟性がないものを
たった一つの関数 $(CSSセレクタ)で実現してしまったわけです。
それから数年後、jQueryにインスパイアされて
DOM APIにもquerySelectorAllというCSSセレクタが使える関数が追加されました。
冗長な名前という問題はしませんでしたが。だから「JSでも#は必要」とも言えますｗ
- 284 ：
- あ、CSSセレクタというのは、
「#id.class[name="hoge"] + span」の部分のことですよ。
当然、 $('#id.class[name="hoge"] + span') という書き方も出来ます。
これはDOM APIではquerySelectorAllが登場するまで出来なかったことです。
querySelectorAllはIE8以降で対応です。
jQueryはIE6の時代からありますね。
- 285 ：
- >>282
詳しい解説有難うございました。
CSSは現在勉強中ですが、282さんの解説は要点が良くまとまっているので
大変参考になりました。
>#id.class[name="hoge"] + span { color: green } とか
>できちゃうんですね。
こんな書き方は知らなかったです。
奥が深いですね。
- 286 ：
- http://jsfiddle.net/496c9/
このサンプルで質問なのですが、
選択したボタンの背景色を黒っぽくしているのは、以下のCSSの部分だと思うのですが、
#donate input:checked + span {
background-color:#404040;
color:#F7F7F7;
}
これをCSSファイルではなくて、jQueryで
$'( ).css( );
みたいな命令を実行する方法で実現できますか？
要するにCSSファイルを使わずにこのサンプルを実行する方法があるのかどうか知りたいのです。
- 287 ：
- $().css() だと要素に直接 style="" で指定するから無理ぽ。
<style>を直接追加するべし。
$("<style>").text("#donate input:checked + span { background-color:#404040; color:#F7F7F7; }").appendTo("head");
- 288 ：
- >>287
なるほど。ありがとうございました。
- 289 ：
- >>286
念の為に言っておくけど、そういう見た目を変えることは
CSSを使ってやるのが正しい回答。
JavaScript（jQuery）を使わずにできるのはCSSでやる。
そのサンプルはちゃんとできてる。
>>287でもいいけど、
1. JavaScriptファイルを使うならば、そのファイルを読み込む所があるはず
ならば、document.write("<style>～</style>") で吐き出したほうがいい。
2. JavaScriptファイルすら使わないならHTMLに直接<style>～</style>を書けばいい
- 290 ：
- <img id="a" src="hoge.jpg">のhoge部分を適当な文字列を一旦入れておいて
.attr（）で書き換える場合、
firefoxでは一旦hoge.jpgとしてｓｒｃを読み込もうとして、ファイルが見つからず、エラーになり、表示速度に影響を及ぼしているようです。
※表示は意図したとおり（jQueryで）になります。
一般的にはどうするべきでしょうか？（hoge.jpgという画像を実際にサーバーにUPしておけばいいのかもしれませんが）
- 291 ：
- src="hoge.jpg" 書かなければいいんじゃないの？
- 292 ：
- >>291
なるほど。
文法的にはNGそうだが・・。
- 293 ：
- img タグを動的に作るとか
- 294 ：
- 透明なダミーイメージを指定しとくとか
- 295 ：
- >>293
それだなｗ
>>294
最悪それも考えてた
- 296 ：
- >>290
> 一般的にはどうするべきでしょうか？
なんのためにそのようなことをするのか次第
- 297 ：
- >>296
ページによって動的に変化させる為、srcの文字列を変数のように扱いたいから。
表示されるページの所定の箇所を取得してsrcに入れる。
- 298 ：
- 1っ箇所だけなのでMVVMフレームワーク使えとかはナシの方向で。。
- 299 ：
- >>297
それなら一般的にはCSSを使う。
まず、ページごとにユニークな名前をつけて
それをhtml要素、またはbody要素のidかclassに入れる
例
<html id="page-a"> とか <body class="page-b">
あとは、CSSで画像を指定する。
#page-a .name { background-image: 画像URL }
#page-b .name { background-image: 画像URL }
- 300 ：
- ふつうに $(document).ready だろ。
- 301 ：
- >>299
1つのファイルを動的に変化させるCMSのテンプレの場合、
bodyやｈｔｍｌに個別id振るのはさすがにナンセンスかと。（やろうとすればできますが）
例えば、ページタイトルやぱんくず、ディレクトリ（URL）から判別して動的にsrcを生成したいケースです。
>>300
どういうことですか？
- 302 ：
- てか>>293が一番良さそうな気がしてる
- 303 ：
- >>301
1つのファイルを動的に変化させるCMSのテンプレの場合、
srcの部分も動的に変更するので
JavaScriptでやらないのが一般的です。
- 304 ：
- >>302
それはないｗ
JavaScriptはページが表示されたあとにユーザーの操作などで
変化するときであって、ページごとに固定で決まっているような所を
JavaScriptで出力しない。
検索エンジンのインデックスに登録されにくかったりするし。
- 305 ：
- 固定じゃないじゃん
- 306 ：
- 空のimg要素をGoogleにindexさせる意味は全くない
- 307 ：
- >>306
今の話は、ページごとに異なる画像。
空の画像の話はしてない。
- 308 ：
- >>305
>>301に書いてあるとおり
例えば、ページタイトルやぱんくず、ディレクトリ（URL）＜が違うページごとに＞
＜そのURLに＞から判別して＜そのURLに応じた画像を＞動的＜ページの＞にsrcを生成したいケースです。
- 309 ：
- >>303
そりゃそうでしたね。
ありがとうございました。
- 310 ：
- WordPressならこんな感じか。めんどくせえｗ
<?php
$cat_now = get_the_category();
$cat_now = $cat_now[0];
$parent_id = $cat_now->category_parent;
$now_id = $cat_now->cat_ID;
$now_name = $cat_now->cat_name;
echo '<img src="' . $now_name; . '.png" />';
?>
- 311 ：
- 訂正 不要な部分を削除
<?php
$category = get_the_category();
echo '<img src="' . $category[0]->cat_name; . '.png" />';
?>
- 312 ：
- >>311をjQueryでやったら面倒なことになるね。
- 313 ：
- http://hisasann.com/housetect/2008/06/jquery_1.html
で
$().alert("hogehoge")
が実行出来る理由が分かりません。
何故$()はjQueryオブジェクトになるんですか?
- 314 ：
- >>310-311
文字列結合が「;」で区切られてバグってる。
ていうか、ミスを直したとして、それをapplication/xmlでレスポンスするのか？
このスレはそういう板に属しているよな、いわゆるviewをブラウザのJSが担う場合の話をするスレ。
- 315 ：
- >>313
念の為に言っておくけど、リンク先みたいな意味不明なコードはなくなよ？
$('.hoge').css('color', 'red')
これが実行できるのはわかるよね？
全ての、class="hoge" になっているものが全部赤くなる。
では一つもclass="hoge"がなかったら？
そう一つも赤くはならない。
そして重要なのはエラーにもならないってこと
見つからなかったらどうしよう？ と思ってこう書くのはダサいだろ？
if ( $('.hoge').length > 0 ) {
$('.hoge').css('color', 'red')
}
jQueryはこのようなコードを書かなくていいように、
見つからなければ「0個の要素に対して処理を実行」
という操作を行うようになっている。
0個の要素に対して処理を行うのだから結局何もしないのだけど、
それでもcssメソッドは呼び出されてる。cssメソッドの中で
見つかった要素の数だけ（この場合は0回）ループしてるわけ。
$()というのは0個の要素にマッチしたjQueryオブジェクト。
だからそのオブジェクトに対してalertを呼び出せる。
だけど普通はalertの中でループをするんだが、これはやってない。
だから通常のjQueryプラグインではない意味不明なコードというわけ。
- 316 ：
- >>314
> それをapplication/xmlでレスポンスするのか？
text/htmlでいいだろ？
html5として正しいマークアップなんだからｗ
- 317 ：
- >>315
師匠！これからもよろしくお願いします。
- 318 ：
- >>317
ついでに雑学。
このように条件分岐を必要なくするために
何も効果はない空のオブジェクトを用いるやり方を
Null Objectパターンという。
そして$() が空のjQueryオブジェクトを返すようになったのは
実はjQuery 1.4から。
https://api.jquery.com/jQuery/#returning-empty-set
- 319 ：
- ダサいかどうかの話になると今はもうjQueryがダサくて羞恥プレイ状態です。
- 320 ：
- やっとjQuery覚えたのにもう他のライブラリめんどくせーよ
- 321 ：
- >>318
師匠！これからもドンドン教えて下さい！！
- 322 ：
- 一つのhtmlでページネーションで複数ページに分けて
次のページ開いた時にだけ画像読み込むようにするのってどうやんの？
サイト開いた時点で一気に画像読み込んでちゃ意味ないし
- 323 ：
- $("input[type=radio]");
でラジオボタンだけが取得できると思うんですが、
radio_0
radio_1
radio_2
が有る場合、得られる結果は、0,1,2の順に並んでいることは保証されますか？
radio_2
radio_1
radio_0
になる場合もありますか？それは何によって決まるんでしょうか？
- 324 ：
- HTMLソースに開始タグをその順番で書いてあるなら心配無用
- 325 ：
- >>324
HTMLソースに出てくる順なんですね。
有難うございました。
- 326 ：
- ttp://qiita.com/kazu56/items/f31faa7d2505a417496f
↑の方法でjQueryプラグインを自作してますが、
例えば $('input.foo').sample(); としてクラスに対して設定し、
プラグイン内で $(this).on('focus', function(){ $(this).val('bar')});
とすると、input.foo すべてに bar が入ってしまいます。
focus した input.foo のみに対して動作させるにはどうしたらいいですか？
- 327 ：
- >>326
全部のコードここかどこかに書いて
- 328 ：
- >>326
.sample();が.each(function(){}してないんじゃない？
- 329 ：
- https://jqueryui.com/slider/#default
にあるスライダーを使おうと思うのですが
0=============[]=============100
こんな感じになりますが、このツマミの上に数字を書きたいのですが
可能でしょうか？
0======[30]==================100
こんな感じです。やり方知っている人教えてください。
ググッテも出てきません。
- 330 ：
- >>329
スライダーにそのような機能はないので、
自分でそう表示されるように作ってください。
スライダーの値と表示する場所の情報さえあればできます。
そういうのは自分で作るものだから誰も書いてないのですよ。
- 331 ：
- >>329
↓これに
https://jqueryui.com/slider/#rangemax
↓これ記述で完了
<script>
$(function(){
$('#amount').appendTo('.ui-slider-handle');
});
</script>
<style>
.ui-slider-handle{position:relative; display:block; padding:5px; }
#amount{text-align: center; position:absolute; top:0; left:0; width:100%; background:none; }
</style>
- 332 ：
- >>331
上手く行きました！
有難うございます。
- 333 ：
- jqueryでタブ切り替え時にだけ画像読み込むようにすんのはどうやんの？
- 334 ：
- タブ切り替え時とは？ブラウザのタブのことか？
ちなみに、ある時点で画像を読み込ませたいなら、そのタイミングでsrcを代入すればよし。
- 335 ：
- いやブラウザのタブでなくてjqueryでタブ化する場合
これだとサイト開いた時点で全画像読み込んでキャッシュ肥大したり煩わしいしから
タブ切り替えた時のみ画像読み込むようにしたい
ttp://wryoku.com/sample_page/tab_toggle/
- 336 ：
- >>335
それだとタブ切り替えしたときに画像表示がワンテンポ遅れるのでは？
どうしてもやりたいならimg自体をjQueryで動的生成するようにしてそのタイミングを
タブclick時にすればいい。
$('.tab2').click(function(){
$(this).append('<img src="hoge">');
})
とか。（↑ダサいだけどわかりやすい例）
あとはLazyloadというあるあるプラグイン使うとか
- 337 ：
- 続き
それよりも画像自体の容量を軽くする方が
総合的に考えてスマートだし、
後々で面倒な事にならない。
- 338 ：
- ｊQueryのDialog
http://jqueryui.com/dialog/
でサイズ変更するためにマウスをborderのあたりに持っていくと
マウスカーソルが、通常の矢印から、 <-> みたいなのに変わりますよね。
でも、このborderが細いので <-> が表示される範囲が狭くて、マウスをちょっと動かすと
カーソルが元の矢印に戻ってしまい、borderを摘まんで動かすことが出来ません。
では、borderを太くしたら行けるかなと思って太くしてみたいのですが、borderは太くなったのですが
マウスカーソルが <-> に変わる領域自体が増えるわけでは無いようなので、この方法はダメでした。
どうにかして、カーソルが <-> になる領域を増やすことは出来ませんか？
たとえば、borderを太くしたら、そのborder上にマウスがあるなら <-> にするなどの設定が
出来れば理想的なのですが。
- 339 ：
- リサイズカーソルに変わるのはborder上ではなく、
その中にあるui-resizable-handleクラスが付いている要素上
- 340 ：
- だがそのui-resizable-handleクラスが付いている要素は
borderの内側にあり太くしても、borderには重ならず
下に潜り込むだけで、ドラッグできる領域は増えない。
z-indexも効かない。そこまではわかってるんだよ。
- 341 ：
- >>340
詳しい調査有難うございます。
どうにかしてリサイズ領域の幅を太くして、掴み易くしたいんです。
- 342 ：
- >>338
↓普通にこれで太くなったぞ？
ui-resizable-handle ui-resizable-e{
width: 100px;
display: block;
background-color: #ddd;
}
- 343 ：
- >>342
太くなるだけではなくて、掴み易く成りますか？
- 344 ：
- borderに合わせてリサイズカーソル領域を設定するのはかなり難しそうだった。
太くするのは割と簡単だったのでよければどうぞ。
.ui-dialog { overflow: visible !important; }
.ui-resizable-handle { box-sizing: border-box; padding: 7px /* ここの値の2倍が掴める範囲になる */; }
どうしてもborderに合わせたいなら、.ui-resizable-xx のtopやらleftやらをいじることになる。
ややこしいので自分で頑張ってくれ。
あと、デバック時にリサイズカーソル領域を可視化するなら以下のスタイルを設定すると分かりやすい。
.ui-resizable-handle { background-color: rgba(255,0,0,.5); }
- 345 ：
- >>344
詳しい調査有難うございました。
早速試してみます。一体全体どうやってそんな属性を見付け出す事が出来るんですか?jqueryUIのソースを解析するんですか?
- 346 ：
- そーっすよ！
あと9割9分方、ブラウザの
開発者ツールだな。
- 347 ：
- <em></em>の中の文字列に「@」があった場合、@以前を削除する。
の方法が分かりません。
例えば
<div id="hoge">
メールアドレスのドメインは
<em>test@hogehoge.com</em>
です。
</div>
というHTMLがありまして
これをjQueryで
<div id="hoge">
メールアドレスのドメインは
<em>hogehoge.com</em>
です。
</div>
としたいです。
ご教授お願いします。
- 348 ：
- >>347
$(function(){
$("em").each(function(){
$(this).text($(this).text().replace(/^.+@/, ""));
});
});
- 349 ：
- >>348
素晴らしすぎます！
困っていましたので本当に助かりました。
ありがとうございます。
- 350 ：
- jQuery 2.x だとloadで読み込まず、教えてください。
<script src="jquery-2.x.x.min.js"></script>
$(function(){
$('div').load('load.html');
});
(1) jquery-2.x.x.min.js のファイルは存在。
(2) load.htmlはHTMLの必要部分のみ、または
<!DOCTYPE html><html lang="ja">～</body></html>
で単独で表示できるHTML構文でも同様。
(3) load('load.html #hoge')でも同様。
(4) load.htmlはローカルで、読み込む元のHTMLファイルと同じフォルダ。
(5) IE9は読み込まず、Fox38は読み込む。
$('div').load('load.html', function(text){
alert(text);
});
とするとundefinedのメッセージ。
jQ 1.xにすると読み込み、#hogeやコールバックで何の処理も可能。
原因何でしょうか？
- 351 ：
- 追記
(6) load.htmlに画像はありません。<div>や<p>などいたって簡単なものです。
(7) load.htmlの記述を読み込む元のHTMLに埋め込むと正常に表示します。
（load.htmlは元ファイルから抜き取ったものです。）
以上お願いします。
- 352 ：
- >>350
ローカルだから。
ローカルはウェブ上になるのとは
別のセキュリティルールが適用されることが多い。
ウェブサーバーを使いなさい。
- 353 ：
- >>352
そういう仕様なのですね。そうします。
かなり手間や時間かけて調べてたので助かりました。
ありがとうございます。
- 354 ：
- スレ違いだから、こっちへ行け
http://hayabusa6.2ch.sc/test/read.cgi/senmon/1437993191/l50
- 355 ：
- >>354はスレ違いだから踏まないように
- 356 ：
- はい、わかりましたｗ
- 357 ：
- $.each()とか$.extend()とかの$.始まりのがよくわからん
- 358 ：
- 単なる名前空間として使ってるだけ。
prototype.jsの反省から、
jQueryは既存のものを汚さないという
方針で作られてる。
jQueryがデフォルトで使用するのは、
「jQuery」とそのエイリアス名の「$」だけ。
都合が悪ければ$をなくせる。
- 359 ：
- 最近、純粋にJSの本買おうとしても必ずjQにページ割かれてる。
多いのは1/4近くにもなってる。
それだけ不可欠ってことなのだろうか。
- 360 ：
- >>359
それはお前が選ぶ本が悪いだけ。
どうせ入門書ばかりでしょ？
jQueryよりも難しい本を買えば、
jQuery以外のことばかり書かれている本もたくさんある。
もちろん初心者にとっては必要不可欠だがね。
- 361 ：
- 入門書ばかりで何が悪いのだ？
選ぶも何もほとんどそうだという話なのに。
jQueryよりも難しい本にも書かれてるよ。
- 362 ：
- >>359
選ぶ書店に依るんじゃない？
小さな書店だと 7日で学ぶJavaScript的な基礎理解を疎かにしたお手軽本が多い
三省堂などの大型書店や通販ならjQueryに限らず、幅広い本がある
ただし、(JavaScriptに限らないけど)基本的に本格的な本はお手軽本よりも少ない傾向にある
全体的な著者の知識レベルが底上げされればこの状況は覆るんだろうけどね
とりあえず、流行に流されて本を選ぶのは止めた方がよい
- 363 ：
- ところで、雑談だからまだいいけど、ここは荒らしが立てた乱立スレだからライブラリの質問は下記スレに行った方がいいよ
JavaScript ライブラリ総合質問所 vol.4
http://peace.2ch.sc/test/read.cgi/hp/1400834117/
- 364 ：
- jQuery前提だとコード短くて済む場合が多いからね
とりあえずjQueryみたいな流れになってるってのはあるだろう
- 365 ：
- JavaScript「本格」入門でさえjQueryが50ページある
>>363
初心者はライブラリというワードが浮かばないのだよ、察しろ
- 366 ：
- ここが誘導スレとして機能すれば問題ないな
- 367 ：
- jQueryに関してはここが本スレでいいだろ
スレタイわかりやすいし
- 368 ：
- 立てた時の経緯とか既にどうでもよくなってるしな
- 369 ：
- 場所がわからない度にスレを立てられたらたまったもんじゃないな
- 370 ：
- >>368
ネタスレや冷やかしスレが正当なスレになっていくとかよくあるしな
>>369
＞場所がわからない度に
何言ってるんだこいつは
jQueryは別格だろもはや
「本格」入門でさえjQueryが50ページあるんだから
- 371 ：
- こんな素晴らしいライブラリはないよ。
廃れないでほしい。
- 372 ：
- WebComponentsが普及したらまたjQueryがメインになるよ。
今はウェブの世界にはまともなコンポーネントがないから
AngularJSとかで頑張ってるけど、WebComponentsの時代に
なれば今よりもはるかに多くのパーツがウェブで使われるようになる。
一般的なプログラマは、そのコンポーネントを使って、
そのコンポーネント間の連携部分だけを作れば良くなる。
AngularJSとかが得意なレンダリング部分（データバインディング）は
そのコンポーネントの中に内蔵される。
ウェブの技術ではコンポーネント間の連携方法はイベントとメソッドの呼び出し
それに一番適した技術がjQueryというわけ
- 373 ：
- jQuery使いって初心者と信者しかいないのか
- 374 ：
- 場所がわからない度にｗｗｗ
場所がわからなくて全然違うスレで聞いてるのをいちいち誘導するほうがメンドイわボケ
と思ったらまたおかしいのが沸いてきたな >>373
- 375 ：
- js類似スレ乱立に比べたらはるかにまし
- 376 ：
- 誘導すべきところをいつまでも誘導せずに言い訳して見苦しい
- 377 ：
- 質問スレが乱立して正規のスレを探す方が面倒くさい
- 378 ：
- ローカルルールぐらいは守ろうぜ
・板違い・スレ違いを発見したら優しく誘導してあげましょう。
- 379 ：
- >>377
全くだな
"jQuery"で検索すりゃいいだけ
するとここがヒットする
ただそれだけなのにな
質問者は正規とかどうでもいいこと
"元祖"○○とかつけてるのに限ってたいていパクリとかな
元祖？じゃこの店行くか、なんてやつはいない
- 380 ：
- 乱立スレの変な回答を相手にするぐらいなら、質問スレが乱立していても正規のスレを探す
乱立していると候補がたくさんあるから探すのが面倒くさい
- 381 ：
- 初心者向けでメジャーなとこだけで言えば
HTML→HTML/CSS
CSS→CSS
JS→+JS質問+
jQ→ココ
これだけあれば十分
後は自分で目的スレにたどり着くだろ
- 382 ：
- だいたい正規って何だよｗ
どっかで公認してんのか？
- 383 ：
- 昔からある流れを汲むスレの事だろ
空気嫁
- 384 ：
- 本スレがわからんのは2ch初心者
ローカルルールも分からん奴に配慮する必要はない
- 385 ：
- 空気w
そもそも本スレとやらが空気だから検索で出ないだけだな
- 386 ：
- 書き忘れたが俺はどっちでもいい
というかどうでもいい
質問に答えるなり誘導するなり
各自勝手にやればいい
やたら決めつける人がキモい
- 387 ：
- どうでもいいならいちいち反論するなよ
- 388 ：
- なんでどうでもいい＝＞反論するな（書込するな）
という流れになるのだろうか？
どうでもいいと表明する。その理由を書く。
そして、他に人にもどうでもいいという考え方を
広める。そのことに何も問題はないはずだが。
- 389 ：
- >>388
おまえはどうでもいいという意見以外を認められないからそうやって主張するんだろ
おまえはどうでもいいとは思っていない
自己矛盾に気が付いてないのが一番質が悪い
- 390 ：
- >>389
えと、なんでそうやって主張してるの？
気づいたかな？そのレス、
自分自身に当てはまってるってこと。
- 391 ：
- >>390
俺はどうでもいいとは思わんからな
- 392 ：
- なるほど、どうでもいいという意見を認められないから
そうやって主張してるのかーｗ
ならばやっぱり、どうでもいいという
ことを書き込むべきだな。
そうすることでお前がそうやって反応する
それを見るのが楽しいｗ
- 393 ：
- もうちょっとわかりやすく言おう。
「どうでもいいならいちいち反論するなよ」
という言葉は間違いで
「どうでもいいという意見は認められない。だから反論するな」
それが本音だってわかったということ。
無意味な圧力には屈指ないｗ
- 394 ：
- >>393
日本語を勉強しなおして来い
- 395 ：
- >>394
解説するよ？どこがわからなかった？
- 396 ：
- 要するにjQuery単体スレが気に食わないだけなんだろう
本音は
- 397 ：
- >>388
正論
しかも反論ではないしな
自分の意見と合わないからそう言ってるのだろうが
- 398 ：
- >>396
それしか考えられないよな
乱立というほど立ってないし、このスレを否定するまともな理由が挙げられてない
ようは荒らしたいだけ
- 399 ：
- くだらない話題はいいよ。
粛々と技術について語ればいいよ
- 400 ：
- 属性attrとdataはどう使い分けたらいい？
- 401 ：
- >>400
attrはHTMLの属性を変えるもの、dataはDOMが内部で
持っているデータを変えるものって考えればいいよ。
（ただしHTMLでdataの初期値を与えることはできる）
開発者ツールを見ればわかるけど、dataを使ってもHTMLの属性は変わらない。
これを利用することで、dataの中身をJavaScriptで変えてから、
リセットボタンで初期値に戻すなんてこともできる。
- 402 ：
- あとJavaScriptで参照するのは基本的にdataね。
明確にHTMLの属性を変えたい時だけattr。
- 403 ：
- どうでもいい派の主張は実に酷かったな
このスレが存続されないのが嫌なだけなんだろうが
- 404 ：
- なんだ？まだなにか言い返さずにはいられなかったのか？
- 405 ：
- 「どうでもいい」はjQueryがこのスレであると決め付ける奴には一切反論しない時点でお察し
- 406 ：
- >>393
本当にどうでもいいと思っているなら一切反論する必要はない、というだけの話
こうもりの陰に隠れて自分に都合の悪い意見にだけ「どうでもいい」と反論するやり口が気に食わない
おまえのいう決め付け発言の方が自分のスタンスを明示している分、はるかにマシ
- 407 ：
- >>406
日本語わかるか？
>>386に書いたとおり
> 質問に答えるなり誘導するなり
> 各自勝手にやればいい
それをどうでもいいと言ってる。
> やたら決めつける人がキモい
そしてこうも言ってる。
こっちはどうでもよくないことだ。
決めつける奴はキモくて、
スレでやることはどっちでもいい
- 408 ：
- >>406
しつこい、407さんの通り、よく読め
反論でもないしそれくらい書いたっていいだろ
言論統制したいのか？
気にくわないって何様？
スレ主がスレタイと全く関係ない話題続けてる人に対して言うならまだしも
そこまでむきになることなのか？
- 409 ：
- >>403
>どっちでもいい
と書いてあるが大丈夫？
エアコン付けたほうがいいよ
- 410 ：
- >>391
様々な人がいて様々な考えがある
それらのリスペクトなしに強制、押し付けに何の意味があるのか
どこぞの国の人なら納得するが
- 411 ：
- すまん、皮肉が過ぎた
その点だけは謝る
- 412 ：
- >>401
回答ありがとう
再度質問ですみませんが
属性を変える、と、DOM内部データを変える
のそれぞれの意味はわかりますが
動作など何が違ってくるのでしょうか？
例えばimgのsrcを変えるのはattrでしょうが
独自属性の場合はattrでもdataのように使え、逆しかりで
使い分けの違いがいまいちはっきりしません
- 413 ：
- >>412
srcというのはimg要素が持ってる属性だ。
その属性に対しては、全て意味があり、それらはw3cという標準化団体が決めたことだ。
そして「その属性がもたらす効果」に影響を与えたいのであればattrだ。
そしてdata-*属性というものに関して標準化団体が決めたことはDOMのdataset
（jQuery版がdata()とは微妙に違う）と連動するってことなだけだ。
その属性には何の効果もないのだからそれに対してattr（属性という名のメソッド）を使う必要がない。
考え方はこの通りだが、単純に「data-*を参照・操作したいと思ったらdata()を使え」でいい。
違いはないわけではない。data()はJavaScriptの世界のものだから
JavaScriptのオブジェクトを代入することができる。
だが属性はHTMLつまりテキスト文書なので文字列しか入れることが出来ない。
jQuery（JavaScript）の話をしているのならば、当然JavaScriptの
データを格納したいわけだし、HTMLの世界に伝える必要はない
伝えた所でHTMLの世界では何の効果もないのだから知る必要性がない。
あと参考までに、出来た順番を知っておいた方がいい。
1. まず最初はjQueryもdata-*属性も何もなかった。
2. jQueryができた。初期はdata()はなかった。
3. DOM要素にデータを紐付けたいという要望から、jQuery 1.2.3でdataメソッドが出来た。
4. 時は流れてHTML5の時代になってからdata-*属性（とDOMのdataset）が出来た。
5. jQueryがdata-*属性に対応した。
なのでdata()メソッドはdata-*属性に対応しているが、data-*属性を読み書きするためのものとは少し違う。
あくまで要素に紐付いたデータを管理するための機能だ。
HTMLのdata-*属性には意味が無いので、それをJavaScriptから変える理由がない。
だからjQueryのdata()メソッドを使えば良い。
- 414 ：
- スレ違いだから、こっちへ行け
http://hayabusa6.2ch.sc/test/read.cgi/senmon/1437993191/l50
- 415 ：
- <input type="text" name="namae">
が有った時に、手で文字を入力するのではなくて、
プログラム的に文字を入力して、かつ、最後にENTERを
押すような動作をさせたいのですが、可能でしょうか？
- 416 ：
- >>410
どんな意見も主観が混じる以上は押し付けの要素がある
押し付けでないといえるのは自分への反論には全く反応を示さない事だろう
反論は相手よりも自分の意見を通したい表れだからな
「どうでもいい」の彼は押し付けがましい主張をしながら、反対者のそれが「押し付けだ」と主張する
彼の「どうでもいい」はただの詭弁だ
- 417 ：
- 能書きはチラ裏でどうぞ
- 418 ：
- 技術以外の話は不要。
何の生産性もない。
このスレ離れて感情が収まったら来い
関係ないヤツにはめざわり
- 419 ：
- >>378が全て
本スレがどこかなんて前スレ見れば誰でもわかる
- 420 ：
- >>419
あの頃は板の移行期だったから前スレにも現行スレのURLは載ってないんじゃないかな
立てたスレが消えてしまって立て直された記憶がある
前スレのテンプレを忠実に記したスレを見つければ済む話だけどね
- 421 ：
- 本スレ
JavaScript ライブラリ総合質問所 vol.4
http://peace.2ch.sc/test/read.cgi/hp/1400834117/
- 422 ：
- 検索ワード=■
■JavaScript
+ JavaScript の質問用スレッド vol.123 +(c)2ch.sc
http://peace.2ch.sc/test/read.cgi/hp/1423913913/
■HTML
(X)HTML/CSS/Dreamweaverの質問に優しく答えるｽﾚ18(c)2ch.sc
http://peace.2ch.sc/test/read.cgi/hp/1424788106/
■CSS
CSS初心者スレッド＝13th＝(c)2ch.sc
http://peace.2ch.sc/test/read.cgi/hp/1423959729/ （または↑）
■Wordpress
Wordpress質問・解答スレ
http://peace.2ch.sc/test/read.cgi/hp/1409500455/
■jQuery
jQuery ライブラリ 総合質問所 vol.4
http://peace.2ch.sc/test/read.cgi/hp/1400313626/ （ココ）
- 423 ：
- >>415
最後にENTERがよくわからないがこれではだめ？
$('input').prop('value','変更文字');
- 424 ：
- ＣＳＳの構文チェックみたいに
ｊＱｕｅｒｙの構文チェックを機械的にしてくれるとこはないですか
- 425 ：
- >>424
jQueryって単なるJavaScriptのライブラリだから
JavaScriptスレで聞くべき問題。
- 426 ：
- >>423
普通は $('input').val('変更文字')
- 427 ：
- >>415
>>423が言っているように、最後にEnterが何をしたいのかがわからない。
フォームのsubmitをしたいのであれば、
そのinputを囲んでいるフォームに対してsubmit()メソッドを呼び出せばよ。
例 $('form').submit();
- 428 ：
- なんかページ開いただけでメール送信するあれとかに悪用されそう
- 429 ：
- >>425
そうかな？jQueryはjQueryの記述なんだから
jsの構文チェックとは違うと思うんだが。
クロームのデバッガーみたいなサイトないのかな
- 430 ：
- >>429
jQueryの記述なんてものはない。
どうみてもJavaScriptにしか見えない。
- 431 ：
- >>430
例えば、こういうセレクタの指定はナンセンスだと思うが、
そりゃ分解していけばjavascriptなんだろうけど、
大きな視点で言えば、セレクタの指定方法はjQueryの構文じゃん？
そういうのを指摘してくれるサイトがあってもいいと思うんだ。
$(.hoge )$("div.foo").addClass("bar");
$("div.foo").css("background", "#ffffff");
$("div.foo").click(function(){alert('foo');});
- 432 ：
- 何がナンセンスなのかさっぱりわからん。
- 433 ：
- >>426
後出ししてんじゃねーよ、ボケ
>>430
お前何言ってるんだ？
JavaScriptの構文チェックで仮に>>431がチェックできるか？
- 434 ：
- >>433
はぁ？ ムダなコードを
治しただけだろ。
- 435 ：
- 答えもせず人の回答やレスにケチつけるのが多いよな
このスレに限らずこの板全体で
- 436 ：
- ケチを付けるのはよくないが、
より良くするのは何の問題もない。
それよりも汚いコードが広まるほうが問題
- 437 ：
- >>432
あなたは>>430と同じ人？
初歩的な事だと思っていたが・・
http://tech.nitoyon.com/ja/blog/2008/12/11/jquery-fast-css/
- 438 ：
- >>436
ゴタクはいらないから答えてやれよ
まあ質問者があまりやらないことをやろうとしてることのほうが疑問だが
- 439 ：
- 答えもせず後出しケチは人間的に汚いな
第一>>426の書き方が悪い
言われて当然
- 440 ：
- >>415がやろうとしている事は、
何かのサービス申込の入力フォームを自動で大量にやりたいんじゃない？
申し込むとポイント貰えるとか抽選になるとか。
- 441 ：
- >>438
答えてるが？
前の人が答えた内容と同じ
だけどそれよりも良い答え
を書いたらだめなのか？
同じ答えを書くのがだめなことなのか？
じゃあ前の人は答えてないことになるなｗ
- 442 ：
- 俺以外はおまえら二人しか居ないんだから仲良くしろよｗ
- 443 ：
- >>441
>>439
- 444 ：
- >>443
だからなんだよｗ
お前の個人的意見がどうした。
- 445 ：
- >>441
答えとは質問者に対してを言う
横からはチャチと言う
荒らすのが目的ならもう結構です
- 446 ：
- >>445
結構と言われてもなぁｗ
間違いを見ればレスするってｗ
止めたいなら、あんたが頑張って。
- 447 ：
- 補足か最初から自分で答えればいいのにケンカ売ってるのと同じだもんな
- 448 ：
- あげく草生やして上から
荒らしは消えてくれ
- 449 ：
- 消えてと言われても消えませんｗ
お前に、俺を消す力はない。
消えてくれ～消えてくれ～と
願っていればいいじゃん？
叶うこと無いけどねｗ
- 450 ：
- w付けないと会話できないやつっているよな
優位に立ちたいって願望そのまま出てる
- 451 ：
- 冷静に考えてここで争っても無駄ってわかるだろｗ
お前らの会話なんてどうせあと3日もしたら頭から消えるんだろ？
ここで決着なんて付くはずもないんだし、その時間とエネルギーを
node..jsにでもそそぎ込め。
- 452 ：
- うむ、こんだけこのスレ見てるなら質問者来たら相手してやれと。
回答者にケチじゃなくてさ。
- 453 ：
- >>424
FireQuery
- 454 ：
- jQueryのUI-Dialogでもし分かれば教えてほしいのですが、
たまたま見つけたこのページなんですが、
http://mgate.info/wp/wp-content/uploads/2013/12/dialog_test.html
(http://mgate.info/program/jquery/154/ の記事内のリンク先)
一番右下の [ダイアログ表示]を押します。
開いたダイアログで[キャンセル]を押すと、下図のダイアログが開きます。
--------------------------------
| メッセージダイアログ [Ｘ]
--------------------------------
| キャンセルがクリックされました
|
--------------------------------
この時、[Ｘ]ボタンの周りに青い長方形が表示されるんですが、
┏━━┓
┃[Ｘ]┃
┃ ┃
┃ ┃
┗━━┛
のように下にビローンと伸びていて見た目が変なんです。
Chromeでのみ起こりました。IE,FFでは起きません。
些細なことなのですが、こういうのはどうやれば回避出来ますか？
- 455 ：
- >>454
↓これをCSSの中に追記で治る。
.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text {
padding:0;
}
あなた最近よく色々な所に書き込んでるね。
WEBは最近覚えたての元サーバー・DB系エンジニアかい？
jsはそこそこ覚えたらphp+MySQLをやるといいと思うよ。
- 456 ：
- >>455
ありがとうございました。治りました。
助かりました。
ＤＢは全く経験ありませんが勉強したいです。
- 457 ：
- <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
を
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
のように記述してあるのを時々見るけれど、省略するのはなぜですか？
- 458 ：
- >>457
URLがhttpでもhttpsでも
問題なく読み込めるようにするためです。
- 459 ：
- >>457
http://re-dzine.net/2012/05/google-htmlcss-style-guide/
埋め込みリソースからプロトコル表記（http:,https:）を省略する。
<!-- NG -->
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>
<!-- OK -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
- 460 ：
- jquery-ui.jsでトグルタブを実装したんだけど、以前設置してたスクロール固定のjqueryが効かなくなってしまったんだけどなんでなの？
<script type="text/javascript" src="/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
と
<script type="text/javascript" src=“/jquery-ui.js"></script>
を同時に読み込むことはできないの？
- 461 ：
- >>458>>459
そういうことですか！ありがとうございました。
- 462 ：
- >>460
の言ってることがわからないのだが、誰かわかる？
もう少し、今まで、変更したことなど状況を書いてくれないと
エスパー回答しかできないのでは
同時にとは1行で2つを読み込みたいと？
- 463 ：
- しゃあない。じゃあ俺がエスパーしてあげよう。
>>460
jsの競合の事を言いたいのだろうけど、下記のバージョンの組み合わせにしたらいい。
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
※念のため http://～ にしておく
出来ている例：http://jqueryui.com/tabs/
- 464 ：
- それでも動かないならスクロール固定とやら（恐らくフローティングだろう）の
jsファイルの読み込む位置を上記の後ろにして試してみて。（既に後なら先にしてみる）
（jquery/1.7.2は不要）
例
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="/以前設置してたスクロール固定.js"></script>
ソレデモダメナラソース開示しないとわからん。クラス名ID名の重複も考えられる
- 465 ：
- 最近はjQuery-uiとか既製品の質問ばかりだな。
しかもCSSの問題だったりがほとんど。
以前のようにセレクタやトラバーシング系の質問やネイティブなjs絡み（配列だの分岐だの）の質問がないのは、
衰退を表しているのだろうか。
- 466 ：
- すまん、>>460の質問をしたものだが、>>463のいう「Jクエリの競合」のことが言いたかった；
拙い説明ですまん。
とりあえず出先だから取り急ぎ回答のお礼を…
- 467 ：
- >>465
そういうのはJavaScriptのスレでやってるよ。
- 468 ：
- >>464
おおおおお！！！！！
すげぇそのまんまやって順番変えたら出来たわｗｗｗ
読み込む順番変えると挙動変わるのか知らなかったwww
ありがとう！！！
- 469 ：
- 今宵もエスパー的中しますた。
>>467
そっちはネイティブすぎる。jQuery手打ちの質問が無くなったなあって事。
例えば、各href属性の末尾にURLクエリ情報を要素から取得して動的に入れるには・・みたいな。
<div id="hoge">
<a href="/page/111.html">111</a>
<a href="/page/index.html">222</a>
<a href="/page2/index.html#top">333</a>
・
・
↓
jQueryで動的にこうするには
<div id="hoge">
<a href="/page/111.html?page=111">111</a>
<a href="/page/index.html?page=222">222</a>
<a href="/page2/index.html#top?page=333">333</a>
・
・
- 470 ：
- https://jqueryui.com/dialog/
のサンプルのBasic Dialogを実行すると、
ダイアログが親ウインドウの領域に制限されます。
その結果、ダイアログの一部が親ウインドウからはみ出すなどが出来ません。
その制限を解除することは可能でしょうか？
はみ出した部分は表示されなくても構わないので。
- 471 ：
- >>469
それはサーバサイドでやるべき
しかも、jQuery特有の問題でもない
- 472 ：
- >>469
伊藤さん、すごいわ
今後コテハンで頼ま
- 473 ：
- 各要素に各メソッドで操作をする
例えば下記のようなものが多くある場合
$('#aaa').click(function(){
$(this).show();
});
$('#bbb').click(function(){
$(this).remove();
});
$('#ccc').click(function(){
$(this).fadeIn();
});
$('#ddd').click(function(){
$(this).slideUp();
});
各要素の数だけイベントを書かなくてはなりません。そこで
・各要素（#aaa～）にattrやdata-など何でもいいのですが"show()"などの文字列を書き
・各要素（#aaa～）を全て".all"と同名にしてしまい
$('.all').click(function(){
$(this).～（そのメソッド文字列読み込み）～.～（そのメソッド実行）～;
});
などとまとめてしまうことはできますか？
- 474 ：
- >>473
できなくはないけど、やめた方がいい。なぜならコードが複雑になるから。
複雑とはなにかって話をすると、
複雑っていうのはひとつの関数（クラスとかでも同じだが）が
複数の役割（責任ともいう）を持っていること。
一つの関数は一つの責任だけを持っている。こういうのがシンプル。
今回の場合、.allクリックのイベントハンドラの中に複数の処理が入ってしまっている。これは複雑。
例えば、data-なんたらのshow()の所だけを修正する必要がある時にそれとは無関係のコードの
影響まで考えなくてはならなくなる。それではメンテナンス性が下がる。
またJavaScriptを書いている時に、いちいちHTMLのdata-を見ないといけなくなるので面倒
共通の関数にするならば、原則として同じ処理をしている場合のみ同じにする。
その例では、何と何を、どういった理由で共通にしたいのかとかの情報が抜けてる。
その話だけからだと、まとめないほうがいいとして言えない。
まあヒントを言うならば、同じ処理ならば、以下のようにしてまとめることもできる。
$('#aaa, #bbb').click(function(){
$(this).show();
});
また、こういう書き方もできる。
function show(){
$(this).show();
}
$('#aaa').click(show);
$('#bbb').click(show);
こんなやつを使えば、あんたが抱えている本当の問題は解決するんじゃないの？
- 475 ：
- >>473
知恵袋に同じ質問あり
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q13149185623
- 476 ：
- 470誰かお願いします。
要するに使わない時にダイアログを横にどかしておきたいんですが、親ウインドウ枠から出られないので、困ります。
- 477 ：
- >>474
複雑は承知ですし、複数の処理前提のページなので問題ないです
逆にその方が単純化されるページなのです
例だとshowしかできませんが？
>>475
ありがとう
ざっと見ただけですがこれからじっくり調べてみます
- 478 ：
- 470ヨロ
- 479 ：
- >>478
そのデモじゃなく実際やってみたらいい
- 480 ：
- だよな
iframeの中に置かなきゃいい
- 481 ：
- >>479
どういうパラメータを変更すればそういう事が出来るのか見当もつかないんですが。
そもそもこのダイアログの挙動を制御するどういうパラメータが有るのかを調べる方法が分かりません。お手上げ状態です。
- 482 ：
- >>480
ああ、それは試しました。
でもダメでした。
- 483 ：
- もしブラウザの外まで移動できると思っているなら根本から間違ってるｗ
- 484 ：
- >>483
外に持って行くのは出来ないと思います。
はみ出した部分は描画されなくても良いので大きく横に動かしたいんですが。
- 485 ：
- サイズ変更させるボタンでも付けてスタイルをトグルさせればいいじゃんｗ
というかモーダルダイアログの意味を何か履き違えてる気がするｗ
- 486 ：
- >>485
モードレスにもなりますよ。
- 487 ：
- そのデモの例でいけばleftの値を-280pxにでもトグルさせるボタンでもつけときゃいい
あるいはタイトル部分をダブルクリックするとコンテンツ部分の表示/非表示をトグルさせるとかな
こんなのはブラウザの開発ツールで簡単に実験できる
- 488 ：
- >>487
そういう細工する方法ではなくて、自然にドラッグして移動したいんですが。
無理そうですね。
- 489 ：
- >>488
>>470の親ウインドウとはどっちを言ってる？
1. デモの移動範囲である四角 → >>479
2. ブラウザのウインドウ → >>483
- 490 ：
- >>489
ブラウザです
ダイアログを使わない時は、ちょっと横にどかしておくなどが出来ないと不便ですよね。
- 491 ：
- そういうのは別のＵＩ要素な気がするけどまあいいや
- 492 ：
- >>490
面倒だからこれでいいだろ
alert('メッセージ');
- 493 ：
- >>490
optionには特になさそう（たぶん）
http://api.jqueryui.com/dialog/#option-modal
このUIでデフォなら
window.open();
でサブウインドウ出せばいいかと
jQのこのUIでないとだめな理由ある？
- 494 ：
- 何かの参照だけが目的ならそれで十分だよな
- 495 ：
- >>493
jqのこのuiで出来るならそれに越した事は無いんですが、出来ないならwindow.openでやろうかな
- 496 ：
- 要素の位置や幅や高さをjQueryで求めると 数値では無くてautoという値が帰る場合が有りますよね。
そういう場合でも画面上ではその要素の位置もサイズも確定している訳だから、その数値を取得する方法有りますか？
- 497 ：
- あります
- 498 ：
- >>497
教えてケロ！
- 499 ：
- >>496
> 要素の位置や幅や高さをjQueryで求めると 数値では無くてautoという値が帰る場合が有りますよね。
普通はjQueryの方法で求めるとピクセルで取得できるはずなんだが、
お前どうやって取得してるんだ？
- 500 ：
- ドキュメントぐらい読めるようになろうな
.width()
.height()
.position().left
.position().top
- 501 ：
- >>500
それでやってもundefinedが帰る場合があります。なぜですか?
- 502 ：
- >>501
ならない
- 503 ：
- >>502
undefinedになる場合もあるよ
- 504 ：
- だからドキュメント読んでブラウザの開発ツール使って自分で実験しなさいよ
- 505 ：
- ttp://d.hatena.ne.jp/cyokodog/20090224/jQueryPosSet01
ほらよ。世の中にはこんなに親切にまとめてくれてる人もいるんだから
有難く読めよ
- 506 ：
- jQ初心者です
http://stackoverflow.com/questions/18933408/how-do-i-get-the-class-attribute-value-using-jquery-and-javascript
のチェックが入っている回答の
var cs1 = $("option:selected", ele).attr("class");
の $("option:selected", ele) の意味が分かりません。
$("AAA, BBB") こういうのなら知っているのですが、
$("AAA", "BBB") これは何ですか？
- 507 ：
- >>506
http://api.jquery.com/jQuery/#jQuery-selector-context
- 508 ：
- >>507
ありがとうございました。
- 509 ：
- まーた、糞なコードが量産されてるな
> var cs1 = $("option:selected", ele).attr("class");
> if(cs1 == 'type'){
> //do something
> }
じゃなくて、こうだろ。
if ($("option:selected", ele).hasClass("type")) {
//do something
}
classに複数入ったらどうするんだ。
- 510 ：
- >>509
こうだろ
if ($("option.type:selected", ele).length) {
何を無駄に hasClass を使っているんだ
- 511 ：
- hasClass使うと無駄なんですか？何故？
- 512 ：
- typeのクラスが付いてない要素が選べない設定になってるからだと思われる
選べないならタイプで判別しなくても良くない？って意味で
- 513 ：
- hasClassがダメな理由になってないな。
いくつか有る書き方の違いでしか無い。
- 514 ：
- ふーん
- 515 ：
- >>511
jQuery() と jQuery#hasClass() で2回の処理が走るからだろ
- 516 ：
- それでも複雑なセレクタよりも速いだろうな。
- 517 ：
- iframeの中のhtmlのセレクタ「test」のテキストを周期監視して、
"処理"という文字列があった場合に"hogehoge"に遷移する
処理を作ったのですが、iframeのsrcにhtml以外(PDF等)が入ると
jqueryのライブラリがエラーを起こしてしまいます。
$(function(){
var a = function(){
var doc = $('iframe').contents().find('#test').text();
if(doc=="処理"){
window.location="http://hogehoge"
}
};
setInterval(a,500)
}
});
PDFをiframeのsrcに設定しても
エラーを起こさない方法はありますでしょうか？
- 518 ：
- iframeのsrcの拡張子で分岐すればいいのでは
あるいはtry~catch
- 519 ：
- >>509
糞コード工場乙
- 520 ：
- >>518
>iframeのsrcの拡張子で分岐すればいいのでは
確かにその通りですね。
アドバイスありがとうございます。
- 521 ：
- >>519
よっぽど悔しかったんだねｗ
- 522 ：
- >>521
は？誰と勘違いしてんだ？工場長さん
- 523 ：
- 工場長言葉悪いんだよな
相当捻くれた性格、捻くれたコードなんだろな
余計な一言書く必要あるのかと
- 524 ：
- 工場長w
- 525 ：
- var htm = '<body><div class="a">aaaa<div class="b">bbbb<div class="c">cccc</div>dddd</div>eeee</div>ffff</body>';で、
class="a"のdivを取り出したいのですが、
$(htm).find(".a").html()とやっても出てきません。
$(htm).find("body").html()もbodyが取り出せないです。
なにがまちがっているのでしょうか？
- 526 ：
- 工場長は正しい事があれば間違っている事もあるので話半分に聞いておこう
- 527 ：
- >>525
動かしてないけど、通常DOM内に
一つしか無いはずのbodyを使うのはやめたほうがいいだろう。
- 528 ：
- >>525
$("～")内に"<body>"などは使えないので、別のタグに置換する
var htm = '<body><div class="a">aaaa<div class="b">bbbb<div class="c">cccc</div>dddd</div>eeee</div>ffff</body>';
htm = htm.replace(/<(\/?)body.*?>/g, "<$1div>");
$(htm).find(".a").html();
それが面倒なら、別のdocumentを作ってそこで検索する（IE9以下切り捨て）
var htm = '<body><div class="a">aaaa<div class="b">bbbb<div class="c">cccc</div>dddd</div>eeee</div>ffff</body>';
var doc = new DOMParser().parseFromString(htm, "text/html");
$(doc).find(".a").html();
$('<body>～</body>').find("body").html() がダメな理由は、公式サイト参照
https://api.jquery.com/jQuery/#entry-longdesc-1
> When passing in complex HTML, some browsers may not generate a DOM that exactly replicates the HTML source provided.
> As mentioned, jQuery uses the browser's .innerHTML property to parse the passed HTML and insert it into the current document.
> During this process, some browsers filter out certain elements such as <html>, <title>, or <head> elements. As a result, the elements inserted may not be representative of the original string passed.
要するに、$("～")の中身は（<div>の）.innerHTMLに流し込まれてパースされるから、<body>とか一部のタグは抜け落ちちゃう。
- 529 ：
- >>528
さんくす
中身だけ必要だったのでreplaceで<body>を削除しました。
- 530 ：
- すでに決められた2つのクラスがあり
これらは打ち消しや上書きも、変更自体できず
ある要素をクリックする度にそのクラスを入れ替える場合
if (今 'hoge')
$('要素').removeClass('hoge').addClass('hage');
else
$('要素').removeClass('hage').addClass('hoge');
ですがもっと簡単にできますか？
toggleClass('hoge')だと'hage'が残ってしまうのでだめです
- 531 ：
- ハゲが残るからだめなら
$('要素').toggleClass('hoge hage');
- 532 ：
- ハゲが残ったらダメとか、心に響く言葉だ
- 533 ：
- プログラマって男性ホルモン薄いイメージがあるけど
- 534 ：
- >>531
第2引数は知ってたが2つ同時にできるのですね
ｔｈｘ
- 535 ：
- http://jqueryui.com/sortable/#display-grid
って
１２３４
５６７８
ですが、
１５
２６
３７
４８
のように縦方向にソート出来ませんか？
- 536 ：
- >>535
そのデモと質問の関連性がよくわからないが
縦に２つブロック作ってそれぞれソートしては
- 537 ：
- >>536
デモだとブロックをドラッグすると横方向にソートされるじゃないですか。
それを縦方向にソートしたいんです。つまり、
先頭→→→
→→→→→
→→→→→末尾
を
先↓↓
↓↓↓
↓↓↓
↓↓末
のようにソートしたいんです。パラメータの設定では無さそうなので無理かなと。
- 538 ：
- >>535
やってみてもいいけど、
最低限の動くコードを作る所までが
めんどくさいんだよなー。
jsfiddleあたりにでも、
動くコードがあれば
やってみる気も起きるんだけど。
- 539 ：
- var $checked1 = $('#id_div :checkbox:checked');
var $checked2 = $('#id_div').filter('input[type=checkbox]:checked');
var $checked3 = $('#id_div').filter('input[type=checkbox]').filter(':checked');
<div></div>の中に複数のcheckboxが有るときにcheckされているものだけを取得したい場合、
1番目なら出来たのですが、2,3番目はダメでした。
2,3の書き方はどこが間違っていますか？
- 540 ：
- filterじゃなくてfind。
filterは
a A b B c D => filter(大文字だけ）=> A B C
のような使い方をする
- 541 ：
- 間違い探し。
>>540には間違いがある。
- 542 ：
- $(function () {
...
});
(function () {
...
});
の違いを教えてください。特に前者の$はどういう効果が有るんでしょか？
- 543 ：
- $は関数名
つまり前者は$関数を呼び出す
無名関数 function(){ ... } がその呼び出しの引数になる
後者は無名関数を作ってるだけで意味が無い
function(){ ... } だけだと文法エラーになるが、( )でくくることで文法エラーが出なくなる
でも作った関数を利用する術が無いので意味が無い
- 544 ：
- Jqueryuiでdialogのbuttonをあとから追加するにはどうしたらよいです？
また右上の×をクリックしたときに関数をよべますか？
- 545 ：
- $('#some-id').trigger('click');
とやるとボタンをクリックできますが、
実際にボタンをクリックした場合にはボタンが凹む動作をしますが、
上記のやり方だと凹まずにイベントハンドラ関数だけが実行されます。
凹ますことは出来ますか？
- 546 ：
- >>545
jQuery関係なくなるけど、
クリックを発動するものには、
ボタンであればclickメソッドがあるはず。
またcreateEvent（またはfireEvent）も使える。
ただし、これらでボタンが凹むかどうかは知らない。
ブラウザ依存だと思うので確かめる必要がある。
これらが使えない場合、自分でボタンの画像を用意して
mousedown時とかにclassをつけたり外したりして、
CSSで凹んだ画像に切り替える方法がある。
- 547 ：
- >>539
まず決定的なのがinput[type="checkbox"]ね。
"で囲むのが抜けてる。
- 548 ：
- どなたかお願いします。
[ボタンA] [ボタンB] ・・・[ボタンG]
＿＿●ブロックA＿●ブロックB・・・●ブロックG
#a01 {スタイル}＿＿{スタイル}・・・・・・{スタイル}
#a02 {スタイル}＿＿{スタイル}・・・・・・{スタイル}
#a03 {スタイル}＿＿{スタイル}・・・・・・{スタイル}
～
#a10 {スタイル}＿＿{スタイル}・・・・・・{スタイル}
ブロックとは説明のため便宜上付けた名前で特に意味はありません。
初期状態で#a01から#a10までの要素にブロックAに当たるスタイルを書いています。
ボタン（ラジオボタン、select何でも）Bを押したら#a01から#a10までの要素が
ごそっと全部ブロックBに当たるスタイルに変更、
ボタンGを押したらブロックGのスタイルに変更、としたいです。
{}の中のスタイルは複数で、全て全く別のスタイルです。
ブロック数は増える可能性があります（最大20程度）。
ブロックAに当たるCSSファイル、ブロックBに当たるCSSファイル・・・と
ブロック数だけ用意して外部CSSファイルごと入れ替えてしまえばいいのですが
ファイル数が多くなる上いまいちな気がします。
1つのCSSファイルで何かいい方法ないでしょうか？
phpやcgiは使えず、JavaScriptかjQuery（またはその程度のライブラリ）で
できれば済ませたいです。
- 549 ：
- >>548
意味がよくわからん。
> #a01から#a10までの要素にブロックAに当たるスタイルを書いています。
どういうこと？
HTMLタグの中に、style="これ" を書いているってこと？
よくわからんので、具体的なコードよろ
- 550 ：
- ブロックA～Gをクラス付きにしてボタンを押したら既存のクラスを別のクラスに書き換え
#a01.c01{～}#a02.c01{}…
#a01.c02{～}#a01.c02{}…
.
.
.
みたいにするかなんかすればいけるんでない
- 551 ：
- >>549
すみません。
四角内に星をまばらかつ定位置に置き、ボタン等で配置パターンを切り替えます。
星の数は変わりません。
・HTML
<div id="sora">
<span id="#a01">☆</span> <span id="#a02">☆</span> ～
</div>
・CSS
#sora {
width: 100%; height: 200px;
position: relative;
}
#sora span { position: absolute; }
・ブロックA
#a01 {top: ○%; left: ○%;}
#a02 {top: ○%; left: ○%; color: #○;}
～
・ブロックB
#a01 {top: ○%; left: ○%;}
#a02 {top: ○%; left: ○%; color: #○;}
～
・ブロック～
と、このブロックの辺りを何とかならないかと思いまして。
- 552 ：
- >>550
すみません、どういうことでしょうか？
- 553 ：
- <div id="pattern1">
<span id="#a01" style="top: ○%; left: ○%;">☆</span>
<span id="#a02" style="top: ○%; left: ○%;">☆</span>
～
</div>
<div id="pattern2">
<span id="#a01" style="top: ○%; left: ○%;">☆</span>
<span id="#a02" style="top: ○%; left: ○%;">☆</span>
～
</div>
・・・
を全てdisplay: none;にし、$('#sora')の子をその都度
$('#pattern○')の子と入れ替えるなど、配置をHTMLに書けば簡単ですが
なるべくレイアウトはCSSに書きたい（書くべき？）です。
とはいえ548のようにCSSファイルが増えるならこちらのほうがいいです。
- 554 ：
- html
<div id="box"><img id="a01" class="c01"> <img id="a02" class="c01"></div>
css
#a01.c01{top:Ypx;left:Xpx;}/*IDがa01かつclassがc01*/
#a02.c01{top:Ypx;left:Xpx;}/*IDがa02かつclassがc01*/
#a01.c02{top:Ypx;left:Xpx;}/*IDがa01かつclassがc02*/
#a02.c02{top:Ypx;left:Xpx;}/*IDがa02かつclassがc02*/
でボタンをクリックした時にクラス名を渡して
cl = クラス名;
$('#box img').each(function(){
$(this).removeClass(function(index, className) { return (className.match(/\ba\S+/g) || []).join(' '); });
$(this).addClass(cl);
});
ここまで書いて囲んでるボックスのclassかID書き換えた方が楽な気がしてきたけどもう眠い
- 555 ：
- >>551
それなら理解できるｗ
>>554
> ここまで書いて囲んでるボックスのclassかID書き換えた方が楽な気がしてきたけどもう眠い
CSSでやるならそれが正解。
こんな感じだね。
<div id="sora" class="block-a"> ← ここをblock-b、block-cに切り替えるだけ。
<span id="#a01">☆</span> <span id="#a02">☆</span> ～
</div>
・ブロックA
.block-a #a01 {top: ○%; left: ○%;}
.block-a #a02 {top: ○%; left: ○%; color: #○;}
・ブロックB
.block-b #a01 {top: ○%; left: ○%;}
.block-b #a02 {top: ○%; left: ○%; color: #○;}
- 556 ：
- >>554
一般的に、jQueryを使ったコードでeachは
あまり使わない。
これでいいんじゃないかな？
cl = クラス名;
$('#box img').removeClass(function(index, className) {
return (className.match(/\ba\S+/g) || []).join(' ');
}).addClass(cl);
removeClassの中もなんか気持ち悪けど、
ここをどうにかしようと考えたら
結局ボックスのclassを変えたほうがいいってことになる。
- 557 ：
- ちなみに、一般的にレイアウトはCSSでやるのは正しいのだが、
この例ではゲームで敵の位置をランダムに配置するのと同様に
JavaScriptでやるのもありなんじゃないかとは思ってる。
もちろん切り替えるスタイルの数が固定であるならば
CSSでやって問題ないけれどね。
あと、CSSの記述を効率化したいならSass（Scss）を使うのがおすすめ
scssで書いてCSSに変換して出力したものを配置して使う。
こんな感じで書ける。
・ブロックA
.block-a {
#a01 {top: ○%; left: ○%;}
#a02 {top: ○%; left: ○%; color: #○;}
}
- 558 ：
- >>555
具体的でよくわかりました。
各spanにclass="block-a"はやってみてましたが、逆の発想はありませんでした。
555のほうが記述が少なく処理も自然でいいです。完璧でした。
>>557
やりたいことはまさしくそのネストでしたが
今回はコンパイルのデメリットから普通のCSSでいきます。
みなさん、ありがとうございました。
- 559 ：
- textarea id="id_text"に入っている文字列
" 文字列１ \n \n\n 文字列2 " （例）
を改行でsplitして、空文字列以外のものだけを配列に取り出すことは出来たのですが、
var Ary = $('#id_text').val().split('\n').filter(function (v) { return v !== '' });
これだと、空白からなる文字列は除去できません。
また、取り出した文字列の前後に空白が残っています。この空白も取り除く方法を教えてください。
ループで回すんでは無くて上の式に何か追加すれば可能でしょうか？
- 560 ：
- >>559
.map(function(v){ return v.trim() }) を追加する
var Ary = $('#id_text').val().split('\n').map(function(v){ return v.trim() }).filter(function(v){ return v !== '' });
- 561 ：
- >>560
ありがとうございました
- 562 ：
- 属性をメソッドにできますか？例えば
<div id="hoge" method="hide"></div>
を
$('#hoge').hide();
と。かなり特殊で変は承知ですがそこをあえて。
- 563 ：
- >>562
.hide()を実行した時の定義はどういう風に記述するつもり？
- 564 ：
- >>562
$("#hoge").attr("data-method", function() { ... });
とかじゃないの多分
要素に直接書くのは知らん
- 565 ：
- >>562に必要なのはCSSにだろ？
<div id="hoge"></div>
#hoge { display: none }
- 566 ：
- 呼び出し例みるとプラグイン作ってそれを呼び出しているみたいにも見える
ttp://yyengine.jp/blog/jquery/jquery-plugin-5step/
- 567 ：
- >>565
それだとここで質問の意味ないよ
- 568 ：
- jQueryじゃない話題はこちらへ
+ JavaScript の質問用スレッド vol.125 + [転載禁止](c)2ch.sc
http://peace.2ch.sc/test/read.cgi/hp/1436910657/
- 569 ：
- どれだけjQueryに御執心なんだこの人はｗ
- 570 ：
- >>564
要素に直接書きたいのです。
みなさんありがとう。
- 571 ：
- >>562
methodがhideならhide()実行するようにif文で書けば良いんじゃない？
- 572 ：
- >>570
直接書いてそれをメソッドとして実行できるとは思えない。
- 573 ：
- 同じくdata-の質問なのですが、i要素の脇に属性値を表示させ、
後にjQで動的に変えて表示させたいのですがうまくいきません。
【HTML】 <i data-myattr="abc">...</i>
【CSS】 i::after {content: attr(data-myattr);}
【jQ】 $('i').data('myattr','def');
abcは表示しますがjQで変えた後もabcのままです。
動的に表示を反映するにはどうしたらいいでしょうか。
- 574 ：
- >>573です。半分自己解決しました。attrを使ったら反映しました。
【HTML】 <i data-myattr="abc">...</i>
【CSS】 i::after {content: attr(data-myattr);}
【jQ】 $('i').attr('data-myattr','def');
title属性にattrメソッドで取得・設定などはやってみていたのですが
data-はdataメソッドで取得・設定と頭が固定してました。
理由（DOM関係でしょうか）や方法としていいのか悪いのかわかりませんが
動作的には結果オーライです。
- 575 ：
- うん、そのやり方は正しいよ。
data-xx属性は.data("xx")の取得の初期値にしか過ぎず、
.data("xx", "aaa")での設定の際には属性とはまた違ったところに値が保存される。
なので、属性を直接変えたいなら.attr()を使うべし。
- 576 ：
- >>575
どうもjQのキャッシュがあって動作の違いが生じてるようですね。
不安げに使ってるのとでは心情が違いますので心強いです。
明確なお言葉ありがとうございます。
- 577 ：
- web制作初心者です。質問させてください。
jquery.flicksimple.js
ttp://www014.upp.so-net.ne.jp/makog/js/jquery_flicksimple/
を用いてスマホサイトで横幅100%での配置を実装しようとしているのですが
横１列に並ぶ<li>の数がデータベースと連動していて定数ではありません。
そのためスクロール領域である<ul>のwidth指定を
[ <li>の数 ] * [ <li>１つの幅px]
みたいな指定ができれば、と思うのですが
どう指定していいのかわかりません。。
どなたかご教授ください。
- 578 ：
- $.browser.msieみたいな判定が廃止された理由は何ですか?
廃止しても結局は同じような判定が必要になりますよね？なのに廃止する必然性が分かりません。
- 579 ：
- 必要にならないから
- 580 ：
- >>579
browserに応じて処理内容や画面のデザインを変えたい場合、browserの種類が分からないのにどうするんですですか?
- 581 ：
- jQueryは特定のブラウザの種類に応じた処理の切り分けに使うライブラリではないので、
そういうのが必要なら別のライブラリを併用してね
- 582 ：
- 要するにjq作っている人達は正確なbrowserの種類判定を実装するのが面倒になったんだろうな。無責任だろ。
- 583 ：
- >>580
browserに応じて処理内容や画面のデザインを変えないし、変えてはならない。
- 584 ：
- >>582
釣りですか？
- 585 ：
- >>582
jQuery作ってる人がそんな責任を負わないし、レガシーな機能はどんどん切り捨ててスリムにしていくべきだよ
- 586 ：
- >>568
いやいや、jQueryの話題だろｗ
- 587 ：
- むしろみんないかにブラウザの差をなくすか、しなくて済むようにしてるのに
その必然性が分からん。特殊分野なの？
- 588 ：
- >>587
＞むしろみんないかにブラウザの差をなくすか、しなくて済むようにしてるのに
現実はブラウザ自体に差がありそれは永久に解消されないから、htmlを作る側はそういう手間のかかる作業に追われる問題も解消しない。
- 589 ：
- >>586
> いやいや、jQueryの話題だろｗ
jQueryの話題じゃない。
ブラウザの判別はUserAgentを使うのだから、
jQueryは関係ない。
- 590 ：
- いつどんなタイミングでブラウザが増えるかわからんのだし、
本体とは分離しておくのが無難やね
- 591 ：
- こんばんわ
<head>
<script type="text/javascript" src=\jquery.js"></script>
<script type="text/javascript">
$(function(){
$("div").hide();
$("input[type='radio']").click(function(){
$("input[type='radio']").each(function(){
if($(this).attr("checked")){
$(this).next("div").show(500);
}
});
});
})
</script>
</head>
<body>
<label><input type="radio" name="ra1">content1</label><br>
<div>
<span>text1</span><br>
<span>text11</span><br>
<span>text111</span><br>
</div>
</body>
↑のソースで初期表示の際にdivタグを隠しチェックボックスをチェックしたら
divの中が画面表示されるようにしたいのですがこれの何がおかしいのでしょうか？
$(this).next("div").show(500);
↑の行は実行されているのですがうまくshowされません。
- 592 ：
- とりあえず先に無駄なところを修正しておこうか？
$(function(){
$("div").hide();
$("input[type='radio']").click(function() {
if(this.checked) {
$(this).next("div").show(500);
}
});
})
- 593 ：
- gifアニメ画像の再生完了のイベントを取ることはできないでしょうか。
setTimeoutで一定時間の後、次の処理に進むようにしてみましたがパソコンと
スマホでタイミングがずれてしまいます。
- 594 ：
- >>591
.next() は次の(隣の)要素なんだわ
labelに囲まれてるんだから、.隣では辿りつけないよね
ついでに言っておくと、.next()のセレクタはそのセレクタに合うのを探しに行くんじゃなくて、
隣のものの中からセレクタに合うものを絞り込むためにあるんよ
<div></div><span class='a'></span>
<div></div><span class='b'></span>
<div></div><span class='c'></span>
<span></span><span class='b'></span>
で
$('div').next('.b')と$('div').next() をコンソールにだしてみればわかると思う
親の要素に行ったり、ある条件に合うまで探すみたいなのは、用意されているから探してみておくれ
- 595 ：
- 少し足りなかったな。こうだな。
jQueryを使ったコードでは、
パフォーマンスが気になる部分とか以外では、
原則としてeachやifは使わないんだわ。
（jQueryプラグインを作るときにはeach使うけど）
繰り返しとか比較っていうのはコードを複雑にする原因で、
それを減らせるのがjQueryの関数型プログラミングの機能だから
$(function(){
$("div").hide();
$("input[type='radio']").click(function() {
$(this).filter(':checked').next("div").show(500);
});
})
- 596 ：
- こんばんわ
592さん594さんお返事感謝です。
592さんの言うとおり無駄なソースが多すぎましたね。
594さんの「labelに囲まれてるんだから、隣では辿りつけないよね」の言葉で今回の問題が理解できました。
IEの開発者ツールのDOMExplorerで見てみると階層が違いましたね。
以下が修正後になりました。
<script type="text/javascript">
$(function(){
$("div").hide();
$("input[type='radio']").click(function(){
$("div").hide(500);
$(this).parent("label").nextUntil("label","div").show(500);
});
});
</script>
最初の想定より大分短いコードになって満足です。
ラジオをクリックした際、一度全て非表示にする処理を入れたのが短縮に繋がりましたね。
最初はラジオボタンのセレクタを全て取得してチェックされているかどうか確認してshowかhideを設定するつもりでしたが
ものすごく冗長になるとおもい今回のようにしました。
アドバイス感謝します。
- 597 ：
- ちなみに595の方法でやってみましたがなにかうまくいきませんでした。。
- 598 ：
- なんでブラウザの判別とか言ってるのだ
アンカ負ってみ
- 599 ：
- http://jqueryui.com/draggable/
WindowsではできましたがAndroidでは動きません。
スマホでも動かす方法教えてください。
- 600 ：
- >>577は、いい質問だと思うぜ？
だれか.lengthでも使って答えてあげなよ（俺はめんどくさい）
- 601 ：
- >>577
かっこ悪いが
#flick ul {display:table-cell; white-space:nowrap;}
#flick ul li {width:○○px; display:inline-block;}
- 602 ：
- >>599
つjquery.ui.touch-punch.js
- 603 ：
- var w=0;
$('li').each(function(){
w=w+$(this).outerWidth();
});
$('ul').width(w);
$('#flick').flickSimple();
- 604 ：
- >>602
ありがとうございます。
あっけないほどに解決しました。
- 605 ：
- flickSimple試してみたが横スライドする部分はつまんで縦スクロールできないんだな。
使い道にもよるが横に並べるだけならowl.carousel.jsのほうがいいかも。
- 606 ：
- もしかして
>>568 == >>589 ← 頭悪い人 ?
- 607 ：
- >>606
なんのためにレスしたの？
- 608 ：
- 質問読んでないのがいるよな
>>568とか>>589とか
鼻から答える気ないのだろうが
- 609 ：
- で？
- 610 ：
- jQueryの話題はこちらで
jQuery ライブラリ 総合質問所 vol.4
http://peace.2ch.sc/test/read.cgi/hp/1400313626/ （ココ）
- 611 ：
- jQuery を含むライブラリの質問はこちらへ
JavaScript ライブラリ総合質問所 vol.4
http://peace.2ch.sc/test/read.cgi/hp/1400834117/
- 612 ：
- AJAXでPHPを実行する時に、POSTでもGETでも行けるのですが、
何故ですか？何で同じような機能が二つもあるんですか？
不思議でたまりません。
- 613 ：
- GET/POSTの使い分けは調べれば腐るほど出てくるからまずググれ
- 614 ：
- >>611
頭悪い人必死だなｗ
- 615 ：
- >>613
ググったら逆に多すぎて分かりません。
使い方が知りたいのではなくて、何故二つの方法があるのか
３０文字以内で答えよ。
- 616 ：
- >>615
多すぎるって、そりゃGET/POSTなんて基本中の基本だから多いよ。
俺の下手な説明を求めるよりいいサイトを見つけろ。
- 617 ：
- 答えになっていないし文字数オーバー。
０点。
- 618 ：
- お前の質問には0点の答えがお似合いということだ
- 619 ：
- >>617
横だが、酷い質問者だな。
探すのに1分かからなかったぞ。
http://write-remember.com/archives/2530/
これに答えろ
PHPのecho()とprint()の違いを30文字以内で答えよ。
- 620 ：
- どうみてもネタだろ
>>618 はいい奴だな
これからは出題形式の質問が流行る
- 621 ：
- 619のまちがいだった
- 622 ：
- >>611のスレはすぐ別のライブラリ出してくるのがいて面倒だが
ここは基本通り答えてくれるからいいな
- 623 ：
- jQuery-UI使う時に
mouseenter
mousemove
mouseleave
は必ず発生する事は保証されていますか？
例えば素早くマウスを動かした場合などに。試した限りでは
正しそうなのですが確証がありません。
- 624 ：
- 残念ながら、jQueryを使いこなす人達は、
jQuery-UIなんてほとんど使わないんだよ。
だからjQuery-UIの細かい仕様をここで聞いても回答はされないと思う・・
- 625 ：
- >>623
ブラウザの仕様によるだろう。
- 626 ：
- <div>が複数あって、入れ子などになっている場合に
var divAll = $('div');
で全部のdivを取得したあと、
.prependTo()
.insertBefore()
.insertAfter()
.appendTo()
など使ってdivの入れ子関係を変化させた後で、上記のdivAllを参照しても問題ありませんか？
それとも、変化させたあとで最新の状態でもう一回
var divAll = $('div');
のように実行する必要ありますか？
それと、divの中にJavaScriptコードが有る場合、divの構造を変化させた場合に何か注意事項などありますか？
それとも、心配しなくても問題なく動作しますか？
- 627 ：
- >>626
divAllを参照しても問題ない。 そもそも全てのdivを指定するのに入れ子構造とか関係ない。
階層セレクタで破壊的メソッド使用する場合は問題ある。$（'div div > div'）のようなセレクタなど。
divの中のjavascriptコードの件もたぶん関係ないがどんなコードかによる。
- 628 ：
- 質問者の意図間違えて捉えてたかも。
jQueryで追加したdivを除いて、最初のdivだけを選択したいなら、問題ある。
クラス名でも付けて分けるべき。
- 629 ：
- >>628
詳しいレスありがとうございました。
入れ子の位置関係を入れ替えるだけなので破壊はしません。
でもやはり最新の状態でdivAllを取得するほうが安心ですね。
そうします。
- 630 ：
- 現在、一つのページ内で、複数の要素のページ遷移をしているのに使っていて、
$('#pagenate-1').on('click', 'a.page-numbers', function(e){
e.preventDefault();
var link = $(this).attr('href');
$('#pagenate-1').fadeOut(500, function(){
$(this).load(link + ' #pagenate-1', function() {
$(this).fadeIn(500);
});
});
});
$('#pagenate-2').on('click', 'a.page-numbers', function(e){
e.preventDefault();
var link = $(this).attr('href');
$('#pagenate-2').fadeOut(500, function(){
$(this).load(link + ' #pagenate-2', function() {
$(this).fadeIn(500);
});
});
});
以下同じ要領で複数個
こんな感じで番号を変えているだけなのですが、
これを一つにまとめるにはどうすればいいのでしょうか？
- 631 ：
- for文で回す
- 632 ：
- >>630 HTMLの構造が書いてないので$(this)がこれで上手くいくのかわからんが、
関数にまとめて、数字部分をforでループさせたらこんな感じかと。
function PageN(){
for(var i = 0; i < $('a.page-numbers').length; i+1){
var Pagenate = '#pagenate-' + i;
$(Pagenate).on('click', 'a.page-numbers', function(e){
e.preventDefault();
var link = $(this).attr('href');
$(this).fadeOut(500, function(){
$(this).load(link + 'Pagenate', function() {
$(this).fadeIn(500);
});
});
});
}
}
PageN();
※結構自信ないので、他の回答者さん、遠慮なく突っ込んでくれｗ
- 633 ：
- ↑ごめん
$(Pagenate).on → Pagenate.onの間違い
- 634 ：
- 共通のclassを設定できるんならそれを設定してそのセレクタで
だめなら [id^=pagenate] のセレクタ使うとか
どっちにしろ親要素のそのidを取りに行かなきゃいけないけど
それは$(e.delegateTarget).attr('id')みたいな感じで
まあforでもいいけどね
- 635 ：
- .delegateTargetなんて初めて知った。
日本語の検索結果もあまり出てこないな。
- 636 ：
- >>632
jQuery使っていて、forを使い出したら負けだと思うよｗ
>>630
そもそもidを使うのがだめだろうね。
同じ仕様のものなんだからclass（日本語訳：種類）を使いなさい。
あとは、何か言おうと思って考えてたけど、他の人が書いているように
HTMLがどうなってるのかわからないからなんとも言えないし
>>634が言ってるようなdelegateTargetを使うことにになるだろう。
現時点では特に新しく言えることはなかったなｗ
- 637 ：
- .css()で値を取得する時、
border-top-width
border-bottom-width
border-left-width
border-right-width
が正しいのですが、何故、
border-width-top
border-width-bottom
border-width-left
border-width-right
では無いんでしょうか？
- 638 ：
- <div id="pagenate-1" class="list-box">
</div>
- 639 ：
- すいません、送信してしまいました
<div id="pagenate-1" class="list-box">
<ul>
<li>リスト1-1</li>
<li>リスト1-2</li>
<li>リスト1-3</li>
</ul>
<p class="pager"><a href="" class="page-numbers">次へ</a></p>
</div>
<div id="pagenate-2" class="list-box">
<ul>
<li>リスト2-1</li>
<li>リスト2-2</li>
<li>リスト2-3</li>
</ul>
<p class="pager"><a href="" class="page-numbers">次へ</a></p>
</div>
こういうのが同じページ内に複数あります
pagenate-1の次へをクリックしたら、pagenate-1の2ページ目に遷移してリスト1-4～1-6を表示して、
その他のリストは1ページ目のままになるようにしたいんです
>>632を試してみましたが、駄目でした
正直、知識もないままただネット上にあるスクリプトを拾ってきて使っているだけなので、
どういう風に何を変えればいいのかもよくわかっていないです
- 640 ：
- list-boxが他の場所に存在しないと仮定して
$('.list-box').on('click', 'a.page-numbers', function (e) {
e.preventDefault();
var link = $(this).attr('href') + ' #' + $(e.delegateTarget).attr('id');
$(e.delegateTarget).fadeOut(500, function () {
$(this).load(link, function () {
$(this).fadeIn(500);
});
});
});
こんな感じでいけるとおもう
- 641 ：
- 「戻る」リンクとかどうするの?とか、今何ページ目なのかわからなくなりそうだねとか
そもそもデータの読み込みはajax?iframe?とか疑問が止まないので
知識がないならページネーションはプラグインの方がいいんじゃない？と言いたくなってしまうが
それ言っちゃおしまいか。
- 642 ：
- >>640
おお！できました！
ありがとうございます！
一番多いページでpagenate-74まであったので助かりました！
>>641
すみません、戻るとページ番号のリンクもあります。
簡単にhtml構造だけ書きました。
ajaxとかiframeとかはよくわかりませんけど、なんかとりあえず今までも問題なくできてました。
- 643 ：
- ピクセル単位で値をセットする場合、0の時にはpxは不要ですよね。例えば、
$('#ID').css('top', '0');
でも、pxを付けて
$('#ID').css('top', '0px');
としても、セットできますよね？
もし変数の場合だと、
$('#ID').css('top', (val=0 ? '0px' : val+'px'));
みたいにするのが良いのかもしれませんが、見た目がゴチャゴチャしているので、
$('#ID').css('top', val+'px');
としてしまっても良いでしょうか？0の場合も一応セット出来るみたいなので。
上級者の人教えてください。
- 644 ：
- >>643
> $('#ID').css('top', val+'px');
それが普通。CSSの仕様として0はどの単位をつけても
等しく0だから単位を省略可能ってだけ。
- 645 ：
- 質問させて下さいjQueryを使ってHTML部に記述されている
pタグで囲われている要素に項目番号を付けたいと思っています。
例えば、HTML部分に
<p>あいうえお</p>
<p>かきくけこ</p>
<p>さしすせそ</p>
という記述があって、Pタグで囲われている部分の前に
項目番号を付けたいです。ブラウザ上では
１・あいうえお
２・かきくけこ
３・さしすせそ
と表示されるのが理想です。
ちなみに、Pタグで囲われている部分は必ず3行というわけではなく
4行、5行の場合もあります4行の場合は項番1～4、5行の場合は項番1～5と
表示させたいです。これをjQueryで行う場合、どうすればよいでしょうか？
ご存知の方がいらしたらご教授ください
- 646 ：
- >>645
普通はこうやる。
https://jsfiddle.net/smemj7nq/
どうしてもjQueryでやりたければ、
自分でできるところまでやったものを書くこと
- 647 ：
- >>646
ありがとうございます。めちゃくちゃ参考になりました
CSSで項目番号を追加する方法がある事をしらず
PHPやJQUERYでカウンタを使って何とかしないと駄目なのかな？と
思い込んでいました。
上記の方法で思い描いた処理を行うことができました
ありがとうございます
- 648 ：
- いつも思うんだけど、jQueryやる人はjQueryに頼り過ぎだよ。
JavaScript = プログラマのもの
CSS = ウェブデザイナのもの
みたいな所があるのかね？
- 649 ：
- >>648
適切なものを使わないのは単に見つけられなかった、知らなかったからだと思う
例えばmarginの左右autoによる中央揃えを知らなかった場合、JavaScriptで中央揃えをするような人もいると思う
(特に普段HTMLやCSSを触らないプログラマの人とかならあり得なくはない)
- 650 ：
- >>649
つまり勉強不足ってことでしょ？
> (特に普段HTMLやCSSを触らないプログラマの人とかならあり得なくはない)
それが、jQueryに頼りすぎ（でCSSの勉強をしてない）ってことだよ。
JavaScript使うようなウェブプログラマにとって
必須技術であるHTMLとCSSを知らないでどうするの？
「あり得なくはない」という考えがありえない。
- 651 ：
- >>650
いや別にWebプログラマとは一言も言ってないんだが……
普段HTMLやCSSを触らないプログラマって言ってるだろ？
要は自分のゲームの説明書とかをHTMLで作成したりしてるプログラマの中にはそういう人が居るって話だよ
Webプログラマでそんなことしてるやつ居たら笑い話にもならないだろ
- 652 ：
- jQuery = HTMLのDOMを触る = ユーザーインターフェース部分
なのにHTMLやCSSを触らない人なんているんですかね？
触らなきゃだめでしょう？
- 653 ：
- 「jQueryやる人」にしても「JavaScript使うようなウェブプログラマ」にしても
いろんな状況や立場があるだろ
一括りに語れるような話じゃないよ馬鹿馬鹿しい
- 654 ：
- なんかすまんかったな
俺自身はHTML、CSS、JavaScriptを使って作業してるけど知人の初めてHTML触るプログラマがそんな感じのことをしていたんだ
個人的に思うのがWeb系のプログラマでないプログラマだとHTML、CSSでできるとすらそもそも思っていないんじゃないだろうか
こういうことはプログラム言語(JavaScript)でするはずだみたいな思い込みをした上でJavaScript(またはjQuery)での実現方法を探すみたいなね
質問じゃないしこの辺で止めときましょう
スレ違い申し訳ない
- 655 ：
- >>654
いや、まさにそのことを言ってるんだよ。
jQueryでDOMいじるなら（HTMLと）CSSをしっかりやらないといけない。
画面一切見ないでDOMだけいじるって言うなら、話は別だけど、
そんなやつはまずいないでしょ？
（スクレイピングで無いわけじゃないがマイナー。
普通はユーザーのアクションに応じて見た目を変更するために使う）
で見た目を変更するために使うって言ったけど、正確に言えば
jQueryでやるのは状態の変化。具体的に言えばクラスの付け外し。
そして見た目を変化させるのはCSS。
だからjQueryを使って見た目を変えるならば、CSSとの連携は必須なわけ。
CSSを使うというのはjQueryでやるプログラミング作業の一部なんだから
それをやらないと複雑なコードになりプログラマとしての能力が疑われる。
- 656 ：
- >>655
横だが、あなたはphpとjavascriptを状況に応じて使い分けられる？
jjsはDB連動に向かない、クロスドメインに弱い、SEO的にも微妙。
しかし、jQueryのセレクタはphpより遥かに便利、DOM改変に強い、アニメーション、非同期通信ができる。
しかし実際は上記の両方の技術が1コンテンツで必要とされるケースも多いし、
どちらでもできる事も数多く存在する。
アニメーションにしても
CSS3でもjQueryでもcanvasでもsvgでもactionscriptでもgifアニメでも実現可能。
ローカルでのデータ置換一つにしたって、エクセルだろうがgrepだろうが・・・だ
- 657 ：
- jQueryのCDNはどこが一番安定していて速いでしょうか？
https://code.jquery.com/
http://ajax.googleapis.com/
今はなど使っています。
- 658 ：
- みなさんにお聞きしたいことがあります
今jQueryを勉強していて参考書なんかで基礎的な部分は理解できるようになったのですが、
ネットにあるさまざまなフリーコード(しばらくすると背景に模様が浮かび上がる、クリックするとエフェクトがかかるなど)を見てると
基礎からどんな勉強をすればあんなすごいものが作れるようになるんだろうと思っているのですが、実際基礎からどんな勉強をすれば作成できるようになるんでしょうか？
まだまだ初心者なのでもしよろしければ教えてもらえるとうれしいです
- 659 ：
- >>658
では、まず、657の回答を教えてくれ！
- 660 ：
- ↑申し訳ありませんスレ違いだったかもしれないです
- 661 ：
- >>657
自身のサーバーのレスポンスの速度や他のサイトで使用されているかされていないかの兼ね合いで変わるんじゃないんですかね？
- 662 ：
- >>661
そういう前提でどこかおすすめか教えてくれ。
- 663 ：
- >>657
なら私はgoogleでいいと思いますけどね
- 664 ：
- >>663
そうか。でも君初心者だろ。初心者に勧められてもなあ。
もう少し説得力のある回答がいいんだけど。
- 665 ：
- >>657
回答を教えてくれって言われたから私なりに答えただけなので
- 666 ：
- >>656
> 横だが、あなたはphpとjavascriptを状況に応じて使い分けられる？
普通に使い分けられるが？
phpだけじゃなくperlやpythonやrubyも使うがね。
- 667 ：
- >>658
マルチポスト
http://peace.2ch.sc/test/read.cgi/hp/1436910657/844n-
- 668 ：
- 状況に応じてっつーか両者が使える状況って明確に分かれてるよな
- 669 ：
- >>668
どういうこと？
サーバーサイドとクライアントサイドでのメリットで切り分けるなら分かるが。
>>666
例えばイラストの多いランディングページのデザインを頼まれたときに
illustratorとphotoshopどちらでページデザインを作成する？
その理由は？
- 670 ：
- なんか全然違う例出してきたぞｗ
プログラマー脳とデザイナー脳でこうも違うのかｗ
- 671 ：
- >>667
そんなもん気にすんな。アホボケカス！
- 672 ：
- 頭の悪そうな悪口だな
- 673 ：
- >>670
UI関連に携わるという意味では、グラフィックソフトも関連分野だぜ？
グロースハッカーがいないと一貫性のある完成度の高いサービスは完成しないし。
特性や状況に応じてPsとAiを使い分けるというのは理想だが、
現場じゃ実際どっちかに偏っている人がほとんどだ。
node.jsを使うメリットだって、サーバーサイドとクライアントサイドを
1つの言語だけで書けるのが大きなメリットのはずだ。
・・といいつつ、概ね賛成だ。CSSでやれるとこはCSSでやるべきだな
- 674 ：
- >>669
俺デザイナーじゃねーしｗ
ここjQueryであってプログラマのスレだし。
一部jQuery"プラグイン"を使うだけの
jQueryが使えないデザイナーもいるようだが。
illustratorとphotoshop？ 俺は専門外だから間違っていたとしても当たり前の話だと言っておくが、
イラレはベクトル形式でデータを扱う。フォトショはビットマップでデータを扱う。
ベクトル形式のビットマップに対する利点は、データをイラストとして自分で書く
もしくはベクトル形式のデータを購入したりして加工する場合はイラレ、
写真などを取り込んで明るさや色合いを変えたりするならばフォトショ。
その二つを組み合わせればいいんじゃね？
HTMLは通常大きさを変えたりするものだからイラレが適している。
だけどそこに流し込む写真はフォトショで加工する。
ありきたりなデザインなら、HTMLの基本テンプレートに入れ替えるだけでもいいんじゃね？
どっちが適しているかっていうのは作るものによって違う。
ランディングページの中の各パーツによって変えるものだ。
適していないのに全部一つのツールで作るなんてしちゃいかんよ？
どちらでページデザインする？なんて考えてないで、
状況に応じて使い分けようぜ？
- 675 ：
- プログラマはそれで飯食ってるわけじゃないからPhotoshopもIllustratorも使わないよ
使うとしてもGIMPやInkscape、ImagemagickやGraphvizなど、極力自動化できるものかな？
プログラマが全部できちゃったらあんたらデザイナーの仕事なくなっちゃうっしょ？
- 676 ：
- >>674
用途は大体合っているけど、どちらのソフトでもベクターもビットマップも扱える。
HTMLはイラレが適しているというのは誤解。スライスしてみればよくわかるよ。
ランディングページ含め、デザインで勝負している人間が
HTMLの基本テンプレートでイケちゃう機会は0だな。。
大手クラなら必ず構成案＋デザイン画の提出があるしね。
DTP出身の人はWEBまで全てAiで作成する事が多いが、その理由は“慣れ”以外のなんでもない。
しかし、両方完全マスターしている人間がはたしてどれだけいるか。
あなたもデザインに関しては疎いように、理想はわかるが、現実そうそういない。
最終的には、ケースバイケースだとおもうがな。
javascriptエンジニアにRailsがなんでわからないの？？って勉強させるよりも、
その道に精通した人（jsに疎い）に頼んだ方がいいでしょう。
ただ、CSSの件は同意だよ。（JAVAエンジニアとかは別として）
- 677 ：
- >>675
まあ、そりゃそうかもしれないけどね。
ちなみに俺はここのスレでは回答者しているよ。
>>463とかエスパーで何回か合ててるのも俺ねん。
ただしもちろんruby・phytonとか全然わからん
- 678 ：
- >>676
> HTMLはイラレが適しているというのは誤解。
いや、そんなのわかってるよｗ
イラレとフォトショのどちらで作る？って聞かれたからどちらかで答えるしか無いだろう？
誘導尋問かなんかかね？ 普通に答えればDreamWeaverだろうな。こっちは画面
見たことがあるぐらいだから何が適しているのかしらんけど。（スライスぐらい知っている）
> 最終的には、ケースバイケースだとおもうがな。
いや、なにいってんのさ？ そのケースに適したものを使うっていうのは
俺が最初に言ったことだろう。
> javascriptエンジニアにRailsがなんでわからないの？？って勉強させるよりも、
> その道に精通した人（jsに疎い）に頼んだ方がいいでしょう。
やっぱりわかってないねｗ まだプCSSがデザインの知識だと思ってるｗ
JavaScriptとりわけjQueryを使う人はCSSに精通していなければならない。
なぜならばRubyやPHPのようにウェブプログラマが使う道具だから。
プログラマがCSSでかっこいいデザイン作れる必要があるって話じゃないぞ？
デザイナーが作ったかっこいいデザインをボタンやリンクのクリックで反映させるために
クラスを変更することによって、あとはCSSに任せるってことだ（DOMを修正するのではなく）
本来あるべきCSSでデザインするという考え方を使うことでDOMの操作はへり
jQueryで書くコードは短く単純になる。CSSのはブラウザが処理するから速くなる。
最適なコードを書くために、CSSを利用するのはプログラム上当たり前の話で
CSSに任せるためには、CSSで何ができるかを知らないといけない。
だからJavaScriptプログラマ（正確にはウェブでjQueryを使ったDOM操作をする人）はCSSは必須の知識、
優れたJavaScriptコードを書くためにはCSS技術を使わないと無理って言ってるんだよ。
- 679 ：
- >>676
> DTP出身の人はWEBまで全てAiで作成する事が多いが、その理由は“慣れ”以外のなんでもない。
> しかし、両方完全マスターしている人間がはたしてどれだけいるか。
知らんがなｗ
だが慣れで使う道具を決めちゃいかんぞ。
両方使える人がいる、片方しか使えない人がいる。
両方使える人が選ぶのが「いい選択肢」だ。
両方使える人が選ぶいい道具に対して片方しか使えない人は、
それよりも劣る道具しか選べない。
劣る道具を使ったらどうなる？ 仕事の質と効率が悪いだろう？
君が言ってるのは仕事の質と効率が悪い人だっている。
って言ってるのと同じことだよ。
雇い主からみれば、こいつ使えねぇなぁ、
金がかかるなぁって思うだけの話だよ。
それで？ 世の中には出来ない人もいるんだから
出来なくても許して下さい。でも給料ください。ですか？
知らんがなｗ
- 680 ：
- 例えだすなら相手にもわかりやすい領域のを出せだよな
自分の得意分野のほうへ誘導しようというのが良くない
視野が狭い
- 681 ：
- >>677
> ちなみに俺はここのスレでは回答者しているよ。
ん？ 俺も言わないといかんのか？
俺もこのスレで回答している。
jsfiddleに書いているjQueryと（CSSを使った）シンプルな
コードを書いているのはたいてい俺だ。あと長文書いているのも俺だろうｗ
> ただしもちろんruby・phytonとか全然わからん
わかる。
俺はウェブ専門のプログラマというより、それを含めた汎用のプログラマなので
プログラミングに関係のあることであれば、大小はあれど大抵の知識はある。
（だからといっていきなり専門的な質問して答えてみろって言っても答えないよ？ｗ）
フロントエンドのアプリ開発必要な、JavaScriptやHTMLやCSSはもちろん
サーバーサイドのRubyやPythonもわかるし、
ウェブとはあまり関係ないC言語や業務系で使われる事が多い（昔の）VBやC#なども
だってこれらはプログラマに関係ある知識で、
プログラマとして知っておかなければいけない知識なのだもの。
- 682 ：
- 長々と余計なことを書いてしまったが、簡単にまとめておくわ。
jQueryを使う人（≒ウェブプログラマ）の自分の仕事
もちろんjQueryを使ったプログラミングコードを書くこと。
この自分の仕事を優れたものにするためには、
CSS技術を使うのは必須だってこと。
なぜなら優れたjQueryコードを書くためにはCSSを使わないと実現不可能なのだから。
CSSはウェブプログラマに無関係の知識じゃない。
- 683 ：
- >>678
イラレかフォトショどちらがWEBデザイン作業に適しているか？
答えはフォトショだよ。
ケースバイケースの意味が違う。
一人で適したものを都度使い分けるのではなく、一人で一貫してやるのが良い時もあれば、
専門畑の人間と分業してやる方が確実に良い場合もあれば、そもそも、使い分ける必要すらない場合もあるという事。
CSSについて学ぶというのは同意だが、
CSSで書けるととこはなんでもCSSというのはちょっと違うと思うかと。
そもそもCSSでやることをちょっとjQueryで処理したところで
ブラウザ側の処理負荷・処理速度への影響なんて微々たるもの。
あなたがIEにどこまで対応してるかしらないが、
IE7や新しいセレクタやアニメーションに対応するためにわざわざ
CSSでハック書いたり、ファイル分岐させますかって話で。
あとは例えば、HTML4で横並び3つのボックス高さを揃える（ボックス内の内容は都度増減する）とか
そんなのCSSだけでわざわざ全部しますかって話。
- 684 ：
- CSSでできることは極力ＣＳＳですべきなのは当然だろう
- 685 ：
- >>682
言いたいことは最初からわかっているよ。
あなたが対応範囲広いのは素晴らしい事だね。
- 686 ：
- >>683
> イラレかフォトショどちらがWEBデザイン作業に適しているか？
> 答えはフォトショだよ。
なんでだよｗ
理由書かないで納得するわけがないだろう。
> そもそもCSSでやることをちょっとjQueryで処理したところで
> ブラウザ側の処理負荷・処理速度への影響なんて微々たるもの。
スマホ開発したことある？ 最近はまともになってきたが
ちょっと前とかのAndroid 2系とか遅いんだよ。
メディアクエリーをjQueryで対応するとかありえないから。
あ、意図せずいい例を思いついたなｗ
お前、ウェブサイトのレスポンシブ対応をjQueryでやるの？
> あなたがIEにどこまで対応してるかしらないが、
> IE7や新しいセレクタやアニメーションに対応するためにわざわざ
> CSSでハック書いたり、ファイル分岐させますかって話で。
はぁ？ IEなら5の時代からクロスブラウザを心がけていたわ。
やろうと思えばできるし、対象ブラウザによって使う道具は適切に変える。
適切に変えられるのは、jQueryもCSSも両方知っているからだからな。
CSS知らないからできません。じゃだめなんだよ。
- 687 ：
- >>683
> イラレかフォトショどちらがWEBデザイン作業に適しているか？
> 答えはフォトショだよ。
ちょっと補足しておくわ。ウェブデザイン作業全般の話じゃなくて
> >>669
> 例えばイラストの多いランディングページのデザインを頼まれたとき
の話だからな（なんで俺が>>669の補足をしないといけないのかｗ）
- 688 ：
- なお、俺の答えはDreamWeaverである。
- 689 ：
- >>684
その通りだね。
理由もちゃんとあって、関数型言語の話にも繋がるんだ。
jQueryは関数型プログラミング言語の考え方を取り入れてると
いわれがいるが、JavaScriptである以上、完全じゃないんだよね。
jQuery使っているのに関数型になってない書き方をしている人が初心者に多い。
関数型プログラミングの定義は人それぞれあるが重要なこととして、
命令型であるか宣言型であるかということ。
JavaScriptのような命令型プログラミング言語では、
コードにああしてくださいこうしてくださいって処理を書いていく。
関数型言語のような宣言型プログラミング言語は、処理方法でなく
対象の性質を○○はこうであるという定義をしていく。
宣言型は命令型よりも可読性に優れておりバグが少ないと言われている。
で、CSSは宣言型なんだ。見ればわかるだろうけど、
こういうセレクタはこういう性質である。という風に記述する。
なのでCSSでできることは極力CSSでするべき。
- 690 ：
- よくあるトップへ戻るボタン、jQueryのバージョン上げたら使えないですね。
新旧２つ読み込むのは無駄だと思うから、最新ので実装したいけど、サンプルコード書いたページないですか？
- 691 ：
- >>690
どれのことだよ、しらねーよｗ
- 692 ：
- >>690
jQueryでやるべきことじゃない。
最適なのを選択するべき。
普通にトップへのリンクを書いたほうが良いだろう？
- 693 ：
- まだやるのかｗ
>>686
Psの向いている理由は書いたがスライス。
他にも細かい所で色々あるがDTPならillustrator。
DreamWeaverは画像自体の編集はできないよ。
レスポンシブはベースはmediaqueryだが、
IE8以下が対応しないので結局その為にjs使うでしょ？
それと例えばアコーディオンメニューなどjsが絡む際、
jQueryで.hide();使うか、CSSでdisplay:none;にするかについては、
前者の方がわかりやすいケースも多い。
それとさっきも書いたが、CSSだけでやる方が非効率で正しくない方法を
とらなければならないケースも多いのは事実。
- 694 ：
- >>690
やりたいのはスムーズスクロールでしょ？
これでダメなら原因はjQuery本体のバージョンではなく、セレクター部分だな。
<script>
$(function(){
$('a[href^=#]').click(function() {
var speed = 400;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
</script>
（ページの途中からボタンがヌルっとでてくるのは別ね）
- 695 ：
- >>694
スムーズスクロールを無効にしているUAにも強制するのか
実に迷惑なスクリプトだな
- 696 ：
- >>693
> レスポンシブはベースはmediaqueryだが、
> IE8以下が対応しないので結局その為にjs使うでしょ？
だからなんだよ？
IE8以下ならjs使う = IE8を超えたらCSS使うってことだろ。
ほら、CSS使うって結論になったｗ
だいたいPC用ブラウザであるIE8以下でレスポンシブなんているかよｗ
レスポンシブが必要=iPhoneやAndroidなんだから
必然的にIE8以上になるだろ。
> それと例えばアコーディオンメニューなどjsが絡む際、
> jQueryで.hide();使うか、CSSでdisplay:none;にするかについては、
> 前者の方がわかりやすいケースも多い。
ないわーｗ
デザイン作る時の大変さを考えてればいい。
開いた時、閉じた時、CSSにしておけば、JavaScriptを使わずに
デザイナーがクラスを変えるだけで作れる。
得意な人が得意なところをやる。分業ってやつだ。
もっともCSSで表現できないアニメーションを加えるときは話は別だがな。
- 697 ：
- >>694
>>690がスムーズスクロールの話かどうかはしらんが、
スマホの場合は、jQueryのanimateによるスクロールが
いまいち動かないものがある。
CSSの（-webkit-）overflow-scrollingや
（-webkit-）transformを使ったほうがおそらくいいだろう。
と、このように、またCSSに話しになってしまったかｗ
な？プログラマだからってCSSを知らなくていいことにはならないし、
むしろ知っていなければ、要求をうまく実現できないんだよ。
- 698 ：
- CSSだけでメニューが開いたり閉じたりするアコーディオンを作る！javascript不要
http://9-bb.com/css%E3%81%A0%E3%81%91%E3%81%A7%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%8C%E9%96%8B%E3%81%84%E3%81%9F%E3%82%8A%E9%96%89%E3%81%98%E3%81%9F%E3%82%8A%E3%81%99%E3%82%8B%E3%82%A2%E3%82%B3%E3%83%BC/
- 699 ：
- >>696
あなたはバックエンドが中心そうだな。
フロントエンドはこっちの得意分野だがこっちの土俵で平気かい？
レスポンシブはiOS、Androidは当然だが、同時にPCサイトの
クロスブラウジングはキープしなければならない。（スマホとPCはユーザー層は別だから）
だから、レスポンシブだからIE9以上でいいというのは理屈的におかしい。
どういう事かはやっている人間ならわかるはずだが。
アコーディオンについては
開いたとき、閉じたときのクラス名の事ではない。
初期状態の非表示の事を言っている。
CSSでメニューにdisplay:none;をかけるのが、SEO的にもJSオフ環境的にもどうかというのもあるし、
そもそもの機能管理的にわかりにくい。
アコーディオンの機能1つの為に、JSとCSSとでそれぞれに書くのは非効率という事。
- 700 ：
- >>699、>>698
IEは無視ですか？
- 701 ：
- >>699
> レスポンシブはiOS、Androidは当然だが、同時にPCサイトの
> クロスブラウジングはキープしなければならない。（スマホとPCはユーザー層は別だから）
> だから、レスポンシブだからIE9以上でいいというのは理屈的におかしい。
はぁ？ お前レスポンシブとリキッドレイアウトをごちゃ混ぜにしてるんじゃね？
IE8を使うのはPCに限られ、そのPCの解像度（正確にはデバイスの
物理的なサイズといったほうがいいか）はスマホより大きい。
だからリキッドレイアウトにさえしておけば、レスポンシブデザインに
おける最大サイズ用一つだけで十分。（つまりメディアクエリを使わない）
（金が無限にあるのなら、例外的なデバイスにも対応すれば？）
それに加え、小さいサイズ用に追加でメディアクエリを書いて
デザインすればいい。それでクロスブラウザになる。
で、俺が言ってるのはそのレスポンシブ対応をJavaScriptで対応するとか馬鹿げてる。
CSSのメディアクエリを使って対応するのが適切だ。
その適切な選択ができるためにも、jQueryを使うようなプログラマなら
CSSは必須技術だって話をしているわけだが、わかってるか？
- 702 ：
- >>699
> CSSでメニューにdisplay:none;をかけるのが、SEO的にもJSオフ環境的にもどうかというのもあるし、
お前何の話してるのさ？
SEOで考えればJavaScriptは使わないほうがいい。
というのが一般的な答えだが。
SEO的にもJavaScriptオフ環境的にもって話であれば、
それこそJavaScriptを使わずに作るのがいいってことになるだろ。
プログラマだからってHTMLとCSSの勉強が不要なわけじゃなく、
JavaScriptオフ環境も考え、JavaScriptでなんでもやろうとするのではなく、
可能であればHTMLとCSSだけで作れる方がいい。
だからHTMLとCSSはウェブプログラマにとって必須知識だ。
これは俺がずっと言っていることそのものだぞ。
- 703 ：
- >>700
> IEは無視ですか？
無視して良い環境であれば無視しますよ？
無視していいのにあえて古いIEに対応する必要はありませんね。
もしかしてCSS使えないから、JavaScriptでやるんですか？
- 704 ：
- >>699
> フロントエンドはこっちの得意分野だがこっちの土俵で平気かい？
おそらくお前の負けだろうなｗ
- 705 ：
- 個人的にSEOとか言い出す人は
技術者じゃなくてSEO業者だと思ってるｗ
技術的な根拠もなく、あれがいい、これはだめと言ってるだけ。
見てるのは検索エンジンだけで、ユーザーの事を何も考えていない。
- 706 ：
- >>701
あなたは恐らく、実務でレスポンシブでIE8以下を対応した事ないでしょ？
メディアクエリによる記述が存在するだけでIE8以下にどういう影響を与えるかをわかっていない。
下記も実務レベルではありえない。
＞だからリキッドレイアウトにさえしておけば、レスポンシブデザインに
＞おける最大サイズ用一つだけで十分。
フォントサイズや画像の指定（src振り分け）はPCと同じで良いわけがない。
（PC用に作った画像をスマホではただ縮小して完了なんて大手企業には通用しないぞ）
メディアクエリかjsでの振り分けが必ず必要。
jQueryを使うようなプログラマならCSSは必須技術だって話は同意。
- 707 ：
- 議論には勝たなきゃならないって強迫観念は一種の病気じゃないかと思う
- 708 ：
- >>706
> あなたは恐らく、実務でレスポンシブでIE8以下を対応した事ないでしょ？
だから、お前、なんのデバイスでIE8を使ってるんだ？
俺が対象したことがあるのは最低でも14インチぐらいのディスプレイだぞ。
レスポンシブ対応における一番大きなブレークポイントを超えた
超えたサイズでしかIE8を使っていない。
IE8以下のレスポンシブ対応ってお前何やってるのさ？
> メディアクエリによる記述が存在するだけでIE8以下にどういう影響を与えるかをわかっていない。
メディアクエリの記述はIE8以下には全く影響を与えない。
書いてないのと同じ。
お前、馬鹿なんじゃないのか？って思ってきてるからなｗ
> フォントサイズや画像の指定（src振り分け）はPCと同じで良いわけがない。
は？ 何を言ってるんだ？ 今してるのはIEの話だろ。
IEが動くスマホなんかないのでIE用=PC用として考えていい。
スマホはメディアクエリを使ってスマホ用に置き換えるだけの話。
メディアクエリに対応していないならば、PC用が表示されるだけだ。
- 709 ：
- IEに関してはむしろ今後積極的に無視できれば無視すべき存在
そうでなければサポート切れＯＳを使い続ける人が一向に減らないし
新ブラウザEdgeと旧ブラウザとの互換性で結局自分たちの首を絞めることになる
- 710 ：
- >>702
「JavaScriptを使わずに作る」
現実離れしすぎ。 そんなサイトがあるなら具体的にURL教えて。
初期状態で見た目上非表示にしておきたいコンテンツをCSSのdisplay:none;にしてしまったら、
どういう事かわかるでしょ？
>>703
IE無視していい環境かどうかもわからないのに、いきなり無視した記述はどうなの？
jQueryで3～5行くらいで済むことが、
CSSでは困難を極める例はたくさん今手元に持ってるぞ。
具体的に例題出そうか？
>>704
ずっと平行線で終わると断言できる。
>>705
技術者ではない人間がこんなサイトみてないだろうし、あなたに絡もうともしないでしょ。
SEO業者はクソに同意だが順位は無視できない。
- 711 ：
- >>710
> 「JavaScriptを使わずに作る」
> 現実離れしすぎ。 そんなサイトがあるなら具体的にURL教えて。
そんなこと言っていない。
JavaScriptを使わずに、HTMLとCSSで作れるならば
そうするべきだって言ってるだけ。
> 初期状態で見た目上非表示にしておきたいコンテンツをCSSのdisplay:none;にしてしまったら、
> どういう事かわかるでしょ？
CSSが有効なら初期状態非表示になるけど？ｗ
- 712 ：
- >>708
試しに、W3CとSEOを意識した記述で↓答えてみて。
imgタグ（altはhoge）の横幅をPCでもスマホでもコンテンツの最大幅に合せるようにする。
※IE8対応
- 713 ：
- >>710
> IE無視していい環境かどうかもわからないのに、いきなり無視した記述はどうなの？
無視して良い環境を前提にしているから問題ない。
古い環境が必要なら、古い環境用につくればいいのよ？
どちらでもいい場合はCSSを使うべきだって言ってるんだから。
> jQueryで3～5行くらいで済むことが、
> CSSでは困難を極める例はたくさん今手元に持ってるぞ。
俺も知っているから別にどうでもいい。
それよりも重要なのは、処理効率の良さやバグの少なさ。
コードで書くのは命令型、CSSは宣言型。
コードはすぐに複雑になるのだから、なるべくコードはないほうがいい。
これからのためにもjQueryに依存しないほうがいい。
- 714 ：
- >>712
質問に条件が足りないな。
画像のサイズはどうする？ コンテンツの最大幅が可変の時、
その最大幅に応じて画像サイズも変化させるのか？
つまりコンテンツの幅が、153ピクセルの時
ピッタリ153ピクセルの画像にしないといけないのか？
それともブラウザにリサイズをまかせていいのか？
これはJavaScriptを使って作った場合でも同じ話だと思うが。
- 715 ：
- あと面倒くさいから、ヒント書いておくわ。
ちょっと読んできてからにしてくれ。
HTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみよう
http://kia-king.com/blog/tutorial/responsive-images-with-srcset/
- 716 ：
- もう一つヒント
<div id="contents">
<img src="～.png">
</div>
#contents {
width: 200px;
background-color: gray;
}
img { width: 100% }
ここまで書けば、追加の条件を
後出しであーだーこーだ言ってくれるだろうｗ
- 717 ：
- > > 初期状態で見た目上非表示にしておきたいコンテンツをCSSのdisplay:none;にしてしまったら、
> > どういう事かわかるでしょ？
>
> CSSが有効なら初期状態非表示になるけど？ｗ
回答が意地悪だったから追加しておこう。
本当に言いたいことが何かはわからんが、
どちらにしろやり方は二つある
cssファイルをJavaScriptが有効なときだけ読み込むか、
modernizrのようにhtml要素のclassにJavaScriptが
有効なときだけjsというクラスをつける。
あとはCSSで自由にやれる。
CSSを理解していないとこういう発想は生まれない。
だからjQueryを使うようなプログラマはCSSの知識は必須。
- 718 ：
- >>714
画像のサイズは当然だが画像実寸の等倍までを最大とする。
下限は不要。
- 719 ：
- >>718
すでにヒントという形で答えは書いた。
あとは足りない条件の追加よろｗ
- 720 ：
- > imgタグ（altはhoge）の横幅をPCでもスマホでもコンテンツの最大幅に合せるようにする。
> ※IE8対応
なお、IE8はPC版のみの対応でよい。
（だってIE8が動くスマホなんて無いものｗ）
- 721 ：
- >>717
そんな面倒な事を本当に実装しているの？？
display:none;を.hide()にする
それだけじゃん？
- 722 ：
- >>719
画像実寸が最大値にならないよ。↓
<div id="contents">
<img src="http://kia-king.com/img/logo/logo-kia-king.png">
</div>
<style>
#contents {
width: 500px;
background-color: gray;
}
img { width: 100%; }
</style>
- 723 ：
- > 画像実寸が最大値
意味不明ｗ
- 724 ：
- >>721
> そんな面倒な事を本当に実装しているの？？
> display:none;を.hide()にする
全然面倒じゃないけど？ これだけ。
<script>document.body.className += " js";</script>
（HTML要素の参照方法調べるのが面倒かつbody要素でも
同等のことができるんでサンプルまで）
これだけですべての箇所がCSSで対応可能になる。
こんなことも出来ないんじゃプログラマとしての技術も未熟だろうねｗ
- 725 ：
- >>723
例えば、下記画像の実寸は213pxだが、
http://k.yimg.jp/images/top/sp2/cmn/logo-ns-131205.png
設置時に実寸より引き延ばされて画像が荒れている状態（213px以上で表示）というのは、
デザイン品質上、一般的に許されないんだよ。
- 726 ：
- >>725
じゃあ大きくすればいいだけじゃね？ｗ
- 727 ：
- >>724
なるほどね～。
だが、俺はhide()でやるわｗ
- 728 ：
- >>726
いや、それでいいならそれでいいがｗ
いや、それでいいや
- 729 ：
- それとも1ピクセルの違い毎に
画像を用意しろって話かなぁｗ
何がいいたいのかわからないよね
PC版用とブレークポイント毎に
一つ用意すればいいだけでは？
- 730 ：
- >>727
> だが、俺はhide()でやるわｗ
そんなことやると、HTMLが複雑になると、
非表示するために大量のコードが必要になるぞ。
見た目の制御はCSSに統一した方がいい。
- 731 ：
- どうしても議論で人を負かしたいんだ！
３０分ぐらい外で散歩でもしてきてゆっくりと深呼吸してこいよ
- 732 ：
- >>731
さっき飯買いに外に行ってきたぞｗ
30分はかかってないかもしれんが
- 733 ：
- >>729
もう今となってはどうでもよくなってきてしまったんだが、
実寸までは親要素に合わせ可変し、実寸以上に親要素が大きくなった場合は
実寸までのサイズでとどまる。
答えなくてもいいよ。問題の出し方が悪かったから。
>>730
大量のコード？
セレクタが少しだけ面倒になるだけでは？
どんなケースだろうか
- 734 ：
- >>733
> 実寸までは親要素に合わせ可変し、実寸以上に親要素が大きくなった場合は
> 実寸までのサイズでとどまる。
max-widthでも使えばいいだけじゃね？
CSSでこんなことができるなんて知らなかった。
って言いたそうｗ
だからウェブプログラマならCSSの勉強をしろとだね
> 大量のコード？
> セレクタが少しだけ面倒になるだけでは？
JavaScriptで見た目を変えようとすると、
そのうちあちこちにコードが増えるんだって
将来の話。
- 735 ：
- >>734
＞max-widthでも使えばいいだけじゃね？
つIE8
>JavaScriptで見た目を変えようとすると、
>そのうちあちこちにコードが増えるんだって
>将来の話。
そうなのか。
- 736 ：
- > ＞max-widthでも使えばいいだけじゃね？
> つIE8
つ対応
https://developer.mozilla.org/ja/docs/Web/CSS/max-width
Internet Explorer
基本サポート
7.0
- 737 ：
- >>736
後だし条件で恐縮だが
それぞれの大きさの画像の最大値をmax-widthで可変にしたいが
1つ1つの画像の実寸サイズはいちいち数値で指定したくない。
※img{width:100%;}と同じような書き方
jQueryであればそれぞれの画像の横幅を取得し、
その値をそれぞれの画像のmax-widthにするという内容
- 738 ：
- >>737
これか？
画像の横幅をウインドウ幅に合わせたいが、原寸より大きくはしたくない場合 [イメージ,幅]
http://tips.nishishi.com/css/image-max-width.html
- 739 ：
- >>738
それだ。
でIE8ねｗ
- 740 ：
- max-widthはIE8対応してるな。
- 741 ：
- >>740
ところがどっこい、
>>738の記述をしてIE8で確認してみるといい。
つまりやったことなかったということだね？
- 742 ：
- >>741
だからなに？
お前が言ったjQueryでmax-widthを
指定するっていうのも結局CSSで制御しているわけだけだし
俺ならビルド時に画像の幅を指定するかな。
そうすればJavaScriptいらなくなって軽くなるしな。
適切な技術を使い分けようぜ？ｗ
- 743 ：
- これで解決するんじゃねーの？
いちいちお前の仕事をやる必要ねーけｄ－なｗ
http://design-spice.com/2011/09/22/responsive-web-desig/
Flexible Images
画像もウインドウサイズに合わせて可変するようにします。
img{
max-width: 100%;
height: auto;
width /***/:auto; /*IE8のみ適用*/
}
IE8ではmax-widthで横幅しか縮小されないバグがあります。
対策としてはimgタグのwidth属性を記述しないか、
IE8にはwidth:autoを指定します。
- 744 ：
- >>742
jsだけでもcssだけでもダイナミックプロパティでもできる。
但しCSSだけだとクソ記述が入るから微妙。
画像の幅を指定するというのは
imgのwidth属性にピクセルで数値を入れるという事？
それだとそもそも可変にならなくなるよ。
- 745 ：
- >>743
もう調べなくても回答しなくてもいいｗ
俺のクソ仕事つーか、
レスポンシブのIE8をちゃんとやってきてるなら
そのバグくらい知っているハズだったからな。
プログラム詳しいのもわかったし、
webプログラマーがCSS覚えるべきってのも同意だし、
これ以上は特にないよｗ
- 746 ：
- >>710
> 初期状態で見た目上非表示にしておきたいコンテンツをCSSのdisplay:none;にしてしまったら、
> どういう事かわかるでしょ？
初めから display:none にする必要は全くない
JavaScript で [aria-hidden=true] を加えればいい
あるいは、document.styleSheets を書き換えても良い
- 747 ：
- >>746
いや、
CSSでやれるとこはCSSでやるつーからdisplay:none;使うのかと思ったわけで、
jsでやるならそれこそhide()でいいんじゃないの？
aria-hidden=trueなんて初めて聞いたよ。サンキュー
- 748 ：
- >>747
JS無効で初期表示display:noneが上手く動かないという意味だと理解したから反論したのだが
- 749 ：
- >>748
そうか。きっとそうだな。もう何がなんだか・・orz
- 750 ：
- くそ、だまされた。
これで動くじゃないか。
モダンIE使ってIE8で動かしてみたが
これで動くな。
738 自分：Name_Not_Found[sage] 投稿日：2015/09/27(日) 22:16:35.98 ID:???
>>737
これか？
画像の横幅をウインドウ幅に合わせたいが、原寸より大きくはしたくない場合 [イメージ,幅]
http://tips.nishishi.com/css/image-max-width.html
- 751 ：
- >>745
> レスポンシブのIE8をちゃんとやってきてるなら
> そのバグくらい知っているハズだったからな。
何言ってるんだ？ IE8でレスポンシブ対応するっていうのは
デフォルトのPC用が表示されればいいだろ？
レスポンシブ対応の意味わかってないんじゃないか？
そもそも基本的な所がわかってないよね。
レスポンシブ対応というのはスマホサイズ、タブレットサイズ
PCサイズなどといった幅でブレークポイントを決めて
それ毎に適したCSSを適用させるようにすること
IE8ではメディアクエリーが動かないからメディアクエリーの
セレクタが無効な状態でPCサイズ用のCSSが適用されるようにすればいいんだよ。
つまりそれをデフォルトのCSSがとし、スマホ、タブレットで
そのデフォルトを上書きする形のCSSを書けばいい。
もちろんIE8でスマホ版、タブレット版の表示はできない。
だがそもそもIE8が動くスマホやタブレットはない。
だからIE8はレスポンシブ対応する必要はない（正確にはデフォルトのPC版になればいい）
- 752 ：
- >>750
うごかんて。
IEのF12で検証しても実際とは違うぞ？
バグが報告されている理由を考えたまえ。
>>751
たぶん違う。
書いていることは当然全部知っている。
俺はレスポンシブは何サイトも実務レベルで作ってきている。
>>750を踏まえて、の問題だ。
レスポンシブをスマートに行うには、当然HTML側の記述にも工夫が必要で、
ってそもそも何の話かわからないしもう寝るわ。ごめんな
- 753 ：
- >>747
> CSSでやれるとこはCSSでやるつーからdisplay:none;使うのかと思ったわけで、
> jsでやるならそれこそhide()でいいんじゃないの？
jsでやる・・・jsのコードでhide()する
>>717で書いた、
> modernizrのようにhtml要素のclassにJavaScriptが
> 有効なときだけjsというクラスをつける。
というのは、jsではjsが有効であるかの状態を記録するだけ。
jsで非表示にしているわけじゃない。
非表示にするのはdisplay:none
俺が言ってる、jQueryの話も同じなのよ。
jQueryでcss()メソッドは原則的に使わない。
プログラマとしてjQueryを使いこなすならば、要素に状態を記録するだけ、
つまりclassの値を書き換えるだけにし、見た目に関する部分はcssでやるべき。
だからjQueryで見た目を変えるならば、CSSの知識は必須でしょ？
というのが話の発端なのだがねぇ。
> 648 自分：Name_Not_Found[sage] 投稿日：2015/09/25(金) 16:02:06.75 ID:???
> いつも思うんだけど、jQueryやる人はjQueryに頼り過ぎだよ。
> JavaScript = プログラマのもの
> CSS = ウェブデザイナのもの
> みたいな所があるのかね？
- 754 ：
- >>752
> うごかんて。
> IEのF12で検証しても実際とは違うぞ？
> バグが報告されている理由を考えたまえ。
modern.ieって書いただろ？
知らんわけ無いだろうな？
実際に今動かして動いたんだから。
誰でも検証できるぞ。やってみな。
- 755 ：
- >>752
> 書いていることは当然全部知っている。
> 俺はレスポンシブは何サイトも実務レベルで作ってきている。
あぁ、俺と同じだな。で？
俺は実務でつくってるんだぞ！が反論になるのは
有名な人が言った時ぐらいだろうなｗ
> レスポンシブをスマートに行うには、当然HTML側の記述にも工夫が必要で、
> ってそもそも何の話かわからないしもう寝るわ。ごめんな
何の話かって、勝手に話を変更してるからだろ？
俺が言ってるの最初から、なんでもjQueryでやろうとするなよ。
jQueryで見た目を変えようとすると、コードが大量に必要になる。
CSSを使え。その為にもウェブプログラマにはCSSの知識が必要だ。
むしろCSSはウェブプログラマが使うべきものだと言っても良いぐらい。
- 756 ：
- >>754
modern.ieが間違っている。
俺の場合、実際クライアントがIE8実機を使用してて発覚したから。
同じ現象はIETesterで確認できる。
てかホント寝るから
- 757 ：
- > レスポンシブのIE8をちゃんとやってきてるなら
> そのバグくらい知っているハズだったからな。
この理屈がおかしいんだよな。
スマホやタブレットで動くIE8は存在しない。
だからPC版として考えればいいわけで、
レスポンシブのIE8なんて考えがそもそもおかしい。
もちろんPC版としてウインドウサイズに応じて
画像サイズが小さくなるサイトはありだろう。
だがそんなサイトは少ない。大抵がページに最低幅があり
小さくし過ぎると横スクロール表示になる。
PCで見れるIE8対応サイトを作っているなら、ウインドウサイズに
応じて画像を小さくすることぐらいやっているはずだろう。
という意味になっている。
- 758 ：
- >>756
> modern.ieが間違っている。
> 俺の場合、実際クライアントがIE8実機を使用してて発覚したから。
ないわーｗ
modern.ieはエミュレータ技術を使って
本物のWindowsとIEをそのまま動かしてるんだから。
まさかmodern.ieを疑うとは思わなかったな。
modern.ieはマイクロソフトが公式に提供しているサービスだぞ？
> 同じ現象はIETesterで確認できる。
IETesterが間違ってるだけじゃねーかｗ
IETesterはmodern.ieができる前に業務で使っていたことがあるが
IETesterのみでおかしくなる現象があったから、
それつかってテストするのを禁止したぞ。
- 759 ：
- まあなんにせよ、IE8だけで動かないとしても、
基本はCSSを使ってモダンな書き方をする。
その上でIE8のみで動作するJavaScriptを使って
IE8のみでフォールバックするように書くのが
正しいけどな。
- 760 ：
- IE対策は別料金ですよと言ってそれに同意してるのにあとになって
「客のところで見れない」ってクレーム言ってくるのが居るから困る
- 761 ：
- <select></select>
を使って
-----
item1
item2
item3
-----
のようなListBoxみたいなのを作成した時に、
選択したitemをダブルクリックすると編集モードになって
文字を編集したいのですが、そういう機能はjQueryで実現出来ますか？
- 762 ：
- >>761
あなたが頑張ってコードを書けば出来ます
- 763 ：
- >>761
その編集した文字は保存されて
別のユーザーが見たら編集後の文字になってるって事？
その場合はDB使わないといけないからphpの方がいいんじゃない？
- 764 ：
- ＞別のユーザーが見たら編集後の文字になってるって事？
いいえ、そのユーザーのそのセッションのみです。
- 765 ：
- リストボックスじゃないとだめなの？
datalist付きのinput要素で代用とか
- 766 ：
- ダブルクリックしたときに手前にinput出すとかなら結構簡単にできるんじゃない？
- 767 ：
- たぶん俺なら10行ぐらいで作れると思う。
- 768 ：
- あー、selectを使わないといけないなら、
もう少しいるかもな。
- 769 ：
- ちょっと知恵ついた中高生みたいなこと言ってんなよ恥ずかしい
- 770 ：
- いや、でもできるでしょｗ
- 771 ：
- 俺なら8行で作れるわ
- 772 ：
- はい、できたよ。 横80文字以内で実質9行。もうちょっと詰め込めば7行とか。
Chromeでしかみてない。
https://jsfiddle.net/L4aujgk5/
もう少し調整はいるだろうし、他のブラウザとか特に古いブラウザとか
別途対応が必要だろうし、不要な参照が残ってるとかあるけど。
selectを使わないと難しいかもっていうのは、
古いIEでselectの上にinputを置くのが難しかったから、
今も何か問題があるかもと思ってそうかいただけ。
- 773 ：
- 昨日は眠かったから、これでやめたが、やっぱりIE（Edge）でoptionの座標取れないな。
CSSで指定したら一応height()とかで高さ取れそうだから、
paddingとかmarginとかborderとかちゃんと計算したら位置揃え出来そうではある。
でも最悪ブラウザ判定とか必要になるかも知れないな。
- 774 ：
- >>772
凄いな。天才かよ！
IE版も作ってくれよ。
- 775 ：
- あと、ENTER押したら編集モードを抜けるようになると、
もっと嬉しい。
- 776 ：
- >>774
やだ。面倒くさい。
フォーム関係はブラウザ勝手にサイズ決めたりして、それが簡単に取得できなかったりするから、
JavaScriptのコードはそれほど増えるとは思ってないがCSS周りの調査が面倒くさい。
最初はselectじゃなくてlistだと勘違いしていたんだよ。
> あと、ENTER押したら編集モードを抜けるようになると、
それは簡単だから自分で適当にやれ。
- 777 ：
- ここまでプラグインを検索してみた人なしか
ttps://github.com/indrimuska/jquery-editable-select
- 778 ：
- お前それリストボックスでも同じ事できんの？
ノ从从从从ヽ
(⌒／ﾞﾞﾞﾞﾞﾞ＼⌒)
ノｲ ＿ ＿｜ヽ
彡|ヽ･〉〈･ﾉ｜ミ
彡| ▼ ｜ミ
彡ヽ ＿人＿ / ミ
`／ヾヽ `⌒′/ ツ＼
｜ ヾ ﾞﾞﾞﾞﾞﾞ ツ ｜
｜ | ヾ从从ツ | ｜
｜ `――――――⌒)
(＼＿＿＿＿＿＿＿＿)
（⌒ ノ
￣|￣￣￣￣￣Ｔ
少しだけ調べて、それは見たんだけど、リストボックス（複数行）に
対応しているかわからんかったし、そもそも俺jQueryプラグイン嫌いなんでw
jQuery自体は好きだけど、誰が作ったかわからんようなプラグイン使うと
将来メンテナンスがされるかわからんのでね。
jQueryをちゃんと使いこなせれば、だいたいのものが少ない行数でかけるので。
- 779 ：
- >>772
お前凄いな！
俺も作ろうとしたけどどう頑張っても10行以内に収められなかったわ
- 780 ：
- >>779
だろうだろう？ｗ
これでも俺今無職なんだぜ？orz
- 781 ：
- ファイルアップロード時のプログレスバーを、jQuery を使えば
実装できると知り、調べてみました。
が、どのHPを見てもさっぱりわからん・・・
javascriptはほんのちょっとだけ、できます。
そんな私に予期アドバイスをお願いします。
- 782 ：
- HP見てもわからんのなら、実力的にまだ無理ってことじゃないのかな
ちなみにどのHPみた？
- 783 ：
- 大抵はアップロード開始時にアニメーションGIF表示させてレスポンスが帰ってきた時に
表示を消すぐらいしかしてないんじゃないか？
サーバー側のPHPなどのスクリプトも絡んでくるから解説するページが少ないのでは？
それか自分でそういうページをわからないから避けているか
- 784 ：
- >>779
じゃあie版は君が作ってくれよ！
みんな君に期待しているぞ。
なあ、みんなそうだろ？
- 785 ：
- >>781
progress イベントをフックするだけで進捗率を取得出来る
http://takuya-1st.hatenablog.jp/entry/20121101/1351754417
- 786 ：
- >>785
お～
なんか、よさそうなHP。
ありがとう。このHPで勉強してみます。
- 787 ：
- 何方か知恵を授けて下しあ。
windowsのie8の互換モード及びie7モードでの現象です。
jqueryで、読み込んだtxtファイルから画像のリストを作成したり、他所のhtmlから部分的に要素を読み込んだりしてます。
読み込んで表示させる場所はコンテンツの中央部分です。
それ自体は問題なく動作してるのですが、読み込まれた際に、jquery読み込み前に既に読み込まれていたフッター要素の中身が、そのままの場所に残るのです。
その結果、読み込まれたリストの上にフッター要素が重なって表示されます。(フッターはその要素分の空白が空いたまま)
表示後にマウスでウィンドウサイズを変更すると正しい位置に戻ります。
何度か再読み込みをするとうまくいくこともあるのですが、ずれている事の方が圧倒的に多いです。
何か手があったらご教授お願いします。
長文失礼しました。
- 788 ：
- jQueryとは無関係な話題なので
+ JavaScript の質問用スレッド vol.126 + [転載禁止](c)2ch.sc
http://peace.2ch.sc/test/read.cgi/hp/1444186237/
に言ってください。
- 789 ：
- 失礼しました。
誘導どうもです。
- 790 ：
- >>784
わろたｗ
>>779さんはきっと今一生懸命コード書いてるよ。
- 791 ：
- jquery.pagination.jsやsimplePagination.jsのページャーを使うと
画像表示に使っているlightboxやfancyboxが動かなくなります。
競合してると思うのですが回避方法がわかる方がいればアドバイスお願いします。
- 792 ：
- $('#textarea_ID').val('文字列')
でテキストエリアに文字列を書けますよね？
でもIE11なら書けるのに、FFやChromeで書けないんです。
なにが悪いんでしょうか？
- 793 ：
- >>791, >>792
jsfiddleなどにサンプルコード（再現コード）を書いてください。
- 794 ：
- Jquery初心者で、質問です。
こちらのサイトの「長い文章を隠し、クリックで続きを読ませる」みたいな
ことをしたいのですが、
http://metrograph.jp/gradation_paragraph/
このサイトの方法だと「もっと詳しく」を一度押したら消えてしまい、
再びたたむことができません。
文言を「たたむ」などに変えて
再びたためるようにするには、JSをどう変えればよいでしょうか？
- 795 ：
- >>794
コード作成依頼と捉えてよろしいでしょうか？
- 796 ：
- これはおそらく3行でできるだろうな。
（CSS除く）
アロー関数や無理するのありなら一行だ。
- 797 ：
- あと一つ文書構造的に違和感があるかもしれないのを無視すると0行で作れる。
- 798 ：
- >>795
最後の
more.click(function(){
のところを少し変えたり足したりすればできるかなと思ったんですが
- 799 ：
- >>798
じゃあ自分で変えたり足したりしてください。
- 800 ：
- >>798
.hide()を.slideToggle()に変えたりすればできるかなと思いました。
- 801 ：
- .load();をutf-8以外の文字コードで使う方法はないですか？
条件
・shift-jisもしくはeuc-jp
・IE9以下で文字化しない
なんで無いんですか
- 802 ：
- >>801
MimeTypeを指定するだけだよ
- 803 ：
- 何行でできるとか言ってる奴まだいるのか
短く書けるアピールしたいならcodegolf復旧後にそっち行きなよ
短ければいいってもんじゃないんだからさ
- 804 ：
- >>803
コードゴルフ？何言ってるの？
普通に書いてそれぐらいだなって話してるだけだけど。
- 805 ：
- 短く書きたがるのはjQuery信者にありがちな発想だな
長くとも例外処理をつける必要があることを彼らは認めようとしない
- 806 ：
- >>805
無駄なコードを書かないのは当たり前。
その結果コードは短くなる。これも当たり前。
コードゴルフは可読性を犠牲にして"文字数を"減らすもの
ごっちゃにするなよ
例外処理ってなんのこっちゃｗ苦し紛れもいいとこだな。
必要な無い例外処理を書いてそうで怖い（笑）
- 807 ：
- 記述の仕方でも行数なんて変わってくるし
>>805の言うように何か処理を加えただけでも数行増えたりするんだし
そもそも、何行以内とかいう話は作り方でもなんでもないからねえ
- 808 ：
- さらに意味不明だなｗ
処理追加したら増えるの当たり前だし、
今話してるのは処理追加しない場合の話だし、
何行以内っていうのは、結果そうなるってことで
予測される事実を言ってるにすぎないんだが。
- 809 ：
- 行数宣言はただの自慢だろ
>>772でちょっともてはやされたからまた賞賛を受けたくてアピールしてるだけ
結果論ならわざわざ宣言する必要はないからな
- 810 ：
- あぁ、賞賛を得たことが羨ましかったのかｗ
- 811 ：
- >>809
俺はプログラミングに関しては超一流(自称)だが、その俺から見ても772は中々出来る奴だと思う。
- 812 ：
- 超一流が言うのなら仕方がない。
- 813 ：
- >>811
行数自慢は頂けないという話
彼が出来るかどうかは別問題
- 814 ：
- >>813
自慢じゃないよ。それぐらいでできるって話。
- 815 ：
- どんだけめでたいんだコイツ
たぶん仕事でやった経験もないかあっても1-2年てとこだろうな
- 816 ：
- >>814
クイズじゃないんだから何行で書けるなんてくだらん情報は要らん
そんなことを書く暇があるならコードで示せ
- 817 ：
- >>802
条件読めｗ
- 818 ：
- >>815
そんなわけなかろうｗ
>>816
たまには他に人がコード書けよ。いつも俺ばっかりだ。
コードなんてぱっと思いつく。書くのが面倒なだけ。
- 819 ：
- こういう奴のために脳波でPC操作できるデバイス普及して欲しいな
- 820 ：
- 最近珍しくそこそこできる人が集まっている気がする。仲良くすりゃいいのに・・。
ところで質問なんだが、
テキストの文字列をキーに選択し、処理をしたい場合で、
かつ文字列内にメタ文字を含めたい場合ってどう書けばいいの？
<div id="hoge">
私は赤い
<p>私は青い</p>
<p>私は赤いし青い</p>
私は黄色い
<p>私は白黒</p>
あなたは白黒
</div>
「私は(.*)い」のみ<span>タグで括りたい。
- 821 ：
- >>818
書くのが面倒なら何も書くな
行数だけ書かれても誰の為にもならん
- 822 ：
- まあ、いっちょかみってやつだな
- 823 ：
- >>820
その内容を都合よく解釈すれば↓みたいな正規表現でも済むけど
要件詰めないと的確な回答は得られなさそうだね
$('#hoge').html($('#hoge').html().replace(/私は(.+?)い/g, '私は<span style="font-weight:bold">$1</span>い'));
- 824 ：
- .contents() 使って再帰的にってのが質問者の意図に近いのではなかろうか
- 825 ：
- >>823
ありがとう。
ただ、自分も同じような方法になってしまっていたんだが、
正解という事に変わりはないです。
意図としては、置換処理無しで
文字列としてセレクタのように指定する方法は無いかなって事でした。
イメージ
$(/私は(.+?)い/g).wrap('<span />'); みたいな
- 826 ：
- 自分で拡張するのが一番だろうね
- 827 ：
- すみません。初心者でいろいろググってもうまくいかなくて困っています。
サイトのトップページをフルスクリーン(の下にも内容があります)にするのですが
うまく説明できなくてすみませんがこんな感じです。
見づらいと思いますがお願いいたします
- 828 ：
- $(document).ready(function(){
var w_height = document.documentElement.clientHeight;
var MODE = 0;
var A = $(window).scrollTop();
var ue = $("#bottomup");
var shita = $("#bottomdown");
$(ue).toggle(false);
$(shita).toggle(true);
- 829 ：
- $(window)
.scroll(function(){
if (MODE == 0 && A > 10){
scrolldown();
}
if (MODE == 1 && A < w_height - 10){
scrollup();
}
});
$(ue).on('click',function(){
if(MODE == 1 && A > w_height ){
scrollup();
}
});
$(shita).on('click',function(){
if(MODE == 0 && A < 10){
scrolldown();
}
});
- 830 ：
- function scrollup(){
$("html,body")
.filter(":not(:animated)")
.animate({scrollTop: 0},1000,function(){
MODE = 0;
appearSHITA();
});
}
function scrolldown(){
$("html,body")
.filter(":not(:animated)")
.animate({scrollTop: w_height + 25},1000,function(){
MODE = 1;
appearUE();
});
}
function appearUE (){
$(shita).toggle(false);
$(ue).toggle(true);
}
function appearSHITA (){
$(ue).toggle(false);
$(shita).toggle(true);
}
});
- 831 ：
- 具体的に言うと、
・一番上にいる状態から下スクロールしてもscrolldown()が実行されない
・#scrolldownの↓ボタンを押すとscrolldown()が実行されるがなぜかすぐscrollup()が実行されて戻される
（しかしボタンの表示は一瞬だけ↑になった）
・自分でフルスクリーンのけっこう下までスクロールしても↓ボタンのままで、押すとフルスクリーンの直下までスクロールされる
（一番目の問題が原因だと思いますが）
しかしボタンなしで書いたらうまくいきました。
- 832 ：
- >>831
何したいのか全くわからないな。
jQueryっぽく無いコードだってのはわかるが。
知らんけどMODEなんてのがあるのがいけないんじゃないか？
そんなものがあると、コードが複雑になるだろう。
- 833 ：
- スクロールの挙動は、君がスクロールイベントの発生タイミングを勘違いしているからだろう。
scrollイベントっていうのは、ユーザーがマウスホイールを動かした時に発生するが
スクロールが終わった後に発生するのは確実だが、スクロール中は発生したり発生しなかったりする。
例えば0から100の位置に移動するとき、2の位置で発生したりする。
現在の位置でscrollup、scrolldownするか変えてるからそのせいじゃないのか？
一般的にscrollイベントの中でスクロールはやめたほうがいい。
- 834 ：
- それから、コードをもう少し簡潔にした方がいい。
まず、appearUE、appearSHITA は無くして呼び出し元に移動する。
そして、toggle多すぎ。
こういうのは、htmlかbodyのclassにクラスを設定してCSSで制御する。
つまり、
<body class="foo">
<button id="ue">
<button id="shita">
</body>
#ue { display: none }
#shita { display: inline }
.foo #ue { display: inline }
.foo #shita { display: shita }
となっていれば、bodyのfooをつけたり外したりするだけで良くなるだろう？
MODEも同期しているようだから、まとめてしまえるだろう。
- 835 ：
- すみません…ありがとうございます
やりたいことは、簡潔に言うと「フルスクリーンを中途半端にみせたくない」のです
当初は「フルスクリーン表示中にスクロールすると自動でその下までスクロール」（またその逆）
だったのですが（これはうまくいきました）
それにposition:fixedの「TOPへ戻るボタン」にもその機能をいれて、
そのボタンをフルスクリーン表示中に押すとフルスクリーンの下までスクロールしたらな…ということです。
フルスクリーン表示中はMODE=0でフルスクリーンの下を表示中は
MODE=1にしていたのですが、
もっといい「フルスクリーン表示中」と「その下の表示中」を分ける方法があったらどうかご教授ください
思いつきませんm > < mごめんなさい…
- 836 ：
- 834さんありがとうございます
- 837 ：
- 「フルスクリーンを中途半端にみせたくない」の意味がわからん。
日本語にすると
「全画面を中途半端にみせたくない」なんだが、
どういう意味だ？
- 838 ：
- フルスクリーンの用語の使い方を間違ってる気がするが。
> フルスクリーン表示中はMODE=0でフルスクリーンの下を表示中は
> MODE=1にしていたのですが、
日本語にすると
全画面表示中はMODE=0で、全画面の下を表示中はMODE=1に
となるが、
全画面の下を表示中とはどういう意味か？
- 839 ：
- フルスクリーン→ページの一番上で全画面表示してる画像等
です
言い回しがおかしかったです
- 840 ：
- まだおかしいような…
- 841 ：
- 一般的にフルスクリーンとフルスクリーンでない時で
動作を変えるのはお薦めしないとして
フルスクリーンとはどういう状態のことか？
ここによると、
http://stackoverflow.com/questions/16755129/detect-fullscreen-mode
ブラウザのフルスクリーンモードを検出するには、$(document).is(":fullscreen") で
検出できるが、IEはサポートされてないと書いてある。
もしくは以下のコードで、フルスクリーンモードを（それなりに）検出できると書かれている。
if( window.innerHeight == screen.height) {
// browser is fullscreen
}
You can also check for some slightly more loose comparisons:
if( (screen.availHeight || screen.height-30) <= window.innerHeight) {
// browser is almost certainly fullscreen
}
この方向の話でいいのか？
- 842 ：
- >>839
なんとなく分かりそうだが、「フルスクリーン（全画面）」という
用語を使わずに、やりたいことを最初から説明してくれ。
コードはそのままでいい。
- 843 ：
- あ…フルスクリーンじゃなかったです
- 844 ：
- おそらく今回の場合、ウインドウ全体に表示している画像が
たまたまそこにあるだけで、別に無くても構わない話ではないか？
説明はよｗ
- 845 ：
- >>834の
> こういうのは、htmlかbodyのclassにクラスを設定してCSSで制御する。
この案は廃止する。
なんとなくわかってきたことを組み入れると、これはよくない。
- 846 ：
- 細かい問題点を補足しておくと、
最初にw_heightを取得しているが、これだとウインドウがリサイズした時に対応できない。
同様に var A = $(window).scrollTop(); もよくない。
document.documentElement.clientHeight ではなく、jQueryのメソッドが使えるはず（たぶん）
大文字で始まる変数名は通常定数（変わらないもの）として使用する。MODEやAという名前は良くない。
- 847 ：
- ごめん。>>845で廃止するってかいちゃったけど
廃止しなくてもいいやｗ
今回の内容の範囲内でなら必要ないけど、
あるともっといろんなことがしやすくなる。
- 848 ：
- レスねぇなぁ。仕様がわからんので勝手に解釈する。
このコードの問題は、手続き的になっているということ。
わかりやすく言えば、何かのタイミング（scrollイベント発生やボタンクリック）で
あの処理をして～この処理をして～その処理をする。という発想になってる。
具体的には、scrollイベントが発生した時にスクロール、ボタンの状態を変更して、MODE変数を書き換えている。
ではなくて、○のときは△である。という定義の形にする。
そして本来は独立しているものを、いっぺんをやり過ぎている。
やるべきことを小さく分割する
1. 「上へ移動」ボタンをクリックすると、上に移動する。
2. 「下へ移動」ボタンをクリックすると、下に移動する。
3. 「上へ移動」ボタンは、上あたりにあるとき非表示にする。
4. 「下へ移動」ボタンは、下あたりにあるとき非表示にする。
5. ウインドウがスクロールした時にボタンの表示状態を変更する。
※ 3. 4. はコードから読み取れる仕様とは違うけど勝手に変えた
Aもw_heighも変わらないのに、scrollイベントでそれをやる意味がないので。
- 849 ：
- そして勝手に解釈した仕様でコードを書くｗ
もちろんテストはしていない。
金もらえるわけでもないので、自分の趣味でやってるだけで
望んだものを作ってあげる義理はないんでｗ
$(function(){
function scrollTo(top) {
var prop = {scrollTop: top};
$("html,body").filter(":not(:animated)").animate(prop, 1000);
}
function refresh() {
var top = $(window).scrollTop();
$('#bottomup').toggle(top > 10);
$('#bottomdown').toggle(top < $(window).height() - 10);
}
$('#bottomup').on('click', function() {
scrollTo($(window).height());
});
$('#bottomdown').on('click', function() {
scrollTo(0);
});
$(window).scroll(refresh);
refresh();
});
- 850 ：
- 843はRuthless Angelで3:07まで書き込めないそうです
- 851 ：
- 本当にありがとうございましたって言ってました
- 852 ：
- やりたいこと
・画像(横幅clientWidth,縦幅clientHeight)をまず最初に表示
・一番上にいるとき少しでも下にスクロールするとその画像の下の内容のところまでスクロールさせたい
・↑の逆で、画像の下にいるとき上にスクロールして画像が見えたら一番上までスクロール
・固定したボタンを用意して画像が表示中（つまり一番上にいるとき）押すと画像の下までスクロール
・↑の逆で画像の下にいるとき押すと一番上にスクロール
ってかんじです
と書こうとしたら書き込めなくなってしまいました。
849のコードを使わせていただきます
ありがとうございましたm(_ _)m
- 853 ：
- ちょっと重いページを読み込んでいる最中に
クルクル回転するのを出したいのですが、
JQueryやJSで出来そうなのですが、最もスタンダードな奴を
教えて下さい。
- 854 ：
- 最もスタンダードなのは通信をしている間にクルクル回転するGIFを表示させて
読み込み終わったらGIFを非表示にする方法だと思う
つまり単に表示/非表示を切り替えるということ
画像はloading spinnerとかでぐぐるとゲットできるゾ
- 855 ：
- >>854
なるほど！サンキュウ！助かったよ！君いい奴だな！
- 856 ：
- スレチかも知れないですがあえてここで質問してみます。
①http://www.example.com/images/a.jpg →絶対パス
②images/a.jpg →相対パス
③../../images/a.jpg →相対パス
④./images/a.jpg
⑤/images/a.jpg
④と⑤は何て呼んでますか？
- 857 ：
- 相対パスだよ。
../ ・・・ （現在いる位置からみて）親ディレクトリの
./ ・・・ （現在いる位置からみて）現在のディレクトリの
という意味でしかない。
現在いる位置からみるものはすべて相対パス
- 858 ：
- そういやなんで、./ なんてものがあるんだろうね。
と自分の知識を整理した。
1. URLに関して./は必要ない。 ../ だけあれば十分
2. もともとURLではなく、ファイルのパス用に作られた決まりを流用した。
3. ファイルのパスも./は無くても良さそうに思える
4. 例えば cat text.txt と cat ./text.txt は同じ
5. ただし実行ファイルの時に困る。
6. prog.sh と入力しただけでは、現在のディレクトリのprog.shは実行されない
7. なぜなら現在のディレクトリはPATHに含まれていないため
8. セキュリティの意味もありPATHに含めてはいけない（誰かがそこに実行ファイルを置いたらどうする？）
9. ということでカレントディレクトリのプログラムを実行するときは、 ./prog.sh
まあURLでも、JavaScriptで「ベースとなるパスを入れてください」という変数に、
省略 と 現在のパス を区別する時に使うといえば使うか。
- 859 ：
- >>857
５は絶対パスだよ
>>858
Webに関して言うと同じディレクトリのindex.htmlを指定したいが
「index.html」自体は省略したいときに「./」は必要だよ
- 860 ：
- パスはファイルを指定するだけじゃなくてディクレトリを指定するためにも使う
「カレントディレクトリ」のパスが . とか ./
- 861 ：
- >>859-860
そういやそうだねー
- 862 ：
- 回答有難うございます。
ちなみに人に口頭で伝達・指定するときには、どうやって
④や⑤の記述を伝えますか？
⑤はルートパス？④は？
- 863 ：
- パスが、「/」(ルート)から始まっていれば、絶対パス
これ以外は相対パス
- 864 ：
- ./に疑問を抱く奴がいるとは思わなかった
- 865 ：
- >>863
①と⑤を区別して伝達するときは
①フルパス
⑤ルートパス
でおｋ？
- 866 ：
- それだけ言われても混乱する人がいるのは間違いないんだから
①は「httpから始まる絶対パス」、⑤は「スラッシュから始まる絶対パス」とかでいいじゃん
- 867 ：
- 絶対URIが絶対パスと誤認される一因はAdobeにある
https://teratail.com/questions/17299
- 868 ：
- というか、ここまで絶対URIに言及している人が一人もいないのか
AdobeエンジニアはRFCを熟読してドキュメントを書き直してこい、と小一時間問い詰めたい
- 869 ：
- $('#input_ID').keydown(function (event) {
if (event.ctrlKey && event.keyCode == 86) {
alert("ctrl+v");
}
});
とすると <input id="input_ID" ... > で ctrl+v を押した場合のイベントを検出出来たのですが、
イベントの順番としては、
alert実行
inputにペースト
のようなのです。
これを逆にできますか？
つまり
先にinputにペーストして
その後、alert実行
- 870 ：
- 解決しました。
- 871 ：
- >>856は回答放置かよ
- 872 ：
- 便所の落書きでお礼でも期待してんのか？
- 873 ：
- 便所の落書きなら回答も期待すんなよ
質問スレの意味ないけどな
- 874 ：
- 馬鹿すぎて話にならない
Yahoo知恵遅れでもやってろ
- 875 ：
- 便所の落書きを方便に使う奴ってまだいたんだな
- 876 ：
- >>871
失礼しました。
回答いただき誠にありがとうございました。
最後がボヤーとした感じで会話が続くのか終わったのかよくわからなくて
見守ってましたｗ
- 877 ：
- ajax()＋find()ってバグありますか？
ajaxでファイル内の一部分だけを読み込みたいのですが
$.ajax({
type: 'GET',
url: 'hoge.html',
dataType: 'html',
success: function(data) {
var parts = $(data).find('.child');
$('#load').html(parts);
}
});
hoge.html側のタグ構造で親が<p>だと読み込めなくなります。
▼読み込めないパターン1
<p id="parent">
<p class="child">子<p>
</p>
▼読み込めるパターン
<p id="parent">
<span class="child">子<span>
</p>
理由が知りたいです。
- 878 ：
- ↑訂正
＞親が<p>だと読み込めなくなります。
親が<p>の時のケースで読み込めないケースがあります。
これも。
▼読み込めないパターン2
<p id="parent>
<div class="child">子<div>
</p>
▼読み込めるパターン2
<div id="parent><section class="child">子<section></div>
- 879 ：
- ↑連投すません
閉じタグ間違ってしまってますが、それはおいておいて。
- 880 ：
- >>878
再現するコードを貼ってもらわないと回答する方も困惑する
<p id="parent>のダブルクォーテーションも足りてない
- 881 ：
- >>876
終わるのはあなたが理解してから
会話が終わるのを待つ必要はないから
- 882 ：
- >>880
再現するコードです。
<p id="parent">
<p class="child">子<p>
</p>
試しに「id="parent"」のタグをdivに変えると読み込まれます。
- 883 ：
- >>882
p>p の構成には出来ない
DOMツリーを見ればわかる
- 884 ：
- >>883
ありがとうございます。
HTMLの問題でしたね
- 885 ：
- HTML5でブロックレベル、インライン要素の概念が無くなったとかいうわりには
結局<p>は入れ子ができないわけね
- 886 ：
- できたら互換性なくなるだろ。
どの要素を中に含めることができるかどうかっていうのは
ブロックやインラインとは全く無関係の話なんだが。
そもそもspanとかインラインでも入れ子にできるやつはできただろ。
ブロックやインラインという概念があったから
入れ子に出来なかったわけじゃねーよ。
- 887 ：
- そっか。
ごめんな怒らせてしまって。
- 888 ：
- 怒ってるんじゃねーよｗ
馬鹿にしてるだけだ。
- 889 ：
- やっぱりwをつけないと
馬鹿にしてるってわかりづらいようだなｗ
- 890 ：
- 続けてごめんなさい
ajax()で
<head>部分は読み込ませないオプションか記述が何か
昔見た記憶があったのですが気のせいでしたでしょうか。
- 891 ：
- いっそload()にするとか
- 892 ：
- >>891
ありがとうございます。
load()だと<head>をフィルタリングできるんですね。。
内部的にデータを使用したい場合はget()というのもわかり
勉強になりました。
- 893 ：
- <table>
<tr><td>男</td><td>算数</td><td>国語</td><td>理科</td></tr>
<tr><td>男</td><td>理科</td><td>理科</td><td>国語</td></tr>
<tr><td>女</td><td>理科</td><td>社会</td><td>国語</td></tr>
<tr><td>男</td><td>国語</td><td>国語</td><td>社会</td></tr>
</table>
jQueryのセレクタを教えて下さい。
このようなtableがあります。性別/1番好きな教科/2番目に好きな教科/3番目に好きな教科のアンケート結果をリスト化したものです。
（教科がかぶっている方もいますが、それは問題ありません）
jQueryで「性別が男で、一番目か二番目に好きな教科が国語」の列をhide()で非表示にしようと思ったのですが、うまくセレクタが書けませんでした。
こういう場合はどのようにかけばいいのでしょうか？
最終的に1列目と4列目のみ表示したいです。
- 894 ：
- $('tr').find('td:eq(1):contains("国語"), td:eq(2):contains("国語")').closest('tr').hide();
- 895 ：
- >>894
ありがとうございます！
- 896 ：
- 性別男がぬけてたがまあ分かるよな
- 897 ：
- 俺だったらこう書くかな。
内容からしていろいろ条件を変えて検索したい気がするので条件部分を抜き出し
function filter(data) {
return data[0] == "男" && (data[1] == "国語" || data[2] == "国語")
}
$('tr').filter(function() {
return filter($(this).children().map(function() {
return $(this).text()
}));
}).hide();
- 898 ：
- 少し変更。
function filter(sex, no1, no2, no3) {
return sex == "男" && (no1 == "国語" || no2 == "国語")
}
$('tr').filter(function() {
return filter.apply(null, $(this).find('td').map(function() {
return $(this).text()
}));
}).hide();
- 899 ：
- 横だがどっちのもとても参考になった。
>>894みたいにサクッと書いてその場をしのぎたいケースもあるし、
>>898みたいにいかにもプログラム的な書き方も尊敬。
- 900 ：
- focus outよりもclickを優先させることできませんか？
現在formでinputに:focusした際に、CSSでheightを大きくするアニメーションを付けています
focusoutすると元の大きさに縮むのですが、submitボタンが下にあるのでfocusしたら
当然submitボタンがアニメーションしたheight分下がります
focusoutするとsubmitボタンも元の場所に上がります
イベントの優先順位が focusout > click のせいか、高さが大きくなった入力欄にフォーカスがあるままsubmitボタンを押そうと思ったら
逃げるようにボタンが上に上がるので押せません
今まだjQuery使ってませんが、jQueryで解決できそうですか？
使わなくても方法があればどなたかお知恵お貸し下さい。
- 901 ：
- >>900
イベントの順番ではなくて、CSSの適用の方が速いので（正確にはブラウザによって違うと思うが）
フォーカスが外れたらすぐにレイアウトに反映される。CSSを使っている以上無理だろう。
だから全部JavaScriptに統一すればいい。
1. フォーカスイベントが発生した要素に適当なクラスをつける。
2. フォーカスアウトが発生した時にそのクラスを外す。
3. フォーカスアウトですぐにクラスを外して問題になるのなら、
setTmeoutを使って僅かに遅延させればいい。
jQueryを使わなくてもJavaScriptだけでできる。jQueryは
この処理を簡単に記述（おそらく10行以内）できるようにするだけ。
- 902 ：
- >>901
ありがとうございます、よく分かりました！
- 903 ：
- うーむ。やってみたけどこれだめだな。
遅延を大きくすれば可能だけど、少し遅延させただけだと
クリックイベントが発生しない。マシンスペックなどによるだろう。
これは他の要素がフォーカスを取った時に、
前にフォーカスがあった所（というか他全部）の
クラスを外したほうが良さそうだ。
想定外の所に飛んだ時とか考える必要があったら
面倒なことになりそうだな。
- 904 ：
- >>903
同じ結果になりました…。
submitを影響の受けない横の位置にfixすることにしました……。
どうもありがとうです。
- 905 ：
- あぁ、そうしたｗ
そうれで行けるならそっちのほうがいいよ。
別に他にやり方が無いわけじゃない。
クリックした時にクラスを外せばいい。
だけどクリック以外にもクラスを外すタイミングがあるだろう。
例えば他のinputとか。
本格的にやるやり方だと、意外と考える必要があって面倒。
手を抜いていいなら楽。画面構成によって変わるだろうから
これ以上やるなら、もう少し情報が必要だなぁと思った次第。
- 906 ：
- twitterやFacebookのシェアボタンをJQuery UI Dialogの上に
置いたら表示出来ないのだけれど、原因分かる人いますか？
- 907 ：
- いません！
- 908 ：
- jquery ui のdraggableで長方形などはデモでありますが、
任意のアイコン画像をdrag移動させたいのですが、
画像の周囲は透明にした状態でできますか？
例えば●のマークのアイコンなら丸の黒い部分以外の周囲を透過にしたいのですが。
- 909 ：
- アイコンを透過PNGにすればいいと思うよ！
- 910 ：
- >>909
試してみたのですが、透過にならないんですよね。おかしいなあ。
- 911 ：
- jQueryつーか、CSS初心者スレでレベルの内容だYO
- 912 ：
- >>911
知らないならレスしなくていいよ
- 913 ：
- >>910
うーんそれなら原因は分からないなあ。
再現ページのURLを貼ってくれれば答えられると思うよ！
- 914 ：
- >>910
その画像どっかのロダにアップして
- 915 ：
- >>912
あ？じゃあエスパーしてやるよ。
その画像の親要素の背景の色を解除すればいい。
ほらＣＳＳの内容だろ。
ローカル環境でそのpngだけを表示して透過しているなら間違いなくこのエスパーは当たりだ
- 916 ：
- タグ以外の部分（本文）の全角と半角のスペースをjqueryで置き換えたいのですが、全角なら
$(this).html(txt.replace(/ /g,'●'));
で全角スペースが●に置き換わるのですが、半角だとタグ中のスペース（<a href...>のaとhの間のスペースなど）まで置き換えられてしまいます。
半角はどのようにしたら上手く変換できるでしょうか。
- 917 ：
- >>916
正規表現でやればいいんじゃあないの？
- 918 ：
- jQueryはDOMのライブラリなのだから
DOM以外にjQueryを使うのは間違い。
- 919 ：
- 画面上のある<div>内の領域の(x,y)の座標（ピクセル値で）に、
十字のカーソルを描きたいのですが、最もお手軽な方法を教えて下さい。
何が起こってもその十字のカーソルは画面上に表示され続けるようにしたいです。
十字のカーソルデータは画像ファイルで与えたいです。
- 920 ：
- 何が起こってもって具体的にどういうこと？
停電しても表示させたいの？
- 921 ：
- >>919
CSSの話なんでそっちで聞いてください
- 922 ：
- >>921
お前は仕切り屋か
- 923 ：
- >>922
はい。給料もらって仕切ってるプロですよ。
- 924 ：
- >>920
はい。地震や災害にも強いカーソルを目指いしたいです。
- 925 ：
- >>916
やってみたけどタグ内は置換されてなかったぞ。
気になるなら.text()でやったら？
$('a').each(function(){
var txt = $(this).text();
$(this).text(
txt.replace(/ /g,'●')
);
});
- 926 ：
- jQueryUIのdraggableを使って、ごく普通に長方形なdivを配置した場合、
マウスのドラッグで移動できるのは良いのですが、そのdivの上でmousewheelを
回した時には、そのイベントは無視してその下にあるウインドウに投げたいのですが
どうやれば良いですか？
- 927 ：
- >>926 その下にあるウインドウに投げたい
とは？
- 928 ：
- >>927
AAにするとこんな感じ
￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣｣
―――――――――――――‐┬┘
|
＿＿＿＿.＿＿＿＿ | .＿＿ いらないＰＣを
| | | | |＼＿＼ 窓から
| | ∧＿∧ | | | |.◎.｜ 投げ捨てろ
| |（ ´∀｀）つ ミ | | |.： ｜
| |/ ⊃ ﾉ | | .＼|.≡.｜
￣￣￣￣'￣￣￣￣ | ￣
. | ｜|｜
. | _| | |_
. | |＼＿＼
＿＿＿＿.＿＿＿＿ | | |.◎.｜
| | ｵｯ!! | | | |.： ｜
| | ∧＿∧ | | .＼|.≡.｜
| |（ ・∀・） | | ￣
| |/ ⊃━⊃━━━━┫ ┃
￣￣￣￣'￣￣￣￣ | ┃ ┃
| ┗━━━━━┛
|
――丶ヽ〃――――――――― ~~~~~~~~~~~~~~~~~~~~~~
- 929 ：
- つまり投げる側は２階以上の住居に住んでいるというのが条件になってくるな
- 930 ：
- 解決したらお礼ぐらい言ってほしいもんだ
- 931 ：
- お礼は30行で
- 932 ：
- できれば縦読みで
- 933 ：
- >>927
例えばスクーロールするとかだろうな
- 934 ：
- スクロールスクロールスクロールスクロールスクロールスクロール
スークーロールスークーロールスークーロールスークーロール
スクーロールスクーロールスクーロールスクーロールスクーロール
スクーロースクーロースクーロースクーロースクーロースクーロー
- 935 ：
- >>934
アホですか？
- 936 ：
- 質問
.each()等で取得してきた値を1箇所にまとめて出力するのってどうやりますっけ？
↓hrefの値を取得し#hにテキストで出力したい
<div class="hoge">
<p><a href="#a">#a</a></p><span>hoge</span>
</div>
<div class="hoge">
<p><a href="#b">#b</a></p><span>hoge</span>
</div>
<p id="h"></p>
- 937 ：
- 出力結果のイメージを書け
- 938 ：
- あと「どうやりますっけ？」じゃねえよアホ
知ってたけど忘れましたみたいな言い方すんな
- 939 ：
- >>936
$("#h").html($("a").map(function() {
return this.href;
}).get().join("<br>"));
- 940 ：
- >>938
すいませんすいませんすいません
>>939
うおすげ簡潔。
ありがとうございます！！！！！
- 941 ：
- （jQueryプラグインを作る時以外）eachを使ったら負けだと思え
- 942 ：
- >>941
それはなぜですか？
便利なのでよく使ってしまうんですが
- 943 ：
- ちなみに最新ブラウザのアロー関数を使ったらこうな
$("#h").html($("a").map((i, e) => e.href).get().join("<br>"));
- 944 ：
- >>942
jQueryは、要素を一つづつ操作するライブラリではなく、
「CSSセレクタにマッチした0個以上の要素の塊」に対して操作するライブラリだから。
jQueryが関数型風ライブラリと言われる理由の一つでも有る。
eachを使うと要素を一つづつ操作することになる。
それはjQueryの本来の考え方に合っていない。
これはCSSの考え方にも適合している。
CSSはセレクタにマッチした要素に対して装飾を行うもの。
1つずつ操作をするという手続き型的なやり方はしない。
jQueryプラグインが例外なのは、そもそもプラグインというのは
素のJavaScriptを使ってjQuery風なメソッドを作るものだから仕方がない。
- 945 ：
- >>944
なるほどjQueryの考え方からすると本筋ではないということですか
本筋から逸れたやり方をすることで
処理速度やコードの可読性が低下したりといった実害はありますか？
また、セレクタでピックアップした要素のひとつひとつに
操作を施したい場合、よりよい方法とはどんなものでしょう？
- 946 ：
- > 処理速度やコードの可読性が低下したりといった実害はありますか？
「うおすげ簡潔」が答えだろう。jQueryのやり方だと簡潔になる。
> また、セレクタでピックアップした要素のひとつひとつに
> 操作を施したい場合、よりよい方法とはどんなものでしょう？
eachを使わない。
- 947 ：
- 実害はないということですか
それどころか簡潔な記述にできると
eachを使わない場合forループをまわすか
そもそもループを必要としない処理方法を考えるかですね
（上のmapの例のように）
しかし私の理解不足もあるのかもしれませんが
今後も気軽にeachを使いつづけてしまいそうな気がします・・・
- 948 ：
- すみません、書き込んだあとに気が付きましたが
>>946を読み誤って逆の解釈をしてました
よろしければeachを使わない簡潔な記述の例を教えてください
- 949 ：
- eachを使わなけれいいだけだろう。
例？
$('a').hide()
はい。おしまい
- 950 ：
- 俺も気にせずふつうに使ってるがダメなのか？
>>949は参考にならんし・・・
- 951 ：
- >>926
jQueryのイベントバブリングと、
「return false;」「e.stopPropagation();」「e.preventDefault();」について
ttp://blog.neo.jp/dnblog/index.php?module=Blog&action=Entry&blog=pg&entry=3107&rand=ef81c
return true; にしたら、親要素へイベントが伝わるのでは？
- 952 ：
- Windows7,8,10でDesktopのwidthとheightを取りたいのですが、
Startボタンがあるツールバーの部分は除いた大きさを取れますか？
- 953 ：
- 無理。そもそもブラウザの外の情報は取れないと考えるべき
- 954 ：
- >>953
横からすまん。
screen.Height/screen.widthではダメなの？
- 955 ：
- >>954
それでいいよ
- 956 ：
- >>952
つ screen.availHeight
- 957 ：
- >>956
ありがとうございました
- 958 ：
- >>951
レスありがとうございました。
trueでもだめでした。
- 959 ：
- <input type="radio" name="name1" id="radio_id_10" /><label for="radio_id_10">text10</label>
<input type="radio" name="name1" id="radio_id_11" /><label for="radio_id_11">text11</label>
<input type="radio" name="name1" id="radio_id_12" /><label for="radio_id_12">text12</label>
_ _
<input type="radio" name="name2" id="radio_id_20" /><label for="radio_id_20">text20</label>
<input type="radio" name="name2" id="radio_id_21" /><label for="radio_id_21">text21</label>
例えば、こういう時に、idとそのlabelの文字を以下のように配列に取り出したいのですが、
[
[
{id: "radio_id_10", label:"text10"},
{id: "radio_id_11", label:"text11"},
{id: "radio_id_12", label:"text12"}
],
[
{id: "radio_id_20", label:"text20"},
{id: "radio_id_21", label:"text21"}
]
]
forループを使う方法でゴチャゴチャ書けば出来そうなのですが、jQueryっぽくスマートに一行で書く方法を教えて下さい。
- 960 ：
- jquery uiで作ったdialogは親ウィンドウの範囲外に出られないですが、どうにかして外に出す方法はありますか？
- 961 ：
- >>959
この前のやつか？ まずは自分で考えろ。
あとjQueryは一行で書くものとか俺は言ってないからな。
- 962 ：
- >>959
まあ可哀想だからヒントをやろうｗ
var names = ・・・
function foo(i, el) {・・・}
var ret = $.map(names, function(name) {
return [$('[name="' + name + '"]').map(foo).get()];
});
console.log(JSON.stringify(ret, null, 2))
- 963 ：
- >>962
ちなみに
その質問者はこないだ回答もらた俺じゃないよ。
- 964 ：
- 親戚の息子は親の敷地の範囲外に出られないですが、どうにかして外に出す方法ありますか？
- 965 ：
- >>962
偉そうに言うくせに一行で書けないのかよ。使えない奴だ
- 966 ：
- >>965
横に長くなってもいいなら一行で書けるぞ？
var ret = $.map(・・・<namesの中身>・・・, function(name) { return [$('[name="' + name + '"]').map(・・・<fooの中身>・・・).get()]; });
処理が多くなれば、それだけコードは増えるのは当然なわけで
見づらくなるだけなんだが。
- 967 ：
- 初心者は一行で書くことが偉いとか思ってるからな（笑）
- 968 ：
- >>960
同じような質問以前出てたような
- 969 ：
- >>968
出来るのかどうか思い出せよ
- 970 ：
- 出来ません！
- 971 ：
- >>969
>>970
出来るだろ、上くらい見なよ
- 972 ：
- >>971
出来ないだろ。
上の方法では確かに移動範囲が広がるが、それはdialogが親ウインドウの枠で
制限されなくなるが、はみ出した部分は表示されない。
>>960 がやりたいのは、親ウインドウの外に自由に移動したいんだろ。
それは無理。
- 973 ：
- uguiならマスク外すだけでは
- 974 ：
- ごめん>>973はぼけてて別スレと勘違いしてた
スルーで
- 975 ：
- $(this)はどう言う意味になりますか？
- 976 ：
- thisが何を指してるかによって意味が変るんじゃないかな
- 977 ：
- JSのthisは、文脈でコロコロ変わるから、ややこしいことで有名
thisの使い方を、調べた方がいい
- 978 ：
- まあでもイベントハンドラ内かなとは思うけど…様子見
- 979 ：
- >>975
「それ」もしくは「その要素」
「コップ」を持ってきてください。
そして「それ」に水を入れてください。
- 980 ：
- DOMの要素に対してならjQueryの各種の操作が出来ますが、
$.get("page1.html", function(data) {..})
でdataに読み込んだpage1.htmlに対して同じような操作をしたいのですが無理ですか？
例えばpage1.htmlの中にある button だけを取り出したいとか。
あるいはidを指定して検索して、その属性を取り出すとか。
- 981 ：
- $(html).findとかでできるだろ
- 982 ：
- >>981
ヒントありがとうございました。
findでは出来なかったのですが、filterで出来ました。
でもfindとfilterの違いが分かりません。
- 983 ：
- findみつける
filter見つけたものを絞り込む
- 984 ：
- $(document).ready の中で
$.getScript('xxx.js')
を実行した場合、それが完了するタイミングと、
$(window).load
が実行されるタイミングの関係はどうなります？
少し試したら、
xxx.jsの実行が終わってから $(window).loadが実行されるようなのですが、
そういう保証はありますか？
つまり、xxx.jsの中で
var a=1;
が有った時にaを$(window).load以降で利用したいのですが。
- 985 ：
- > そういう保証はありますか？
ない
モジュールの依存関係の話なら
RequireJSやWebPackを使え
- 986 ：2015/12/31
- 質問ですがお願いします。
ページ末付近のボタンをクリックして、あるライブラリを実行させます。
<button id="syori">処理１</button>
$('#syori').click(function(){ ライブラリなど });
正常動作後ページ頭に一瞬で移動してしまいます。
ライブラリなしでしたら飛ばずにその画面位置を保ちます。
いくつかのブラザでも同じ挙動をします。
ボタンではなくaタグである場所に移動させると
一瞬#anへ飛んで一瞬でページ頭に戻ってしまいます。
<p id="syori"><a href="#an">処理１</a></p>
そこでfunction内だけ、ページ頭へ移動せず、または#anに留まるような
処置はどうしたらいいでしょうか？
おいおまえら！なんでサイト立ち上げたんだ？
アフィ・adsense違反や自分の検索妨害サイト
Google検索を叱りつけるスレ９
FC２アクセス解析 part4
【YSTは】Yahoo!に見切りをつけました【糞だ】
【1日1回】クリック募金 +リンクしよ+【無料】
【ローカルルール】痛い注意書き 2【俺ルール】
芸能事務所から損害賠償のメールが来て
+ JavaScript の質問用スレッド vol.121 +
ホームページNinja 総合スレ【スーパー全自動】
--------------------
ロード引退した奴のスレ
【バーチャルYouTuber】キズナアイ #27【Kizuna AI】
新進気鋭スパロー
【無敵】ガリレオ２裏モード【嘘じゃ無いよ】
広島県内の郵便関係スレッド
艦これ愚痴スレ part1942
goros 世界一ダサい原宿クズアクセサリー
余命三年時事日記って真に受けていいの？437
金融資産5000万円以上のアーリーリタイア生活 13年目
こんな駅はいやだ
自衛官「民進・小西議員の戦死という言葉の使い方が非常に軽く感じた」「東大まで出て、こんな活動しかできないなんてばかなのか」★4
全米が笑う駄洒落を考えるスレ
【低俗様】高尚趣味な人が嫌いな人のスレ【高尚様】
ティップネス 宮崎台 宮前平
ニジイロクワガタ 3匹目
GIANT ESCAPE RXシリーズ 48台目
パヨクや朝鮮人は先天性の脳障害？かわいそうな子供部屋おじさんだからと言って許されないよ
SSSS.GRIDMAN(グリッドマン)は信者が暴れる糞アニメ25
早田ひなを語るスレパート６
【SONY】 FDR-AXP35／AX30 Part1 【4K】
TOP カテ一覧 スレ一覧 100～終まで 2ch元 削除依頼
