[JavaScript] jQuery

jQuery

JavaScript로 미리 구현되어있는 라이브러리의 한 종류

 

jQuery 환경설정

1. 라이브러리 다운로드 방식 ▶️ http://jquery.com/ 에서 다운로드 한 후, src에 라이브러리 경로를 적어준다.
<script type = "text/javascript" src = "./javascript/jquery.js"></script>

 

2. CDN 방식 경로 설정

<script type = "text/javascript src = "http://code.jquery.com/jquery-최신버전.min.js></script>

 

 

jQuery 선택자

 

$('선택자')

▶️ $(): jQuery기능이 담긴 확장 집합(Wrapper Set)

jQuery('선택자')

$('선택자')

$('선택자')[index] $('선택자').get(index)

$('선택자').메소드()

 

 

문서 준비 핸들러

https://docu94.tistory.com/37

1. ready

//Lambda식 이용
$(document).ready(() => {
	//함수 내용
});

//축약
$(function() {
	//함수 내용
});

- 문서가 모두 준비된 후 실행할 내용 작성 ▶️ 문서준비(= DOM Tree 로드)되기 전 스크립트 실행 방지

 

2. load

$(window).load ( () => {
	//함수내용
});

- 문서가 로드되기 전 스크립트가 실행되는 것을 방지 ▶️ 문서 안의 모든 프레임, 객체, 이미지 등 외부 자원 로드 후 실행

 

📌 결론: $(document).ready( function() {});이 $(windows).load( function() {});보다 빠르게 실행된다.

💡 <script>의 위치에 따라 문서 준비 핸들러 사용
- <script>가 header에 위치한 경우: 문서 준비 핸들러 안에 javascript를 작성해야함
- <script>가 body에 위치한 경우: 문서 준비 핸들러를 사용하지 않아도 가능

 

선택자

1. 기본선택자

//전체
$('*')

//태그
$('p') //<p></p>, <li></li> 등 태그

//아이디
$('#id')

//클래스
$('.sampleClassName')

//자기자신
$(this)

> '' 대신 "" 사용 가능

 

2. 속성선택자

$('선택자[속성선택자]') //선택자 생략 시 *(전체) 선택

// E = 선택자
$('E[attr]') //속성 attr을 가지는 모든 E 요소
$('[id]') // id 속성을 가진 모든 엘리먼트 선택

$('E[attr=val]') //값이 val인 속성을 가지는 모든 E 요소
$('input[type=text]') //input 태그 중, type이 text인 속성 선택

$('E[attr!=val]') //값이 val가 아닌 속성

$('E[attr^=val]') //val로 시작하는 속성

$('E[attr$=val]') //val로 종료되는 속성

$('E[attr*=val]') //val이 포함되는 속성

 

3. 선택자 조합

//자손과 자식
$('A B') // A의 모든 자손들 중 B에 해당 (A 밑에 있는 모든 태그들 중 선택, depth >= 1 이상)

$('A>B') // A의 자식들 중 B에 해당 (A 바로 밑 자식 중 B 선택, depth = 1)

// 형제
$('A+B') // A 뒤에 위치하는 형제 B 엘리먼트 (A와 B는 같은 레벨, B가 뒤에 서술)

$('A~B') // A의 형제 B 엘리먼트 (A와 B의 위치 상관X)

// 기타
$('A.B') // A에 해당하는 엘리먼트 중 class 속성명이 B

$('A, B, C') // A or B or C에 해당하는 모든 엘리먼트

 

4. 위치 기반 필터 선택자

$('선택자:필터선택자')

$('E:first') //E의 첫번째 엘리먼트

$('E:last') //E의 마지막 엘리먼트

$('E:first-child') //E의 첫번째 자식 엘리먼트

$('E:nth-child(n)') //E의 n번째 자식 엘리먼트

$('E:even') //E의 짝수번째 엘리먼트

$('E:odd') //E의 홀수번째 엘리먼트

$('E:eq(n)') // E의 n-1번째 엘리먼트

$('E:gt(n)') //E의 n번째(포함X) 이후의 엘리먼트

> eq(n)을 많이 쓴다.

 

5. 필터 선택자

$(':필터선택자')

$(':text'), $(':checkbox'), ... : 속성이 선택자 이름과 동일한 form 컨트롤
$(':text') //<input type = "text" />
$(':input') //<input>. <textarea>, <select>, 모든 버튼 요소
$(':button') //button, submit, reset 등 모든 버튼 요소
$(':enabled') //활성화 된 form 컨트롤
$(':disabled') //비활성화 된 form 컨트롤
$(':checked') //radio, checkbox 중 체크된 요소들
$(':selected') //옵션 요소 중 선택된 요소들

 

 

jQuery 함수

 

$('선택자').length

- 길이 return

$('선택자').get(index)

- index 위치의 엘리먼트 반환, 음수 시 뒤에서부터

- 인덱스 생략 시, 모든 엘리먼트 반환

$('선택자').each( function(){
    $(this).css({ /*내용*/ }) //this를 이용해 엘리먼트 접근
});

- 컬렉션을 순회하면서 모든 엘리먼트에 콜백 함수 호출

ex) $('li ul li').each(function() ~ : 모든 li ul li에 첩근

$('선택자').attr('속성명')

- 속성명에 해당하는 값 반환

- 첫 번째 엘리먼트를 대상으로 수행

 

$('선택자').attr('속성명', '값)

- 속성명에 해당하는 값을 추가(존재하지 않을 때) 또는 변경(이미 존재할 때)

- 모든 엘리먼트를 대상으로 수행

 

$('선택자').removeAttr('속성명')

- 속성값이 존재하면 삭제

 

필터링 메소드

$('선택자').filter('필터선택자FE')	필터선택자(FE)에 해당하는 요소 선택
$('E').not('FE')	FE에 해당하는 요소 제외하고 선택
$('E').has('FE')	FE에 해당하는 자손 엘리먼트(E)를 가지고 있는 E의 집합 선택
$('E').eq(index)	인덱스에 해당하는 위치에 있는 E 반환
$('E').first() $('E').last()	첫 번째 또는 마지막 엘리먼트를 객체로 반환
$('E').slice(start, end)	start 인덱스부터 end 인덱스 사이의 객체 반환

 

클래스 속성 메소드

$('E').hasClass('클래스명')	boolean 값으로 리턴 클래스명을 가지는 E 존재 여부 반환
$('E').addClass('클래스명')	모든 E에 인자로 작성한 클래스명 추가
$('E').removeClass('클래스명')	모든 E의 클래스 제거
$('E').toggleClass('클래스명')	기존 클래스명과 인자로 작성한 클래스명 두 개의 클래스를 번갈아가며 적용

 

 

jQuery 이벤트

 

이벤트 바인딩

- 이벤트 핸들러 추가

on('이벤트', function() { });

$('#button1').on('click', function(){
	console.log("클릭");
});

 

- 이벤트 핸들러 제거

off('이벤트');

$('button1').off(); //이벤트 전체 제거
$('button1').off('click'); //클릭 이벤트 제거

 

마우스 이벤트

- 마우스와 관련된 메소드

이벤트명( function() {});

// 마우스 클릭
$('div').click( function() {
	//함수작성
});

// 마우스 더블 클릭
$('div').dblclick(){

});

// 해당 영역에 마우스 포인터 들어왔을 때
$('div').mouseover(){

});

// 해당 영역에서 마우스 포인터가 벗어났을 때
$('div').mouseleave(){

});

 

form 이벤트

- 폼 이벤트에 대한 메소드

// 포커스 제거
$('#text').blur( function(){

});

// 값이 변할 때
$('#text').change( function(){

});

// 포커스를 받을 때
$('#text').focus( function(){

});

// 특정 필드 선택
$('#text').select( function(){

});

// submit 버튼 클릭
$('#text').submit( function(){

});

 

jQuery DOM 조작

 

- DOM 엘리먼트 생성

// 엘리먼트 생성 = document.createElement('div')
$('HTML태그');
$(' <div> text와 함께 엘리먼트 생성 </div>');

// 엘리먼트 삽입
// 자식 삽입
$('HTML태그').appendTo('선택자'); //새로운 태그 생성 후 특정 엘리먼트 삽입
$('<li>마지막</li>').appendTo('ol');

$('선택자').append('HTML태그'); // 선택자의 자식 노드 중 가장 마지막 노드에 삽입
$('ol').append('<li> 마지막 </li>');

$('HTML태그').prependTo('선택자'); //새로운 태그 생성 후 특정 엘리먼트에 삽입
$('<li>첫번째</li>').prependTo('ol');

$('선택자').prepend('HTML태그'); //선택자의 자식 노드 중 제일 처음에 삽입
$('ol').prepend('<li>첫번째</li>');

// 형제 삽입
$('HTML태그').insertBefore('선택자'); //특정 엘리먼트 앞에 삽입
$('선택자').before('HTML태그'); //특정 엘리먼트 앞에 삽입

$('HTML태그').insertAfter('선택자'); //특정 엘리먼트 뒤에 삽입
$('선택자').after('HTML태그'); //특정 엘리먼트 뒤에 삽입


// 엘리먼트 복제
$('HTML태그').clone('선택자').appendTo('선택자'); //HTML태그를 복제하여 특정 엘리먼트에 삽입
$('#item').clone.appendTo('#subitem');

 

- DOM 엘리먼트 변경

// 선택자의 엘리먼트의 HTML 코드를 새롭게 대체
$('선택자').html('HTML태그')
var htmlCode = $('#content').html(); //파라미터 없을 시, 하위 HTML 반환
$('#contents').html('<p> 내용 대체 </p>');

// 선택자의 엘리먼트의 HTML 코드를 새롭게 대체
$('선택자').text('HTML태그')
var htmlCode = $('#content').text(); //파라미터 없을 시, 하위 TEXT 반환
$('#content').text('<p> 내용 대체 </p>');

// 값 가져오기
$('선택자').val('문자열')
var val = $('#id').val(); // 파라미터 없을 시, 값 반환
$('#id').val('값 대체');

> 파라미터가 없으면 해당하는 값을 반환한다.

 

- DOM 엘리먼트 제거

$('선택자').remove(); // 선택자에 해당하는 엘리먼트를 포함하여 모든 자식 제거
$('선택자').empty(); // 선택자에 해당하는 엘리먼트를 제외하고 모든 자식 제거

 

- DOM 탐색

//탐색 메소드 뒤에는 filter를 넣을 수 있음
// ex) children('p') : p 태그를 가진 자식 선택

$(this).children(); //모든 자식 선택, depth = 1 (자식만)
$(this).find(); //모든 자손 중 일치하는 것 선택, depth >= 1 (자식 및 자손 포함)

$(this).next(); //다음 형제 선택
$(this).nextAll(); //다음에 오는 모든 형제 선택

$(this).prev(); //이전 형제 선택
$(this).prevAll(); //이전에 오는 모든 형제 선택

$(this).siblings(); //자신을 제외한 형제 엘리먼트 선택

$(this).parent(); //부모 선택
$(this).parents(); //모든 조상 선택

예시

children()	1-3-1, 1-3-2, 1-3-3
find()	1-3-1, 1-3-2, 1-3-2-1, 1-3-3
next()	1-4
nextAll()	1-4, 1-5
prev()	1-2
prevAll()	1-1, 1-2
siblings()	1-1, 1-2, 1-4, 1-5
parent()	1
parents()	root, 1