# ex02jQstyle
<head>
<script src="./jquery-3.7.1.min.js"></script>
</head>
<body>
<h1>jQuery style</h1>
<button>change!🛎</button>
<script>
$('button').click(()=>{
console.log('click');
// 스타일 제어
// vanilJS => .style.속성 = 값
// jQuery => .css(속성, 값)
// (1) 한줄씩 입력
$('h1').css('color','pink')
$('h1').css('background-color','gray');
$('h1').css('font-style','italic');
// (2) chain 방식 입력
// jQuery 메소드는 메소드가 제어하는 대상을 리턴
// => 메소드를 계속해서 붙여넣는 방식 사용가능
$('h1').css('color','pink').css('background-color','gray').css('font-style','italic')
// (3) 객체로 입력
$('h1').css({
'color' : 'pink',
'background-color','gray',
'font-style','italic'
});
})
</script>
</body>
# ex03event.html
<head>
<script src="./jquery-3.7.1min.js"></script>
<head>
<body>
<h1>jQuery event</h1>
<h1>jQuery event</h1>
<h1>jQuery event</h1>
<button>change💥</button>
<script>
// $(요소).on(이벤트타입, 이벤트 핸들러);
// this : 호출된 HTML객체를 저장
// 화살표 함수에서는 e.target으로 사용(매개변수 e)
// (1) 버튼을 클릭했을 때, h1 글자색을 오렌지색으로 변경 => click
$('h1').on('click',()=>{
$('h1').css('color'.'orange');
})
// (2) h1 마우스를 올렸을때, 글자색을 빨간색으로 변경 =>mouseover
$('h1').on('mouseover',()=>{
$('h1').css('color'.'red');
})
// (3) h1 마우스를 내렸을 때, 글자색을 검은색으로 변경 => mouseout
$('h1').on('mouseout',()=>{
$('h1').css('color'.'black');
})
</script>
</body>
<head>
<title>dynamic event</title>
</head>
<style>
button{
width : 100px;
height : 60px;
border : none;
font-weight : 600;
font-size : 1.5rem;
margin : 5px
}
.click{
background-color:lightblue;
}
.on{
background-color : lightsalmon;
}
</style>
<script src="./jquery-3.7.1.min.js"></script>
</head>
<body>
<button class="click">click</button>
<button class="on">on</button>
<br>
<script>
// 동적 이벤트 바인딩
// $(document).on(이벤트타입, 이벤트대상, 이벤트 핸들러)
// click 버튼 클릭시, click 메소드 사용
$('.click').click(()=>{
console.log('click');
$('body').append('<button class="click">click</button>')
})
// on 버튼 클릭 시, on 메소드 사용
$(document).on('click','.on',()=>{
console.log('on');
$('body').append('<button class="on">on</button>');
</script>
#ex04on.html
갓벽한 개발자