// ********** 제이쿼리 다운로드
http://jquery.com에 접속한 후 메인 페이지에서
[Download jQuery] 버튼을 클릭하여 최신 버전의 파일을 다운로드합니다.
이렇게 다운로드한 라이브러리는 네트워크를 사용할 수 없는 상황에서도 jQuery를 테스트할 수 있습니다.
"사용자가 다운받은 파일의 경로"
"네크워크 상의 jQuery 라이브러리의 경로"
jQuery에서 제공하는 CDN : http://code.jquery.com/jquery-1.8.3.min.js
jQuery에서 제공하는 최신 jQuery CDN : http://code.jquery.com/jquery.min.js
MS에서 제공하는 CDN : http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js
Google에서 제공하는 CDN : https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
사용방법 : 기존 jQuery 로드 부분을 제거하고 <script type="text/javascript" src="위 3개 중 하나"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
참고로 CDN이란 "contents delivery network"로서 제공하는 콘텐츠를
이 서버에 미리 옮겨놓고 필요할 경우 그 콘텐츠를
사용자에게 전달해 주는 것을 의미합니다.
// ********** 제이쿼리 사이트
http://jquery.com/ : 자바스크립트 라이브러리, 출간도서 소개 및 프로그램, 플러그인 다운로드 등 안내
http://www.jquerykorea.pe.kr/ : jQuery, Core, CSS, Events, 조작함수 등 정보 수록
http://www.jquery.kr/ : jQuery 강좌
http://apycom.com/ : jQuery 드롭다운 메뉴를 만들어주는 사이트
http://tympanus.net/codrops/category/tutorials/ : 현 시점에서 가장 많이 참고하고 있는 사이트로 템플릿을 제공
// ********** 구문 문법 정리
1) 명칭 정의
태그(tag) : HTML 구성
요소(element) : HTML 구성 태그와 id와 클래스
노드(node) : HTML 구성 구조로서 태그, 요소와 같은 의미
DOM : Document Object Model로서 HTML 요소 간의 긴밀한 노드 트리를 의미
2) $()의 의미
jQuery() = $()
3) $(function(){ code })의 의미
jQuery(document).ready(function(){ code });
jQuery(function(){ code });
$(function(){ code });
4) 기본 선택자
태그 선택자 / 클래스 선택자 / id 선택자 / 그룹 선택자 / 전체 선택자
5) 계층 선택자
descendant 선택자 / child 선택자 / sibling 선택자 / siblings 선택자
6) 속성 선택자
attribute 선택자
7) 기본 필터 선택자
eq 선택자 / gt 선택자 / lt 선택자 / first last 선택자 / even odd 선택자 / not 선택자
8) 내용 필터 선택자
contains 선택자 / has 선택자 / empty 선택자
9) 보임 필터 선택자
hidden 선택자 / visible 선택자
10) 자식 요소 필터 선택자
first-child 선택자 / last-child 선택자 / nth-child 선택자
11) 탐색
children() / find() / prev() / next() / siblings() / parent()
12) 필터링
first() / last() / eq() / filter() / not() / has()
13) DOM 변경
append() / prepand() / html() / text() / remove() / empty()
[jQuery] jQuery를 시작하자
(1) jQuery 란?
jQuery(제이쿼리)는 브라우저 호환성이 있는
HTML 속 자바스크립트 라이브러리이며 클라이언트 사이드 스크립트 언어를
단순화 할 수 있도록 설계되었다. 존 레식이 2006년 뉴욕 시 바캠프(Barcamp NYC)에서 공식적으로 소개하였다.
jQuery는 오늘날 가장 인기있는 자바스크립트 라이브러리 중 하나이다.
jQuery는 MIT 라이선스와 GNU 일반 공중 사용 허가서v2의
듀얼 라이선스를 가진 자유 오픈 소프트웨어이다.
jQuery의 문법은 코드 보기, 문서 객체 모델 찾기, 애니메이션 만들기,
이벤트 제어, Ajax 개발을 쉽게 할 수 있도록 디자인되었다.
또한, jQuery는 개발자가 플러그인을 개발할 수 있는 기능을 제공한다.
출처 : wiki 백과
(2) jQuery 장점
- 크로스브라우징의 대안
- 코드의 간결화
- CSS 문법 지원
- 강력하고 활용도 높은 selector
- 유용한 플러그인 jQuery-ui, jQuery-mobile
- json Object를 이용한 페이지의 가벼움
(3) jQuery 시작
<script src="scripts/jquery-1.6.2.min.js"></script>
JQuery 명령어를 사용할 수 있는 라이브러리를 추가해준다.
참고 : jQuery API , jQueryKorea
(4) Body Onload
<script>
$(document).ready(function(){
// JQuery 적용
});
</script>
$(document).ready(function(){}); 는 해당 페이지의 인코딩이 완료되었을 때, 실행된다.
(5) 클릭 리스너 등록
$('#move_up').click(function(){
// 실행 함수
});
id 가 'move_up' 인 html 태그를 클릭시 작동하는 함수를 작성한다.
같은 리스너가 중복으로 등록되면, 클릭시 등록된 수만큼 함수가 실행되므로 주의.
(6) jQuery 기본 문법
jQuery(), $() : 괄호안의 대상을 JQuery로 묶어준다.
선택자 : HTML 요소, CSS요소, ID요소로 JQuery를 적용할 요소를 선택할 수 있다.
(1) HTML 요소 선택 : 같은 HTML요소에 대해 공통적인 사항을 적용할 때 선택
$('img') : <img> 태그 전체 선택
$('table') : <table> 태그 전체 선택
(2) CSS 요소 선택 : 같은 CSS 요소에 대해 공통적인 사항을 적용할 때 선택
$('.my_class') : class="my_class: 인 HTML 요소 선택
ex> <input type="button" class="my_class" value="선택" />
(3) ID요소 선택 : 선택한 ID 요소를 선택할 경우 사용. (ID는 고유의 값으로 하나만 선택)
$('#userId') : id가 userId인 요소 선택.(고유값)
ex> <input type="button" id="userId" value="선택" />
(4) 연쇄 요소 선택 : 선택자를 연속적으로 사용하여, 원하는 요소를 선택할 수 있다.
$('table .my_class') : <table> 요소 아래에 있는 요소중 class=my_class 요소를 선택한다.
$('div [name="myName"]') : <div> 요소중 name="myName"인 요소를 선택한다.
jQuery의 장점은 유연함에 있다. 위의 선택자를 잘 활용하면,
원하는 요소를 쉽게 선택할 수 있다. 소스가 복잡해질 수록
각 요소들의 CSS, ID, name 값을 잘 사용해야 한다.
여러명이 함께 하는 프로젝트라면 더욱더 약속된 명명 규칙을 잘 활용하자.
특히 ID 는 고유값으로만 사용할 수 있다는 것에 주의해야 한다.
[jQuery] jQuery API (1/7) - 제어 (선택, 삽입, 삭제, 변경, 변환, 확장)
1. 제어
- 선택
.add() : 요소를 추가 선택한다.
/ $("p").add("div") // p 요소와 div 요소를 선택한다.
.not() : 선택된 확장집합에서 인자에 해당하는 요소를 제거한다.
/ $("p").not(".green") // p 요소의 확장집합에서 class가 green인 요소를 제거한다.
.children() : 요소의 고유한 자식으로 구성된 확장 집합을 반환한다.
.contents() : 선택한 요소의 자식 요소를 가져온다.(text node 포함)
$('.container').contents().filter(function(){});
// class container 요소의 자식요소(text 포함)를 가져와 filter 한다. iframe text를 가져올때 사용
.first() : 요소의 첫번째 노드 반환
.last() : 요소의 마지막 노드 반환
.next() : 요소 집합내의 바로 다음에 나오는 형제로 구성된 요소 반환
.nextAll() : 요소 집합내의 다음에 나오는 모든 형제로 구성된 확장집합 반환
.nextUntil() : 선택 요소부터 인자가 나올때까지 집합을 선택한다.
/ $("#term").nextUntil("dt").css('background-color', 'red');
// id term 요소부터 dt가 나올때까지 형제요소를 검색하고 배경을 red로 변경
/ $("#term").nextUntil($("#term2"), "dd").css('background-color', 'red');
// id term 요소부터 id term2 요소까지 중 dd 요소만 배경을 red로 변경
.parent() : 요소 집합의 바로 위 부모로 구성된 확장 집합 반환
.parents() : 요소 집합의 모든 조상 확장 집합을 반환. 부모와 상위 모든 조상이 포함되지만 문서루트는 미포함
.parentsUnitl() : 선택 요소부터 인자가 나올때까지 부모 집합을 선택한다.
/ $("#term").parentsUntil("dt").css('background-color', 'red');
// id term 요소부터 dt가 나올때까지 부모요소를 검색하고 배경을 red로 변경
/ $("#term").parentsUntil($("#term2"), "dd").css('background-color', 'red');
// id term 요소부터 id term2 부모요소까지 중 dd 요소만 배경을 red로 변경
.prev() : 요소 집합의 바로 이전에 나오는 형제로 구성된 확장 집합을 반환
.prevAll() : 요소 집합의 이전에 나오는 모든 형제로 구성된 확장 집합을 반환
.siblings() : 요소의 모든 형제를 포함하는 확장 집합을 반환.
.eq() : 선택 요소의 index번째 요소를 선택한다.
/ $("div").eq(2).css('background-color', 'red'); // div의 3번째 요소의 배경을 변경
.index() : 선택 요소에서 인자의 index 번호를 반환
/ $("div").index($("div:contains('Third')"));
// div 안에서 div에 'Third'라는 단어를 포함하고 있는 div index 값
$.inArray() <jQuery.inArray()> : 대상 배열 내의 값을찾아서 인덱스를 반환한다. ; 첫번째 배열은 0, 요소가 없으면 -1
/ $.inArray("John", arr); // arr 배열에서 "John"의 인덱스를 찾아서 반환
.find() : 선택된 요소의 자식노드에서 인자의 요소를 찾는다.
/ $("#div").find(ul); // id div의 자식노드에서 ul 요소를 찾는다.
.filter() : 선택된 요소를 포함한 노드에서 인자의 요소를 찾는다.
/ $("#div").filter(ul); // id div 노드 자신을 포함한 요소에서 ul 요소를 찾는다.
.end() : jQuery 함수를 연쇄적으로(chain)으로 사용할 경우 앞쪽에 이미 선택되었던 요소로 돌아간다.
$('ul:first').find('.foo).css('background-color' , 'red') // ul의 첫번째 요소에서 class=foo를 찾아 배경 변경
.end().find('bar').css('background-color', 'green'); // find를 호출하기 전의 요소($('ul:first))에서 class=bar를 찾아 배경 변경
.each() : 다중 요소를 순서대로 선택한다.
/ $("div").each(function(i,element){
// div 요소를 순서대로 선택한다. i: 순서 시작은 0 , element : 선택된 요소
});
.has() : 인자를 가지고 있는 확장집합을 선택
/ $("li").has("ul"); // li 요소중 ul을 가지고 있는 요소만 선택
.slice() : 선택한 요소 집합을 인자의 범위로 잘라낸다.
/ $("img").slice(2).css(...);
// img 요소의 세번째 요소부터 끝 요소까지 css 적용
/ $("img").slice(2, 4).css(...);
// img 요소의 세번째 요소부터 5번째 요소를 만날때까지(4번째) css적용
/ $("img").slice(-2, -1).css(...);
// img 요소의 끝에서 두번째 요소부터 끝에서 첫번째 요소를 만날때까지 css적용
.clone() : 선택된 요소를 복사한다. / $("#img").clone(); // id img DOM을 복사한다.
.closest() : 현재 위치한 요소에서 DOM 트리를 탐색하여 일치된 요소를 선택한다.
$("#name").closest("ul"); // id name 요소에서 가장 가까운 ul을 선택한다.
$("#name").closest("ul", "#code"); // id code 요소 아래의 id name 요소에서 가장 가까운 ul을 선택한다.
.andSelf() : 선택된 구조 요소를 이어붙인다.
/ $('div').find('p').andSelf().css(..);
// div와 내부의 p요소를 선택해서 결합 후 css 적용
.offsetParent() : 위치(css:position) 요소를 기반으로 한 부모 요소를 찾는다.
/ $('li.item-a').offsetParent().css(..); // li의 item-a 클래스의 css position상 가장 가까운 부모요소에 css를 적용
$.grep() <jQuery.grep()> : 배열 요소를 조건에 따라 필터링하여 제거 한다. 특정 로직에 의해 true가 되는 결과만 반환
/ $.grep([0,1,2], function(n,i){ return n>0;});
// 배열 [0,1,2] 에서 0보다 큰값을 반환 [1,2]
/ $.grep([0,1,2], function(n,i){ return n>0;}, true);
// 배열 [0,1,2] 에서 0보다 크지 않은 값을 반환 [0]
$.proxy() <jQuery.proxy()> : jQuery의 네임스페이스를 관리할 수 있게 한다. "this" 키워드를 통하여 다른 개체를 유지할 수 있게 한다.
var app={
config : { clickMessage : Hi!" },
// config 메서드에 clickMessage를 정의
clickHandler : function(){ // clicHandler 메서드 함수 정의
alert( this.config.clickMessage);
// this:app 의 config 메시지의 clickMessage를 알람
}
}
$('a).bind('click', app.clickHandler);
// 실행되지 않는다. jQuery 이벤트 모델에 의해 this가 app 이 아니다.
$('a').bind('click', .proxy(app, 'clickHandler'));
// this 키워드를 유지한채 실행된다.
- 삽입
.after() : 지정한 요소 뒤에 새로운 요소를 삽입 / A.after( B) / A뒤에 B를 추가
.insertAfter() : 지정한 요소 뒤에 새로운 요소를 삽입
/ A.insertAfter(B) / B뒤에 A를 추가
.append() : 지정한 요소 뒤에 내용 삽입
/ $("div").append("<p>내용</p>"); // div 뒤에 <p>내용</p> 를 삽입한다.
.appenTo() : 지정한 내용을 요소 뒤에 삽입
/ $("<p>내용</p>").appendTo($("div")); // <p>내용</p>를 div 뒤에 삽입한다.
.before() : 지정한 요소의 앞에 요소를 삽입 / A.before(B) / A 앞에 B를 추가
.insertBefore() : 지정한 요소의 앞에 요소를 삽입
/ A.insertBefore(B) / B 앞에 A를 추가
.prepend() : 지정한 요소 앞에 내용 삽입
/ $("div").prepend("<p>내용</p>"); // div 앞에 <p>내용</p> 를 삽입한다.
.prependTo() : 지정한 내용을 요소 앞에 삽입
/ $("<p>내용</p>").prependTo($("div"));
// <p>내용</p>를 div 앞에 삽입한다.
.pushStack() : jQuery 스택에 DOM 요소를 추가한다.
/ $("#ids").pushStack($("div"));
// id ids 요소에 jQuery 스택에 div 요소를 추가한다.
.wrap() : $() 형식으로 쓰는 함수의 선택한 요소 각각을 문자열 또는 객체로 감싼다.
./ $(".inner").wrap('<div class="new" />');
// class=inner 집합 요소 각각을 <div class ="new"></div>
./ $(".inner").wrap(function(){
return '<div class="new" />');
// class=inner 집합 요소 각각을 <div class ="new"></div>
});
.unwrap() : 선택한 요소 집합의 부모를 제거한다.
./ $(".inner").wrap(); // class=inner 집합 요소의 부모를 제거한다.
.wrapAll() : $() 형식으로 쓰는 함수의 선택한 요소 전체를 문자열 또는 객체로 감싼다.
./ $(".inner").wrapAll('<div class="new" />');
// class=inner 집합 요소 전체를 <div class ="new"></div>
.wrapInner() : $() 형식으로 쓰는 함수의 선택한 요소 각각의 내부를 문자열 또는 객체로 감싼다.
./ $(".inner").wrapInner('<div class="new" />');
// class=inner 집합 요소 각각의 내부를 <div class ="new"></div> 로 감싼다
- 삭제
.detach() : 지정한 요소를 포함 하위 요소 모두 제거
/ $("div").detach(); // div를 포함 하위 요소 모두 제거
.empty() : 지정한 요소의 하위 요소를 제거
/ $("div").empty(); // div 하위 요소 모두 제거
.remove() : 지정한 요소를 포함 하위 요소 모두 제거, 요소와 관련된 이벤트와 데이터 모두 제거
/ $("div").remove(); // div 포함 하위 요소, 이벤트, 데이터 모두 제거
- 변경, 변환
.text() : 해당 요소에 text 요소를 삽입 또는 변경한다.
.html() : 해당 요소에 html 요소를 삽입 또는 변경한다.
.val() : 해당 요소의 value 값을 삽입 또는 변경한다.
.replaceAll() : 해당 요소들로 인자 요소를 대체한다.
/ $('<h2>New heading</h2>').empty($("div"));
// div 요소를 <h2>New heading</h2> 요소로 변경한다.
.replaceWith() : 해당 요소들을 인자의 요소로 바꾼다. ; replaceAll() 과 선택,인자(target)이 반대
/ $("div").empty('<h2>New heading</h2>');
// <h2>New heading</h2> 요소로 div 요소를 변경 시킨다.
.toArray() : 선택한 요소 DOM 집합을 자바스크립트 배열로 만든다.
/ var arr = $("div").toArray(); // arr[0] === <div>Hello</div>
$.makeArray <jQuery.makeArray()> : jQuery 집합의 요소 값을 JavaScript 배열로 변환한다.
/ var arr = $.makeArray($("input")); // arr[0] === "Hello"
$.map() <jQuery.map()>
.map() : 선택된 배열 요소를 순서대로 callback 함수를 통해 얻어진 리턴값을 포함하는 새로운 jQuery 오브젝트 생성
/ var arr = $("div").map(function(){
return $(this).text().toUpperCase(); // 선택된 요소들의 text값을 대문자로 변경한다.
});
/ var arr = $("div").map({width : 10, height: 15} ,function(value, index){
return index; // key를 반환한다. ["width", "height"]
});
$.globalEval() <jQuery.globalEval()> : 문자열로 명령어를 실행시켜준다.
/ $.globalEval("var newVar = true;") // newVar == true
$.merge() <jQuery.merge()> : 두개의 배열을 첫번째 배열에 합칩니다.
/ $.merge([0,1,2],[2,3,4]); // 첫번째 배열 결과 : [0,1,2,2,3,4]
/ $.merge($.merge([],[0,1,2]),[2,3,4]);
// 첫번째 배열의 값을 유지하기 위해 새로운 배열을 만든다.
$.trim() <jQuery.trim()> : 문자열 앞뒤에 있는 공백 문자를 제거하고 결과 반환
/ var trimStr = $.trim(str); // str === " abc def ff "; trimStr === "abc def ff";
$.unique() <jQuery.unique()> : element 배열의 중복된 모든 element를 제거한다. ; string, number 배열에서는 동작 X
/ var divs = $.unique(divs); // divs의 중복 선택되어 들어간 element를 제거한다.
$.parseJSON() <jQuery.parseJSON()> : JSON문자열을 JavaScript object로 반환한다.
/ var obj = $.parseJSON('{"name":"John"}');
// 문자열 {"name":"John"}을 JavaScript object로 변환한다.
/ alert(obj.name==="John"); // JavaScriptObject인 obj에서 name 요소인 John
- 참고 : 형식이 어긋난 JSON 문자열을 인자로 사용하면 exception이 발생한다.
문자열의 key 와 value 는 쌍따옴표("")를 사용해야 한다.
$.parseXML() <jQuery.parseXML()> : 유효한 XML문서를 파상한다.
$title = $.parseXML(xml).find("title"); // xml 파일에서 title의 값을 찾는다.
- 확장
$.noop() <jQuery.noop()> : 비어있는 함수 (function(){})
$.noConflict() <jQuery.Conflict()> : 다른 JavaScript 라이브러리와 함께 사용할때 $의 충돌을 막기위해 사용
$.sub() <jQuery.sub()> : 새로운 jQuery 함수를 정의할때, 네임스페이스의 충돌로 다른 개발자의 함수에 영향을 주지 않도록 캡슐화된 플러그인을 만들고자 할때 $.sub() 로 복사하여 사용
(function(){
var sub$ = jQuery.sub();
sub$.fn.myCustomMethod = function(){
return 'just for me';
};
sub$(document).ready(function() {
sub$('body').myCustomMethod() // 'just for me'
});
})();
typeof jQuery('body').myCustomMethod // undefined
$.extend() <jQuery.extend()> : 첫번째 인자에서 두번째 인자를 병합하며, 확장한다.
(1) 두번째 인자값이 첫번째 인자값의 같은 옵션을 대체하며 확장
var object1 = { apple : 0, banana : {weight : 52, price : 100}, cherry : 97 };
var object2 = { banana : {price : 200}, durian : 100 };
$.extend(object1, object2);
결과 : object1 = { apple: 0, banana: { price: 200 }, cherry: 97, durian: 100 };
(2) 첫번째 인자값의 원본 값을 유지하며 병합
var object1 = { apple: 0, banana: {weight: 52, price: 100}, cherry: 97};
var object2 = { banana: {price: 200}, durian: 100};
$.extend(true, object1, object2
결과 : object1 == { apple: 0, banana: { weight: 52, price: 200 }, cherry: 97, durian: 100 }
(3) 요소에 적용할 명령어 확장
$.fn.extend({
myMethod : function(){...}
});
-> $("div").myMethod();
(4) 함수 실행 JQuery 명령어 확장
$.extend({
myMethod2 : function(){...}
});
-> $.myMethod();
[jQuery] jQuery API (2/7) - 속성(CSS), 추출
2. 속성(CSS), 추출
- 속성(CSS)
.addClass() : 지정한 요소에 class 값을 추가한다.
$("p").addClass("name"); // class = "name" 추가
.hasClass() : 지정한 요소에 class 유무를 확인한다.
if($("p").hasClass("name")==true) // class 가 "name"인지 확인 true/false
.removeClass() : 지정한 요소에 class 값을 제거한다.
$("p").removeClass("name"); // class = "name"을 제거
.toggleClass() : 지정한 요소에 class를 추가/제거
$("p").toggleClass("name"); // class = "name"이 있으면 제거 / 없으면 추가
.attr() : (1) 지정한 요소의 속성값을 입력 또는 변경한다.
$("a").attr("href", "http://www.googlec.co.kr"); // a 요소의 href 값을 변경한다.
$("#content").attr({id:'content01', class:'style1'}); // id content 요소의 id와 class 값을 변경한다.
(2) 지정한 요소의 속성값을 가져온다.
$("a").attr("href"); // a 요소의 href의 값을 가져온다.
.removeAttr() : 지정한 요소의 속성값을 제거한다.
$("a").removeAttr("href"); // a 요소의 "href" 속성값을 제거한다.
.prop() : .attr()과 동일하나, boolean 값을 사용하는 속성에 사용한다. checked, selected, disabled
.removeProp() : removeProp()과 동일하나, boolean 값을 사용하는 속성에 사용한다. checked, selected, disabled
.css() : (1) 지정한 요소의 css 값을 삽입 또는 변경한다..
$("div").css("color", 'red'); // div 요소의 글자색을 red로 설정한다.
$("div").css({color:'red', border:'1px solid blue'}); // 동시에 여러개의 값을 설정할 수 있다.
(2) 지정한 요소의 속성값을 가져온다.
$("div").css("backgroundColor"); // div 요소의 backgroud-Color 값을 가져온다.
참고 - css의 속성명과 jQuery에서 쓰는 속성명은 형식이 조금 다르다.
css : background-color , jQuery : backgroundColor
css : padding-left, jQuery : paddingLeft
.width() : 선택한 요소의 현재의 계산된 넓이를 얻거나 넓이 값을 설정한다.
$("div").width(); // div 의 현재 넓이 값 (숫자로 반환, .css('width')는 숫자뒤에 px가 붙어 반환 400px)
$("div").width(30); // div의 넓이를 30으로 설정한다. { 30, 30px, 30%, auto }
.innerWidth() : 선택한 요소의 padding을 포함한 넓이를 반환한다. (border 제외)
$("div").innerWidth(); // div 의 padding을 포함한 현재 넓이
.outerWidth() : 선택한 요소의 padding 과 border를 포함한 넓이를 반환한다. (인자값 true 면 margin 포함)
$("div").outerWidth(); // div 의 padding과 border 포함한 현재 넓이
$("div").outerWidth(true); // div 의 padding과 border, margin 포함한 현재 넓이
.height() : 선택한 요소의 현재의 계산된 높이를 얻거나 높이 값을 설정한다.
$("div").height(); // div 의 현재 높이 값 (숫자로 반환, .css('height')는 숫자뒤에 px가 붙어 반환 400px)
$("div").height(30); // div의 높이를 30으로 설정한다. { 30, 30px, 30%, auto }
.innerHeight() : 선택한 요소의 padding을 포함한 높이를 반환한다. (border 제외)
$("div").innerHeight(); // div 의 padding을 포함한 현재 높이
.outerHeight() : 선택한 요소의 padding과 border를 포함한 높이를 반환한다. (인자값 true면 margin 포함)
$("div").outerHeight(); // div 의 padding과 border를 포함한 현재 높이
$("div").outerHeight(true); // div 의 padding과 border, margin을 포함한 현재 높이
.data() : (1) 지정한 요소에 값을 삽입 또는 변경한다.
$("div").data("foo", '52'); // div 요소에 "foo" 라는 key로 52를 삽입한다.
$("div").data("bar", {color:'red', border:'1px solid blue'}); // "bar" 라는 key로 배열 삽입
$("div").data({baz : [1,2,3]}); // baz 배열 삽입
(2) 지정한 요소의 값을 가져온다.
$("div").data("foo"); // div 요소에 "foo"라는 key로 저장된 값을 가져온다.
$("div").data(); // div 요소에 전체 값을 가져온다. {foo:52, bar:{color....}, baz:[1,2,3,4]}
$.data() <jQuery.data()> : 첫번째 인자의 요소에 두번째 인자를 키로 세번째 값을 저장한다. .data()와 동일
$.data(document.body, "foo",'52'); // 페이지 body 요소에 foo를 키로 52 삽입
.removeData() : 지정한 요소에 데이터를 제거한다.
$("div").data("foo"); // div 요소에 "foo" 라는 key의 데이터를 제거한다.
$.removeData() <jQuery.removeData()> : 지정한 요소에 데이터를 제거한다.
$.data($("div"), "foo"); // div 요소에 "foo" 라는 key의 데이터를 제거한다.
$.hasData() <jQuery.hasData()> : $.data()에 의해 저장된 임의의 값들이 있는지 확인한다. true / false
if(.$.hasData(document.body)==true) // document.body에 data가 있으면 true
- 추출
$.browser <jQuery.browser> : JQuery가 실행되는 browser의 version, browser 종류를 Map 형식으로 리턴한다.
$.each($.browser,function(i, val){
result += i +":" + val; // 결과 msie:true version:7.0
}
참고 - $.browser.version : 브라우저의 버전을 문자열로 리턴
$.browser.safari : 사파리 브라우저 여부 true & false 리턴
$.browser.opera : 오페라 브라우저 여부 true & false 리턴
$.browser.msie : Internet Explorer 브라우저 여부 true & false 리턴
$.browser.mozilla : Mozilla 브라우저 여부 true & false 리턴
$.support <jQuery.support> :
브라우저마다의 기능의 차이나 버그등의 정보를 구조체로 반환 ; 1.3 이후 버전에서는 $.browser 대신 $.support를 사용 권장
옵션값 : http://api.jquery.com/jQuery.support/
.size() : 선택한 요소 배열의 길이를 반환한다.
var num = $("div").size(); // num은 div의 배열 크기를 숫자로 반환한다.
.length : 선택한 요소의 배열의 길이를 반환한다. (선택 요소에 "" 는 적용이안된다. '' 사용)
var num = $('div').length; // num은 div의 배열 크기를 숫자로 반환한다
.offSet() : 선택한 요소의 전체 문서 내(document)에서의 left, top 좌표를 구한다.
var offset = $('div:last').offset(); // div 마지막 요소의 left, top 좌표 반환 offset.left / offset.top
.position() : 선택한 요소의 부모요소를 기준으로 left, top 좌표를 구한다.
var position = $('div:last').position(); // div 마지막 요소의 부모로부터의 left, top 좌표 반환 position.left / position.top
.scrollLeft() : 선택한 요소의 스크롤바의 수평 위치(x좌표)를 얻거나 변경한다.
var x= $('div:last').scrollLeft(); // div 마지막 요소의 현재 수평 스크롤 x좌표를 반환한다.
var x= $('div:last').scrollLeft(300); // div 마지막 요소의 수평 스크롤 x좌표를 300으로 이동한다.
.scrollTop() : 선택한 요소의 스크롤바의 수직 위치(y좌표)를 얻거나 변경한다.
var x= $('div:last').scrollTop(); // div 마지막 요소의 현재 수직 스크롤 y좌표를 반환한다.
var x= $('div:last').scrollTop(300); // div 마지막 요소의 수직 스크롤 y좌표를 300으로 이동한다.
$.type() <jQuery.type()> : 인자의 obj의 type을 반환한다.
$.type(undefined) === "undefined" //
$.type() === "undefined" //
$.type(null) === "null" //
$.type(true) === "boolean" //
$.type(3) === "number" //
$.type("test") === "string" //
$.type(function(){}) === "function" //
$.type([]) === "array" //
$.type(new Date()) === "date" //
$.type(/test/) === "regexp" //
$.now() <jQuery.now> : 현재 시간을 number로 반환
$.now() // result : 1340954729007 (new Data).getTime();
$.fx.interval<jQuery.fx.interval> : 브라우져 애니메이션 프레임 조절
/ $.fx.interval = 1000; // 프레임을 1000으로 변경한다.
$.fx.off<jQuery.fx.off> : 모든 애니메이션 효과를 전역적으로 끈다.
/ $.fx.off = true; // 애니메이션 효과를 끈다.
[jQuery] jQuery API (3/7) - 검증
3. 검증
.is() : 현재 상태를 확인하여 반환한다. true / false
var chk = $("div").is(":animated"); // chk 는 true, false
$.contains() <jQuery.contains()> : 첫번째 인자 요소에 두번째 인자 요소를 가지고 있는지 확인한다.
$.contains($("#name"), $("#code")) // #name 요소 아래에 #code 요소가 있다면 true
$.isArray() <jQuery.isArray()> : 인자가 배열인지 확인한다.
$.isArray(arr) // arr이 Array 인지 체크 true / false
$.isEmptyObject() <jQuery.isEmptyObject()> : 인자가 empty 인지 체크한다.
$.isEmptyObject(arr) // arr 이 empty 인지 체크 empty : true / false
$.isFunction() <jQuery.isFunction()> : 인자가 JavaScript 함수인지 체크한다.
$.isFunction(function(){}); // function(){}가 함수인지 체크한다. : true / false
$.isPlainObject() <jQuery.isPlainObject()> : 인자가 plain Object인지 확인한다. (Plain Object : "{}" 나 "new Object"로 만들어진) ; IE8에서는 Error
$.isPlainObject({}); // {}가 Plain Object 인지 체크 한다. true /false
$.isWindow() <jQuery.isWindow()> : Window 인지 판별한다.
$.isWindow(window); // window가 Window 인지 체크 true / false
$.isXMLDoc() <jQuery.isXMLDoc()> : XML 문서의 DOM 노드 또는 XML 문서인지 체크
$.isXMLDoc(document); // document가 xml 문서인지 확인 : false
[jQuery] jQuery API (4/7) - 효과
4. 효과
.animate() : 해당 객체의 CSS 변화 효과를 준다. /$('p').animate({CSS Map}, {options});
/ $('p).animate({color:'white', font-size : 22px}, {duration : 400, easing : 'ease-in',
complete : function(){....}}); {queue:false}
.delay() : 해당 시간만큼 실행을 delay 시킨다.
/ $("div").slideDown().delay(5000).slideUp(); // id div 요소를 슬라이드 다운 후 5초 후 슬라이드 업 한다.
.stop() : 실행중인 애니메이션을 중지한다.
$("div").stop(); // div의 큐의 애니메이션을 멈춘다.
.show() : 해당 요소를 보여준다.
$("div").show(); // div 가 나타난다.
$("div").show(1000); // div 가 1초에 걸쳐서 나타난다.
.hide() : 해당 요소를 숨긴다.
$("div").hide(); // div가 사라진다.
$("div").show(1000); // div 가 1초에 걸쳐서 사라진다.
.toggle() : 해당 요소가 show 상태면 hide() / hide 상태면 show() 실행
$("div").toggle(); // div가 hide 상태면 show() / show 상태면 hide()한다.
$("div").toggle(1000); // div 가 1초에 걸쳐서 toggle() 한다.
.fadeIn() : 서서히 나타나게 한다.
$("div").fadeIn(); // div가 서서히 나타난다.
$("div").fadeIn("slow"); // div가 천천히 서서히 나타난다.
$("div").fadeIn(3000"); // div가 3초에 걸쳐서 서서히 나타난다.
.fadeOut() : 서서히 사라지게 한다.
.fadeToggle() : show 상태면 fadeOut(), hide 상태면 fadeIn()이 실행된다.
.fadeTo() : 주어진 시간동안 주어진 투명도로 변화한다.
$("div").fadeTo("slow", 0.15); // 천천히 투명도 0.15 로 변화
$("div").fadeTo("slow", 0.15); // 천천히 투명도 0.15 로 변화
.slideDown() : 선택 요소가 슬라이드 되어 내려온다.
$("div").slideDown(); // div가 아래로 내려온다.
$("div").slideDown("slow"); // div가 천천히 아래로 내려온다..
$("div").slideDown(3000"); // div가 3초에 걸쳐서 아래로 내려온다.
.slideUp() : 선택 요소가 슬라이드 되어 올라간다.
.slideToggle() : 선택 요소가 slideDown 상태면 slideUp(), slideUp 상태면 slideDown()을 실행
.queue() : 애니메이션이 chain으로 연속적으로 연결될 때, 애니메이션이 아닌 실행 함수를 큐에 저장 한다.(ex: class 속성 변경)
.dequeue() : queue에 쌓여있는 나머지 함수를 실행한다.
$("div").show("slow").animate({left:'+=200'}. 2000) // id div 요소가 천천히 나타난 후, 2초간 오른쪽으로 200이동한다
$("div").queue(function(){ // queue의 함수를 호출한다.
$(this).addClass("newcolor"); // id div 요소의 class를 newcolor 등록
$(this).dequeue(); // 다음 애니메이션 실행
});
$("div").animate({left:'-=200'}, 500); // 05초간 왼쪽으로 200 이동한다.
.clearQueue() : queue에 쌓인 것을 삭제한다. 현재 실행중인 queue는 계속 실행된다.
$("#stop").click(function(){ // id stop 요소를 클릭하면
$("div").clearQueue(); // div의 queue가 비워진다. 실행중인 큐는 진행한다.
});
[jQuery] jQuery API (5/7) - Event
5. Event
- event 제어
.bind() : event가 발생하면 실행될 함수를 지정한다. (이미 생성된 DOM에 대하여)
/ $("#image").bind("mousedown", function(){
// id image 요소에 마우스를 클릭했을 때, 해당 함수 실행 지정
});
.unbind() : bind()를 해제한다.
.live() : 동적으로 생성된 DOM 객체들의 이벤트를 연결한다. (이벤트 버블 발생 가능)
/ $("#image").live("click", function(){
// id image 요소에 마우스를 클릭했을 때, 해당 함수 실행 지정
});
.die() : live() 제거
.delegate() : 동적으로 생성된 DOM 객체들의 이벤트를 연결한다. (이벤트 버블 방지)
/ $("#image").delegate("td", "click", function(){
// id image 요소 밑의 'td'에 마우스를 클릭했을 때, 해당 함수 실행 지정
});
.undelegate() : delegate() 제거
.on() : 동적으로 생성된 DOM 객체들의 이벤트를 연결한다. (1.7 이후 버전)
/ $("#image").on("click", "td", function(){
// id image 요소 밑의 'td'에 마우스를 클릭했을 때, 해당 함수 실행 지정
});
/ $("#image").on("click", "td",{foo: "bar"}, function(event){
alert(event.data.foo);
// id image 요소 밑의 'td'에 마우스를 클릭했을 때, {foo:"bar"}를 event에 넣어 함수 실행
});
.off() : on() 제거 (1.7 이후 버전)
.one() : bind() 함수처럼 선택된 이벤트를 지정한다. 하지만 딱 한번만 이벤트가 실행된다.
.trigger() : 선택된 요소의 이벤트를 발생시킨다.
/ $("#img").trigger("click") // id img 요소에 click 이벤트를 발생시킨다.
.triggerHandler() : trigger() 함수와 비슷하게 동작한다.
- form submission에는 동작하지 않는다.
- 선택된 요소들중 가장 첫번째 요소만 영향을 미친다.
- 브라우저 기본동작, 버블링, live Events는 일어나지 않는다.
$('element").명령어(function(event){
// element 요소에 명령어 실행시 함수 동작
});
- 웹 브라우져 Event
.load() : 문서가 불려졌을 때
.unload() : 문서가 닫혔을 때
.ready() : DOM이 모두 준비 되었을 때 함수 실행
$.holdReady() <jQuery.holdReady()> : DOM이 로드되는 것을 지연시켜준다. ; js 파일을 불러들이고 동작을 할때, js가 로드되지 않은 시점에 DOM이 로드 되는것을 방지해준다. / head 영역에 선언하는게 좋다.
$.holdReady(true); // DOM이 로드되는 것을 멈춘다.
$.getScript("myplugin.js", function(){ // myplugin.js 파일을 가져온다.
$.holdReady(false); // 파일 로드가 성공하면 DOM을 구성한다.
});
.resize() : 창 크기가 변경되었을 때 함수 실행
.scroll() : HTML 문서가 스크롤 되었을 때
.error() : 선택된 개체(images, window, document 등)가 정확하게 로드(load)되지 않을 경우 발생 오류 이벤트
<img src="missing.png" alt="Book" id="book" />
$('#book').error(function(){
// 이미지가 로드되지 않을 경우 함수 실행
});
- 마우스 Event
.click() : 마우스 클릭시
.dblclick() : 마우스 더블 클릭시
.mousedown() : 마우스 버튼을 누른 순간
.mouseup() : 마우스 버튼을 놓는 순간
.mouseover() : 대상에 마우스 커서가 위치했을 때
.mouseseenter() : 대상에 마우스가 위치했을 때
.mousemove() : 대상에서 마우스 커서가 움직였을 때
.mouseout() : 대상에서 마우스가 벗어 났을때
.mouseleave() : 대상에서 마우스가 벗어났을 때
.hover() : 마우스가 요소에 오버되었을때 첫번째 함수가 실행되고, 마우스가 요소를 떠날때 두번째 함수가 실행된다.
/ $("#p1").hover(function(event){
// 마우스가 오버되었을때 함수 실행
},
function(){
// 마우스가 떠날때 함수 실행
});
.toggle()
- 키보드 Event
.keypress() : 키 입력 시 발생(enter, tabemd의 특수키 제외)
.keydown() : 키 입력을 누르고 있을 때, 모든 키에 대해 적용
.keyup() : 키 입력 후 발생
- form Event
.select() : 선택한 개체를 선택 했을 때
.change() : <input />, <textarea />, <select /> 요소의 값 변경시 실행
.focus() : 해당 요소에 포커스를 받았을 때 실행되는 함수
.focusin() : focus() 의 업그레이드(1.4)
.blur() : 해당 요소에 포커스를 잃었을 때 실행되는 함수
.focusout() : blur()의 업그레이드(1.4)
.submit() : submit이 일어날 때
- event 함수 option 처리
event.target : event를 발생시킨 Target
event.currentTarget : event 버블링으로 현재 이벤트 발생되는 Target
event.relatedTarget : 해당 이벤트와 관련된 다른 DOM 요소 선택
event.result :해당 이벤트가 실행한 이벤트 핸들러 함수에 의해 리턴되는 가장 마지막 값
event.data : event 대상이 가지고 있는 값
event.namespace : 이벤트가 tirgger 됐을때, 발생한 이벤트의 namespace
event.pageX : 이벤트가 발생한 요소의 문서의 왼쪽부터의 위치
event.pageY : 이벤트가 발생한 요소의문서의 상단으로부터의 위치
event.timeStamp : event가 실행된 시간
event.type : 실행된 event 타입
event.which : 이벤트가 발생된 요소의 key (키보드 값<숫자>, 마우스 <왼쪽 1, 중간 2, 오른쪽 3>)
event.preventDefault() : 해당 요소에 걸려있는 다른 이벤트를 무력화 한다.
event.isDefaultPrevented() : event.preventDefault() 상태인지 체크 true / false
event.stopPropagation() : 다른 이벤트 핸들러가 호출되는 것을 막는다.(이벤트 버블링)
event.stopImmediatePropagation() : 다른 이벤트 핸들러가 호출되는 것을 막는다. (이벤트 버블링)
event.isPropagationStopped() : event.stopPropagation()이 호출 됐는지 여부 리턴 true / false
event.isImmediatePropagationStopped() : event.stopImmediatePropagation()이 호출됐는지 여부 리턴 true /false
[jQuery] jQuery API (6/7) - Ajax
6. Ajax
$.param() <jQuery.param()> : 폼 요소들의 값을 변환하여 직렬화된 문자열로 표현한다.
var params = {width : 1680, height : 1050}; // 배열 선언
var str = $.param(params); // Ajax로 전송가능하도록 직렬화
// $.param({a:[2,3,4]}); // "a[]=2&a[]=3&a[]4"
// $.param({a:{b:1,c:2},d:[3,4,{e:5}] }); // "a[b]=1&a[c]=2&d[]=3&d[]=4&d[2][e]=5"
.serialize() : 선택한 form의 데이터를 ajax로 전송할 수 있도록 직렬화 한다.
/ $("#name").serialize(); // id name form의 데이터를 직렬화한다. a=1&b=2
.serializeArray() : 선택한 form의 데이터를 ajax로 전송할 수 있도록 배열로 직렬화 한다.
/ $("#name").serializeArray(); // id name form의 데이터를 배열로 직렬화한다. [ { name : "a", value : "1" }, { name : "c", value:"3"}]
$.ajax() <jQuery.ajax()> : ajax 비동기 호출 전송
$.ajax({
type : 'POST', // post 타입 전송
url : 'some.php', // 전송 url
data : "name=John&location=Boston", // 전송 파라미터
cache : false, // ajax로 페이지를 요청해서 보여줄 경우
// cache가 있으면 새로운 내용이 업데이트 되지 않는다.
async : true, // 비동기 통신, false : 동기 통신
beforSend : fucntion(){ // ajax 요청이 전송되기 전 실행 함수
},
success : function(msg){ // 콜백 성공 응답시 실행
},
error : function(){ // Ajax 전송 에러 발생시 실행
},
complete : function(){ // success, error 실행 후 최종적으로 실행
}
});
.ajaxSend() : ajax 요청이 서버로 보내지기전에 호출됨
.ajaxStart() : ajax 요청이 서버로보내진 직후에 호출됨.
.ajaxStop() : 응답을 서버로부터 받은 직후에 호출됨
.ajaxSuccess() : 요청이 성공적으로 완료된 후에 호출됨
.ajaxError() : ajax 실행 후 에러 발생시 함수 실행 / $.ajax() 옵션의 error와 동일
.ajaxComplete() : ajax 실행 후 최종적으로 함수 실행 / $.ajax() 옵션의 complete 와 동일
$.ajaxPrefilter() <jQuery.ajaxPrefilter()> : ajax 요청을 보내기 전에 Ajax 옵션들을 수정하거나 조작한다.
$.ajaxPrefilter(function(options)){
// options : request 요청 옵션 값들
});
$.ajaxSetup() <jQuery.ajaxSetup()> : 앞으로 발생할 ajax 요청에 대한 디폴트 값을 설정한다.
$("button").click(function(){ // button을 클릭할시 ajax 호출에 대한
$.ajaxSetup({ // url과 success 함수를 셋팅한다.
url : "test_ajax.txt",
success:function(result){
})
});
$.get() <jQuery.get()> : get 방식으로 ajax 통신을 한다. 서버에서 가져온다.
$.get("test.php", function(data.status){..}); // "test.php"로 get 방식 통신 후 function 실행
$.getJSON() <jQuery.getJSON()> : $.get()과 동일하나, 데이터 타입은 json 타입이다.
$.getScript() <jQuery.getScript()> : $.get()과 동일하나, 데이터 타입은 script, 동적으로 자바스크립트를 불러온다.
$.post() <jQuery.post()> : post 방식으로 ajax 통신을 한다. 서버와 파라미터로 데이터를 주고받는다.
$.post("test.php", // "test.php"로
{ // name과 message 파라미터
name: "myeonghyeon",
message : "hi"
},
function(data.status){..} // callback() 함수 실행
); // "test.php"로 파라미터를 보내 post 방식 통신 후 function 실행
.promise() : 비동기함수(Ajax)가 리턴한 객체를 가진다.
.promise().done(); : 선택된 비동기함수 리턴 객체의 콜백이 성공, done 함수 실행
$("div").promise().done(function(){
$("p").append("Finished"); // 모든 div 요소의 요청이 모두 성공하면, done 실행, p 요소에 finished 삽입
});
.promise().fail(); : 선택된 비동기함수 리턴 객체의 콜백이 실패, fail 함수 실행
.promise().then(); : 콜백이 성공하면(success) 리턴데이터를 then의 인자가 받아서 실행
$("div").promise().then(A).then(B); // div에 주어진 액션이 성공하면 리턴값을 가지고 A 함수 실행 A함수 리턴값을 가지고 B 함수 실행
$.when() <jQuery.when()> : 인자의 함수의 콜백 후 리턴값을 반환한다.
$.when( effect() ).done(function(){
$("p").append("finished"); // effect() 함수를 실행해서 성공하면 p 에 finished를 삽입한다.
});
$.when( A, B ).done(function(){
// 동시에 A,B 함수를 실행하고 모두가 성공할 경우 .done(function() 실행
});
$.deferred() <jQuery.deferred()> : $.ajax가 반환하는 객체, pomise 객체와 같은 일을 할 수 있으며 추가적인 콜백 함수를 가진다.
deferred.always() : 요청이 성공, 실패에 무관하게 항상 실행된다.
deferred.done() : 요청이 성공시 실행된다.
deferred.fail() : 요청이 실패시 실행된다.
deferred.isRejected() : 요청이 실패됐는지 확인한다.
deferred.isResolved() : 요청이 성공했는지 확인한다.
deferred.pipe() : 요청의 return 값을 인자로 넘겨준다.
deferred.promise() : 요청의 콜백을 객체로 가지고 있는다.
deferred.reject() : 요청이 실패시 fail() 함수를 호출한다.
deferred.rejectWith()
deferred.resolve() : 요청이 성공시 done() 함수를 호출한다.
deferred.resolveWith()
deferred.then() : 두개의 인자를 가지고 두개 모두 성공할 때 resolve(), 하나라도 실패하면 reject() 실행
[jQuery] jQuery API (7/7) - 선택자
- "*" : 전체 선택자
속성 선택자
- [name] : name 속성이 있는 요소를 선택
- [name = "value"][name2 = "value2"] : name 속성의 값이 value이고 name2 속성의 값이 value2 인 요소를 선택
- [name = "value"] : name 속성의 값이 value인 요소를 선택한다.
- [name != "value"] : name 속성의 값이 value가 아닌 요소를 선택한다.
- [name ^= "value"] : name 속성의 값이 value로 시작하는 요소를 선택한다.
- [name |= "value"] : name 속성의 값이 value 이거나 value로 시작하는 요소를 선택한다.
- [name *= "value"] : name 속성의 값에 value가 들어 있는 요소를 선택한다.
- [name ~= "value"] : name 속성의 값이 value를 포함하는, 쉼표로 구분된 문자열 요소를 선택.
- [name $= "value"] : name 속성의 값이 value로 끝나는 요소를 선택한다.
태그 선택
- div : 태그명이 div인 모든 Element 선택
- div p : div 요소의 자식 요소중 태그명이 p인 요소 선택
- div, p : div 요소와 p 요소를 선택
- div > p : div 요소의 바로아래 자식 요소중 태그명 p인 요소 선택
- div + p : div의 형제 요소로 바로 다음에 나오는 요소 p인 요소 선택
- div ~ p : div의 형제 요소로 다음에 나오는 모든 요소 p인 요소 선택
- div:has(p) : 태그명이 p인 자손을 하나 이상 가지는 div 요소 선택
- div.code : 클래스명 code를 가지는 모든 div 요소 선택
- div#name : id가 name인 div 요소 선택
- div[A] : 속성 A를 가지는 모든 div 요소 선택
- div[A=B] : 값이 B인 A 속성 값을 가진 div 요소 선택
- div[A^=B] : 값이 B로 시작하는 값인 A 속성을 가진 div 요소 선택
- div[A$=V] : 값이 V로 끝나는 값인 A 속성을 가진 div 요소 선택
- div[A*=V] : 값에 V를 포함하는 값인 A 속성을 가진 div 요소 선택
선택자
- :animated : 움직이는 요소를 선택한다.
- :header() : <h1>, <h2>, <h3> 등 제목 요소를 선택한다.
- :input : input, textarea 모든 입력 컨트롤 선택
- :text : <input type="text"> 선택
- :button : <input type="button"> 선택
- :radio : <input type="radio"> 선택
- :checkbox : <input type="checkbox"> 선택
- :password : <input type="password"> 선택
- :file : <input type="file"> 선택
- :hidden : <input type="hidden"> 선택
- :image : <imput type="image"> 선택
- :submit : <input type="submit"> 선택
- :reset : <input type="reset"> 선택
- :selected : <select>의 <option selected> 를 선택한다.
- :checked : <input type="checkbox"> <input type="radio">의 체크된 요소를 선택한다.
- :contains() : 해당 인자를 가지고 있는 요소 선택 ; $('div:contains("text")') // div 요소중 "text"를 포함한 요소
- :visible : 눈에 보이는 요소 선택
- :enabled : 활성화된 요소 선택
- :disabled : 비활성화된 요소 선택
- :empty : 해당 요소가 비어있는 요소 선택 (text도 포함)
- :odd : 홀수 요소 선택
- :even : 짝수 요소 선택
- :parent : 부모요소 선택
- :first : 첫번째 요소 선택
- :first-child : 첫번째 자식요소 선택
- :last : 마지막 요소 선택
- :last-child : 마지막 자식요소 선택
- :nth-child() : 자식 요소 집합에서 인자의 위치한 자식을 선택 ; $('li:nth-child(1)') // <li>의 첫번째 자식요소를 찾는다. (index : 1, 2, 3)
- :eq() : 인자의 순번에 있는 요소를 선택 ; $('td:eq(2)") // td 집합중 세번째 요소를 선택 (index : 0, 1, 2)
- :only-child : 형제가 없는 요소를 선택
- :gt() : 인자보다 큰 요소 선택 ; $(":gt(index)") // index 값보다 큰 요소 선택
- :lt() : 인자보다 작은 요소 선택 ; $(":lt(index)") // index 값보다 작은 요소 선택
- :has() : 인자요소를 가지고 있는 요소를 선택 ; $('div:has(p)') // p를 자식으로 가지고 있는 div를 선택
- :not() : 인자의 조건이 아닌 요소를 선택 ; $(':not(div)') // div 가 아닌 요소를 선택
- :focus : focus 상태 요소 선택
댓글 없음:
댓글 쓰기