JQUERY (제이쿼리) 빈도높은 명령어

JQUERY (제이쿼리) 자주 사용하는 명령어

오늘은 javascript에서 제일 많이 사용하는 jquery에 대해서 알아봅시다.

jquery(제이쿼리) 는 javascript에서 제일 유명한 라이브러리입니다.

jquery(제이쿼리)를 사용하면서 빈도수가 높은 명령어들을 정리해보았습니다.

0. jquery(제이쿼리)에 앞서

- ID는 이름입니다. [페이지내에서 같은이름의 ID는 1개만 존재 ]

- CLASS는 그룹입니다. [페이지내 같은이름의 CLASS는 여러개 존재가능]

1.  jquery(제이쿼리) 사용법

- $("selector").val() 이런 모양으로 사용합니다.

- id :  #으로 표시합니다. ex) #kgon

- class : .으로 표시합니다. ex) .kgon

2.  ATTR

- ATTR명령어는 지칭 부분의 속성값을 가져오거나 설정할때 사용합니다.

- $("#kgon").attr(A);

=> ID kgon의 A속성값을 가져옵니다. 

- $("#kgon").attr(A.B);

=> ID kgon의 A속성값에 B값을 설정합니다. 

- $(".kgon").attr(A);

=> CLASS kgon의 A속성값을 가져옵니다. 

- $(".kgon").attr(A.B);

=> CLASS kgon의 A속성값에 B값을 설정합니다. 

ex)     

$("#kgon").attr("src");    

$("#kgon").attr("src","www.daum.net");

3.  APPEND

- APPEND명령어는 지칭 부분의 마지막 부분에 내용을 추가할때 사용합니다.

- $("#kgon").append(A);

=> ID kgon의 마지막 부분에 A를 추가합니다.

- $(".kgon").append(A);

=> CLASS kgon의 마지막 부분에 A를 추가합니다.

ex)

$("#kgon").append("<div>KGON</div>");

 

4. HTML

- HTML명령어는 지칭부분에 A를 넣을 때 사용합니다.(HTML태그 인식, 덮어쓰기)

- $("#kgon").html(A);

=> ID kgon에 A를 넣습니다.(덮어쓰기)

ex) 

$("#kgon").html("<div>KGON</div>");

# APPEND와 HTML의 차이는??

=> APPEND명령어는 기존부분 유지한 상태에서 마지막에 추가

=> HTML명령어는 기존부분 무시하고 덮어쓰기

5. TEXT

- TEXT명렁어는 지칭 부분의 텍스트를 가져오거나 설정(HTML태그인식X)할 때 사용합니다. 

- $("#kgon").text();

=> ID kgon의 text를 가져옵니다.

- $("#kgon").text(A);

=> ID kgon의 text에 A를 설정합니다.

ex)

$("#kgon").text();

$("#kgon").text("케이곤");

# HTML과 TEXT의 차이는??

-> HTML명령어는 HTML 태그를 인식합니다.

-> TEXT명렁어는 HTML태그를 인식하지 못합니다. 

6. VAL

- VAL명령어는 지칭 부분의 VALUE값을 가져오거나 설정할때 사용합니다.

- INPUT , SELECT의 VALUE값을 가져올때 사용합니다.

- $("#kgon").val();

=> ID kgon의 value값을 가져옵니다.

- $("#kgon").val(A);

=> ID kgon의 value값에 A를 설정합니다.

ex) 

$("#kgon").val("케이곤");

7. WIDTH

- WIDTH명령어는 지칭 부분의 가로(넓이)값을 가져오거나 설정할때 사용합니다.

- $("#kgon").width();

=> ID kgon의 width값을 가져옵니다.

- $("#kgon").width(A);

=> ID kgon의 width값에 A를 설정합니다. 

ex) 

$("#kgon").width("100px");

8. HEIGHT

- HEIGHT명령어는 지칭 부분의 세로(높이)값을 가져오거나 설정할때 사용합니다.

- $("#kgon").height();

=> ID kgon의 height값을 가져옵니다.

- $("#kgon").height(A);

=> ID kgon의 height값에 A를 설정합니다.

ex) 

$("#kgon").height("100px");

9. CSS

- CSS명령어는 지칭 부분의 STYLE값을 가져오거나 설정할때 사용합니다.

- $("#kgon").CSS(A);

=> ID kgon의 STYLE A속성값을 가져옵니다. 

- $("#kgon").CSS(A,B);

=> ID kgon의 STYLE A속성값에 B를 설정합니다.

     ex)

$("#kgon").css("color");

$("#kgon").css("color","red");

10. SHOW

- SHOW명령어는 지칭 부분을 보여줄때 사용합니다.

- $("#kgon").show();

=> ID kgon을 보여줍니다.

11. HIDE

- HIDE명령어는 지칭 부분을 숨길 때 사용합니다.

- $("#kgon").hide();

=> ID kgon을 숨깁니다.

# SHOW와 HIDE의 차이는??

=> HIDE로 숨긴 부분을 다시 보여주고 싶을때 SHOW를 사용합니다.

=> 보여주는 부분을 숨기고 싶을때 HIDE를 사용합니다.

12. READY

- HTML이 노출된 이후에 실행됩니다.

- CLICK, CHANGE 등 HTML노출된 후 이벤트 설정이 필요할때 사용합니다.

- $(docuemnt).ready(A);

=> 화면이 로드되면 A를 실행합니다. 

ex)

$(document).ready(function(){

내용

});

13. CLICK

- CLICK명령어는 지칭부분을 클릭했을 때 실행되는 이벤트입니다.

- $("#kgon").click(A);

=> ID kgon을 클릭했을 때 A가 실행됩니다. 

ex)

$("#kgon").click(function(){

alert("클릭");

});

14. CHANGE

- CHANGE명령어는 VALUE값이 변경되었을때 실행되는 이벤트입니다.

- INPUT , SELECT 의 vALUE값이 변경되었을때 실행됩니다. 

- $("#kgon").change(A);

=> ID kgon의 VALUE값이 변경되면 A를 실행합니다.

ex) $("#kgon").chagne(function(){

alert("값이 변경되었습니다.");

});

15. HOVER

- HOVER명령어는 지칭부분에 마우스커서가 포함될때 미포함될때 이벤트를 실행합니다. 

- $("#kgon").hover(A,B);

=> ID kgon에 마우스커서가 포함되면 A가 실행 미포함되면 B가 실행됩니다.

ex) 

$("#kgon").hover(

function(){

alert("포함");

},

function(){

alert("미포함");

}

);