jQuery
Light-weight (경량의 자바스크립트 Library)
크로스 브라우징 지원 ---------------------------------------------┐
강력한 셀렉트 제공 │
대상 엘리먼트 찾기 │
이벤트 붙이기/ 삭제, 스타일 변경, 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 사용하기
jquery 라이브러리를 include한다.
jquery는 Document객체가 준비되면(사용할 수 있을 때) 적절한 작업이 수행되도록
할 수 있다.
<script>
$(document).ready(function(){
// 적절한 작업
});
</script>
<script>
$(function(){
// 적절한 작업
});
</script>
적절한 작업
jquery의 $( ) 사용법
$(“셀렉터).조작함수()
$(엘리먼트).조작함수()
$(함수)
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"); //에러 발생
차이에 주의!
자손 선택자 : $(“#test p”) → [inner p1, p2]
자식 선택자 : $(“#test > p”) → [p1, p2]
동생선택자 : $(“span + p”) → [p1]
동생들 선택자 : $(“span ~ p”) → [p1, p2]
prev()와 next(), children(), eq()
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의 이벤트처리 및 이벤트 발생
이벤트 핸들러 등록하기
이벤트 핸들러: 이벤트 발생했을 때 실행할 함수
$(selector).click(실행될 함수);
$(selector).on(“click”, 실행될 함수);
$(“a”).click(function(event){ // a를 클릭하면 여기가 실행된다;} )
이벤트 강제 발생
이벤트 트리거 : 선택한 엘리먼트에서 이벤트를 발생시킨다.
$(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() 사용자 정의 발생 이벤트를 막는다.
