: devNote

(1) Javascript 문법 스타일

기존의 프로그래밍 언어의 엄격한 문법 스타일에 적용되어 있는 사용자라면 분명히 자바스크립트의 자유 분방한 문법 스타일을 보고 적지않게 당황한적이 있을 것이다. 이러한 스타일은 단점이 될 수도 있으나 매우 유연하기 때문에 때에 따라서 매우 강력한 기능을 발휘한다. 그렇다면 가장 많이 사용되는 자바스크립트의 함수와 관련된 문법 스타일에 대해서 알아보도록 하자.

1. 함수를 변수에 설정할 수 있다.

2. 변수에 설정한 함수를 매개 변수로 사용하여 호출 할 수 있다.

3. 위와 같이 변수에 담지 않고 바로 함수를 매개 변수로 바로 설정 할 수 있다.

3번의 경우 조금 어렵게 생각할 수도 있는데 자세히 보면 그냥 함수 파라메터 값에 변수가 아닌 함수 그 자체가 들어가 있다고 간단하게 생각하면 된다. 이러한 표현식은 jQuery에서 상당히 많이 쓰이기 때문에 이러한 문법 스타일에 최대한 빨리 익숙해져야 한다.


(2) 셀렉터 요약 정리

셀렉터는 jQuery의 가장 강력한 기능이다. 간단하게 설명을 하자면, HTML 문서 안에는 다양한 엘리먼트들이 포함되어 있는데, 이를 컨트롤하기란 결코 간단한 일이 아니다. 일반적으로 자바스크립트에서 엘리먼트를 얻기 위해 많이 쓰이는 방법은document.getElementById("엘리먼트 ID 속성 값") 함수를 사용하면 되지만, 일단 소스 코드가 길어지고 얻을 수 있는 엘리먼트들도 매우 한정적이다.

하지만 jQuery에서는 $("셀렉터 문법") 함수를 사용하여 매우 간단하고 다양한 스타일의 엘리먼트들을 쉽게 얻을 수 있다. 셀렉터로 얻은 엘리먼트들을 확장 집합이라 하는데, 특수한 배열 형태의 객체로 반환이 된다. 이렇게 반환된 객체들은 jQuery가 지원하는 매우 다양한 함수들을 사용할 수 있다.

아래 표에 나와 있는 자식/에트리뷰트/컨테이너 셀렉터는 가장 많이 사용되는 셀렉터 문법이다.

아래 표는 jQuery가 지원하는 고급 위치 기반 셀렉터이며, DOM에서 위치를 기반으로 엘리먼트를 선택하며 첫 번째 링크나 홀수 번째, 짝수 번째와 같이 엘리먼트의 위치나 다른 엘리먼트와 관계를 기반으로 엘리먼트를 선택해야 하는 경우에 사용하면 된다.

CSS 명세만으로는 표현할 수 없는 특성이 있는 엘리먼트를 선택해야 하는 경우 아래 표에 나와 있는 셀렉터를 사용하면 된다.

(3) 자주 사용되는 함수 정리

$.유틸리티 함수, Event 관련 함수, Ajax 관련 함수는 이번 장에서 다루지 않을 것이다.

(4) 그 밖에 함수 정리

아래 표에 정리된 함수들은 확장된 엘리먼트 집합을 관리하는 함수들이다.

// select box ID로 접근하여 선택된 값 읽기

$("#셀렉트박스ID option:selected").val();

// select box Name로 접근하여 선택된 값 읽기

$("select[name=셀렉트박스name]").val();

// 같은 방식으로 span과 같은 다른 태그도 접근 가능하다~

$("span[name=셀렉트박스name]").text();

// 선택된 값의 index를 불러오기

var index = $("#셀렉트박스ID option").index($("#셀렉트박스ID option:selected"));

// 셀렉트 박스에 option값 추가하기

$("#셀렉트박스ID").append("<option value='1'>1번</option>");

// 셀렉트 박스 option의 맨앞에 추가 할 경우

$("#셀렉트박스ID").prepend("<option value='0'>0번</option>");

// 셀렉트 박스의 html 전체를 변경할 경우

$("#셀렉트박스ID").html("<option value='1'>1차</option><option value='2'>2차</option>");

// 셀렉트 박스의 index별로 replace를 할 경우

// 해당 객체를 가져오게 되면, option이 다수가 되므로 배열 객체가 되어 eq에 index를 넣어 개별 개체를 선택할 수 있다.

$("#셀렉트박스ID option:eq(1)").replaceWith("<option value='1'>1차</option>");

// 직접 index 값을 주어 selected 속성 주기

$("#셀렉트ID option:eq(1)").attr("selected", "selected");

// text 값으로 selected 속성 주기

$("#셀렉트ID")val("1번").attr("selected", "selected");

// value 값으로 selected 속성 주기

$("#셀렉트ID").val("1");

// 해당 index item 삭제하기

$("#셀렉트ID option:eq(0)").remove();

// 첫번째, 마지막 item 삭제하기

$("#셀렉트ID option:first").remove();

$("#셀렉트ID option:last").remove();

// 선택된 옵션의 text, value 구하기

$("#셀렉트ID option:selected").text();

$("#셀렉트ID option:selected").val();

// 선택된 옵션의 index 구하기

$("#셀렉트ID option").index($("#셀렉트ID option:selected"));

// 셀렉트박스의 아이템 갯수 구하기

$("#셀렉트ID option").size();

// 선택된 옵션 전까지의 item 갯수 구하기

$("#셀렉트ID option:selected").prevAll().size();

// 선택된 옵션 후의 item 갯수 구하기

$("#셀렉트ID option:selected").nextAll().size();

 // 해당 index item 이후에 option item 추가 하기

$("#셀렉트ID option:eq(0)").after("<option value='3'>3번</option>");

// 해당 index item 전에 option item 추가하기

$("#셀렉트ID option:eq(3)").before("<option value='2'>2번</option>");

// 해당 셀렉트 박스에 change event binding 하기

$("#selectID").change(function() {

alert($(this).val());

alert($(this).children("option:selected").text());

});

[jQuery] Events

alert("only once");                                    alert("only once");

});                                                                   $(this).unbind(event);

};

※ 바인드형 함수 _ 추가되는 요소에도 이벤트 적용할시

$(elements).on(events, selector, data, handler);        // jQuery 1.7+

$(elements).delegate(selector, events, data, handler);  // jQuery 1.4.3+

$(elements).live(eventType, eventData, handler);  // jQuery 1.4+

● .on()     :   .on() 함수는 jQuery 객체 안의 현재 선택된 요소 집합과 이벤트 핸들러를 묶어 줍니다 (* 추가될 element의 이벤트 핸들러도 적용된다.)

// p 태그를 클릭하면 알림창이 나타납니다.

$("p").on("click", function(){ alert( $(this).text() ); });

// 이벤트 핸들러에 데이터를 전달하고, foo 값을 알림창으로 보여줍니다.

function myHandler(event) { alert(event.data.foo); }
$("p").on("click", {foo: "bar"}, myHandler)

폼의 submit를 막고 false를 인자로 하여 이벤트가 버블링되는 것을 차단합니다.

$("form").on("submit", false)

.preventDefault() 함수로 기본적인 액션을 취소시킵니다.

$("form").on("submit", function(event) {  event.preventDefault(); });

.stopPropagation()를 사용하여 폼 submit을 방해하지 않고 버블링에 의한 submit을 방지합니다..

$("form").on("submit", function(event) {   event.stopPropagation(); });

● .delegate()   : 선택된 element의 selector 에 이벤트 핸들러를 붙인다. (* 추가될 element의 이벤트 핸들러도 적용된다.)

    live() 함수 보완하여 만들어진 함수.

 $("body").delegate("p", "click", function(){
      $(this).after("<p>Another paragraph!</p>");
    });  

 // 함수는 새로 추가된 p에도 자동적용됨. 새로 만들어진 애들 클릭해도 또 추가.

     (delegate('p'....)에서 p에 click 이벤트를 적용)

● .undelegate()   : 선택된 element의 이벤트 핸들러를 제거한다.

.undelegate() //모든이벤트 제거

$("body").undelegate("p","click");