jQuery

cheat sheet

それjQuery使わなくても標準のhtml/css/jsでできるよ、ってやつ

ちょっとした開発に、library開発に、わざわざjQueryに依存する必要がないかもよ

単純に、jQueryで書けるあれをhtml/cssでどう書くんだ？の参考にもなる

いや、そうでもないな

$(function(){...})

初期読み込み時に、HTMLが全て読み込まれた後にこのブロックを実行する

DOMを操作する処理などは、HTMLが存在してる前提で動かさないとエラーになりうるため。

DOM操作なしで、最初に実行したい系の処理か

具体例は思いつかないけど

以下と同じ

listに対する処理をどう書くか

idは使えないのでclassで見ることになる

以下の2パターンが考えられる

loopしてその回数分の定義をする

code:js

const $container = $('.container');

$container.each(function(index) {

$container.eq(index).f(...);

})

「近い親」みたいにして定義する

code:js

...

$(this).closet('.hoge-container').f(...);

...

twigとかなら

$("#hoge-{{user.id}}").click(function ..)

clickしたblockの親を取得する

code:html

li

div.parent

span.price

button.submit ←click

こういうliが複数個あるときに、

button.submitをクリックしたときにそのブロックのspan.priceの値がほしい

parentで走査するのキモいなー

今はspanとbuttonが兄弟だからいいけど、入れ子深くなったら動かなくなるからな

text/val/html

text()

引数をそのまま文字列として表示

val()

value属性を設定できるものにしか使えない

inputタグとか

html()

引数はdomとして表示

innerText()

innerHtml()

value

textContent

この辺の違い

table:a

jQuery JavaScript

.html("○○") .innerHTML = "○○"

.text("○○") .textContent = "○○"

.val("○○") .value = "○○"

.html() .innerHTML

.text() .textContent

.val() .value

findの返り値

配列になったり、値だったりすのか？

mapとかしたときのelemとthisの違い

elem

this

$(this)

$(elem)

code:ts

$.find('.hoge_list').map(function(elem){

elem.value ?

this.value ?

})

どういう関数？

$(document)

jQuery Objectを格納している変数にはprefixに$をつける？

そうならばmapのときもか

.map(function($elem, index) {...})

みたいに書くの？

chainできるやつとそうでないやつの差がわからん

遅延実行

delay()

.delay( duration [, queueName] )

delayはアニメーションに対してしか動かないらしい(要出典)

domいじるか、css触るだけか、の差とか？

queue()

.queue( [queueName] )

なぜこれは動かない？

code:js

$('#hoge').html('hoge').delay(3000).hide();

delayはアニメーションに対してしか動かないらしい(要出典)

これでうごいた

code:js

$('#hoge').html('hoge').delay(3000).queue(function() {

$(this).html('')

})

これも動く

code:js

.text('hoge')

.stop(false, false)

.fadeIn()

.delay(1500)

.fadeOut();