かけがえのない愛

var xml = '';
$(xml).find("id").each(function () {
   var id = $(this).find("id").text();
});

var xml = '';

var xmlDoc;
if (window.ActiveXObject) {
    // IE일 경우
    xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
    xmlDoc.async = false;
    xmlDoc.loadXML(xml);
}
else if (window.XMLHttpRequest) {
    //Firefox, Netscape일 경우
    var xmlParser = new DOMParser();
    xmlDoc = xmlParser.parseFromString(xml, 'text/xml');
}
else {
    xmlDoc = null;
}

if (xmlDoc != null) {
    // #1. jQuery 방식 
    $(xmlDoc).find("To").each(function () {
        var id = $(this).find("dn").text();
    });

    // #2. Script 방식
    var nodes = xmlDoc.selectNodes("person/to");
    for (i = 0; i < nodes.length; i++) {
        var id = nodes[i].selectSingleNode("id").text;
    }
}

 







    

        

            
성
            
이름
            
나이
        
    

   

using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
using System.Web.Script.Services;
using System.Web.Services;

namespace TEST.WS
{
    /// 

    /// UserInfoWS의 요약 설명입니다.
    /// 
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // ASP.NET AJAX를 사용하여 스크립트에서 이 웹 서비스를 호출하려면 다음 줄의 주석 처리를 제거합니다. 
    [System.Web.Script.Services.ScriptService]
    public class UserInfoWS : System.Web.Services.WebService
    {
        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public string GetUserInfo(string id)
        {
            DataTable dtUserInfo = new DataTable("UserInfo");

            dtUserInfo.Columns.Add("FirstName", typeof(string));
            dtUserInfo.Columns.Add("LastName", typeof(string));
            dtUserInfo.Columns.Add("Age", typeof(string));
            dtUserInfo.Columns.Add("ID", typeof(string));

            DataRow drUserInfo = dtUserInfo.NewRow();
            drUserInfo["FirstName"] = "길동";
            drUserInfo["LastName"] = "홍";
            drUserInfo["Age"] = "29";
            drUserInfo["ID"] = id;
            dtUserInfo.Rows.Add(drUserInfo);

            JavaScriptSerializer serializer = new JavaScriptSerializer();
            List userInfos = new List();
            UserInfo userInfo = null;
            foreach (DataRow dr in dtUserInfo.Rows)
            {
                userInfo = new UserInfo();
                userInfo.FirstName = dr["FirstName"].ToString();
                userInfo.LastName = dr["LastName"].ToString();
                userInfo.Age = dr["Age"].ToString();
                userInfo.ID = dr["ID"].ToString();

                userInfos.Add(userInfo);
            }

            return serializer.Serialize(userInfos);
        }

        public class UserInfo
        {
            public string FirstName { get; set; }
            public string LastName { get; set; }
            public string Age { get; set; }
            public string ID { get; set; }
        }
    }
}

1. WebMethod 내 JavaScriptSerializer 클래스를 통하여 DataTable 개체를 JSON 문자열로 변환하여 String으로 리턴하여야 함.
   -    Object 타입의 개체를 넘겨주어야 하므로, 위 소스에서는 별도의 클래스를 정의하여 개체로 넘김.
2. 위 JSON 문자열로 처리 했다고 해서.. JQuery ajax 내에서 return.d 로만 처리하면 속성값을 찾지 못함.
   
   

   success: function (result) {       data = $.parseJSON(result.d);       $.each(data, function (i, item) {                //위처럼 선언 안하고, item.FirstName 속성 값을 가져오지 못함.        } };

9.1 Form 플러그인

9.1.1 폼 컨트롤 값 가져오기

• 컨트롤 값 가져오기
  • fieldValue() - 확장 집합 내의 모든 전송 가능한 폼 컨트롤이 가진 값의 배열을 변환한다.
  • val() - 확장 집합내의 첫번째 전송 가능 폼 컨트롤 엘리먼트 값을 반환한다.
  • $(#testForm *').fieldValue()
  • $(#testForm *').fieldValue(false) - 전송 불가능한 컨트롤 제외하지 않음
• 컨트롤 값 직렬화하기
  • 인코딩된 쿼리문자열로 만든다
  • formSerialize() - 확장집합내의 폼을 받아서 폼에 있는 전송 가능한 자식 컨트롤의 값을 모두 직렬화
  • fieldSerialize() - 확장집합내의 모든 컨트롤을 직렬화
  • $('#testForm').formSerialize()

9.1.2 폼 컨트롤의 값 지우고 재설정하기

• clearForm() - 텍스트, 패스워드, 텍스트 영역 지운다. <select>엘리먼트 선택 취소, 체크박스 라디오버튼 해제
• resetForm() - HTML 마크업 지정값으로 되돌림 (reset() 메서드 호출)

9.1.3 Ajax를 사용하여 폼 값 전송하기

• Form플러그인의 formSerialize()메서드와 코어 Ajax함수를 조합하면 된다.
• Form플러그인의 ajaxSubmit()커멘드를 쓰면 Ajax를 통한 전체 폼 전송이 더 쉽다.
• $('#targetForm').ajaxSubmit(); - 폼 전송
• $('#targetForm').ajaxSubmit(function(response){

      /* response와 함께 어떠한 작업 처리 */

});

• ajaxForm() - 일반적인 의미의 이벤트로 발생한 폼 전송을 막고 요청을 모방하는 Ajax요청을 전송한다.
• ajaxFormUnbind() - 폼이 일반적인 방식으로 전송될 수 있도록 화장 집합내의 폼에 전용된 기능을 제거한다.

9.1.4 파일 전송하기

• Form플러그인은 file타입 입력 엘리먼트에 명시된 파일을 업로드하는 폼을 알아서 식별하고 처리한다.

9.2 Dimensions 플러그인

9.2.1 width height 메서드 확장하기

9.2.2 스크롤 크기 얻어내기

9.2.3 오프셋과 위치

9.3 Live Query 플러그인

• 셀렉터와 일치하는 엘리먼트에 이벤트 핸들러를 할당한다.
• 어떠한 엘리먼트가 셀렉터와 일치할 때 실행될 함수를 호출한다.
• 더는 어떠한 엘리먼트 셀렉터와 일치하지 않을 때 실행될 함수를 호출한다.

9.3.1 이벤트 핸들러 미리 할당하기

9.3.2 일치리스너와 불일치 리스너 정의하기

9.3.3 Live Query를 강제로 적용하기

9.3.4 Live Query 리스너 제거하기

9.4 UI 플러그인 소개

9.4.1 마우스 상호작용

• draggable(options)
• ui.mouse.js, ui.draggable.js를 포함 해야 한다.
• ui.draggable.ext.js 확장 옵션을 위해서 포함해야 함
• $('#testSubject').draggable({});

9.4.2 위짓과 시각효과

• 상세 내용은 http://docs.jquery.com/ui를 참조
 

8.1 Ajax 간략히 살펴보기

8.1.1 XHR 인스턴스 생성하기

8.1.2 요청 보내기

8.1.3 진행 상황 추적하기

8.1.4 응답 얻기

• Ajax를 사용하는 개발자가 다뤄야할 고통
  • XHR 객체를 인스턴스화 하는데 브라우저에 종속적 코드 필요
  • 준비 핸들러는 필요없는 상태 변화를 걸러내야 한다.
  • 준비 핸들러는 XHR인스턴스를 호출하는 참조를 자동으로 얻지 못한다.
  • 응답결과는 형태에 따라 다양한 방법으로 다뤄야 한다.

8.2 엘리먼트에 콘텐츠 로드하기

• Ajax를 사용하는 가장 빈번한 상황은 서버에서 콘텐츠를 가져와서 원하는 DOM 위치에 삽입하는 것이다.
• 콘텐츠는 대상 컨테이너의 자식이 되는 HTML코드이거나 대상엘리먼트의 콘텐츠가 되는 보통 텍스트다.
• $('#someContainer).load('/serverResource'); - 간단하다.

8.2.1 jQuery로 콘텐츠 로드하기

• load(url, parameters, callback) - parameters 매개변수가 요청 매개변수로 제공되면 POST HTTP 메서드를 사용하여 요청을 만들고, 그렇지 않으면 GET 메서드로 요청을 만든다. (GET URL에 URI인코딩 형태의 쿼리문자열 추가)
• $('.injectMe').load('/someResource #div'); - 응답 엘리먼트에서 오직 <div>엘리먼트만 삽입한다.
• serialize() - 폼 컨트롤에서 요청 매개변수를 가져와 쿼리 문자열을 만들어줌(선택안된 체크박스 라디오버튼 드롭다운, 비활성화된 컨트롤과 같은 엘리먼트는 제외)
• serializeArray() - 자바스크립트 배열형태로 폼데이터를 반환. 폼 컨트롤 이름과 값을 name 프로퍼티와 value 프로퍼티로 가짐

8.2.2 목록 데이터 동적으로 로드하기

• $(function(){

             $('#styleDropdown')

                  .change(function(){   // 스타일 드롭다운을 감싸고 변경 핸들러를 바인딩한다.

                     var styleValue = $(this).val();

                     $('#detailsDisplay').load(

                            'getDetails.jsp',     // 선택된 스타일 데이터를 로드한다.

                            { style : styleValue } // GET 패러메터

                     );

                  })

                  .change();               // 변경 핸들러를 실행한다.

             });

8.3 GET과 POST 요청 만들기

• GET은 멱등 요청이며 캐시에 적합하다.
• POST는 데이터 전송에 주로 쓴다.

8.3.1 jQuery를 사용하여 데이터 얻기

• $.get(url, parameters, callback) - 명시된 URL을 사용하여 GET요청을 전송
• $.get( 'reflectData.jsp', {a:1, b:2, c:3}, function(data) {alert(data);} );

8.3.2 JSON 데이터 얻기

• XML이 데이터 전송기법으로 적당하지 않을때 사용
• $.getJSON(url, parameters, callback)

8.3.3 POST 요청 만들기

• $.post(url, parameters, callback)

8.4 Ajax 요청 직접 제어하기

8.4.1 Ajax 요청 직접 설정하고 생성하기

8.4.2 요청에 기본값 설정하기

8.4.3 전역함수

 

 

7.1 확장을 사용하는 이유

• 사이트 전체에 일관된 코드 스타일을 유지하는 데 도움을 줌
• jQuery의 강력한 기능을 상속받아 사용 가능

7.2 jQuery 플러그인 제작 지침

7.2.1 필드와 함수 이름 짓기

• 플러그인 개발시에 파일이름이 다른 파일과 충돌하지 않도록 만드는 방법
  • 접두어로 jquery.를 사용한다.
  • 이어서 플러그인 이름을 적는다.
  • .js로 파일 이름을 끝맺는다.
• jquery.fred.js
• http://docs.jquery.com/Plugins 페이지의 플러그인 목록을 살펴보는 것도 좋다.

7.2.2 $를 경계하라

• 별칭 jQuery를 사용하는 방법도 있으나 $쪽이 훨신 편리하다.

7.2.3 복잡한 매개변수 목록을 단순하게 만들기

• function complex(p1, p2, p3, p4, p5, p6, p7) {  - 매개변수가 많음
• complex(valueA, null,null,null,null,null, valueB); - null 입력이 많음
• complex(valueA, {p7:valueB}); - options hash를 이용하는 방법
• complex(valueA, {p3:vlaueC, p4:valueD})); - 이런 방법도

7.3 사용자 정의 유틸리티 함수 작성하기

• $.say = function(what) { alert('I say ' + what); }

7.3.1 데이터를 조작하는 유틸리티 함수 만들기

• $.toFixedWidth(value, length, fill) - 전달된 값을 고정폭 필드로 채우는 함수를 만들어 보자
• (function($){

   $.toFixedWidth = function(value, length, fill) {

        var result = value.toString();

        if(!fill) fill = '0;;

        var padding = length - result.length;

        if(padding < 0) {

             result = result.substr(-padding);

        }

        else {

             for(var n = 0; n < padding; n++)

                 result = fill + result;

        }

        return result;

   };

})(jQuery); - 이렇게 구현한다.

7.3.2 날짜 형식기 만들기

7.4 새로운 확장 메서드 추가하기

• 확장 메서드를 추가하여 강력함을 필요한 만큼 확장할 수 있다.

7.4.1 확장메서드에 여러동작 적용하기

• 두가지 이상 되는 기능을 수행하는 새로운 플러그인 메서드 개발

7.4.2. 확장메서드에서 상태 유지하기

6.1 jQuery 플래그 사용하기

• $.browser, $.boxModel, $.styleFloat

6.1.1 사용자 에이전트 탐지하기

• 브라우저 탐지가 해로운 이유 - 브라우저 탐지는 '증오스럽다'. 브라우저 탐지는 선택할 여지가 없을 때만 사용하는 기술이다. IE, firefox, opera, safari 등등 , 지원하지 않는 브라우저는 에러 발생 ,거대 중첩 조건문에 의해 확장성 떨어짐
• $.browser - 에이전트가 속한 브라우저 종류를 찾으려고 사용하는 플래그 집합을 정의한다. msie, mozilla, safari, opera, version
• $.browser.msie ? 2 : select.option[2] - 브라우저를 탐지하여 처리

6.1.2 박스 모델 확인하기

• W3C 박스 모델은 패딩과 테두리 엘리먼트의 크기를 넓이에서 제외하지만 IE에서는 포함한다.
• $.boxModel - W3C 표준 박스 모델이면 true, IE 박스모델은 false

6.1.3 정확한 float 스타일 탐지하기

• element.style[$.styleFloat] = 'left';
• $.styleFloat 플래그 값은 IE에서 styleFloat이며 다른 브라우저에서는 cssFloat이다.
• 이 플래그를 일반적으로 직접 사용하는 일이 없다.

6.2 다른 라이브러리와 jQuery 함께 사용하기

• $.noConflict() - 다른 라이브러리가 $를 사용하면 그 라이브러리에서 이변수를 사용할 수 있도록 만들어 주는 유틸리티 함수

6.3 자바스크립트 객체와 컬랙션 조작하기

6.3.1 문자열 다듬기

• $.trim(value) - 앞뒤 공백 제거(폼피드, 개행, 리턴, 탭, 수직문자 등 포함)

6.3.2 프로퍼티와 컬렉션 순회하기

• for-in루프 는 문법이 불필요하게 장황하고 복잡해짐
• $.each(container, callback) - container는 순회할 아이템을 가진 배열 혹은 프로퍼티를 가진 객체, callback함수의 첫번째 매개변수는 배열의 인덱스 이거나 객체 프로퍼티의 이름이다.
• var anArray = ['하나','둘','셋'];

$.each(anArray, function(n, value){

    // 여기서 작업한다.

});

• $var anArray = {하나:1, 둘:2, 셋:3};

$.each(anObject, function(name, value){

    // 여기서 작업한다.

});

6.3.3 배열 필터링하기

• 많은 양의 데이터를 다루는 애플리케이션에서 특정조건에 일치하는 엘리먼트를 찾으려면 빈번하게 배열을 순회하여야한다.
• 특정경계에 속하거나 속하지 않는 아이템 혹은 특정 패턴에 일치하는 아이템을 찾기위해 필터링 작업을 한다.
• $.grep(array, callback, invert) - 전달된 배열의 엘리먼트마다 콜백함수를 호출하면서 순회한다. invert 매개변수를 생략하거나 false이면 콜백의 값이 true일 경우 값이 수집된다. invert가 true라면 콜백의 값이 false일 때 값이 수집된다. 원본 배열은 변경되지 않는다.
• var bigNumbers = $.grep(originalArray, function(value){

return value > 100;

}); - 배열중 100보다 큰 값으로 필터링

6.3.4 배열 변환하기

• 데이터가 항상 필요한 형태로만 존재하지는 않는다. 데이터 중심 웨에플리케이션에서 자주 사용하는 주요 동작으로 값의 집합을 다른 집합으로 변환하는 연산이 있다.
• $.map(array, callback) - 전달된 배열의 아이템마다 콜백함수를 호출하면서 순회하며 함수호출로 반환된 값은 새로운 배열로 수집된다.
• var oneBased = $.map([0,1,2,3,4], function(value){return value+1;}); - 0 기반 인덱스에서 1기반 인덱스로 변경한다.
• var oneBased = $.map([0,1,2,3,4], 'a+1'); - 위와 같은식, 간단하게 만드는 표현식 형태의 문자열을 전달 할 수 있다. a라는 매개변수를 값으로 전달 받았다.
• var strings = ['1', '2', '3', '4', 'S', '6'];  // 5가 아니라 S

var values = $.map(strings, function(value){

var result = new Number(value);

return isNaN(result) ? null : result; // 숫자로 성곡적으로 변환했는지 점검 (자바스크립트 isNaN() 메서드), 실패시 null 반환

});

• var characters = $.map(['this', 'that', 'other thing'],

function(value) { return value.split(''); }

);

==> ['t','h','i','s','t','h','a','t','o','t','h','e','r ',' ','t','h','i','n','g'] 합쳐서 분해 됨

6.3.5 자바스크립트 배열 재미있게 사용하기

• $.inArray(value, array) - 전달된 값이 처음 나타나는 위치 인덱스 반환, value 배열에서 찾으려는 값, 찾을 대상 배열 , 찾지 못하면 -1 반환
• var index = $.inArray(2,[1,2,3,4,5]);
• $.makeArray(object) - 유사배열 객체를 자바스크립트 배열로 변환
• $.unique(array) - DOM 엘리먼트의 배열이 주어지면, 원본 배열에서 고유한 엘리먼트로만 구성된 배열 반환.

6.3.6 객체 확장하기

• $.extend(target, source1, source2, ...sourceN) - target에 전달될 객체를 함께 전달된 나머지 객체의 프로퍼티를 사용하여 확장한다. 같은 객체가 있을 때  뒤에 나오는 객체가 앞보다 우선함.

6.4 동적으로 스크립트 로드하기

• $.getScript(url, callback) - url매개변수가 명시한 서버에 GET 요청을 사용해 스크립트를 가져옴

  [출처] jQuery in Action 정리 6장 - jQuery 유틸리티 함수 (iTeaTime~) |작성자 행복한사람

5.1 엘리먼트를 나타내고 감추기

5.1.1 접을 수 있는 리스트 구현하기

• show(), hide()

5.1.2 엘리먼트의 표시 상태 바꾸기

• toggle()

5.2 엘리먼트 표시상태를 애니메이션으로 표현하기

5.2.1 엘리먼트를 점진적으로 보이고 감추기

• hide(speed, callback) - 매개변수 없으면 display 스타일 프로퍼티 값이 즉시 none으로 설정, speed 는 1/1000초 설정, 또는 slow, normal, fast
• show(speed, callback) - jQuery를 이용해 감췄다면 이전 값으로 설정한다. 그렇지 않으면 block으로 설정
• toggle(speed, callback) - 감춰진 경우는 show()를 수행, 드러난 경우는 hide()를 수행

5.2.2 엘리먼트 페이드인 / 페이드 아웃/ 페이드 투하기

• fadeOut(speed, callback) - 불투명도를 0%로 줄여가면서 화면에서 제거
• fadeIn(speed, callback)
• fadeTo(speed, opacity, callback) - 확장엘리먼트의 불투명도를 현재의 설정 값에서 opacity 매개변수 값으로 설정 한다. (0.0~1.0) 화면에서 제거하지는 않는다.

5.2.3 슬라이드 효과를 사용하여 엘리먼트를 나타내고 감추기

• slideDown(speed, callback) - 감춰진 모든 일치하는 엘리먼트가 높이 값이 증가하면서 나타난다. (펼쳐지는...)
• slideUp(speed, callback) - 드러나 있는 모든 일치하는 엘리먼트가 점차적으로 높이 값이 감소하면서 화면에서 제거된다.
• slideToggle(speed, callback) - 감춰진 확장엘리먼트는 slideDown()을, 드러나 있는 확장 엘리먼트에는 slideUp()을 수행한다.

5.2.4 애니메이션 멈추기

• stop() - 확장 집합에 있는 엘리먼트에 현재 진행하는 에니메이션을 중지한다.

5.3 사용자 정의 애니메이션 생성하기

• 자신만의 애니메이션을 만들 수 있다.
• animate(properties, duration, easing, callback)
• animate(properties, options)

5.3.1 사용자 정의 스케일 애니메이션

• $('.animateMe').each(function(){

    $(this).animate(

        {

            widh: $(this).width() * 2,

            height: $(this).height() * 2

        },

        2000

   );

});

5.3.2 사용자 정의 드롭 애니메이션

• $('.animateMe').each(function(){

               $(this)

                  .css('position', 'relative')

                  .animate(

                       {

                            opacity: 0,

                            top: $(window).height() - $(this).height() - $(this).position().top

                        },

                        'slow',

                        function(){ $(this).hide(); });

           }); - 화면에서 떨어지는 효과

 

5.3.3 사용자 정의 퍼프 애니메이션

• 담배 연기 같이 공중에 퍼지는 것처럼 보이게 하려고 한다.
• $('.animateMe').each(function(){

    var position = $(this).position();

    $(this)

        .css({position:'absolute', top:position.top, left:position.left})

        .animate(

              {

                   opacity: 'hide',

                   width: $(this).width() * 5,

                   height: $(this).height() * 5,

                   top: position.top - ($(this).height() * 5 / 2 ),

                   left: position.left - ($(this).width() * 5 / 2)

              },

              'normal');

});

                    

 

3.1 엘리먼트 프로퍼티와 어트리뷰트 조작하기

3.1.1 엘리먼트 프로퍼티 조작하기

• $('img').each(function(n){ this.alert='아이디가 '+this.id+'인 image['+n+']이다.'; }); - 0 부터 시작하는 index n을 매개변수로 받는다.
• var allAlts = new Array();

$('img').each(function(){ allAlts.push(this.alt); });  - 모든 alt 배열을 얻음

3.1.2 어트리뷰트 값 가져오기

• $("#myImage").attr("custom") - costom 어트리뷰트의 값
• 브라져에 따라 다른 프로퍼티명 때문에 발생하는 귀찮은 문제를 해결해 준다. (ex className 등)

3.1.3 어트리뷰트 값 설정하기

• $('*').attr('title', function(index) {

return '나는 ' + index + '번 엘리먼트이고 내 이름은 ' + (this.id ? this.id : 'unset') + '이다';

});

• $('input').attr(

{ value: '', title: '값을 입력하세요.' }

); - value title등 설정

3.1.4 어트리뷰트 제거하기

• removeAttr(name) - 자바스크립트 DOM 엘리먼트에서 대응하는 프로퍼티가 제거되는 것이 아니 값이 변경될 뿐이다.

3.1.5 어트리뷰트 가지고 놀기

• $("form").submit(function() {

$(":submit", this).attr("disabled", "disabled");

}); - form의 submit 버튼을 비 활성화

3.2 엘리먼트 스타일 변경하기

3.2.1 클래스 추가하고 제거하기

• addClass
• removeClass
• toggleClass
• $('tr').toggleClass('striped'); - 번갈아 가며 클래스를 적용

3.2.2 스타일 얻고 설정하기

• $("div.expandable").css("width", function() {

return $(this).width() + 20 + "px";

});

• $("div.myElements").width(500); - $("div.myElements").css("width", "500px")와 같은 코드
• $("div.myElements").height(500);
• var val = $("div.myElements").width(); - 가져오기

3.2.3 스타일과 과련된 유용한 커맨드

• $("p:first").hasClass("surpriseMe") - 클래스를 갖는지 true false 반환
• $("p:first").is(".surpriseMe") - 위와 같은 코드
• $("p:first").attr("class").split(" "); - 앨리먼트에 정의된 클래스 목록을 공백으로 구분된 문자열대신 배열로 얻음(undefined 발생 할 수 있다. 아래로 해결 )
• $.fn.getClassNames = function() {

if(name == this.attr("className")) {

return name.split(" ");

}

else {

return [];

}

};

3.3 엘리먼트 콘텐츠 설정하기

3.3.1 HTML과 텍스트 콘텐츠 대체하기

• html(text)
• var text = $('#theList').text();

3.3.2 엘리먼트 복사하기와 이동하기

• $('p').append('<b>테스트<b>');
• $("p.appendToMe").append($("a.appendMe"))
• $('#flower').appendTo('#targets p:first') - 확장집합의 모든 엘리먼트를 target의 끝으로 이동
• prepend(), prependTo() - append(), appendTo()와 유사하게 동작하지만 대상 엘리먼트 앞에 삽입
• before(), insertBefore() - 엘리먼트를 대상의 첫번째 자식으로 삽입하는 대신 대상의 바로앞 형제로 삽입
• after(), insertAfter() - 엘리먼트를 대상의 마지막 자식으로 삽입하는 대신에 대상의 바로뒤 형제로 삽입

3.3.3 엘리먼트 감싸기

• $("a.surprise").wrap("<div class='hello'></div>") - surprise 클래스가 있는 링크를 hello클래스를 지닌 div로 감싼다.
• $("a.surprise").wrap($("div:first")[0]); - 첫번째 <div>엘리먼트를 복사하여 감싼다.
• .wrapAll() - 일치하는 모든 엘리먼트를 감싼다.
• .wrapInner() - 일치하는 엘리먼트의 텍스트 노드를 포함한 콘텐츠를 감싼다.

3.3.4 엘리먼트 제거하기

• $("div.elementToReplace").after("<p>div를 대체한다.</p>").remove(); - 뒤에 추가하고(after 원본 반환) 앞을 제거함 (대체되는 것 같음)
• $.fn.replaceWith = function(html) {

return this.after(html).remove();

}; - 이렇게 만들어서 확장 사용 가능

• $("div.elementToReplace").replaceWith("<p> div를 대체한다.</p>"); - 위에서 확장해 사용

3.3.5 엘리먼트 복사하기

• $('img').clone().appendTo('fieldset.photo'); - 모든 이미지 엘리먼트를 복사해서 photo클래스 fieldset에 붙인다.
• $('ul').clone().insertBefore('#here').end().hide(); - 복사본 삽입후 원본 감추기

3.4 폼 엘리먼트 값 다루기

• .val() - 첫번째 엘리먼트의 value 프로퍼티 반환
• $('[name=radioGroup]:checked]').val(); - 첫 엘리먼트만 처리하므로 체크박스 그룹 사용 어려움. serialize()커맨드나 공식 Form 플러그인을 사용하는 것이 좋다.
• .val(value) - 값을 설정
• $('input, select').val(['하나', '둘', '셋']); - input과 select 엘리먼트를 찾아 발견된 체크박스, 라디오버튼, 옵션을 선택 (알아서 선택하니 편리)
   

2.1 조작하려는 엘리먼트 선택하기

• jQuery는 우리에게 익숙한 CSS문법을 사용한다.
• jQuery 정의 메서드 역시 CSS문법을 확장해서 사용한다.

2.1.1 기본 CSS 셀렉터 사용하기

• a - 모든링크(<a>) 엘리먼트와 일치하는 셀렉터
• #specialID - specialID를 아이디로 가지는 엘리면트와 일치 셀렉터
• .specialClass - specialClass를 클래스로 가지는 셀렉터
• a#specialID.specialClass - 아이디가 specialID이고 specialClass를 클래스로 가지는 링크와 일치하는 셀렉터
• p a.specialClass - <p> 에리먼트 내에 선언되고 specialClass를 클래스로 가지는 모든링크와 일치하는 셀렉터
• 몇몇 예외사항을 제외하고 CSS3를 완벽하게 준수한다.

2.1.2 자식셀렉터, 컨테이너 셀렉터, 어트리뷰트 셀렉터

• p > a - 자식셀렉터
• a[href^=http://] - 어트리뷰트 셀렉터 (^)는 값의 시작부분이 일치함을 의미함
• form[method] - 특정 어트리뷰트를 가진 셀렉터 선택
• input[type=text] - 일치하는 어트리뷰트를 가짐
• a[href$=.pdf] - 끝값이 일치하는 어트리뷰트 셀렉터
• a[href*=jquery.com] - 문자열을 포함하는 어트리뷰트 셀렉터
• li:has(a) - <a>엘리먼트를 포함하는 모든 <li>엘리먼트와 일치한다.

2.1.3 위치로 선택하기

• :first - 첫번째 일치 엘리먼트
• :last - 마지막 일치 엘리먼트
• :first-child - 첫번째 자식 엘리먼트
• :last-child - 마지막 자식 엘리먼트
• :only-child - 형제가 없는 엘리먼트
• :nth-child(n) - n번째 자식 엘리먼트
• :nth-child(even|odd) - 짝수 또는 홀수 자식 엘리먼트
• :nth-child(Xn+Y) - 공식에 따른 엘리먼트 ex)li:nth-child(3n)
• :even / :odd -  짝수 홀수 엘리먼트
• :eq(n) - n번째 일치 엘리먼트 (인덱스 0부터 시작)
• :gt(n) - n번째 엘리먼트(포함되지 않음) 이후의 엘리먼트와 일치
• :lt(n) - n번째 엘리먼트(포함되지 않음) 이전의 엘리먼트와 일치
• 자식셀렉터는 1부터 시작

2.1.4 jQuery 정의 셀렉터 사용하기

• :animated - 에니메이션 적용된
• :button - 모든 버튼
• :checkbox - 체크박스엘리먼트
• :checked - 선택된 체크박스
• :contains(foo) - 문자열 foo를 포함하는 엘리먼트
• :disabled - 비활성화 상태인 모든 폼엘리먼트
• :enabled - 활성화 상태인 모든 폼엘리먼트
• :file - 파일엘리먼트
• :header - 헤더 엘리먼트
• :hidden - 감춰진 엘리먼트
• :image - 폼 이미지 선택
• :input - 폼 엘리먼트만 선택(input, select, textarea, button)
• :not(filter) - 필터의 값을 반대로 변경
• :parent - 빈 엘리먼트 제외 텍스트포함 자식엘리먼트를 가지는 엘리먼트
• :password - 패스워드 엘리먼트
• :radio - 라디오 버튼
• :reset - 리셋 버튼
• :selected - 선택된 엘리먼트
• :submit - 전송 버튼
• :text - 텍스트 엘리먼트
• :visible - 보이는 엘리먼트

2.2 새로운 HTML 생성하기

• $("<div>안녕</div>")
• $("<div>") 는 $("<div></div>")와 같다
• .appendTo() 메서드도 있다.

2.3 확장된 엘리먼트 집합 관리하기

2.3.1 확장된 집합의 크기 결정하기

• $('#someDiv').html('페이지에는 총 '+$('a').size() + '개의 링크가 있다');
• 확장집합의 엘리먼트 개수

2.3.2 확장 집합에서 엘리먼트 획득하기

• $('img[alt]')[0] - 배열을 이용
• $('img[alt]').get(0) - 위와 동일. 0 생략시 배열 반환
• $('img').index($('img#findMe')[0]) - 이미지들중 id가 findMe인 이미지가 몇번째인지 인덱스를 반환

2.3.3 확장 엘리먼트 집합 재편성하기

• $('img[alt]').add('img[title]') - 엘리먼트를 확장집합에 추가한다.
• $('p').add('<div>안녕!</div>') - 새 html 생성해서 추가
• $('img'[title]').not('[title*=puppy]') - title 어트리뷰트를 지닌 모든 img엘리먼트 선택할때 puppy를 포함은 제외(true를 제외)
• $('img').addClass('seeThrough').filter('[title*=dog]') - not 메서드와는 반대의 결과 (부합하지 않는 false를 제외)
• $('*').slice(0,4); - 전체 엘리먼트에서 처음부터 4개의 엘리먼트를 포함한 집합생성
• $('*').slice(4); - 4개 이후(5번째 부터)에서 끝까지의 확장 집합생성

2.3.4 관계를 이용해 확장집합 얻기

• children() - 고유한 자식으로 구성된 확장집합 반환
• contents() - 엘리먼트 콘텐츠로 구성된 확장집합 반환. 주로 iframe 엘리먼트 콘텐츠를 얻고자 함(텍스트 노드포함)
• next() - 확장집합내의 각 확장 엘리먼트 바로 다음에 나오는 형제
• nextAll() - 확장집합내의 각 확장 엘리먼트 다음에 나오는 모든 형제
• parent() - 모든 확장 엘리먼트의 바로 위 부모로 구성된 엘리먼트
• parents() - 모든 확장 엘리먼트의 조상으로 구성된 확장집합 반환(root 미포함)
• prev() - 각 확장 엘리먼트 바로 이전 형제로 구성된 확장집합
• prevAll() - 각 확장엘리먼트 이전에 나오는 모든 형제로 구성된 확장집합
• sibilings() - 확장 엘리먼트의 모든 형제를 포함하는 확장집합을 반환

2.3.5 확장집합을 이용하는 기타 방법들

• wrappedSet.find('p cite') - wrappedSet 집합에서 <p>에 포함된 <cite>엘리먼트 구성 확장집합
• var hasImage=$('*').is('img'); - img 엘리먼트가 있는지 true false 반환

2.3.6 jQuery 체인 관리하기

• $('img').clone().appendTo('#somewhere').end() - appendTo() 이전 확장 집합으로 돌아간다.
• andSelf() - 커멘드체인에서 이전 확장집합 두개를 하나로 합친다.

 

1.1 jQuery인가?

1.2 튀지 않는 자바스크립트

•  쉽게 동작을 분리해 낼 수 있도록 라이브러리를 설계 
• 튀지 않는(unobstrusive) 자바스크립트는 HTML 페이지의 <body>테그에 포함된 자바스크립트 표현식이나 구문을 잘못된 것으로 본다. 
• 이는 명확하게 책임을 분리해주지만 많은 코드를 짜야하는 비용이 따른다. 
• jQuery를 이용하면 튀지 않는 자바스크립트 적용한 페이지를 작성하는 일이 한층 쉽고 즐거운 작업이 될 수 있다. 
•  적은 코드로 코딩이 가능하다.

1.3 jQuery 기초

1.3.1 jQuery() 함수

• p a  -  <p> 엘리먼트에 포함된 모든링크(<a> 엘리면트)의 그룹을 참조한다.
• CSS에서 사용되는 일반적인 셀렉터 이외에도 대부분의 브라우저에서 아직 완벽히 구현하지 못한 강력한 셀렉터도 지원한다. CSS3도 지원
• $()는 jQuery() 함수의 별칭
• $("div.notLongForThisWorld").fadeOut() -> 사라지게 한후 동일한 엘리먼트 그룹 반환
• $("div.notLongForThisWorld").fadeOut().addClass("removed"); -> 무한대로 연결가능
• $("#someElement").html("엘리먼트에 텍스트를 추가한다."); -> 작업이 복잡할 수록 jQuery체인을 사용하면 우리가 원하는 결과를 얻는데 필요한 코드의 양이 확연히 준다.
• $("#someElement")[0].innerHTML = "엘리먼트에 텍스트를 추가한다."); -> 배열처럼 사용 할 수 있다.

1.3.2 유틸리티 함수

1.3.3 문서 준비 핸들러

• window.onload는 DOM트리 생성 후 모든 이미지와 다른 외부리소스까지 로드 후에야 실행되므로 이미지나 다른 리소스를 로드하는데 시간이 오래걸리게되면 방문자가 그만큼 기다려야 하므로 전체 페이지에 사용 하기는 어렵다.
• jQuery는 크로스 브라우져 환경으로 이를 지원
• $(document).ready(function){     }); - ready()메서드를 통해 ready상태가 되었을때 호출
• $(function({       }); - DOM이모두 로드될 때까지 코드실행을 기다린다. 문서내에 여러번 사용 가능
• window.onload는 오직 한 함수만 허용한다.

1.3.4 DOM 엘리먼트 생성하기

• $("<p>안녕!</p>").insertAfter("#followMe");

1.3.5 jQuery 확장하기

• jQuery 라이브러리에는 필요한 기능만을 포함시켰다.
• 필요한 기능을 확장해서 사용 가능하다.
• $("form#myForm input.special").disable();
• $.fn.disable = function() {                                                             // disable 함수를 추가하겠다.

retun this.each(function() {

    if (typeof this.disabled != "undefined") this.disabled = true; // this는 위와 다른 this

});

}

1.3.6 다른 라이브러리들과 함께 jQuery 사용하기 

 

Example 1: innerHTML

DOM table methods using innerHTML to fill in cells

function addRowInnerHTML(tblId)
{
  var tblBody = document.getElementById(tblId).tBodies[0];
  var newRow = tblBody.insertRow(-1);
  var newCell0 = newRow.insertCell(0);
  newCell0.innerHTML = '';
  var newCell1 = newRow.insertCell(1);
  newCell1.innerHTML = 'cell 1 - just plain text';
}

Example 2: DOM

DOM table methods using DOM to fill in cells

function addRowDOM(tblId)
{
  var tblBody = document.getElementById(tblId).tBodies[0];
  var newRow = tblBody.insertRow(-1);
  var newCell0 = newRow.insertCell(0);
  var newInput = document.createElement('input');
  newInput.type = 'text';
  newInput.value = 'cell 0 - text box';
  newInput.style.color = 'blue';
  newCell0.appendChild(newInput);
  var newCell1 = newRow.insertCell(1);
  newCell1.appendChild(document.createTextNode('cell 1 - just plain text'));
}

Example 3: DOM Clone

cloneNode to clone an existing row

function addRowClone(tblId)
{
  var tblBody = document.getElementById(tblId).tBodies[0];
  var newNode = tblBody.rows[0].cloneNode(true);
  tblBody.appendChild(newNode);
}