버튼을 눌러서 글자가 사라지게 하기. 또는 사라졌던 글자가 나타나게 하기. removeClass(), addClass()를 사용한다 실행화면 ㅅ visibility - 공간을 남겨두고 글자를 안보이게 한다 display - 공간까지 없어진다. 글자를 안 보이게 버튼 누를 때마다 글자 공간이 없어져 버튼까지 위로 올라간다 코드분석 $('#my-btn1, #my-btn2').click(function(e) {}); -> 콜백함수 function(e) 에서 'e'는 이벤크를 의미한다. 클릭하면서 이벤트를 매개변수로 보내준다. this 키워드의 id 속성을 변수 btnId에 저장한다. if 조건문으로 객체의 id가 'my-btn1'인지 'my-btn2'인지 판단한다. this 키워드 아래에 'console.lo..

체크박스에 체크해서 입력란에 입력된 데이터 형태를 password -> text 그리고 text -> password 로 바꾸기 실행결과 코드분석 버튼을 클릭했을 때 password가 text로 속성이 바뀌게 하기 위해 클릭이벤트를 선언했다. (10번 줄) 체트박스 체크했을 때 입력란 데이터 형태가 바뀌게 하기 위해 change 이벤트를 선언하고 동작은 똑같이 입력란의 속성을 바꾸는 것이므로 같은 함수를 호출했다. (myFunc() 호출) (15번줄) 각 이벤트에서 myFunc()함수를 호출할 때, this 키워드를 매개변수로 보내 jQuery 객체를 myFunc()에서 전달받게 한다. 입력란이 1개이므로 클릭버튼과 체크박스를 구별하여 클릭버튼을 누르면 입력란 속성이 바뀌게 하고 체크박스를 체크했을 때 ..

이전, 다음 버튼을 눌러 이미지가 바뀌게 하기 내 코드 시작버튼을 눌러 자동으로 이미지가 계속 바뀌게 하기 - 이미지 계속 바뀌려면 setInterval()을 사용해야 한다 종료버튼을 눌러 바뀌던 이미지가 멈추게 하기 - clearInterval(참조변수)사용한다 이미지 경로를 객체로 선언한 코드 코드분석 이미지 경로를 객체로 선언하여 저장했다. 객체의 키를 불러와 키의 인덱스를 index 변수에 저장했다. 키의 인덱스를 불러오기 위해 변수명.indexof("키")함수를 사용했다. 실행화면 코드분석 img 태그의 src 속성에 대입할 이미지 경로를 배열로 선언했다 -> imgsList 배열의 인덱스처럼 사용할 now 변수를 선언했다. clearInterval()를 사용하기 위해 imgChange를 선언하..

jQuery객체명.val() - 사용자가 입력한 값을 가져온다. jQuery객체명.val("새로운 값") - 새로운 값으로 설정한다. 코드분석 10번줄 - input 태그의 "김사장"이 input 변수에 저장된다. 11번줄 - 콘솔로 저장된 "김사장"이 출력된다. 12번줄 - input 객체에 "박회장"을 설정한다. 13번줄 - 새로 설정된 데이터가 input 변수에 저장된다 14번줄 - 콘솔에 "박회장"이 출력된다. jQuery객체명.attr("속성"); -> 속성의 값을 가져온다. jQuery객체명.attr("속성", "새로운 데이터"); -> 속성의 값을 새로운 데이터로 설정한다. attr() vs val() jQuery click 이벤트 , DOM click 이벤트 jQuery객체명.click()..

선택자 $("태그명:even") - 0부터 짝수번째 요소만 선택되어 css가 적용된다 $("태그명:odd") - 1부터 홀수번째 요소만 선택되어 css가 적용된다 jQuery로 slice 함수로 지정된 요소만 css 적용하기 DOM으로 함수로 지정된 요소만 css 적용하기 - jQuery처럼 만들어진 함수를 사용하지 않고 함수를 만들어 시작 인덱스, 끝 인덱스를 선언해서 시작 인덱스부터 끝 인덱스까지 요소를 불러온다 jQuery객체명.width() - 선택된 객체의 width 를 불러온다 = getAttribute("속성"); jQuery객체명.width('value') - 선택된 객체의 width에 'value'로 지정할 수 있다. = setAttribute("속성", "데이터"); 코드분석 setIn..

*("상위요소 > 하위요소") - 상위요소에서 가장 가까운 하위요소가 한 개만 선택되어 css가 적용된다. *("상위요소 하위요소") - 하위요소가 태그인 경우, 상위요소 아래에 있는 모든 하위요소가 선택되어 css 적용된다. jQuery객체명.children() - jQuery 객체의 모든 하위 요소를 불러온다. 아래 코드에서 section 태그 하위요소 , 가 선택되어 css가 적용되었다. jQuery객체명.prev() - 객체의 형제요소중 이전 요소를 불러온다. jQuery객체명.next() - 객체의 형제요소중 다음 요소를 불러온다. 객체명.nextUntil("아이디") -> nextUntil()로 지정된 요소는 제외되고 선택된 객체에서 다음요소를 불러온다 (왼쪽 코드) 객체명.prevUntil(..