💻 <!-- dev -->/JavaScript | jQuery

[JavaScript] 화살표 함수(Lamda)

JavaScript의 화살표 함수 (Lamda) 👉🏻 JavaScript의 표준 ES6 버전부터 제공하는 가독성을 높여 주는 문법 👉🏻 익명함수를 대체하는 문법 (선언적 함수에는 사용할 수 없음) 표현법 👉🏻 기존의 표현법 function() { 실행할 코드 } 👉🏻 화살표 함수를 이용할 경우 () => { 실행할 코드 } 사용 예시 상황 기존 표현법 화살표 함수 표현법 기본 표현법 function ( ) { } ( ) => { } 매개변수가 1개 function (a) { } a => { } 매개 변수 여러 개 function (a, b) { } (a, b) => { } 리턴시킬 내용이 고정된 경우 function ( ) { return 10; } () => 10 활용 예시 👉🏻 기존 코드 $.ajax..

[jQuery] 13_시각적인 효과 메소드 1~3

더보기 jQuery의 시각적인 효과 메소드에 대해 알아보자 라이브러리 연결 후 진행 시각적인 효과 메소드 (Effect 메소드) ✔️ 페이지 내에 애니메이션 효과를 만들기 위해 사용되는 메소드 집합 show() 와 hide(), toggle() 👉🏻 선택된 요소가 점점 커지면서 보이고, 점점 작아지면서 사라지게 하는 메소드 기본 상태 숨겨지는 중 보여지는 중 토글 중(on/off) 👉🏻 빨간 박스는 1초로 설정해 놔서 넘 빨리 생기고 없어져서 제대로 못 잡음... 유감 더보기 숨기기 보여주기 토글 fadeIn()과 fadeOut(), fadeToggle() 👉🏻 선택된 요소가 점점 투명해지면서 사라지고 점점 선명해지면서 보여지게 해 주는 메소드 기본 상태 숨긴 후에 위로 당겨짐 (위에 공간 없음!) 다시..

[jQuery] 12_이벤트(+ 동적 요소 이벤트 주는 법)

더보기 jQuery의 이벤트에 대해 알아보자 라이브러리 연결 후 진행 이벤트 핸들러 (이벤트 발생 시 실행할 function) 연결 방법 종류 방법 1. 이벤트 메소드를 통한 연결 [ 표현법 ] $("선택자").이벤트메소드(function() { 해당 요소에 해당 이벤트 발생 시 실행할 내용; }); 기본 상태 한 번 클릭 더블 클릭 클릭해보세요 방법 2. on 메소드를 이용한 방법 [ 표현법 ] $("선택자").on("이벤트명", function() { 해당 요소에 해당 이벤트 발생 시 실행할 내용; }); 기본 상태 마우스 올렸을 때 마우스 뗐을 때 클릭했을 때 마우스 클릭 및 올려 보세요 방법 3. on 메소드를 이용한 방법 2 [ 표현법 ] $("상위요소선택자").on("이벤트명", "하위요소선택..

[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(증조..