+ jQuery 質問用スレッド vol.7 + [無断転載禁止]©2ch.net

1Name_Not_Found2016/06/24(金) 15:41:34.46ID:???
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/

55Name_Not_Found2016/07/27(水) 20:08:08.93ID:???
unko はラテン語で「ひとつの」を意味する単語だし
メタ構文変数としては適切だと思うよ

56Name_Not_Found2016/07/27(水) 20:35:47.05ID:???
意味がある時点でメタ構文変数ではないんだが
https://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%BF%E6%A7%8B%E6%96%87%E5%A4%89%E6%95%B0

57Name_Not_Found2016/07/27(水) 20:51:30.26ID:???
というか、日本語で読めるものを外国語で読む論理なら「nihon は英語では読めないからメタ構文変数」と主張できることになるんだが、明らかにおかしいだろ

58Name_Not_Found2016/08/08(月) 04:34:25.33ID:???
>>5
ものすごく遅くなりましたがみなさん回答ありがとうございました。
助かりました。

59Name_Not_Found2016/08/14(日) 20:45:14.39ID:???
<form action="hoge.php">
<input type="submit" id="send" value="送信">
</form>

$('#send').click(function(){
if (条件) {
(処理)
} else {
return false;
}
});

と、送信でも条件によってフックしてhoge.phpへの移行を
阻止したいのですがこれってどのブラウザでもその通りになりますか?
phpが先に実行される可能性はありますか?

60Name_Not_Found2016/08/14(日) 22:24:15.04ID:???
>>59
DOMを正しく実装しているブラウザであれば期待通りに動きます。
それはそれとして、対象ブラウザ全てで検証するのは基本だと思うのですが。

61Name_Not_Found2016/08/14(日) 22:41:36.14ID:???
>>60
ありがとう。

この方が早いかと一瞬思ったのですが、後々考えたら
普通のボタンにonclickでfunction呼び出した方が見通しがいいかもしれませんね。
私の場合他人が見ることもHTMLだけ見ることもないので
さほどの問題でもないのですが(たぶん)。

62Name_Not_Found2016/08/15(月) 00:09:53.91ID:???
>>61
> 普通のボタンにonclickでfunction呼び出した方が見通しがいいかもしれませんね。
今はonclick属性は一般的に使わない。

あとreturn falseではなく、event.preventDefault()を使うのが標準的なやり方だ。
eventはclickのイベントハンドラの第一引数な。

それからその場合はformのsubmitイベントを捉えたほうが良い。
そうすればthisがformになるからformの中を参照するのが少し楽になる。

ついでだが#sendにイベントハンドラをつけるのではなくdocumentにつけて
#sendで振り分けたほうが良い。僅かなタイミングだが
イベントハンドラが有効にならない期間がある。

要するにこうした方がいいという話だ。

<script>
$(document).on('submit', '#sendform', function(event) {
 if (!条件) {
  event.preventDefault();
  return;
 }
 処理
});
</script>

<form id="sendform" action="hoge.php">
<input type="submit" value="送信">
</form>

63Name_Not_Found2016/08/15(月) 22:41:59.07ID:???
>>62
>event.preventDefault()を使うのが標準的なやり方

これだと何がいいのでしょうか?
イベントの伝播で安全ということでしょうか?

64Name_Not_Found2016/08/21(日) 12:29:01.33ID:???
>>63
バブリングを止めない、という理解でいいんじゃないか

65Name_Not_Found2016/10/23(日) 12:58:24.02ID:k3QeH1kd
jqueryプラグインの「mix it up」を使っていて、
さらにプラグイン「jquery.cookie.js」を使ってそれをクッキーに保存させたいと思っています。

`
sample.html
<div class="style1">
 <div>
  <div class="filter style2" data-filter=".a">青</div>
  <div class="filter style2" data-filter=".b">赤</div>
  <div class="filter style2" data-filter=".c">黄</div>
 </div>
</div>
<dl>
 <dd class="sort" data-sort="default">新着順</dd>
 <dd class="sort" data-sort="myorder:desc">価格の高い順</dd>
 <dd class="sort" data-sort="myorder:asc">価格の低い順</dd>
 <dd class="sort" data-sort="random">ランダム</dd>
</dl>
<div class="style3">
 <div class="mix a">青</div>
 <div class="mix b">赤</div>
 <div class="mix c">黄</div>
</div>
`

66Name_Not_Found2016/10/23(日) 12:58:58.10ID:k3QeH1kd
`
sample.js
$('.style3').mixItUp({
controls: {
toggleFilterButtons: true,
toggleLogic: 'and',
},
animation: {
duration: 0,
},
});


$('.style2').on('click', function(){
$(this).toggleClass('style2b');
});
`
.style2のタグをクリックすると.style3の記事が絞り込み検索される仕組みです。
.style2をクリックすると同時に.style2bが付与され色が反転し、どのタグが選択されているか目視できるようにしています。
.mixにはdisplay:none;がかかっています。
このクッキーを保存して、ページが更新された場合に絞り込み検索および付与された.style2bが残っている状態にしたいと考えております。
独学で作成していて壁にぶつかっております。どうかご教授お願い申し上げます。

67Name_Not_Found2016/10/23(日) 23:32:21.63ID:???
クッキーに、ページの状態を保存したいの?

絞り込み検索のキーワード・カテゴリ、
style2bが付与されたことを、保存すれば?

68Name_Not_Found2016/10/24(月) 09:18:37.53ID:MXxfOYJU
>>67
そうです。
具体的なコードの書き方を教えていただきたいです。

69Name_Not_Found2016/10/25(火) 01:09:11.78ID:???
クッキーの仕様・容量を、調べれば?

データ構造は、[キー : 値] の辞書かな?

70Name_Not_Found2016/10/25(火) 12:00:22.97ID:AcPzGlnV
>>69
いろいろと調べてもわからなくてここにたどり着きました。

ミ〜サビ♪ シ ビア

72Name_Not_Found2016/10/25(火) 23:14:10.11ID:???
document.cookie - MDN
https://developer.mozilla.org/ja/docs/Web/API/Document/cookie

「jquery cookie」で検索すると、jQueryでクッキーを扱える、プラグインが一杯ある

73Name_Not_Found2016/10/26(水) 02:26:05.03ID:???
クッキーはjQueryで扱うべきものじゃない。
なぜならクッキーはDOMとは無関係だから。

それはjQueryが流行って質の悪いjQueryプラグインが大量に
生産されたときの負の遺産。いまどき使うべきじゃない。

「javascript cookie library」でぐぐったらコレが出てきた。
https://github.com/js-cookie/js-cookie

starも多いしこれでいいんじゃね?

74Name_Not_Found2016/10/26(水) 02:28:09.49ID:???
クッキーを扱うjQueryプラグインはjQueryプラグインではなくて
jQueryの名前空間に寄生しているだけ。

75Name_Not_Found2016/10/27(木) 01:20:47.53ID:???
そもそも、今でもクッキーを使うのかな?

今は、WebStorage じゃないの?

76Name_Not_Found2016/10/27(木) 12:41:11.64ID:???
>>75
使うに決まってんだろ脳みそ沸いてんのかクソボケ野郎が

77Name_Not_Found2016/10/28(金) 14:26:24.09ID:???
<div>
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <div>5</div>
</div>
例えばdivのclickイベントで、3がクリックされたときに
その次の4のdivを取得する方法を教えてください。

78Name_Not_Found2016/10/28(金) 14:46:22.99ID:???
>>77
event.target.nextElementSibling

79Name_Not_Found2016/10/28(金) 14:54:33.50ID:???
>>78
すみません、JQだとどうなりますか?

80Name_Not_Found2016/10/28(金) 16:34:29.55ID:???
$(this).next()

81Name_Not_Found2016/10/28(金) 19:21:48.82ID:???
>>79
jQueryでも同じコードを書けるんだが
jQuery#nextとnextElementSiblingは同じ
thisとevent.targetは等価ではない
eventは両方とも同じ

82Name_Not_Found2016/10/28(金) 20:14:35.74ID:???
>>80
ありがとうございました。

83Name_Not_Found2016/10/28(金) 21:46:53.73ID:???
>>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

84Name_Not_Found2016/10/28(金) 22:35:39.02ID:???
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に取り出す方法はありますか?
目的は、単なる興味です。

85Name_Not_Found2016/10/28(金) 23:07:50.54ID:???
jQueryの話と関係ないな
あらしかな。

86Name_Not_Found2016/10/29(土) 05:09:40.68ID:???
YouTubeのサイトのように、画面に表示されている所の、画像だけを表示して、
下へスクロールすると、新たに表示された所の画像を、その時に読み込んで表示するのは、
どのように、やっているのでしょうか?

つまり、非同期・遅延読み込み

87Name_Not_Found2016/10/29(土) 08:57:58.22ID:???
>>84
コードの書き方がいろいろおかしい
同じオブジェクトを参照するなら function func1() {
 return { 'year': 2016, 'month': 10 };
}
が不要
year, month も一時変数なので不要

var obj = { 'year': 2016, 'month': 10 };

これだけで良い
これ以上はJSスレで

88Name_Not_Found2016/11/03(木) 08:04:31.06ID:FerPc7S6
質問お願いします。

スライドショーの上に常に違う画像を重ねて表示させたく
https://allabout.co.jp/gm/gc/417216/2/
を参考にしてスライドショーはできたのですが
上に画像を重ねる方法がわかりませんでした。
知恵袋で似てる質問はあったのでチャレンジしてみたのですが
上記のサイトとは違うコードの組み方のようで結局出来ずに終わりました。

ほとんど調べながらコピペしてる状態の初心者なので、初歩的な質問かもしれませんが
もしご存じの方がいらっしゃいましたら教えていただきたいです。
また、解説してるサイト等ありましたら貼っていただけると助かります。

よろしくお願いします。

89Name_Not_Found2016/11/03(木) 08:18:25.97ID:???
>>88
現行スレはこちら

+ JavaScript & jQuery 質問用スレッド vol.6 + [無断転載禁止]©2ch.net
http://echo.2ch.net/test/read.cgi/hp/1465566635/

90Name_Not_Found2016/11/03(木) 08:31:12.68ID:???
>>89
ありがとうございます。
そちらで質問させていただきます。

91Name_Not_Found2016/11/19(土) 13:37:08.41ID:???
バージョン1系から3系に入れ替えたら、IE11でローカルファイルを開くとAjaxが動かなくなったけど、
どうすれば良いの?サーバに入れると正常に動作するのに。

92Name_Not_Found2016/11/19(土) 18:38:14.52ID:???
>>91
現行スレはこちら

+ JavaScript & jQuery 質問用スレッド vol.6 + [無断転載禁止]©2ch.net
http://echo.2ch.net/test/read.cgi/hp/1465566635/

93Name_Not_Found2016/11/26(土) 23:19:51.36ID:???
画像の遅延ロードってlazyloadでしか無理なの?

94Name_Not_Found2016/11/28(月) 13:30:55.11ID:???
>>93
同等の機能を自分で実装すればいけるよ
昔は自分でやってたもんだ

95Name_Not_Found2016/12/18(日) 12:27:31.41ID:???
現行スレはこちら。

■jQueryスレ
jQuery 質問スレッド vol.7
http://echo.2ch.net/test/read.cgi/hp/1478055094/

■ライブラリスレ
JavaScript ライブラリ総合質問所 vol.5
http://echo.2ch.net/test/read.cgi/hp/1465399470/

■JavaScriptスレ
JavaScript の質問用スレッド vol.131
http://echo.2ch.net/test/read.cgi/hp/1478053599/
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/

96Name_Not_Found2017/06/04(日) 20:49:35.14ID:???
jQuery初心者ですが、サイト内で複数のmp3を順に自動再生させたいのですが、
ぐぐって出てきたページに
↓このようなコードがあり、ページ中のボタンを押すと再生が始まる仕組みになっているのですが、
ボタンを押さなくてもページが表示された時点で自動再生されるようにするには一体どうすればいいのでしょうか?

〜冒頭省略〜
$( "#button_play_all" ).click( function () {
var mySources = $( "#media_player" ).children( "source" );
var myAudioPlayer = document.getElementById( "media_player" );
myAudioPlayer.addEventListener( "ended", function () {
〜以下省略〜〜

97Name_Not_Found2017/06/04(日) 20:51:23.04ID:???
>>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

98Name_Not_Found2017/06/04(日) 23:44:29.83ID:???
>>96
autoplay 属性というのがある
<audio autoplay …
ただし、ブラウザ設定でブロックされている場合はどうやっても無理だろう(ユーザに強制できない)

99Name_Not_Found2017/06/05(月) 00:04:54.08ID:???
>>98
ありがとうございます。
1ファイルなら簡単に再生できるのですが、複数のファイルを順に再生する方法がわかりません。
サンプルコードではそこが実現できているのですがページ内のボタンをクリックする必要があります。
$( "#button_play_all" ).click( function () {
↑この部分がボタンクリックで実行する制御をおこなっているようですが
ここを省略して以下のコードを実行させるように書く方法がわかりません。

100Name_Not_Found2017/06/05(月) 02:36:34.55ID:???
>>99
autoplay で再生が始まったときのイベントを捕まえて
そのサンプルコードと似たコードを走らす必要があるだろうね

101Name_Not_Found2017/06/20(火) 15:56:57.75ID:???
まさにこれ
http://hayabusa9.2ch.net/test/read.cgi/news/1497923973/16

ライブラリをネットで探して組み立てるだけ
楽なんだよな

102Name_Not_Found2017/12/12(火) 04:01:58.71ID:MrUcGD8N
HPで友達が稼げるようになった情報とか

⇒ http://asaswq3wq.sblo.jp/article/181819223.html

興味がある人だけ見てください。

TQZPQYA2JW

103Name_Not_Found2018/02/18(日) 20:15:41.37ID:???
☆ 日本の、改憲を行いましょう。現在、衆議員と参議院の
両院で、改憲議員が3分の2を超えております。
『憲法改正国民投票法』、でググってみてください。国会の発議は
すでに可能です。平和は勝ち取るものです。お願い致します。☆☆

104Name_Not_Found2018/05/01(火) 22:12:18.40ID:l1wYHpV1
誰でもできる在宅ワーク儲かる方法
少しでも多くの方の役に立ちたいです
グーグルで検索するといいかも『金持ちになりたい 鎌野介メソッド』

5OKLJ

105Name_Not_Found2018/05/05(土) 17:42:19.13ID:???
let $div = $('<div>')..append('<span>')

としてからspanにclassを追加したい場合はどうやればいいですか?

新着レスの表示
レスを投稿する