+ jQuery 質問用スレッド vol.7 + [無断転載禁止]©2ch.net
■ このスレッドは過去ログ倉庫に格納されています
JavaScriptで一番有名なDOM用関数型風ライブラリであるjQueryのスレです。
jQueryを使うとJavaScript単体では面倒な処理でもほんの数行で実現可能になります。
一部でもうjQueryは要らない等と言ってますが、あれはjQueryよりも導入が大変な
フレームワークを導入したらいらなくなるって話であって、従来通りHTMLにちょっと
動きをつけたい程度ならjQueryが最適です。
jQuery以外のライブラリの質問はライブラリ総合質問所で質問して下さい。
ライブラリ以外の質問はJavaScriptスレで質問して下さい。
■過去スレ (※vol3はありません。大人の事情でライブラリ総合質問所を乗っ取りました。)
+ JavaScript & jQuery 質問用スレッド vol.6 + [無断転載禁止]©2ch.net
http://echo.2ch.net/test/read.cgi/hp/1465566635/
+ JavaScript & jQuery 質問用スレッド vol.5 + [無断転載禁止]©2ch.net
http://echo.2ch.net/test/read.cgi/hp/1452081417/
jQuery ライブラリ 総合質問所 vol.4
http://peace.2ch.net/test/read.cgi/hp/1400313626/
■関連スレ
+ JavaScript の質問用スレッド vol.120 + [無断転載禁止]©2ch.net
http://echo.2ch.net/test/read.cgi/tech/1463914293/
+ JavaScript の質問用スレッド vol.130 + [無断転載禁止]©2ch.net
http://echo.2ch.net/test/read.cgi/hp/1463395557/
JavaScript ライブラリ総合質問所 vol.5 [無断転載禁止]©2ch.net
http://echo.2ch.net/test/read.cgi/hp/1465399470/ >>75
使うに決まってんだろ脳みそ沸いてんのかクソボケ野郎が <div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
例えばdivのclickイベントで、3がクリックされたときに
その次の4のdivを取得する方法を教えてください。 >>77
event.target.nextElementSibling >>79
jQueryでも同じコードを書けるんだが
jQuery#nextとnextElementSiblingは同じ
thisとevent.targetは等価ではない
eventは両方とも同じ >>81
> jQuery#nextとnextElementSiblingは同じ
同じではないよ。
jQueryの基本的な考え方として0個以上の要素郡に対して処理を実行するという点がある。
これの何が便利かというと動的なページであれば何かの要素が存在しない場合がある。
例えばデータが1ページに収まれば「次へ」ボタンを表示しないとか。
document.getElementById('next')なんて書いているとボタンがなかった
ときにnullになって、それを防ぐためにif文が必要になったりするが、
jQueryの場合は、何も書かずとも#nextが見つからなくても問題ない動きをする。
>>77の場合は5がクリックされた時が問題。nextElementSiblingを使うと要素が
見つからない時nullを返すので、そうならないように条件分岐が必要になる。
大したことじゃないと思うかもしれないが、ifの条件を満たす時と満たさない時で
テストが必要になる。言い換えるとコードが複雑になってる。
> eventは両方とも同じ
違う。jQueryのeventは標準仕様に準拠しつつブラウザ間の互換性を高くしている。
jQueryのeventは改良されたevent function func1() {
return { 'year': 2016, 'month': 10 };
}
こういう関数を使って値を取り出す場合には、一旦objと言う変数に入れて、
var obj = func1();
var year = obj['year'];
var month = obj['month'];
とするのが普通だと思うのですが、もしobjを使わずに
var year = func1()['year'];
var month = func1()['month'];
とするとfunc1()が二回実行されて無駄ですよね?
質問は、一時変数objを使わずに、かつfunc1()も一回だけ実行して
値をyearとmonthに取り出す方法はありますか?
目的は、単なる興味です。 YouTubeのサイトのように、画面に表示されている所の、画像だけを表示して、
下へスクロールすると、新たに表示された所の画像を、その時に読み込んで表示するのは、
どのように、やっているのでしょうか?
つまり、非同期・遅延読み込み >>84
コードの書き方がいろいろおかしい
同じオブジェクトを参照するなら function func1() {
return { 'year': 2016, 'month': 10 };
}
が不要
year, month も一時変数なので不要
var obj = { 'year': 2016, 'month': 10 };
これだけで良い
これ以上はJSスレで 質問お願いします。
スライドショーの上に常に違う画像を重ねて表示させたく
https://allabout.co.jp/gm/gc/417216/2/
を参考にしてスライドショーはできたのですが
上に画像を重ねる方法がわかりませんでした。
知恵袋で似てる質問はあったのでチャレンジしてみたのですが
上記のサイトとは違うコードの組み方のようで結局出来ずに終わりました。
ほとんど調べながらコピペしてる状態の初心者なので、初歩的な質問かもしれませんが
もしご存じの方がいらっしゃいましたら教えていただきたいです。
また、解説してるサイト等ありましたら貼っていただけると助かります。
よろしくお願いします。 >>88
現行スレはこちら
+ JavaScript & jQuery 質問用スレッド vol.6 + [無断転載禁止]©2ch.net
http://echo.2ch.net/test/read.cgi/hp/1465566635/ >>89
ありがとうございます。
そちらで質問させていただきます。 バージョン1系から3系に入れ替えたら、IE11でローカルファイルを開くとAjaxが動かなくなったけど、
どうすれば良いの?サーバに入れると正常に動作するのに。 >>91
現行スレはこちら
+ JavaScript & jQuery 質問用スレッド vol.6 + [無断転載禁止]©2ch.net
http://echo.2ch.net/test/read.cgi/hp/1465566635/ 画像の遅延ロードってlazyloadでしか無理なの? >>93
同等の機能を自分で実装すればいけるよ
昔は自分でやってたもんだ jQuery初心者ですが、サイト内で複数のmp3を順に自動再生させたいのですが、
ぐぐって出てきたページに
↓このようなコードがあり、ページ中のボタンを押すと再生が始まる仕組みになっているのですが、
ボタンを押さなくてもページが表示された時点で自動再生されるようにするには一体どうすればいいのでしょうか?
〜冒頭省略〜
$( "#button_play_all" ).click( function () {
var mySources = $( "#media_player" ).children( "source" );
var myAudioPlayer = document.getElementById( "media_player" );
myAudioPlayer.addEventListener( "ended", function () {
〜以下省略〜〜 >>96 続き・・
<!-- 再生開始ボタン -->
<input id="button_play_all" type="button" value="全ファイル連続で再生" />
<!-- mp3を用意する(HTML5タグ) -->
<audio hidden name="media" preload="auto" id="media_player">
<source src="mp3のファイルパス" type="audio/mp3">
<source src="mp3のファイルパス" type="audio/mp3">
</audio>
ぐぐって出てきたページ↓
https://lightz.info/index.php/view/226?continue=1#continue >>96
autoplay 属性というのがある
<audio autoplay …
ただし、ブラウザ設定でブロックされている場合はどうやっても無理だろう(ユーザに強制できない) >>98
ありがとうございます。
1ファイルなら簡単に再生できるのですが、複数のファイルを順に再生する方法がわかりません。
サンプルコードではそこが実現できているのですがページ内のボタンをクリックする必要があります。
$( "#button_play_all" ).click( function () {
↑この部分がボタンクリックで実行する制御をおこなっているようですが
ここを省略して以下のコードを実行させるように書く方法がわかりません。 >>99
autoplay で再生が始まったときのイベントを捕まえて
そのサンプルコードと似たコードを走らす必要があるだろうね HPで友達が稼げるようになった情報とか
⇒ http://asaswq3wq.sblo.jp/article/181819223.html
興味がある人だけ見てください。
TQZPQYA2JW ☆ 日本の、改憲を行いましょう。現在、衆議員と参議院の
両院で、改憲議員が3分の2を超えております。
『憲法改正国民投票法』、でググってみてください。国会の発議は
すでに可能です。平和は勝ち取るものです。お願い致します。☆☆ 誰でもできる在宅ワーク儲かる方法
少しでも多くの方の役に立ちたいです
グーグルで検索するといいかも『金持ちになりたい 鎌野介メソッド』
5OKLJ let $div = $('<div>')..append('<span>')
としてからspanにclassを追加したい場合はどうやればいいですか? x = (x === 0) ? y : x++;
この書き方間違ってますか?
ifに書き換えたら普通に動くのですが、これはダメでした。 izimodal使ってる人がいたら教えて欲しいんだけど閉じるボタンの色変えるのどこ弄ったら良いですか?
オプションのIconColor設定しても変わらんし、izi Modal.cssでicon関連の色変えてみても反映されないの… >>106
やりたいのはこんな感じ?
<!doctype html>
<html>
<head><meta charset=”utf−8”></head>
<body>
<script>
let x = 0;
const y = 5;
console.log(”x: ”+x);
console.log(”y: ”+y);
if (x === 0) {
x = y
} else {
x++;
}
console.log(”x: ”+x);
if (x === 0) {
x = y
} else {
x++;
}
console.log(”x: ”+x);
</script>
</body>
</html> こうかな
<!doctype html>
<html>
<head><meta charset=”utf−8”></head>
<body>
<script>
let x = 0;
const y = 5;
console.log(”x: ”+x);
console.log(”y: ”+y);
x = (x === 0) ? y : x+1;
console.log(”x: ”+x);
x = (x === 0) ? y : x+1;
console.log(”x: ”+x);
</script>
</body>
</html> 【要点】
>>106
> x = (x === 0) ? y : x++;
>
> この書き方間違ってますか?
x = (x === 0) ? y : x+1; >>112
半角だと投稿できないからな
まともなテキストエディタなら「半角⇒全角」は5秒かからないな
>>111 は読めるよね >>113
まともなプログラマなら、jsfiddleやcodepen等の外部サイトを使う 先日、どっかの外部サイトがサービス提供終了になってなかったっけ 下記のようなtableに対して
<table>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td><input name="tes" value="1"></td>
</tr>
</tbody>
</table>
checkboxをクリックしたら兄弟のinputのvalueを取得したかったのですが下記のコードを試してもvalueは取れませんでした
$('input:checkbox').on('click',function(e)){
var tes = $(this).closest('tr').children('td:eq(1)').val();
});
どう書けば良いかお教え下さい Showroom を見るときに、多くのアバターが邪魔なので削除していますが、
要素を削除するのに、一々、その親要素を取得して、親から子要素削除するのは、面倒
var elem = document.getElementById('js-avatar');
elem.parentNode.removeChild(elem); ずさん管理 札幌ひばりが丘病院と元薬剤師ら書類送検
https://dai.ly/x6lbwph window.openで新しくタブを開き、input要素に文字を入れたいのですがどうのように刷れば良いでしょうか?
仮にjquery.comの検索ボックスに入力するとして、
var foo = window.open("jquery.com");
foo.$(".ds-input").val(333);
としたら出来ました!!?!?!?
さっきまでは出来なかったんですが・・・すいません
ありがとうございました var foo = window.open("jquery.com");foo.$(".ds-input").val(333)
と一行で書くと駄目みたいです
jqeuryが読み込まれていないせいでしょうか jQ勉強中です。containsを覚えました。ですが、例えば
$('td:contains("abc")')
という指定をすると、td自体だけでなくその子孫要素のどれか1つにでもabcを含むとマッチしてしまいますが、そうじゃなく、
td要素自体が直接abcというテキストを持っている要素だけにマッチするようにするにはどうしたらいいでしょうか? <div class="result"></div>にajaxを使って
.done((data) =>{
$('.result').html(data);
})
でtableを表示してるのですが、
そのtableをマウスクリックした明細行の情報を取得することは可能ですか? すみません、わかる方がいらっしゃれば教えていただけないでしょうか。
<table>
<tr class = '010'> <td>あ</td>い<td>う</td>え<td>お</td> </tr>
<tr class = '010'> <td>か</td>き<td>く</td>け<td>こ</td> </tr>
<tr class = '020'> <td>さ</td>し<td>す</td>せ<td>そ</td> </tr>
<tr class = '010'> <td>た</td>ち<td>つ</td>て<td>と</td> </tr>
<tr class = '010'> <td>な</td>に<td>ぬ</td>ね<td>の</td> </tr>
<tr class = '020'> <td>は</td>ひ<td>ふ</td>へ<td>ほ</td> </tr>
<tr class = '010'> <td>ま</td>み<td>む</td>め<td>も</td> </tr>
<tr class = '030'> <td>や</td>ゆ<td>よ</td>?<td>!</td> </tr>
</table>
【やりたいこと】
「き」のセルをクリックしたら同じclass='010'の中で直後にあたる
「た」行のみ背景色を変えたい。
【困っていること】
以下のようなコードを書いたのですが、当然のことながらclass='010'である
すべての行の色が変わってしまいます。($(this)は「き」の<td>です)
$(this).parent().siblings('.010').css("background-color", "#ffcccc");
これをclass='010'である行の内、「き」の<td>が含まれる列の直後の列に
限定することはできるのでしょうか。 そもそも「き」はテキストノードでtd要素になってない。htmlから勉強しなおしてください。 すんませんjQueryの質問なんやけど
eachでliタグの子要素のimgタグを取得してalt属性を追加して値はliタグの子要素のemタグのテキストにしたいんだが
全部のliタグの子要素のemタグのテキストを追加してしまう
対応するliタグの子要素のemタグのテキストをそれぞれ追加したいんや!
おせーてくれ!!たのんます!! li タグの子の、img タグのalt 属性に、
同じliタグの子の、em タグのテキストを設定する
<li><img src="a.jpg"><em>あい</em></li>
<li><img src="b.jpg"><em>abc</em></li>
$( function ( ) {
$( 'li' ).each( function( ) {
const that = $( this );
that.children( 'img' ).attr( 'alt', that.children( 'em' ).text( ) );
} );
} );
結果
<img src="a.jpg" alt="あい">
<img src="b.jpg" alt="abc"> 生のDOMを取得するときには
$("#unko")[0]
ってやるけど、これって正式な手順なの? それとも有名な裏技扱い?
DOM取得メソッドって存在するっけ? >$("#unko")[0]
単に、これじゃダメなのか?
abc クラスが2つ以上あればダメだけど、1つならどう?
const abc = $( '.abc' ); >>132
修正
>const abc = $( '.abc' );
これはダメでした!
やっぱり以下のように、インデックスも必要でした
const abc = $( '.abc' );
abc[0] bxsliderとlightboxを組み合わせて使うと、
lightboxのグループ化がバグって同じ内容が2つずつ表示されてしまうのですが、
回避方法は無いでしょうか。。。 jQueryをマスターしたいので、おすすめの解説書を教えて下さい。 ■ このスレッドは過去ログ倉庫に格納されています