[jQuery in Action 내용중]
Selector : html 내의 원하는 작업 대상 엘리먼드를 선택할 수 있는 방법
$("ELEMENT") -> 기본문법
$("p") -> html 내의 모든 p ELEMENT
$("p a") -> html 내의 모든 p ELEMENT 내의 a ELEMENT
$("p:even") ->html 내의 p ELEMENT 중 짝수번째
$("tr:nth-child(1)") -> html 내 모든 테이블 중 첫번째 tr
$("body > div") -> body 아래 첫번째 div
$("a[href$=pdf]") -> pdf 파일이 링크된 a ELEMENT ($는 끝이 pdf로 끝나는 , 반대는 ^)
$("body > div:has(a)") -> body 내 div 중 a ELEMENT를 포함하고 있는 div
$("form[method]") -> method attribute를 가진 모든 form ELEMENT
$("input[type=text]") -> type이 text인 모든 input
$("a[href*=jquery.com] -> href에 jquery.com이 포함된
li:has(a) <> li a
Selector 참고 링크 : http://docs.jquery.com/Selectors
CSS Selector
#someID -> someID를 가지고 id로 가지고 있는 ELEMENT
.someClass -> someClass를 class로 가지고 있는 모든 ELEMENT
a#someID.someClass -> a 태그 중 id가 someID이면서 class가 someClass인
$("p a.someClass") ->p ELEMET 내에 있는 a 태그 중 class가 someClass인
a:first
a:even
a:odd
li:last-child
li:last-child
[jQuery in Action 내용중]
jQuery로 만들어진 기본 유틸리티
$.trim("string")
아래의 세 개가 동일한 효과를 나타내나, 맨 아래가 제일 단순함
window.onload = function() {
$("table tr:nth-child(even)").addClass("class집합");
}; --> 페이지가 모두 로드된 다음 실행되므로, 이미지 등이 로딩 모두 로딩될 때까지 기다려야 하므로 체감 속도가 느리다.
$(document).ready(funtion() {
$("table tr:nth-child(even)").addClass("class집합");
}; --> DOM 트리가 로드된 다음 실행 되어 위보다 상대적으로 빠름
$(function() {
$("table tr:nth-child(even)").addClass("class집합");
};
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)
체크박스의 전체선택 / 해제
일반
functionselectAll() {
var blnChecked = document.getElementById("allCheck").checked; // 전체선택 체크박스의 상태
checkBoxes = document.getElementsByName('delCheck'); // 태그이름중 delCheck인 엘리먼트를 배열로 얻음
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;
}
}
}
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',''); // 가져온 체크박스를 미체크상태로
});
}
});
});
$('#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는.. 객체의 길이를 체크해서 존재여부를 체크한다.
| <script src="./jquery.js"></script> 이런식으로 넣어주면 이제 모든 준비가 끝났다. 그럼 간단하게 제이쿼리에 맛만 보고 글을 마치겠습니다. 자바스크립트에서 해당 ID를 찾을 쓰는 구문을 제이쿼리로 한다면 document.getElementById("test") -> $("#test") 자바스크립트로 스타일을 변경하고 싶을때 document.getElementById("test").style.display = 'none' -> $("#test").css("display","none") 자바스크립트로 select box 안에 선택된 값을 찾을때 document.getElementById("test").options[document.getElementById("test").selectedIndex].value -> $("#test option:selected").val() 자바스크립트로 checkbox 중 선택된거 알아올때 var ck = document.getElementByName("test"); var str = ""; for(var i = 0;i<ck.length;i++){ if(ck[i].chekced) str += ck[i].value + "|"; } -> var str = ""; $("#test:checked").each( str += $(this).val() + "|"; ); |
jQuery 함수 $(...)
jQuery(expression,context)
CSS 셀렉터를 받아 매치된 엘리먼트 집합의 jQuery 객체를 리턴한다.
예제1
div 엘리먼트 안의 모든 p 엘리먼트를 추출하여 테두리를 붙인다.
$("div > p").css("border", "1px solid gray");
예제2
document 첫번째 form 안에 있는 모든 input 태그 타입이 radio 인 것을 추출한다.
$("input:radio", document.forms[0]);
예제3
AJAX 응답으로부터 받은 XML에서 모든 div를 추출한다
$("div", xml.responseXML);
jQuery(html)
예제1
div를 비롯한 콘텐츠를 동적으로 생성하고 body에 추가한다.
$("<div><p>Hello</p></div>").appendTo("body")
예제2
input 요소를 type 요소없이 만들 수 없다.
이것은 Microsoft의 read / write - once 규칙에 따른 것으로, 자세한 내용은 MSDN을 참조한다.
// IE에서 작동하지 않음
$("<input/>").attr("type", "checkbox");
// IE에서 작동
$("<input type='checkbox'/>");
jQuery(elements)
이 함수의 인수는 XML Documents와 Window 개체와 같이 DOM 엘리먼트가 아닌것도 받아들인다.
예제1
body의 배경색을 바꾼다 (css 메서드는 DOM Element에 없는 jQuery개체이다)
$(document.body).css( "background", "black" );
예제2
myForm 내의 모든 엘리먼트를 표시하지 않는다 ( 배열에는 모든 것을 한꺼번에 표시하지 않는 hide 함수는 존재하지 않는다)
$(myForm.elements).hide()
jQuery(callback)
$(document).ready()의 약어
DOM Document로드가 끝난 때 바인딩 해 놓은 함수가 실행된다.
이 함수는 $ (document) ready ()와 같게 동작한다.
이 함수는 기술 적으로는 다른 $ () 함수와 마찬가지로 모두 가능하다, 쓰임새는 없다.
예제1
DOM 준비가 가능하면 작업을 수행한다.
$(function(){
// Document is ready
});
예제2
$별칭을 사용하여 jQuery 코드가 안정적으로 동작하므로 전역 변수에 의지하지 않고 인수 $를 기술하도록한다.
jQuery(function($) {
// Your code using failsafe $ alias here...
});
