1. 제이쿼리(jQuery)
- 제이쿼리(jQuery)
제이쿼리(jQuery)란?
모질라 사의 자바스크립트 개발자인 존 레식이 자바스크립트를 이용해 만든 라이브러리 언어
제이쿼리jQuery를 통한 개선점
- 호환성 문제 해결
- 쉽고 편리한 애니메이션 효과 기능 구현
2. 선택자
- 선택자
선택자란?
문서 객체 모델(DOM)을 통해 HTML 요소를 선택하여 가져와 쉽게 제어할 수 있다.
사용법
<script> $("#txt").css("color","red") // 이렇게 코딩하면 body태그가 생성되기 전에 선택자가 실행되어 오류가 난다. </script><script> $(document).ready(function(){ $("#txt").css("color","red"); }); </script><script> $(function(){ $("#txt").css("color","red"); }); </script> - 기본형
- 선택한 요소에 지정한 스타일을 적용
$("CSS 선택자").css("스타일 속성명","값"); - 선택한 요소에 지정한 속성을 적용
$("CSS 선택자").attr("스타일 속성명","값");
- 선택한 요소에 지정한 스타일을 적용
3. 기본 선택자
3-1. 직접 선택자
직접 선택자란?
주로 멀리 떨어진 요소를 직접 선택할 때 사용하는 선택자입니다. 그리고 동시에 여러개 사용가능합니다.
- 전체 선택자
전체 요소(태그)를 선택할 때 사용합니다.기본형
$("*") - 아이디 선택자
아이디 속성에 지정한 값을 포함하는 요소(태그)를 선택합니다.기본형
$("#아이디명") - 클래스 선택자
클래스 속성에 지정한 값을 포함하는 요소(태그)를 선택합니다.기본형
$(".클래스명") - 요소명 선택자
지정한 요소(태그)명과 일시하는 요소를 모두 선택합니다.기본형
$("요소명") - 종속 선택자
선택한 요소(태그)의 id또는 class값이 일치하는 요소(태그)를 선택할 때 사용합니다.기본형
$("요소명#id값") $("요소명.class값")
3-2. 인접 관계 선택자
인접 관계 선택자란?
직접 선택자로 요소를 먼저 선택하고 그다음 선택한 요소와 가까이 있는 요소를 선택할 때 사용합니다.
- 부모 요소 선택자
선택한 요소(태그)를 감싸고 있는 부모 요소를 선택합니다.기본형
$("요소 선택").parent(); - 하위 요소 선택자
기준 요소(태그)로 선택한 하위 요소(태그)만 선택합니다.기본형
$("기준 선택 선택1 요소선택2") - 자식 요소 선택자
선택된 요소(태그)를 기준으로 지정한 자식 요소(태그)만 선택합니다.기본형
$("요소 선택 > 자식 요소 선택") $("요소 선택").children("자식 요소 선택") $("요소 선택").children() // 선택한 요소를 기준으로 모든 자식 요소를 선택 - 형(이전) 요소 선택자
선택한 요소(태그)를 기준으로 바로 이전 형제 요소(태그)만 선택합니다.기본형
$("요소 선택").prev() - 동생(다음) 요소 선택자
선택한 요소(태그)를 기준으로 바로 다음 형제 요소(태그)만 선택합니다.기본형
$("요소 선택").next() $("요소 선택1 + 요소 선택2") - 전체 형(이전) 요소 선택자
선택한 요소(태그)를 기준으로 이전에 오는 전체 형제 요소(태그)를 선택합니다.기본형
$("요소 선택").prevAll() - 전체 동생(다음) 요소 선택자
선택한 요소(태그)를 기준으로 다음에 오는 전체 형제 요소(태그)를 선택합니다.기본형
$("요소 선택").nextAll() - 전체 형제 요소 선택자
선택한 요소(태그)의 모든 형제 요소(태그)를 선택합니다.기본형
$("요소 선택").siblings() - 범위 제한 전체 형 요소 선택자
선택한 요소(태그)를 기준으로 형제 요소(태그) 중 지정한 범위 내의 전체 형 요소(태그)를 선택합니다.기본형
$("요소 선택").prevUntill("범위 제한 요소 선택") - 범위 제한 전체 동생 요소 선택자
선택한 요소(태그)를 기준으로 형제 요소(태그) 중 지정한 범위 내의 전체 동생 요소(태그)를 선택합니다.기본형
$("요소 선택").nextUntill("범위 제한 요소 선택") - 상위 요소 선택자
선택한 요소(태그)를 기준으로 모든 상위 요소(태그)를 선택하거나 상위 요소(태그) 중 선택하고자 하는 요소(태그)만 선택할 때 사용합니다.기본형
$("요소 선택").parents() $("요소 선택").parents("요소 선택") - 가장 가까운 상위 요소 선택자
선택한 요소(태그)를 기준으로 가장 가까운 상위 요소(태그)만 선택할 때 사용합니다.기본형
$("요소 선택").closest("요소 선택")
4. 탐색 선택자
4-1. 위치 탐색 선택자
위치 탐색 선택자란?
배열 인덱스를 사용하여 특정 요소를 정확하게 탐색하여 선택할 때 사용합니다.
- first 선택자
선택된 요소 중 첫 번째 요소만 선택합니다.기본형
$("요소 선택:first") $("요소 선택").first() - last 선택자
선택된 요소 중 마지막 요소만 선택합니다.기본형
$("요소 선택:last") $("요소 선택").last() - even 선택자
선택한 요소 중 홀수 번째(짝수 인덱스) 요소만 선택합니다.기본형
$("요소 선택:even") - odd 선택자
선택한 요소 중 짝수 번째(홀수 인덱스) 요소만 선택합니다.기본형
$("요소 선택:odd") - eq(index) 탐색 선택자
선택한 요소 중 지정한 인덱스가 참조하는 요소만 선택합니다.기본형
$("요소 선택:eq(index)") $("요소 선택").eq(index) - lt(index) 탐색 연산자
선택한 요소 중 지정한 인덱스 보다 작은 인덱스를 참조하는 요소만 선택합니다.기본형
$("요소 선택:lt(index)") - gt(index) 탐색 연산자
선택한 요소 중 지정한 인텍스보다 큰 인덱스를 참조하는 요소만 선택합니다,기본형
$("요소 선택:gt(index)") - first-of-type 선택자
선택한 요소의 무리 중 첫 번째 요소만 선택합니다기본형
$("요소 선택:first-of-type") - last-of-type 선택자
선택한 요소의 무리 중 마지막에 위치한 요소만 선택합니다.기본형
$("요소 선택:last-of-type") - nth-child(숫자n) 선택자
선택한 요소의 무리 중 지정한 숫자(배수)의 요소를 선택합니다.기본형
$("요소 선택:nth-child(숫자)") // 지정한 숫자에 위치한 요소를 선택 $("요소 선택:nth-child(숫자n)") // 지정한 배수에 위치한 요소를 선택 - nth-last-of-type 선택자
선택한 요소의 무리 중 마지막에서 지정한 숫자의 요소를 선택합니다.기본형
$("요소 선택:nth-last-child(숫자)") // 마지막 위치에서 지정한 숫자에 위치한 요소를 선택 - only-child 선택자
선택한 요소가 '부모 요소에게 하나뿐인 자식 요소'인 경우에 선택합니다.기본형
$("요소 선택:only-child") - slice(index) 선택자
선택한 요소의 지정 구간 인덱스의 요소를 선택합니다.기본형
$("요소 선택").slice(start index, end index) // start index < array index <= end index
4-1-1. 제이쿼리 배열 관련 메서드
- each() / $.each() 메서드
배열에 저장된 데이터 수만큼 메서드를 반복 실행하고 배열에 저장된 요소를 순서대로 하나씩 선택하면서 인덱스 정보를 가져옵니다.기본형
$("요소 선택").each(function(매개변수1, 매개변수2) {}) $.each($("요소선택"), function(매개변수1, 매개변수2) {}) // 매개변수 1, 매개변수2에는 배열에 저장된 요소와 인덱스의 값이 배열에 오른차순으로 대입 $("요소 선택").each(function() {$(this)}) $.each($("요소 선택"), function() {$(this)}) // $(this)에는 배열에 저장된 요소가 오름차순으로 대입 - $.map() 메서드
배열에 저장된 데이터 수만큼 메서드를 반복 실행하고 메서드에서 반환된 데이터는 새 배열에 저장되고 그 배열 객체를 반환합니다.기본형
$.map(Array,function(매개변수1, 매개변수2){ return 데이터; }) - $.grep() 메서드
배열에 저장된 데이터 수 만큼 반복 실행하고 인덱스 오름차순으로 배열의 데이터를 불러옵니다. 메서드의 반환값이 true면 데이터가 새 배열에 저장되고 배열을 반환합니다.기본형
$.grep(Array,function(매개변수1, 매개변수2){ return [true/false]; }) - $.inArray() 메서드
배열에 저장된 데이터 중 지정한 데이터를 찾아 인덱스 값을 반환합니다.기본형
$.inArray(data, Array, start index) - $.isArray() 메서드
지정한 데이터가 배열 객체면 true, 배열객체가 아니면 false를 반환합니다.기본형
$.isArray(object) - $.merge() 메서드
두 배열 객체를 하나의 객체로 묶습니다.기본형
$.merge(Array1, Array2) - index() 메서드
지정 선택 요소를 찾아서 인덱스값을 반환합니다.기본형
$("요소 선택").index("지정 선택 요소");
4-2. 속성 탐색 선택자
속성 탐색 탐색자란?
선택한 요소를 기준으로 일치하는 속성의 포함 여부를 따져 요소를 선택하는 선택자입니다.
-
속성 탐색 선택자 종류
종류 설명 $("요소 선택[속성]") 선택한 요소 중 해당 속성이 포함된 요소만 선택 $("요소 선택[속성 = 값1]") 선택한 요소 중 해당 속성값이 값1인 요소만 선택 $("요소 선택[속성 ^= 텍스트]") 선택 요소 중 속성값이 '텍스트'로 시작하는 요소만 선택 $("요소 선택[속성 $= 텍스트]") 선택 요소 중 속성값이 '텍스트'로 끝나는 요소만 선택 $("요소 선택[속성 *= 텍스트]") 선택 요소 중 속성값중 '텍스트'를 포함하는 요소만 선택 $("요소 선택:hidden") 선택 요소 중 숨겨져 있는 요소만 선택 $("요소 선택:visible") 선택 요소 중 보이는 요소만 선택 $(".text") input 요소 중 type 속성값이 text인 요소만 선택 $(".selected") selected 속성이 적용된 요소만 선택 $(".checked") checked 속성이 적용된 요소만 선택
4-3. 콘텐츠 탐색 선택자
- contains() 탐색 선택자
선택한 요소 중 지정한 텍스트를 포함하는 요소만 선택합니다.기본형
$("요소 선택:contains(텍스트)") - contents() 탐색 선택자
선택한 요소의 하위 요소 중 1 깊이의 텍스트와 태그 노드를 선택합니다.기본형
$("요소 선택").contents() - has() 탐색 선택자
선택한 요소 중 지정한 태그를 포함하는 요소만 선택합니다.기본형
$("요소 선택:has(요소명)") $("요소 선택").has("요소명") - not() 탐색 선택자
선택한 요소 중 지정한 요소만 제외한 채 선택합니다.기본형
$("요소 선택:not(제외할 요소 선택)") $("요소 선택").not(제외할 요소 선택) - end() 탐색 선택자
필터링되기 이적의 선택자가 적용되도록합니다.기본형
$("요소 선택").탐색선택자().end() - find() 탐색 선택자
선택한 하위 요소 중에서 find()로 필터링한 요소만 선택합니다.기본형
$("요소 선택").find("하위 요소 중 필터링할 요소 선택") - filter() 탐색 선택자
선택한 요소 중에서 filter()로 필터링한 요소만 선택합니다.기본형
$("요소 선택").filter("선택한 요소 중 필터링할 요소 선택")
4-4. 알아두면 유용한 메서드
| 종류 | 설명 |
|---|---|
| is("요소 상태") | 선택한 요소가 보이면 true를 반환 |
| $.noConflict() | 현재 제이쿼리에서 사용 중인 $ 메서드 사용을 중단하고 새로 지정한 변수명 메서드를 사용 |
| get() | 선택자에 get(0)을 적용하면 자바스크립트 DOM 방식의 스타일을 사용가능 |
5.객체 조작 메서드
객체 조작 메서드란?
객체를 생성, 복제, 삭제, 속성 변환할 때 사용하는 메서드입니다.
속성 조작 메서드와 수치 조작 메서드, 객체 편집 메서드로 나눌수 있습니다.
5-1 속성 조작 메서드
- html() 메서드
선택한 요소의 하위 요소를 가져와 문자열로 변환하거나 하위 요소를 전부 제거하고 새 요소로 바꿀때 사용합니다.기본형
$("요소 선택").html() // 선택한 요소의 하위 요소를 가져와 문자열로 반환 $("요소 선택").html("새 요소") // 선택한 요소의 하위 요소를 전부 제거하고 지정한 새 요소로 생성 - text() 메서드
선택한 요소에 포함되어 있는 전체 텍스트를 가져오거나 선택한 하위 요소를 전부 제거하고 새 텍스트를 생성할 때 사용합니다.기본형
$("요소 선택").text() // 선택한 요소의 텍스트만 반환 $("요소 선택").text("새 요소") // 선택한 요소의 하위 요소를 전부 제거하고 지정한 새 요소로 생성 - attr() 메서드
선택한 요소에 새 속성을 생성하거나 기존의 속성을 변경할 때 또는 요소의 속성값을 불러올 때 사용합니다.기본형
$("요소 선택").attr("속성명") // 선택한 요소의 지정한 속성값을 가져옴 $("요소 선택").attr("속성명","새 값") // 요소를 선택하여 지정한 속성값을 적용함 $("요소 선택").attr({"속성명1":"새 값1","속성명2":"새 값2", ...}) // 요소를 선택하여 지정한 여러개의 속성값을 적용 - removeAttr() 메서드
선택한 요소에서 기존의 속성을 삭제할 때 사용합니다.기본형
$("요소 선택").removeAttr("속성") // 선택한 요소에서 지정한 속성을 삭제 - addClass() 메서드
선택한 요소에 클래스를 생성합니다.기본형
$("요소 선택").addClass("class 값") // 요소를 선택하여 지정한 class값을 생성 - removeClass() 메서드
선택한 요소에서 지정한 클래스를 삭제합니다.기본형
$("요소 선택").removeClass("class 값") // 요소를 선택하여 지정한 class값을 삭제 - toggleClass() 메서드
선택한 요소에 지정한 클래스가 없으면 생성하고 있을 경우에는 삭제합니다.기본형
$("요소 선택").toggleClass("class 값") // class값이 있으면 삭제, 없으면 생성 - hasClass() 메서드
선택한 요소에 지정한 클래스가 있으면 true, 없으면 false 반환기본형
$("요소 선택").hasClass("class 값") // class값이 있으면 삭제, 없으면 생성 - val() 메서드
선택한 폼 요소의 value 속성값을 가져오거나 새 값을 적용할 때 사용합니다.기본형
$("요소 선택").val(); // 선택한 폼 요소의 value 속성값을 가져옴 $("요소 선택").val("새 값"); // 요소를 선택하여 value속성에 새 값을 적용 - prop() 메서드
선택한 폼 요소(선택 상자, 체크 박스, 라디오 버튼)의 상태 속성 값을 가져오거나 새롭게 설정할 때 사용합니다.기본형
$("요소 선택").prop("[checked/selected]"); //체크된 상태인지 선택된 상태인지 알수 있음 $("요소 선택").prop("[checked/selected]","[true/false]"); // 폼 요소를 선택하여 체크 또는 선택 상태를 바꿀수 있음 $("요소 선택").prop("[tagName/nodeType/selectedIndex/defaultValue]"); // 태그명이나 노드타입, 선택된 옵션의 인덱스값을 구함
5-2. 수치 조작 메서드
| 종료 | 사용법 | 설명 |
|---|---|---|
| height() | $("요소 선택").height() $("요소 선택").height(100) | 안쪽 여백과 선을 제외한 높잇값을 반환하거나 변환 |
| width() | $("요소 선택").width() $("요소 선택").width(100) | 안쪽 여백과 선을 제외한 너빗값을 반환하거나 변환 |
| innerHeight() | $("요소 선택").innerHeight() $("요소 선택").innerHeight(300) | 안쪽 여백을 포함한 높잇값을 반환하거나 변환 |
| innerWidth() | $("요소 선택").innerWidth() $("요소 선택").innerWidth(100) | 안쪽 여백을 포함한 너빗값을 반환하거나 변환 |
| outerHeight() | $("요소 선택").outerHeight() $("요소 선택").outerHeight(100) | 선과 여백을 포함한 높잇값을 반환하거나 변환 |
| outerHeight() | $("요소 선택").outerHeight() $("요소 선택").outerHeight(100) | 선과 여백을 포함한 너빗값을 반환하거나 변환 |
| position() | $("요소 선택").position().left $("요소 선택").position().top | 선택한 요소의 포지션 위칫값을 반환 |
| offset() | $("요소 선택").offset().left $("요소 선택").offset().top | 선택한 요소가 문서에서 수평/수직으로 얼마나 떨어져 있는지에 대한 값을 반환 |
| scrollLeft() | $(window).scrollLeft() | 브라우저의 수평 스크롤 이동 높잇값을 반환 |
| scrollTop() | $(window).scrollTop() | 브라우저의 수직 스크롤 이동 너빗값을 반환 |
5-3. 객체 편집 메서드
| 종류 | 사용법 | 설명 |
|---|---|---|
| before() | $("요소 선택").before("새 요소") | 선택한 요소의 이전 위치에 새 요소를 추가 |
| after() | $("요소 선택").after("새 요소") | 선택한 요소의 다음 위치에 새 요소 추가 |
| append() | $("요소 선택").append("새 요소") | 선택한 요소의 마지막 위치에 새 요소 추가 |
| appendTo() | $("새 요소").appendTo("요소 선택") | 선택한 요소의 마지막 위치에 새 요소 추가 |
| prepend() | $("요소 선택").prepend("새 요소") | 선택한 요소의 맨 앞 위치에 새 요소 추가 |
| prependTo() | $("새 요소").prependTo("요소 선택") | 선택한 요소의 맨 앞 위치에 새 요소를 추가 |
| insertBefore() | $("새 요소").insertBefore("요소 선택") | 선택한 요소의 이전 위치에 새 요소를 추가 |
| insertAfter() | $("새 요소").insertAfter("요소 선택") | 선택한 요소의 다음 위치에 새 요소를 추가 |
| clone() | $("요소 선택").clone(true/false) | 선택한 문서 객체를 복사, true면 하위 요소까지 복사, false면 선택한 요소만 복사 |
| empty() | $("요소 선택").empty() | 선택한 요소의 하위 내용들을 모두 삭제 |
| remove() | $("요소 선택").remove() | 선택한 요소를 삭제 |
| replaceAll() replaceWith() | $("새 요소").replaceAll("요소 선택") $("요소 선택").replaceWith("새 요소") | 선택한 요소들을 새 요소로 교체 |
| unwrap() | $("요소 선택").unwrap() | 선택한 요소의 부모 요소를 삭제 |
| wrap() | $("요소 선택").wrap("새 요소") | 선택한 요소를 새 요소로 각각 감쌈 |
| wrapAll() | $("요소 선택").wrapAll() | 선택한 요쇼를 새 요로소 한꺼번에 감쌈 |
| wrapInner() | $("요소 선택").wrapInner("새 요소") | 선택한 요소의 내용을 새 요소로 각각 감쌈 |
더 높은 곳으로