레이블이 tutorial인 게시물을 표시합니다. 모든 게시물 표시
레이블이 tutorial인 게시물을 표시합니다. 모든 게시물 표시

2012-11-23

jquery] jquery 튜토리얼




jquery  설명 사이트 :  http://godffs.tistory.com/category/ASP.NET/jQuery


[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로 끝나는 , 반대는 ^)
$("a[href^=http://]") -> a ELEMENZT 중 href attribute가 http://로 시작하는 
$("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


[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인 엘리먼트를 배열로 얻음

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






<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...
});