jQuery
cheat sheet
それjQuery使わなくても標準のhtml/css/jsでできるよ、ってやつ
ちょっとした開発に、library開発に、わざわざjQueryに依存する必要がないかもよ
単純に、jQueryで書けるあれをhtml/cssでどう書くんだ？の参考にもなる
いや、そうでもないな
$(function(){...}) 初期読み込み時に、HTMLが全て読み込まれた後にこのブロックを実行する
DOMを操作する処理などは、HTMLが存在してる前提で動かさないとエラーになりうるため。
あえて書かない状況ってあるの #??
DOM操作なしで、最初に実行したい系の処理か
具体例は思いつかないけど
以下と同じ
listに対する処理をどう書くか
idは使えないのでclassで見ることになる
以下の2パターンが考えられる
loopしてその回数分の定義をする
js const $container = $('.container');
$container.each(function(index) {
$container.eq(index).f(...);
})「近い親」みたいにして定義する
js...
$(this).closet('.hoge-container').f(...);
...twigとかなら
id="hoge-{{user.id}}" みたいにしてもいい $("#hoge-{{user.id}}").click(function ..) clickしたblockの親を取得する
htmlli
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
この辺の違い
a
| jQuery | JavaScript |
| .html("○○") | .innerHTML = "○○" |
| .text("○○") | .textContent = "○○" |
| .val("○○") | .value = "○○" |
| .html() | .innerHTML |
| .text() | .textContent |
| .val() | .value |
findの返り値
配列になったり、値だったりすのか？
data() の挙動が謎なので代わりに attr() を使うmapとかしたときのelemとthisの違い
elem
this
$(this)
$(elem) ts$.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] ) なぜこれは動かない？
js$('#hoge').html('hoge').delay(3000).hide();delayはアニメーションに対してしか動かないらしい(要出典)
#hoge の中に 'hoge' を3s間だけ表示したいこれでうごいた
js $('#hoge').html('hoge').delay(3000).queue(function() {
$(this).html('')
})
これも動く
js $(`#hogehoge`)
.text('hoge')
.stop(false, false)
.fadeIn()
.delay(1500)
.fadeOut();Jestでtestを書く