카테고리 없음

JQuery 기초

codi-3 2024. 7. 19. 11:55

JQuery

HTML 문서의 탐색 및 조작, 이벤트 처리, 애니메이션, Ajax와 같은 작업을 간편하게 수행할 수 있도록 설계된 빠르고 간결한 JavaScript 라이브러리이다. Jquery의주요 기능은 아래와같다 :

  1. Dom조작
  2. 이벤트처리
  3. 애니메이션
  4. Ajax
  5. 크로스 브라우저 호환성

jQuery를 사용하려면 먼저 HTML 문서에 jQuery 라이브러리를 포함해하며 아래의 코드는 JQuery를 Google CDNCDN (Content Delivery Network) 에서 불러오는 예시이다.

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

 

Jquery를사용하려면  head 태그 내부에 위와같은 라인을 적용시켜줘야한다! 

Jquery 적용요소 선택 방법

$(document).ready(function() {
  // id가 "myElement"인 요소 선택
  $('#myElement').text('Hello World!');
  
  // 클래스가 "myClass"인 모든 요소 선택
  $('.myClass').css('color', 'blue');
  
  // 태그 이름이 "p"인 모든 요소 선택
  $('p').hide();
});

 

위와같이 특적요소를 id, class 혹은 tag 별로 지정하여 Jquery를지정할수있다. 이떄  id 또는 class의 요소들을 선택할경우 해당 body부분 tag 내의 선언이 되어있어야한다!

function checkResult() {
	let fruits = ['사과','배','감','귤','수박']
	fruits.forEach((a)=>{
    	#a 라는 변수가 p 태그로 적용되기위해 양식을 temp_html에 저장된다
		let temp_html = `<p>${a}</p>`
        #저장된 temp_html은 q1아이디값이 있는곳에 추가한다
		$('#q1').append(temp_html)
	})
}