1️⃣ jQuery 메소드
(1) 값 가져오기 & 설정하기
$(선택자).val();: 선택자와 같은 value 값을 가져올 수 있다.$(선택자).val("설정할 값");: 선택자와 같은 곳에 value값을 설정할 수 있다.
(2) style 변경하기
$(선택자).css("속성", "속성값");
(3) 속성 변경하기
$(선택자).attr("속성","속성값");
➡️ 각각의 버튼을 누르고 '이동하기' 하이퍼링크를 클릭하면 속성을 변경한 링크로 접속하게 된다.
(4) Text 변경하기
$(선택자).text("글자");
➡️ (1) 예시코드에 있다.
(5) HTML 변경하기
$(선택자).html(html);
➡️ 버튼을 누르면 html이 변경한다.
(6) 요소 추가
📌 요소를 추가할때는 어떤 요소를 기준으로 할건지 기준 이 반드시 필요하다.
$(선택자).append(요소);: 선택된 요소의 자식 요소 중마지막으로 추가
2. $(선택자).prepend(요소); : 선택된 요소의 자식 요소 중 첫번째로 추가
-
$(선택자).before(요소);: 선택된 요소의 형제 요소로이전 형제로 추가 -
$(선택자).after(요소);: 선택된 요소의 형제 요소로다음 형제로 추가
(7) 요소 삭제
-
$(선택자).remove();: 선택한 요소를 DOM 트리에서 삭제
: 인자로 선택자를 넘겨주면, 선택한 요소 중 조건을 만족하는요소만 삭제 -
$(선택자).empty();: 선택한 요소의자식 요소를 모두 삭제
: 선택된 요소는 남아있고 그 안이 다 비워진다.
(8) 요소 탐색
-
$(선택자).parent().함수();: 바로 위에 존재하는하나의 부모요소 선택 -
$(선택자).parents().함수();: 바로 위 부모뿐만 아니라 부모의 부모,모든 조상을 선택 -
$(선택자).next().함수();: 선택된 요소 바로다음에위치한 형제 요소 선택 -
$(선택자).prev().함수();: 선택된 요소 바로이전에위치한 형제 요소 선택 -
$(선택자).children().함수();: 선택된 요소의자식 요소 모두선택
실습코드
- 과일을 box위에 맞게 올리고, 버튼을 누를때마다 알맞은 과일사진으로 바뀌게 하는 실습
➡️ 사진 파일이 올라가지 않아서 제대로 작동은 되지는 않는다.
(9) 클래스 조작하기
-
$(선택자).addClass("클래스명");: 선택된 요소에클래스 추가 -
$(선택자).removeClass("클래스명");: 선택된 요소에클래스 삭제 -
$(선택자).hasClass("클래스명");: 선택된 요소에 클래스가 있는지 여부 확인, Return 값은boolean값으로 나온다. -
$(선택자).toggleClass("클래스명");: 선택된 요소에 클래스가 있으면 추가, 없으면 삭제
📌 원활한 클래스 조작을 위해선
https://releases.jquery.com/ui/ 접속해서 원활한 ui를 활용한다.
접속을 한 후, 이전 블로그에서 언급했던jQuery의 src를 가져와서<head>에 붙여넣기 하면 된다.
2️⃣ 이벤트 리스너
- 이벤트가 발생했을 때 그 처리를 담당하는 함수
(1) 마우스 이벤트
-
click(): 이벤트 리스너의 약 95% 정도 해당 이벤트를 사용한다. 빈도가 높다. -
mouseover() -
hover() -
scroll()
(2) 키보드 이벤트
-
keydown() -
keyup()
마무리
js로만 하다가 jQuery로 하니까 코드가 간단해지고 보기가 편해진 부분이 있는 것 같다! 이걸 이용해서 정말 다양하게 적용할 수 있을 것 같다. 공부해봐야겠다.🥸
이번 공부를 마치고 캘린더에 관련된 실습을 진행했다. 다음 블로그에 게시할건데 처음에 너무 어렵게 생각해서 오래걸렸지만 배운건 많았던 것 같다..!
