인접 관계 선택자종류사용법설명부모 요소 선택자$("요소 선택").parent()선택한 부모 요소를 선택합니다.상위 요소 선택자$("요소 선택").parents()선택한 요소의 상위 요소를 모두 선택합니다.가장 가까운 상위 요소 선택자$("요소 선택").closest("div")선택한 요소의 상위 요소 중 가장 가까운 만 선택합니다.하위 요소 선택자$("요소 선택 하위 요소")선택한 요소에 지정한 하위 요소를 선택합니다.자식 요소 선택자$("요소 선택>자식 요소")선택한 요소를 기준으로 자식 관계에 지정한 요소만 선택니다.자식 요소들 선택자$("요소 선택").children()선택한 요소의 모든 자식 요소를 선택합니다.형(이전) 요소 선택자$("요소 선택").prev()선택한 요소의 바로 이전 요소를 선택..
h1 요소와 ID가 tit3인 h3 요소의 스타일을 변경하여, 배경색을 하늘색으로, 테두리를 빨간색 점선으로 적용하기 제이쿼리 선택자 직접선택자 인접선택자 결과 💡 일치선택자 h1에 tit 부분에 배경색과 border 지정하기 제이쿼리 선택자 직접선택자 결과💡 연습문제#wrap 밑에 h1 태그만 선택해서 디자인 적용 background-color yellow border 2px dashed #f00 인접한 관계 선택자 내용 하위 요소 선택자 내용2 결과
들어가기 전에💡 라이브러리? 자주 사용되는 함수들의 모임(묶음)을 말합니다. 💡 jquery를 사용하게 된 배경웹 브라우저(익스플로러, 크롬, 사파리 등…) 간의 js 문법이 잘 동작하지 않았음크로스 브라우저 문제 ⇒ jquery가 등장바닐라 js 보다 코딩이 짧고 사용이 쉬운 것이 장점단점으로는 용량이 크고, 성능이 떨어짐💡 jquery? 함수를 이용해서 DOM을 조작하는 것임 jQuery 기본문법$(function() {jquery 실행문});HTML 위쪽에 넣어도 실행되게 만드는 구문 ⇒ HTML 태그 보다 뒤 늦게 실행을 시켜주는 구문// 사용법$(function(){ $('#title').css('color', 'skyblue');}); 전체 선택자‘*’ 키워드를 사용하며, 전체 태그를 선..