jQuery
-
jQuery - .wrapAll()jQuery 2020. 6. 23. 19:55
.wrapAll() - 선택한 요소 모두를 새로운 태그로 감싼다. 문법 .wrapAll( wrappingElement ) 예를 들어 $( 'p' ).wrap( '' ); 예제1 - .wrap() 선택한 요소에 각각 적용된다. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. 즉, 다음처럼 만든다. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. 반면 .wrapAll()은 선택한 요소를 모아서 하나의 태그로 둘러싼다. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. 즉, 다음처럼 만든다. Lorem ipsum dolor. Lorem ipsum dol..
-
jQuery - .val()jQuery 2020. 6. 23. 19:49
.val() - 양식(form)의 값을 가져오거나 값을 설정하는 메소드 문법1 .val() 선택한 양식의 값을 가져온다. 예를 들어 var jb = $( 'input#jbInput' ).val(); 문법2 .val( value ) 선택한 양식의 값을 설정한다. 예를 들어 $( 'input#jbInput' ).val( 'ABCDE' ); 는 아이디가 jbInput인 input 요소의 값을 ABCDE로 설정한다. 예제1 - 양식에 텍스트를 입력하고 버튼을 클릭하면 입력한 값을 출력한다. Click 예제2 - select 양식에서 값이 바뀌면, 그 값을 출력한다. One Two Three 예제3 - 버튼을 클릭하면 input의 값을 ABCDE로 설정한다. Click
-
jQuery - .width()jQuery 2020. 6. 23. 19:43
.width() - 선택한 요소의 가로 크기를 반환하거나, 가로 크기를 변경한다 문법1 .width() 선택한 요소의 가로 크기를 반환한다. 예를 들어 var jbVar = $( 'p' ).width(); 는 p 요소의 가로 크기를 변수 jbVar에 저장한다. 문법2 .width( value ) 선택한 요소의 가로 크기를 변경한다. 예를 들어 $( 'h1' ).width( '100px' ); 는 h1 요소의 가로 크기를 100px로 만든다. 예제1 - 선택한 요소의 가로 크기를 출력한다. 가로 크기를 %로 지정해도 반환되는 값의 단위는 px이다. A - 600px B - 50% 예제2 버튼을 클릭하면 요소의 가로 크기가 변한다. To 500px Click To 50% Click
-
jQuery - .toggleClass()jQuery 2020. 6. 23. 19:39
.toggleClass() - 선택한 요소에 클래스(Class)값을 넣었다 뺐다 할 수 있다. 문법 .toggleClass( className ) 예를 들어 $( 'p' ).toggleClass( 'xyz' ); 는, p 요소에 xyz 클래스가 없으면 추가하고, 있으면 제거한다. 예제 - 버튼을 클릭하면 h1 요소에 ab클래스 값이 추가되어 배경색이 생기고, 다시 버튼을 클릭하면 ab 클래스 값이 제거되어 배경식이 사라진다. Click Lorem Ipsum Dolor
-
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..