JQuery | jqtest2

효돌dev.·2022년 1월 26일
0

웹 기초

목록 보기
4/4

<div class="box">
  <h3></h3>
  <input type="button" value="proc1()" onclick="proc1()">
  <input id="butok" type="button" value="butok">
  
  <div id="result1">
     <h1> 제목입니다 </h1>
	 <h2 id="para"> 작은 제목입니다 </h2>
	 <h2 class="sample"> 샘플입니다 </h2>
  </div>
  
</div>


input태그의 id를 이용하여 이벤트 핸들러 설정

$(document).ready(function(){
	 $('#butok').on('click', function(){
         //result1 배경색을 변경 
         $('#result1').css('background', 'yellow');
         
         // h1요소의 글자색을 파랑
         $('h1').css('color', 'blue');
         
	     //id가 para인 요소의 글자색은 녹색
	     $('#para').css('color', 'green');
	     
	     //class 가 sample요소의 글자색은 빨강 
	     $('.sample').css('color', 'red');
	 });
 });

input태그에서 onclick=proc1()에 의해서 호출

 function proc1() {
	 //result1 배경색을 변경 
     $('#result1').css('background', 'yellow');
     
     // h1요소의 글자색을 파랑
     $('h1').css('color', 'blue');
     
     //id가 para인 요소의 글자색은 녹색
     $('#para').css('color', 'green');
     
     //class 가 sample요소의 글자색은 빨강 
     $('.sample').css('color', 'red');
 }
profile
뭐든 다 하고싶음

0개의 댓글

관련 채용 정보

Powered by GraphCDN, the GraphQL CDN