💻 <!-- dev -->

[jQuery] 11_종합 응용 예시 & 부트스트랩(BootStrap)

jQuery 종합 응용 예시 기본 상태 마우스를 올렸을 때 (두 번째) 게시글을 클릭했을 때 게시판 리스트 글번호 제목 작성자 조회수 작성일 3 세 번째 글 제목입니다. user01 26 2021-09-21 2 두 번째 글 제목입니다. user02 15 2021-08-24 1 첫 번째 글 제목입니다. admin 230 2021-08-01 선택된 게시글 정보: 글번호 / 제목 / 작성자 / 조회수 / 작성일 부트스트랩(BootStrap) 웹 사이트를 쉽게 꾸밀 수 있게 도와주는 HTML, CSS JS 프레임워크 (규칙성이 강한 라이브러리) B4 -> 제이쿼리 기반으로 만들어져서 우리가 사용하기에 가장 호환성 좋음 W3shcool 접속: https://www.w3schools.com/ W3Schools Fr..

[jQuery] 10_추가적인 메소드

더보기 jQuery의 추가적인 메소드에 대해 알아보자 each 메소드 ✔️ 배열의 모든 인덱스에 순차적으로 접근하고자 할 때, 객체가 가지고 있는 모든 속성에 순차적으로 접근하고자 할 때 사용하는 반복문 (for in문)과 유사하게 수행되는 메소드 [ 표현법 ] 1) $.each(배열/객체, function(매개변수1, 매개변수2) { 순차적으로 접근해서 반복적으로 수행할 코드; }); 2) 배열.each(function(매개변수1, 매개변수2) { 순차적으로 접근해서 반복적으로 수행할 코드; }); 순차적으로 객체 또는 배열의 인덱스에 접근할 때마다 익명함수가 실행됨 매개변수1, 매개변수2가 내부적으로 실행될 때마다 전달됨 (매개변수 생략 가능) 만약 객체를 제시했다면, 매개변수1(index): 순차적..

[jQuery] 09_요소 생성 및 제거

더보기 jQuery의 요소 생성 및 제거에 대해 알아보자 라이브러리 연결 후 진행하기 동적으로 요소 생성 요소 생성 삽입 관련 메소드 part 1 ✔️ 선택된 요소를 기준으로 새로이 생성된 요소를 추가하는 메소드 👉🏻 $(A).append(B): A 요소 내의 뒷부분에 B를 추가 (자손/하위) 👉🏻 $(A).prepend(B): A 요소 내의 앞부분에 B를 추가 (자손/하위) 👉🏻 $(A).before(B): A 요소 앞부분에 B를 추가 (동위) 👉🏻 $(A).after(B): A 요소 뒷부분에 B를 추가 (동위) A A A A 삽입 관련 메소드 part 2 (수동태) ✔️ 갖다불일 요소를 기준으로 작성되는 문법 👉🏻$(B).appendTo(A): B를 A 요소 내의 뒷부분에 추가 (자손/하위) 👉🏻$(..

[jQuery] 08_content 영역 관련 메소드

더보기 jQuery의 content 영역 관련 메소드에 대해 알아보자 라이브러리 연결 해 준 뒤에 진행! Content 영역 (innerHTML, innerText) 관련 메소드 *html("문구") 메소드: innerHTML 속성과 관련된 메소드 ✔️ 선택된 요소의 content영역 (시작태그와 종료태그 사이)을 리턴해 주거나 또는 변경해 주는 메소드 👉🏻$("선택자").html(): 선택된 요소의 content 영역의 값을 반환해 줌(자바로 따지면 getter 역할) 👉🏻 $("선택자").html("문구"): 선택된 요소의 content 영역의 값을 해당 문구로 변경해 줌 (자바로 따지면 setter 역할) 네이버로 test1 test1 test1 * text("문구") 메소드: innerText 속..

[jQuery] 07_탐색(순회)메소드 - 동위

더보기 jQuery의 탐색(순회)메소드 - 동위에 대해 알아보자 라이브러리 연결 후 진행할 것 탐색(순회) 메소드 (Traversing) - 동위 ✔️ sideways(동위) 메소드: 같은 레벨에 있는 요소들 (형제들)을 선택할 수 있는 메소드 👉🏻 $("선택자").siblings() 선택된 요소와 같은 레벨에 있는 모든 요소들을 선택 👉🏻 $("선택자").siblings("선택자") 선택된 요소와 같은 레벨에 있는 요소들 중에서 제시한 값과 일치하는 요소들만 선택 👉🏻 $("선택자").next() 선택된 요소와 같은 레벨에 있는 요소들 중에서 바로 다음 요소 딱 하나만 선택 👉🏻 $("선택자").nextUntil("선택자") 선택된 요소와 같은 레벨에 있는 다음 요소들 중에서 제시한 값과 일치하는 요소..

[jQuery] 06_탐색(순회)메소드 - 자손

더보기 jQuery의 탐색(순회)메소드 자손ver 알아보자 라이브러리 연결 후 진행할 것 탐색(순회) 메소드 (Traversing) ✔️ Descendants (자손) 메소드 : 기준이 되는 요소의 하위 요소들을 선택할 수 있는 메소드 👉🏻 $("선택자").children() 선택된 요소의 모든 자손(바로 하위) 요소들을 선택 👉🏻 $("선택자").children("선택자") 선택된 요소의 모든 자손 요소들 중에서 제시한 값과 일치하는 요소들만 선택 👉🏻 $("선택자").find("선택자") 선택된 요소의 모든 후손 요소들 중에서 제시한 값과 일치하는 요소들만 선택 조상 div(증조할머니) ul(할머니) li(엄마) span div(할아버지) p(아빠) span

[jQuery] 05_탐색(순회)메소드 - 조상

더보기 jQuery의 탐색(순회)메소드 조상ver에 대해 알아보자 라이브러리 연결 후 진행할 것 탐색(순회) 메소드 (Traversing) ✔️ Anscestors(조상) 메소드: 기준이 되는 요소의 상위 요소들을 선택할 수 있는 메소드 👉🏻 $("선택자").parent() 선택된 요소의 바로 위 (상위, 부모) 요소 하나만을 선택 👉🏻 $("선택자").parents 선택된 요소의 모든 상위요소들을 다 선택 👉🏻 $("선택자").parents("선택자") 선택된 요소의 모든 상위요소들 중에서 제시한 값과 일치하는 상위요소들만 선택 (추가적인 조건을 제시) 👉🏻 $("선택자").parentsUntil("선택자") 선택된 요소부터 제시한 값까지의 모든 상위요소를 선택(범위를 제시하는 개념) 조상 div(증조..

[jQuery] 04_필터링 선택자

더보기 jQuery의 필터링 선택자에 대해 알아보자 잠깐! 들어가기 전에 파일이 바뀔 때마다 반드시 라이브러리 연결해 주기 필터링 관련 선택자 및 메소드 필터 관련 선택자 👉🏻 선택자:first => 첫 번째 👉🏻 선택자:last => 마지막 👉🏻 선택자:even => 짝수 번째 (기준은 0번부터 시작점이 잡힌다!) 👉🏻 선택자:odd => 홀수 번째 이름 혈액형 거주지 홍길동 A형 서울 김영희 B형 경기도 이순신 O형 부산 총인원 3명 필터링과 관련된 메소드 기준이 되는 요소 중에서 특정요소들만 걸러서 선택해 주는 메소드 👉🏻 태그명:first() : 태그 요소 중 첫 번째 것을 선택 👉🏻 태그명:last() : 태그 요소 중 마지막 것을 선택 👉🏻 태그명:filter() : 태그명일 뿐만 아니라 괄호..

[jQuery] 03_추가적인 선택자

더보기 jQuery의 추가적인 선택자에 대해 알아보자 잠깐! 들어가기 전에 파일이 바뀔 때마다 반드시 라이브러리 연결해 주기 자손 선택자(>)와 후손선택자( ) 👉🏻 a>b: 자손선택자 => a의 자손들 중에서 b에 해당하는 요소를 선택 👉🏻 a b: 후손선택자 => a의 후손들(자손 포함) 중에서 b에 해당하는 요소를 선택 자손1 div의 후손이면서 ul의 자손1 div의 후손이면서 ul의 자손2 div의 후손이면서 ul의 자손3 div의 후손이면서 ul의 자손4 div / ul의 후손이면서 li의 자손 자손2 자손3 속성 선택자 👉🏻 선택자[속성]: 특정 속성을 가지고 있는 모든 요소 선택 👉🏻 선택자[속성=속성값]: 속성값이 특정값과 "일치"하는 모든 요소 선택 👉🏻 선택자[속성~=속성값]: 속성값..

[jQuery] 02_기본 선택자

더보기 jQuery의 기본 선택자에 대해 알아보자 기본 선택자 잠깐! 들어가기 전에 파일이 바뀔 때마다 반드시 라이브러리 연결해 주기 ✔️ .css(): 요소 객체에 스타일과 관련된 기능을 수행 ✔️ .html(): 선택된 요소의 innerHTML과 관련된 기능들을 수행하는 메소드 ✔️ .click() : 클릭 이벤트와 관련된 기능을 수행하는 메소드 ✔️ .val() : value 속성과 관련된 기능을 수행하는 메소드 ✔️ .attr() : 그 이외의 속성들과 관련된 기능을 수행 ✔️ .addClass() : 선택된 요소에 클래스를 추가해 주는 메소드 ✔️ .removeClass() : 선택된 요소에 클래스를 제거해 주는 메소드 *아이디 선택자: $("#아이디명") 👉🏻 특정 고유한 아이디값을 가진 요소..