JQuery : 기본 사용

JQuery 기본 문법

* $ 는 JQuery의 문법을 사용자는 정의 표현을 뜻한다.

* #은 ID값을 가진 HTML 요소를 선택하라는 의미가 되고 . 은 Class값을 선택하라는 뜻이다.

JQuery 코드 생산성

 - Befor 1 : DOM 사용 시

document.getElementById('id');

 - After 1 : JQuery 사용 시

$('#id');

 - Befor 2 : DOM 사용 시

var lis = document.getElementByTagName('li');
  for( var i = 0 ; i < lis.length ; i++ ){
    lis[i].style.color = 'red';
  }

 - After 2 : JQuery 사용 시

$('li').css('color', 'red')    
        <input type="button" value="execute" onclick="$('li').css('color', 'red')" />

 

HTML 엘리먼트 선택 후 할 수 있는 일

1. CSS Style 변경

$('li').css('color', 'red');

* css는 석택자에 해당하는 객체들의 style에 color:red로 변경한다.

=> CSS의 선택자 li를 전달하면 JQuery는 객체를 리턴한다. 이 객체는 선택자에 해당하는 엘리먼트를 제어하는 다양한 메소드를 가지고 있다. 

2. 웹페이지에 Content 추가/삭제

$('#content').html('<p> p태그가 안에 추가 된다</p>');

* content라는 ID를 가진 요소의 내용을 변경한다.

$('#content').append('<p> p태그가 뒤에 추가 된다</p>');

* content라는 ID를 가진 요소 뒤에 내용을 추가한다.

$('#content').prepend('<p> p태그가 앞에 추가 된다</p>');

* content라는 ID를 가진 요소 앞에 내용이 추가된다.

$('#content').load('외부 문서 주소');

* content라는 ID를 가진 요소 안에 외부 문서를 불러온다.

3. 태그의 속성 변경

<a id="LINK" href="www.naver.com">     //원래의 <a>태그 href 속성

  $('#ILINK')attr("href","www.daum.com);    // JQuery로 태그의 속성 변경

=> <a id="LINK" href="www.daum.com">    //변경된 속성

4. 엘리먼트 이벤트 추가 

 - 클릭

$('#id').click( function() { 처리될 내용 }

- 마우스오버

$('#id').hover( function(){ 마우스 over시 처리내용}, function() { 마우스 out시 처리내용 });

5. HTML 요소의 숨김과 해제

 - 숨김

$('#id').hide();

$('#id').fadeOut();    //1초의 애니메이션 효과 fadeOut(5000)이면 5초

 - 해제

$('#id').show();

$('#id').fadeIn();