I think, therefore I am.

- jquery의 가장 강력한 부분은 HTML DOM을 마음대로 순회 탐색할 수 있다.(CSS 셀렉터 처럼)
ex) div p : div 요소의 자식으로 존재하는 모든 p요소

- selector 사용 예제
$("div p") or jQuery("div p")
$("#loginID") or jQuery("loginID")
$(".Columns") or jQuery(".Columns")
$("*") //모든 요소 선택

- 각각의 표현식은 각 DOM 요소의 확장 개체인 jQuery 개체 집합을 반환
DOM요소를 직접 반환 해주는 것이 아니라 그의 Wrapper인 jQuery개체를 반환하므로
직접 DOM 요소를 제어 할때 보다 훨씬 편하고 쉽게 개체를 제어할수 있다.(이게 무슨말인가?)

- 고급 CSS 셀렉터도 지원 : 계층 셀렉터, 일반 셀렉터, 어트리뷰트 필터 셀렉터
계층 셀렉터
ex)
p > a : p요소 바로 아래 자식인 a 요소(하이퍼링크)와 일치된다.
div + p : div 요소의 바로 다음에 나오는 형제(하나) p요소와 일치
div ~ p : div 요소의 다음에 나오는 모든 형제 p 요소와 일치

어트리뷰트 필터 셀렉터(jquery 정규식 지원)
ex)
a[title] : title어트리뷰트를 갖는 하이퍼 링크와 일치
a[href^="mailto:"] : href값이 mailto로 시작하는 하이퍼 링크
a[href$=".pdf"] : pdf파일에 링크가 걸린 모든 하이퍼링크와 일치
a[href*="taeyo.net"] : taeyo.net이라는 값이 포함되어 있는 하이퍼 링크와 일치
input[type="text"] : text형식의 입력 컨트롤과 일치된다.

- $(document).ready()
jQuery가 제공하공하는 이벤트 메서드, 문서의 DOM요소들을 조작 가능한 시점이 되면 자동으로 호출이 되는
이벤트 메서드

1. JQuery checkbox 컨트롤

1) checkbox checked 여부

id 인 경우 : $('input:checkbox [ id="checkbox_id" ]').is(":checked") == true;

name인 경우 : $('input:checkbox [ name="checkbox_name"]').is(":checked") == true;

2) checkbox 전체 갯수 : $('input:checkbox [ name="checkbox_name"]').length

3) checkbox 선택된 갯수 : $('input:checkbox [ name="checkbox_name"]:checked').length

4) checkbox 전체 순회 하며 checked 처리

$('input:checkbox [ name="checkbox_name"]').each(function() {

this.checked = true;

// if ( $(this).is(":checked") ) {

// 처리로직;

// }

});

5) checkbox value 값 가져오기

$('input:checkbox [ id="checkbox_id" ]').val();

6) checkbox checked 처리하기

$('input:checkbox [ id="checkbox_id"]').attr("checked", true);

2. JQuery radio 버튼 컨트롤

1) 선택된 라디오 버튼 값 가져오기

$('input:radio[name="certWay"]').val();

$(':radio[name="radio"]:checked').val();

3. JQuery select box 컨트롤

1) selelct box 내용 가져오기

$('#select_box > option:selected').val();

2) 값 설정

$('#select_box > option[value=지정값]').attr('selected', 'true');

3) select disabled

$('#select_box').attr('disabled', 'true');

정보 찾아서 보여주는 API

http://loopj.com/jquery-tokeninput/

$() 함수

우리가 작업하는 대상 객체를 만들어 내는, jQuery의 객체 생성 공장 같은 역할을 한다. jquery 객체는 여러개의 dom요소를 캡슐화할 수 있으며, 이것을 다양한 방식으로 다룰 수 있게 해준다.

.addClass() 메서드(<=> .removeClass())

선택한 페이지의 일부분에 CSS클래스를 적용하는 기능을 수행한다.

$(document).ready()메서드

수행시점과 상관없이 DOM이 로드되고 이미지가 로드되기 직전에 특정한 작업을 수행할 수 있다.

해당 함수는 한번만 호출되기 때문에 익명함수(anonymous function)<람다함수>기능을 사용하면 좀 더 최적화 시킬수 있다. jquery는 함수를 인자로 받는 메서드 들이 많기 때문에 이러한 표현 방식이 상당히 많이 사용된다.

이렇게 함수 내에 익명 함수를 정의하는 문법을 사용할 때, 클로저(closure)가 생성된다. 이것은 강력한 고급 기능이지만, 중첩 함수를 확장해서 사용하려는 경우 의도하지 않은 순서로 호출되거나 메모리 사용 문제가 발생할 수 있기 때문에 정확히 이해해 두는 것이 좋다.

Reference : jquery1.3 작고 강력한 자바스크립트 라이브러리(조나단 채퍼, 칼 스웨드버그)

jquery란 무엇인가?

jquery 라이브러리는 일반적인 웹 스크립팅에 폭넓게 사용될 수 있는 추상계층을 제공하므로, 스크립팅에서 필요로 하는 거의 모든 상황에 유용하게 활용할 수 있다.

2. 페이지가 보여지는 모습 변경하기 : 브라우저와 상관없이 동일한 표준을 제공하므로, 브라우저 간의 차이를 극복하도록 해준다. 또한 페이지가 렌더링된 후에도 클래스를 변경하거나 도큐먼트 일부분의 스타일을 개별적으로 바꿀 수 있도록 해준다.

3. 도큐먼트의 콘텐트 변경하기 : 간단한 코드로 외관 뿐만 아니라 도큐먼트 내용 자체를 API(Application Programming Interface)로 바꿀 수 있다.

4. 페이지와 사용자간 상호작용 처리 : jquery 라이브러리는 사용자의 링크 클릭등을 포함한 광범위한 이벤트를 가로채어 처리하는 세련된 방식을 제공하기에 브라우저간의 불일치 문제도 깔끔하게 처리해 준다.

5. 다큐먼트의 변화를 표시하는 애니메이션 추가하기 : 디자이너를 위해 효과 기능뿐만 아니라 새로운 효과를 만들 수 있는 툴킷을 제공하고 있다.

6. 페이지를 새로고침하지 않고 서버로 부터 정보를 가져오기 : 브라우저에 얽매이지 않는 AJAX(Asynchronous JavaScript And XML)기능을 제공하므로 개발자가 서버 측 기능에만집중할 수 있도록 해준다.

7. 일반적인 자바 스크립트 작업을 단순화 하기 : 자바스크립트의 확장기능이 추가로 제공된다.