New 병아리 개발자

# 제이쿼리 학습 정리

# 이벤트가 발생한 요소 추적하기

• $(this) 선택자 : 이벤트가 발생한 요소를 선태갛여 이벤트가 발생한 요소를 추적할 수 있다.
• index() 인덱스 반환 메서드 : 이벤트를 등록한 요소 중 이벤트가 발생한 요소의 인덱스 값을 반환한다.

index() 이벤트 메서드 기본형
$("이벤트 대상 선택").on("이벤트 종류", function() {
	$("이벤트 대상 선택").index(this);
});

# 그룹 이벤트 등록 메서드

• 그룹 이벤트 등록 메서드 사용 시 한 번에 2개 이상의 이벤트를 등록할 수 있다.

## 그룹 이벤트 등록 메서드의 종류

1. on()
- 이벤트 대상 요소에 2개 이상의 이벤트를 등록한다.
- 사용 방식에 따라 이벤트를 등록한 이후에도 동적으로 생성되거나 복제된 요소에도 이벤트가 적용된다.
- on() 메서드의 기본형
	$([document | "이벤트 대상 상위 요소 선택"]).on("이벤트 종류", "이벤트 대상 선택", function() {
		자바스크립트 코드;
	});


2. bind()
- 이벤트 대상 요소에 2개 이상의 이벤트를 등록한다.


3. delegate()
- 선택한 요소의 하위 요소에 이벤트를 등록한다.
- 이벤트를 등록한 이후에도 동적으로 생성되거나 복제된 요소에도 이벤트를 적용한다.
- delegate() 메서드 기본형
	$([document | "이벤트 대상 상위 요소 선택"]).delegate("이벤트 대상 요소 선택", "이벤트 종류", function() {
		자바스크립트 코드;
	});


4. one()
- 이벤트 대상 요소에 1개 이상의 이벤트를 등록한다.
- 지정한 이벤트가 1회 발생하고 자동으로 해제된다.
- one() 메서드 기본 이벤트 등록 방식
	$("이벤트 대상 선택").one("이벤트 종류", function() {
		자바스크립트 코드;
	});
- one() 메서드 라이브 이벤트 등록 방식
	$([document | "이벤트 대상의 상위 요소 선택"]).one("이벤트 종류", "이벤트 대상 선택", function() {
    	자바스크립트 코드;
    });

## 이벤트 제거 메서드의 종류

1. off()
- on() 메서드로 등록한 이벤트를 제거한다.
- on() 이벤트 해제를 위한 off() 메서드
- 기본 이벤트 제거 방식
	$("이벤트 대상 요소 선택").off("이벤트 종류")
- 라이브 이벤트 제거 방식
	$([document | "이벤트 대상의 상위 요소 선택"]).off("이벤트 종류", "이벤트 대상 요소 선택");


2. unbind()
- bind() 메서드로 등록한 이벤트를 제거한다.
- bind() 이벤트 해제를 위한 unbind() 메서드
	$("이벤트 대상의 요소 선택").unbind("이벤트 종류")
    
    
3. undelegate()
- delegate() 메서드로 등록한 이벤트를 제거한다.
- delegate() 이벤트 해제를 위한 undelegate() 메서드
- 기본 이벤트 제거 방식
	$("이벤트 대상 요소 선택").undelegate("이벤트 종류")
- 라이브 이벤트 제거 방식
	$([document | "이벤트 대상의 상위 요소 선택"]).undelegate("이벤트 대상 선택", "이벤트 종류")

# 효과 메서드

• 효과(Effect) 메서드에는 선택한 요소를 역동적으로 숨겼다가 보이게 만드는 기능을 가진 메서드가 있다.
• 숨김

1. hide()
- 요소를 숨긴다.

2. fadeOut()
- 요소가 점점 투명해지면서 사라진다.

3. slideUp()
- 요소가 위로 접히며 숨겨진다.

• 노출

1. show()
- 숨겨진 요소가 노출된다.

2. fadeIn()
- 숨겨진 요소가 점점 선명해진다.

3. slideDown()
- 숨겨진 요소가 아래로 펼쳐진다.

• 노출, 숨김

1. toggle()
- hide(), show() 효과를 적용한다.

2. fadeToggle()
- fadeIn(), fadeOut() 효과를 적용한다.

3. slideToggle()
- slideUp(), slideDown() 효과를 적용한다.

4. fadeTo()
- 지정한 투명도를 적용한다.
- fadeTo() 기본형
	$("요소 선택").fadeTo(효과 요소 시간, 투명도, 콜백 함수)

• 효과 메서드의 기본형

효과 메서드의 기본형
$("요소 선택").효과 메서드(효과 소요 시간, 가속도, 콜백 함수)

- 효과 소요 시간 : 효과를 숨기거나, 노출할 때 소요되는 시간(1초=1,000)
- 가속도 : 숨기거나 노출하는 동안의 가속도
		1. swing : 시작과 끝은 느리게, 중간은 빠른 속도로 움직인다.(기본값)
        2. linear : 일정한 속도로 움직인다.
- 콜백 함수 : 노출과 숨김 효과가 끝난 후 실행 할 함수이다.(생략 가능)

# 동작을 불어넣는 애니메이션 메서드

## 애니메이션 메서드

• 애니메이션 메서드를 이용하여 스타일을 적용한 요소를 움직이게 할 수 있다.

animate() 메서드
- 선택한 요소에 다양한 동작(Motion) 효과를 적용 할 수 있다.
- animate() 메서드의 기본형
	$("요소 선택").animate({스타일 속성}, 적용 시간, 가속도, 콜백 함수);
    
    - 스타일 속성 : 애니메이션으로 적용할 스타일의 속성
    - 적용 시간 : 동작에 반응하는 데 소요되는 시간(1초=1,000)

## 애니메이션효과 제어 메서드

• 효과 또는 애니메이션이 적용된 요소의 동작을 제어하는 메서드
• 애니메이션 적용 원리와 큐의 개념

애니메이션 메서드는 함수가 적용된 순서대로 큐(queue)라는 저장소(memory)에 저장된다.

큐에 저장된 애니메이션 대기열이 있다면 먼저 들어간 애니메이션이 먼저 실행된다.

• 애니메이션 효과 제어 메서드의 종류

1. stop()
- 현재 실행 중인 효과를 모두 정지 시킨다.
- stop() 메서드의 기본형
	$("요소 선택").stop();
    $("요소 선택").stop(clearQueue, finish);
    
    
2. delay()
- 지정한 시간만큼 지연했다가 애니메이션을 진행한다.
- delay() 메서드의 기본형
	$("요소 선택").delay(지연 시간).애니메이션 효과 메서드();
    

3. queue()
- 큐에 사용자 정의 함수를 추가하거나 큐에 대기 중인 함수를 배열에 담아 반환한다.
  그리고 queue() 메서드 이후 애니메이션 효과 메서드는 모두 취소한다.
- queue() 메서드의 기본형
	- 큐(Queue)의 함수 반환
    	$("요소 선택").queue();
    - 큐(Queue)의 함수 추가
    	$("요소 선택").queue(function() {자바스크립트 코드; });
        

4. clearQueue()
- 큐에서 처음으로 진행하고 있는 애니메이션만 제외하고 대기 중인 애니메이션은 모두 제거한다.
- clearQueue() 메서드의 기본형
	$("요소 선택").clearQueue();
    
    
5. dequeue()
- queue() 메서드를 이용하면 대기하고 있는 애니메이션 메서드는 제거된다.
  하지만 de-queue() 메서드를 이용하면 메서드가 제거되는 것을 막을 수 있다.
- dequeue() 메서드의 기본형
	$("요소 선택").dequeue();
    
    
6. finish()
- 선택한 요소의 진행 중인 애니메이션을 강제로 완료 시점으로 보낸 후 종료한다.

# Ajax

• 비동기 방식의 자바스크립트와 XML을 가리킨다.

## 동기 방식과 비동기 방식의 차이점

1. 동기 방식
- 서버에 신호를 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있다.


2. 비 동기 방식
- 서버에 신호를 보냈을 때 응답상태와 상관없이 다음 동작을 수행할 수 있다.

## Ajax를 사용하는 이유, 사용 전후 비교

• Ajax를 사용하는 이유 : 화면 전환 없이 클라이언트와 서버간에 XML, JSON, 텍스트, HTML 등의 정보를 교환하기 위해

## Ajax 사용 전과 후 비교

1. Ajax 사용 전
- 사용자가 자료 요청 시 반드시 서버 컴퓨터를 거쳐야 자료를 요청할 수 있었다. 
  이 방식으로 자료 요청 시 잠시 페이지가 서버 스크립트 페이지로 갱신되어 화면이 깜빡거리고 그동안 사용자는 어떤 작업도 불가능 했다.


2. Ajax 사용 후
- 사용자가 서버에 자료 요청 시 서버 스크립트 페이지를 거치지 않고 자료를 받아 올 수 있다.
- 사용자는 서버에 자료를 요청하는 사이에도 다른 작업이 가능하다.

## Ajax 관련 메서드의 종류

1. load()
- 외부 콘텐츠를 가져올 때 사용한다.
- load() 메서드의 기본형
	$(요소 선택).load(url, data, 콜백 함수);
    

2. $.ajax()
- 데이터를 서버에 HTTP POST, GET 방식으로 전송할 수 있으며, 
  HTML XML, JSON, 텍스트 유형의 데이터를 요청 할 수 있는 통합적인 메서드이다.
- $.post(), $.get(), $.getJSON() 메서드의 기능을 하나로 합쳐 놓은 것이다.


3. $.post()
- 데이터를 서버에 HTTP POST 방식으로 전송 후 서버 측의 응답을 받을 때 사용한다.


4. $.get()
- 데이터를 서버에 HTTP GET 방식으로 전송 후 서버 측의 응답을 받을 때 사용한다.


5. $.getJSON()
- 데이터를 서버에 HTTP GET 방식으로 전송 후 서버 측의 응답을 JSON 형식으로 받을 때 사용한다.


6. $.getScript()
- Ajax를 이용하여 외부 자바스크립트를 불러온다.


7. .ajaxStop(function(){...})
- 비 동기 방식으로 서버에 응답 요청이 완료되었을 때 함수가 실행된다.


8. .ajaxSuccess(function(){...})
- ajax 요청이 성공적으로 완료되면 함수가 실행된다.


9. .ajaxComplete(function(){...})
- ajax 통신이 완료되면 함수가 실행된다.

Ajax의 기본형

$.ajax({
	url: "전송 페이지"(action url),
    type: "전송 방식"(get, post방식),
    data: "전송 데이터",
    dataType: "요청한 데이터 형식" ("html", "xml", "json", "text", "jsonp"),
    success: function(data) {
    	전송에 성공하면 실행될 코드;
    },
    error: function() {
    	전송에 실패하면 실행될 코드;
    }
});

- url : 데이터 전송 및 요청할 외부 주소를 입력한다.
- type : 전송 방식을 입력한다.
- data : 전송할 데이터를 입력한다.
- dataType : 서버로부터 받아 올 데이터의 형식을 지정한다.
- success : 데이터 전송 및 요청이 정상적으로 이뤄지면 함수가 실행된다.
  이때 매개변수(result)에는 요청한 데이터가 저장된다.

## $.ajax() 메서드의 옵션 종류

1. async
- 통신을 동기 또는 비 동기 방식으로 설정하는 옵션이다.
- 기본값은 비 동기 통신 방식인 true
- 비 동기 방식인 경우 사용자 컴퓨터에서 서버로 데이터를 전송하고 요청하는 동안에도 다른 작업이 가능하다.


2. beforeSend
- 요청하기 전 함수를 실행하는 이벤트 핸들러


3. cache
- 요청한 페이지를 인터넷에 캐시(저장)할지의 여부를 설정한다.
- 기본값은 true


4. complete
- Ajax가 완료되었을 때 함수를 실행하는 이벤트 핸들러


5. contentType
- 서버로 전송할 데이터의 content-type을 설정한다.
- 기본값은 application/x-www-form- ur-lencoded


6. data
- 서버로 전송할 데이터를 지정한다.


7. dataType
- 서버에서 받아올 데이터의 형식을 지정한다.
- 생략 시 요청한 자료에 맞게 자동으로 형식이 설정된다.


8. error
- 통신에 문제가 발생했을 때 함수를 실행한다.


9. success
- Ajax로 통신이 정상적으로 이뤄지면 이벤트 핸들러를 실행한다.


10. timeout
- 통신 시간을 제한한다. (시간 단위는 밀리초)


11. type
- 데이터를 전송할 방식을 설정한다. (get, post)


12. url
- 데이터를 전송할 페이지를 설정한다.
- 기본값은 현재 페이지


13. username
- HTTP 액세스를 할 때 인증이 필요한 경우, 사용자의 이름을 지정한다.

## Ajax 전송 데이터 가공 메서드의 종류

1. serialize()
- 사용자가 입력 요소에 값을 입력한 데이터의 전송 방식을 
  'name1=value1 & name2=value2, ..'와 같은 쿼리 스트링 형식의 데이터로 변환해 반환한다.


2. serializeArray()
- 사용자가 입력 요소에 값을 입력한 데이터의 전송 방식을 
  [{name1:value1}, {name2:value2}]와 같은 배열 객체로 변환해 반환한다.
  
  
3. $.param()
- {name1:value1, name2:value2} 와 같이 작성된 객체를 가공해
  'name1=value1 & name2=value2, ..'와 같은 쿼리 스트링 형식의 데이터로 변환해 반환한다.
  
  
4. JSON.parse()
- 객체 형태로 작성한 문자열 데이터를 객체로 가공해 반환한다.


5. JSON.stringfy()
- 객체를 문자열 데이터로 가공해 반환한다.

## Ajax로 JSON 데이터 바인딩하기

• 바인딩 : '묶다'라는 의미로, 비 동기 통신 기술을 이용하여 서버 데이터베이스(DB)에 데이터를 요청하고 데이터베이스에 요청한 데이터를 받아와 HTML 문단 태그에 결합하는 것을 의미한다.

# 제이쿼리 플러그인

• 여러 개발자가 유용한 기능 등을 구현해 놓은 프로그램을 자바스크립트 파일로 제공하는 제이쿼리 라이브러리이다.
• 플러그인을 상업적으로 사용하려면 저작권에 주의해야 한다.
• 무료 저작권의 종류

1. 자유 수정 가능
- MIT, BSD, Apache, Public Domain, Free


2. 수정 시 부분 공개
- LGPL, MPL

출처 : Do it! 자바스크립트+제이쿼리 입문책

# 제이쿼리 학습 정리

# 객체 조작 메서드

• 객체를 생성, 복제, 삭제, 속성 변환하는 메서드
• 속성 조작 메서드 : 요소의 속성을 바꿀 때 사용한다.

1. html()  / html("새 요소")
- 선택한 요소의 하위 요소를 가져와 문자열로 반환하거나, 하위 요소를 전부 제거하고 새 요소로 바꿀 때 사용한다.
- 예)
$("요소 선택").html()	// 선택한 요소의 하위 요소를 가져온다.
$("요소 선택").html("새 요소")	// 선택한 요소의 하위 요소를 모두 제거하고, 그 위치에 지정한 새 요소를 생성한다.

2. text() / text("새 ㅌ텍스트")
- 선택한 요소에 포함되어 있는  전체 텍스트를 가져오거나, 선택한 하위 요소를 전부 제거하고 새 텍스트를 생성할 때 사용한다.
- 예)
$("요소 선택").text()	// 선택한 요소가 감싸는 모든 텍스트를 가져온다.
$("요소 선택").text("새 텍스트")	// 선택한 요소의 하위 요소를 모두 제거하고, 그 위치에 지정한 새 텍스트를 생성한다.

3. attr("속성명")  / attr("속성명", "새 값")
- 선택한 요소에 새 속성을 생성하거나 기존 속성을 변경할 때 또는 요소의 속성값을 불러올 때 사용한다.
- 예)
$("요소 선택").attr("속성명")	// 선택한 요소의 지정한 속성값을 가져온다.
$("요소 선택").attr("속성명", "새 값")	// 요소를 선택하여 지정한 속성에 새 값을 적용한다.

4. removeAttr("속성명")
- 선택한 요소에서 기존 속성을 삭제할 때 사용한다.
- 예)
$("요소 선택").removeAttr("속성명")	// 선택한 요소의 지정한 속성만 제거한다.

5. prop("상태 속성명")  / prop("상태 속성명", "새 값")
- 선택한 폼 요소의 상태 속성값을 가져오거나, 새롭게 설정할 때 사용한다.
  그리고 선택한 요소의 태그명, 노드 타입, 선택 상자의 선택된 옵션의 인덱스 값도 알 수 있다.
- 예)
$("요소 선택").prop("상태 속성명")	// 선택한 요소의 상태 속성값을 가져온다.
$("요소 선택").prop("상태 속성명", "새 값")	// 요소를 선택하여 상태 속성에 새 값을 적용한다.

6. val()  / val("새 값")
- 선택한 폼 요소의 value 속성값을 가져오거나, 새 값을 적용할 때 사용한다.
- 예)
$("요소 선택").val()	// 선택한 폼 요소의 value 값을 가져온다.
$("요소 선택").val("새 값")	// 폼 요소를 선택하여 value 속성에 새 값을 적용한다.

7. css("속성명")  / css("속성명", "새 값")
- 예)
$("요소 선텍").css("속성명")	// 선텍한 요소의 지정한 스타일(CSS) 속성값을 가져온다.
$("요소 선텍").css("속성명", "새 값")	// 요소를 선택하여 지정한 스타일(CSS) 속성에 새 값을 적용한다.

8. addClass("class 값")
- 선택한 요소에 클래스를 생성한다.
- 예)
$("요소 선택").addClass("class 값")	// 선택한 요소의 clss 속성에 새 값을 추가한다.

9. removeClass("clss 값")
- 선택한 요소에서 지정한 클래스를 삭제한다.
- 예)
$("요소 선택").removeClass("class 값")	// 선택한 요소의 class 속성에서 지정한 값만 제거한다.

10. toggleClass("class 값")
- 선택한 요소에 지정한 클래스가 없으면 생성, 있으면 삭제한다.
- 예)
$("요소 선택").toggleClass("class 값")	// 선택한 요소의 class 값에 지정한 값이 포함되어 있으면 제거하고 속성값이 없으면 추가한다.

11. hasClass("hasClass")
- 선택한 요소에 지정한 클래스가 있으면 true, 없으면 false를 반환한다.
- 예)
$("요소 선택").hasClass("class 값")	// 선택한 요소의 class 값에 지정한 클래스 값이 포함되어 있으면 true를, 없으면 false를 반환한다.

• 수치 조작 메서드 : 요소의 너빗값 또는 높잇값 등 수치를 바꿀 떄 사용한다.

1. height()
- 여백 및 선 두께를 제외한 순수 요소의 높잇값을 계산한다.
- 예)
$("요소 선택").height()  / $("요소 선택").height(100)	
// 안쪽 여백과 선을 제외한 높잇값을 반환하거나 변환한다.

2. width()
- 여백 및 선 두께를 제외한 순수 요소의 너빗값을 계산한다.
- 예)
$("요소 선택").width()  / $("요소 선택").width(100)	
// 안쪽 여백과 선을 제외한 너빗값을 반환하거나 변환한다.

3. innerHeight()
- 여백을 포함한 요소의 높잇값을 계산한다.
- 예)
$("요소 선택").innerHeight()  / $("요소 선택").innerHeight(300)	
// 안쪽 여백을 포함한 높잇값을 반환하거나 변환한다.

4. InnerWidth()
- 여백을 포함한 요소의 너빗값을 계산한다.
$("요소 선택").innerWidth()  / $("요소 선택").innerWidth(100)	
// 안쪽 여백을 포함한 너빗값을 반환하거나 변환한다.

5. outerHeight()
- 여백 및 선을 포함한 요소의 높잇값을 계산한다.
- 예)
$("요소 선택").outerHeight()  / $("요소 선택").outerHeight(100)
// 선과 안쪽 여백을 포함한 높잇값을 변환한다.

6. outerWidth()
- 여백 및 선을 포함한 요소의 너빗값을 계산한다.
- 예)
$("요소 선택").outerWidth()  / $("요소 선택").outerWidth(100)
// 선과 안쪽 여백을 포함한 너빗값을 변환한다.

7. position()
- 포지션 기준이 되는 요소를 기준으로 선택한 요소에서 가로/세로로 떨어진 위치의 좌푯값을 반환하거나 변경할 때 사용한다.
- 예)
$("요소 선택").position().left  / $("요소 선택").position().top
// 선택한 요소의 포지션의 위칫값을 반환한다.

8. offset()
- 문서를 기준으로 선택한 요소의 가로/세로로 떨어진 위치의 좌푯값을 반환하거나 변경할 때 사용한다.
- 예)
$("요소 선택").offset().left  / $("요소 선택").offset().top
// 선택한 요소가 문서에서 수평/수직으로 얼마나 떨어져 있는지에 대한 값을 반환한다.

9. scrollLeft()
- 브라우저의 스크롤바가 수평으로 이동한 위칫값을 불러오거나 변경할 때 사용한다.
- 예)
$(window).scrollLeft()
// 브라우저의 수평 스크롤 이동 높잇값을 반환한다.

10. scrollTop()
- 브라우저의 스크롤바가 수직으로 이동한 위칫값을 불러오거나 변경할 때 사용한다.
- 예)
$(window).scrollTop()
// 브라우저의 수직 스크롤 이동 너빗값을 반환한다.

• 객체 편집 메서드 : 객체를 생성, 삭제, 복제할 때 사용한다.

1. before()
- 예)
$("요소 선택").before("새 요소")
// 선택한 요소의 이전 위치에 새 요소를 추가한다.

2. after()
- 예)
$("요소 선택").after("새 요소")
// 선택한 요소의 다음 위치에 새 요소를 추가한다.

3. append()
- 예)
$("요소 선택").append("새 요소")
// 선택한 요소의 마지막 위치에 새 요소를 추가한다.

4. appendTo()
- 예)
$("새 요소).appendTo("요소 선택")
// 선택한 요소의 마지막 위치에 새 요소를 추가한다.

5. prepend()
- 예)
$("요소 선택").prepend("새 요소")
// 선택한 요소의 맨 앞 위치에 새 요소를 추가한다.

6. prependTo()
- 예)
$("새 요소").prependTo("요소 선택")
// 선택한 요소의 맨 앞 위치에 새 요소를 추가한다.

7. insertBefore()
- 예)
$("새 요소").insertBefore("요소 선택")
// 선택한 요소의 이전 위치에 새 요소를 추가한다.

8. insertAfter()
- 예)
$("새 요소").insertAfter("요소 선택")
// 선택한 요소의 다음 위치에 새 요소를 추가한다.

9. clone()
- 예)
$("요소 선택").clone("true or false")
// 선택한 문서 객체를 복제한다. 이때 인자값이 true 일 경우 하위 요소까지 모두 복제, false일 경우 선택한 요소만 복제한다.

10. empty()
- 예)
$("요소 선택").empty()
// 선택한 요소의 하위 내용들을 모두 삭제한다.

11. remove()
- 예)
$("요소 선택").remove()
// 선택한 요소를 삭제한다.

12. replaceAll()
- 예)
$("새 요소").replaceAll("요소 선택")  / $("요소 선택").replaceAll("새 요소")
// 선택한 요소들을 새 요소로 교체한다.

13. unwrap()
- 예)
$("요소 선택").unwrap()
// 선택한 요소의 부모 요소를 삭제한다.

14. wrap()
- 예)
$("요소 선택").wrap(새 요소)
// 선택한 요소를 새 요소로 각각 감싼다.

15. wrapAll()
- 예)
$("요소 선택").wrapAll()
// 선택한 요소를 새 요소로 한꺼번에 감싼다.

16. wrapInner()
- 예)
$("요소 선택").wrapInner(새 요소)
// 선택한 요소의 내용을 새 요소로 각각 감싼다.

# 제이쿼리 이벤트

• 이벤트 : 웹 사이트 방문자의 모든 동작을 의미
• 이벤트 핸들러 : 이벤트가 발생했을 때 코드를 실행시키는 것

# 이벤트 등록 메서드

• 기본형 : 이벤트 대상 $("#btn") / click() : 이벤트 등록 메서드 / function() { ... } : 이벤트 핸들러

<button id="btn">버튼</button>
$("#btn").click(function() {
	자바스크립트 코드;
});

## 로딩 이벤트

1. load()
- 선택한 이미지 도는 프레임 요소에 연동된 소스의 로딩이 완료된 후 이벤트가 발생한다.

2. ready()
- 지정한 HTML 문서 객체의 로딩이 완료된 후 이벤트가 발생한다.

3. error()
- 이벤트 대상 요소에서 오류가 발생하면 이벤트가 발생한다.

## 마우스 이벤트

1. click()
- 선택한 요소를 클릭했을 때 이벤트가 발생한다.

2. dblclick
- 선택한 요소를 연속해서 두 번 클릭했을 때 이벤트가 발생한다.

3. mouseout()
- 선택한 요소의 영역에서 마우스 포인터가 벗어났을 때 이벤트가 발생, 이때 하위 요소의 영향을 받는다,

4. mouseover()
- 선택한 요소의 영역에 마우스 포인터를 올렸을 때 이벤트가 발생한다.

5. hover()
- 선택한 요소에 마우스 포인터를 올렸을 떄와 벗어났을 때 각각 이벤트가 발생한다.

6. mousedown()
- 선택한 요소에서 마우스 버튼을 눌렀을 때 이벤트가 발생한다.

7. mouseup()
- 선택한 요소에서 마우스 버튼을 눌렀다 떼었을 때 이벤트가 발생한다.

8. mouseenter()
- 선택한 요소 범위에 마우스 포인터를 올렸을 때 이벤트가 발생한다.

9. mouseleave()
- 선택한 요소 범위에서 마우스 포인터가 벗어났을 때 이벤트가 발생한다.

10. mousenove()
- 선택한 요소 범위에서 마우스 포인터를 움직였을 떄 이벤트가 발생한다.

11. scroll()
- 가로, 세로 스크롤바를 움직일 때마다 이벤트가 발생한다.

## 포커스 이벤트

1. focus()
- 선택한 요소에 포커스가 생성되었을 때 이벤트를 발생하거나, 선택한 요소에 강제로 포커스를 생성한다.

2. focusin()
- 선택한 요소에 포커스가 생성되었을 때 이벤트가 발생한다.

3. focusout()
- 포커스가 선택한 요소에서 다른 요소로 이동되었을 때 이벤트가 발생한다.

4. blur()
- 포커스가 선택한 요소에서 다른 요소로 이동되었을 때 이벤트가 발생하거나 선택한 요소의 포커스가 강제로 사라지도록 한다.

5. change()
- 이벤트 대상인 입력 요소의 값이 변경되고, 포커스가 이동하면 이벤트가 발생한다. 그리고 강제로 change 이벤트를 발생시킬 때도 사용한다.

## 키보드 이벤트

1. kerpress()
- 선택한 요소에서 키보드를 눌렀을 때 이벤트가 발생한다.
  그리고 문자 키를 제외한 키의 코드값을 반환한다.
  
2. keydown()
- 선택한 요소에서 키보드를 눌렀을 때 이벤트가 발생한다.
  키보드의 모든 키의 코드값을 반환한다.
  
3. keyup()
- 선택한 요소에서 키보드에서 손을 떼었을 때 이벤트가 발생한다.

## 단독 이벤트 등록 메서드

• 대상에 한 가지 동작에 대한 이벤트만 등록할 수 있다.
• 단독 이벤트 등록 메서드(기본형)

$("이벤트 대상 선택").이벤트 등록 메서드(function() {
	자바스크립트 코드;
});

• 단독 이벤트 등록 메서드 사용 예

// 사용자가 버튼 클릭 시 환영 메시지를 경고 창에 출력

<button class="btn_1">버튼</button>
$(".btn_1").click(function() {
	alert("환영합니다.");
});

## 그룹 이벤트 등록 메서드

• 한 가지 동작 이상의 이벤트를 등록할 수 있다.
• 그룹 이벤트 등록 메서드(기본형)

1. on() 메서드 등록방식 1
$("이벤트 대상 선택").on("이벤트 종류1 이벤트 종류2 ... 이벤트 종류n", function() {
	자바스크립트 코드;
});


2. on() 메서드 등록방식 2
$("이벤트 대상 선택").on({
	"이벤트 종류1 이벤트 종류2 ... 이벤트 종류n":function() {
    	자바스크립트 코드;
    }
});


3. on() 메서드 등록방식 3
$("이벤트 대상 선택").on({
	"이벤트 종류1":function(){자바스크립트 코드1};,
    "이벤트 종류2":function(){자바스크립트 코드2};,
    ...
    "이벤트 종류n":function(){자바스크립트 코드n};
});

## 강제로 이벤트 발생시키기 

- '강제로 이벤트가 발생했다'는건 사용자에 의해 이벤트가 발생된게 아닌, 핸들러에 의해 자동으로 이벤트가 발생된 것을 의미한다.

- trigger() 메서드를 사용하면 강제로 이벤트를 발생시킬 수 있다.

## 이벤트 제거 메서드

• 이벤트를 제거하는 메서드에는 off()가 있다.
• 이벤트 제거 메서드(기본형)

$("이벤트 대상").off("제거할 이벤트 종류");

## 로딩 이벤트 메서드

• 사용자가 브라우저에서 HTML 문서를 요청하여 HTML 문서의 로딩이 완료되면 이벤트 핸들러를 실행한다. 로딩 이벤트 메서드에는 ready()와 load()가 있다.
• 로딩 이벤트 메서드(기본형)

1.
$(document).ready(function() {자바스크립트 코드; });

2.
$(document).on("ready", function() {자바스크립트 코드; });

3.
$(window).load(function() {자바스크립트 코드; });

4.
$(window).on("load", function() {자바스크립트 코드; });

## 마우스 이벤트 메서드

• 사용자가 사이트에서 마우스를 이용해 취하는 모든 행위를 말한다. 마우스 이벤트 메서드에는 click(), dblclick() 등이 있다.
• 마우스 이벤트 메서드(기본형)

1. click 이벤트 등록
$("이벤트 대상 선택").click(function() {자바스크립트 코드; });
$("이벤트 대상 선택").on("click", function() {자바스크립트 코드; });

2. click 이벤트 강제 발생
$("이벤트 대상 선택").click();

3. dblclick 이벤트 등록
$("이벤트 대상 선택").dblclick(function() {자바스크립트 코드; });
$("이벤트 대상 선택").on("dbclick", function() {자바스크립트 코드; });

4. dblclick 이벤트 강제 발생
$("이벤트 대상 선택").dblclick();

## <a>, <form> 태그에 클릭 이벤트 적용 시 기본 이벤트 차단하기

기본형
1. return false를 이용한 차단
$("a 또는 form").이벤트 메서드(function() {
	자바스크립트 코드;
    return false;
});

2. preventDefault() 메서드를 이용한 차단
$("a 또는 form").이벤트 메서드(function(e) {
	e.preventDefault();
    자바스크립트 코드;
});

## mouseover() / mouseout() / hover() 이벤트 메서드

mouseover() 기본형
1. mouseover 이벤트 등록
$("이벤트 대상 선택").mouseover(function() {자바스크립트 코드; });
$("이벤트 대상 선택").on("mouseover", function() {자바스크립트 코드; });

2. mouseover 이벤트 강제 발생
$("이벤트 대상 선택").mouseover();


mouseout() 기본형
1. mouseout 이벤트 등록
$("이벤트 대상 선택").mouseout(function() {자바스크립트 코드; });
$("이벤트 대상 선택").on("mouseout", function() {자바스크립트 코드; });

2. mouseout 이벤트 강제 발생
$("이벤트 대상 선택").mouseout();


hover() 기본형
1. hover 이벤트 등록
$("이벤트 대상 선택").hover(
	function() {마우스 오버 시 실행될 코드},
    function() {마우스 아웃 시 실행될 코드}
);

## mouseenter() / mouseleave() 이벤트 메서드

mouseenter() 기본형
1. mouseenter 이벤트 등록
$("이벤트 대상 선택").mouseenter(function() {자바스크립트 코드; });
$("이벤트 대상 선택").on("mouseenter", function() {자바스크립트 코드; });

2. mouseenter 이벤트 강제 발생
$("이벤트 대상 선택").mouseenter();


mouseleave() 기본형 
1. mouseleave 이벤트 등록
$("이벤트 대상 선택").mouseleave(function() {자바스크립트 코드; });
$("이벤트 대상 선택").on("mouseleave", function() {자바스크립트 코드; });

2. mouseleave 이벤트 강제 발생
$("이벤트 대상 선택").mouseleave();

## mousemove() 이벤트 메서드

mousemove() 기본형
1. mousemove() 이벤트 등록
$("이벤트 대상 선택").mousemove(function() {자바스크립트 코드; });
$("이벤트 대상 선택").on("mousemove", function() {자바스크립트 코드; });

2. mousemove() 이벤트 강제 발생
$("이벤트 대상 선택").mousemove();

# 이벤트 객체와 종류

• 사용자가 이벤트를 발생시킬 떄마다 이벤트  핸들러의 매개변수에는 이벤트 객체가 생성, 이벤트 객체에는 이벤트 타입에 맞는 다양한 정보를 제공하는 속성과 메서드가 포함되어 있다.
• 이벤트 객체 생성의 기본형

${"이벤트 대상 선택").mousemove(function(매개변수) {
	매개변수(이벤트 객체).속성;
});

## 마우스 이벤트

1. clientX
- 마우스 포인터의 X 좌푯값 반환(스크롤 이동 거리 무시)

2. clientY
- 마우스 포인터의 Y 좌푯값 반환(스크롤 이동 거리 무시)

3. pageX
- 스크롤 X축의 이동한 거리를 계산하여 마우스 포인터의 X 좌푯값을 반환

4. pageY
- 스크롤 Y축의 이동한 거리를 계산하여 마우스 포인터의 Y 좌푯값을 반환

5. screenX
- 화면 모니터를 기준으로 마우스 포인터의 X 좌푯값을 반환

6. screenY
- 화면 모니터를 기준으로 마우스 포인터의 Y 좌푯값을 반환

7. layerX
- position을 적용한 요소를 기준으로 마우스 포인터의 X 좌푯값을 반환

8. layerY
- position을 적용한 요소를 기준으로 마우스 포인터의 Y 좌푯값을 반환

9. button
- 마우스 버튼의 종류에 따라 값을 반환(왼쪽: 0 / 휠: 1 / 오른쪽: 2)

## 키보드 이벤트

1. keyCode
- 키보드의 아스키 코드값을 반환

2. altKey
- 이벤트 발생 시 Alt 키가 눌렸으면 true를, 아니면 false를 반환

3. ctrlKey
- 이벤트 발생 시 Ctrl 키가 눌렸으면 true를, 아니면 false를 반환

4. shiftKey
- 이벤트 발생 시 Shift 키가 눌렸으면 true를, 아니면 false를 반환

## 전체 이벤트

1. target
- 이벤트가 전파된 마지막 요소를 가리킨다.

2. cannelBubble
- 이벤트의 전파를 차단하는 속성으로, 기본값은 false이며, true로 설정함녀 전파가 차단된다.

3. stopPropagation()
- 이벤트의 전파를 차단한다.

4. preventDefault()
- 기본 이벤트를 차단한다.

## scroll() 이벤트 메서드

• 대상 요소의 스크롤바가 이동할 때마다 이벤트를 발생시키거나 강제로 scroll 이벤트를 발생시키는데 사용한다.

scroll() 이벤트의 기본형
1. scroll 이벤트 등록
$("이벤트 대상 선택").scroll(function() {자바스크립트 코드; });
$("이벤트 대상 선택").on("scroll", function() {자바스크립트 코드; });

2. scroll 이벤트 강제 발생
$("이벤트 대상 선택").scroll();

## 포커스 이벤트

• 포커스의 경우 마우스로 <a> 또는 <input> 태그를 클릭하거나 Tab 키를 누르면 생성된다.
• 키보드 접근성 : 사용자가 키보드만으로 사이트를 이용해도 불편함이 없도록 하는 것
• focus() 이벤트 메서드 : 대상 요소로 포커스가 이동하면 이벤트를 발생시킨다.

focus 이벤트 메서드 기본형
1. focus 이벤트 등록
$("이벤트 대상 선택").focus(function() {자바스크립트 코드; });
$("이벤트 대상 선택").on("focus", function() {자바스크립트 코드; });

2. focus 이벤트 강제 발생
$("이벤트 대상 선택").focus();

• blur() 이벤트 메서드 : 포커스가 대상 요소에서 다른 요소로 이동하면 이벤트를 발생시킨다.

blur 이벤트 메서드 기본형
1. blur 이벤트 등록
$("이벤트 대상 선택").blur(function() {자바스크립트 코드; });
$("이벤트 대상 선택").on("blur", function() {자바스크립트 코드; });

2. blur 이벤트 강제 발생
$("이벤트 대상 선택").blur();

• focusin() 이벤트 메서드 : 대상 요소의 하위 요소 중 입력 요소로 포커스가 이동하면 이벤트를 발생시킨다.

focusin 이벤트 메서드 기본형
1. focusin 이벤트 등록
$("이벤트 대상 선택").focusin(function() {자바스크립트 코드; });
$("이벤트 대상 선택").on("focusin", function() {자바스크립트 코드; });

2. focusin 이벤트 강제 발생
$("이벤트 대상 선택").focusin();

• focusout() 이벤트 메서드 : 대상 요소의 하위 요소 중 입력 요소에서 외부 요소로 이동하면 이벤트를 발생시킨다.

focusout 이벤트 메서드 기본형
1. focusout 이벤트 등록
$("이벤트 대상 선택").focusout(function() {자바스크립트 코드; });
$("이벤트 대상 선택").on("focusout", function() {자바스크립트 코드; });

2. focusout 이벤트 강제 발생
$("이벤트 대상 선택").focusout();

## 키보드로 마우스 이벤트 대응하기

• 키보드 접근성이란 어떤 대상 요소에 마우스 이벤트를 등록했을 때 마우스 없이 키보드로 대상 요소를 사용할 수 있게 하는 것이다.
• 마우스 이벤트에 대한 키보드 대응 이벤트

1. 마우스 이벤트 mouseover : 이보크 이벤트 focus

2. 마우스 이벤트 mouseout : 키보드 이벤트 blur

• 키보드 접근성을 배려한 이벤트 적용의 예

<button class="btn">버튼</button>
<p class="txt_1">내용1</p>
$(".btn").on("mouseover focus", function() {
	$(".txt_1").hide();
});

## change() 메서드

• 선택한 폼 요소의 값(value)을 새 값으로 변경한다. 그리고 포커스가 다른 요소로 이동하면 이벤트를 발생시킨다.

change() 메서드의 기본형
1. change 이벤트 등록
$("이벤트 대상 선택").change(function() {"자바스크립트 코드; "});
$("이벤트 대상 선택").on(function() {"자바스크립트 코드; "});

2. change 이벤트 강제 발생
$("이벤트 대상 선택").change();

## keydown() 메서드

keydown() 이벤트 메서드 기본형
1. keydown 이벤트 등록
$("이벤트 대상 선택").keydown(function() {자바스크립트 코드; });
$("이벤트 대상 선택").on("keydown", function() {자바스크립트 코드; });

2. keydown 이벤트 강제 발생
$("이벤트 대상 선택").keydown();

## keyup() 메서드

keyup() 이벤트 메서드 기본형
1. keyup 이벤트 등록
$("이벤트 대상 선택").keyup(function() {자바스크립트 코드; });
$("이벤트 대상 선택").on("keyup", function() {자바스크립트 코드; });

2. keyup 이벤트 강제 발생
$("이벤트 대상 선택").keyup();

## keypress() 메서드

keypress() 이벤트 메서드 기본형
1. keypress 이벤트 등록
$("이벤트 대상 선택").keypress(function() {자바스크립트 코드; });
$("이벤트 대상 선택").on("keypress", function() {자바스크립트 코드; });

2. keypress 이벤트 강제 발생
$("이벤트 대상 선택").keypress();

출처 : Do it! 자바스크립트+제이쿼리 입문책

# 체이닝 기법

• 선택한 요소에 메서드를 연속해서 사용할 수 있는 것으로, 마치 체인이 엮인 모양과 같다고 하여 체이닝 기법이라고 한다.
• 제이쿼리에서 다양한 메서드를 줄줄이 이어 사용할 수 있고, 메서드 사용 완료 시 문장 마지막에 세미콜론(;)을 작성하여 마무리 한다.

$(요소 선택).css(속성1, 값1).css(속성2, 값2).css(속성3, 값3)

# 제이쿼리 학습 정리

# 선택자

• CSS선택자와 마찬가지로 선택한 요소의 디자인 속성 등을 적용할 때 사용할 수 있다. 이때 HTML에 작성한 스타일(CSS)는 사용자의 동작에 의해 변경될 수 없기 때문에 "정적이다"고 표현한다.
• 하지만 제이쿼리는 선택자를 사용 시 "동적"으로 스타일을 적용할 수 있다. 선택자를 정확하고 깊이 있게 공부하기 위해서는 문서 객체 모델에 대해 알아야 한다.
• 문서 객체 모델 : HTML 문서 객체 구조를 의미, HTML 문서의 기본 객체 구조는 최상위 객체인 <html>이 있고 하위 객체로 <head>, <body>가 있다.
• <body> 태그는 문단 태그, 테이블 태그, 폼 태그 등을 포함할 수 있다. 이때 문서 객체 모델에서는 모든 태그를 객체라고 부르며, 태그에는 기능과 속성이 포함되어 있다. (예) <img> 태그의 경우 이미지 출력하는 기능이 존재, 속성에는 src, alt, width, height 등이 있다.)
• HTML의 문서 객체 구조를 그림으로 표현 시 트리 구조가 된다. 이때 가장 상위에 위치하는 <html>을 뿌리(Root)라고 부르며, 뿌리에서 가지처럼 뻗어나가는 모양의 요소를 노드(Node)라고 부른다. 노드에는 요소 노드, 텍스트 노드, 속성 노드 등이 있다.

## 선택자의 사용

• 제이쿼리 선택자로 스타일, 속성 적용을 위한 기본형 : 선택자는 $()에 문자형 데이터로 CSS 선택자를 입력한다.

1. 선택한 요소에 지정한 스타일 적용
$("CSS 선택자").css("스타일 속성명", "값")

2. 선택한 요소에 지정한 속성 적용
$("CSS 선택자").attr("속성명", "값");

## 기본 선택자

• 직접 선택자 : 멀리 떨어진 요소를 직접 선택할 때 사용한다. 전체(*), 아이디(#), 클래스(), 요소명, 그룹(,) 선택자가 있다.

1. $("*")
- 전체 선택자
- 모든 요소를 선택한다.

2. $("#아이디명")
- 아이디 선택자
- id 속성에 지정한 값을 가진 요소를 선택한다.

3. $(".클래스명")
- 클래스 선택자
- class 속성에 지정한 값을 가진 요소를 선택한다.

4. $("요소명")
- 요소 선택자
- 지정한 요소명과 일치하는 요소들만 선택한다.

5. $("선택1, 선택2, 선택3, ... , 선택n")
- 그룹 선택자
- 선택1, 선택2, 선택3, ... , 선택n에 지정된 요소들을 한 번에 선택한다.

6. $("p.txt_1") / $("p#txt_1")
- 종속 선택자
- <p> 요소 중 class 값이 txt_1인 요소 또는 id 값이 txt_1인 요소를 선택한다.

• 인접 관계 선택자 : 직접 선택자로 요소를 먼저 선택, 그 다음 선택한 요소와 가까이 있는 요소를 선택할 때 사용한다.

1. $("요소 선택자").parent()
- 부모 요소 선택자
- 선택한 요소의 부모 요소를 선택한다.

2. $("요소 선택자").parents()
- 상위 요소 선택자
- 선택한 요소의 상위 요소를 모두 선택한다.

3. $("요소 선택자").closest("div")
- 가장 가까운 상위 요소 선택자
- 선택한 요소의 상위 요소 중 가장 가까운 <div>만 선택한다.

4. $("요소 선택 하위 요소")
- 하위 요소 선택자
- 선택한 요소에 지정한 하위 요소를 선택한다.

5. $("요소 선택>자식 요소")
- 자식 요소 선택자
- 선택한 요소를 기준으로 자식 관계에 지정한 요소만 선택한다.

6. $("요소 선택").children()
- 자식 요소들 선택자
- 선택한 요소의 모든 자식 요소를 선택한다.

7. $("요소 선택").prev()
- 형(이전)요소 선택자
- 선택한 요소의 바로 이전 요소를 선택한다.

8. $("요소 선택").prevAll()
- 형(이전)요소들 선택자
- 선택한 요소의 이전 요소 모두를 선택한다.

9. $("요소 선택").prevUntil("요소명")
- 지정 형(이전)요소들 선택자
- 선택한 요소부터 지정한 요소의 이전 요소까지 모두 선택한다.

10. $("요소 선택").next() / $("요소 선택+다음 요소")
- 동생(다음)요소 선택자
- 선택한 요소의 다음 요소를 선택한다.

11. $("요소 선택").nextAll()
- 동생(다음)요소들 선택자
- 선택한 요소의 당므 요소 모두를 선택한다.

12. $("요소 선택").nextUntil("h2")
- 지정 동생(다음)요소들 선택자
- 선택한 요소부터 지정한 요소의 다음 요소까지 모두 선택한다.

13. $(".box_1").siblings()
- 전체 형제 요소 선택자
- class 값이 box_1인 요소의 형제 요소 전체를 선택한다.

## 탐색 선택자

• 기본 선택자로 선택한 요소 중 원하는 요소를 한 번 더 탐색, 정확하게 선택할 수 있다.
• 위치 탐색 선택자 : 기본 선택자로 선택한 요소를 배열에 담고, 배열의 인덱스를 이용하여 특정 요소를 정확히 선택한다.

1. $("요소 선택:first") / $("요소 선택").first()
- 첫 번째 요소 선택
- 요소 중 첫 번째 요소만 선택한다.

2. $("요소 선택:last") / $("요소 선택").last()
- 마지막 요소 선택
- 요소 중 마지막 요소만 선택한다.

3. $("요소 선택:odd")
- 요소 무리 중 짝수 번째(홀수 인덱스) 요소 선택

4. $("요소 선택:even")
- 요소 무리 중 홀수 번째(짝수 인덱스) 요소 선택

5. $("요소 선택:first-of-type")
- 요소 무리 중 첫 번째 요소 선택

6. $("요소 선택:last-of-type")
- 요소 무리 중 마지막 요소 선택

7. $("요소 선택:nth-child(숫자)")
- 요소 무리 중 n번째 요소 선택

8. $("요소 선택:nth-child(숫자n)")
- 요소 무리 중 숫자n 배수 번째 요소 선택

9. $("요소 선택:nth-last-of-type(숫자)")
- 요소 무리 중 마지막 위치로부터 n번째 요소 선택

10. $("요소 선택:only-child")
- 부모 요소 내 특정 요소가 1개 뿐인 요소를 선택

11. $("요소 선택:eq(index)") / $("요소 선택").eq(index)
- 요소 중 인덱스 n가 참조하는 요소 불러오기

12. $("요소 선택:gt(index)")
- 요소 중 인덱스 보다 큰 인덱스가 참조하는 요소 불러오기

13. $("요소 선택:lt(index)")
- 요소 중 인덱스 보다 작은 인덱스가 참조하는 요소 불러오기

14. $("요소 선택").slice(index)
- 요소 중 인덱스 부터 참조하는 요소를 불러온다.

• 제이쿼리 배열 관련 메서드의 종류

1. each() / $.each()
- 배열에 저장된 문서 객체만큼 메서드 반복 실행
- 배열에 저장된 객체의 인덱스 순서대로 하나씩 접근하여 객체를 선택하고 인덱스를 구한다.
- $("요소 선택").each(function) / $.each($("요소 선택"), function)

2. $.map()
- 배열에 저장된 데이터 수만큼 메서드 반복 실행
- 함수에서 반환된 데이터는 새 배열에 순서대로 저장된다. 새로 저장된 객체를 반환한다.
- $.map(Array, function)

3. $.grep()
- 배열에 저장된 데이터 수 만큼 메서드 반복 실행
- 반환값이 true인 경우에만 배열의 데이터가 인덱스 오름차순으로 새 배열에 저장되며 그 배열을 반환
- $.grep(Array, function)

4. $.inArray()
- 배열 안에서 데이터를 찾는다. 데이터를 찾으면 가장 맨 앞 데이터의 인덱스를 반환한다.
- 데이터를 찾기 못하면 -1을 반환한다.
- start index의 값을 지정하면 해당 위치부터 데이터를 찾는다.
- $.inArray(data, Array, start index)

5. $.merge()
- 인자값으로 입력한 2개의 배열 객체를 하나로 그룹화 한다.
- $.merge(Array1, Array2)

6. index()
- 선택자로 요소를 먼저 선택한 다음 지정한 요소의 인덱스 정보를 가져온다.
- $("요소 선택").index("지정 요소 선택")

• 속성 탐색 선택자 : 선택한 요소를 기준으로 일치하는 속성의 포함 여부를 확인하여 요소를 선택하는 선택자 (선택한 이미지(img)요소 중 경로(src)가 일치하는 요소만 선택하고자 할 때 사용)

1. $("요소 선택[속성]")
- 요소 중 선택한 속성이 포함된 요소만 선택한다.

2. $("요소 선택[속성=값]")
- 요소 중 속성값이 [속성=값]과 동일한 요소만 선택한다.

3. $("요소 선택[속성^=텍스트]")
- 요소 중 속성값이 텍스트로 시작하는 요소만 선택한다.

4. $("요소 선택[속성$=텍스트]")
- 요소 중 속성값이 텍스트로 끝나는 요소만 선택한다.

5. $("요소 선택[href*=텍스트]")
- 요소중 href 속성값 중에 텍스트를 포함하는 요소만 선택한다.

6. $("요소 선택:hidden")
- 요소 중 숨겨져 있는 요소만 선택한다.

7. $("요소 선택:visible")
- 요소 중 보이는 요소만 선택한다.

8. $(".txt")
- <input> 요소 중 type 속성값이 "text"인 요소만 선택한다.

9. $(".selected")
- selected 속성이 적용된 요소만 선택한다.

10. $(".checked")
- checked 속성이 적용된 요소만 선택한다.

• 그 외의 선택자(콘텐츠 탐색 선택자) : 요소 또는 속성의 포함 여부에 따라 특정 요소를 선택한다.

1. $("요소 선택:contains(텍스트)")
- 요소 중 텍스트를 포함하는 요소만 선택한다.

2. $("요소 선택").contents()
- 선택한 요소의 하위 요소 중 가장 가까운 하위 요소를 선택한다.

3. $("요소 선택:has(요소명)")  / $("요소 선택").has(요소명)
- 요소 중 요소명을 포함하는 요소만 선택한다.

4. $("요소 선택:not(:제외요소)")  / $("요소 선택").not(:제외 요소)
- 요소 중 첫 번째 요소만 제외하고 선택한다.

5. $(요소 선택).filter(필터 요소)
- 요소 중 class 값이 필터 요소인 요소만 선택한다.

6. $(요소 선택1).find(요소 선택2)
- 요소의 하위 요소인 요소 선택2만 선택한다.

7. $("요소 선택1").closest("요소 선택2")
- 요소 선택1을 감싸는 상위 요소선택2 요소 중 가장 가까운 상위 요소를 선택한다.

8. end()
- 필터링이 실행되기 이전의 요소가 선택된다.
- 예) $("li").children("a").end()	// 필터링이 실행되기 이전의 요소인 <li>가 선택된다.

• 선택자와 함꼐 알아두면 유용한 메서드

1. is(."요소 상태")
- 선택한 요소가 요소 상태이면 true 반환
- 주로 입력 요소의 체크박스 or 선택 상자의 선택 여부 or 보이는지 여부를 알아볼 때 사용한다.

2. $.noConflict()
- 현재 제이쿼리에서 사용중인 $메서드 사용을 중단하고 새로 지정한 메서드를 사용한다.
- 예) var 변수 = $.noConflict(); 변수("요소 선택")	
// 현재 제이쿼리에서 사용중인 $메서드 사용을 중단하고 새로 지정한 변수명 메서드를 사용한다.

3. get()
- 예) $("요소 선택").get(0).style.color="$f00"
// 선택자에 get(0)을 적용하면 자바스크립트 DOM 방식의 스타일을 적용할 수 있다.

출처 : Do it! 자바스크립트+제이쿼리 입문책