전체 글
-
jQuery - .toggle()jQuery 2020. 6. 23. 19:37
.toggle() - 선택한 요소가 보이면 보이지 않게, 보이지 않으면 보이게 한다. 문법 .toggle( [duration ] [, complete ] ) duration - duration에는 완전히 나타날 때까지의 시간이 들어갑니다. fast, slow로 정하거나 400 같은 숫자로 정할 수 있습니다. 숫자일 경우 단위는 1000분의 1초이며, fast는 200, slow는 600에 해당합니다. 아무것도 입력하지 않으면 기본값 400으로 설정됩니다. 문자로 시간을 정의할 때는 싱글 쿼테이션 안에 문자를 넣고, 숫자로 시간을 정할 때는 숫자만 넣는다. .toggle( 'slow' ) .toggle( 600 ) complete - complete에는 지정한 요소가 나타난 다음 불러올 함수가 들어간다. ..
-
jQuery - .text()jQuery 2020. 6. 23. 19:33
.text() - text()는 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꾼다. .html()과 비슷하지만 태그의 처리가 다르다. 문법1 .text() 선택한 요소 안의 내용을 가져온다. 태그는 가져오지 않는다. 예를 들어 var jb = $( 'h1' ).text(); 는 h1 요소의 내용을 변수 jb에 저장한다. 문법2 .text( textString ) 이전 내용을 지우고 새로운 내용을 넣는다. 예를 들어 $( 'div' ).html( 'Lorem' ); 는 div 요소의 내용을 Lorem 로 바꾼다. HTML 태그는 텍스트로 처리한다. 예제1 - div 요소 안의 내용을 가져와서 그 내용을 출력한다. div요소가 여러개 있으면 모든 내용을 가져온다. HTML 태그는 제외한다는 것이 중..
-
jQuery - .slideUp()jQuery 2020. 6. 23. 19:29
.slideUp() - 선택한 요소를 위쪽으로 서서히 사라지게 한다. 문법 .slideUp( [duration ] [, easing ] [, complete ] ) duration - 요소가 사라질 때까지 걸리는 시간. 단위는 1/1000초, 기본값은 400 - fast나 slow로 정할 수 있다. fast는 200, slow 600에 해당한다. easing - 요소가 사라지는 방식을 정한다. - swing과 linear가 가능하며, 기본값은 swing이다. complete - 요소가 사라진 후 수행할 작업을 정한다. 예제1 - 버튼을 클릭하면 파란색 배경의 div 요소가 위쪽으로 사라진다. Click 예제2 - 사라지는 속도를 비교하는 예제이다. 왼쪽 요소의 사라지는 시간은 400, 오른쪽 요소는 12..
-
jQuery - .slideToggle()jQuery 2020. 6. 23. 19:22
.slideToggle() - 보이지 않는 요소는 아래쪽으로 서서히 나타나게 하고, 보이는 요소는 위쪽으로 서서히 사라지게 한다. 문법 .slideToggle( [duration ] [, easing ] [, complete ] ) duration - 요소가 나타나거나 사라질때까지 걸리는 시간, 단위는 1/1000초, 기본값은 400 - fast나 slow로 정할 수 있다. fast는 200, slow는 600 easing - 요소가 나타나거나 사라지는 방식을 정한다. - swing 이나 linear가 가능하며, 기본값은 swing이다. complete 요소가 나타나거나 사라진 후 수행할 작업을 정한다. 예제1 - 버튼을 클릭하면 파란색 배경의 div요소가 아래쪽으로 나타나고, 다시 클릭하면 위쪽으로 사..
-
jQuery - .slideDown()jQuery 2020. 6. 23. 19:18
.slideDown() - 선택한 요소를 아래쪽으로 서서히 나타나게 한다. 문법 .slideDown( [duration ] [, easing ] [, complete ] ) duration - 요소가 나타날 때까지 걸리는 시간. 단위는 1/1000초, 기본값은 400 - fast나 slow로 정할 수 있다. fast 는 200, slow는 600 easing - 요소가 나타나는 방식을 정함 - swing과 linear가 가능하며, 기본값은 swing complete - 요소가 나타난 후 수행할 작업을 정한다. 예제1 - 버튼을 클릭하면 파란색 배경의 div 요소가 아래쪽으로 나타난다. Click 예제2 - 나타나는 속도를 비교하는 예제. 왼쪽 요소의 나타나는 시간은 400, 오른쪽 요소는 1200 Cli..
-
jQuery - .slice();jQuery 2020. 6. 23. 19:13
.slice() - 일치하는 요소의 일부분만 선택한다. 문법 .slice( start [, end ] ) 예를 들어 $( 'li' ).slice( 2 ).css( 'color', 'red' ); 는 li 요소 중 3번째부터 빨간색으로 만든다. $( 'li' ).slice( 2, 5 ).css( 'color', 'red' ); 는 li 요소 중 3번재부터 5번째까지 빨간색으로 만든다. $( 'li' ).slice( -4, -2 ).css( 'color', 'red' ); 는 뒤에서 4번째부터 뒤에서 3번째까지 빨간색으로 만든다. 예제 One Two Three Four Five One Two Three Four Five
-
jQuery - .scrollTop()jQuery 2020. 6. 23. 18:20
.scrollTop() - 선택한 요소의 스크롤바 수직 위치를 반환하거나 스크롤바 수직 위치를 정한다. 문법1 .scrollTop() 스크롤바 수직 위치를 가져온다. 예를 들어 $( 'div' ).scrollTop(); 문법2 .scrollTop( value ) 스크롤바 수직 위치를 정한다. 예를 들어 $( 'div' ).scrollTop( 300 ); 은 div 요소의 스크롤바 위치를 위에서 300px로 정한다. 예제1 - 버튼을 클릭하면 div 요소의 스크롤바 위치를 알려주는 예제 스크롤바를 움직이고 버튼을 클릭하면 값이 변한다. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus laci..