jQuery

• Light-weight (경량의 자바스크립트 Library)

• 크로스 브라우징 지원 ---------------------------------------------┐

• 강력한 셀렉트 제공                                                             │ 

1. 대상 엘리먼트 찾기                                                   │

2. 이벤트 붙이기/ 삭제, 스타일 변경, html조작              │ ----- 코드의 간결화

• 묵시적 반복을 한다.                                                            │

• method chainning을 지원          ---------------------------------┘

• Ajax 지원

• 다양한 이펙트

• 다양한 플러그인 지원

• 대칭성을 가지고 있다.

jquery min.js → 압축된버전

jquery.js → 개발자 버전(일반 코드처럼 정렬됨)

웹 개발 ← front-end dev tool

sublime text ← html, js, ruby, python, …

bracket

API(Application Programming Interface)

• 해당 프로그램 혹은 라이브러리에서 제공하는 기능

• 그 기능에 대한 문서(메뉴얼 / 설명서)

jQuery 사용하기

1. jquery 라이브러리를 include한다.

2. jquery는 Document객체가 준비되면(사용할 수 있을 때) 적절한 작업이 수행되도록
   할 수 있다.
   <script>
   $(document).ready(function(){
   // 적절한 작업
   });
   </script>
   
   <script>
   $(function(){
   // 적절한 작업
   });
   </script>
   
   

3. 적절한 작업

• 웹페이지가 로딩됬을때 수행할 작업

• 웹페이지의 특정한 부분에 스타일을

• 이벤트 발생시 실행할 함수를 각각의 엘리먼트에 붙인다.

• ajax를 이용해서 초기값을 서버로 부터 가져온 다음, 표시한다.  

jquery의 $( ) 사용법

• $(“셀렉터).조작함수()

• 셀렉터 표현식이 지정한 엘리먼트를 검색한다.
  검색된 엘리먼트를 대상으로 조작함수를 적용한다.
  $(“p”).css(“color”, “red”);
  $(“.intro p”).css(“color”, “red”);
  
  

• $(엘리먼트).조작함수()

• 지정된 엘리먼트를 대상으로 조작함수를 적용한다.
  <input type=”password” id=”passwordbox” />
  var el = document.getElementById(“passwordbox”);
  $(el).val(“비밀번호를 입력하세요”);
  
  

• $(함수)

• 지정된 함수는 웹페이지가 로딩이 완료되면 자동으로 실행된다.
  

jquery 선택자

• 기본 선택자
  $(“*”) 모든 엘리먼트
  $(“element”) 태그명에 해당하는 모든 엘리먼트
  $(“#id”) 아이디 값이 일치하는 엘리먼트
  $(“.class”) 클래스값이 일치하는 모든 엘리먼트
  $(“selector1, selector2, selector3”) 나열된 선택자와 일치하는 모든 엘리먼트
  
  $(“p:first”) 첫번째 p
  $(“p:last”) 마지막 p
  $(“tr:even”) 짝수번째 tr
  $(“tr:odd”) 홀수번째 tr  

$(“p:first-child”) 부모한테서 첫번째 자식인 p
$(“p:last-child”) 부모한테서 마지막 자식인 p

$(“p:nth-child(숫자)”) 부모한테서 지정된 순번에 해당하는 p
$(“p:nth-child(2)”) 부모한테서 2번째 순번에 해당하는 p
nth-child는 1부터 시작한다.  

$(“parentSelector selector”) 부모선택자에 의해서 선택된 엘리먼트의
모든 자손엘리먼트를 선택한다.
$(“div p”) div안의 모든 p엘리먼트

부모 -  지정된 엘리먼트의 한단계 위의 엘리먼트

자식 -  지정된 엘리먼트의 한단계 아래의 엘리먼트

조상 - 지정된 엘리먼트의 모든 상위 엘리먼트

자손 - 지정된 엘리먼트의 모든 하위 엘리먼트  

// jQuery에서 $()와 $.

$()

$(“셀렉터”).조작함수()

→ 셀렉터를 사용해서 선택된 엘리먼트를 대상으로 작업을 한다.

$.

→ jQuery에서 제공하는 유틸함수를 사용할 수 있다.

→ jQuery 유틸함수는 선택된 엘리먼트를 대상으로 하지 않는 작업

$.ajax();

$.trim();

$.each();

$().each()

$.each()

$(selector).attr(name) -  속성값 읽기

$(selector).attr(name, value)   -  속성값 변경하기

$(selector).removeAttr(name) -  속성 삭제하기

$(selector).val() -  폼요소의 값 읽기

$(selector).val(value) -  폼요소의 값 변경하기

$(selector).text() -  태그를 제외한 텍스트 읽어오기

        $(selector).text(textcontent) -  텍스트 변경하기

$(selector).html() -  html 읽어오기

$(selector).html(htmlcontent) -  html 변경하기

$(selector).css(name) -  스타일 값 읽기

$(selector).css(name, value) -  스타일 값 변경하기

$(selector).prop(property) -  엘리먼트의 property값 읽기

$(selector).prop(property, value) -  엘리먼트의 property값 변경하기

$(selector).addClass(class) -  클래스 추가

$(selector).removeClass(class) -  클래스 삭제

$(selector).toggleClass(class) -  클래스 토글

prop와 Attribute

$(selector).attr(name, value)

→ 태그의 attribute 제어(name, id, ….)

$(selector).prop(name, value)

→ 엘리먼트 property 값을 제어(select의 option, selectedindex…) (ex)체크박스 사용시

load와 ready

jquery사용 이전에는 웹 페이지 로딩시점에 코드를 실행시키기 위해서

onload이벤트를 사용했었다.

jQuery에서는 onload대신, onready 이벤트를 사용한다.

$()와 $.

$(selector)는 selector를 사용해서 선택된 엘리먼트를 대상으로 사용할 수 있는

jQuery함수를 붙여서 쓸 수 있다.

$.은 jQuery의 유틸 메소드를 붙여서 사용할 수 있다.

jQuery의 method chainning

jQuery의 method들은 대부분 $(selector)을 사용해서 선택된 엘리먼트를 유지시킨다.

하지만 선택된 엘리먼트를 유지시키지 않는 메소드도 있다.

대부분 getter/setter역할을 수행하는 메소드다.

$("li").css("color", "red").size(); //사용가능

$("li").size().css("color", "red"); //에러 발생

차이에 주의!

• div#test1 :  id가 test1인 div

• div #test1 : div안에 들어있는 id가 test1인 엘리먼트

• 자손 선택자 : $(“#test p”) → [inner p1, p2]

• 자식 선택자 : $(“#test > p”) → [p1, p2]

• 동생선택자 : $(“span + p”) → [p1]

• 동생들 선택자 : $(“span ~ p”) → [p1, p2]

prev()와 next(), children(), eq()

• 같은 depth상에서 앞뒤로 움직임

• .prev() : 엘리먼트 한칸 앞으로

• .next() : 엘리먼트 한칸 뒤로

• .children() : 선택된 엘리먼트의 모든 자식 엘리먼트(자손들 제외)

• .eq(index) : 선택된 엘리먼트들 중에서 지정된 순번의 엘리먼트

attribute 선택자 []

$("[name]")

$("[name=value]")

$("[name^=value]")

$("[name$=value]")

$("[name*=value]")

// $("div :not(:checked)") :div안의 엘리먼트 중 체크되지 않은것

// $("div :not(:checked)").filter(":radio") :div안의 엘리먼트 중 체크되지 않은것들 중 radio인것

.filter( ) 사용하기(엄청나게 막강한 도구! ★★★★)

$(first-selector).filter(second-selector)

:first-selector를 사용해서 선택된 것들 중에서 second-selector에 해당하는 것만걸러낸다.

$(“td”).filter(“:contains(‘1학년’)”);

$(first-selector).filter(function(index, el) { })

:first-selector를 사용해서 선택된 것들 하나 하나 마다 function( ){ }이 실행된다.

function( )을 실행해서 true가 반환되는 것만 걸러낸다.

:index에는 순번(0부터 시작)이 el에는 first-selector에서 검색된 엘리먼트가 순서대로
 하나씩 전달된다.

:function( ) {// true나 false값을 반환하는 코드가 있어야한다.}

예제) $(“td”).filter(function(index , el){

var text = $(el).text();

if (text === ‘1학년’) {

return true;

} else {

return false;

}

})

jQuery의 이벤트처리 및 이벤트 발생

1. 이벤트 핸들러 등록하기
   이벤트 핸들러: 이벤트 발생했을 때 실행할 함수
   
   $(selector).click(실행될 함수);    
   $(selector).on(“click”, 실행될 함수);
   
   $(“a”).click(function(event){ // a를 클릭하면 여기가 실행된다;} )
   
   

2. 이벤트 강제 발생
   이벤트 트리거 : 선택한 엘리먼트에서 이벤트를 발생시킨다.
   
   $(selector).click();  → 함수를 적지 않으면 이벤트를 발생시킨것 같은 효과를 줌
   $(selector).trigger(“click”);  

jquery 이벤트 처리

click(); : 선택된 요소를 클릭했을 때

dbclick(); : 선택된 요소를 더블클릭 했을 때

mouseover(); : 마우스를 요소에 올려놓을 때

mouseout(); : 마우스가 요소에서 벗어났을 때

focus(); : 해당 요소에 포커스가 생겼을 때 (tab키 눌렀을 때 포함)

blur(); : 해당 요소가 포커스를 잃을 때

focusin(); : input 요소가 포커스를 얻었을 때

focusout(); : input 요소가 포커스를 잃었을 때

keydown(); : 키를 눌렀을 떄

keypress(); : 키를 눌렀을 때

mouseenter(); : 마우스가 요소 안으로 들어왔을 때

mouseleave(); : 마우스가 요소 박으로 나갔을 떄

mousemove(); : 마우스가 움직일 떄

resize(); : 윈도우 창의 사이즈가 변할 때

submit(); : form에서 submit 버튼을 눌렀을 떄

reset(); : form에서 reset 버튼을 눌렀을 떄

toggle(); : 클릭할 때마다 순차적으로 번갈아 가면서 실행

hover(); : 마우스가 올려졌을 때와 벗어났을 때 각각의 함수를 실행

change(); : 값이 변경되었을 때

jquery

$가 붙어있는 변수 →  jquery 결과 집합을 담고있는 변수 , jquery를 이용해서 조작할 수 있다.  

setInterval(처리할 함수, 지연시간)

• 처리할 함수를 반복적으로 실행시켜준다.

• 설정된 지연시간이 지나면 자동으로 함수의 실행을 반복한다.

setTimeout(처리할 함수, 지연시간)

• 설정된 시연시간이 경과된 후에 함수를 딱 한번만 실행한다.

clearInterval()

• 일정시간마다 반복되는 함수의 실행을 중지한다.

$(target).appendTo(html태그);   ⬌    $(html).appendTo(“target”);

preventDefault() 기본 발생 이벤트를 막는다.

stopPropagation() 사용자 정의 발생 이벤트를 막는다.