JQUERY (제이쿼리) 이정도는 알아두자 [기초, 기본 함수 정리]

JQUERY (제이쿼리) 이정도는 알아두자 [기초, 기본 함수 정리]

 

 

안녕하세요 오늘은 제이쿼리에 대해서 알려드리고자 합니다. 

오늘은 제이쿼리 이정도는 알아두자로써 기초적이고 기본적인 설명을 합니다.

사실 오늘 설명하는 부분은 내일 설명할 SELECTBOX , INPUT=RADIO , INPUT=CHECKBOX에 필요한 기본 정보들을 

다시 한번 정리하는 포스팅입니다.

 

 

이제 시작합니다.

먼저 제이쿼리는 기본적으로 ID , NAME, CLASS를 이용하여 해당 위치에 접근하게 됩니다.

먼저 ID, NAME, CLASS에 대해서 알아봅시다.

ID는 페이지상에서 유일한 값으로 해당 태그에 부여된 고유한 이름입니다. NAME은 이름이므로 CHECKBOX, RADIO인 경우 사용되며 중복이 가능합니다. CALSS는 그룹이라고 생각하시면 됩니다. 여러 태그에 공통된 이름을 부여하고 싶을 때 씁니다. 

 

ID를 이용한 제이쿼리는 $("#KGON_ID").val(); 이렇게 사용합니다.

NAME을 이용한 제이쿼리는 $("INPUT[NAME='KGON_NAME']").val(); 이렇게 사용합니다. 

CLASS를 이용한 제이쿼리는 $(".KGON_CLASS").val(); 이렇게 사용합니다.

[단, NAME은 앞에 해당 NAME의 태그를 정의해줍니다. ]

 

 

다음으로 많이 쓰는 제이쿼리 함수들을 설명해봅니다.

 

첫번째로 VAL() 함수가 있습니다. 이 함수는 요소들의 값을 정의하거나 , 가져올 때 많이 사용하는 함수입니다. 

$("#KGON").val(3)은 KGON이라는 이름을 가진 ID의 VALUE값을 3으로 정의합니다. 

$("#KGON").val();은 KGON이라는 이름을 가진 ID의 VALUE값을 가져옵니다.

 

두번째로는 TEXT()함수가 있습니다. 이 함수는 문자열을 정의하거나, HTML태그를 제외한 문자열을 가져올 때 많이 사용하는 함수입니다. 

$("#KGON").text("케이곤");은 KGON이라는 이름을 가진 ID에 케이곤이라는 문자열을 정의합니다. 

$("#KGON").text();은 KGON이라는 이름을 가진 ID에 HTML태그를 제외한 문자열을 가져옵니다. 

 

세번째로는 HTML()함수가 있습니다. 이 함수는 HTML태그를 포함하여 정의하거나, HTML태그를 포함한 문자열을 가져올 때 많이 사용하는 함수입니다.

$(".KGON").html("<H1>케이곤</H1>"); KGON이라는 클래스를 가진 CLASS에 <H1>케이곤</H1>이라는 HTML 태그를 포함한 문자열을 정의합니다. 

$(".KGON").html(); KGON이라는 클래스를 가진 CLASS에서 HTML태그를 포함한 문자열을 가져옵니다.

 

네번째로는 APPEND()함수가 있습니다. 이 함수는 요소의 마지막에 자식요소를 추가해 주는 함수입니다.

$("#KGON").append("<option value="kgon3">케이곤3</option>"); KGON이라는 이름을 가진 ID의 마지막자식요소로 <option value="kgon3">케이곤3</option>을 추가합니다. 

 

다섯번째로는 PREEND()함수가 있습니다. 이 함수는 요소의 처음에 자식요소를 추가해주는 함수입니다.

$("#KGON").preend("<option value="kgon0">케이곤0</option>"); KGON이라는 이름을 가진 ID의 처음자식요소로 <option value="kgon0">케이곤0</option>을 추가합니다. 

 

 

1,2,3번째 함수는 비슷하면서도 다르니 상황에 따라 다르게 써야합니다. 

VALUE값이 존재하는 INPUT이나 SELECT 등에서는 VAL() 함수를 사용하고

VALUE값이 존재하지 않는 DIV, SPAN 등에서는 TEXT()함수, HTML()함수를 사용합니다.

TEXT()함수와 HTML()함수는 HTML 태그 사용유무에 따라 구분됩니다. 

 

4,5번째 함수는 맨 앞에 추가할지 맨뒤에 추가할지에 따라서 구분해서 씁니다.  

 

 

여섯번째로는 ATTR()함수가 있습니다. 이 함수는 요소들 중에서 제일 처음 요소의 값을 가져옵니다. 요소의 개별적 속성이 알고 싶다면 ATTR() 함수안에 알고 싶은 속성을 적어줍니다. A, B 두가지 값을 나열하면 A속성에 B값을 정의합니다. 

$("#KGON").attr("type","checkbox"); KGON이라는 이름을 가진 ID의 type속성을 checkbox로 정의합니다. 

$("#KGON").attr("type",); KGON이라는 이름을 가진 ID의 type속성의 값을 가져옵니다. 

 

일곱번째로는 REMOVE()함수가 있습니다. 이 함수는 해당 요소의 모든 부분을 제거합니다. 요소 뿐 아니라 요소에 연관된 이벤트, 데이터도 제거합니다.  SELECT태그에서 OPTION을 초기화할떄 많이 씁니다. 

$("#KGON").remove(); KGON이라는 이름을 가진 ID의 요소들을 모두 제거합니다. 

 

여덟번째로는 PROP()함수가 있습니다. 이 함수는 CHECKED값을 정의하거나 값을 가져올때 씁니다. 

$("INPUT[name='kgon']").prop("checked", true); kgon이라는 이름을 가진 NAME에 checked값을 true로 정의합니다. 

$("INPUT[name='kgon']").prop("checked");kgon이라는 이름을 가진 NAME의 checked값을 가져옵니다.

 

아홉번째로는 IS()함수가 있습니다. 이 함수는 참/ 거짓값을 알려주는 함수입니다. 

보통 $("#kgon").is("checked")와 같은 방법으로 많이 씁니다.

 

열번째로는 REMOVEATTR()이 있습니다. 이 함수는 속성을 제거하는 함수입니다. 

보통 attr의 속성들을 제거할 때 많이 씁니다. 

 

열한번째로는 LENGTH가 있습니다. LENGTH는 함수가 아닙니다. 해당 요소의 전체 개수를 알려줍니다.

$(".kgon").length;로 사용하며 해당 요소의 개수를 리턴합니다.

 

 

이상입니다.

 

위의 ID , CLASS , NAME의 정의와 제이쿼리 사용법과 함께

 

11가지 함수의 정의들도 알고 있으면 

 

내일 알려드릴 SELECT 태그, INPUT_RADIO , INPUT_CHECKBOX제어에 유용한 방법들을 

 

쉽게 이해할 수 있습니다. 

 

내일 포스팅을 보기 전에 3번정도 정독하여 이해하시기 바랍니다.

 

감사합니다.