2021-01-01

Webエンジニア目指して#29

Progate Ruby

どうもスプラマンです。
未だにこのゲームやり続けてるのやばいですね　レーティング制で終わりがない、なおかつこれだけやってても楽しいと思える瞬間があるのがゲームとしてすごいなあと思います。環境はひどいけど・・・

さて本日もやってまいりましょうProgateのRuby IIです。ゼノブレ終わったので駆け抜けたい

配列

ingredients=["miso","soy sauce","kinako"]
puts "味の決め手は#{ingredients[1]}です"

------出力結果
味の決め手はsoy sauceです

each文

ingredients=["miso","soy sauce","kinako"]

ingredients.each do |ingredient|
  puts "#{ingredient}を持っています"
end

*each文の中にはスコープが作られるため注意

ハッシュ

foods = {
  "name"=>"apple",
  "number"=>5
}
puts foods
foods["number"]-=1 #キーの更新
puts "個数が#{foods["number"]}に変更されました"
foods["price"]=300 #キーの追加
puts foods

-----出力結果
{"name"=>"apple", "number"=>5}
個数が4に変更されました
{"name"=>"apple", "number"=>4, "price"=>300}

多分jsでオブジェクトにプロパティを指定するのと同じ役割
rubyではハッシュにキーを指定する
*配列の[ ]と違い{ }なところに注意
~~[ ]でやっても動作したけど...~~

シンボル

 foods ={
  :name=>"apple"
  :number=>9
}

文字列とは違い、内部では数値として扱っているため処理が早いらしい

シンボルを使ったハッシュの省略

foods ={
  name: "apple"
  number: 9
}

:name=>の代わりにname:のような書き換えが可能呼び出しの際は変わらずfoods[:name]で扱う

nil

nullはRubyではnilとして扱う

ハッシュin配列

foods=[
  {name: "apple", number: 9},
  {name: "orange", number: 5}
]

puts foods[1][:name]配列内のハッシュ値を出力
実行結果=>apple

each+ハッシュ

foods=[
  {name: "apple", number: 9},
  {name: "orange", number: 5}
]

foods.each do |food|
  puts "#{food[:name]}は#{food[:number]}個あります"
end

実行結果--------  
appleは9個あります  
orangeは5個あります  
 ----------------

こんなもんですね、ではでは。

2020-10-22

Webエンジニア目指して#28

Progate Ruby

どうもゼノブレDEドハマりマンですコロナの影響で転職がズレてゲームに没頭してしまった・・・ 92時間の末クリアしました。時間の大切さ、あっという間さを感じました。にしても良作ですね。移動がめんどい以外全て素晴らしい

さてProgateのRuby Iです。

文字列の出力

puts "sample"
puts "sample" + "rei" 連結も可能

数値の出力

puts 1 + 2 計算が可能
出力結果：3
puts "1 + 2"の場合は文字列として出力される
出力結果：1 + 2

# comment sample

変数

sample = "rei" 定義
puts sample 呼び出し
出力結果：rei 変数の型はなく、データに型があるらしい
よくわからないけどそのうち出るでしょう

変数名の頭文字が数字だとエラーが出る
また、文字列としての連結や数値としての演算も可能

変数の再定義

number = 2
puts number
number += 4
puts number

出力結果
2
6

変数入りの文字列

puts "私は#{name}です"
上のような例を変数展開と呼ぶ。
テンプレートリテラルとは呼ばないのね...
なお、変数展開する場合はダブルクォーテーション"で囲む必要がある。
また、数値の入った変数と文字列は+で連結不可なため、
文字列に変数を混ぜる場合は変数展開しとけばOK。

if文

rank = 1

if rank >= 60
  puts "あなたは上級者です"
elsif rank >= 30
  puts "あなたは中級者です"
else 
  puts "あなたは初心者です"
end

比較演算子を用いた際のTrue/Falseのくだりは他言語と同じ
putsで出力した際にTrue/Falseが確認できる

基礎的な文法だけって感じですね　ではでは。

2020-07-24

Webエンジニア目指して#26

JavaScript jQuery Progate

どうもEmonda ALR購入マンです。オークションでディスクブレーキ仕様がめっちゃ安く落とせそうで気軽に入札したら通ってしまった…
~~防犯面で気疲れしそうで早々に売るか迷いました~~
さて本題、時間かけすぎてしまいました。書ききってから投稿しようという意気込みが邪魔してましたね。結局一つの投稿で山盛りになってるという
なんか見返したらいつの間にか説明みたいな書き方になってて、手段が目的になっちゃってるので次回は以降さらっと書くようにしたいです

はい、というわけで前回に引き続きProgateのJQuery上級編やっていきます

要素の値を取得

textメソッド

var sample_text = $('セレクタ').text();
対象要素の文字列を取得

htmlメソッド

var sample_html = $('セレクタ').html();
対象要素のhtmlを取得

cssメソッド

var sample_color = $('セレクタ').css('color');
対象要素のcssプロパティを取得

attrメソッド

var sample_attr = $('セレクタ').attr('id');
attributeの略、つまりhtmlの属性の取得です。上記がそれです。
attrメソッドは下記のようにカンマで区切って2値を指定すると付与ができます。
var sample_attr_target = $('セレクタ').attr('id','sample');
複数の属性を取得したい場合は下記のようにします。

var sample_attr_target = $('セレクタ').attr({
  name : 'sample',
  class : 'attr target',
});

オブジェクトみたいな書き方ですね。classは上の例のようにすると複数付与できます。
というよりは半角スペースを入れた文字列が代入された結果、複数の付与になるのかな？
~~(こまけえこたあいいんだよ)~~
というわけでここまでのをpenでまとめます。
選択ゾーンの色文字をクリックするとその情報を取得します。

See the Pen GetMethod by 味噌カツサンド (@misokatsu_sand) on CodePen.

結構いいんじゃないですか！？プログラミングって感じになってきましたね

今気づいたんですが変数を宣言する際、名前にハイフン-を使わない方がいいみたいですね。多分減算かなにかと勘違いされるのか、意図しない動作になります。

フォームに入力された値の取得

の前に、フォームについてHTMLでいくつか知らないものが出てきたのでまとめます

input 要素の placeholder属性

<input id="input-text" type="text" placeholder="文字を入力して下さい">
↓このGIFみたいに入力する前に表示されてるやつですね f:id:misokatsu_sand:20200630043038g:plain

select要素
プルダウンリストの生成

<select id="select-form" class="select-form">
    <option value="0">選択してください</option>
    <option value="1">1. みかん</option>
    <option value="2">2. りんご</option>
    <option value="3">3. すいか</option>
</select>

こんなもんですかね。さて本題です。

htmlに下記のようなinput要素があるとします。
<input id="name" type="text">
これにより生成されたフォームに入力された値を取得するには、
let name = $('#name').val();
とjsに記述することでできます。

select要素の場合は、
let selectedText = $('#select-form option:selected').text();
こんな感じで取得できます。option:selectedの部分が大事です。
(これがないとselect要素全体を取得してしまう)
また、inputとは違い、 valだとvalueに振り当てた値を取得します。

submitボタン

同一form内の入力が全て終わったらそれらを確定や送信をする役割を持ちます。
jsでクリックイベント化しなくても関数として扱えます。また、submitイベントはボタンを押したときだけでなくEnterキーを押した際にも動作します。

$('#form名').submit(function(){
    処理;
    return false;
  });

カスタムデータ属性

<div data-sample></div> 自作の属性を指定できるみたいです。
data- に続いて任意の文字列を指定して扱えます。オブジェクトに番号を仕込んでselect要素とリンクさせるなどjQueryで何かと便利だそう

この辺でPenにまとめてみます。カスタムデータは使ってませんが...

See the Pen jQuery_getForm by 味噌カツサンド (@misokatsu_sand) on CodePen.

animateメソッド

$(セレクタ).animate({'プロパティ':'値'},変化までの秒数[ms]);
cssのtransitionと似てますね下の例だとやることは変わらなそうですがjQueryの方はクリックイベントなど幅広く扱えそう

$('.sample').hover(function(){
    $(this).animate({
      'font-size':'30px'
    },300);
  },function(){
    $(this).animate({
      'font-size':'24px'
    },300);
  });

ページ内リンク

htmlでの方法

a要素にhrefでidを指定すると、ページ内のそのリンクへ移動するようにできます。

<a href="#link1">Link1へ</a>
<div id="Link1">Link1</div>

jQueryでの方法

$('セレクタ').click(function(){
    $('ジャンプ先セレクタ').scrollTop(0をトップとした下方向のY座標);
  });

ページトップへ移動する際はhtml,bodyをセレクタとして使うそうです。
なぜ２つあるのかというと、ブラウザごとにhtmlに対応しているかbodyに対応してるか別れているからどっちもう書いておくとか。
ただ、この場合はセレクタを2つ設定していると関数を仕込む際にコールバックが2回発動してしまいます。
なのでその際はブラウザのユーザーエージェントを参照して分岐させます。
先程のanimateメソッドを合わせる際はこう。

$('#move-top').click(function(){
    $('html,body').animate({
      'scrollTop':0
    });
  });

offsetメソッド

$('セレクタ').offset();
ページの一番左上を基準に、対象要素の座標を取得します。
$('セレクタ').offset().top;とするとページトップ基準でY軸の座標を取得できます。

まとめPenです。もうhtmlとcssはちょちょいのちょいですね

See the Pen jQuery_scroll-offset by 味噌カツサンド (@misokatsu_sand) on CodePen.

2020-03-18

Webエンジニア目指して#25

Progate jQuery

どうも連続風邪マンです。早く体調気にせず稼げる環境にしたいですねえ

今回はProgateのJQuery上級編です。

eqメソッド

$('セレクタ').eq(オブジェクト番号).処理メソッド;
対象セレクタを検索し、見つかった個数に番号を振ってeq(1)のように番号を指定し、それを対象に処理をさせます。

下の例のようにdivの中にpタグで囲われたテキストが複数あるとすると、
eqメソッドで$("p").eq(2).css("color","red");と記述すると上から数えて3つめのp要素が処理されます。
配列のような数え方なので0スタートで数えます。0,1,2の３番目ですね。
.jsのeq(2)の数字を0にすれば一番上のが対象になります。

See the Pen eq_method by 味噌カツサンド (@misokatsu_sand) on CodePen.

indexメソッド

$('セレクタ1').index($(セレクタ1内でオブジェクト番号を取得したいセレクタ2));
言葉で書くとメチャクチャですが・・・以下の例のようにクリックイベントでeqメソッドと組み合わせてやるのが使いやすそうです

See the Pen BaoNpNR by 味噌カツサンド (@misokatsu_sand) on CodePen.

クラス名：Textをクリックしたら、そいつのオブジェクト番号を取得して取得した番号のオブジェクトだけが赤文字になるようにしました。なんかもうコンボだらけですね

next,prevメソッド

$('セレクタ').<span style="color: #ff0000">next()</span>.処理系メソッド;
指定したセレクタの次の要素を選んで処理できる

$('セレクタ').<span style="color: #ff0000">prev()</span>.処理系メソッド;
指定したセレクタの前の要素を選んで処理できる

セレクタに複数要素入ってる場合はそれぞれの次まはた前の要素全てに処理が入ります。

eq,index,prev,nextを合わせたものがこれです。
テキスト本体をクリックしたときとnext.prevボタンをクリックしたときで同じ処理が入るところは関数でまとめました。

See the Pen Vwvdxvz by 味噌カツサンド (@misokatsu_sand) on CodePen.

末端で戻りや送りをすると選択要素がおかしくなるため、対応したボタンを非表示にしてます。

lengthメソッド

$('セレクタ').length
セレクタにある要素の数だけの数値を返します。
何かとセットで使うはずなのでセミコロンは無くしました。
使用例ですが、さっきのCodePenで説明すると
選択できるテキストの行数が増えた際に終端要素のIndex番号が変わります。
なのでIf文で定義した↓の部分の「3」の部分が対応できなくなります。

else if(selected_index==3){  
  $('.next-btn').hide();
}

そこで、３のところの代わりにlengthを使うことでどれだけ要素が増えても対応できるようになります。始端のIndex番号は0から変わらないんで触る必要なしと。
ただし、
Lengthは要素の数を1,2,3,...と素直に返すのに対し、
Indexは配列のように0,1,2,...とカウントするためLength-1で扱うところに注意。ではCodePen、Go

See the Pen length_method by 味噌カツサンド (@misokatsu_sand) on CodePen.

今までのを応用すると、ボタンを押したらスライドが切り替わるやつができるわけですね。JQueryやりきったら今までの総集編みたいなページを作りたいと思います

切り替え系についてはキリがいいのでこの辺にしときます。細切れに取り組みすぎて期間空きすぎなんですけど！？！？！？ではでは。

2020-02-18

Webエンジニア目指して#24

Progate jQuery

どうも風邪マンです。喉に集中攻撃食らってます。

変数宣言で引っかかったのでそれをまとめます。

変数宣言

var

関数スコープ（宣言した関数内で使える）
再代入 O
再宣言 O
変数の巻き上げがある（関数宣言時にundefinedで初期化される）

let

ブロックスコープ（宣言したブロック内で使える）
再代入 O
再宣言 X

const

ブロックスコープ（宣言したブロック内で使える）
再代入 X
再宣言 X
オブジェクトは変更可

まとめ

varを使った不具合が多すぎて対策としてlet,constが作られたっぽいんで、varは使う必要なさそうですね。宣言の意図とかが読み取りにくくもなりますからね。 progateでvar使わされたんで気になって調べました。

それではProgateのjQuery 中級の続きです。

ホバーイベント

$('.sample-hover').hover(
  function(){
    マウスオーバー時の処理;
  },
  function(){
    マウスオーバー解除時の処理;
  }
);

要素にクラスを追加する

$('セレクタ').addClass('クラス名');
※クラス名の所に.は不要
予めcssを書いておいたクラスを適用させる感じですね。

要素からクラスを除去する

$('セレクタ').removeClass('クラス名');
※クラス名の所に.は不要

要素が指定したクラスを持っているか判定する

$('セレクタ').hasClass('クラス名');
返り値はTrue or Falseです。なのでifを使って特定の要素にだけ処理をさせるような使い方をします。
前回までのclosestメソッドやfindメソッドを絡めると使い勝手が良さそうですね

ということで道場編へ。

ここで学習したことは

同じクラス要素で複数レイアウトされているオブジェクトに対して,
単体でcssを変更したい場合はcssメソッドではなくaddClassメソッドを使う
(cssメソッドだと同じクラスの要素全てが変更されてしまう)
アロー関数はthisを字句解析時点で拘束する
この性質のせいでjQueryで要素を検索させて色々処理させようとしても、thisは検索前の何かを参照するので処理がうまくいきません。アローの引数をeventにし、thisの代わりにevent.currentTargetとすることで回避できますが、大人しくアロー使わない方が良さそうです。
jQueryオブジェクトを変数に格納するとき、$smp="$(this).find('.smp')";のようにクォーテーションで囲わない
文字列だから・・・と脳死でやってしまいましたが過去の記録見たらちゃんと囲ってないですね。

以上で道場も終わって次は上級編ですね。アロー関数とthisについて調べてたんですが奥が深そうだったんで後回しにします...

ではでは。

2020-02-15

Webエンジニア目指して#23

Progate jQuery

どうも銭湯マンです。 1ヶ月振りに行きましたけどやっぱり最高ですね。疲れがトゥルル！（死語）コロナウイルス怖すぎて行ってませんでしたがまあド田舎だし...

というわけでProgateのjQuery中級編です。最初に知りたかったなあって感じの内容でした。

jQueryを使う準備

jQueryを使うにはhead内で以下のように書き、jQueryライブラリの読み込みなるものをしないといけません。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

また、cssと同様にjsファイルの読み込みも必要です。
ただ、大体重いため</body>の直前に書いて、jsを読み込ませるとwebページの表示が早くなるらしいです。

最後に、jQueryはHTMLに干渉します。
HTMLを読み込みきってからjQueryの動作を開始させるためのお約束の型があります。こんな感じです。

$(document).ready(function(){
  ここに記述
});

これの省略系があって、こちらを使うのが主流です。というか非省略形は書く意味がないか。

$(function(){
  ここに記述
});

モーダルの表示

モーダルとは・・・クリックイベントなどで表示/非表示される要素のこと。メニューとかログイン画面とかですかね。
ここは今までの知識を使って、ログインボタンを押したらそれっぽいものが表示され、[X]ボタンを押したらその画面を閉じるものを作ります。　
ここで1つ思いました。
「画面外クリックで閉じるんじゃないんだ...」
というわけで調べてやっていきましょう

1.クリックした要素に対して処理を実行する

$(document).click((event)=>{
  $(event.target).css('color','red');
});

この例だとクリックしたところがどんどん赤くなっていきます。 f:id:misokatsu_sand:20200213025309g:plain

え、ボタンが凹むんじゃないのって？
このイベントはクリックした要素を取得して処理をするため、クリックしたところがp要素だとbox-shadowが動作しません。上手いことボタンのクラスだけ選択できれば動作しますが・・・

次でこの対策をします。取得したい要素の子要素が選択されても、意図する要素を取得するようにします

2.closestメソッドで親要素を取得する

closest("セレクタ"); 使用例

$(document).click((event)=>{
    $(event.target).closest(".btn")
    .css("box-shadow","0px 3px #444")
    .css("position","relative")
    .css("top","2px");
  });

f:id:misokatsu_sand:20200213033616g:plain
ボタンのテキストの上をクリックしてもp要素は選択されずにボタン用のクラスが選択されてますね。ここまで来ればあとは応用です。

3.本命

はいCodePenドーーーン！！！！（このタイミングで覚えたので急に使った）
これ最高〜〜〜

See the Pen eYNJwZp by 味噌カツサンド (@misokatsu_sand) on CodePen.

ちゃんとメニューボタンでモーダルが開いて、閉じるボタンはもちろんモーダルの外をクリックしても閉じられますね。

重要なのは以下の部分です。

if((!$(event.target).closest(".modal").length)&&
      (!$(event.target).closest("#menu-open").length)){
      $('.menu-modal-wrapper').fadeOut();
    }

最初はクリックしたところの親要素を取得し「モーダルのポップアップ部分ではない」ことを条件にモーダル全体をフェードアウトさせてるだけでしたが、それだとメニューボタンを押したときも「モーダルのポップアップ部分ではない」ため、フェードインした直後にフェードアウトしてしまって困ってました。
もっとスマートなやり方があるかもしれませんが、単純にメニューボタンを押したときを条件から除外する形で論理演算子をぶち込んでます。

モーダル周りはこんなもんですかね
結構良い寄り道だったんじゃないですか！？！？！？我ながらこういうところ、向いてると思います

おまけ
あんまり関係ないんですけど知らなかったHTML要素ありました

<input placeholder="初期表示文字">

inputの入力領域に予め文字があって、入力を始めると消えるやつですね。

さて今回はしれっとsass使ってみたり、gifを取り入れたりCodePen使ってみたりしました。
過去の記事を定期的に読み返してますが、回数を重ねるたびしっかり進化を続けられていて感慨深いですね。始まったばかりですけど

あれ、達成感の割にjQuery中級終わってないじゃん
・・・ではでは。

2020-02-06

Webエンジニア目指して#22

Progate jQuery

どうもガチ噛み口内炎マンです。 markdown書きやすいですねえ！！！！！！！！！！

今回はJavaScript VIIです！最後！

コールバック特化みたいですね。なんといきなり衝撃の事実、コールバック関数の説明がありました。
定義した関数を引数に渡し呼び出す用の関数のことをコールバック関数というみたいです
~~最初からその説明が欲しかったな...~~

というわけでやっていきましょう
・・・
コールバックの説明だけでした。そのうちコールバックを使って実用的なものが作りたいですね。

さてここまでhtml,css,sass,jsとやってきているのでもうフロントはさらっと固めようと思います。さらっとは固まらないか。

というわけでProgate jQuery初級編やります。

jQueryの記法

$('セレクタ').メソッド(引数);
なんかjってついてるからjsみたいにガッツリ書くんだと思ってました。
結構cssみたいなノリでかけるんですね。
セレクタはcssと同じように

classであれば.sample
idであれば#sampleで書きます。

メソッドは色々あるみたいですね。要素を隠すhide、フェードアウトさせるfadeOut(ミリ秒)、他にもアニメーション付きで要素を隠すものなど・・・以下まとめです。

消す系

hide 非表示にする
fadeOut() フェードアウトさせる
slideUp() 下から上に非表示にする

表示する系

show display:none;の要素を表示させる
fadeIn() フェードインさせる
slideDown() 上から下に表示する

変更系

css('プロパティ','値') css変更
text('変更するテキスト') セレクタ内のテキスト変更
html('<bold>変更するテキスト</bold>') テキスト変更+タグ追加

引数について

fadeOut(1500)は1500msで要素をフェードアウトさせる。
この1500をslowやfastで記述できる。
例:fadeOut(slow)

要素のクリックイベントを処理のトリガーにする

$('セレクタ').click(function(){ 処理 });
例

  $('#hide-trigger').click(()=>{
    $('#text').slideUp();
  });

こんな感じですね〜　例はアロー関数にしてみました。（レッスン内でやると不正解ですが）
なんとなく使い方が見えてきました。前にjsやっといて良かったなあと思います。今回はクリックをトリガーにし要素の表示について触っていますが、クリック以外をトリガーにしても、実行される処理を要素の表示と関係なくしても色々できるってわけですね。はえ〜

トリガーの要素自体に処理をする

いままでの情報であれば

$('#sample').click(()=>{
  $('#sample').css('color','red');
});

ですが、こいつはネストの中の同じセレクタをthisとすることができます。
例

$('#sample').click(()=>{
  $(this).css('color','red');
});

変数

薄々感づいてはいましたがjQueryはjsの拡張で、コード自体はjsです。
つまり変数が使えます。んで、メソッドの前の$('セレクタ')のことをjQueryオブジェクトと呼ぶみたいです。
jQueryオブジェクトを変数に格納することで記述が楽になるのはもちろん、処理が早くなるらしいです。例

var $smp=$('sample');
$smp.css('color','red');

同じjQueryオブジェクトに連続処理をする(メソッドチェーン)

$('セレクタ').メソッド().メソッド(); のようにメソッドは.で繋げられます。
例
1.メソッドチェーンを使わない場合

$('#sample').click(()=>{
  $(this).css('color','red');
  $(this).css('background-color','black');
  $(this).css('font-size','32px');
});

2.メソッドチェーンを使う場合

$('#sample').click(()=>{
  $(this).css('color','red');
  .css('background-color','black');
  .css('font-size','32px');
});

例2のように改行しても大丈夫でした。

子要素の取得

下のhtmlのように親要素がwrapper、子要素aがあるとします。

<div id="wrapper">
    <a href="#">1</a>
    <div>
      <a href="#">2</a>
    </div>
  </div>

このとき、wrapperを対象に子要素を取得しそれに処理をするメソッドがあります。

1.findメソッド

紛らわしいの来ましたね...
対象の親要素以下の階層の子要素を全て取得します。例

$('#wrapper').find('a').css('color','red');

この場合、要素aで囲まれたテキスト1,2が赤くなります。

2.childrenメソッド

対象の親要素の直下にある子要素だけを取得します。

$('#wrapper').children('a').css('color','red');

この場合、テキスト2はwrapperに対して1つ下の階層となるdivタグに入っています。孫ですね。こいつは対象にならないため、
wrapperの直下にあるテキスト1だけ赤くなります。

hoverイベント

clickがあればhoverもあると。クリックしてる間のやつもありそうですね
hoverイベントは引数が2つあり、
1つ目がホバー中
2つ目がホバーをやめたとき　の処理です。
例

$('#wrapper').hover(
    function(){
      $(this).find('.text').fadeIn();
    },
    function(){
      $(this).find('.text').fadeOut();
    }
)

以上でjQuery初級編おわり！結構jQueryのコーディングでidが使われていますが、いつかしら書いてたclassよりidの方が処理が早いからなんですかね？

なんか初級編だけでも既にそのへんのwebサイトより面白いもの作れそうですね。
ではでは。

配列

each文

ハッシュ

シンボル

シンボルを使ったハッシュの省略

ハッシュin配列

each+ハッシュ

文字列の出力

数値の出力

コメント

変数

変数の再定義

変数入りの文字列

if文

要素の値を取得

textメソッド

htmlメソッド

cssメソッド

attrメソッド

フォームに入力された値の取得

submitボタン

カスタムデータ属性

animateメソッド

ページ内リンク

htmlでの方法

jQueryでの方法

offsetメソッド

eqメソッド

indexメソッド

next,prevメソッド

lengthメソッド

変数宣言

var

let

const

まとめ

ホバーイベント

要素にクラスを追加する

要素からクラスを除去する

要素が指定したクラスを持っているか判定する

ということで道場編へ。

jQueryを使う準備

モーダルの表示

1.クリックした要素に対して処理を実行する

2.closestメソッドで親要素を取得する

3.本命

jQueryの記法

消す系

表示する系

変更系

引数について

要素のクリックイベントを処理のトリガーにする

トリガーの要素自体に処理をする

変数

同じjQueryオブジェクトに連続処理をする(メソッドチェーン)

子要素の取得

1.findメソッド

2.childrenメソッド

hoverイベント