01. jQuery 시작

1.1 jQuery Library code 삽입

1) jQuery 최신버전 삽입 Google의 CDN이용

2) jQuery.com 에서 최신버전 받아 서버나 로컬에서 삽입

 <script type="text/JavaScript"     src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>

1.2 DOM로드후 jQuery/java script 실행 ( .ready()이벤트 )

jQuery(document).ready(function(){//아직 DOM이 로드 되지 않았기에 ready 이벤트를 사용해야한다.alert(jQuery('p').text());}); jQuery(function(){}); //가능

속도향상을 위해 </body>바로 앞에 .ready()이벤트를 처리할 수 있는 스크립트를 넣어도 좋다.

1.3 Selector 와 jQuery 함수를 사용하여 DOM요소 선택하기

jQuery('a'); : HTML내의 모든 <a>태그 요소를 반환한다.

jQuery('selector1, selector2, selector3'); : 세개의 셀렉터를 사용할 수도 있다.

jQuery(document.getElementsByTagName('a')); : 태그네임셀렉터  (s를 주의하자)

# selector는 jQuery의 강력한 기능이다. 기초를 차근차근히 공부해둘 것

1.4 특정 context안에서 DOM요소 선택하기

# -context wraper는 거창한게 아니라 $('form') 이런 녀석들

// context wraper를 이용하여 form 요소 안에서 input 요소를 찾는다  

jQuery('input',$('form'));

// context 로 DOM 참조를 사용하여 첫번째 form 요소 안에서 input 요소를 찾는다.

jQuery('input',document.forms[0]);

//표현식을 사용하여 body 요소안에 있는 모든 input 요소를 찾는다.

jQuery('input','body');

1.5 DOM 요소의 래퍼 집합 필터링 하기

# 선택한 DOM요소에서 원하는 값 가져오는 것

// html문서에서 a 요소를 모두 찾아 가져오고 그중에 .external의 이름을 가진녀석만 가져온다.

    //표현식

    jQuery('a').filter('.external');

    //래퍼집합을 필터링 하는 동작을 수행하는 함수

    jQuery('a')

        .filter(function(index){ return $(this).hasClass('external'); })

        .length + ' external links'

    );

1.6 현재 선택된 래퍼집합에서 자손 요소 찾기

선택된 DOM 요소 집합(또는 단일 요소) 중 현재 선택된 요소들의 컨텍스트 안에서 자손 요소를 찾는 법

//p요소 집합을 가져와서 em(이태리체) 를 포함하는것을 뽑아낸다.

jQuery('p').find('em');

//두번째 매개변수로 컨텍스트 참조를 전달하는 방식

jQuery('em',$('p'));

//css셀렉터 표현식 - 초간단

jQuery('p em');

# .filter 와 .find의 차이점

 .find()는 현재 집합의 자식들에 대해 선택하거나 동작하는 반면 (하위 자식들을 찾아냄)

 .filter()는 현재 요소 집합에 대해서만 동작한다. (현재 선택된 집합에서 필터링)

1.7 파괴적인 변경 이전의 선택상황으로 돌아가기

예) filter()나 find.. 등이 사용되기 이전상태로 되돌릴 수 있는 방법이 필요한데 이때 end()를 사용한다.

//HTML 예

<p>text</p>

<p class="middle">Middle <span> text</span></p>

<p>text</p>

jQuery('p').filter('.middle').length;            // 1을 반환

jQuery('p').filter('.middle').end().length;   // 3을 반환

jQuery('p').filter('.middle').find('span')     // 1을 반환

jQuery('p').filter('.middle').find('span').end().end().length;   //3을 반환

//탐색 및 조작 메서드

add(), andSelf(), children(), closes(), filter(), find(), map(), next(),nextAll(),

not(), parent(), parents(), prev(), prevAll(), siblings(), slice(), clone(), 

appendTo(), prependTo(), insertBefore(), insertAfter(),  eplaceAll()

1.8 현재 셀렉션에 이전 셀렉션 추가하기

//HTML 예

<div>

    <p>Paragraph</p>

    <p>Paragraph</p>

</div>

//jQuery - div를 검색 그중 p를 찾고 andSelf로 그 이전의 집합을 선택한다.

// 결론은 div를 선택해서 <p>요소만이아닌 <div>전체에 css가 적용된다.

jQuery('div').find('p').andSelf().css('border','1px solid #993300');

1.9 컨텍스트 기반으로 DOM 탐색하기

//HTML 예

<div>

    <ul>

        <li><a href="#">link</a></li>

        <li><a href="#">link</a></li>

        <li><a href="#">link</a></li>

        <li><a href="#">link</a></li>

    </ul>

</div>

//인덱스로 <li> 집합에서 두번째 요소를 선택한다 index는 0부터 시작

jQuery('li:eq(1)');

jQuery('li:eq(1)').next();                     // 세번째 <li>조회

jQuery('li:eq(1)').prev();                     // 첫번째 <li>조회

jQuery('li:eq(1)').parent();                  // <ul>조회

jQuery('li:eq(1)').parent().children();   // 모든 <li> 조회

jQuery('li:eq(1)').nextAll();                 // 두번째 <li>다음에 오는 모든 <li>조회 (3,4번째 li)

jQuery('li:eq(1)').prevAll();                 // 두번쨰 <li>이전에 오는 모든 <li>조회 (1번째 li)

jQuery('li:eq(1)').parent().children(':last') // 마지막 <li>선택

1.10 DOM요소를 생성하고 추가하고 다루기

// 선택자대신 요소를 넣어 이중에 <a>태그를 find하고 그것의 attr(속성)을 변경한다.

// end()요소로 파괴메서드인 .find()이전값으로 돌린후에 'body'뒤에 append(추가)한다

jQuery('<p><a>jQuery</a></p>').find('a').attr('href','http://www.jquery.com').end().append('body');

//조작 메서드

append() - 선택한 엘리먼트안에 자식 엘리먼트,텍스트를 추가한다.

[출처] append, appendTo, remove, before, after|작성자 다크실프

prepend() - <P><B>Stone</B>Hello</P> :: 대상이 되는 element 안의  text 앞에 위치

prependTo() - <P>Hello<B>Stone</B></P> :: 대상이 되는 element안의 text 뒤에 위치

after() -  <DIV>Hello</DIV><B>Stone</B> :: 대상이 되는 element 뒤에 위치

before() -  <B>Stone</B><DIV>Hello</DIV>  :: 대상이 되는 element 앞에 위치

//HTML 예

<div>

    <ul>

        <div id='d1'></div>

        <div id='d2'><img id='flower' src='flower.png'></div>

        <div id='d3'></div>

        <div></div>

    </ul>

</div>

insertAfter() - $("#flower").insertAfter(".d3"); 

::대상이되는 element 뒤에 있는 element 안의 text뒤에 위치

d3포함 뒤에있는 div안에 flower이미지가 모두 복사된다.

ex)http://cafe.naver.com/webappdev.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=505&social=1

insertBefore() - ::대상이되는 element 뒤에 있는 element 안의 text앞에 위치

::대상이되는 element 뒤에 있는 element 안의 text앞에 위치

wrap() - $("img").wrap("<div class='d2'></div>");

::img 요소들을 모두 d2클래스를 적용한 div로 감싸버림(외부에)

ex)http://cafe.naver.com/webappdev.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=506&social=1

wrapAll() - $("img").wrapAll("<div class='d2'></div>");

::img 요소들을 모두 첫번째 img의 상위요소로 모아서 div로 감싸버림

사용상 주의 요망

ex)http://cafe.naver.com/webappdev.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=507&social=1

wrapInner() - wrap()과 비슷하나 wrap은 내부에 감싸버림 //wrap()참조

//append()와 appendTo()차이점

append() - $('선택').append('내용');

appendTo() - $('내용').appendTo('선택');

1.11 DOM요소 제거하기

jQuery('a').remove(); - <a>를 모두 제거한다. 

jQuery('a').remove('.remove'); - <a>중 특정클래스 .remove를 가진 녀석들만 제거한다.

1.12 DOM요소 교체하기

//HTML 예

<li class='remove'>name</li>

jQuery('li.remove').replaceWith('<li>removed</li>'); - .remove클래스를가진 name을 <li>removed</li>로 교체

jQuery('<li>removed</li>').replaceAll('li .remove'); -  .remove클래스를 가진녀석들을 <li>removed</li>로 교체

::접근 방법이 다를 뿐 결과는 같다. 다만 접근법이 조금 다르다

전자는 클래스 검색후 대체하는 방법이고 후자는 code를 저장후 검색된 클래스를 변경하는 방법

1.13 DOM요소 복제하기

//HTML 예

<body>

    <ul>

        <li>list</li>

        <li>list</li>

        <li>list</li>

        <li>list</li>

    </ul>

</body>

jQuery('ul').clone().appendTo('body') - ul을 검색후 복제품을 body안에 넣는다.

:: clone() : 대상이 되는 DOM element를 복제한다. 복제되는 element는 하위의 모든 자식 element들도 같이 복제된다.

:: clone(true) : 위와 동일하되, 입력 값이 true일 경우 대상 element에 적용되어 있는 event handler 속성 또한 복제됨

1.14 DOM 요소 어트리뷰트를 가져오고, 설정하고, 제거하기

jQuery('a').attr('href','http://www.jquery.com').attr('href');

:: <a>의 속성값 href를 위 주소로 변경한다. 그리고 href속성값 즉 변경된 주소를 반환한다.

jQuery('a').attr({ 'href':'http://www.jquery.com', 'title':'jquery.com'}).attr('href');

:: 위와 비슷하나 매개변수가아닌 개체를 전달하여 title 어트리뷰트도 추가적으로 설정가능하다.

addClass() - 기존 클래스값을 두고 새로운 클래스값을 추가

hasClass() - 특정 클래스에 대한 class어트리뷰트의 값을 확인

removeClass() - 클래스 속성에서 특정 클래스를 제거 *

toggleClass() - 지정된 특정 클래스가 존재 하지 않는다면 추가하고 존재하면 제거

1.15 HTML 콘텐츠 가져오기 및 설정하기

jQuery('p').html('<strong>Hello</strong>, I am a <em>&lt;p&gt;</em> element.');

jQuery('p).html();

::html을 삽입하고 가져온다.

1.16 텍스트 콘텐츠를 가져오고 설정하기

jQuery('p').text('Hello <p> World ');

jQuery('p').text();

::text를 삽입하고 가져온다.

1.17 전역적인 충돌없이 $ 별칭 사용하기

(function($){

})(jQuery);

::익명의 자기 호출 함수를 만들어 충돌을 막는다.