jQuery 12. 시각적인 효과 메소드
2022. 12. 29. 19:42
Front/jQuery
시각적인 효과와 관련된 메소드 (Effect 메소드) : 페이지 내에 애니메이션 효과를 주기위해 사용되는 메소드 집합 show(), hide(), toggle() : 특정요소가 점점 커지면서 보여지거나(show), 작아지면서 사라지게(hide) 하는 메소드 toggle()->둘다 / 메소드 호출시 ms단위로 시간을 전달하면서 호출 숨기기 보여주기 토글 HTML 삽입 미리보기할 수 없는 소스 fadeIn(), fadeOut(), fadeToggle() 특정요소가 점점 투명해지면서 사라지고 (fadeOut), 선명해지면서 보여지게(fadeIn) 하는 메소드 fadeToggle ()-> 둘다 / 메소드 호출시 ms단위로 시간을 전달하면서 호출 숨기기 보여주기 토글 HTML 삽입 미리보기할 수 없는 소스 sli..
jQuery 11.종합 응용 예시
2022. 12. 27. 19:01
Front/jQuery
게시판 만들기 HTML 삽입 미리보기할 수 없는 소스 게시판 리스트📋 글번호 제목 작성자 조회수 작성일 3 세번째 글제목 user01 23 2022-12-25 2 두번째 글제목 user02 15 2022-12-15 1 첫번째 글제목 admin 215 2022-11-30 선택된 게시글 정보 : 글번호/ 제목/ 작성자/ 조회수/ 작성일
jQuery 10. 이벤트
2022. 12. 27. 18:56
Front/jQuery
이벤트 핸들러(이벤트 발생시 실행될 function) 연결방법 이벤트 메소드를 통한 연결 $("선택자").이벤트메소드(function(){ 해당 요소에 해당 이벤트 발생시 실행할 내용; }) 클릭해보세용 HTML 삽입 미리보기할 수 없는 소스 on 메소드를 이용한 방법 $("선택자").on("이벤트명",function(){ 해당 요소에 해당 이벤트가 발생시 실행할 내용; }) 마우스 클릭 및 올려보세요 HTML 삽입 미리보기할 수 없는 소스 동적으로 만들어진 요소에 이벤트 연결할때 ( 동적으로 만들어진 요소 : 처음 문서 로딩시에는 없다가 나중에 새로이 만들어지는 요소) $("상위요소선택자").on("이벤트명","하위요소선택자(이벤트를 걸고자하는 요소)",fucntion(){ 선택된 상위요소 안에 존재하..
jQuery 09. 추가적인 메소드
2022. 12. 27. 18:43
Front/jQuery
each 메소드 배열의 모든 인덱스에 순차적으로 접근하고자 할 때나 객체가 가지고 있는 모든 속성에 순차적으로 접근하고자 할때 사용하는 for in문과 유사하게 수행되는 메소드 1) $.each(객체|배열, function([매개변수1, 매개변수2]){ 순차적으로 접근할 때마다 실행할 내용; }); 2) $(배열).each(function([매개변수1, 매개변수2]){ 순차적으로 접근할 때마다 실행할 내용; }); 객체일때 첫번째 매개변수에는 순차적으로 접근할 때마다의 객체의 속성명 (키값)이 담김 두번째 매개변수에는 해당 속성값(밸류값)이 담김 배열일때 첫번째 매개변수에는 순차적으로 접근하는 인덱스 수가 담김 두번째 매개변수에는 해당 인덱스의 값이 담김 학생 조회 이름 나이 주소 HTML 삽입 미리보기..
jQuery 08. 요소 생성 및 제거 메소드
2022. 12. 27. 18:07
Front/jQuery
동적으로 요소생성 1) 문자열로 만드는 방법 let el1 = " 문자열로 요소생성" 2) DOM 메소드로 요소객체 만드는 방법 let el2 = document.createElement("p") ==> 요소객체 (요소노드생성) let text = document.createTextNode(" DOM메소드로 요소생성") // 텍스트 노드 생성 el2.appendChild(text); 3) jQuery로 요소생성 let el3 = $("").text("jQuery로 요소생성"); 요소생성 >> 화면 출력시 append()메소드 HTML 삽입 미리보기할 수 없는 소스 삽입관련 메소드 선택된 요소를 기준으로 새로운 요소를 추가시켜주는 메소드 $(A).append(B) : A요소 내 뒷부분에 B를 추가 (자손/..
jQuery 07. Content영역 관련 메소드
2022. 12. 26. 22:50
Front/jQuery
Content 영역( innerHTML, innerText )관련 메소드 * html(["문구"]) 메소드 : innerHTML 속성과 관련된 메소드 선택된 요소의 content 영역의 값을 리턴해주거나 변경해주는 메소드 > $("선택자").html() : 선택된 요소의 content영역 값(innerHTML 속성값)을 반환해줌(html태그까지 포함) > $("선택자").html("문구") : 선택된 요소의 content값을 해당 문구로 변경해줌 (html태그가 존재할 경우 태그로써 해석해줌) 네이버로 HTML 삽입 미리보기할 수 없는 소스 * text(["문구"] 메소드 : innerText속성과 관련된 메소드 > $("선택자").text() : 선택된 요소의 innerText속성값 반환 (html태그..
jQuery 06. 요소탐색(순회)메소드_ 동위
2022. 12. 26. 22:41
Front/jQuery
* 동위 (Sideways) 메소드 : 같은 레벨에 있는 요소들을 선택할 수 있는 메소드 - $("선택자").siblings() 선택된 요소와 같은 레벨에 있는 모든 요소들 다 선택 - $("선택자").silblings("선택자") 선택된 요소와 같은 레벨에 있는 모든 요소들 중 제시한 값과 일치하는 요소들만 선택 - $("선택자").next() | prev() 선택된 요소의 같은 레벨 중 바로 다음|이전 요소 하나만을 선택 - $("선택자").nextAll(["선택자"]) | prevAll(["선택자"]) 선택된 요소의 같은 레벨 중에 다음|이전 요소들 다 선택 - $("선택자").nextUntil|prevUntil("선택자") 선택된 요소의 같은 레벨의 다음|이전 요소들 중 제시한 값과 일치하는 요소..
jQuery 05. 요소탐색(순회)메소드_ 자손후손
2022. 12. 26. 22:36
Front/jQuery
* 자손,후손 (Descendant) 메소드 : 기준이 되는 요소의 하위요소들을 선택할 수 있는 메소드 - $("선택자").children() 선택된 요소의 모든 자손(바로 하위) 요소들을 선택해주는 메소드 - $("선택자").children("선택자") 선택된 요소의 모든 자손들 중에서 제시한 값과 일치하는 요소들만 선택 - $("선택자").find("선택자") 선택된 요소의 모든 후손(하위요소 전체)들 중 제시한 값과 일치하는 요소들만 선택 div(증조할머니) ul(할머니) li(엄마) span div (할아버지) p 아빠 span HTML 삽입 미리보기할 수 없는 소스
jQuery 04. 요소탐색(순회)메소드_ 조상
2022. 12. 26. 21:54
Front/jQuery
* 탐색(순회) 메소드 (Traversing) 조상 (Anscestors) : 기준이 되는 요소의 상위 요소들을 선택할 수있는 메소드 - $("선택자").parent() 선택된 요소의 바로 위 상위요소(부모) 하나만을 선택해주는 메소드 - $("선택자").parents() 선택된 요소의 모든 상위요소들을 다 선택해주는 메소드 - $("선택자").parents("선택자") 선택된 요소의 모든 상위요소들 중에서 제시한 값과 일치하는 상위 요소들만선택해주는 메소드 - $("선택자").parentsUntil("선택자") 택된 요소부터 제시한 값까지의 모든 상위요소들 선택 div(증조할머니) ul(할머니) li(엄마) pre div (할아버지) p 아빠 pre HTML 삽입 미리보기할 수 없는 소스
jQuery 03. 필터링 관련 선택자
2022. 12. 26. 21:43
Front/jQuery
1. 필터 관련 선택자 $("태그명:first | last") : 동일한 태그중 첫번째| 마지막 요소 선택 $("태그명:even | odd") : 동일한 태그 중 짝수번째 | 홀수번째 인덱스행 선택 이름 혈액형 거주지 홍길동 A형 서울 김영희 B형 경기도 김상순 O형 부산 총인원 3명 HTML 삽입 미리보기할 수 없는 소스 2. 필터 관련 메소드 기준이 되는 요소들 중에서 특정 요소만을 걸러서 선택해주는 메소드 first(), latst(), filter(), eq(인덱스), not() test-1 test-2 test-3 test-4 test-5 test-6 HTML 삽입 미리보기할 수 없는 소스