해당 엘리먼트 접근하기

일반 : 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는.. 객체의 길이를 체크해서 존재여부를 체크한다

name 으로 해당 컨텐츠 사용 하기

text

get   $(‘input[name=inputname]’).val();

set   $(‘input[name=inputname]’).val(‘value’);

selectbox

get   $(‘select[name=selectname] > option:selected’).val();

set   $(‘select[name=selectname] > option[value=selectvalue]’).attr(‘selected’, ‘true’);

radio , checkbox

get   $(‘input[name=inputname]:checked’).val();

set   $(‘input[name=inputname]’).filter('input[value=selectvalue]').attr(‘checked’, ‘checked’);

set   $(‘input[name=inputname]’).filter('input[value=selectvalue]').attr(‘checked’, ‘’);

count    $(‘input[name=inputname]:checkbox:checked’).length;