JQuery 사용해보기.
프로토타입, 도조 등 많은 비슷한 스크립트 라이브러리들이 있지만 요세 대세? 가벼우면서 막강한 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는.. 객체의 길이를 체크해서 존재여부를 체크한다.