본문 바로가기
Web Programing!/JQuery

[JQUERY] JQuery의 기본 속성

by 어설픈봉봉이 2011. 9. 6.
반응형
SMALL




사용해보기.

프로토타입, 도조 등 많은 비슷한 스크립트 라이브러리들이 있지만 요세 대세?
가벼우면서 막강한 JQuery를 사용해봅시다.
각 포털사이트에서 JQuery를 검색해보면 JQuery는 홈페이지에서 다운로드 할 수 있습니다.


*해당 엘리먼트 접근하기

일반 : document.getElementById("id");
         JQuery : $("#id");    
 
      - 엘리먼트의 ID 접근시 #, class 접근시 .


*해당 엘리먼트의 값 접근하기

일반 : document.getElementById("id").value;
         JQuery : $("#id").val(); 

      - 엘리먼트의 값을 대입하고 싶다면 $("#id").val("값");


*해당 엘리먼트의 개체를 비교하여 true/false를
 알려주는 메소드

일반 : document.getElementById("id").checked;
         JQuery : $("#id").is(':checked');

      - 체크박스 및 라디오버튼에 체크상태인지를 boolean 형으로 반환
      - $("#id").is(".orange, .blue, lightblue");  id의 class 속성중 orange, blue, lightblue 가 
       하나라도 있으면 true


*해당 엘리먼트의 CSS 속성 부여하기

일반 : document.getElementById("id").style.border = "4px solid yellow");
         JQuery : $("#id").css("border", "4px solid yellow");

      - 첫번째인자는 속성이름, 두번째인자는 속성값을 넣으면 된다.


*해당 엘리먼트의 display 속성 부여하기

일반 : document.getElementById("id").style.display = "none";
         JQuery : $("#id").hide(); , $("#id").show();

      - hide 숨김, show 보임, hide, show 안에 인자를 slow, normal, fast 중 하나로
       보임숨김의 속도를 조절 할 수 있습니다.

    - 아니면 수치로 1000분의 1초로 할 수 있음. show(950)


*체크박스의 전체선택 / 해제

일반
function selectAll() {
    var blnChecked = document.getElementById("allCheck").checked;      // 전체선택 체크박스의 상태
    checkBoxes = document.getElementsByName('delCheck');              // 태그이름중 delCheck인
                                                                                                         엘리먼트를 배열로 얻음

    for(var i=0; i<checkBoxes.length; i++) {
       objCheck = checkBoxes[i];
       if (objCheck) {
          objCheck.checked = blnChecked;
       }
    }
}


JQuery

$(document).ready(function() {                    
  $('#allCheck').click(function() {                    // 전체선택 체크박스 선택 이벤트
    if($('#allCheck').is(':checked')){                // 전체선택 체크박스 체크상태
      $('.delCheck').each(function(){                // 여러개의 체크박스 의 class 속성의 값이 delCheck 인걸 가져옴
        $(this).attr('checked', 'checked');           // 가져온 체크박스를 checked
        });
     }else{                                                     // 전체선택 체크박스 미체크상태
       $('.delCheck').each(function(){
       $(this).attr('checked','');                         // 가져온 체크박스를 미체크상태로
       });
     }
   }); 
});


*엘리먼트의 존재여부를 체크하기

JQuery : if($("#id").length > 0)      

          - 엘리먼트로 존재하지 않은 경우에도 빈 객체로 반환하기 때문에 JQuery는.. 객체의 길이를 
           체크해서 존재여부를 체크합니다.

반응형