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...

});