1. 라이브러리 연동
https://code.jquery.com/jquery-3.6.0.min.js
https://cdnjs.com/libraries/jquery - cdn 방식의 라이브럴
1- 다운받아 오프라인으로 작업
2- CDN방식으로 script 태그로 배치
2. 선택자 Selector
요소 선택 : $() 안에 문자형 데이터로 CSS 선택자 입력
ex. $("선택자").css("스타일속성명","값");
$("선택자").attr("속성명","값"); align, tag등
기본 작성방법
#1. 문서 객체 먼저 불러와 선택자 사용 * 2번보단 1번 추천 (오류덜남)
<script>
$(document).ready(function(){
//jquery 작성 영역
$("선택자").css("스타일속성명","값");
});
</script>
#2. 즉시 함수로 묶기
$(function(){
//jquery 영역
});
2 - 1 기본선택자
| 전체 선택자 | $("*") |
| 아이디 | $("#아이디값") |
| 클래스 | $(".클래스값") |
| 태그 | $("태그명") |
| 여러개 | $("선택1, 선택2, 선택3....") |
| 종속 | $("태그명#아이디값")$("태그명.클래스값")$("h1.test.abc") |
| 부모 | $("선택").parent() .parents() |
| 하위 | $("기준선택 요소선택") |
| 자식 | $("선택 > 자식") |
| $("선택").children("자식") | |
| 형/동생 | $("선택").prev() 형 .prevAll() |
| $("선택").next() 동생 .nextAll() | |
| $("선택+ 요소") | |
| 전체 형제 | $("선택").siblings() |
| 가장 가까운 상위 | $("선택").closest("요소") |
2 - 2 속성선택자
선택한 요소를 기준으로 일치하는 속성의 포함여부를 따져 요소를 선택
| $("선택[속성]") | 선택요소중 지정한 속성이 포함된 요소 선택 |
| $("선택[속성^=값]") | 속성값이 지정한 값으로 시작하는 요소 선택 |
| $("선택[속성$=값]") | 속성값이 지정한 값으로 끝나는 요소 선택 |
| $("선택[속성*=값]") | 속성값이 이러한 값으로 포함하는 요소 선택 |
| $(":type 속성값") | input태그 중 type 속성값이 일치하는 요소 선택 |
| $("선택:visible") | 보이는 상태의 요소만 선택 |
| $("선택:hidden") | 숨긴 상태의 요소만 선택 |
| $("선택:selected") | 선택된 상태의 요소만 선택 |
| $("선택:checked") | 체크된 상태의 요소만 선택 |
2 - 3 탐색선택자
$("선택").not(:제외요소)
$("선택").find(:"요소선택") : 기준으로 선택한 요소중 지정한 요소만 선택