본문 바로가기

Langauge/jQuery

 (10)
[jQuery] 아코디언 만들기 -3 가지 방식 ※ ※ css 속성은 3가지 방식 모두 동일하게 적용한다. 1. body태그의 html 의 내용물을 작성 후 만들기 - 각 탭을 클릭시 내용물 모두 열린 상태로 유지된다. (2번 방식과의 차이) body태그의 html 의 내용물을 작성 후 아코디언을 만든다. 쌓은 html문을 html 의 container 태그에 넣어준다. 하지만, 처음에 내용물태그(div.panel)를 웹상 나타내는 것이 아닌 버튼태그(button.accordian)만 보여주고, 내용물태그(div.panel)는 모두 숨겼다가 하나씩 버튼을 클릭할 때마다 해당 버튼의 내용물들을 보여준다. 각 탭을 클릭시 내용물 모두 열린 상태로 유지된다. (2번 방식과의 차이다.) 내용물태그(div.panel) 를 숨기고 시작한다. $("..
[jQuery] 회원가입 만들기 ※ [Quiz] 아래와 같이 회원가입 폼을 만드세요. ※ 1. 폼 회원가입에서 회원가입 버튼을 클릭하면 registermember.do 로 이동한다. 2. 아이디, 패스워드, 패스워드확인, 이름, 이메일 모든 항목은 반드시 입력해야 한다. 3. 아이디는 라벨을 클릭해도 해당 입력 상자로 포커스 이동한다. 4. 취소 버튼을 이용해서 입력 상자를 초기화 한다. 5. 아이디는 입력시 첫글자는 대문자이고 나머지 글자는 영문자, 숫자로 총 5글자 이상만 가능하다. 6. 아이디 입력 후 포커스를 잃는 경우에 조건 체크 한다. 7. 조건 체크에 만족하지 않으면 '5글자이상, 첫글자는 대문자이고 영문자, 숫자만 가능" 이라는 글자가 나타난다. 8. 입력한 아이디 값도 삭제한다. 9. 패스워드 입력 하지 않고 패스워드확..
[jQuery] 이벤트 버블링 문제발생 해결하기 이벤트 버블링 막기 즉 , 이벤트 버블링 문제발생을 해결한다. html 에서 포함관계에 있는 태그들을 단독으로 잡을 시에는 이벤트 버블링 문제로 예상치 못한 결과가 나온다. 이것을 막아보도록 할 것이다. 1. 선택자1.is(선택자2) : 선택자1 과 선택자2 가 동일한 엘리먼트를 가리키는 것이라면 true , 동일한 엘리먼트를 가리키는 것이 아니라면 false 아래는 div > p > span 태그가 포함되어 있는 구조이다. 만약, 각각 태그를 잡아 if문으로 처리해준다면 span 태그의 경우, p 와 div 태그의 알림메세지까지 총 3번이 뜰 것이고, p 태그의 경우, div 태그의 알림메세지까지 총 2번이 뜰 것이다. 이러한 이벤트 버블링 문제를 막기 위해 다음과 같이 해결한다. [ 해결방법 ] 1...
[jQuery] 연예인 프로필 만들기 - 저장소인 storage 이용하기 ※ [Quiz] 아래와 같이 연예인 프로필을 만드시오. ※ 맨처음에는 버튼3개(김태희, 아이유, 박보영)는 희미하게 보이고, 사진은 아예 안보인다. 특정 버튼에 마우스가 올라가면 그 버튼만 원래광도로 띄면서 내용은 클릭하세요로 변경된다. 그리고 동시에 버튼아래에 그 사람의 사진만 희미하게 보인다. 특정버튼을 클릭하면 그 사람의 큰사진이 원래광도로 띈다. 그리고 동시에 그 사람의 사진아래에 프로필 약력이 보이고, "프로필 더보기" 버튼이 보여진다. "프로필 더보기" 버튼을 클릭하면 "프로필 더보기" 버튼을 삭제하고 "프로필 닫기" 버튼을 생성하여 바뀌면서 프로필 정보를 더 보여준다. "프로필 닫기" 버튼을 클릭하면 "프로필 닫기" 버튼을 삭제하고 "프로필 더보기" 버튼을 생성하여 바뀌면서 프로필 정보는 없..
[jQuery] 하위요소(하위태그) 찾는 children(), find() 1. 선택자.children() : 선택자의 자식태그(자식요소)만을 가리키는 것이다. 손자태그(손자요소) 는 가리키지 않는다. $("div#container").children().css({'border':'solid 1px red', 'margin':'20px'}); // 선택자의 자식(손자는 아님)태그(자식요소)만을 가리키는 것이다. 2. 선택자1.find(선택자2) : 선택자1 안에 있는 선택자2 를 가리키는 것이다. 자식뿐만 아니라 손자태그까지도 모두 가리킬 수 있다. 여기서 선택자2 는 지정한 자식 또는 손자태그를 의미한다. ** &nbsp : 공백을 줄 때 사용한다. $("div#container").find(".baseball").append(" 야구는 영어로 Baseball"); // ap..
[jQuery] 태그 내용 추가하기 prepend(), append() 및 제거하기 empty(), remove() 1. 선택자.prepend("내용물"); : 내용물을 선택자 앞(위)쪽 방향으로 덧붙여 가는 것이다. $("div.div1").prepend(`${cnt}.${lovecountrysong}`); // 내용물을 선택자 앞(위)쪽 방향으로 덧붙여 가는 것. 2. 선택자.append("내용물"); : 내용물을 선택자 뒤(아래)쪽 방향으로 덧붙여 가는 것이다. $("div.div2").append(`${cnt}.${lovecountrysong2}`); // 내용물을 선택자 뒤(아래)쪽 방향으로 덧붙여 가는 것. 3. 선택자.empty(); : 선택자 태그속에 들어있는 내용물을 비우는 것이다. 해당 태그 자체는 존재하지만, 화면에서 비워버리는 것이다. $("div.div1").empty(); // 선택자 태그속에..
[jQuery] 인물 사진 보이기/감추기 - 3가지 방식 ※ css 속성은 3가지 방식 모두 동일하게 적용한다. ※ html 도 3가지 방식 모두 동일하게 적용한다. 1. mouseover / mouseout , 선택자.attr("속성") / 선택자.prop("속성") 이용하기 mouseover / mouseout 및 선택자.attr("속성") / 선택자.prop("속성") 방식을 이용해서 인물 사진 보이기/감추기를 만든다. 또한, 아래의 구문을 참고하도록 하자. 1. mouseover / mouseout 함수생성 및 구현하기 방식 $("span.buttons").mouseover(function(e) { }); // 버튼에 마우스 커서가 올라간다면, $("span.buttons").mouseout(function(e){ }); ..
[jQuery] 랜덤 뽑기 - event.target 및 unbind $(document).ready(function() { // $(document).reday( function() {}); 문서가 로딩되자마자 함수를 실행한다. $("div#result").hide(); // 시작할때 div#result 태그를 숨기고 시작한다. $("span.buttons").bind('click', function(e) { // 자바스크립트에서 addEventLister('click', function() {})와 유사하다. // 즉, 버튼을 클릭이벤트와 묶어서 클릭을 하면 이벤트가 적용되도록 한다. const n_random = Math.floor( Math.random()*(5-1+1) ) + 1; // n_random 은 1 ~ 5 까지 중 하나이다. const user_choi..

티스토리툴바