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 삽입 미리보기할 수 없는 소스
JavaScript 객체 실습 문제 1
2022. 12. 23. 21:56
Front/JavaScript 실습문제
- 입력버튼을 눌러 이름, 나이, 주소를 prompt로 입력받고 객체에 저장한 후, 출력버튼을 클릭하면 그 정보를 아래와 같이 출력하도록 만들기 (단, 입력을 받지 않은 상태에서 출력 버튼 클릭시 입력을 먼저 해달라는 알림을 띄우도록 할 것) ex) 이름 : 000 나이 : xx세 주소 : XXXXX 1) 나의 답안 >> member 객체를 전역변수로 생성한 후 , 입력버튼 클릭시 프롬프트를 통해 값을 입력하도록 하고 입력받은 값을 객체 속성에 대입 출력버튼 클릭시 입력값이 비어있을경우(null) 알림창을 통해 "정보를 먼저 입력해주세요"를 출력 비어있지 않을 경우 member객체에 담긴 값을 출력하도록 함 2) 선생님 답안 >> 전역변수로 객체를 생성한 후 입력값을 대입한것은 비슷하나,입력버튼 클릭시 ..
JavaScript 배열 실습 문제 5
2022. 12. 23. 21:24
Front/JavaScript 실습문제
- 해당 라디오버튼 클릭시 내용을 입력받을 수있는 영역이 보이도록 코드를 작성하세요. > CSS 영역 : 버튼을 누르기 전에는 div영역이 보이지 않도록 dispaly: none;으로 설정 검색할 항목을 선택하세요. 제목 날짜 작성자 검색할 제목을 입력하세요 : 검색할 날짜를 선택하세요 : - 검색할 작성자 아이디를 입력하세요 : > HTML 영역 : 라디오 버튼에 onclick속성을 추가하여 클릭했을시 발생할 함수를 아이디를 전달하면서 호출 클릭했을시 보여질 검색화면을 미리 작성 >JavaScript영역 : 라디오 버튼을 클릭했을시 해당 박스가 보여지도록 조건문을 제시 전달받은 라디오버튼의 아이디에 문자열 "Box"를 더한것과 div영역의 id가 동일하면 박스display = "block"(보여지도록)..
JavaScript 배열 실습 문제 4
2022. 12. 23. 21:17
Front/JavaScript 실습문제
- 다음 보기의 문자열을 바탕으로 삭제할 음식과 추가할 음식을 입력받아 지우고, 추가하는 코드를 작성하시오. (단, 1개씩 입력) HTML 삽입 미리보기할 수 없는 소스 보기 피자 치킨 당근 햄버거 떡볶이 이 부분에 정답이 출력 될 수 있도록 하세요 처리 및 출력 >> 1. label에 있는 문자열 사이의 공백을 기준으로 split으로 나눠 배열에 옮겨담기 2. 삭제할 음식과 추가할 음식을 입력받은 값을 변수에 담음 3. 반복문을 통해 배열에 담긴 값과 입력받은 삭제할 음식이 일치할때 splice 메소드를 통해 삭제 배열.splice(시작인덱스, 제거수,(추가할값) ) 4. 입력받은 추가할 음식은 push메소드를 통해 배열에 추가 5. id가 "print4" p태그 영역의 html에 배열을 출력