jQuery - 개요, 선택

jQuery

기존의 복잡한 클라이언트측 HTML 스크립팅을 간소화하기 위해 고안된 js의 라이브러리

• jQuery CDN 코드 제공 페이지 : https://code.jquery.com/

   <script src="https://code.jquery.com/jquery-3.6.0.js"
   integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
   crossorigin="anonymous"></script>

위의 CDN 주소를 HTML의 head 부분에 넣으면 간단하게 사용할 수 있다.

jQuery의 ready()

js에는 HTML문서가 모두 로딩된 후 수행되는 window.onload() 함수가 있다.
onload의 경우 한 페이지 내에 한 번만 작성이 가능한 반면
jQuery의 ready()함수는 한 문서 내에 여러 번 사용할 수 있다.

1) 사용법 1 : jQuery(document).ready(function(){});

2) 사용법 2 : $(document).ready(function(){});

3) 사용법 3 : $(function(){});

jQuery의 선택자

jQuery의 선택자는 기본적으로 css의 선택자와 같다
$()안에 선택자를 사용하여 불러올 수 있다.

	$("p").css("color", "blue");

	// .css("적용할 css 종류","css 값 선택") 

따라서 css에서 기본적으로 사용하는 아이디, 클래스, 속성 선택자 등을 사용할 수 있다.

$("input[name='gender']:checked"); // 속성 선택자
$(".area > ul > .qqq") //자식 선택자
$("#span1") //아이디 선택자
$(".item") //클래스 선택자

prop() 메소드

prop("속성명"): 해당 속성이 요소에 존재하면 true, 아니면 false를 반환한다
prop("속성명", true | false): 해당 속성을 checked 또는 selected 상태로 변경(true) / 해제(false) 한다.