jQuery 質問スレッド vol.7 [無断転載禁止]©2ch.net
■ このスレッドは過去ログ倉庫に格納されています
JavaScriptでDOM用ライブラリであるjQueryのスレです。
このスレはjQueryやjQuery UIの使い方やjQueryプラグインの作り方を質問するスレです。
jQueryを使って作る側のスレであって、こんなプラグインありませんか？と聞くスレではありません。
そういうのは自分で探してください。
ろくにサポートもされてなさそうな野良プラグインの使用はおすすめしません。
JavaScriptの質問は関連スレで質問して下さい。
■前スレ
+ JavaScript & jQuery 質問用スレッド vol.6 +
http://echo.2ch.net/test/read.cgi/hp/1465566635/
■関連スレ
+ JavaScript の質問用スレッド vol.122 +
http://echo.2ch.net/test/read.cgi/tech/1472426483/
+ JavaScript(ECMAScript)質問用スレッド vol.122 +
http://echo.2ch.net/test/read.cgi/tech/1472401404/
+ JavaScript の質問用スレッド vol.131 +
http://echo.2ch.net/test/read.cgi/hp/1478053599/
JavaScript ライブラリ総合質問所 vol.5 [無断転載禁止]©2ch.net
http://echo.2ch.net/test/read.cgi/hp/1465399470/
+ JavaScript & jQuery 質問用スレッド vol.6 +
http://echo.2ch.net/test/read.cgi/hp/1465566635/ >>265
やはり最初からこのスレは趣旨として正しくなかったと言うことですね
では>>252にも明記しましたように
正しい対象スレッドなどがありましたら、そちらに伺いたいと思います。
どこか趣旨に合致するようなスレッドをご存じないでしょうか？
お手数をお掛けします。 >>264
ウダウダ言い訳せずに作ったほうが早い
プログラムなんて納期を考えなければいつか出来るもの
・入力。ajaxは使わない
・phpでfile_get_contentsでサーバーに保存
・エンコード
・htmlをパース
・配列に突っ込んでソート
・出力
これだけ。
セキュリティの知識不要だから楽勝
で、jqueryもajaxは使わないので移行はスレチ >>268
ありがとうございました
感謝いたします >>268
そこは初心者スレであって制作依頼スレではないのではなくて？
質問者に学ぶ意志が全くないのなら、ランサーズとかに金出して依頼すべき案件に読める ソースコードを見ると、2chのHTMLには、
<div class="number"> タグと、<dt> タグを含む、2種類あって、
処理を分けて書いている
このソースコードの作者は、HTMLのタグを取り出すのに、正規表現を使っているから、
ここをブラウザ内蔵または、jQueryのHTML Parser を使って、
(URL) (日付) (時刻) (ID)の書式4文字列のタグを、取り出せば良いかも
ただ、その例には、<div class="number"> タグしかないから、
<dt> タグを使っているHTMLには、対応できない
それと、同時に取得できるHTMLを、10件までに制限した方がいい。
あまり多いと、2chへの営業妨害とみなされて、訴えられそう
まあ、そのソースコードを修正するよりも、新しく作った方が良さそう
JavaScript, jQueryは、WEBプログラミング板やプログラム板よりも、
この板の方が、やっている人が多い ここにアクセスして、返ってくるHTMLは、
http://hanabi.2ch.net/test/read.cgi/wcomic/1438080242/102
<div class="post" data-date="NG" data-id="102" data-userid="" id="102">
<div class="date">2016/12/24(土) 14:59:51.98 </div>
</div>
(URL) (日付) (時刻) (ID)の書式4文字列のタグは、id="102" より取り出せる。
日付 : 2016/12/24
時刻 : 14:59:51.98
ID : data-userid=""
それらを連結すると、こうなる
http://hanabi.2ch.net/test/read.cgi/wcomic/1438080242/102 2016/12/24 14:59:51.98
今は、jQuery.ajax で、複数のHTMLを取得する方法を、調べている 出力HTMLの仕様差を埋めるなら、datファイルをxhrまたはfetchで取得すればいいんじゃないかね
最も、質問者本人は作る気が全く無さそうだが まったくの初心者です。
お時間のある方、よろしければご教授願えますでしょうか。
if($(this).hasClass("mail")){
if($(this).val() && !$(this).val().match(/.+@.+\..+/g)){
$(this).parent().prepend("<p class='error'>メールアドレスの形式が異なります</p>");
}
}
if条件の&&前の$(this).val()は何を意味しているのでしょうか？
メアドの形式判定なら&&以降だけで足りている気がしてしまいます。 >>274
$(this)だけでは分からない
大抵
$("foo").click(function(){
if($(this).hasClass("mail")){
if($(this).val() && !$(this).val().match(/.+@.+\..+/g)){
$(this).parent().prepend("<p class='error'>メールアドレスの形式が異なります</p>");
}
}
})
のように、何かのイベント元として$(this)が使われる
今回は<foo>が$(this)の対象になる >>275
説明不足で申し訳ありません。イベント部分はこうなっています
$("form").submit(function(){
$("input[type='text'].validate,textarea.validate").each(function(){
//メールアドレスのチェック
if($(this).hasClass("mail")){
if($(this).val() && !$(this).val().match(/.+@.+\..+/g)){
$(this).parent().prepend("<p class='error'>メールアドレスの形式が異なります</p>");
}
}
});
});
ここでの$(this)は
input[type='text'].validate もしくは
textarea.validate で合っていますか？ 回答者がアホ。無断なやり取りすんな。
単に未入力の時にエラーにしたくないだけだ >>277
if($(this).val())
で、$(this)に何らかの値が入っていると
条件を満たす ということでしょうか？ >>279
なるほど！trueが返ってきて条件成立、なのですね。
皆様ありがとうございました。とても助かりました。 複数のajax処理と、2chの返信から、DOMを構築して、
jQueryでデータを取り出す所を、今研究している
元のHTMLは、ajaxで2chへアクセスして、その返信をHTMLに表示するなど、なかなか凝っている。
こういうループ処理なら、AngularJSを使いたくなってくる
2chで、こういうツールを作れる人は、
プログラム板のVBScriptのスレ主である、ピラフだけかもw
1週間経っても、誰も作れない時は、ピラフに頼むしか無さそう 無名関数のfunction(){}ですが、この'function'を置き換えることってできますか？ >>286
いえ、短くする方法を知りたかったので、とてもありがたいです
そんな記述方法があったのですね >>281
はっはっは、そのピラフってやつは無能だった
結局ピラフは作れなかったぞｗｗｗ 作ろうと思えば作れる
・みんなが使うのが確定している
・共同開発
なら俺も手伝うわ
頑張って作って、数人が使うだけは辛い
しかも2chって結構特殊なフォーマット何だよ。鯖によって変わる >>252-290
プログラム技術板に、スレがある
２ｃｈの荒らし報告の書式対応のプログラム
http://echo.2ch.net/test/read.cgi/tech/1480669386/l50
ちなみに今、漏れは、途中まで作っているよ。
出来なければ、ピラフに頼むつもり
ttp://〜/〜/1-1000
今、入力URLの、1-1000 のrange、または、1など単独数字の、入力チェック部分を作っている
ただ、その例には、<div class="number"> タグしかないから、
<dt> タグを使っているHTMLには、対応できないよ WEB+DB vol.97 の特集が、React
WEB+DB vol.94 の特集が、Kotlin, Electron http://semooh.jp/jquery/api/core/jQuery/expression%2C+context/
jquery()の第二引数、contextってどういう風に使うものなんでしょうか
絞り込み？
$('body',$('html'))
これでbodyが返ってきますが
$('html body')
でいいような気がします >>292
すでにピラフに頼んだんだろ？無視されてるけどｗ
VBScriptについて必死に話し合うスレ [転載禁止](c)2ch.net
http://echo.2ch.net/test/read.cgi/tech/1416826139/809 >>294
var $html = $('html');
$('body',$html); //$html.find('body');
$('div',$html);
$('a',$html); >>294-296
jQuery(expression, context)で、context を指定すれば、
その子孫だけを探索するから、速い。
contextより上の階層を、探索しない
もし、contextより上の階層が更新されているなら、
最上位のbodyから探索すべきだけど
>>295
ttp://〜/〜/1-1000
入力URLの、1-1000 のrange、または、1など単独数字の、
最もややこしい、入力チェック部分の目途がついたから、
ピラフに頼むのは、もう少し後にする >>296,297
なるほど、絞り込む分処理が早くなるんですね
ありがとうございました カラーボックスと問い合わせフォームを一緒に使おうと思うのですが、jqueryの読み込みが重なるのかよくわかりませんが、
同一ページにタグがあると正常に動きません。
カラーボックス
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js";></script>
問い合わせフォーム
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js";></script>
問い合わせフォームのタグを消せばカラーボックスが動くことは確認しましたが、
ここからどうしたら良いのかわかりません。
カラーボックスはこちらのもの
http://www.jacklmoore.com/colorbox/example2/
問い合わせフォームはこちらのものです
https://www.1-firststep.com/archives/462 このスレはjQueryやjQuery UIの使い方やjQueryプラグインの作り方を質問するスレです。
jQueryを使って作る側のスレであって、こんなプラグインありませんか？と聞くスレではありません。
そういうのは自分で探してください。
ろくにサポートもされてなさそうな野良プラグインの使用はおすすめしません。 jQueryでcssを指定する時、css自体を触るのではなく
予め設定しておいたclassを付け外しするほうが良いと思いますが、こういう方法の指針などはありますか？ >>302
なるほど、確かにそうですね
もうちょっと勉強してきます >>300
299ですが、私に対してでしょうか。
全く理解できていないので。 ここは「jQueryの使い方」の質問スレ
「jQueryで作られたもの」は知ったこっちゃない
分からないならサポートに聞くと良い
個人的には色々いじるんじゃなく、
・カラーボックスを使わない
・カラーボックスの部分はちゃんと勉強する
で、すぐに解決すると思う VBScriptについて必死に話し合うスレ
http://echo.2ch.net/test/read.cgi/tech/1416826139/832-
こらこら団のアプリは、プログラム板のこのスレで開発中。
ピラフも、どうやら興味を持ってくれたようだw
>>299
異なるバージョンの、2つのjQueryを、同一ページに読み込むのは、おかしい
新しい方(1.12.2)だけを読み込めば？
それでカラーボックスが動かないなら、
1.11.1 にして、問い合わせフォームが動くかどうか、テストすればいい
それで、問い合わせフォームが動かないなら、それらは同時に使えない。
異なるページになら、異なるバージョンの、2つのjQueryを使えるかも >>307
全く興味ないんで勝手に向こうでやっててくれ >>307
くすくすくす。あ、ここでやんなよ。向こうでやれ
http://echo.2ch.net/test/read.cgi/tech/1416826139/840
VBScriptについて必死に話し合うスレ [転載禁止]c2ch.net
840 : ピラフ ◆9Jro6YFwm650 2017/03/27(月) 20:10:57.30 ID:bt96dW+y
やろうと思ったけど何をやればいいのかわからなかった
ピラフあきらめた！ テキストボックスでユーザが入力できることに加え、
別の操作で値を自動入力することを考えています。
あるボタンを押すとテキストボックスに値が入る仕組みです。
<p id="hoge">
<label><input type="text" class="moge" value="10"></label>
</p>
$('#hoge').find('.moge').val(20);
で、
(1)初期は10
(2)js実行後にブラウザでの見た目20
(3)ツールでDOMを見るとvalue=10のまま
(4)$('#hoge').find('.moge').val() で取得した値は20
ブラウザはIE/Fox共同様でした。
(3)も20にする（反映させる）にはどうしたらいいでしょうか？ 失礼、勘違いでした。
ここは変わらないものなのですね（たぶん） おー、それは知らなかった、というか気にしたことなかった
それは変わらないものだね。愛だね。
$(foo).attrなどで変えることも出来るけど、特に意味は無いかな >>310
フォームの値については、HTMLに書いてあるものは初期値と考えればいい。
フォームの値をいくら変えたとしても、HTML自体は変わらない。
HTMLを書き換えたいのであれば、HTMLを書き換える命令を使う（attr()とか） <div>
<div id="div1">
<div id="div2"></div>
</div>
</div>
<div>
<p></p>
</div>
たとえばこんな場合に、div1から後方に探索して、最初に現れる<p>を求めたいのですが、どうすれば良いでしょか？
もしdiv1やdiv2にも<p>が有る場合にはそちらを検出したいのです。 >>314
has、子孫セレクタ、グループ化を組合せて3つのパターンを列挙してやればインデックス0がそれ >>312
>>313
<p id="hoge" zoku="abc">テキスト</p>
$('#hoge').text('てきすと');
$('#hoge').attr('zoku', 'def');
で、ツールで見ると「てきすと」と「def」に即変わるのでてっきりvalueも変わるもんかと
というかあまり考えてませんでした。デバグ中にたまたま気がつきまして、あれ？っと。
それが変わらないのが違和感あるなと思いつつ、ユーザ入力の部分が変わるのもそれはそれで違和感ありますが。
お騒がせしました。 >>314
$('p').first();
ただし他のpも検索されるので、>>314の全てを<div id="div0">で囲って
$('div0').find('p').first();
ただしdiv1の外も検索されるので、>>315
pにクラス付けた方が楽かも >>316
タグに書いてあるのは属性なんだよ。
属性っていうのはattrでしか変えられない。
属性と値は違うものなんだよ。 >>318
>タグに書いてあるのは属性
その言い方だとvalue=""も属性となるな >>319
その通り。HTMLのinputタグのvalue=""は属性
そのHTMLをパースして表示されたインプット要素の値は属性ではない。
ブラウザでキーボードを叩いてインプット要素の文字を変更したとしても、
属性には反映されない >>316
順序がおかしい。デバグ中にたまたま・・・ってところは気にした方がいいよ。
Firebugか、ChromeのコンソールでDOM見ながらスクリプト書いてる？
jQuery読んでるページでそのまま記述して実行すればリアルタイムで確認しながら見れる。
コンソールに書き出すのも最初はいいけど、breakpoint決めて、要素を選んでHTMLの状態を確認できるようにするといいよ。 classもIDも属性なんだよな
この辺うまく認識してないと思わぬところでミスが起きる 【attribute】
西洋美術において伝説上・歴史上の人物または神話上の神と関連付けられた持ち物。その物の持ち主を特定する役割を果たす。 >>321
今回の件は見なくても問題なくスラスラ書けてますし、把握してるので特に必要にならない限り見ませんね。
別件で引っかかって確認してたらその辺に行き着きつきまして。
>jQuery読んでる〜
やってます。
attrやdataはけっこう使い込んでるのでvalueの件は勘違いでした。 上から目線で基本的なこと説明してるのがいるが最初の人のほうが詳しいキガス >>318
>属性っていうのはattrでしか変えられない。
これが自分で書いてる他の部分と矛盾している
属性とはHTMLでいうものとattrそのものの2種類ある
この辺うまく認識してないと思わぬところでミスが起きる >>292
ありがとうございます！
すいません、近頃ビットコインの値動きが激しくてここを全く見てませんでした
ここまで心臓部が出来てたんですね
http://echo.2ch.net/test/read.cgi/tech/1416826139/851
助かります
以降はリンク先をウォッチさせていただきます >>314-317
これは、ちょっとしたパズルだな
>もしdiv1やdiv2にも<p>が有る場合には、そちらを検出したい
確か、jQueryの探索順序は、深さ優先探索だったかな？
まず最上位から、すべてのタグを探索すると、タグの配列が、深さ優先で、
0,1,2 〜 999,1000 と並ぶ
この配列の先頭から、<div id="div1"> を探す。
その次から、<p>を探す ローカルPCにHTMLと、以下のJSファイルを置いて、
Win10, Edge からJSONP で、2chにアクセスして、HTMLを取得しようとしているけど、
callback関数が呼ばれないというエラーになる
HTMLは文字化けしているけど、取得できている。
2chはSJISなので
ローカルに、サーバーを立てていないからなのかな？
var url = "http://hayabusa6.2ch.net/test/read.cgi/linux/1479499953/6";
// 全体の設定
$.ajaxSetup({
type: "GET",
dataType: "jsonp",
timeout: 60 * 1000
});
$.ajax(url).done(function(data, status, xhr) {
console.log( "成功" );
}).fail(function(xhr, status, error) {
console.log( "失敗", '\n', xhr.status, '\n', status, '\n', error );
// }).always(function(arg1, status, arg2) {
}); 332の続き
HTMLは文字化けしているけど、取得できている。
2chはSJISなので。
xhr.status は200
だから別に、callback関数は必要ない。
fail じゃなくて、done になってくれれば、data が取得できるのだが ブラウザからのクロスドメインは難しいから、
YQL (Yahoo! Query Language)のサービスを使って、クロスドメインを可能にする、
jquery.xdomainajax.js プラグインを、試してみようと思う
こらこら団報告書生成
http://hotmilk350ml.web.fc2.com/korakorashot.html
元々、このツールでも、このプラグインを使っているし
でも、世界中の人が、YQLを使ったら、どうなるんだろう。
2chでもYQLを、アクセス禁止にするかも知れない >>331
を修正
>>314-317
すべてのタグを探索しなくても良い
最上位から、すべての<p> or <div>(または<div id="div1">)を探索して、
<div id="div1">を探す。
そして、その次の<p>を探す >>335
>>315で答えがでているものを小難しく考えて持論を長々と書くのは止めてくれ >>332
別件で今更jQueryのajaxについて調べる必要が出たから、
あとでちゃんと調べることになるけど、今はめんどくさいので
うろ覚えで答える。
あんた、jsonとjsonpを勘違いしてるだろう？
jsonはJSON形式の文字列を返すものであるが、
jsonpはJSONを引数にして関数を呼び出す "コード" を返さないといけない。
デフォルトの関数名はcallback。
つまり以下のようなコードを返す必要がある。
callback( {"num":[1,2,3], "abc":["a","b","c"]} );
そうすると、あんたがソースコードに定義してるはずの
callback関数が呼び出される。
>>333
> だから別に、callback関数は必要ない。
jsonpを使用している以上、あんたはcallback関数を定義しなければいけないし、
サーバー側からはcallback関数を呼び出すコードを返さないといけない。
jsonpを使用している限りcallback関数は絶対に必要 $.ajaxSetup({
type: "GET",
dataType: "jsonp",
// jsonpCallback: "callbackName",
timeout: 60 * 1000
});
dataType: "jsonp" を指定すると、jQuery が自動的に、jQuery1900〜のような、
ランダムで重複しないcallback関数名を作るから、
jsonpCallback: "callbackName" で、自分で指定しなくてよい
ただ、ブラウザという環境がダメなのかな、と思っている。
サーバーを立てていないから、サーバーからcallbackしてもらえないのかなと
だから、YQLのように、サーバー(プロキシ)を通すと、
そこから、callbackしてもらえるのかなと
本来は、wget, curl みたいに、2chからHTMLを取得できれば良いだけ。
HTMLさえあれば、そこからjQueryでタグを抜き出せる
ただ、ブラウザ環境で、JavaScriptでは、クロスドメインで苦労する >>339
名前欄の331は、271の間違い
まあ、同一人物だけどなw >>339
>>338の内容を少しだけ修正する
あんた、jsonとjsonpを勘違いしてるだろう？
jsonはJSON形式の文字列を返すものであるが、
jsonpはJSONを引数にして関数を呼び出す "コード" を返さないといけない。
デフォルトの関数名はcallback。
つまり以下のようなコードを返す必要がある。
callback( {"num":[1,2,3], "abc":["a","b","c"]} );
そうすると、jQueryが用意してくれているcallback関数が呼び出される。
>>333
> だから別に、callback関数は必要ない。
jsonpを使用している以上、内部でcallback関数が使われるので
サーバー側からはcallback関数を呼び出すコードを返さないといけない。
jsonpを使用している限りcallback関数は絶対に必要 通りすがりですが
jsonpからcallback()の部分を消せばjsonになると思っていいですか? サーバー側からJSONPを返してないのに
JSONPが使えるわけ無いだろう
馬鹿か ブラウザ環境では、JSでクロスドメインできない。
でも、HTML内で、
<script type="text/javascript" src="http://なんとか/aaa.js"></script>
のように、<script>タグを使えば、クロスドメインできる
だから、それを応用して、HTML内に動的に、<script>タグを作って、
アクセスする技術が、jsonp JSONPみたいなダサいハックをいったい何年放置する気なんだWeb系の連中は >>345
> ブラウザ環境では、JSでクロスドメインできない。
できる
>>347
> JSONPみたいなダサいハックをいったい何年放置する気なんだWeb系の連中は
7年ぐらい前に解決済み
年取ると、時間の流れが早いよねｗ >>348
どの辺が？
もっと簡単な方法があるならコードを書いてみて 読んだ上で>>315が一番簡単だと思った俺は異端なんかな？
長文書いてる奴は1行でかける事を何を難しく考えてるんだ、と思ってた まぁでもコードでバシっと書けないところがカッコ悪いんだよ
「おれ絵めっちゃ上手いぜ」 「へぇじゃあ描いてみて」 「こうやってああやって描けばいいんだよ」
「ん？描いてみて」
「・・・」
なんだわ 論点がずれてるよ
「小難しい」と指摘された回答が「小難しくない」から反論されてるんでしょ
「小難しい」といった人が小難しい理由を書くべきだよ
小難しくないコードを出せ、というのも筋は通ってる 難しいのがコードの問題なのか、人間の問題なのかを
見極める必要がある。
人間の問題、つまり（俺にとって）難しいとか言い始めたら
そんなのは無視した方がいい。
漢字読めない俺は難しいからひらがなで書けと
言ってるのと同じだから
高い技術を持った人が、そのコードは簡単というのであれば
それは人ではなくコードが簡単だと言えるだろう。
簡単なコードを読めるには技術が必要ってだけだ 無駄に長い長文だな
もうお互いにコードを出して第三者に評価してもらえばいいんじゃないの？ >>357
あとでごちゃごちゃならないように、
良いコードの条件を言っておくわ
1. 「（俺が・初心者が）読めない」は理由にならない
2. 単語の長さは関係ない
3. 条件文が少ない。
4. ループが少ない。
5. 行数が少ない（ただし; で無理やりつなげたり、横100文字を超えるのはダメ）
6. 重複する単語やコードが少ない jQuery('#div1 p,#div1+p,:has( #div1) p,:has( #div1)+p,:has( #div1)+p')[0];
https://jsfiddle.net/eyg016m2/
あなたが小難しくないと思うコードを是非教えてくれ 一つ追加
なるべく少ない単語を使用する（複合語にしないということ） 重複したセレクタを削除した
jQuery('#div1 p,#div1+p,:has( #div1) p,:has( #div1)+p')[0];
https://jsfiddle.net/eyg016m2/1/ >>359
お前が書いたコード
'use strict';
var p = jQuery('#div1 p,#div1+p,:has( #div1) p,:has( #div1)+p,:has( #div1)+p');
p.each((i,p) => console.log(p));
修正後
var s = '#div1 p, #div1+p, :has(#div1) p, :has(#div1)+p';
$(s).each((i,p) => console.log(p)); >>363
後で扱いやすいように変数化しただけだから好きに改変してくれ
jQuery or $ もポリシーでどうとでも変わる程度の違い
それはともかく、>>315が小難しいといった人が書いたコードを早く見てみたいのだが $を使わずjQueryを使う人は、JavaScriptに慣れてない人だと思う。
ローカルスコープがよく分かってないんじゃないかな。
以下のように書けば、$はかならずjQueryになることが保証されるので
いちいち長い単語を使う必要がなくなる。
jQuery(function($) {
・・・
}
(function($) {
・・・
}(jQuery)); ■ このスレッドは過去ログ倉庫に格納されています
