초기 웹 프로그래밍에서는 웹 페이지내의 컨텐츠를 바꾸려면 서버에 필요한 요청을하고, 새로운 내용의 웹페이지 전체를 받아서 화면에 보여주는 방식이었습니다.
이 경우 페이지내의 많은 변하지 않는 부분(헤더, 푸터 등)도 매번 새로 받아와야 했었습니다. 그래서 페이지를 프레임(frame)으로 나누어 변하는 부분은 줄이는 방법도 많이 사용되었습니다.
요즘은 필요한 컨텐츠를 가져올 때는 ajax 를 통해서 백그라운드로 가져오고, 화면은 자바스크립트를 이용해서 페이지내의 요소들을 직접 바꾸는 방법을 주로 사용합니다.
이때 DOM(Document Object Model) 구조로 되어 있는 페이지내의 필요한 요소에 손쉽게 접근할 수 있게 해주는 자바스크립트 라이브러리로 많이 사용되는 것이 jQuery 입니다.
일단 필요한 요소에 접근하면 그 요소에 대한 값/속성 등의 변경, 활성/비활성화, 보이기/감추기, 애니메이션등 다양한 작업을 편리하게 할 수 있도록 해 도와줍니다.
현재 jQuery의 최신버전은 3.1.1 입니다.
https://code.jquery.com/jquery-3.1.1.min.js
Internet Explorer 6-8, Opera 12.1x or Safari 5.1+ 와 같은 하위 브라우저에 대한 지원이 필요하다면 jQuery 1.12 버전을 사용해야 합니다.
https://code.jquery.com/jquery-1.12.4.min.js
다음은 http://learn.jquery.com/using-jquery-c
jQuery의 기본 개념은 "어떤 엘리먼트를 선택하여 어떤 작업을 수행한다." 입니다. 작업을 할 엘리먼트를 선택하는 것이 기본이 되겠습니다. jQuery는 대부분의 CSS3 셀렉터를 지원합니다. 뿐만아니라 표준이 아닌 셀렉터도 지원합니다.
- ID 를 사용하여 선택하기 (ID 는 페이지 내에서 유일해야 합니다.)
$( "#myId" );
<p id="myId">아이디</p>
- 클래스명을 사용하여 선택하기 (동일한 클래스를 가지는 복수 요소가 선택될 수 있습니다.)
$( ".myClass" );
<p class="myClass">클래스</p>
- 속성으로 선택하기
$( "input[name='first_name']" );
<input type="text" name="first_name" />
- 복합 CSS 선택자로 선택하기 ( contents 를 id 로 가지는 요소 하위의 ul 요소중 people를 클래스로 가지는 ul 요소의 모든 li를 선택한다.)
$ ("#contents ul.people li" ).each(function(){console.log($(this).text(););});
<div id="contents">
<ul class="people">
<li>첫번째</li>
<li>두번째</li>
</ul>
</div>
- 콤마로 구분된 셀렉터의 리스트로 선택하기 (콤마(,) 로 분리된 요소들은 독립적입니다.)
$( "div.myClass, ul.people" );
<div class="myClass"></div>
<ul class="people"></ul>
- Pseudo-Selector(의사 선택자)
$( "a.external:first" ); // "external" 클래스를 가지는 a 요소중 첫번째 요소를 선택한다.
<a href="" class="external">첫번째</a>
<a href="" class="external">두번째</a>
$( "tr:odd" ); // table의 홀수 번째 행을 선택합니다. 행번호는 0 번 부터 시작합니다.
$( "tr:even" ); // table의 짝수 번째 행을 선택합니다.
$( "li:even" ); // table 외에 다른 요소에도 사용할 수 있습니다.
// 폼내에서 input 태그 모두 선택 합니다.
$( "#myForm :input" );
// 보이지 않는 div 들을 선택합니다.
$( "div:visible" );
$( "div:hidden" );
:visible, :hidden 선택자는 CSS의 visibility 또는 display 속성을 사용하여 판단하지 않습니다. 요소의 실체 높이와 너비가 0보다 큰지를 가지고 판단합니다.
// 처음 세개의 div 를 제외한 모든 div 들을 선택합니다. 카운트는 0부터 시작하므로 2보다 큰것이 되어 0,1,2 가 제외됩니다.
$( "div:gt(2)" );
// 모든 현재 애니메이션되는 div들을 선택합니다.
$( "div:animated" );
주의: :visible, :hidden 의사 선택자를 사용할 때, jQuery 는 엘리먼트의 실제 보여지는가를 체크합니다. 그 엘리먼트의 CSS 의 visibility 혹은 display 속성을 체크하지 않습니다. jQuery 는 엘리먼트의 페이지내에서의 물리적인 높이와 너비가 0보다 큰지를 확인합니다.
예외로
<tr>
엘리먼트에 대해서는 동작하지 않습니다.
<tr>
의 경우 jQuery는 CSS display 프로퍼티를 체크합니다. 그리고 display 프로퍼티가 none 으로 설정되면 hidden 으로 판단합니다.
엘리먼트가 DOM에 추가되지 않았다면 항상 hidden으로 판단합니다. CSS 가 그것들이 보이도록 되어 있어도 그렇습니다.
선택자 선택하기
좋은 선택자를 선택하는 것은 자바스크립트의 성능을 향상시키는 하나의 방법이 됩니다. 너무 특수한 것은 나쁜 선택이 될 수 있습니다. 만약 #myTable th.special과 같은 선택자로 처리할 수 있다면, #myTable thead tr th.special 같은 선택자는 지나치게 과합니다.
나의 선택에는 엘리먼트가 포함되어 있는가?
선택을 하고 나면, 선택된 것들로 작업을 할 수 있을지 알고 싶어 할것입니다. 통상적인 실수는 다음과 같이 사용하는 것입니다.
// 동작하지 않습니다.
if( $( "div.foo" ) ) {
...
}
이것은 동작하지 않습니다. 선택이 $()를 사용하여 만들어질 때, 객체가 항상 반환됩니다. 그리고 객체는 항상 true 로 평가됩니다. 그 선택이 어떤 엘리먼트도 포함하지 않았을때도 if 문장 안의 코드는 여전히 실행될 것입니다.
선택된 엘리먼트가 있는지 결정하는 가장 좋은 방법을 선택자의 .length 프로퍼티 를 확인하는 것입니다. 이것은 얼마나 많은 엘리먼트가 선택되었는지 알려줍니다.
만약 결과가 0 이라면 .length 프로퍼티는 boolean값으로 사용되어질 경우, false 로 평가 될 것입니다.
// 선택이 엘리먼트를 포함하고 있는지 테스트 합니다.
if ( $( "div.foo" ).length ) {
...
}
선택 저장하기
jQuery는 엘리먼트를 캐쉬하지 않습니다. 사용했던 선택을 다시 만들 필요가 있다면 선택 만들기를 반복하는 것보다 변수에 저장해야 합니다.
var divs = $( "div" );
변수에 저장하고 나면, 원래 선택에 대해 메소드를 호출하는 것과 동일하게 변수에 대해 메소드를 호출할 수 있습니다.
선택은 단지 선택이 만들어질 당시의 페이지상의 엘리먼트만을 가지고 옵니다. 만약에 엘리먼트들이 나중에 추가되었다면, 선택을 다시 해야만 할 것입니다. 그렇지 않으면 추가된 것들은 선택이 저장된 변수에 추가해야할 것입니다. 저장된 선택들은 DOM 이 변경될 때 자동적으로 업데이트 되지 않습니다.
선택의 정제와 필터링
때때로 선택은 우리가 찾는것보다 더 많을 것을 포함합니다. jQuery는 선택을 정제하고 필터하는데 필요한 여러 메소드를 제공합니다.
// 선택을 정제하기
$( "div.foo" ).has( "p" ); // <p> 태그를 포함하는 "div.foo" 엘리먼트
$( "h1" ).not( ".bar" ); // 클래스 bar 를 가지지 않는 <h1> 엘리먼트
$( "ul li" ).filter( ".current" ); // current 클래스를 가지는 ul li 아이템
$( "ul li" ).first(); // ul 리스트의 첫번재 아이템
$( "ul li" ).eq( 5 ); // 여섯번째 아이템
폼 엘리먼트 선택하기
jQuery 는 폼내의 엘리먼트를 찾는데 도움을 주는 여러개의 의사 선택자를 제공합니다. 이것들은 특히 유용한데, 표준 CSS 선택자들을 사용하여 타입이나 상태에 기반하여 폼엘리먼틀을 구분하기 힘들기 때문입니다.
:checked
:checkbox 와 체크된 체크박스들을 목표로하는 :checked를 혼동하지 말아야 합니다. 그러나 명심하세요. 이 선택자는 또한 체크된 라디오 버튼들과
<select>
엘리먼트와도 일을 한다는 것을요.(
<select>
엘리먼트만을 위해서는 :selected 선택자를 사용하세요.)
$( "form :checked" );
:checked 의사 선택자는 체크박스, 라디오 버튼, 콤보박스 와 동작합니다.
:disabled
:disabled 의사 선택자를 disabled 속성의 <input> 엘리먼트에 목표로 사용됩니다.
$( "form :disabled" );
따라서 :enabled 를 사용할 때 가장 좋은 성능을 얻으려면, 먼저 표준 jQuery 선택자로 엘리먼트를 선택한 다음, .filter(":enabled") 를 사용하거나, 의사 선택자 앞에 태그 이름이나 다른 선택자를 함께 사용합니다.
:input
:input 선택자를 사용하여 모든 <input>, <textarea>,
<select>
, <button> 엘리먼트를 선택합니다.
$( "form :input" );
:selected
:selected 의사 선택자는 <option> 엘리먼트 내의 모든 선택된 아이템들을 목표로 합니다.
$( "f
따라서 :selected 를 사용할때 가장 좋은 성능을 얻으려면, 먼저 표준 jQuery 선택자로 엘리먼트를 선택한 다음, .filter(":selected") 를 사용하거나, 의사 선택자 앞에 태그 이름이나 다른 선택자를 함께 사용합니다.
타입에 의해 선택하기
jQuery 는 유형에 따라 폼 정의 엘리먼트를 선택하는 의사 선택자를 제공한다.
:password - 패스워드 입력 필드
:reset - 리셋 버튼
:radio - 라디오 버튼
:text - 텍스트 입력필드
:submit - 폼 제출 버튼
:checkbox - 체크박스
:button - 버튼
:image - 이미지 폼 제출 버튼
:file - 파일 선택 필드
출처: http://pentode.tistory.com/97 [쉬고 싶은 개발자]