jquery란?

:자바스크립트 DOM 작업을 쉽게 처리할수있도록 도와주는 라이브러리

(자바스크립트 문법이나 라이브러리를 대체하는 프로그래밍 언어가 아님)

JQuery기본개념

라이브러리 연동후 사용해야 함.

연동방법 1) 다운로드

연동방법 2)네트워크 전송 방식

<script src="./파일 위치/jquery-3.7.1.min.js"></script>

기본 사용 방법

1.선택한 요소에 지정한 스타일 적용

$(”css선택자”).css(”스타일 속성명”, “값”);

2.선택한 요소에 지정한 속성 적용

$(”css선택자”).attr(”속성명”,”값”);

기존에 있는 엘리먼트들을 jQuery를 통해 변경
jQuery(img).attr("src", "../HTML/1.image/file/20240529114223.png");
jQuery를 $ 로 표현 가능
$(img).attr("src", "../HTML/1.image/file/20240529114223.png");
$( ) 안에 문자열을 넣으면 CSS선택자 규칙 적용 가능
$("#img1").attr("src", "../HTML/1.image/file/20240529114223.png");

JQuery 선택자

참고

$(document).ready(function (){}) : DOM 요소들이 로드되고 준비된 후에 실행 => 더 빠른 실행

$(tunction(){ }) : $(document).ready(function (){}) 를 한 번 더 줄인

window.onload = function () {} : 완전히 로드되고 초기화된 후에 실행

.on({}): 선택한 요소에 이벤트 핸들러를 여러 개 동시에 설정

even 홀수 , odd 짝수 : 인덱스 기준 (0부터 시작)

선택자 예시

<script>
      
  $(document).ready(function () {

	  $("h2").css("color", "blue"); // 함수에 파라미터로 속성 넣어줌
	  $("#text1").css("color", "red");
	  $(".text2").css("color", "yellow");
	  $("p.text2") //p.text2는 HTML 코드에서 class 속성이 text2로 지정된 모든 <p> 태그를 선택
	    .css("background-color", "black")
	    .css("border", "1px solid gold"); //연결해서 변경 가능
	  $("p:first").css("color", "pink"); // p태그중 첫번째 것만 바꾸겠다
	
	  $('input[type="text"]').css('background-color','green')
	  $('#select1').css('background-color', 'yellow')
	  $('#select1 option').css('background-color','lightblue')

	  $('#addBtn').click(function(){
      $('p:last').addClass('boxstyle');
	  })

	  //.on({}): 선택한 요소에 이벤트 핸들러를 여러 개 동시에 설정
	  $('#removeBtn').on({
	    'click': function() {
	      $('p:last').removeClass('boxstyle');
	    },
	    'mouseover': function() {
	      alert('aa');
	    }
	  });
  
	  //even 홀수 , odd 짝수 : 인덱스 기준 (0부터 시작)
	  $('tr:odd').css('background-color', 'lightgray');
   
   });
</script>