the Rabbit_Sand, IT Blog 🍀

동적으로 태그 생성하기 1. 문자열로 생성하기 let str1 = "문자열로 생성하기"; $("area").append(str1); 2. DOM 메소드로 생성하기(JavaScript 방식) - createElement(), createTextNode() let str2 = document.createElement("p"); // p 태그 생성 let text = document.createTextNode("DOM 메소드로 생성"); str2.appendChild(text); // DOM 메소드로 생성 $("area").append(str2); 3. jQuery 방식 let str3 = $("").text("jQuery로 생성"); $("area").append(str3);

content와 관련된 메소드 1. html() - innerHTML 속성과 관련된 메소드 : 선택된 요소의 content 영역(시작태그와 종료태그의 사이 영역)을 리턴시키거나 변경해주는 메소드 - $("선택자").html(): 선택된 요소의 content 영역의 값을 html 태그를 포함하여 반환한다. - $("선택자").html("문구"): 선택된 요소의 content 영역의 값을 해당 문구로 변경해서 반환한다. 문구에 html 태그가 있을 경우엔 태그로 해석한다. 다음으로 가기 네이버로 가기 2. text() - innerText 속성과 관련된 메소드 : 선택된 요소의 content 영역의 텍스트만 리턴시키거나 변경해주는 메소드 - $("선택자").text(): 선택된 요소의 content 영역을 ..

탐색(순회) 메소드 1. 조상 메소드 : 기준이 되는 요소의 상위요소들을 선택하는 메소드 - $("선택자").parent() : 선택된 요소의 바로 위 상위요소 하나만 선택한다. - $("선택자").parents() : 선택된 요소의 모든 상위요소들을 선택한다. - $("선택자").parents("선택자") : 선택된 요소의 모든 상위요소들 중에서 제시한 값과 일치하는 요소만 선택한다. - $("선택자").parentsUntil("선택자") : 선택된 요소부터 제시한 값까지의 모든 상위요소를 선택한다. div ul li span div p span 2. 자손 메소드 : 기준이 되는 요소의 하위요소들을 선택하는 메소드 - $("선택자").children() : 선택된 요소의 모든 자손요소(바로 아래 하위요..

필터링 관련 선택자 이름 혈액형 거주지 박지원 B 파주 남이 B 양주 이도 B 서울 홍길동 O 부산 총인원 4명 필터링 관련 메소드 : 기준이 되는 요소 중 특징 요소만 걸러서 선택해준다. - first(), last(), filter(), eq(), not() test-1 test-2 test-3 test-4 test-5 test-6

function bet(num1, num2){ let tmp; // 각각 어떤 수가 더 클 지 모르므로 임시변수를 선언 let sum = 0; if(num1 > num2){ // tmp를 이용하여 더 큰 수를 num1으로 바꾸기 tmp = num1; num1 = num2; num2 = tmp; } for(let i = num1; i

// prompt()에 입력받은 값을 변수 year로 받기 var year = prompt("태어난 연도를 입력하세요.(단, 숫자만 입력하세요.)"); // year를 12달로 나눴을 때 나머지가 n일 때 XX띠라고 alert로 출력하기 if(year % 12 == 0){alert('원숭이띠');} else if(year % 12 == 1){alert('닭띠');} else if(year % 12 == 2){alert('개띠');} else if(year % 12 == 3){alert('돼지띠');} else if(year % 12 == 4){alert('쥐띠');} else if(year % 12 == 5){alert('소띠');} else if(year % 12 == 6){alert('범띠');} e..

자손 선택자(>)와 후손 선택자( ) div의 후손이면서 ul의 자손1 div의 후손이면서 ul의 자손2 div의 후손이면서 ul의 자손3 div의 후손이면서 ul의 자손4 duv/ul의 후손이면서 li의 자손 자손2 자손3 속성 선택자 - 선택자[속성]: 특정한 속성을 가지고 있는 모든 요소를 선택한다. - 선택자[속성=특정값]: 속성값이 특정값과 일치하는 모든 요소를 선택한다. - 선택자[속성~=특정값]: 속성값에 특정값의 단어를 포함하는 요소를 선택한다. - 선택자[속성^=특정값]: 속성값이 특정값으로 시작하는 요소를 선택한다. - 선택자[속성$=특정값]: 속성값이 특정값으로 끝나는 요소를 선택한다. - 선택자[속성*=특정값]: 속성값에 특정값을 포함하는 요소를 선택한다. 입력 양식 선택자 : in..

아이디 선택자 : 특정 아이디값을 가진 요소 하나만 선택할 때 사용한다. JavaScript로 아이디 선택자 jQuery로 아이디 선택자 태그 선택자 : 특정 태그 요소를 선택할 때 사용한다. p태그1 p태그2 p태그3 h1태그1 h1태그2 h1태그3 클래스 선택자 : 특정 클래스 속성을 가진 요소들을 선택할 때 사용한다. 클래스 선택자1 클래스 선택자2 클래스 선택자3 *** JavaScript와 jQuery 비교 1. 요소를 선택하기 JavaScript jQuery document.getElementById("아이디명") $("#아이디명") document.getElementsByTagName("태그명") $("태그명") document.getElementsByClassName("클래스명") $("...

post 방식의 특징 1. url의 body 영역에 데이터를 포함시켜서 요청한다. → 사용자가 입력한 데이터(값)들이 url에 노출되지 않아 보안유지가 가능하다. → 로그인이나 회원가입의 경우가 post 방식에 적합하다. 2. body 영역은 전송하는 길이 제한이 없어 게시판 작성 등에 용이하다. 3. 즐겨찾기가 가능하지만 전달되는 데이터가 url에 노출돼있지 않아서 get 방식과 달리 기존의 검색결과를 볼 수 없다. request_post.html 이름: 성별: 남자 여자 나이: 거주 지역: 서울 경기 강원 부산 대구 광주 울산 인천 키: 좋아하는 음식(모두 선택하기) 중식 일식 양식 한식 분식 RequestPostServlet @WebServlet("/test2.do") public class Req..

get 방식의 특징 1. url의 header 영역에 데이터들을 포함시켜서 요청한다. → 사용자가 입력한 데이터들이 url에 노출되어 보안 유지가 불가능하다. → 로그인이나 회원가입과 같이 보안 유지가 필요한 경우에는 get 방식이 부적합하다. 2. header 영역은 전송 길이에 제한이 있다. → 방대한 데이터들을 담고 있을 경우엔 초과된 데이터들이 절단되어서 넘어간다. → 게시판 작성과 같은 경우엔 get 방식이 부적합하다. 3. url에 입력 데이터가 노출되므로 북마크(즐겨찾기)가 가능하다. → 검색 기능을 사용할 땐 get 방식이 적합하다. 회원 정보 입력 이름: 성별: 남자 여자 나이: 거주 지역: 서울 경기 강원 부산 대구 광주 울산 인천 키: 선호하는 음식 선택(최대 5개) 중식 일식 양식 ..