해당 엘리먼트 접근하기
일반 : 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;
- achor 
