jQuery 기본1

Suji Park·2022년 5월 20일

홈페이지 만들기 [Javascript/jQuery편]

목록 보기

11/21

<html>
 <head>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script>
   function submitjava(){
   	document.getElementById( "div1" ).innerHTML = "반갑습니다.";
   }
   
   function submitjquery(){
    $( "#div1" ).html( "잘지내세요." );
   }
  </script>
 </head>
 
 <body>
  <div id="div1">
   안녕하세요
  </div>
  
  <button type="button" onclick="submitjava();"> 변환1 </button>
  <button type="button" onclick="submitjquery();"> 변환2 </button>
 </body>
</html>

JavaScript

document.getElementById( "div1" ).innerHTML = "반갑습니다.";

JavaScript로 id가 div1인 태그의 내용을 "반갑습니다"로 변경해주는 코드

document

document: 웹페이지에 존재하는 html요소에 접근하고자 할 때 사용되는 키워드
id,class,tag등h tml요소에 접근하는 함수를 제공하는데 함수를 사용하기 위해서는 반드시document로 시작.

getElementById

getElementById("div1")는 아이디가 "div1"인 html요소에 접근하는 함수

innerHTML

innerHTML는 접근한 html요소의 코드를 변경할 수 있게 해줌.
위 코드를 보면 id가 div1인 요소의 코드를 변경할 수 있게 해주는 것.

jQuery

   function submitjquery(){
    $( "#div1" ).html( "잘지내세요." );
   }

id가 div1인 태그에 "잘지내세요"라는 내용을 넣는 것

<html>
 <head>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script>
   function submitjava(){ 	 
		document.getElementById( "div1" ).setAttribute( "style", "border:2px solid red;" );
   }
   
   function submitjquery(){
    $( "#div1" ).html( "잘지내세요." );
   }
  </script>
 </head>
 
 <body>
  <div id="div1">
   안녕하세요
  </div>
  
  <button type="button" onclick="submitjava();"> 변환1 </button>
  <button type="button" onclick="submitjquery();"> 변환2 </button>
 </body>
</html>

JavaScript와 jQuery로 css 변경

document.getElementById( "div1" ).setAttribute( "style", "border:2px solid red;" );

JavaScript로 id가 div1인 태그에 border:2pxsolidred;라는 스타일을 추가하는 코드

jQuery로 css 구현

$( "#아이디" ).css( "css이름", "css 값" );

$( "#div1" ).css( "border", "3px dotted blue" );

Suji Park

천방지축😛 얼레벌레🙄 빙글빙글🙃 돌아가는 수지의 코드~🎵