クリックしたpの背景を白くする
ここまで--->test1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<link rel="stylesheet" href="test1.css">
<script src="../jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="d1">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
<p>
<button id="btn">click</button>
</p>
<ul id="tar"></ul>
<script src="test1.js"></script>
</body>
</html>
--->test1.js
$(function(){
console.log('hoge');
var langs=['java','javaScript','html','css','sql','php'];
$('#btn').on('click',function(){
for (var i=0; i<langs.length; i++){
var ele = $('<li>').text(langs[i]);
//三項演算子で記述
var hoge = i == 1? '#F00' : '#00F';
ele.css('color',hoge);
/*//普通の書き方
if(i==1){
//$('li').css({'color':'#F00'});//これで論理エラーなのはまだeleが生成されていないのに赤くしようとしたから
ele.css({'color':'#F00'});
}else{
ele.css({'color':'#00F'});
}
*/
$('#tar').append(ele);
}//ここに;はいらないらしい/書いても動く/特に意味のない；になる
});
$('#d1 p').on('click',function(){
console.log('haaaai');
console.log(this);
$(this).css({'background-color':'rgba(255, 255, 255,0.5)'});
});
});
--->test1.css
body{
background:#ffef73;
background-image: url(../img/fish_kue2.png);
background-repeat: no-repeat;
background-position: center;
}
ul{
list-style: square;
}
#d1{
display:flex;
flex-wrap:wrap;
}
#d1 p{
width: 33.333%;
text-align: center;
font-size: 1.5rem;
line-height: 3;
background-color: rgba(255, 203, 82,0.5);
}
プルダウンメニュー
<select id="s1"><!--プルダウンメニュー-->
<option value="1">言語</option>
<option value="2">ごはん</option>
<option value="3">趣味</option>
</select>
かならずvalueがいるらしい。
クロームのプルダウンは結構ぴちぴちなのですこし余裕をつけるcss
select{
height: 1.5rem;
}
セレクトした瞬間に配列を出力するようなのを作る
changeイベントを使うらしい
valでvalueをゲットする
