jQueryのon, bind, click
jQuery
cheat sheet
それjQuery使わなくても標準のhtml/css/jsでできるよ、ってやつ
ちょっとした開発に、library開発に、わざわざjQueryに依存する必要がないかもよ
単純に、jQueryで書けるあれをhtml/cssでどう書くんだ？の参考にもなる
いや、そうでもないな
$(function()) 初期読み込み時に、HTMLが全て読み込まれた後にこのブロックを実行する
DOMを操作する処理などは、HTMLが存在してる前提で動かさないとエラーになりうるため。
あえて書かない状況ってあるの #??
DOM操作なしで、最初に実行したい系の処理か
具体例は思いつかないけど
以下と同じ
listに対する処理をどう書くか
idは使えないのでclassで見ることになる
以下の2パターンが考えられる
loopしてその回数分の定義をする
const $container = $('.container'); $container.each(function(index) { $container.eq(index).f(...); }) 「近い親」みたいにして定義する
...$(this).closet('.hoge-container').f(...);... twigとかなら
id="hoge-{{user.id}}" みたいにしてもいい $("#hoge-{{user.id}}").click(function ..) clickしたblockの親を取得する
li div.parent span.price button.submit ←click こういうliが複数個あるときに、
button.submitをクリックしたときにそのブロックのspan.priceの値がほしい
parentで走査するのキモいなー
今はspanとbuttonが兄弟だからいいけど、入れ子深くなったら動かなくなるからな
text/val/html
text()
引数をそのまま文字列として表示
<b>a</b> という引数なら、 <b>a</b> という文字列を表示 val()
value属性を設定できるものにしか使えない
inputタグとか
.value() というmethodはない html()
引数はdomとして表示
<b>a</b> という引数なら、太い a を表示 innerText()
innerHtml()
value
textContent
この辺の違い
jQuery JavaScript
.html("○○") .innerHTML = "○○"
.text("○○") .textContent = "○○"
.val("○○") .value = "○○"
.html() .innerHTML
.text() .textContent
.val() .value
findの返り値
配列になったり、値だったりすのか？
data() の挙動が謎なので代わりに attr() を使うmapとかしたときのelemとthisの違い
elem
this
$(this)
$(elem) $.find('.hoge_list').map(function(elem){ elem.value ? this.value ?}) $() は関数 どういう関数？
$(document)
$ の命名規則 jQuery Objectを格納している変数にはprefixに$をつける？
そうならばmapのときもか
.map(function($elem, index) ) みたいに書くの？
書くとすれば
.map(function(e,i) { $elem = $(e)}) かな chainできるやつとそうでないやつの差がわからん
遅延実行
delay()
.delay( duration [, queueName] ) delayはアニメーションに対してしか動かないらしい(要出典)
アニメーション系とそうでない系って明確な区別があるのか #??
domいじるか、css触るだけか、の差とか？
queue()
.queue( [queueName] ) なぜこれは動かない？
$('#hoge').html('hoge').delay(3000).hide(); delayはアニメーションに対してしか動かないらしい(要出典)
#hoge の中に 'hoge' を3s間だけ表示したい これでうごいた
$('#hoge').html('hoge').delay(3000).queue(function() { $(this).html('')}) これも動く
$(`#hogehoge`) .text('hoge') .stop(false, false) .fadeIn() .delay(1500) .fadeOut(); Jestでtestを書く