cssメソッドとtextメソッド
テキストを出したいだけの時はtextメソッドで十分、
フォントの色をかえるなどならcssメソッドを使う。
$(function(){
$('#foo').text('<h1>jQuary</h1>');
$('#foo').text('jQua'); //上書きされる
$('#foo').css('font-size','4rem');
});
この出力結果はfontSize:4remの「jQua」
つなげて書くこともできる。これをメソッドチェーンという。
この場合はドットでつないで記述する。
$(function(){
$('#foo').text('jQua').css('font-size','4rem'); //textとcssをつなげて記述
});
こういう記述の仕方もできる。
$('p').text('jQua').css('font-size','4rem'); //p(パラグラフ)に適用
classを指定するときはこう。
$('.hoge').text('jQua').css('font-size','4rem');
$(function(){
});
で記述できるのは2つ。
いまのようなやつと「予約」
buttonをつくる
clickメソッドを使うともう一度使えないらしいのでよろしくないらしい。
今回onメソッドを使う。onは動作を予約するときに使う。
イベントが発生するまで(今回はボタンが押されるまで)実行されない。
クリック(というイベント)が起こったときに実行するという記述をする。
クリックしたときに何が起こるかをfunctionで渡す。
この場合の'click'はイベントと呼ばれる。
$(function(){
$('.hoge').text('jQua').css('font-size','1.5rem');
$('#btn').on('click',function(){
$('.hoge').css('font-size','4rem');
});
});
ボタンにマウスオーバーを作ることもできる。
これはカーソルが重なったときに実行される予約動作。
$(function(){
//$('p').text('<h1>jQuary</h1>');
$('.hoge').text('jQua').css('font-size','1.5rem');
$('#btn').on('mouseover',function(){ //カーソルがボタンに重なった時
$('.hoge').css('font-size','4rem');
});
});
マウスが載ったときにメニューが開くのに利用したりする。
mouseoutというイベントもある。
カーソルがボタンに乗ったときには発動しない、カーソルが離れたときに発動する。
$('#btn').on('mouseout',function(){
$('.hoge').css('font-size','4rem');
});
ここまでのまとめ
イベントの予約にはonを使う
onはイベントが起こるまで実行されない
第2関数に処理そのものを無名関数で記述
>ところで、さまざまなイベント処理とはどのようなものでしょうか？例えば、次のようなイベントが考えられます！
マウス操作（クリック、ホバー、移動など）が行われた時
キーボードから何か入力された時
フォームが送信された時
任意のフォーム要素にフォーカスされた時
画面がスクロールされた時
etc...
対象要素.on( イベント名, セレクタ, データ ,関数 )
>「イベント名」には、例えばクリックイベントなら「click」という文字列を指定するだけなので簡単です。「セレクタ」は、対象要素内でさらに指定したセレクタからのイベントだけを確認するように設定できます。
「データ」は、任意のデータを渡したい時に値を設定することができます。「関数」には、イベント発生時に実行したい処理を記述するのが一般的です。
<dl>タグ
かつてはマークアップの要素
いまは説明するのに使うディスクリプション要素として使われている。
たいてい<dt>や<dd>と一緒に使う。
おそらくだけど、cssは静的デザインをもち、
jQuaryはイベント発生などの動作を受け持つようだ。
イベントの予約はonで書く
パラメーター（引数）は2つ、カンマで区切る、
イベントの名前と処理内容である無名関数を記述。
--->test2.html
<!DOCTYPE html>
<html lang="ja" hoge="foo">
<head>
<meta charset="UTF-8">
<title>JQuery</title>
<link rel="stylesheet" href="test2.css">
<script src="../jquery-3.4.1.min.js"></script>
</head>
<body>
<dl id="menu">
<dt>drink menu</dt>
<dd>tea</dd>
<dd>orange juice</dd>
<dd>water</dd>
</dl>
<script src="test2.js"></script>
</body>
</html>
--->test2.css
body{
background: #EEE;
}
#menu *{
border: solid 1px #ccc;
margin: 0;
padding: 5px;
text-align: center;
width: 200px;
}
#menu dd{
background: #aaa;
border: solid 1px #ccc;
text-align: center;
display:none;
}
--->test2.js
$(function(){
//$('p').text('<h1>jQuary</h1>');
$('.hoge').text('jQua').css('font-size','1.5rem');
$('#btn').on('mouseout',function(){
$('.hoge').css('font-size','4rem');
});
//メニューのスライドを予約
$('#menu dt').on('click',function(){
//console.log('a');
$('#menu dd').slideToggle(); //スライドしてメニューを表示
});
});
