CODING FACTORY

Category : jQuery

jQuery / Reference / .slideUp()

목차1 개요2 문법3 예제 14 예제 25 예제 36 예제 4 개요 .slideUp()는 선택한 요소를 위쪽으로 서서히 사라지게 합니다. 문법 .slideUp( [duration ] [, easing ] [, complete ] ) duration 요소가 사라질 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다. fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다. […]

jQuery / Tutorial / input 값 변화 감지하는 방법

input 요소에 값을 입력하거나 선택했을 때, 이를 감지하여 어떤 작업을 할 수 있습니다. input의 type이 number일 때, checkbox일 때, radio일 때로 나누어서 어떻게 감지하는지 알아봅니다. 목차1 input type="number"1.1 change()로 감지하기1.2 keyup()으로 감지하기1.3 on()2 input type="checkbox"3 input type="radio" input type="number" 숫자를 입력할 수 있는 폼 두 개를 만들고, 값을 입력했을 때 […]

jQuery / Tutorial / 천 단위 쉼표 만드는 방법

예제 1 텍스트로 출력된 숫자에 천 단위 쉼표를 넣습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> $( document ).ready( function() { $( '#jb' ).text( $( '#jb' ).text().replace( /\,/g, '' ).replace( /(\d)(?=(?:\d{3})+(?!\d))/g, '$1,' ) ); } ); </script> <style> body { font-family: Consolas; font-size: 40px; } </style> […]

jQuery / Reference / .find()

목차1 개요2 문법3 예제4 참고 개요 .find()는 어떤 요소의 하위 요소 중 특정 요소를 찾을 때 사용합니다. 문법 .find( selector ) 예를 들어 다음은 h1 요소의 하위 요소 중 span 요소를 선택합니다. $( 'h1' ).find( 'span' ) 예제 클래스 값으로 b를 갖는 p 요소의 하위 요소 중 클래스 값으로 ip를 […]

jQuery / Reference / .empty()

목차1 개요2 문법3 예제4 참고 개요 .empty()는 선택한 요소의 내용을 지웁니다. 내용만 지울 뿐 태그는 남아있다는 것에 주의합니다. 문법 .empty() 예를 들어 다음과 같은 h1 요소가 있을 때 <h1>Lorem</h1> 다음과 같이 하면 $( 'h1' ).empty() 다음처럼 바뀝니다. <h1></h1> 예제 버튼을 클릭하면 p 요소의 내용이 지워집니다. <!doctype html> <html lang="ko"> <head> […]

jQuery / Reference / .remove()

목차1 개요2 문법3 예제4 참고 개요 .remove()는 선택한 요소를 HTML 문서에서 제거합니다. 문법 .remove( [selector] ) 특정 선택자를 가진 요소를 제거할 때는 괄호 안에 선택자를 넣습니다. 예를 들어 다음은 클래스 값으로 rm을 가진 p 요소를 제거합니다. $( 'p' ).remove( '.rm' ); 다음과 같이 해도 결과는 같습니다. $( 'p.rm' ).remove(); 예제 […]

jQuery / Reference / .attr()

목차1 개요2 문법 1 - 속성의 값 가져오기3 문법 2 - 속성 추가하기4 예제 1 - 속성의 값 가져오기5 예제 2 - 속성 추가하기6 참고 개요 .attr()은 요소(element)의 속성(attribute)의 값을 가져오거나 속성을 추가합니다. 문법 1 - 속성의 값 가져오기 .attr( attributeName )  예를 들어 아래는 div 요소의 class 속성의 값을 […]

jQuery / Reference / .removeAttr()

목차1 개요2 문법3 예제4 참고 개요 .removeAttr()은 선택한 요소의 특정 속성을 제거합니다. 문법 .removeAttr( attributeName ) 예를 들어 아래는 h1 요소에서 title 속성을 제거합니다. $( 'h1' ).removeAttr( 'title' ); 예제 버튼을 클릭하면 input 요소의 placeholder 속성을 제거합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> * { font-size: 40px; […]

jQuery / Reference / .toggleClass()

목차1 개요2 문법3 예제4 참고 개요 .toggleClass()로 선택한 요소에 클래스 값을 넣었다 뺐다 할 수 있습니다. 문법 .toggleClass( className ) 예를 들어 다음은 p 요소에 xyz 클래스가 없으면 추가하고, 있으면 제거합니다. $( 'p' ).toggleClass( 'xyz' ); 예제 버튼을 클릭하면 h1 요소에 ab 클래스 값이 추가되어 배경색이 생기고, 다시 버튼을 클릭하면 […]

jQuery / Reference / .removeClass()

목차1 개요2 문법3 예제4 참고 개요 .removeClass()로 선택한 요소에서 클래스 값을 제거할 수 있습니다. 문법 .removeClass( className ) 클래스 값은 큰 따옴표 또는 작은 따옴표로 감쌉니다. $( 'h1' ).removeClass( 'abc' ); 띄어쓰기로 구분하여 여러 개의 값을 제거할 수 있습니다. $( 'h1' ).removeClass( 'ab cd ef' ); 페이지가 로드된 상태에서 클래스 […]